/* ═══════════════════════════════════════════
   MULTILING STUDIO — GIG PAGE CSS
   Styles specific to service/gig pages
═══════════════════════════════════════════ */

/* ── BREADCRUMB ──────────────────────────── */
.breadcrumb {
  max-width:var(--max-w); margin:0 auto;
  padding:18px 28px 0;
  display:flex; align-items:center; gap:6px;
  flex-wrap:wrap;
}
.breadcrumb a {
  font-size:.8rem; color:var(--c-muted);
  transition:color var(--tf);
}
.breadcrumb a:hover { color:var(--c-gold); }
.breadcrumb span { font-size:.8rem; color:var(--c-border); }
.breadcrumb .current { font-size:.8rem; color:var(--c-text); font-weight:500; }

/* ── GIG HEADER ──────────────────────────── */
.gig-header {
  max-width:var(--max-w); margin:0 auto;
  padding:28px 28px 0;
}
.gig-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.68rem; font-weight:700; color:var(--c-gold);
  letter-spacing:.15em; text-transform:uppercase;
  margin-bottom:12px;
}
.gig-badge .dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--c-gold); display:inline-block;
}
.gig-title {
  font-family:var(--f-d);
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:700; color:var(--c-text);
  line-height:1.1; margin-bottom:14px;
}
.gig-meta {
  display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; margin-bottom:8px;
}
.gig-stars { color:var(--c-gold); font-size:.95rem; letter-spacing:2px; }
.gig-rating { font-size:.85rem; color:var(--c-muted); }

/* ── GIG LAYOUT ──────────────────────────── */
.gig-wrap {
  max-width:var(--max-w); margin:0 auto;
  padding:32px 28px 80px;
  display:grid;
  grid-template-columns:1fr 400px;
  gap:44px; align-items:start;
}

/* ── GIG LEFT ────────────────────────────── */
.gig-gallery {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin-bottom:36px;
}
.gig-thumb {
  aspect-ratio:4/3; border-radius:var(--r); overflow:hidden;
  cursor:pointer; position:relative;
  border:1px solid var(--c-border);
  background:var(--c-surface2);
  transition:transform var(--tf), box-shadow var(--tb);
}
.gig-thumb:hover { transform:scale(1.02); box-shadow:0 8px 24px rgba(0,0,0,.4); }
.gig-thumb img { width:100%; height:100%; object-fit:cover; }
.gig-thumb__overlay {
  position:absolute; inset:0;
  background:rgba(9,22,36,.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--tb);
  font-size:1.5rem;
}
.gig-thumb:hover .gig-thumb__overlay { opacity:1; }

/* ── LIGHTBOX ────────────────────────────── */
.lightbox {
  display:none; position:fixed; inset:0; z-index:800;
  background:rgba(0,0,0,.92); backdrop-filter:blur(10px);
  align-items:center; justify-content:center;
  padding:20px;
}
.lightbox.is-open { display:flex; }
.lightbox img {
  max-width:90vw; max-height:85vh;
  object-fit:contain; border-radius:var(--r);
  box-shadow:0 20px 60px rgba(0,0,0,.8);
}
.lightbox__close {
  position:absolute; top:20px; right:20px;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#fff; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--tb);
}
.lightbox__close:hover { background:rgba(255,255,255,.2); }

/* ── CONTENT SECTIONS ────────────────────── */
.gig-section { margin-bottom:32px; }
.gig-section h3 {
  font-family:var(--f-d); font-size:1.3rem;
  font-weight:700; color:var(--c-text);
  margin-bottom:14px; padding-bottom:10px;
  border-bottom:1px solid var(--c-border);
}
.gig-desc p {
  font-size:.925rem; color:var(--c-muted);
  line-height:1.8; margin-bottom:12px;
}
.gig-includes {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.gig-includes li {
  display:flex; align-items:flex-start; gap:8px;
  font-size:.875rem; color:var(--c-muted); line-height:1.5;
}
.gig-includes li::before {
  content:'✓'; color:var(--c-gold); font-weight:700;
  font-size:.85rem; flex-shrink:0; margin-top:1px;
}
.gig-process { display:flex; flex-direction:column; gap:12px; }
.gig-step {
  display:flex; align-items:flex-start; gap:14px;
}
.gig-step__num {
  width:28px; height:28px; border-radius:50%;
  background:var(--c-gold-glow); border:1px solid rgba(212,168,67,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; color:var(--c-gold);
  flex-shrink:0; margin-top:1px;
}
.gig-step__text { font-size:.875rem; color:var(--c-muted); line-height:1.6; }
.gig-step__text strong { color:var(--c-text); }

/* ── PRICING CARD (right) ────────────────── */
.gig-right { position:sticky; top:calc(var(--nav-h) + 24px); }

.pricing-card {
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--rl);
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
}

/* Tab buttons */
.pkg-tabs {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--c-border);
}
.pkg-tab {
  padding:12px 8px; font-size:.72rem; font-weight:700;
  color:var(--c-muted); letter-spacing:.08em;
  text-transform:uppercase; text-align:center;
  border-right:1px solid var(--c-border);
  transition:color var(--tb), background var(--tb);
  cursor:pointer;
}
.pkg-tab:last-child { border-right:none; }
.pkg-tab:hover { color:var(--c-text); background:var(--c-surface2); }
.pkg-tab.active {
  color:var(--c-gold); background:var(--c-gold-glow);
  border-bottom:2px solid var(--c-gold);
  margin-bottom:-1px;
}

/* Tab panels */
.pkg-panels { padding:24px; }
.pkg-panel { display:none; }
.pkg-panel.active { display:block; }

