:root{
  --bg:#0B0B0D;
  --bg-2:#0f1014;
  --panel:#121214;
  --elev:#16161a;
  --text:#F2F2F2;
  --muted:#C8C8C8;
  --gold:#D4AF37;
  --gold-2:#E7C96C;
  --line:#1e1f25;
  --radius:14px;
  --radius-lg:18px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --container:1240px;
  --speed:.22s;
}


/* Sticky footer layout */
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;          /* fill viewport */
  /* If your site uses a dark body background, keep it consistent: */
  background: #0f0f10;
}

/* Your main content should flex to fill space */
main, .container main, main.container {
  flex: 1 0 auto;
}

/* Footer sits at the bottom even on short pages */
.site-footer {
  margin-top: auto;
  /* optional: remove any accidental bottom border */
  border-bottom: 0;
}



*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.55; letter-spacing:.2px;
}
h1,h2,h3{font-family:"Playfair Display",serif; margin:0 0 10px; line-height:1.15}
h1{font-size:clamp(28px,3.2vw,48px)}
h2{font-size:clamp(22px,2.4vw,32px)}
h3{font-size:clamp(18px,2vw,24px)}
a{color:inherit; text-decoration:none}

.container{width:min(100%,var(--container)); margin:0 auto; padding:20px 22px}
.footer{opacity:.75; padding:28px 22px; text-align:center; border-top:1px solid var(--line)}

