/* =====================================================================
   Rememore — new site header (desktop 2-row + mobile drawer)
   Ported from artifacts/rememore-menu (React/Tailwind) to plain CSS.
   Everything is namespaced under #rmr-header / .rmr-* so it never
   collides with the legacy header markup, IDs or style.css rules.
   Content is DB-driven (siteMenus Type 1/2/3, siteLanguages, Locale.*).
   ===================================================================== */

:root {
  --rmr-gold: #D1BE8A;
  --rmr-bar: #080b0c;
  --rmr-bar-deep: #040606;
  --rmr-chip: #121415;
  --rmr-chip-hover: #1a1d1e;
  --rmr-text: #E7E8E8;
  --rmr-muted: #a3a3a3;
  --rmr-top-h: 46px;
  --rmr-bottom-h: 64px;
  --rmr-mobile-h: 70px;
  --rmr-max: 1240px;
}

/* The header is fixed; push the page down so content is not hidden.
   Legacy layout reserved its own space via the old <header>; we replace
   that with an explicit spacer height that matches the new bar. */
/* #rmr-drawer is a SIBLING of #rmr-header, so it must be covered here too, otherwise its
   items stay content-box and padding adds to width:100% -> horizontal overflow in the drawer. */
/* WEB-11743: load the brand font (Satoshi) INTO this header stylesheet from the
   same-origin local woff. The main site declares "Satoshi Variable" in style.css, but
   ai-lp LPs (e.g. /lp/en/check-up) don't load style.css -> the injected header fell back
   to the host font (Montserrat on check-up) or a system sans, so the menu looked different
   per page. Declaring the face here makes the menu render the SAME Satoshi Variable on
   every page (main site AND every LP). Same dir as style.css, so the relative url matches. */
@font-face {
  font-family: "Satoshi Variable";
  src: url("fonts/Satoshi-Variable.woff2") format("woff2"), url("fonts/Satoshi-Variable.woff") format("woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi Variable";
  src: url("fonts/Satoshi-Bold.woff2") format("woff2"), url("fonts/Satoshi-Bold.woff") format("woff");
  font-weight: bold; font-style: normal; font-display: swap;
}

#rmr-header, #rmr-header *, #rmr-drawer, #rmr-drawer * { box-sizing: border-box; }
/* WEB-11743: the injected header must look IDENTICAL on the main site and on every ai-lp LP.
   LPs (Tailwind base) leak three things into the inherited header that the main site doesn't:
   (1) -webkit-font-smoothing:antialiased / -moz-osx-font-smoothing:grayscale -> thinner, lighter
       text than the main site's default auto/subpixel;
   (2) line-height:1.5 -> taller text boxes / different vertical rhythm (main site body is 1);
   (3) <button>/<input> don't inherit font-family, so on the main site a button like
       "Other Treatments" falls back to the UA font (Arial) while Tailwind makes LP buttons
       inherit -> different fonts per page.
   Pin all three to the main-site values so the menu is pixel-identical everywhere. */
#rmr-header, #rmr-header *, #rmr-drawer, #rmr-drawer * {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/* line-height on the containers only (inherited) -- NOT on `*`, so elements with an explicit
   line-height (e.g. .rmr-mega-name) keep theirs. */
#rmr-header, #rmr-drawer { line-height: 1; }
/* form controls don't inherit font-family / line-height by default (UA stylesheet), so on the
   main site a header button ("Other Treatments") used the UA font (Arial) + line-height:normal,
   while Tailwind makes LP buttons inherit -> different per page. Force inherit on both. */
#rmr-header button, #rmr-header input, #rmr-header select, #rmr-header textarea,
#rmr-drawer button, #rmr-drawer input, #rmr-drawer select, #rmr-drawer textarea {
  font-family: inherit;
  line-height: inherit;
}

#rmr-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  /* WEB-11743: brand font explicitly (not `inherit`). "Satoshi Variable" is the face
     loaded above + by the main site's style.css; plain "Satoshi" / sans-serif are only
     fallbacks. This makes the menu render the same Satoshi on the main site and on every
     injected LP, instead of the host's font (Montserrat on check-up) or a system sans. */
  font-family: "Satoshi Variable", "Satoshi", sans-serif;
  color: #fff;
  isolation: isolate;
}
#rmr-header a { text-decoration: none; }
/* #rmr-drawer is a SIBLING of #rmr-header (not a child), so it must repeat the font or
   it would inherit the host page's <body> font (Montserrat on the check-up LP). */
