/* ============================================================
   Rich Art Production — Luxury Overrides v4.0
   Premium Cinematic Palette: Black · Dark Grey · White · Silver
   This file MUST load AFTER rich-art-production.css
   ============================================================ */

:root {
  /* ── Re-map "gold" → Silver luxury palette ───────────────── */
  --gold:          #BFC3C7;
  --gold-light:    #E8EBEE;
  --gold-dark:     #8B8F94;
  --gold-glow:     rgba(191,195,199,.18);
  --gold-glow2:    rgba(191,195,199,.08);

  /* ── Mono Cinema palette ──────────────────────────────────── */
  --rap-black:     #000000;
  --rap-night:     #050505;
  --rap-charcoal:  #0F0F11;
  --rap-graphite:  #1A1A1D;
  --rap-iron:      #232328;
  --rap-fog:       #6E7378;
  --rap-silver:    #BFC3C7;
  --rap-platinum:  #E8EBEE;
  --rap-white:     #FFFFFF;

  /* shadows */
  --shadow-gold:    0 8px 40px rgba(191,195,199,.18);
  --shadow-gold-lg: 0 16px 60px rgba(191,195,199,.28);
  --shadow-cine:    0 30px 80px -20px rgba(0,0,0,.70);
}

/* ── Selection ───────────────────────────────────────────── */
::selection { background: var(--rap-silver); color: var(--rap-black); }

/* ── Scrollbar — silver gradient ─────────────────────────── */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rap-fog), var(--rap-silver));
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--rap-silver), var(--rap-platinum));
}