header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(to bottom, rgba(11,11,13,.9), rgba(11,11,13,.5) 70%, transparent);
  backdrop-filter:saturate(115%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.03);
}
header .bar{display:flex; gap:22px; align-items:center; justify-content:space-between; padding:12px 22px}
.brand{font-family:"Playfair Display",serif; font-weight:700; color:var(--gold); letter-spacing:.2px}
.nav{display:flex; gap:8px; align-items:center}
.nav a{padding:.45rem .7rem; border-radius:999px; border:1px solid transparent; transition:background var(--speed), border-color var(--speed)}
.nav a:hover{background:#101015; border-color:#22232a}
.nav .cta{background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:#1a1a1a; border:0; box-shadow:0 8px 22px rgba(212,175,55,.26)}
.nav .active{border-color:#33343d; background:#111116}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem .9rem; border-radius:999px; border:1px solid #262630; background:#0e0e12; color:var(--text); transition:transform var(--speed), border-color var(--speed), background var(--speed);}
.btn:hover{transform:translateY(-1px); border-color:#30303a}
.btn:active{transform:none}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold)); border:0; color:#121212}

.input, select.input, textarea.input{
  width:100%; padding:.72rem .9rem; border-radius:12px; border:1px solid #23232c; background:#0e0e12; color:var(--text);
  transition:border-color var(--speed), box-shadow var(--speed);
}
.input:focus, select.input:focus, textarea.input:focus{border-color:#343442; box-shadow:0 0 0 4px rgba(212,175,55,.12)}
label{display:block; margin:0 0 6px; font-size:12px; color:var(--muted); letter-spacing:.35px}

.card{background:#0e0e12; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px}
.card.flat{box-shadow:none}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 1000px){ .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 640px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

/* Hero */
.hero-wrap{position:relative; margin:8px 0 18px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background: radial-gradient(1000px 400px at 35% -10%, rgba(212,175,55,.15), transparent 60%), linear-gradient(180deg,#0e0e12,#0b0b0d);}
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:22px; align-items:center; padding:30px}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} }
.hero h1{margin-bottom:8px}
.hero p{color:var(--muted); max-width:60ch}
.hero .cta-row{display:flex; gap:10px; margin-top:14px}

/* Poster cards */
.poster{position:relative; border-radius:var(--radius); overflow:hidden; background:#0c0c10; border:1px solid #1c1c22}
/* Restore luxe shadow + keep gradient for readability */
.poster::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(180deg, rgba(11,11,13,0) 40%, rgba(11,11,13,.52) 100%);
  box-shadow: inset 0 -80px 120px rgba(0,0,0,.42);
}
.poster img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--speed); z-index:0}
a:hover .poster img{transform:scale(1.03)}
/* Keep text above overlay + pull it up a touch */
.poster .meta{position:absolute; left:10px; right:10px; bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; z-index:2; text-shadow:0 2px 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35)}
.poster .name{font-family:"Playfair Display",serif; text-shadow:0 2px 8px rgba(0,0,0,.6); z-index:2}
.badge{display:inline-flex; align-items:center; gap:.35rem; font-size:11px; padding:.15rem .5rem; border-radius:999px; color:#141414; background:linear-gradient(180deg,var(--gold-2),var(--gold)); box-shadow:0 8px 18px rgba(212,175,55,.25); z-index:2}

/* Aspect helpers */
.aspect-3x4{aspect-ratio:3/4}
.aspect-16x9{aspect-ratio:16/9}

/* Rails (horizontal scroll rows) */
.rail{position:relative}
.rail-track{display:grid; grid-auto-flow:column; gap:12px; overflow-x:auto; padding:6px 6px 10px; scroll-snap-type:x mandatory}
.rail-track::-webkit-scrollbar{height:10px}
.rail-track::-webkit-scrollbar-thumb{background:#1c1c22; border-radius:8px}
.rail .arrow{position:absolute; top:40%; transform:translateY(-50%); background:rgba(0,0,0,.45); border:1px solid #2a2a33; width:38px; height:38px; border-radius:999px; display:grid; place-items:center; cursor:pointer; user-select:none}
.rail .arrow:hover{background:rgba(0,0,0,.6)}
.rail .prev{left:6px} .rail .next{right:6px}

/* Admin tables */
table{width:100%; border-collapse:collapse}
thead th{color:var(--muted); text-align:left}
th,td{padding:.7rem .65rem; border-top:1px solid var(--line)}
tbody tr:hover{background:#101015}

/* Utilities */
.mb{margin-bottom:12px}
.center{display:grid; place-items:center}

/* ===== Add-on: subtle marble background (kept minimal & safe) ===== */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(11,11,13,.82), rgba(11,11,13,.82)),
    url("../images/bg/marble.webp"),
    url("/public/assets/images/bg/marble.webp");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:contrast(.95) brightness(.95);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(80% 60% at 100% 0%, rgba(212,175,55,.05), transparent 60%);
}



/* === Hero media: remove extra panel/box around the sliding girls === */
.hero .card,
.hero .hero-media,
.hero .poster,
.hero .swiper,
.hero .swiper-container,
.hero [class*="swiper"]{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Keep a nice rounded crop for the hero slider */
.hero .poster,
.hero .poster img{
  border-radius: var(--radius-lg);
}

/* A slightly lighter overlay in hero so the image feels clean */
.hero .poster::after{
  background: linear-gradient(180deg, rgba(11,11,13,0) 55%, rgba(11,11,13,.25) 100%) !important;
  box-shadow: inset 0 -60px 100px rgba(0,0,0,.28) !important;
}



/* ---- iOS tap highlight & focus polish (site-wide) ---- */

/* Keep an accessible focus ring for keyboard users */
:root { --focus-ring: 2px solid rgba(255,255,255,.35); }
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* On touch devices (iOS/Android), remove the white tap box */
@media (pointer: coarse) {
  /* iOS Safari tap highlight */
  * { -webkit-tap-highlight-color: transparent; }

  /* Also drop the default iOS control styling that can create white boxes */
  a, button, [role="button"] {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: none;
    background-clip: padding-box;
  }

  /* If your clickable “chips”/CTAs are anchors, include them too */
  .btn, .chip, .badge, .card a {
    -webkit-tap-highlight-color: transparent;
  }
}


/* Pagination */
.pagination{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:24px 0}
.pagination .pages{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination a,.pagination span{
  padding:8px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);color:#e9ebf0;text-decoration:none;font-size:14px
}
.pagination a:hover{background:rgba(255,255,255,.08)}
.pagination .active{background:#f0c44b;color:#171717;border-color:#f0c44b;font-weight:700}
.pagination .disabled{opacity:.45;pointer-events:none}
.pagination .dots{border:none;background:transparent;padding:8px 4px}
.pagination .prev,.pagination .next{font-weight:600}
.pagination .count{color:#aeb3be;font-size:12px}





/* ===== Footer ===== */
.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(80% 80% at 50% 0%, rgba(240,196,75,.06) 0%, rgba(0,0,0,0) 60%),
    rgba(18,18,18,.92);
  color:#e9ebf0;
  margin-top:40px;
}
.site-footer .container{max-width:1100px;margin:0 auto;padding:26px 16px;}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.2fr;
  gap:24px;
  align-items:flex-start;
}
.footer-brand .brand{
  display:inline-block;
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:22px;
  color:#fff;
  text-decoration:none;
  margin-bottom:8px;
}
.footer-brand .muted{color:#bfc3cc;}
.footer-social{display:flex;gap:10px;margin-top:10px}
.footer-social .soc{
  width:38px;height:38px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  color:#f0c44b;border:1px solid rgba(255,255,255,.12);
  transition:transform .15s ease, background .15s ease;
}
.footer-social .soc:hover{transform:translateY(-2px);background:rgba(255,255,255,.1);}

.footer-col h4{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:#cfd1d6;margin:2px 0 10px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-col a{color:#e9ebf0;text-decoration:none}
.footer-col a:hover{color:#fff}

.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  display:inline-block;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#e9ebf0;text-decoration:none;font-size:13px;
}
.tag:hover{border-color:#f0c44b;color:#171717;background:#f0c44b}

.small{font-size:12px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:18px;
  background:rgba(0,0,0,.25);
}
.fb-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px}
.fb-links a{color:#cfd1d6;text-decoration:none}
.fb-links a:hover{color:#fff}
.fb-links .dot{opacity:.5;margin:0 8px}

/* responsive */
@media (max-width: 900px){
  .footer-grid{grid-template-columns:1fr;gap:18px}
  .fb-row{flex-direction:column;gap:6px}
}