/*!
 * RE/MAX Princess · Shared Drawer + Hamburger
 * v1.0.0 · 2026-04-12
 *
 * Non-invasive overlay: renders a floating hamburger button (top-right) and a
 * full-height slide-in drawer with the full ecosystem of pages + language
 * switcher. Existing per-page nav stays untouched — this layer sits above it.
 *
 * Served from: https://remaxprincess.com/shared/rmxp-drawer.css
 * Requires:    rmxp-tokens.css loaded before this file.
 *
 * All selectors are namespaced with .rmxpd- to avoid any chance of collision
 * with existing Rent2buy .nv / Hub .nav-inner / Connect .menu classes.
 */

/* ------------------------------------------------------------------ *
 * Floating hamburger trigger
 * ------------------------------------------------------------------ */

.rmxpd-trigger {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 2147483646;                       /* one below the drawer */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rmxp-white, #fff);
  color: var(--rmxp-blue, #003da5);
  border: 1px solid var(--rmxp-g200, #e1e4e8);
  border-radius: 10px;
  box-shadow: var(--rmxp-shadow-md, 0 4px 12px rgba(0,0,0,.08));
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
  font: inherit;
  padding: 0;
}

.rmxpd-trigger:hover,
.rmxpd-trigger:focus-visible {
  transform: translateY(-1px);
  background: var(--rmxp-blue-50, #eef3fc);
  outline: none;
}

.rmxpd-trigger svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* When the page already has its own hamburger button and we hook into it, the
   floating trigger hides itself by getting the .rmxpd-trigger--hidden class. */
.rmxpd-trigger--hidden { display: none; }

/* ------------------------------------------------------------------ *
 * Backdrop
 * ------------------------------------------------------------------ */

.rmxpd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 30, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 2147483646;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}

.rmxpd-open .rmxpd-backdrop {
  opacity: 1;
  visibility: visible;
}

/* ------------------------------------------------------------------ *
 * Drawer panel (side sheet)
 * ------------------------------------------------------------------ */

.rmxpd {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--rmxp-drawer-w, 360px), 92vw);
  z-index: 2147483647;                       /* above everything */
  background: var(--rmxp-white, #fff);
  color: var(--rmxp-g800, #1a1f2e);
  font-family: var(--rmxp-font, system-ui, sans-serif);
  box-shadow: var(--rmxp-shadow-lg, -24px 0 48px rgba(0,0,0,.18));
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rmxpd-open .rmxpd { transform: translateX(0); }

/* Header inside drawer */
.rmxpd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rmxp-g100, #f1f3f5);
  flex-shrink: 0;
}

.rmxpd-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.rmxpd-logo img {
  height: 28px;
  width: auto;
  display: block;
}

.rmxpd-logo-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--rmxp-g500, #5c6673);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rmxpd-close {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--rmxp-g100, #f1f3f5);
  color: var(--rmxp-g700, #2a3140);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}

.rmxpd-close:hover { background: var(--rmxp-g200, #e1e4e8); }
.rmxpd-close svg { width: 18px; height: 18px; }

/* Language switcher strip */
.rmxpd-lang {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 20px;
  background: var(--rmxp-off, #f7f8fa);
  border-bottom: 1px solid var(--rmxp-g100, #f1f3f5);
  flex-shrink: 0;
}

.rmxpd-lang-btn {
  appearance: none;
  border: 1px solid var(--rmxp-g200, #e1e4e8);
  background: var(--rmxp-white, #fff);
  color: var(--rmxp-g600, #3d4654);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .3px;
  transition: all .15s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}

.rmxpd-lang-btn:hover {
  border-color: var(--rmxp-blue, #003da5);
  color: var(--rmxp-blue, #003da5);
}

.rmxpd-lang-btn--active {
  background: var(--rmxp-blue, #003da5);
  border-color: var(--rmxp-blue, #003da5);
  color: var(--rmxp-white, #fff);
}

.rmxpd-lang-btn--active:hover {
  color: var(--rmxp-white, #fff);
}

/* Scrollable body with grouped links */
.rmxpd-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
  -webkit-overflow-scrolling: touch;
}

.rmxpd-group {
  padding: 14px 20px 6px;
}

.rmxpd-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--rmxp-g400, #8c95a2);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 10px;
}

.rmxpd-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 -14px;
  text-decoration: none;
  color: var(--rmxp-g800, #1a1f2e);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  transition: background .15s ease;
}

.rmxpd-link:hover {
  background: var(--rmxp-blue-50, #eef3fc);
  color: var(--rmxp-blue, #003da5);
}

.rmxpd-link--active {
  background: var(--rmxp-blue-50, #eef3fc);
  color: var(--rmxp-blue, #003da5);
}

.rmxpd-link-ic {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rmxp-g100, #f1f3f5);
  color: var(--rmxp-blue, #003da5);
  border-radius: 8px;
  font-size: 14px;
}

.rmxpd-link--active .rmxpd-link-ic {
  background: var(--rmxp-blue, #003da5);
  color: var(--rmxp-white, #fff);
}

.rmxpd-link-text { flex: 1; min-width: 0; }
.rmxpd-link-sub {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--rmxp-g400, #8c95a2);
  margin-top: 2px;
}

/* Footer with contact CTAs */
.rmxpd-foot {
  border-top: 1px solid var(--rmxp-g100, #f1f3f5);
  padding: 14px 20px;
  background: var(--rmxp-off, #f7f8fa);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rmxpd-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--rmxp-wa, #25d366);
  color: var(--rmxp-white, #fff);
  text-decoration: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  transition: background .15s ease;
}

.rmxpd-cta:hover { background: var(--rmxp-wa-hover, #1da851); }
.rmxpd-cta svg { width: 18px; height: 18px; fill: currentColor; }

.rmxpd-foot-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12px;
  color: var(--rmxp-g500, #5c6673);
}

.rmxpd-foot-meta a {
  color: inherit;
  text-decoration: none;
}

.rmxpd-foot-meta a:hover { color: var(--rmxp-blue, #003da5); }

/* ------------------------------------------------------------------ *
 * Body lock while drawer is open
 * ------------------------------------------------------------------ */

body.rmxpd-body-locked {
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Small-screen adjustments
 * ------------------------------------------------------------------ */

@media (max-width: 480px) {
  .rmxpd-head { padding: 14px 16px; }
  .rmxpd-lang { padding: 12px 16px; }
  .rmxpd-group { padding: 12px 16px 4px; }
  .rmxpd-link { padding: 11px 12px; margin: 0 -12px; }
  .rmxpd-foot { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .rmxpd,
  .rmxpd-backdrop,
  .rmxpd-trigger,
  .rmxpd-close,
  .rmxpd-lang-btn,
  .rmxpd-link,
  .rmxpd-cta {
    transition: none;
  }
}