.pkg-name {
  font-family:var(--f-d); font-size:1.4rem;
  font-weight:700; color:var(--c-text);
  margin-bottom:4px;
}
.pkg-stars { color:var(--c-gold); font-size:.85rem; margin-bottom:14px; }
.pkg-price {
  font-family:var(--f-d); font-size:2.4rem;
  font-weight:700; color:var(--c-gold);
  line-height:1; margin-bottom:4px;
}
.pkg-price span { font-size:1rem; font-weight:400; color:var(--c-muted); }
.pkg-divider {
  height:1px; background:var(--c-border);
  margin:14px 0;
}
.pkg-features {
  display:flex; flex-direction:column;
  gap:8px; margin-bottom:14px;
}
.pkg-features li {
  display:flex; align-items:flex-start; gap:8px;
  font-size:.855rem; color:var(--c-muted); line-height:1.5;
}
.pkg-features li::before {
  content:'✓'; color:var(--c-gold); font-weight:700;
  font-size:.8rem; flex-shrink:0; margin-top:1px;
}
.pkg-meta {
  display:flex; justify-content:space-between;
  font-size:.78rem; color:var(--c-muted);
  padding:10px 0; border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  margin-bottom:16px;
}
.pkg-meta span strong { color:var(--c-text); }

/* Purchase button */
.btn-purchase {
  display:block; width:100%; padding:14px;
  background:var(--c-gold); color:#091624;
  font-size:.8rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:var(--r); text-align:center;
  transition:background var(--tb), transform var(--tf), box-shadow var(--tb);
  cursor:pointer; border:none; font-family:inherit;
}
.btn-purchase:hover {
  background:var(--c-gold-dim); transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(212,168,67,.35);
}

/* Pay Later Info Box */
.pay-later-box {
  margin-top:14px;
  background:var(--c-gold-glow);
  border:1px solid rgba(212,168,67,.22);
  border-radius:var(--r); padding:14px 16px;
  font-size:.8rem; color:var(--c-muted); line-height:1.7;
}
.pay-later-box strong { color:var(--c-gold); }
.pay-later-box .pl-icon { font-size:.9rem; margin-right:4px; }

/* ── RESPONSIVE ──────────────────────────── */
@media(max-width:900px){
  .gig-wrap { grid-template-columns:1fr; gap:32px; }
  .gig-right { position:static; }
}
@media(max-width:600px){
  .gig-gallery { grid-template-columns:repeat(2,1fr); }
  .gig-includes { grid-template-columns:1fr; }
  .gig-header, .gig-wrap, .breadcrumb { padding-left:16px; padding-right:16px; }
}

/* ── ORDER GUIDE ─────────────────────────── */
.order-guide { background:var(--c-surface2); border-radius:var(--r-lg); padding:24px; }
.order-steps { display:flex; flex-direction:column; gap:18px; margin:16px 0; }
.order-step  { display:flex; gap:14px; align-items:flex-start; }
.os-num {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:var(--c-gold); color:#091624;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; margin-top:2px;
}
.os-body { flex:1; }
.os-body strong { font-size:.9rem; color:var(--c-text); display:block; margin-bottom:5px; }
.os-body p  { font-size:.845rem; color:var(--c-muted); line-height:1.7; margin:0; }
.os-link { color:var(--c-gold); font-weight:600; }
.os-checklist {
  margin-top:8px; padding-left:4px;
  display:flex; flex-direction:column; gap:5px; list-style:none;
}
.os-checklist li { font-size:.82rem; color:var(--c-muted); }
.order-note {
  background:var(--c-gold-glow); border:1px solid rgba(212,168,67,.25);
  border-radius:var(--r); padding:12px 16px;
  font-size:.82rem; color:var(--c-muted); line-height:1.65;
}
.order-note strong { color:var(--c-gold); }

/* ── GIG STATUS STYLES ───────────────────── */
.gig-slot-indicator {
  padding: 12px 24px 0;
  min-height: 10px;
}
.slot-label {
  font-size: .78rem; color: var(--c-muted);
  margin-bottom: 6px; font-weight: 500;
}
.slot-bar-wrap { }
.slot-bar {
  height: 6px; background: var(--c-surface2);
  border-radius: 3px; overflow: hidden;
}
.slot-fill {
  height: 100%; border-radius: 3px;
  transition: width .5s ease;
}
.slot-full {
  font-size: .82rem; font-weight: 700; color: var(--c-red, #E53935);
  background: rgba(229,57,53,.1); border: 1px solid rgba(229,57,53,.25);
  border-radius: 8px; padding: 10px 14px; text-align: center;
}

/* ── FULLY BOOKED BUTTON ─────────────────── */
.btn-purchase.fully-booked {
  background: var(--c-surface2) !important;
  color: #E53935 !important;
  cursor: not-allowed !important;
  border: 2px solid rgba(229,57,53,.4) !important;
  opacity: .9;
}
.btn-purchase.fully-booked:hover {
  transform: none !important;
  box-shadow: none !important;
}
.btn-purchase.shake {
  animation: shakeBtn .5s ease;
}
@keyframes shakeBtn {
  0%,100%{ transform: translateX(0); }
  15%     { transform: translateX(-6px); }
  30%     { transform: translateX(6px); }
  45%     { transform: translateX(-4px); }
  60%     { transform: translateX(4px); }
  75%     { transform: translateX(-2px); }
  90%     { transform: translateX(2px); }
}

/* ── LANGUAGE PRICE NOTE ─────────────────── */
.lang-price-note {
  font-size: .75rem; color: var(--c-muted);
  margin-top: 8px; font-style: italic;
  transition: color .2s, font-weight .2s;
}