#rmr-drawer { font-family: "Satoshi Variable", "Satoshi", sans-serif; }

/* Spacer keeps body content below the fixed bar (desktop 110px = 46+64). */
.rmr-spacer { height: calc(var(--rmr-top-h) + var(--rmr-bottom-h)); }

/* ---------- background layers ---------- */
.rmr-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.rmr-bg-blur   { top: var(--rmr-top-h); background: rgba(4,6,6,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.rmr-bg-opaque { top: var(--rmr-top-h); background: var(--rmr-bar); transition: opacity .1s linear; }
.rmr-bg-toprow { top: 0; height: var(--rmr-top-h); background: var(--rmr-bar); z-index: 1; }
/* row divider is drawn on .rmr-row-top (content box + small overhang), see below */
@media (max-width: 1279px) {
  .rmr-bg-blur, .rmr-bg-opaque { top: 0; }
  .rmr-bg-toprow { display: none; }
}

/* ========================================================= DESKTOP */
.rmr-desktop { display: none; }
@media (min-width: 1280px) {
  .rmr-desktop { display: block; position: relative; z-index: 20; width: 100%; }
  .rmr-mobilebar { display: none; }
}

.rmr-row { max-width: var(--rmr-max); margin: 0 auto; padding: 0 32px; position: relative; }
.rmr-row-top { height: var(--rmr-top-h); display: flex; align-items: center; justify-content: space-between; }
/* divider between the two desktop rows — content box + 16px overhang each side */
.rmr-row-top::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: rgba(255,255,255,.12); pointer-events: none; }
.rmr-row-bottom { height: var(--rmr-bottom-h); display: flex; align-items: center; justify-content: space-between; }

/* logo */
.rmr-logo img { width: 132px; height: auto; display: block; }
.rmr-row-top .rmr-logo img { width: 110px; }
/* brand logo top-left: logo + top links grouped on the left of the top row */
.rmr-top-left { display: flex; align-items: center; gap: 30px; min-width: 0; }
.rmr-top-left .rmr-logo { display: inline-flex; align-items: center; }
.rmr-top-left .rmr-logo img { width: 122px; }

/* top links */
.rmr-toplinks { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.rmr-toplinks a { position: relative; font-size: 12px; font-weight: 500; color: var(--rmr-muted); transition: color .2s; padding: 2px 0; white-space: nowrap; }
.rmr-toplinks a::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: var(--rmr-gold); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.rmr-toplinks a:hover { color: var(--rmr-gold); }
.rmr-toplinks a:hover::after { transform: scaleX(1); }

/* top-right cluster */
.rmr-top-actions { display: flex; align-items: center; gap: 22px; }
.rmr-act { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--rmr-muted); background: none; border: 0; cursor: pointer; transition: color .2s; white-space: nowrap; }
.rmr-act:hover { color: #fff; }
.rmr-act svg { width: 14px; height: 14px; }

/* search (expandable pill) */
.rmr-search { position: relative; height: 32px; }
.rmr-search-shell { position: relative; height: 32px; display: flex; align-items: center; justify-content: flex-end; border-radius: 9999px; overflow: hidden; width: 32px; background: transparent; transition: width .3s ease, background-color .3s ease; }
.rmr-search.open .rmr-search-shell { width: 200px; background: var(--rmr-chip); }
.rmr-search-btn { position: absolute; right: 0; top: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--rmr-muted); background: none; border: 0; cursor: pointer; z-index: 2; }
/* WEB-11721 (#2): inline svg has no intrinsic size -> was ballooning on content pages; pin it. */
.rmr-search-btn svg { width: 16px; height: 16px; display: block; flex: 0 0 auto; }
.rmr-search-input { width: calc(100% - 32px); height: 32px; padding: 0 10px; background: transparent; border: 0; outline: none; color: #fff; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.rmr-search.open .rmr-search-input { opacity: 1; pointer-events: auto; }
.rmr-search-input::placeholder { color: #737373; }
/* WEB-11721 (#3): form wrapper must not alter the pill layout — it generates no box. */
.rmr-search-form { display: contents; }

/* language selector */
.rmr-lang { position: relative; }
.rmr-lang-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--rmr-muted); background: none; border: 0; cursor: pointer; transition: color .2s; }
.rmr-lang-btn:hover { color: #fff; }
.rmr-lang-btn img { width: 16px; height: 11px; object-fit: cover; border-radius: 1px; opacity: .85; }
.rmr-lang-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 150px; background: var(--rmr-chip); border: 1px solid rgba(255,255,255,.10); border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,.45); padding: 6px; display: flex; flex-direction: column; gap: 2px; visibility: hidden; opacity: 0; transition: opacity .15s; z-index: 60; }
.rmr-lang.open .rmr-lang-menu { visibility: visible; opacity: 1; }
.rmr-lang-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: #d4d4d4; transition: background .15s; }
.rmr-lang-menu a:hover { background: rgba(255,255,255,.06); color: #fff; }
.rmr-lang-menu a img { width: 18px; height: 13px; object-fit: cover; border-radius: 1px; }

/* ---------- bottom row: treatments ---------- */
.rmr-treatments { display: flex; align-items: stretch; height: 100%; list-style: none; margin: 0; padding: 0; min-width: 0; }
.rmr-treatments > li { display: flex; }
.rmr-treatments a { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--rmr-bottom-h); padding: 0 22px; font-size: 14px; font-weight: 500; color: var(--rmr-text); transition: color .2s; overflow: hidden; }
/* First treatment ("Plastic Surgery"): text stays flush-left under the logo
   (x=52) via margin-left:-22px, while padding-left:22px gives the hover
   highlight the same left breathing room as the other items. */