/* ── Primary button — luxury silver-on-black ─────────────── */
.btn-primary {
  background: linear-gradient(135deg, #2A2A2E 0%, #0F0F11 100%) !important;
  color: var(--rap-white) !important;
  border: 1px solid rgba(191,195,199,.35) !important;
  box-shadow: var(--shadow-gold) !important;
  position: relative; overflow: hidden;
}
.btn-primary::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:hover {
  border-color: rgba(232,235,238,.6) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset !important;
  transform: translateY(-2px);
}

/* ── Section title accent — italic platinum ─────────────── */
.section-title em {
  font-style: italic !important;
  color: var(--rap-fog) !important;
  background: linear-gradient(180deg, var(--rap-silver), var(--rap-fog));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Eyebrow — refined letter-spacing ────────────────────── */
.section-eyebrow {
  color: var(--rap-silver) !important;
  letter-spacing: .42em !important;
  font-weight: 500 !important;
  font-size: .7rem !important;
}

/* ── Hero overlay — deeper cinematic blacks ──────────────── */
.hero-slide-overlay {
  background: linear-gradient(180deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.55) 35%,
    rgba(0,0,0,.45) 60%,
    rgba(0,0,0,.85) 100%) !important;
}
.hero-slide-bg {
  filter: grayscale(.20) contrast(1.05) brightness(.92) !important;
  transform: scale(1.06);
  transition: transform 8s ease, filter 1s ease;
}
.swiper-slide-active .hero-slide-bg { transform: scale(1.0); }

.hero-slide-title {
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}
.hero-slide-title em {
  background: linear-gradient(180deg, #fff, var(--rap-silver));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Service cards — luxury theme-aware design ─────────── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem !important;
}
.service-card {
  background: #101012 !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 8px !important;
  padding: 2.5rem 2rem !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
}
.service-card::before {
  content: '';
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--rap-silver, #c9a96e), #FFFFFF);
  transition: width .45s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card:focus-visible {
  outline: 2px solid #c9a96e !important;
  outline-offset: 4px !important;
  background: #161619 !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.45), 0 0 25px rgba(201,169,110,0.15) !important;
}
.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  margin-bottom: 1.5rem !important;
  background: linear-gradient(135deg, #1A1A1D, #2D2D33) !important;
  color: var(--rap-silver, #c9a96e) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transition: all 0.4s ease !important;
}
.service-name {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  transition: color 0.3s ease;
  letter-spacing: 0.01em !important;
}
.service-desc {
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 300 !important;
  color: #8A8F94 !important;
  margin-top: 0.75rem !important;
  line-height: 1.7 !important;
  transition: color 0.3s ease;
  flex: 1;
}
.service-learn {
  margin-top: 1.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--rap-silver, #c9a96e) !important;
  transition: all 0.3s ease !important;
  opacity: 0.6 !important;
}

/* Hover media query to prevent sticky states on mobile */
@media (hover: hover) {
  .service-card:hover {
    background: #161619 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 25px rgba(201, 169, 110, 0.12) !important;
  }
  .service-card:hover::before {
    width: 100%;
  }
  .service-card:hover .service-icon {
    transform: scale(1.08) rotate(-2deg) !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, var(--rap-silver, #c9a96e), var(--rap-fog, #7a7a7a)) !important;
  }
  .service-card:hover .service-name {
    color: var(--rap-silver, #c9a96e) !important;
  }
  .service-card:hover .service-desc {
    color: #C9C9CB !important;
  }
  .service-card:hover .service-learn {
    opacity: 1 !important;
    color: #FFFFFF !important;
    transform: translateX(4px) !important;
  }
  
  body.rap-light .service-card:hover {
    background: #FAFAF8 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 0 25px rgba(201, 169, 110, 0.05) !important;
  }
  body.rap-light .service-card:hover .service-icon {
    background: linear-gradient(135deg, #1A1A1D, #4E5256) !important;
    color: #FFFFFF !important;
  }
  body.rap-light .service-card:hover .service-name {
    color: #000000 !important;
  }
  body.rap-light .service-card:hover .service-desc {
    color: #2D2D33 !important;
  }
  body.rap-light .service-card:hover .service-learn {
    color: #000000 !important;
  }
}

/* Light Mode Overrides for Service Section */
body.rap-light .service-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}
body.rap-light .service-card::before {
  background: linear-gradient(90deg, #1A1A1D, var(--rap-silver, #c9a96e));
}
body.rap-light .service-card:focus-visible {
  outline: 2px solid #1A1A1D !important;
  outline-offset: 4px !important;
  background: #FAFAF8 !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 0 25px rgba(201, 169, 110, 0.08) !important;
}
body.rap-light .service-icon {
  background: linear-gradient(135deg, #F5F3EF, #FAFAF8) !important;
  color: #1A1A1D !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.04) !important;
}
body.rap-light .service-name {
  color: #1A1A1D !important;
}
body.rap-light .service-desc {
  color: #5E6266 !important;
}
body.rap-light .service-learn {
  color: #5E6266 !important;
}

/* ── Gallery hover — premium reveal ──────────────────────── */
.gallery-item {
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.gallery-item .gallery-img {
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s ease;
  filter: grayscale(.10);
}
.gallery-item:hover .gallery-img {
  transform: scale(1.08);
  filter: grayscale(0) contrast(1.05);
}
.gallery-overlay {
  background: linear-gradient(0deg, rgba(0,0,0,.78), transparent 60%) !important;
}

/* ── Stats — luxury typographic treatment ────────────────── */
.stats-strip {
  background: #0A0A0C !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  position: relative;
  overflow: hidden;
}
.stats-grid {
  background: rgba(255, 255, 255, 0.06) !important;
  gap: 1px !important;
}
.stat-item {
  background: #0F0F11 !important;
  padding: 2.5rem 1.5rem !important;
  transition: background 0.4s ease, transform 0.4s ease !important;
}
.stat-item:hover {
  background: #161619 !important;
  transform: translateY(-2px);
}
.stat-val {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  background: linear-gradient(180deg, #FFFFFF, var(--rap-silver)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: block;
  font-size: clamp(2.5rem, 5vw, 3.8rem) !important;
  line-height: 1 !important;
}
.stat-label {
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-top: 0.8rem !important;
  display: block;
}

/* Light Mode (Day Mode) Overrides for Stats Section */
body.rap-light .stats-strip {
  background: #F5F3EF !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.rap-light .stats-grid {
  background: rgba(0, 0, 0, 0.06) !important;
}
body.rap-light .stat-item {
  background: #FFFFFF !important;
}
body.rap-light .stat-item:hover {
  background: #FAFAF8 !important;
}
body.rap-light .stat-val {
  background: linear-gradient(180deg, #1A1A1D, #5E6266) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body.rap-light .stat-label {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* ── Showreel / dark sections — cinematic grain ──────────── */
.showreel-section, .testimonials-section, .awards-section {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(191,195,199,.07), transparent 60%),
    linear-gradient(180deg, #0a0a0c, #050506) !important;
  position: relative;
}
.showreel-section::after,
.testimonials-section::after,
.awards-section::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity:.6;
}

/* ── Awards — silver-rimmed glass ────────────────────────── */
.award-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(191,195,199,.14) !important;
  backdrop-filter: blur(8px);
}
.award-card:hover {
  border-color: rgba(191,195,199,.32) !important;
  transform: translateY(-4px);
}
.award-icon {
  background: linear-gradient(135deg, var(--rap-silver), var(--rap-fog)) !important;
  color: var(--rap-black) !important;
}

/* ── Booking form — luxury inputs ────────────────────────── */
.form-control {
  border-radius: 2px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.85) !important;
  transition: all .35s ease !important;
}
.form-control:focus {
  border-color: var(--rap-charcoal) !important;
  box-shadow: 0 0 0 3px rgba(15,15,17,.08) !important;
  background: #fff !important;
}

/* ── Footer — true cinema black ──────────────────────────── */
footer { background: #000 !important; }
.footer-link:hover { color: var(--rap-silver) !important; }

/* ── WhatsApp Float — keep brand green but luxe rim ──────── */
#wa-float {
  box-shadow: 0 10px 30px rgba(37,211,102,.35),
              0 0 0 1px rgba(255,255,255,.08) inset !important;
}

/* ── Cinematic page transitions ──────────────────────────── */
body.rap-ready section { animation: rapReveal .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rapReveal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── AI Chat widget ──────────────────────────────────────── */
#rap-chat-fab {
  position: fixed; bottom: 100px; right: 24px; z-index: 1500;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #1a1a1d, #0a0a0c);
  border: 1px solid rgba(191,195,199,.32);
  color: var(--rap-silver); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: all .3s ease;
}
#rap-chat-fab:hover { transform: translateY(-3px) scale(1.05); color: #fff; }
#rap-chat-panel {
  position: fixed; bottom: 100px; right: 24px; z-index: 1600;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  background: linear-gradient(180deg, #0a0a0c, #050506);
  border: 1px solid rgba(191,195,199,.18);
  border-radius: 14px;
  display: none; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
}
#rap-chat-panel.open { display: flex; animation: rapChatIn .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rapChatIn { from { opacity:0; transform: translateY(20px) scale(.96);} to { opacity:1; transform: none;} }
.rap-chat-head {
  padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-between;
}
.rap-chat-head h4 {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  color: #fff; font-size: 1.05rem; letter-spacing: .04em;
}
.rap-chat-head small { color: var(--rap-silver); font-size: .65rem; letter-spacing: .28em; text-transform: uppercase; }
.rap-chat-close { background: transparent; border: 0; color: var(--rap-fog); cursor: pointer; font-size: 1.1rem; }
.rap-chat-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.rap-chat-msg { padding: 10px 14px; border-radius: 14px; font-size: .85rem; line-height: 1.5; max-width: 85%; }
.rap-chat-msg.bot { background: rgba(255,255,255,.05); color: #e8ebee; border: 1px solid rgba(255,255,255,.05); align-self: flex-start; border-bottom-left-radius: 4px; }
.rap-chat-msg.user { background: linear-gradient(135deg, var(--rap-silver), var(--rap-platinum)); color: var(--rap-black); align-self: flex-end; border-bottom-right-radius: 4px; }
.rap-chat-msg.typing { opacity: .7; font-style: italic; }
.rap-chat-input { display: flex; gap: 8px; padding: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.rap-chat-input input { flex: 1; padding: 10px 14px; border-radius: 24px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: #fff; font-size: .85rem; outline: none; }
.rap-chat-input input:focus { border-color: var(--rap-silver); }
.rap-chat-input button { padding: 8px 14px; border-radius: 50%; width: 40px; height: 40px; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--rap-silver), var(--rap-platinum)); color: var(--rap-black); }

/* ── Cookie consent ──────────────────────────────────────── */
#rap-cookie {
  position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 2000;
  max-width: 560px; margin: 0 auto;
  background: rgba(10,10,12,.96); color: #e8ebee;
  border: 1px solid rgba(191,195,199,.18); border-radius: 12px;
  padding: 14px 18px; font-size: .82rem;
  display: none; align-items: center; gap: 14px; justify-content: space-between;
  backdrop-filter: blur(12px);
}
#rap-cookie.show { display: flex; animation: rapChatIn .4s both; }
#rap-cookie button {
  padding: 8px 18px; border-radius: 24px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--rap-silver), var(--rap-platinum));
  color: var(--rap-black); font-weight: 600; font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase;
}

/* ── Mobile floating buttons spacing fix ─────────────────── */
@media (max-width: 640px) {
  #rap-chat-fab { bottom: 90px; right: 16px; width: 50px; height: 50px; }
  #wa-float { bottom: 24px; right: 16px; }
  #rapBackTop { bottom: 156px; right: 16px; }
}

/* ── Sticky Navbar Scrolled style overrides ─────────────────── */
#navbar {
  transition: background 0.4s ease, border 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease !important;
}
#navbar.scrolled {
  background: rgba(10, 10, 12, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}
body.rap-light #navbar.scrolled {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
}