/*
Theme Name: RizzMax – Brazzers Style
Description: Brazzers-style front with hero slider, tiles, promo banner, Join Now page, and 18+ age gate.
Version: 2.3.5
Text Domain: rizzmax-brazzers-style
*/
:root{ --rmx-gold:#f5c84b; --rmx-char:#0b0b0b; --rmx-white:#ffffff; --hero-desk-h:550; --hero-mob-h:760; }
*{ box-sizing:border-box } html,body{ background:#000; } body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif; color:#ddd }

/* Header */
.header{ position:sticky; top:0; z-index:50; background:#080808; border-bottom:1px solid #141414 }
.header .wrap{ max-width:1200px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between }
.brand a{ color:#fff; text-decoration:none; font-weight:900; letter-spacing:.3px; font-size:22px }
.brand b{ color:var(--rmx-gold) }
.header .nav a{ color:#fff; text-decoration:none; margin-left:18px; font-weight:800 }
.header .vip-btn{ background:transparent; color:#fff; font-weight:900; padding:10px 16px; border-radius:10px; border:2px solid var(--rmx-gold); display:inline-flex; gap:8px; text-decoration:none }

/* Container */
.container{ max-width:1200px; margin:0 auto; padding:16px }

/* Hero size presets (desktop/tablet) */
.hero-size-normal{ --hero-desk-h: 550; }
.hero-size-large{  --hero-desk-h: 700; }
.hero-size-xlarge{ --hero-desk-h: 901; }

/* Hero */
.rmx-hero{ position:relative; }
.rmx-hero .track{ display:flex; overflow:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.rmx-hero .track::-webkit-scrollbar{ display:none }
.rmx-hero .slide{ scroll-snap-align:start; flex:0 0 100%; position:relative }
.rmx-hero .frame{ width:100% }
@media (min-width: 769px){ .rmx-hero .frame{ aspect-ratio: 1920 / var(--hero-desk-h) } }
@media (max-width: 768px){ .rmx-hero .frame{ aspect-ratio: 640 / var(--hero-mob-h) } }
.rmx-hero .frame picture>img, .rmx-hero .frame>img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; border-radius:10px }
.rmx-hero .overlay{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center; pointer-events:none }
.rmx-hero .overlay.h-left{ justify-content:flex-start; padding-left:4% }
.rmx-hero .overlay.h-right{ justify-content:flex-end;  padding-right:4% }
.rmx-hero .overlay.v-top{ align-items:flex-start; padding-top:4% }
.rmx-hero .overlay.v-bottom{ align-items:flex-end;  padding-bottom:4% }
.rmx-hero .overlay .rmx-cta.badge{ background:var(--cta-bg, var(--rmx-gold)); color:var(--cta-fg, #000); font-weight:900; padding:10px 16px; border-radius:10px; display:inline-flex; gap:6px; text-decoration:none; pointer-events:auto; opacity:var(--opa,1) }
.rmx-hero .dots{ display:flex; gap:8px; justify-content:center; margin:10px 0 0 }
.rmx-hero .dot{ width:8px; height:8px; border-radius:999px; background:#4d4d4d }
.rmx-hero .dot.active{ background:var(--rmx-gold) }

/* Hero arrows & drag */
.rmx-hero .hprev,.rmx-hero .hnext{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:12px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; z-index:5; }
.rmx-hero .hprev{ left:8px } .rmx-hero .hnext{ right:8px }
.rmx-hero .track.grabbing{ cursor:grabbing }

/* Promo banner */
.rmx-promo{ margin:14px 0 6px }
.rmx-promo .wrap{ position:relative; width:100%; border-radius:26px; overflow:hidden; border:1px solid #222 }
.rmx-promo .bg{ width:100%; display:block; object-fit:cover }
.rmx-promo .bar{ width:100%; display:flex; align-items:center; justify-content:center; font-weight:900; letter-spacing:1px }
.rmx-promo .bar span{ color:var(--p-txt,#111) }
.rmx-promo a, .rmx-promo a *{ text-decoration:none }
.rmx-promo.size-xs .bg, .rmx-promo.size-xs .bar{ height:70px }
.rmx-promo.size-sm .bg, .rmx-promo.size-sm .bar{ height:100px }
.rmx-promo.size-md .bg, .rmx-promo.size-md .bar{ height:150px }
.rmx-promo.size-lg .bg, .rmx-promo.size-lg .bar{ height:200px }
@media (max-width:768px){ .rmx-promo.size-xs .bg, .rmx-promo.size-xs .bar{ height:140px } .rmx-promo.size-sm .bg, .rmx-promo.size-sm .bar{ height:223px } .rmx-promo.size-md .bg, .rmx-promo.size-md .bar{ height:260px } .rmx-promo.size-lg .bg, .rmx-promo.size-lg .bar{ height:320px } }

/* Tiles */
.rmx-tiles{ position:relative; margin:22px 0 12px }
.rmx-tiles .row{ display:flex; gap:14px; overflow:auto; scroll-snap-type:x mandatory; padding:2px 4px; scrollbar-width:none }
.rmx-tiles .row::-webkit-scrollbar{ display:none }
.rmx-tiles .card{ scroll-snap-align:start; flex:0 0 calc((100% - 48px)/4); background:#0f0f0f; border:1px solid #222; border-radius:14px; overflow:hidden }
.rmx-tiles a{ text-decoration:none }
.rmx-tiles img{ width:100%; height:180px; object-fit:cover; display:block }
.rmx-tiles .meta{ padding:10px 12px; background:transparent }
.rmx-tiles .meta .t{ color:#fff; font-weight:800 }
.rmx-tiles .meta .s{ color:#bdbdbd; font-size:13px; margin-top:2px }
@media (max-width:1024px){ .rmx-tiles .card{ flex-basis:46vw } .rmx-tiles img{ height:160px } }
@media (max-width:640px){ .rmx-tiles .card{ flex-basis:88vw } .rmx-tiles img{ height:150px } }

/* Tile arrows */
.rmx-tiles .tprev,.rmx-tiles .tnext{ position:absolute; top:40%; transform:translateY(-50%); width:38px; height:38px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); border-radius:10px; color:#fff; font-size:22px; line-height:36px; text-align:center; cursor:pointer }
.rmx-tiles .tprev{ left:-4px } .rmx-tiles .tnext{ right:-4px }

/* Join Now page */
.rmx-join{ max-width:1100px; margin:24px auto; background:#0b0b0b; border:1px solid #1a1a1a; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.35) }
.rmx-join .top-banner{ margin:12px 0 18px }
.rmx-join .top-banner .wrap{ display:block; border-radius:18px; overflow:hidden; border:1px solid #222 }
.rmx-join .top-banner img{ width:100%; height:auto; display:block; }
.rmx-join .hero{ background:linear-gradient(45deg,#1a1a1a,#121212); padding:36px 38px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; justify-content:space-between; border-bottom:1px solid #202020 }
.rmx-join h1{ color:#fff; margin:0; font-size:40px }
.rmx-join .price{ font-weight:900; color:var(--rmx-gold); font-size:30px }
.rmx-join .cta{ background:transparent; border:3px solid var(--rmx-gold); color:#fff; font-weight:900; padding:12px 18px; border-radius:12px; text-decoration:none }
.rmx-join .body{ display:grid; grid-template-columns: 1.2fr .8fr; gap:30px; padding:26px 30px }
.rmx-join .benefits{ background:#0e0e0e; border:1px solid #1c1c1c; border-radius:14px; padding:16px }
.rmx-join .benefits h3{ margin:0 0 10px; color:#fff }
.rmx-join .benefits ul{ margin:0; padding-left:18px; color:#cfcfcf; line-height:1.6 }
.rmx-join .cta-big{ display:inline-block; margin-top:14px; background:transparent; border:3px solid var(--rmx-gold); color:#fff; font-weight:900; padding:14px 20px; border-radius:12px; text-decoration:none }
.rmx-join .gallery{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px; margin:16px 30px 26px }
.rmx-join .gallery .cell{ background:#0e0e0e; border:1px solid #1c1c1c; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center }
.rmx-join .gallery .cell img{ width:100%; height:auto; display:block; }
@media (max-width:899px){ .rmx-join .body{ display:block } .rmx-join .gallery{ grid-template-columns: repeat(2, minmax(0,1fr)); margin:16px } }

/* Age gate */
.rmx-agegate{ position:fixed; inset:0; background:rgba(0,0,0,.92); backdrop-filter:saturate(120%) blur(2px); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px }
.rmx-agegate .card{ width:min(640px, 92vw); background:#0b0b0b; border:1px solid #1a1a1a; border-radius:16px; padding:24px; color:#eee; text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.5) }
.rmx-agegate h2{ margin:0 0 8px; color:#fff; font-size:28px }
.rmx-agegate p{ color:#cfcfcf; line-height:1.6; margin:0 0 16px }
.rmx-agegate .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px }
.rmx-agegate .btn{ cursor:pointer; border-radius:12px; padding:12px 16px; font-weight:900; text-decoration:none; display:inline-block }
.rmx-agegate .btn-yes{ background:transparent; border:3px solid var(--rmx-gold); color:#fff }
.rmx-agegate .btn-no{ background:#1a1a1a; border:1px solid #292929; color:#ddd }

/* v2.3.3 Join Now spacing tweak */
.page-template-page-join-now .container{ padding-top:0 !important; }
.page-template-page-join-now .rmx-join{ margin-top:0 !important; }
.page-template-page-join-now .rmx-join .top-banner{ margin-top:0 !important; }


/* v2.3.4: Bigger Join Now gallery on mobile */
@media (max-width:640px){
  .rmx-join .gallery{ grid-template-columns: 1fr !important; }
}