.rmr-treatments > li:first-child > a { padding-left: 22px; margin-left: -22px; justify-content: flex-start; }
[dir="rtl"] .rmr-treatments > li:first-child > a { padding-left: 22px; padding-right: 22px; margin-left: 0; margin-right: -22px; }
.rmr-treatments a::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0); transition: background .2s; }
.rmr-treatments a:hover { color: #fff; }
.rmr-treatments a:hover::before { background: rgba(255,255,255,.10); }
.rmr-treatments a .rmr-tlabel { position: relative; white-space: nowrap; }
.rmr-treatments a .rmr-ticon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18.5px; height: 18.5px; color: rgba(255,255,255,.75); transition: color .2s; }
.rmr-treatments a:hover .rmr-ticon { color: #fff; }
.rmr-ticon svg { width: 100%; height: 100%; }

/* ---------- bottom row: right rail ---------- */
.rmr-rail { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Medical Library sits in its own middle zone of the bottom row (treatments left,
   Medical Library centered, Other Treatments + Blog right) via the row's space-between. */
.rmr-row-bottom .rmr-medlib { flex-shrink: 0; }
.rmr-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 9999px; border: 1px solid rgba(255,255,255,.10); background: var(--rmr-chip); color: var(--rmr-text); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s, color .2s; white-space: nowrap; flex-shrink: 0; }
.rmr-pill:hover, .rmr-pill.open { background: var(--rmr-chip-hover); border-color: rgba(255,255,255,.20); color: #fff; }
.rmr-pill svg { width: 14px; height: 14px; }
.rmr-pill-chevron { transition: transform .2s; }
.rmr-pill.open .rmr-pill-chevron { transform: rotate(180deg); }
.rmr-blog { background: var(--rmr-chip-hover); }
.rmr-blog:hover { background: #222526; }

/* library plus->book icon stack */
.rmr-libicon { position: relative; width: 14px; height: 14px; }
.rmr-libicon svg { position: absolute; inset: 0; }

/* ---------- Other Treatments mega dropdown ---------- */
.rmr-mega { position: absolute; top: 100%; left: 0; width: 100%; z-index: 40; visibility: hidden; pointer-events: none; }
.rmr-mega.open { visibility: visible; pointer-events: auto; }
.rmr-mega-backdrop { position: fixed; top: 110px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.30); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; z-index: 0; }
.rmr-mega.open .rmr-mega-backdrop { opacity: 1; }
.rmr-mega-panel { position: relative; z-index: 10; width: 100%; background: rgba(4,6,6,.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255,255,255,.10); box-shadow: 0 30px 60px rgba(0,0,0,.5); opacity: 0; transition: opacity .3s; overflow-y: auto; max-height: calc(100dvh - 110px); }
.rmr-mega.open .rmr-mega-panel { opacity: 1; }
.rmr-mega-inner { max-width: var(--rmr-max); margin: 0 auto; padding: 32px; display: flex; align-items: flex-start; gap: 48px; }
.rmr-mega-col { flex: 1; display: flex; flex-direction: column; }
.rmr-mega-title { color: rgba(255,255,255,.40); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.10); padding-bottom: 12px; margin-bottom: 24px; }
.rmr-mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 40px; }
.rmr-mega-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; margin-left: -12px; border-radius: 10px; transition: background .15s; }
.rmr-mega-item:hover { background: rgba(255,255,255,.05); }
.rmr-mega-ico { flex-shrink: 0; margin-top: 1px; display: inline-flex; }
.rmr-mega-ico svg { width: 18px; height: 18px; color: var(--rmr-gold); }
.rmr-mega-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rmr-mega-name { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; transition: color .15s; }
.rmr-mega-item:hover .rmr-mega-name { color: var(--rmr-gold); }
.rmr-mega-desc { color: var(--rmr-muted); font-size: 12px; line-height: 1.35; }
.rmr-mega-arrow { width: 16px; height: 16px; color: #737373; flex-shrink: 0; margin-top: 2px; transition: transform .3s, color .15s; }
.rmr-mega-item:hover .rmr-mega-arrow { color: var(--rmr-gold); transform: translate(2px, -2px); }

/* Check-Up feature card (right side of the mega panel) */
.rmr-checkup-card { position: relative; display: block; width: 460px; height: 232px; flex-shrink: 0; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #16191c 0%, #0b0e10 62%); border: 1px solid rgba(255,255,255,.08); }
.rmr-checkup-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.rmr-checkup-card:hover .rmr-checkup-img { transform: scale(1.03); }
.rmr-checkup-fade { position: absolute; inset: 0; background: linear-gradient(to right, #080b0c 0%, rgba(8,11,12,.86) 44%, rgba(8,11,12,.12) 100%); }
[dir="rtl"] .rmr-checkup-fade { background: linear-gradient(to left, #080b0c 0%, rgba(8,11,12,.86) 44%, rgba(8,11,12,.12) 100%); }
.rmr-checkup-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 30px 32px; width: 80%; }
.rmr-checkup-title { color: #fff; font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; }
.rmr-checkup-desc { color: #d5d0c4; font-size: 13px; line-height: 1.5; margin: 0 0 18px; }
.rmr-checkup-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--rmr-gold); font-size: 13px; font-weight: 600; transition: color .2s; }
.rmr-checkup-card:hover .rmr-checkup-cta { color: #fff; }
.rmr-checkup-cta svg { width: 16px; height: 16px; transition: transform .2s; }
.rmr-checkup-card:hover .rmr-checkup-cta svg { transform: translate(2px, -2px); }

/* animated gold border on the check-up card (ported from menu design) */
@property --checkup-border-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.checkup-border { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%); }
.checkup-border::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: conic-gradient(from var(--checkup-border-angle), rgb(209 190 138 / 25%) 0deg, rgb(209 190 138 / 25%) 240deg, #D1BE8A 300deg, #F6E9C5 320deg, rgb(209 190 138 / 25%) 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 250ms ease; animation: checkup-border-orbit 3s linear infinite paused; }
.checkup-card:is(:hover, :focus-visible) .checkup-border::after { opacity: 1; animation-play-state: running; }
@keyframes checkup-border-orbit { to { --checkup-border-angle: 360deg; } }

/* WEB-11721 (#5): DE/ES/AR labels are longer than EN/TR; keep the desktop header on a
   single row (never wrap to two lines) by tightening spacing/scale for these languages.
   padding is reduced only on non-first treatments so "Plastic Surgery" stays flush-left. */
@media (min-width: 1280px) {
  html[lang="de"] .rmr-toplinks,
  html[lang="es"] .rmr-toplinks,
  html[lang="ar"] .rmr-toplinks { gap: 18px; }
  html[lang="de"] .rmr-top-actions,
  html[lang="es"] .rmr-top-actions,
  html[lang="ar"] .rmr-top-actions { gap: 16px; }
  html[lang="de"] .rmr-treatments a,
  html[lang="es"] .rmr-treatments a,
  html[lang="ar"] .rmr-treatments a { font-size: 13px; letter-spacing: -.01em; }
  html[lang="de"] .rmr-treatments > li:not(:first-child) > a,
  html[lang="es"] .rmr-treatments > li:not(:first-child) > a,
  html[lang="ar"] .rmr-treatments > li:not(:first-child) > a { padding: 0 16px; }
  html[lang="de"] .rmr-rail,
  html[lang="es"] .rmr-rail,
  html[lang="ar"] .rmr-rail { gap: 8px; }
  html[lang="de"] .rmr-pill,
  html[lang="es"] .rmr-pill,
  html[lang="ar"] .rmr-pill { font-size: 12px; padding: 0 14px; }
}

/* ========================================================= MOBILE */
.rmr-mobilebar { display: flex; align-items: center; justify-content: space-between; height: var(--rmr-mobile-h); padding: 0 20px; position: relative; z-index: 50; }
@media (min-width: 1280px) { .rmr-mobilebar { display: none; } }
.rmr-mobilebar .rmr-logo img { width: 140px; }
.rmr-burger { display: inline-flex; padding: 8px; margin-right: -8px; color: #fff; background: none; border: 0; cursor: pointer; }
.rmr-burger svg { width: 26px; height: 26px; }

@media (max-width: 1279px) { .rmr-spacer { height: var(--rmr-mobile-h); } }
/* safety net: the new header/drawer must never introduce horizontal page scroll on mobile */
@media (max-width: 1279px) { html, body { overflow-x: hidden; } }

/* drawer */
/* overflow:hidden clips the off-canvas panel (translated beyond the right edge) so the
   closed drawer never adds horizontal page scroll on mobile. */
.rmr-drawer { position: fixed; inset: 0; z-index: 1100; visibility: hidden; overflow: hidden; }
.rmr-drawer.open { visibility: visible; }
.rmr-drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.rmr-drawer.open .rmr-drawer-scrim { opacity: 1; }
.rmr-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 85vw; max-width: 380px; background: var(--rmr-bar); border-left: 1px solid rgba(255,255,255,.10); box-shadow: -20px 0 60px rgba(0,0,0,.5); display: flex; flex-direction: column; color: #fff; transform: translate3d(calc(100% + 32px), 0, 0); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.rmr-drawer.open .rmr-drawer-panel { transform: translate3d(0,0,0); }
[dir="rtl"] .rmr-drawer-panel { right: auto; left: 0; border-left: 0; border-right: 1px solid rgba(255,255,255,.10); transform: translate3d(calc(-100% - 32px),0,0); }
[dir="rtl"] .rmr-drawer.open .rmr-drawer-panel { transform: translate3d(0,0,0); }

.rmr-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid rgba(255,255,255,.10); flex-shrink: 0; }
.rmr-drawer-head .rmr-logo img { width: 120px; }
.rmr-iconbtn { display: inline-flex; padding: 8px; color: var(--rmr-muted); background: none; border: 0; cursor: pointer; border-radius: 9999px; transition: color .2s; }
.rmr-iconbtn:hover { color: #fff; }
.rmr-iconbtn svg { width: 20px; height: 20px; }
.rmr-back { display: none; align-items: center; gap: 6px; color: var(--rmr-text); font-size: 14px; font-weight: 600; background: none; border: 0; cursor: pointer; }
.rmr-back:hover { color: var(--rmr-gold); }
.rmr-back svg { width: 20px; height: 20px; }

.rmr-drawer-search { padding: 20px 20px 8px; flex-shrink: 0; }
.rmr-drawer-search .rmr-ds-box { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.20); padding-bottom: 8px; }
.rmr-drawer-search .rmr-ds-box:focus-within { border-color: var(--rmr-gold); }
.rmr-drawer-search svg { width: 16px; height: 16px; color: var(--rmr-muted); flex-shrink: 0; }
.rmr-drawer-search input { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font-size: 14px; }
.rmr-drawer-search input::placeholder { color: #737373; }

.rmr-drawer-body { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 8px 0; }
.rmr-mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rmr-mlist a, .rmr-mlist button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--rmr-text); background: none; border: 0; text-align: start; cursor: pointer; transition: background .15s; }
.rmr-mlist a:hover, .rmr-mlist button:hover { background: rgba(255,255,255,.05); }
.rmr-mlist .rmr-m-icon svg { width: 18px; height: 18px; color: rgba(255,255,255,.5); }
.rmr-mlist .rmr-m-accent { color: var(--rmr-gold); }
.rmr-mlist .rmr-m-accent svg { color: var(--rmr-gold); }
/* size any inline svg inside drawer list rows (chevrons, arrows, spec icons) */
.rmr-mlist a > svg, .rmr-mlist button > svg { width: 16px; height: 16px; flex-shrink: 0; }
.rmr-mlist a > span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.rmr-mlist a > span svg { width: 18px; height: 18px; flex-shrink: 0; }
/* hide floating action buttons while the drawer is open */
body.rmr-lock .mobile-sticky-footer,
body.rmr-lock #fixed-whatsapp,
body.rmr-lock #fixed-quote,
body.rmr-lock #fixed-contact { display: none; }
.rmr-m-lib { padding: 16px 20px; }
.rmr-m-lib a { justify-content: center; gap: 8px; background: var(--rmr-chip); border: 1px solid rgba(255,255,255,.10); border-radius: 9999px; padding: 14px 20px; font-weight: 500; }
.rmr-m-lib a:hover { background: var(--rmr-chip-hover); color: #fff; }
.rmr-m-section { padding: 24px 20px 8px; border-top: 1px solid rgba(255,255,255,.06); margin-top: 12px; font-size: 12px; font-weight: 700; color: #737373; letter-spacing: .12em; text-transform: uppercase; }
.rmr-mlist.rmr-more a { font-size: 14px; font-weight: 500; color: var(--rmr-muted); }
.rmr-mlist.rmr-more a:hover { color: #fff; }

/* drawer submenu (Other Treatments) */
.rmr-subpanel { display: none; }
.rmr-drawer[data-view="other"] .rmr-drawer-body .rmr-mainview { display: none; }
.rmr-drawer[data-view="other"] .rmr-drawer-body .rmr-subpanel { display: block; }
.rmr-drawer[data-view="other"] .rmr-back { display: inline-flex; }
.rmr-drawer[data-view="other"] .rmr-drawer-head .rmr-logo { display: none; }
.rmr-drawer[data-view="other"] .rmr-drawer-search { display: none; }
.rmr-subpanel .rmr-sub-title { padding: 16px 20px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 16px; font-weight: 700; color: #fff; }

/* drawer footer */
.rmr-drawer-foot { padding: 20px; border-top: 1px solid rgba(255,255,255,.10); background: #0c0e10; display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; }
.rmr-drawer-foot-row { display: flex; align-items: center; justify-content: space-between; }
.rmr-drawer-foot-row a, .rmr-drawer-foot-row button { font-size: 14px; font-weight: 500; color: #d4d4d4; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.rmr-drawer-foot-row a:hover, .rmr-drawer-foot-row button:hover { color: var(--rmr-gold); }
.rmr-drawer-foot-row svg { width: 16px; height: 16px; }
.rmr-mlang { position: relative; }
.rmr-mlang-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #404040; padding-bottom: 8px; font-size: 14px; font-weight: 500; color: #e5e5e5; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.rmr-mlang-btn .rmr-mlang-cur { display: flex; align-items: center; gap: 12px; }
.rmr-mlang-btn img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.rmr-mlang-btn .rmr-mlang-chev { width: 16px; height: 16px; color: var(--rmr-muted); transition: transform .2s; }
.rmr-mlang.open .rmr-mlang-chev { transform: rotate(180deg); }
.rmr-mlang-menu { display: none; position: absolute; bottom: calc(100% + 12px); left: 0; width: 100%; background: var(--rmr-chip); border: 1px solid rgba(255,255,255,.10); border-radius: 8px; box-shadow: 0 -10px 30px rgba(0,0,0,.5); overflow: hidden; flex-direction: column; z-index: 60; }
.rmr-mlang.open .rmr-mlang-menu { display: flex; }
.rmr-mlang-menu a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; font-weight: 500; color: #d4d4d4; transition: background .15s; }
.rmr-mlang-menu a:hover { background: rgba(255,255,255,.05); }
.rmr-mlang-menu img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }

/* search results (desktop + mobile) */
.rmr-results { position: absolute; top: calc(100% + 8px); left: 0; width: 280px; background: var(--rmr-chip); border: 1px solid rgba(255,255,255,.10); border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,.45); padding: 8px 0; display: none; z-index: 60; }
.rmr-search.open.has-results .rmr-results { display: block; }
.rmr-results a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 12px; font-weight: 500; color: #d4d4d4; }
.rmr-results a:hover { background: rgba(255,255,255,.05); color: var(--rmr-gold); }
.rmr-results a svg { width: 12px; height: 12px; opacity: .4; }
.rmr-results-empty { padding: 20px; text-align: center; color: #d4d4d4; font-size: 13px; }
/* WEB-11721 (#3): live-search result type badge + always-present "see all results" row */
.rmr-results a .rmr-res-badge { margin-inline-start: auto; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rmr-muted); opacity: .75; white-space: nowrap; }
.rmr-results a:hover .rmr-res-badge { color: var(--rmr-gold); opacity: 1; }
.rmr-results-all { margin-top: 4px; border-top: 1px solid rgba(255,255,255,.08); color: var(--rmr-gold); font-weight: 600; }
.rmr-results-all svg { opacity: .85 !important; }
/* mobile live-search results (rendered into .rmr-msearch-results) */
.rmr-msearch-results a { display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-size: 15px; font-weight: 600; color: var(--rmr-text); }
.rmr-msearch-results a:hover { background: rgba(255,255,255,.04); }
.rmr-msearch-results a svg { width: 16px; height: 16px; opacity: .5; flex: 0 0 auto; }
.rmr-msearch-results a .rmr-res-badge { margin-inline-start: auto; font-style: normal; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--rmr-muted); white-space: nowrap; }
.rmr-msearch-results .rmr-results-all { border-top: 1px solid rgba(255,255,255,.08); color: var(--rmr-gold); }

body.rmr-lock { overflow: hidden; }

/* ---------- ported motion (from rememore-menu/src/index.css) ---------- */
.plastic-chest, .plastic-body, .plastic-hips { transform: translateY(26px); }
.tooth-sparkle { opacity: 0; transform-origin: 18px 5.5px; }
svg:has(.plastic-face) { overflow: hidden; }
.hair-strand { stroke-dasharray: 1; stroke-dashoffset: 0; }
.scale-needle { transform-origin: 12px 12px; }

[data-treatment]:is(:hover,:focus-visible) .plastic-face  { animation: plastic-face-sequence 3200ms ease-in-out; }
[data-treatment]:is(:hover,:focus-visible) .plastic-chest { animation: plastic-chest-sequence 3200ms ease-in-out; }
[data-treatment]:is(:hover,:focus-visible) .plastic-body  { animation: plastic-body-sequence 3200ms ease-in-out; }
[data-treatment]:is(:hover,:focus-visible) .plastic-hips  { animation: plastic-hips-sequence 3200ms ease-in-out; }
[data-treatment]:is(:hover,:focus-visible) .hair-strand   { animation: hair-grow 1100ms ease-in-out both; }
[data-treatment]:is(:hover,:focus-visible) .hair-strand-middle { animation-delay: 180ms; }
[data-treatment]:is(:hover,:focus-visible) .hair-strand-last   { animation-delay: 360ms; }
[data-treatment]:is(:hover,:focus-visible) .scale-needle  { animation: scale-read 1400ms ease-in-out; }
[data-treatment]:is(:hover,:focus-visible) .tooth-sparkle { animation: tooth-shine 900ms ease-in-out; }

@keyframes plastic-face-sequence { 0%,14%,100% { transform: translateY(0);} 22%,91.99% { transform: translateY(-26px);} 92% { transform: translateY(26px);} }
@keyframes plastic-chest-sequence { 0%,14% { transform: translateY(26px);} 22%,38% { transform: translateY(0);} 46%,100% { transform: translateY(-26px);} }
@keyframes plastic-body-sequence { 0%,38% { transform: translateY(26px);} 46%,62% { transform: translateY(0);} 70%,100% { transform: translateY(-26px);} }
@keyframes plastic-hips-sequence { 0%,62% { transform: translateY(26px);} 70%,92% { transform: translateY(0);} 100% { transform: translateY(-26px);} }
@keyframes hair-grow { 0%,100% { stroke-dashoffset: 0;} 40% { stroke-dashoffset: .65;} }
@keyframes scale-read { 0%,100% { transform: rotate(0);} 25% { transform: rotate(-55deg);} 55% { transform: rotate(55deg);} 78% { transform: rotate(-20deg);} }
@keyframes tooth-shine { 0%,100% { opacity: 0; transform: scale(.2) rotate(-20deg);} 45% { opacity: 1; transform: scale(1) rotate(0);} 70% { opacity: .8; transform: scale(.8) rotate(15deg);} }

.packages-shine { display: inline-block; color: var(--rmr-muted); background: linear-gradient(110deg,#a3a3a3 35%,#f6e9c5 44%,#fff 50%,#f6e9c5 56%,#a3a3a3 65%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: packages-shine 2s linear infinite; }
@keyframes packages-shine { 0% { background-position: 100% 0;} 100% { background-position: 0 0;} }

/* library plus -> book morph */
.library-plus { opacity: 1; transform: rotate(0) scale(1); transition: transform .28s, opacity .16s .08s; color: var(--rmr-muted); }
.library-book { opacity: 0; transform: rotate(-20deg) scale(.75); transition: transform .2s, opacity .15s; color: #fff; }
.rmr-pill:hover .library-plus, .rmr-m-lib a:hover .library-plus { opacity: 0; transform: rotate(180deg) scale(.65); }
.rmr-pill:hover .library-book, .rmr-m-lib a:hover .library-book { opacity: 1; transform: rotate(0) scale(1); }

/* blog newspaper */
.rmr-blog-icon { position: relative; width: 14px; height: 14px; color: var(--rmr-muted); }
.rmr-blog-icon svg { position: absolute; inset: 0; }
.blog-paper { position: absolute; left: 4px; top: 2px; width: 7px; height: 9px; border: 1px solid currentColor; border-radius: 1px; background: #1d1d1d; opacity: 0; pointer-events: none; }
.blog-paper::after { content: ""; position: absolute; inset: 2px 1px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.rmr-blog:hover .blog-newspaper { animation: blog-paper-lift 650ms ease-in-out; }
.rmr-blog:hover .blog-paper { animation: blog-paper-flight 750ms ease-out both; }
.blog-paper-first { --paper-drift: -7px; --paper-rotation: -28deg; }
.blog-paper-second { --paper-drift: 8px; --paper-rotation: 24deg; }
.rmr-blog:hover .blog-paper-second { animation-delay: 130ms; }
@keyframes blog-paper-lift { 0%,100% { transform: translateY(0) rotate(0);} 40% { transform: translateY(2px) rotate(-8deg);} 70% { transform: translateY(-1px) rotate(3deg);} }
@keyframes blog-paper-flight { 0% { opacity: 0; transform: translate(0,0) rotate(0);} 20% { opacity: .9;} 65% { opacity: .7;} 100% { opacity: 0; transform: translate(var(--paper-drift),-15px) rotate(var(--paper-rotation));} }

/* theme sun/moon swap */
.rmr-theme-icon { position: relative; display: inline-block; width: 14px; height: 14px; overflow: hidden; }
.rmr-theme-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  #rmr-header *, .rmr-drawer-panel { animation: none !important; transition: none !important; }
  .packages-shine { background: none; -webkit-text-fill-color: currentColor; color: var(--rmr-muted); }
}