/* ============================================================
   DCP Cinema Service — Stylesheet
   ============================================================ */

:root {
  --orange:      #ff6600;
  --orange-dark: #cc4400;
  --cinema-bg:   #0d0d0d;
  --card-bg:     #1a1a1a;
  --card-border: #2a2a2a;
}

/* ---- Global ------------------------------------------------ */
body {
  background: var(--cinema-bg);
  color: #e0e0e0;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.bg-dark-cinema { background: #111 !important; }

/* ---- Orange Utilities -------------------------------------- */
.text-orange     { color: var(--orange) !important; }
.bg-orange       { background: var(--orange) !important; }
.btn-orange      { background: var(--orange); color: #fff; border: none; }
.btn-orange:hover{ background: var(--orange-dark); color: #fff; }
.btn-outline-orange {
  color: var(--orange);
  border: 1px solid var(--orange);
  background: transparent;
}
.btn-outline-orange:hover {
  background: var(--orange);
  color: #fff;
}

/* ---- Navbar ------------------------------------------------ */
.navbar-brand { font-size: 1.3rem; letter-spacing: .5px; }

/* ---- Hero -------------------------------------------------- */
.hero {
  background: linear-gradient(135deg, #0d0d0d 0%, #1a0a00 50%, #0d0d0d 100%);
  padding: 100px 0;
  border-bottom: 1px solid var(--card-border);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('/assets/img/film-grain.svg') repeat;
  opacity: .04;
  pointer-events: none;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
.hero .lead { font-size: 1.2rem; color: #aaa; }

/* ---- Cards ------------------------------------------------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  color: #e0e0e0;
}
.card-header { background: #222; border-bottom: 1px solid var(--card-border); }

/* ---- Paket-Karten ----------------------------------------- */
.package-card {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  padding: 32px 24px;
  transition: border-color .2s, transform .2s;
  height: 100%;
}
.package-card:hover, .package-card.selected {
  border-color: var(--orange);
  transform: translateY(-4px);
}
.package-card.featured { border-color: var(--orange); }
.package-price { font-size: 2.4rem; font-weight: 800; color: var(--orange); }
.package-price sup { font-size: 1rem; top: -1rem; }
.package-badge {
  background: var(--orange);
  color: #fff;
  font-size: .75rem;
  padding: 2px 10px;
  border-radius: 20px;
  font-weight: 600;
}

/* ---- Process Steps ---------------------------------------- */
.step-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #1f1f1f;
  border: 2px solid var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto 16px;
  color: var(--orange);
}

/* ---- Upload Box ------------------------------------------- */
.upload-zone {
  border: 2px dashed var(--card-border);
  border-radius: 12px;
  padding: 60px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.upload-zone:hover, .upload-zone.dragging {
  border-color: var(--orange);
  background: rgba(255,102,0,.06);
}
.upload-zone i { font-size: 3rem; color: #444; margin-bottom: 16px; }

/* ---- Progress --------------------------------------------- */
.progress { background: #222; }
.progress-bar { background: var(--orange); }

/* ---- Table ------------------------------------------------ */
.table-dark {
  --bs-table-bg: var(--card-bg);
  --bs-table-border-color: var(--card-border);
  --bs-table-striped-bg: #1f1f1f;
}

/* ---- Forms ------------------------------------------------ */
.form-control, .form-select {
  background: #1f1f1f;
  border-color: var(--card-border);
  color: #e0e0e0;
}
.form-control:focus, .form-select:focus {
  background: #252525;
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 0 0 .2rem rgba(255,102,0,.25);
}
.form-control::placeholder { color: #555; }

/* ---- Badges ----------------------------------------------- */
.badge.bg-info    { color: #000 !important; }

/* ---- Sections --------------------------------------------- */
section { padding: 80px 0; }
.section-title { font-size: 2rem; font-weight: 700; margin-bottom: 48px; }

/* ---- Dashboard stats -------------------------------------- */
.stat-box {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
}
.stat-box .stat-num { font-size: 2.5rem; font-weight: 800; color: var(--orange); }

/* ---- Scrollbar -------------------------------------------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }