#model-popup{display:none;}
.modalArea{position:fixed;top:0;left:0;display:flex;justify-content: center;align-items: center;width:100vw;height:100vh;background:#666666d9;overflow:hidden;z-index:99;}
.modalArea .modal{}
.modalArea .modal .wrapper{}
.modalArea .modal hr{display:block;border:0;width:100%;height:1px;margin:10px 0;background:#fff;}

/**/
body.term-f .button-female{background: #0177e5;}
body.term-m .button-male{background: #0177e5;}
body.term-c .button-couple{background: #0177e5;}
body.term-t .button-trans{background: #0177e5;}

/**/
header{}
header .logo{width:190px;}
header .search{display:flex;width:250px;}
header .search form{width:100%;display:flex;height:38px;}
.flex-area-header{display:flex;align-items: center;justify-content: space-between;width: 100%;}

/**/
.banner-area{max-width:360px;margin:0 0 0 20px;}
.header-banner{display:block;margin:0 auto;}
.header-banner img{display:block;width:100%;height:auto;max-width:468px;margin:0 auto;}

/**/
.filter-items{width:100%;display:flex;flex-wrap:wrap;gap:8px;}
.filter-items .filter-item{display:flex;align-items:center;padding:4px 8px;color:#fff;font-weight:400;background:#000;border-radius:5px;font-size:14px;}
.filter-items .filter-item .remove-filter{display:block;font-size:24px;font-weight:700;padding:0 4px;line-height:21px;}

/**/
.bg-primary-color {background-color:#0177e5;background-color: var(--base-color-3);}

@media screen and (max-width:900px){
  html{}
  header{padding:8px!important;}
  .mobil-view-none{display:none;}
  header .search{display:none;}
}

/* F3 — Nav drawer: CSS transform slide-in; JS adds/removes .is-open */
.nav-drawer{display:block;transform:translateX(-100%);transition:transform 0.3s ease;}
.nav-drawer.is-open{transform:translateX(0);}
/* Drawer overlay — dark backdrop behind the drawer */
#nav-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:59;}
#nav-drawer-overlay.is-open{display:block;}
/* Hamburger button — only visible on mobile (<768px) */
.hamburger-btn{display:none;background:transparent;border:none;cursor:pointer;padding:6px;}
@media screen and (max-width:767px){
  .hamburger-btn{display:inline-flex;align-items:center;justify-content:center;}
}

/* F5 — Thumb-size toggle: highlight the active button */
.grid-button[aria-pressed="true"]{background-color:var(--base-color-3);color:#fff;}

/* F8 — Gender badge base layout: shown in room card near model name */
/* Colors are defined in src/tailwind.css (Tailwind layer) — do not duplicate here. */
.gender-badge{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:9999px;font-size:0.625rem;font-weight:700;line-height:1;flex-shrink:0;}

/* Static WP Pages (page.php) — typography for editor content on dark theme.
   Tailwind preflight strips list bullets and heading sizes, so we restore them
   only inside .cs-page__content to avoid affecting the rest of the site. */
.cs-page{max-width:800px;}
.cs-page__header{margin-bottom:1.5rem;}
.cs-page__title{font-size:1.875rem;line-height:1.2;font-weight:700;margin:0;}
@media (min-width:640px){.cs-page__title{font-size:2.25rem;}}
.cs-page__content{font-size:1rem;line-height:1.7;}
.cs-page__content h1,
.cs-page__content h2,
.cs-page__content h3,
.cs-page__content h4{font-weight:700;line-height:1.3;margin-top:2rem;margin-bottom:0.75rem;}
.cs-page__content h1{font-size:1.875rem;}
.cs-page__content h2{font-size:1.5rem;}
.cs-page__content h3{font-size:1.25rem;}
.cs-page__content h4{font-size:1.125rem;}
.cs-page__content p{margin-bottom:1rem;}
.cs-page__content ul,
.cs-page__content ol{margin:0 0 1rem 1.5rem;padding-left:1rem;}
.cs-page__content ul{list-style:disc;}
.cs-page__content ol{list-style:decimal;}
.cs-page__content li{margin-bottom:0.25rem;}
.cs-page__content a{color:var(--base-color-3);text-decoration:none;}
.cs-page__content a:hover{text-decoration:underline;}
.cs-page__content img{max-width:100%;height:auto;border-radius:4px;}
.cs-page__content blockquote{border-left:3px solid var(--base-color-3);padding:0.5rem 1rem;margin:1rem 0;color:#ddd;font-style:italic;}
.cs-page__content code{background:rgba(255,255,255,0.1);padding:0.1em 0.35em;border-radius:3px;font-size:0.9em;}
.cs-page__content pre{background:rgba(0,0,0,0.4);padding:1rem;border-radius:4px;overflow-x:auto;margin-bottom:1rem;}
.cs-page__content pre code{background:transparent;padding:0;}
.cs-page__content hr{border:0;border-top:1px solid rgba(255,255,255,0.15);margin:2rem 0;}

/* === Inline video panel (F9) === */
/* F9 — Full-width wrapper across all viewports (per §16). Mount lives outside
   the page's padded inner container, so it spans the full viewport with no
   gutter inheritance. */
.cs-inline-video-mount {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1rem 0;
}

/* F4 — Offset for fixed 64px header so scrollIntoView({block:'start'}) settles
   the panel below the navbar (64px header + 16px breathing room). */
#pop-video-window {
  scroll-margin-top: 80px;
}

/* F5 — Override the theme-style-4.css desktop rule (#pop-video-window iframe
   { height: 600px }) on ALL viewport sizes; force 16:9 aspect ratio. The
   max-height cap (per §16) prevents a 1080px-tall iframe on wide viewports
   pushing the room grid below the fold; letterbox is rendered as black via
   the background rule. */
#pop-video-window iframe {
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  max-height: min(70vh, 720px);
}

#pop-video-window .video-main { background: #000; }

#inline-video-menu-drawer[hidden] { display: none !important; }