:root {
      /* FINAL look: Deep Rose + Charcoal + White */
      --primary: #A61E4D;
      --primary-dark: #7A0830;
      --accent: #A50A41;
      --accent-dark: #7A0830;
      --rose: #A50A41;
      --rose-dark: #7A0830;
      --rose-soft: #FCE8EF;
      --charcoal: #1f2937;
      --charcoal-soft: #374151;
      --text: #111827;
      --muted: #6b7280;
      --border: #e5e7eb;
      --paper: #ffffff;
      --surface: #ffffff;
      --soft: #faf8f9;
      --sage: #16803c;
      --card-shadow: 0 12px 35px rgba(31,41,55,0.08);
      --card-shadow-hover: 0 16px 40px rgba(31,41,55,0.12);
      --radius: 18px;
      --radius-sm: 12px;
      font-family: 'Manrope', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }
    body {
      margin: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background: #fff;
      color: var(--text);
      line-height: 1.55;
    }
    .font-display { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.02em; color: var(--charcoal); }
    .font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -0.01em; }
    .container {
      width: min(1180px, calc(100% - 40px));
      max-width: 1180px;
      margin: 0 auto;
      padding-left: 0;
      padding-right: 0;
    }
    @media (max-width: 640px) {
      .container { width: min(1180px, calc(100% - 28px)); }
    }
    .text-muted { color: var(--muted); }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px 16px; border-radius: var(--radius-sm);
      font-weight: 600; font-size: 0.875rem;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease;
    }
    .btn-compact { padding: 7px 12px !important; font-size: 12.5px !important; border-radius: 8px !important; }
    .btn:active { transform: translateY(1px); }
    .btn-primary {
      background: var(--rose);
      color: #fff;
      border: none;
      border-radius: 10px;
      font-weight: 800;
      box-shadow: 0 8px 18px rgba(166,30,77,0.18);
    }
    .btn-primary:hover {
      background: var(--rose-dark);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(166,30,77,0.22);
    }
    .btn-outline {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--charcoal);
    }
    .btn-outline:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: #fff;
    }
    .btn:disabled { opacity: .5; cursor: not-allowed; }
    .chip {
      padding: 8px 14px; border-radius: 999px;
      background: var(--surface); font-weight: 600; font-size: 0.8125rem;
      color: var(--charcoal-soft);
      border: 1px solid var(--border);
      transition: all .15s ease;
    }
    .chip:hover, .chip.active {
      background: #FDF2F6;
      color: var(--primary);
      border-color: #F3D9E3;
    }
    .card-img { transition: transform .32s ease, box-shadow .32s ease; border-radius: 12px; }
    .fav-toggle { cursor: pointer; }
    .modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 60; }
    .hidden { display: none; }
    .toast { position: fixed; right: 18px; bottom: 18px; z-index: 70; padding: 10px 14px; border-radius: 10px; color: #fff; font-weight: 600; box-shadow: 0 8px 24px rgba(2,6,23,0.2); }
    .img-thumb { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
    .img-thumb.active { border-color: var(--accent); }
    .input { width:100%; padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; margin-bottom:8px; }
    .small { font-size:0.85rem; color:var(--muted); }
    .badge-count { position:absolute; top:-6px; right:-6px; background:#ef4444; color:#fff; font-size:10px; border-radius:999px; padding:1px 6px; min-width:16px; text-align:center; }
    .star { cursor:pointer; font-size:20px; color:#d1d5db; }
    .star.active { color:#EC5A88; }
    .tab-btn { padding:8px 14px; border-radius:8px; font-weight:600; cursor:pointer; color:var(--muted); }
    .tab-btn.active { background:#fceef3; color:var(--accent-dark); }
    .mobile-menu { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; }
    .mobile-menu-panel { position:absolute; top:0; right:0; width: 82%; max-width: 340px; height:100%; background:#fff; padding:16px; overflow-y:auto; }

    /* ---- Premium visual layer ---- */
    .hero-panel {
      position: relative; overflow: hidden;
      min-height: 420px;
      background:
        linear-gradient(105deg, rgba(50,12,28,0.82) 0%, rgba(99,24,58,0.55) 45%, rgba(30,10,20,0.35) 100%),
        url('hero-bg.png') center center / cover no-repeat;
    }
    .hero-panel::after {
      content:''; position:absolute; right:-90px; top:-90px; width:300px; height:300px;
      background: radial-gradient(circle, rgba(255,255,255,0.22), transparent 70%);
      border-radius:50%; pointer-events:none;
    }
    .route-divider { display:flex; align-items:center; gap:10px; }
    .route-divider .dot { width:8px; height:8px; border-radius:50%; background: #ffffff; flex:none; }
    .route-divider .line { flex:1; height:1px; background-image: linear-gradient(90deg, rgba(255,255,255,0.7) 40%, transparent 0%); background-size: 8px 1px; background-repeat: repeat-x; }
    .step-num { font-family:'Fraunces', serif; font-size: 2rem; color: #EC5A88; line-height:1; font-weight:600; }
    .trust-chip { display:flex; align-items:center; gap:8px; font-size: 0.85rem; color:rgba(255,255,255,0.9); }
    .card-premium {
      border: 1px solid var(--border);
      background: #fff;
      border-radius: var(--radius);
      box-shadow: var(--card-shadow);
      transition: transform .2s ease, box-shadow .25s ease;
    }
    .card-premium:hover {
      transform: translateY(-4px);
      box-shadow: var(--card-shadow-hover);
    }
    .verified-stamp { display:inline-flex; align-items:center; gap:4px; background: var(--sage); color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; letter-spacing:.02em; }

    /* ---- Listing badges ---- */
    .listing-badge { position:absolute; top:44px; left:12px; z-index:3; font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.02em; box-shadow:0 2px 6px rgba(0,0,0,0.15); }
    .badge-new { background:#fef3c7; color:#92400e; }
    .badge-hot { background:#fee2e2; color:#b91c1c; }
    .badge-booked { background:#e5e7eb; color:#374151; }

    /* ---- Swipeable card photo carousel ---- */
    .card-carousel { touch-action: pan-y; }
    .card-carousel-track { display:flex; height:100%; transition: transform .3s ease; }
    .card-carousel-slide { width:100%; height:100%; object-fit:cover; flex-shrink:0; }
    .card-carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(255,255,255,0.85); border:none; width:28px; height:28px; border-radius:999px; font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s ease; }
    .card-carousel:hover .card-carousel-arrow { opacity:1; }
    .card-carousel-arrow.left { left:8px; }
    .card-carousel-arrow.right { right:8px; }
    .card-carousel-dots { position:absolute; bottom:22px; left:0; right:0; display:flex; justify-content:center; gap:4px; z-index:3; }
    .card-carousel-dot { width:5px; height:5px; border-radius:999px; background:rgba(255,255,255,0.6); transition: all .2s ease; cursor:pointer; }
    .card-carousel-dot.active { background:#fff; width:14px; border-radius:4px; }

    /* ---- Micro-animations ---- */
    @keyframes favPop { 0%{ transform:scale(1); } 35%{ transform:scale(1.35); } 60%{ transform:scale(0.9); } 100%{ transform:scale(1); } }
    .fav-pop { animation: favPop .35s ease; }

    /* ---- Location autocomplete ---- */
    .loc-autocomplete-box {
      position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
      background:#fff; border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,0.15);
      max-height:220px; overflow-y:auto; text-align:left;
    }
    .loc-autocomplete-item { padding:9px 14px; font-size:0.9rem; color:#374151; cursor:pointer; display:flex; align-items:center; gap:8px; }
    .loc-autocomplete-item:hover, .loc-autocomplete-item.active { background:#fceef3; }

    /* ---- Bottom Navigation Bar (mobile only) ---- */
    .bottom-nav-bar { display:none; }
    @media (max-width: 768px){
      .bottom-nav-bar {
        display:flex; position:fixed; bottom:0; left:0; right:0; z-index:50;
        background:#fff; border-top:1px solid #f3d9e3;
        box-shadow: 0 -4px 16px rgba(156,43,84,0.08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      body.dark .bottom-nav-bar { background:#221a22; border-top-color:#3d2e3c; }
      .bnb-item {
        flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
        gap:2px; padding:8px 0 6px; background:none; border:none; color:var(--muted);
        font-size:11px; font-weight:600; position:relative; cursor:pointer;
      }
      .bnb-item.active { color: var(--accent-dark); }
      .bnb-icon { font-size:20px; line-height:1; }
      .bnb-badge { position:absolute; top:2px; right:calc(50% - 20px); background:#ef4444; color:#fff; font-size:9px; border-radius:999px; padding:0 4px; min-width:14px; text-align:center; }
      /* leave room at the bottom of the page so content isn't hidden behind the bar */
      body { padding-bottom: 62px; }
    }
    .reveal { opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
    .reveal.in { opacity:1; transform: translateY(0); }
    @media (max-width: 640px){
      .container { padding-left: 10px; padding-right: 10px; }
    }

    /* ---- Dark mode ---- */
    body.dark { background:#171018; color:#f3e8ee; }
    body.dark .bg-white { background:#221a22 !important; color:#f3e8ee; }
    body.dark .text-gray-900 { color:#f3e8ee; }
    body.dark .text-muted, body.dark .small { color:#b8a3ae !important; }
    body.dark .input { background:#2b212b; border-color:#3d2e3c; color:#f3e8ee; }
    body.dark .btn-outline { background:#221a22; border-color:#3d2e3c; color:#f3d9e3; }
    body.dark .card-premium { background:#221a22 !important; border-color:#3d2e3c; }
    body.dark .chip { background:#3d2436; color:#f3d9e3; }
    body.dark #FDEEF2, body.dark [style*="#FDEEF2"] { background:#241820 !important; }

    /* ---- Advanced filters panel ---- */
    .adv-filters { background:#fff; border:1px solid #f3d9e3; border-radius:14px; padding:14px 16px; margin-top:10px; }
    body.dark .adv-filters { background:#221a22; border-color:#3d2e3c; }
    .adv-filters select, .adv-filters input { padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; font-size:0.88rem; }

    /* ---- Compare feature ---- */
    .compare-checkbox { position:absolute; bottom:12px; left:12px; top:auto; z-index:5; }
    .compare-bar { position:fixed; bottom:0; left:0; right:0; background:var(--primary-dark); color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; z-index:65; box-shadow:0 -6px 20px rgba(0,0,0,0.2); }
    .compare-bar.hidden { display: none !important; visibility: hidden !important; pointer-events: none !important; }
    @media (max-width: 768px) {
      .compare-bar:not(.hidden) { bottom: 64px; } /* above bottom nav */
    }
    .compare-chip { background:rgba(255,255,255,0.12); border-radius:999px; padding:6px 12px; font-size:0.82rem; display:flex; align-items:center; gap:6px; }
    .compare-chip button { background:none; border:none; color:#fff; cursor:pointer; font-weight:700; }

    /* ---- SOS button ---- */
    .sos-btn { position:fixed; right:18px; bottom:88px; z-index:66; background:#dc2626; color:#fff; border-radius:999px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; box-shadow:0 8px 22px rgba(220,38,38,0.4); cursor:pointer; text-align:center; line-height:1.1; }
    .sos-btn:hover { transform: scale(1.06); }

    /* ---- Similar listings ---- */
    .similar-card { border:1px solid #f3d9e3; border-radius:10px; overflow:hidden; cursor:pointer; transition: transform .15s ease; }
    .similar-card:hover { transform: translateY(-2px); }
    .similar-card img { width:100%; height:90px; object-fit:cover; }

    /* ---- Skeleton loaders ---- */
    .skeleton-card { border-radius:14px; overflow:hidden; background:#fff; border:1px solid #f6e4ea; padding:12px; }
    .skeleton-shimmer { background:linear-gradient(90deg, #f3e5ea 25%, #fceef3 37%, #f3e5ea 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:10px; }
    @keyframes shimmer { 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }
    body.dark .skeleton-shimmer { background:linear-gradient(90deg, #2b212b 25%, #3d2436 37%, #2b212b 63%); background-size:400% 100%; }

    /* ---- Empty state ---- */
    .empty-state { text-align:center; padding:48px 20px; }
    .empty-state svg { width:110px; height:110px; margin:0 auto 14px; opacity:.75; }

    /* ---- Testimonials ---- */
    .testimonial-card { background:#fff; border:1px solid #f6e4ea; border-radius:16px; padding:20px; min-width:280px; max-width:320px; }
    .testimonial-quote { font-family:'Fraunces', serif; font-size:1.6rem; color:var(--accent); line-height:1; }
    .testimonial-track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
    .testimonial-track .testimonial-card { scroll-snap-align:start; }
    .avatar-circle { width:40px; height:40px; border-radius:999px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }


    /* ---- Footer additions ---- */
    .stat-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 16px; text-align:center; }
    .stat-num { font-family:'Fraunces', serif; font-size: 1.6rem; font-weight:600; color:#fff; }
    .trust-badge-card { background:#fff; border:1px solid #f6e4ea; border-radius:14px; padding:18px; }
    .footer-link { display:block; color: rgba(255,255,255,0.72); font-size: 0.9rem; padding: 3px 0; cursor: pointer; text-align:left; background:none; border:none; transition: color .15s ease; }
    .footer-link:hover { color: #fff; text-decoration: underline; }
    .footer-col-title { color:#fff; font-weight:700; font-size:0.8rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:10px; opacity:.85; }
    .social-icon {
      width: 40px; height: 40px; border-radius: 999px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.14);
      display: inline-flex; align-items: center; justify-content: center;
      color: #fff; cursor: pointer; padding: 0;
      transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .social-icon svg { display: block; pointer-events: none; }
    .social-icon:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.25); color: #fff; }
    .social-icon.social-fb:hover { background: #1877F2; border-color: #1877F2; }
    .social-icon.social-ig:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: transparent; }
    .social-icon.social-li:hover { background: #0A66C2; border-color: #0A66C2; }
    .social-icon.social-x:hover { background: #000; border-color: #333; }
    .social-icon.social-yt:hover { background: #FF0000; border-color: #FF0000; }
    .social-icon.social-tg:hover { background: #229ED9; border-color: #229ED9; }
    .app-badge { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); border-radius:10px; padding:8px 12px; color:#fff; font-size:0.82rem; cursor:pointer; transition: background .15s ease; }
    .app-badge:hover { background: rgba(255,255,255,0.16); }
    #infoModalBody h4 { font-weight:700; font-size:1.05rem; margin-top:16px; margin-bottom:6px; color:var(--primary); }
    #infoModalBody h4:first-child { margin-top:0; }
    #infoModalBody p { margin-bottom:10px; line-height:1.6; color:#374151; font-size:0.95rem; }
    #infoModalBody .faq-q { font-weight:700; color:var(--primary); margin-top:14px; margin-bottom:2px; font-size:0.95rem; }

/* Mobile sticky filters */
@media (max-width: 640px) {
  .adv-filters {
    position: sticky;
    top: 70px;
    z-index: 30;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  }
}

/* Better dark mode for modals */
body.dark .modal .bg-white,
body.dark .modal > div.relative {
  background: #221a22 !important;
  color: #f3e8ee;
}
body.dark .modal .input {
  background: #2b212b;
  border-color: #3d2e3c;
  color: #f3e8ee;
}
body.dark .modal .btn-outline {
  background: #2b212b;
  border-color: #3d2e3c;
  color: #f3d9e3;
}


/* ========== Theme-matched Topbar & Hero controls ========== */
.topbar-search {
  border: 1.5px solid #F5D0DC;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 2px 8px rgba(165, 10, 65, 0.08);
}
.topbar-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(165, 10, 65, 0.18);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--primary);
  background: #FCE8EF;
  border: 1px solid #F5D0DC;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.icon-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(165, 10, 65, 0.28);
  transform: translateY(-1px);
}
.icon-btn:active { transform: translateY(0); }

.theme-select {
  border: 1.5px solid #F5D0DC;
  background: #FCE8EF;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.theme-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(165, 10, 65, 0.18);
}
.theme-select:hover {
  border-color: var(--accent);
}

/* Hero selects – match Deep Rose */
.hero-select {
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.95);
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
  min-width: 130px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hero-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(236,90,136,0.25);
}
.hero-select option {
  color: #1f2937;
  background: #fff;
}

/* Dark mode for new controls */
body.dark .topbar-search {
  background: #2b212b;
  border-color: #3d2e3c;
  color: #f3e8ee;
}
body.dark .icon-btn {
  background: #3d2436;
  border-color: #3d2e3c;
  color: #f3d9e3;
}
body.dark .icon-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
body.dark .theme-select {
  background: #3d2436;
  border-color: #3d2e3c;
  color: #f3d9e3;
}


/* ========== Smart Login + Profile Menu ========== */
.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 16px;
  border: 2px solid #f3d9e3;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.role-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(165, 10, 65, 0.18);
  transform: translateY(-2px);
}
.role-card:active { transform: translateY(0); }

.profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 220px;
  background: #fff;
  border: 1px solid #F5D0DC;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(156,43,84,0.15);
  z-index: 80;
  overflow: hidden;
  animation: ddIn .18s ease;
}
@keyframes ddIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.dd-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
  transition: background .12s ease;
}
.dd-item:hover { background: #FCE8EF; color: var(--primary); }

.success-pop {
  animation: successIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes successIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

body.dark .role-card { background: #221a22; border-color: #3d2e3c; }
body.dark .profile-dropdown { background: #221a22; border-color: #3d2e3c; }
body.dark .dd-item { color: #f3e8ee; }
body.dark .dd-item:hover { background: #3d2436; color: #f3d9e3; }

/* Premium cards extras */
.amen-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #FCE8EF;
  color: var(--primary);
}
.empty-icon {
  font-size: 3rem;
  margin-bottom: 8px;
  line-height: 1;
}
.empty-icon-logo {
  width: 110px;
  height: auto;
  margin: 0 auto 14px;
  opacity: .85;
}
.card-premium .card-img {
  transition: transform .4s ease;
}
.card-premium:hover .card-img {
  transform: scale(1.05);
}
.wa-btn {
  background: #25D366 !important;
  color: #fff !important;
  border: none;
}
.wa-btn:hover { filter: brightness(1.05); }

/* Admin users */
.admin-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #F5D0DC;
  border-radius: 12px;
  background: #fff;
}
body.dark .admin-user-row { background: #221a22; border-color: #3d2e3c; }

/* ========== Profile Dashboard ========== */
.pd-shell {
  position: relative;
  width: min(1180px, 100vw);
  height: min(92vh, 900px);
  max-height: 92vh;
  background: #faf7f9;
  border-radius: 20px;
  display: flex;
  overflow: hidden;
  z-index: 70;
  box-shadow: 0 25px 80px rgba(92, 24, 56, 0.25);
}
#profileModal.modal {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 10, 15, 0.45);
}
#profileModal.modal:not(.hidden) {
  display: flex !important;
}
.pd-mobile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #f3d9e3;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
}
.pd-mobile-title { font-weight: 700; color: var(--primary); }
.pd-icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid #F5D0DC; background: #fff; cursor: pointer;
}
.pd-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #f0e4ea;
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  overflow-y: auto;
}
.pd-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 16px;
}
.pd-logo-mark {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, #9C2B54, #EC5A88);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
}
.pd-logo-text { font-weight: 800; color: var(--primary); font-size: 1.1rem; line-height: 1.1; }
.pd-logo-tag { font-size: 10px; color: var(--muted); }
.pd-sidebar-close { display: none; margin-left: auto; border: none; background: none; font-size: 18px; cursor: pointer; color: #999; }
.pd-sidebar-user { text-align: center; padding: 8px 8px 18px; }
.pd-side-avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 3px solid #f8c8d8; margin: 0 auto 8px; display: block;
  background: #FCE8EF;
}
.pd-side-name { font-weight: 700; color: #1f2937; font-size: 0.95rem; }
.pd-side-role { font-size: 0.8rem; color: var(--primary); margin-top: 2px; }
.pd-nav { display: flex; flex-direction: column; gap: 2px; }
.pd-nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px;
  border: none; background: transparent;
  font-size: 0.9rem; font-weight: 500; color: #4b5563;
  cursor: pointer; transition: background .15s ease;
}
.pd-nav-item:hover { background: #FCE8EF; color: var(--primary); }
.pd-nav-item.active { background: #FCE8EF; color: var(--primary); font-weight: 600; }
.pd-nav-ico { width: 20px; text-align: center; }
.pd-badge {
  margin-left: auto; background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 999px;
  min-width: 18px; padding: 1px 6px; text-align: center;
}
.pd-nav-divider { height: 1px; background: #f0e4ea; margin: 12px 8px; }
.pd-nav-owner { color: #16a34a !important; }
.pd-nav-logout { color: #dc2626 !important; }
.pd-main {
  flex: 1;
  overflow-y: auto;
  padding: 28px 28px 36px;
}
.pd-main-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.pd-page-title { font-size: 1.6rem; font-weight: 800; color: #1f2937; }
.pd-page-sub { font-size: 0.9rem; color: var(--muted); margin-top: 2px; }
.pd-btn-outline-pink {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid #f3b6cb; background: #fff;
  color: var(--primary); font-weight: 600; font-size: 0.875rem;
  padding: 8px 14px; border-radius: 10px; cursor: pointer;
  transition: background .15s ease;
}
.pd-btn-outline-pink:hover { background: #FCE8EF; }
.pd-btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.pd-btn-primary {
  display: block; width: 100%;
  background: linear-gradient(135deg, #9C2B54, #C2185B);
  color: #fff; font-weight: 700; font-size: 0.95rem;
  padding: 12px; border-radius: 12px; border: none; cursor: pointer;
}
.pd-btn-primary:hover { filter: brightness(1.05); }
.pd-card {
  background: #fff;
  border: 1px solid #f0e4ea;
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(156, 43, 84, 0.04);
}
.pd-card-title {
  font-size: 1.05rem; font-weight: 700; color: #1f2937;
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
}
.pd-card-ico { font-size: 1.1rem; }
.pd-card-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.pd-card-head-row .pd-card-title { margin-bottom: 0; }
.pd-summary { padding: 22px; }
.pd-summary-left { display: flex; gap: 20px; align-items: center; }
.pd-avatar-wrap { position: relative; flex-shrink: 0; }
.pd-main-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  background: #f8c8d8; border: 3px solid #fceef3;
}
.pd-cam-btn {
  position: absolute; bottom: 2px; right: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #fff; background: #374151; color: #fff;
  font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pd-fullname-name { font-size: 1.35rem; font-weight: 800; color: #111827; }
.pd-role-line, .pd-loc-line { font-size: 0.9rem; color: #6b7280; margin-top: 4px; }
.pd-dot-ico { margin-right: 4px; }
.pd-progress-wrap { margin-top: 12px; max-width: 280px; }
.pd-progress-label { font-size: 0.8rem; color: #6b7280; margin-bottom: 6px; }
.pd-progress-bar { height: 8px; background: #f3d9e3; border-radius: 999px; overflow: hidden; }
.pd-progress-fill { height: 100%; background: linear-gradient(90deg, #9C2B54, #EC5A88); border-radius: 999px; transition: width .3s ease; }
.pd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.pd-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 20px; }
.pd-field { display: flex; gap: 10px; align-items: flex-start; }
.pd-field-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: #FCE8EF; color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px;
}
.pd-field-label { font-size: 0.75rem; color: #9ca3af; font-weight: 500; }
.pd-field-val { font-size: 0.9rem; color: #1f2937; font-weight: 600; margin-top: 1px; word-break: break-word; }
.pd-verify-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.pd-verify-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 14px; border: 1px solid #f0e4ea; border-radius: 12px; background: #fafafa;
}
.pd-verify-left { display: flex; align-items: center; gap: 10px; }
.pd-verify-status { font-size: 0.85rem; font-weight: 600; }
.pd-verify-status.ok { color: #16a34a; }
.pd-verify-status.warn { color: #ea580c; }
.pd-verify-icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: #dcfce7; color: #16a34a;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.pd-verify-icon.warn { background: #ffedd5; color: #ea580c; }
.pd-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pd-sub-status { font-weight: 700; color: #dc2626; font-size: 0.95rem; margin-top: 4px; }
.pd-sub-status.active { color: #16a34a; }
.pd-activity-list { display: flex; flex-direction: column; gap: 4px; }
.pd-activity-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 8px; border: none; background: transparent;
  border-radius: 10px; cursor: pointer; text-align: left;
}
.pd-activity-row:hover { background: #FCE8EF; }
.pd-act-ico { width: 28px; text-align: center; }
.pd-act-label { flex: 1; font-weight: 600; color: #374151; font-size: 0.9rem; }
.pd-act-count {
  background: #FCE8EF; color: var(--primary); font-weight: 700;
  font-size: 0.8rem; padding: 2px 10px; border-radius: 999px;
}
.pd-act-arrow { color: #9ca3af; font-size: 1.2rem; }
.pd-tip-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(135deg, #fdf2f8, #f0f9ff);
  border: 1px solid #e9d5ff; border-radius: 16px;
  padding: 18px 22px; margin-top: 4px;
}
.pd-tip-title { font-weight: 600; color: #374151; font-size: 0.9rem; }
.pd-tip-sub { font-size: 0.8rem; color: #6b7280; margin-top: 4px; }
.pd-tip-art { font-size: 2.5rem; opacity: 0.9; }
.pd-sidebar-scrim {
  display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.35); z-index: 8;
}
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0 !important; }

@media (max-width: 960px) {
  .pd-grid-3 { grid-template-columns: 1fr 1fr; }
  .pd-verify-grid { grid-template-columns: 1fr; }
  .pd-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pd-shell {
    width: 100vw; height: 100vh; max-height: 100vh;
    border-radius: 0; flex-direction: column;
  }
  .pd-mobile-bar { display: flex; }
  .pd-sidebar {
    position: absolute; left: 0; top: 0; bottom: 0;
    z-index: 10; transform: translateX(-105%);
    transition: transform .25s ease; width: min(72vw, 250px); max-width: 250px;
    box-shadow: 8px 0 30px rgba(0,0,0,0.12);
  }
  .pd-sidebar.open { transform: translateX(0); }
  .pd-sidebar-scrim:not(.hidden) { display: block; }
  .pd-sidebar-close { display: block; }
  .pd-main { padding: 64px 16px 28px; }
  .pd-grid-2, .pd-grid-3 { grid-template-columns: 1fr; }
  .pd-summary-left { flex-direction: column; text-align: center; }
  .pd-progress-wrap { margin-left: auto; margin-right: auto; }
  .pd-main-head { flex-direction: column; }
}

.pd-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 10, 15, 0.4);
  z-index: 0;
}
.pd-shell { position: relative; z-index: 1; }
.pd-head-left { display: flex; flex-direction: column; gap: 4px; }
.pd-head-right { display: flex; align-items: center; gap: 10px; }
.pd-back-btn {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 0 8px;
}
.pd-back-btn:hover { text-decoration: underline; }
.pd-close-x {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid #F5D0DC;
  background: #fff;
  color: #6b7280;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pd-close-x:hover { background: #FCE8EF; color: var(--primary); }

/* MyDera official logo */
.mydera-logo-nav {
  height: 48px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}
.mydera-logo-pd {
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}
.mydera-logo-footer {
  height: 48px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
  background: transparent !important;
  padding: 0;
  border-radius: 0;
  filter: none !important;
}
.mydera-logo-login {
  height: 72px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}
@media (max-width: 640px) {
  .mydera-logo-nav { height: 42px; max-width: 110px; }
}

.pd-activity-body { margin-top: 8px; }
.pd-act-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 10px; border-bottom: 1px solid #f3d9e3;
  cursor: pointer; border-radius: 10px;
}
.pd-act-item:hover { background: #FCE8EF; }
.pd-act-item img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: #f3f4f6;
}
.pd-act-item-info { flex: 1; min-width: 0; }
.pd-act-item-title { font-weight: 600; color: #1f2937; font-size: 0.9rem; }
.pd-act-item-meta { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
.pd-act-empty { text-align: center; padding: 28px 12px; color: #6b7280; }

.pd-temp-hidden { display: none !important; }

.pd-edit-actions { display: flex; align-items: center; gap: 8px; }
.pd-edit-actions.hidden { display: none !important; }
.pd-btn-inline { width: auto !important; padding: 8px 16px; font-size: 0.875rem; border-radius: 10px; }
.pd-inline-input, .pd-inline-select, .pd-inline-textarea {
  width: 100%;
  border: 1.5px solid #f3b6cb;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
  outline: none;
}
.pd-inline-input:focus, .pd-inline-select:focus, .pd-inline-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(156,43,84,0.12);
}
.pd-inline-textarea { min-height: 64px; resize: vertical; font-weight: 500; }
.pd-editing .pd-field-val { display: none; }
body.pd-mode-edit #pdEditBtn { display: none; }

/* Settings */
.pd-settings-wrap { width: 100%; }
.pd-settings-head { margin-bottom: 18px; }
.pd-settings-cats { display: flex; flex-direction: column; gap: 10px; }
.pd-set-row {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%; text-align: left;
  background: #fff; border: 1px solid #f0e4ea; border-radius: 16px;
  padding: 14px 16px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(156,43,84,0.04);
  transition: background .15s ease, border-color .15s ease;
}
.pd-set-row:hover { background: #fdf2f8; border-color: #f3b6cb; }
.pd-set-ico {
  width: 44px; height: 44px; border-radius: 12px;
  background: #FCE8EF; color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.pd-set-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.pd-set-title {
  display: block;
  font-weight: 700;
  color: #1f2937;
  font-size: 0.95rem;
  line-height: 1.25;
}
.pd-set-desc {
  display: block;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.35;
  margin-top: 0;
}
.pd-set-arrow {
  color: #9ca3af;
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-left: 4px;
}
.pd-set-row {
  align-items: flex-start;
}
.pd-set-row .pd-set-ico {
  margin-top: 2px;
}
.pd-settings-wrap {
  padding-bottom: 88px; /* clear SOS + bottom nav */
}
.pd-settings-head h2,
.pd-settings-head .pd-settings-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1f2937;
  margin: 0 0 4px;
}
.pd-settings-head p,
#pdSettingsSub {
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.4;
  margin: 0 0 12px;
}
.pd-settings-detail-body { margin-top: 8px; }
.pd-set-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 4px; border-bottom: 1px solid #f3d9e3;
}
.pd-set-item:last-child { border-bottom: none; }
.pd-set-item-label { font-weight: 600; color: #374151; font-size: 0.9rem; }
.pd-set-item-sub { font-size: 0.75rem; color: #9ca3af; margin-top: 2px; }
.pd-set-item-danger .pd-set-item-label { color: #dc2626; }
.pd-toggle {
  position: relative; width: 44px; height: 24px; flex-shrink: 0;
}
.pd-toggle input { opacity: 0; width: 0; height: 0; }
.pd-toggle span {
  position: absolute; cursor: pointer; inset: 0;
  background: #e5e7eb; border-radius: 999px; transition: .2s;
}
.pd-toggle span:before {
  content: ''; position: absolute; height: 18px; width: 18px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
  transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.pd-toggle input:checked + span { background: var(--primary); }
.pd-toggle input:checked + span:before { transform: translateX(20px); }
.pd-set-stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px;
}
.pd-set-stat {
  background: #FCE8EF; border-radius: 12px; padding: 14px; text-align: center;
}
.pd-set-stat-n { font-size: 1.4rem; font-weight: 800; color: var(--primary); }
.pd-set-stat-l { font-size: 0.75rem; color: #6b7280; margin-top: 2px; }
.pd-set-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pd-set-chip {
  border: 1.5px solid #f3b6cb; background: #fff; color: var(--primary);
  border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.pd-set-chip.active { background: var(--primary); color: #fff; }
.pd-set-select, .pd-set-input {
  border: 1.5px solid #f3b6cb; border-radius: 8px; padding: 8px 10px;
  font-size: 0.875rem; min-width: 140px; max-width: 100%;
}
@media (max-width: 640px) {
  .pd-set-stat-grid { grid-template-columns: 1fr 1fr; }
  .pd-set-item { flex-direction: column; align-items: flex-start; }
}

/* Topbar profile + Add Room alignment / theme */
.nav-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px 0 4px;
  border-radius: 999px;
  border: 1.5px solid #F5D0DC;
  background: #fff;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  vertical-align: middle;
  line-height: 1;
}
.nav-profile-btn:hover {
  background: #FCE8EF;
  border-color: #f3b6cb;
  box-shadow: 0 2px 8px rgba(156,43,84,0.12);
}
.nav-profile-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.nav-profile-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}
.topbar-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  box-shadow: 0 4px 14px rgba(156, 43, 84, 0.28);
  cursor: pointer;
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
  white-space: nowrap;
  line-height: 1;
}
.topbar-add-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px rgba(156, 43, 84, 0.35);
  transform: translateY(-1px);
}
.topbar-add-btn:active { transform: translateY(0); }
.topbar-add-btn.hidden { display: none !important; }

/* Keep topbar row vertically centered */
.bg-white.shadow-sm.sticky .container {
  min-height: 64px;
  align-items: center;
}

/* Topbar brand name next to logo */
.brand-lockup { align-items: center; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.brand-tag {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .brand-tag { display: none; }
  .brand-name { font-size: 1.1rem; }
  .mydera-logo-nav { height: 40px; max-width: 100px; }
}
/* Hero photo readability */
.hero-panel > * { position: relative; z-index: 1; }


/* ========== VISUAL POLISH 2026 ========== */

/* Custom pink scrollbar */
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #fdf2f8; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #EC5A88, #9C2B54);
  border-radius: 999px;
  border: 2px solid #fdf2f8;
}
::-webkit-scrollbar-thumb:hover { background: #9C2B54; }
* { scrollbar-width: thin; scrollbar-color: #EC5A88 #fdf2f8; }

/* Page load fade */
body.page-booting {
  opacity: 0;
}

/* ========== MyDera cinematic splash ========== */
.md-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #6e1233;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
.md-splash-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 35%, #A61E4D 0%, #8B1840 45%, #5c0f2a 100%);
  pointer-events: none;
}
.md-splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.md-splash-copy {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 24px;
  margin-bottom: 8px;
  margin-top: -8vh;
}
.md-splash-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 5.5vw, 2.35rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  animation: mdSplashTextIn 0.9s ease 0.85s forwards;
}
.md-splash-sub {
  margin: 14px 0 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  opacity: 0;
  animation: mdSplashTextIn 0.8s ease 1.15s forwards;
}
.md-splash-scene {
  position: relative;
  z-index: 2;
  width: min(100%, 480px);
  padding: 0 12px;
  margin-top: 4px;
}
.md-splash-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.md-skyline {
  opacity: 0;
  transform: translateY(18px);
  animation: mdSkylineIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}
.md-home {
  animation: mdHomePulse 2s ease-in-out 1.2s infinite alternate;
}
.md-wave-group {
  opacity: 0;
  animation: mdWaveAppear 0.6s ease 0.15s forwards;
}
.md-wave-1 {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: mdWaveDraw 1.6s ease-out 0.2s forwards;
}
.md-wave-2 {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: mdWaveDraw 1.8s ease-out 0.35s forwards;
}
.md-reflect {
  animation: mdReflectPulse 2.2s ease-in-out 1s infinite alternate;
}
.md-splash-brand {
  position: relative;
  z-index: 3;
  margin-top: 18px;
  opacity: 0;
  transform: translateY(8px);
  animation: mdSplashTextIn 0.75s ease 1.55s forwards;
}
.md-splash-logo {
  height: 40px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
@keyframes mdSplashTextIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mdSkylineIn {
  to { opacity: 0.9; transform: translateY(0); }
}
@keyframes mdWaveAppear {
  to { opacity: 1; }
}
@keyframes mdWaveDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes mdHomePulse {
  from { opacity: 0.92; filter: url(#mdHomeGlow); }
  to { opacity: 1; }
}
@keyframes mdReflectPulse {
  from { opacity: 0.06; }
  to { opacity: 0.14; }
}
@media (prefers-reduced-motion: reduce) {
  .md-splash-title,
  .md-splash-sub,
  .md-skyline,
  .md-wave-group,
  .md-wave-1,
  .md-wave-2,
  .md-splash-brand,
  .md-home,
  .md-reflect {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}
@media (max-width: 480px) {
  .md-splash-copy { margin-top: -4vh; }
  .md-splash-logo { height: 36px; }
}

body.page-ready {
  opacity: 1;
  transition: opacity .45s ease;
}

/* Stronger scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Room card hover lift */
#listings .card-premium,
#listings > div {
  transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
}
#listings .card-premium:hover,
#listings > div:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(156,43,84,0.16);
}

/* Floating Quick Help (WhatsApp) */
.quick-help-btn {
  position: fixed;
  right: 18px;
  bottom: 160px;
  z-index: 64;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 16px 12px 14px;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.4);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.quick-help-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.5);
}
.quick-help-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
@media (max-width: 768px) {
  .quick-help-btn { bottom: 130px; right: 14px; padding: 12px; }
  .quick-help-btn .qh-label { display: none; }
}

/* Regional trust strip */
.regional-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.regional-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
}
.regional-trust-badge span { opacity: 0.95; }

/* Stats count-up polish */
.stat-num.counting {
  font-variant-numeric: tabular-nums;
}

/* Confetti canvas */
#confettiCanvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Icon consistency helpers */
.ico-svg {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
}

.topbar-root {
  position: sticky; top: 0; z-index: 40;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  width: 100%;
}
.topbar-root .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
}

/* FINAL-inspired content width */
.topbar-root .container,
.container {
  max-width: 1180px !important;
  width: min(1180px, calc(100% - 40px)) !important;
}
/* keep block structure valid — original may have more rules after */
  padding-left: 20px !important;
  padding-right: 20px !important;
}
@media (min-width: 1800px) {
  .topbar-root .container,
  .container {
    max-width: min(1920px, 97vw) !important;
  }
}


/* ===== FULL WIDTH — almost no side gap ===== */
.container,
.topbar-root .container,
.bg-white.shadow-sm.sticky .container {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .container,
  .topbar-root .container,
  .bg-white.shadow-sm.sticky .container {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}
/* Hero full width of page */
header.container {
  max-width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (min-width: 768px) {
  header.container {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}


/* 5 cards per row on wide screens — compact professional cards */
#listings {
  gap: 1rem;
}
@media (min-width: 1280px) {
  #listings .card-premium,
  #listings > div {
    font-size: 0.92rem;
  }
  #listings .card-img,
  #listings img.card-carousel-slide,
  #listings [class*="h-40"],
  #listings [class*="h-44"],
  #listings [class*="h-48"] {
    /* keep aspect readable in denser grid */
  }
}





/* verified-stamp-higher — keep Verified tag near top-right of photo */
.verified-stamp {
  top: 6px !important;
  right: 6px !important;
}
.listing-badge {
  top: 8px !important;
  left: 8px !important;
}
/* when both New/Hot + Verified: verified stays top-right, badge top-left */


/* compare-checkbox-bottom */
.compare-checkbox {
  position: absolute !important;
  top: auto !important;
  bottom: 10px !important;
  left: 10px !important;
  z-index: 6 !important;
}


/* ===== Airbnb-style city rows ===== */
.airbnb-city-rows {
  display: flex !important;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}
.airbnb-city-section { width: 100%; }
.airbnb-city-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0 2px;
}
.airbnb-city-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2937;
  padding: 0;
}
.airbnb-city-title:hover { color: var(--primary); }
.airbnb-city-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f4f6;
  font-size: 1rem;
  color: #111;
}
.airbnb-city-title:hover .airbnb-city-arrow { background: #FCE8EF; color: var(--primary); }
.airbnb-city-nav { display: flex; gap: 8px; }
.airbnb-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  color: #374151;
  line-height: 1;
}
.airbnb-nav-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.airbnb-row-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 6px;
}
.airbnb-row-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 14px;
  width: max-content;
}
.airbnb-row-track > article.airbnb-card,
.airbnb-row-track > article.card-premium {
  flex: 0 0 200px;
  width: 200px;
  max-width: 200px;
  scroll-snap-align: start;
}
@media (min-width: 480px) {
  .airbnb-row-track > article.airbnb-card,
  .airbnb-row-track > article.card-premium {
    flex: 0 0 230px;
    width: 230px;
    max-width: 230px;
  }
}
@media (min-width: 768px) {
  .airbnb-row-track > article.airbnb-card,
  .airbnb-row-track > article.card-premium {
    flex: 0 0 260px;
    width: 260px;
    max-width: 260px;
  }
}
/* New badge under Verified (right stack) */
.listing-badge.badge-new {
  left: auto !important;
  right: 6px !important;
  background: #fef3c7 !important;
  color: #92400e !important;
  z-index: 9;
}
.verified-stamp {
  top: 6px !important;
  right: 6px !important;
  z-index: 10;
}


/* Demo listing indicators */
.demo-listing-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 8;
  background: #6b7280;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* city chip moves slightly when demo present — city stays readable */
.demo-listings-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.demo-listings-banner strong {
  color: #c2410c;
}
.demo-listings-banner.hidden { display: none !important; }




/* subscribe-modal-top — always above owner form; form stays filled behind */
#subscribeModal {
  z-index: 200 !important;
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#subscribeModal.hidden {
  display: none !important;
}
#subscribeModal .relative {
  z-index: 201 !important;
  position: relative !important;
}
#ownerFormPopup {
  z-index: 60 !important;
}


/* Responsive room cards — larger on mobile */
.listings-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100%;
}
@media (min-width: 640px) {
  .listings-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 900px) {
  .listings-grid-5 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1200px) {
  .listings-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
.listings-grid-5 > * {
  min-width: 0 !important;
}

/* Email verify reminder */
.email-verify-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
  color: #9a3412;
  padding: 10px 16px;
  font-size: 0.9rem;
  text-align: center;
}
.email-verify-banner.hidden { display: none !important; }
.email-verify-banner .btn { flex-shrink: 0; }

/* Empty state polish */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
}


/* ===== Next level: Featured + Blue accent + PWA polish ===== */
.featured-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 8;
  background: linear-gradient(135deg, var(--primary), var(--accent-dark));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(156,43,84,0.35);
}
.card-premium.is-featured {
  border: 1.5px solid rgba(156,43,84,0.25);
  box-shadow: 0 12px 28px rgba(156,43,84,0.12), var(--card-shadow);
}
.btn-blue {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 8px 20px rgba(214,62,110,0.28);
}
.btn-blue:hover { filter: brightness(1.05); }
.chip-blue {
  background: #FCE8EF;
  color: var(--primary);
  border: 1px solid #F5D0DC;
}
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (min-width: 640px) {
  .analytics-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.analytics-card {
  background: #fff;
  border: 1px solid #F5D0DC;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.analytics-card.blue {
  background: #FCE8EF;
  border-color: #f3d9e3;
}
.analytics-card .num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}
.analytics-card.blue .num { color: var(--primary); }
.pwa-install-bar {
  position: fixed;
  right: 16px;
  left: auto;
  bottom: 20px;
  z-index: 80;
  width: auto;
  max-width: 320px;
  background: #fff;
  border: 1px solid #F5D0DC;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 28px rgba(100, 20, 50, 0.16);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pwa-install-bar.hidden { display: none !important; }
.pwa-install-bar .grow { flex: 1; min-width: 0; }
.pwa-install-bar .grow .small { font-size: 0.72rem; line-height: 1.25; }
.pwa-install-bar .btn-compact { padding: 6px 12px; font-size: 0.78rem; }
@media (max-width: 768px) {
  .pwa-install-bar {
    right: 12px;
    left: auto;
    bottom: 78px; /* above bottom nav */
    max-width: min(280px, calc(100vw - 24px));
    padding: 8px 10px;
    gap: 8px;
    border-radius: 12px;
  }
  .pwa-install-icon { width: 32px !important; height: 32px !important; border-radius: 8px; }
  .pwa-install-bar .grow .font-semibold { font-size: 0.8rem; }
}


/* ========== PRODUCTION LEVEL POLISH ========== */
html { scroll-behavior: smooth; }
::selection { background: #FCE7F0; color: var(--charcoal); }

/* Topbar — clean SaaS bar */
.topbar-root {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(229,231,235,0.85);
  box-shadow: none;
}
.topbar-root .container {
  min-height: 76px;
}
.topbar-search {
  background: var(--paper) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--charcoal) !important;
}
.topbar-search:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(156,43,84,0.12) !important;
  outline: none;
}

/* Hero — premium overlay */
.hero-panel {
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border);
}
.hero-panel h1,
.hero-panel .font-display {
  text-shadow: 0 2px 16px rgba(0,0,0,0.25);
  letter-spacing: -0.03em;
}

/* Section rhythm */
section, .section-block {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
main {
  padding-top: 8px;
  padding-bottom: 48px;
}

/* Section titles — rose like first screenshot */
.font-display.text-2xl,
h3.font-display {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  letter-spacing: -0.02em;
}

/* Airbnb-style city rows */
.airbnb-city-title {
  color: var(--charcoal) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}
.airbnb-city-arrow {
  background: var(--surface) !important;
  border: 1px solid var(--border);
}
.airbnb-nav-btn {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--charcoal) !important;
  transition: all .15s ease;
}
.airbnb-nav-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: #FDF2F6 !important;
}
.airbnb-city-section {
  margin-bottom: 2rem !important;
  padding-bottom: 0.5rem;
}

/* Cards content polish */
.card-premium .p-2\.5,
.card-premium .p-3\.5 {
  padding: 12px 14px 14px !important;
}
.listings-grid-5 .card-premium,
.airbnb-row-track .card-premium {
  background: #fff;
}

/* Modals — production */
.modal > .relative,
.modal .relative.bg-white {
  border-radius: 18px !important;
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(17,24,39,0.18) !important;
}
.modal .absolute.inset-0 {
  background: rgba(17,24,39,0.45) !important;
  backdrop-filter: blur(4px);
}

/* Inputs */
.input, input.input, select.input, textarea.input,
.adv-field select, .adv-field input {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--charcoal) !important;
}
.input:focus, .adv-field select:focus, .adv-field input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(156,43,84,0.12) !important;
  outline: none;
}

/* Compact filters card */
.adv-filters-card {
  max-width: 480px !important;
  margin-left: 0 !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--card-shadow) !important;
  border-radius: 16px !important;
}

/* Footer charcoal */
footer, .site-footer, #siteFooter {
  background: var(--charcoal) !important;
  color: #E5E7EB !important;
}

/* Trust chips / stats */
.trust-chip {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Price emphasis */
.font-mono {
  color: var(--charcoal) !important;
  font-weight: 700;
}

/* Scrollbar subtle */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* Focus visible for a11y */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Demo / featured badges remain rose */
.demo-listing-badge {
  background: var(--charcoal) !important;
}
.featured-badge {
  background: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(156,43,84,0.3) !important;
}

/* Reduce "demo pink soup" — neutral surfaces */
.empty-state {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 16px;
  margin: 12px 0;
}

/* Mobile padding */
@media (max-width: 640px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .hero-panel { border-radius: 14px !important; }
}


/* ===== FINAL visual language on full app ===== */
.font-display {
  font-family: 'Fraunces', 'Manrope', Georgia, serif !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em;
  color: var(--primary) !important;
}
.hero-panel {
  min-height: 420px;
  border-radius: 22px !important;
  border: none !important;
  box-shadow: var(--card-shadow) !important;
  position: relative;
}

.hero-panel::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  right: auto !important;
  top: auto !important;
  border-radius: 0 !important;
  background: linear-gradient(105deg, rgba(50,12,28,0.75) 0%, rgba(99,24,58,0.45) 50%, rgba(30,10,20,0.25) 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.hero-panel h2,
.hero-panel .font-display,
.hero-panel [data-key="hero_title"] {
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.hero-panel p,
.hero-panel .opacity-90 {
  color: rgba(255,255,255,0.9) !important;
}
.trust-chip {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}
.chip {
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background: #fceef3 !important;
  border: 1px solid transparent !important;
  color: var(--primary) !important;
  padding: 8px 16px !important;
}
.chip:hover, .chip.active {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--primary) !important;
}
.airbnb-city-title {
  font-family: Fraunces, Manrope, serif !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em;
  color: var(--primary) !important;
}
.btn-outline {
  border: 1px solid var(--border) !important;
  color: var(--charcoal) !important;
  background: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}
.btn-outline:hover {
  border-color: var(--rose) !important;
  color: var(--rose) !important;
}
footer, .site-footer {
  background: var(--charcoal) !important;
}
.featured-badge {
  background: var(--rose) !important;
}
.verified-stamp {
  background: var(--rose) !important;
}


/* glance white lock — keep white text on dark rose panel */
section .rounded-2xl[style*="primary-dark"] .stat-num,
section .rounded-2xl[style*="primary-dark"] h3,
.stat-num { color: #fff !important; }
section .rounded-2xl[style*="primary-dark"] .small { color: rgba(255,255,255,0.65) !important; }
.stat-card {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}


/* How MyDera works body text */
.step-num + h4, .grid .font-semibold {
  color: #1f2937 !important;
}


/* Equal-height cards — View/Contact always same row */
.card-equal,
article.card-premium.card-equal {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  min-height: 100%;
}
.card-equal .card-carousel,
.card-equal > .relative {
  flex-shrink: 0;
  height: 11.5rem !important; /* fixed image band */
}
.card-equal .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0;
}
.card-equal .card-body-mid {
  flex: 1 1 auto;
  min-height: 2.25rem;
}
.card-equal .card-actions {
  margin-top: auto !important;
  flex-shrink: 0;
  padding-top: 12px !important;
}
.card-equal .card-actions .btn {
  min-height: 38px;
}
/* grid children stretch */
.listings-grid-5,
.airbnb-row-track {
  align-items: stretch;
}
.airbnb-row-track > article.card-equal {
  height: auto;
  align-self: stretch;
}


/* ===== Professional Advanced Filters ===== */
#advFiltersPanel.adv-filters-card,
.adv-filters-card {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 0 1.25rem 0 !important;
  padding: 20px 22px !important;
  background: #ffffff !important;
  border: 1px solid #e8e8ec !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(17,24,39,0.05) !important;
}
.adv-filters-card.hidden { display: none !important; }
.adv-filters-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f0f0f3 !important;
}
.adv-filters-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}
.adv-filters-hint {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #9ca3af !important;
  background: transparent !important;
  padding: 2px 0 0 0 !important;
  margin-top: 2px !important;
  border-radius: 0 !important;
  display: block !important;
}
.adv-filters-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px 16px !important;
}
@media (min-width: 560px) {
  .adv-filters-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 900px) {
  .adv-filters-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
.adv-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.adv-label,
.adv-field > span,
.adv-field .adv-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.adv-control,
.adv-field select,
.adv-field input,
.adv-field .adv-control {
  width: 100% !important;
  height: 42px !important;
  padding: 0 12px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #111827 !important;
  background: #fafafa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: auto !important;
}
.adv-control:hover,
.adv-field select:hover,
.adv-field input:hover {
  border-color: #d1d5db !important;
  background: #fff !important;
}
.adv-control:focus,
.adv-field select:focus,
.adv-field input:focus {
  border-color: #A61E4D !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(166,30,77,0.12) !important;
}
.adv-filters-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid #f0f0f3 !important;
}
.adv-filters-actions .btn {
  min-width: 100px !important;
  height: 38px !important;
}


/* Themed Sort dropdown — matches MyDera rose theme */
.sort-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  letter-spacing: 0.02em;
}
.sort-select,
#sortSelect {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-width: 168px;
  height: 38px;
  padding: 0 36px 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A61E4D' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  border: 1px solid #e8d0d9 !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(166,30,77,0.04) !important;
  cursor: pointer !important;
  outline: none !important;
}
.sort-select:hover,
#sortSelect:hover {
  border-color: #A61E4D !important;
  background-color: #fdf6f8 !important;
}
.sort-select:focus,
#sortSelect:focus {
  border-color: #A61E4D !important;
  box-shadow: 0 0 0 3px rgba(166,30,77,0.15) !important;
  background-color: #fff !important;
}
/* Native option list — limited styling, best-effort */
.sort-select option,
#sortSelect option {
  color: #1f2937;
  background: #fff;
  font-weight: 500;
  padding: 10px;
}


/* Custom Sort menu — full theme match, no system gray */
.sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sr-only-sort {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0,0,0,0) !important;
}
.sort-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  min-width: 168px;
  height: 38px;
  padding: 0 14px !important;
  border-radius: 999px;
  border: 1px solid #e8d0d9;
  background: #fff;
  color: #1f2937;
  font-size: 13px;
  font-weight: 600;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(166,30,77,0.04);
  transition: border-color .15s, background .15s, box-shadow .15s;
  vertical-align: middle;
}
.sort-trigger #sortTriggerLabel {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
}
.sort-trigger svg {
  color: #A61E4D;
  flex-shrink: 0;
  display: block !important;
  width: 12px;
  height: 8px;
  margin: 0 !important;
  position: relative;
  top: 0;
}
.sort-trigger:hover {
  border-color: #A61E4D;
  background: #fdf6f8;
}
.sort-trigger[aria-expanded="true"] {
  border-color: #A61E4D;
  box-shadow: 0 0 0 3px rgba(166,30,77,0.15);
}
.sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 80;
  min-width: 220px;
  padding: 6px;
  background: #fff;
  border: 1px solid #f0d4de;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(31,41,55,0.12), 0 2px 8px rgba(166,30,77,0.06);
}
.sort-menu.hidden { display: none !important; }
.sort-option {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sort-option:hover {
  background: #fdf2f6;
  color: #A61E4D;
}
.sort-option.active {
  background: #A61E4D;
  color: #fff;
}
.sort-option.active:hover {
  background: #8f1942;
  color: #fff;
}


/* ===== global-theme-controls: all buttons/selects match Sort rose theme ===== */

/* Outline buttons — pill/soft rose border */
.btn-outline {
  border: 1px solid #e8d0d9 !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(166,30,77,0.04) !important;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s !important;
}
.btn-outline:hover {
  border-color: #A61E4D !important;
  background: #fdf6f8 !important;
  color: #A61E4D !important;
}
.btn-outline:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(166,30,77,0.15) !important;
  border-color: #A61E4D !important;
}

/* Primary already rose — ensure solid */
.btn-primary {
  background: #A61E4D !important;
  border: 1px solid #A61E4D !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 18px rgba(166,30,77,0.18) !important;
}
.btn-primary:hover {
  background: #8f1942 !important;
  border-color: #8f1942 !important;
}

/* All native selects on site */
select.theme-select,
select.hero-select,
select.input,
select.adv-control,
#langSelect,
#langSelectMobile,
#heroFilterPrice,
#heroFilterRating,
#filterGender,
#filterFurnished,
#filterFood,
#filterRoomType {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A61E4D' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 34px !important;
  border: 1px solid #e8d0d9 !important;
  border-radius: 10px !important;
  color: #1f2937 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(166,30,77,0.04) !important;
  cursor: pointer !important;
}
select.theme-select:hover,
select.hero-select:hover,
select.input:hover,
select.adv-control:hover,
#langSelect:hover,
#langSelectMobile:hover,
#heroFilterPrice:hover,
#heroFilterRating:hover {
  border-color: #A61E4D !important;
  background-color: #fdf6f8 !important;
}
select.theme-select:focus,
select.hero-select:focus,
select.input:focus,
select.adv-control:focus,
#langSelect:focus,
#langSelectMobile:focus,
#heroFilterPrice:focus,
#heroFilterRating:focus {
  outline: none !important;
  border-color: #A61E4D !important;
  box-shadow: 0 0 0 3px rgba(166,30,77,0.15) !important;
  background-color: #fff !important;
}

/* Text inputs */
.input,
input.input,
textarea.input {
  border: 1px solid #e8d0d9 !important;
  border-radius: 10px !important;
  color: #1f2937 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(166,30,77,0.04) !important;
}
.input:focus,
input.input:focus,
textarea.input:focus {
  border-color: #A61E4D !important;
  box-shadow: 0 0 0 3px rgba(166,30,77,0.15) !important;
  outline: none !important;
}

/* Icon buttons in topbar */
.icon-btn {
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: #1f2937 !important;
  transition: background .15s, border-color .15s, color .15s !important;
}
.icon-btn:hover {
  background: #fdf6f8 !important;
  border-color: #e8d0d9 !important;
  color: #A61E4D !important;
}

/* Chips already rose — reinforce */
.chip {
  background: #fceef3 !important;
  color: #A61E4D !important;
  border: 1px solid transparent !important;
}
.chip:hover, .chip.active {
  background: #A61E4D !important;
  color: #fff !important;
}

/* Modal secondary actions */
.modal .btn-outline {
  border-color: #e8d0d9 !important;
}

/* ============================================================
   MyDera Professional Marketplace Upgrade
   Listing cards · Detail page · Verification · Mobile sticky
   ============================================================ */

/* --- MyDera Verified badge --- */
.mydera-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(13,148,136,.35);
}
.ver-level-badge {
  display: inline-flex;
  align-items: center;
  background: #ecfdf5;
  color: #047857;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #a7f3d0;
}
.featured-badge-inline {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}

/* --- Availability badges --- */
.avail-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}
.avail-open { background: #ecfdf5; color: #047857; }
.avail-soon { background: #fffbeb; color: #b45309; }
.avail-booked { background: #fef2f2; color: #b91c1c; }
.avail-paused { background: #f3f4f6; color: #6b7280; }

/* --- Card amenities & meta --- */
.card-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.card-amenities .amen-chip {
  font-size: 11px;
  padding: 2px 7px;
}
.card-meta-row {
  min-height: 22px;
}
.card-resp {
  font-size: 11px;
  color: #059669;
  font-weight: 500;
}
.card-type-line {
  letter-spacing: .04em;
}
.card-loc {
  line-height: 1.3;
}

/* --- Detail modal shell --- */
.detail-shell {
  position: relative;
  padding-bottom: 72px;
}
.detail-close-btn {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 20;
  margin: 12px 12px 0 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.95);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #374151;
}
.detail-close-btn:hover { background: #fff; color: #111; }

.detail-gallery {
  position: relative;
  background: #111;
}
.detail-main-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}
@media (min-width: 768px) {
  .detail-main-img { height: 360px; }
}
.detail-thumbs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  background: #1a1a1a;
}
.detail-thumbs .img-thumb {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: .7;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: opacity .15s, border-color .15s;
}
.detail-thumbs .img-thumb:hover,
.detail-thumbs .img-thumb.active {
  opacity: 1;
  border-color: var(--primary, #A61E4D);
}
.detail-gallery-badge {
  position: absolute;
  bottom: 60px;
  right: 12px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.detail-price-box {
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
  border: 1px solid #fbcfe8;
  border-radius: 12px;
  padding: 12px 16px;
}
body.dark .detail-price-box {
  background: #2a1f28;
  border-color: #4a3545;
}

.detail-amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 640px) {
  .detail-amenities-grid { grid-template-columns: repeat(3, 1fr); }
}
.detail-amen-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 10px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #f3f4f6;
}
body.dark .detail-amen-item {
  background: #1f1a1f;
  border-color: #3d2e3c;
}

.detail-owner-card {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 14px;
  padding: 16px;
}
body.dark .detail-owner-card {
  background: #221a22;
  border-color: #3d2e3c;
}
.detail-owner-stats {
  display: flex;
  gap: 16px;
}
.detail-owner-stats div {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #6b7280;
}
.detail-owner-stats strong {
  font-size: 16px;
  color: #111;
}
body.dark .detail-owner-stats strong { color: #f3f4f6; }

.detail-actions-card {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 14px;
  padding: 14px;
  position: sticky;
  top: 16px;
}
body.dark .detail-actions-card {
  background: #221a22;
  border-color: #3d2e3c;
}

/* Mobile sticky CTA */
.detail-mobile-sticky {
  display: none;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 10px 16px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 30;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
body.dark .detail-mobile-sticky {
  background: #221a22;
  border-top-color: #3d2e3c;
}
@media (max-width: 1023px) {
  .detail-mobile-sticky { display: flex; }
  .detail-actions-card { display: none; }
  .detail-shell { padding-bottom: 0; }
}

/* Similar cards polish */
.similar-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: box-shadow .2s, transform .15s;
}
.similar-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.similar-card img {
  width: 100%;
  height: 90px;
  object-fit: cover;
}
body.dark .similar-card { border-color: #3d2e3c; }

/* Card hover lift */
.card-premium:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(166, 30, 77, .12);
}

/* ============================================================
   In-app Chat + Chat list
   ============================================================ */
.chat-shell {
  height: min(70vh, 560px);
  max-height: 80vh;
}
.chat-messages {
  background: #faf7f8;
  min-height: 200px;
}
body.dark .chat-messages { background: #1a151a; }
.chat-bubble {
  max-width: 80%;
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 14px;
  clear: both;
}
.chat-mine {
  margin-left: auto;
  background: linear-gradient(135deg, #A61E4D, #EC5A88);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-theirs {
  margin-right: auto;
  background: #fff;
  border: 1px solid #f0e4e8;
  border-bottom-left-radius: 4px;
}
body.dark .chat-theirs {
  background: #2a1f28;
  border-color: #3d2e3c;
  color: #f3f4f6;
}
.chat-text { font-size: 14px; line-height: 1.4; word-break: break-word; }
.chat-time { font-size: 10px; opacity: .7; margin-top: 4px; text-align: right; }
.chat-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.chat-list-row:hover { background: #fdf2f8; }
body.dark .chat-list-row { border-bottom-color: #3d2e3c; }
body.dark .chat-list-row:hover { background: #2a1f28; }
.chat-list-img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Analytics grid extra cells */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) {
  .analytics-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .analytics-grid { grid-template-columns: repeat(3, 1fr); }
}
.analytics-card {
  background: #fff;
  border: 1px solid #f0e4e8;
  border-radius: 14px;
  padding: 14px 16px;
}
.analytics-card .num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary, #A61E4D);
  line-height: 1.2;
}
.analytics-card.blue .num { color: #0369a1; }
body.dark .analytics-card {
  background: #221a22;
  border-color: #3d2e3c;
}

/* Photo drop zone + reorder grid */
.photo-drop-zone {
  position: relative;
  border: 2px dashed #e8d0d9;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  background: #fdf6f8;
  transition: border-color .15s, background .15s;
}
.photo-drop-zone.drag-over {
  border-color: var(--primary, #A61E4D);
  background: #FCE8EF;
}
.photo-drop-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.photo-drop-label {
  font-size: 14px;
  color: #6b7280;
  pointer-events: none;
}
.photo-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}
.photo-preview-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  border: 2px solid transparent;
  background: #f3f4f6;
}
.photo-preview-item.is-cover {
  border-color: var(--primary, #A61E4D);
}
.photo-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-cover-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--primary, #A61E4D);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
}
.photo-preview-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: rgba(0,0,0,.55);
}
.photo-preview-actions button {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 12px;
  padding: 4px 0;
  cursor: pointer;
}
.photo-preview-actions button:hover { background: rgba(255,255,255,.15); }

/* Production: Map + List split */
.listings-split-shell { display: block; }
.listings-split-shell.is-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.listings-split-shell.is-map .listings-pane { display: none; }
.listings-split-shell.is-map .map-pane { display: block; }
.map-pane { position: relative; min-height: 420px; }
.listings-map {
  height: 70vh;
  min-height: 420px;
  border-radius: 16px;
  border: 1px solid #f0e4e8;
  z-index: 1;
}
.map-selected-card {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: auto;
  max-width: min(340px, calc(100% - 24px));
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 10;
  border: 1px solid #f0e4e8;
}
.map-selected-card .map-mini-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.map-selected-card .map-mini-body {
  flex: 1;
  min-width: 0;
}
.map-selected-card .map-mini-title {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.map-selected-card .map-mini-meta {
  font-size: 11px;
  color: #6b7280;
}
.map-selected-card .map-mini-btn {
  flex-shrink: 0;
  padding: 4px 10px !important;
  font-size: 11px !important;
}
.map-selected-card .map-mini-close {
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}
body.dark .map-selected-card {
  background: #221a22;
  border-color: #3d2e3c;
}
@media (max-width: 900px) {
  .listings-split-shell.is-split { grid-template-columns: 1fr; }
  .listings-split-shell.is-split .map-pane { order: -1; }
  .listings-map { height: 40vh; min-height: 260px; }
}
.view-mode-btn.active { box-shadow: 0 0 0 2px rgba(166,30,77,.25); }

.trust-score-card, .cost-calc-card {
  background: #fafafa;
  border: 1px solid #f0e4e8;
  border-radius: 14px;
  padding: 14px;
}
body.dark .trust-score-card, body.dark .cost-calc-card {
  background: #221a22; border-color: #3d2e3c;
}
.trust-ring {
  width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), #e5e7eb 0);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.trust-ring span {
  background: #fff; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
body.dark .trust-ring span { background: #221a22; }
.cost-rows > div { display: flex; justify-content: space-between; padding: 3px 0; }
.cost-rows .cost-total {
  border-top: 1px solid #e5e7eb; margin-top: 6px; padding-top: 8px;
  font-weight: 700; color: var(--primary, #A61E4D);
}
.recommend-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.recommend-card {
  flex: 0 0 140px; border: 1px solid #f0e4e8; border-radius: 12px;
  overflow: hidden; background: #fff; cursor: pointer; text-align: left; padding: 0;
}
.recommend-card img { width: 100%; height: 80px; object-fit: cover; display: block; }
body.dark .recommend-card { background: #221a22; border-color: #3d2e3c; }
.quality-bar { height: 6px; background: #f3e5ea; border-radius: 4px; overflow: hidden; margin-top: 4px; }
.quality-bar > div { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent, #EC5A88)); }

/* Recommendations strip removed */
.recommend-strip, .recommend-scroll, .recommend-card { display: none !important; }

/* How MyDera works — professional cards */
.how-works-section { padding-bottom: 0.25rem; }
.how-step-card {
  background: #fff;
  border: 1px solid #f0e4e8;
  border-radius: 14px;
  padding: 1rem 1rem 0.95rem;
  box-shadow: 0 2px 10px rgba(166, 30, 77, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.how-step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary, #A61E4D), var(--accent, #EC5A88));
  opacity: 0;
  transition: opacity 0.18s ease;
}
.how-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(166, 30, 77, 0.1);
  border-color: #f5c6d6;
}
.how-step-card:hover::before { opacity: 1; }
.how-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fdf2f6, #fce7ef);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.how-step-num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent, #EC5A88);
  margin-bottom: 0.2rem;
}
.how-step-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f2937 !important;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.how-step-desc {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #6b7280;
  margin: 0;
  flex: 1;
}
body.dark .how-step-card {
  background: #221a22;
  border-color: #3d2e3c;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
body.dark .how-step-card:hover {
  border-color: #5c3d52;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
body.dark .how-step-icon {
  background: linear-gradient(135deg, #3d2436, #2b1a28);
}
body.dark .how-step-title { color: #f3e8ee !important; }
body.dark .how-step-desc { color: #a89aa3; }

.testimonial-demo { opacity: 0.98; }
.demo-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--primary, #A61E4D);
  background: #fce7ef;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}
body.dark .demo-pill { background: #3d2436; color: #f9a8d4; }

/* Popular Cities — professional */
.popular-cities-section { margin-top: 3rem; }
.popular-cities-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 14px;
}
.popular-cities-sub {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #6b7280;
}
.popular-cities-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pc-tool-btn {
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 0.8rem !important;
}
.city-chip-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 4px 2px 10px;
  margin: 0 -2px;
  scrollbar-width: thin;
  scrollbar-color: #f0d4de transparent;
}
.city-chip-row::-webkit-scrollbar {
  height: 4px;
}
.city-chip-row::-webkit-scrollbar-thumb {
  background: #f0d4de;
  border-radius: 99px;
}
.city-chip-row .city-chip {
  flex-shrink: 0;
  scroll-snap-align: start;
}
.city-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #f0e4e8;
  background: #fff;
  color: #7a1f45;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(166, 30, 77, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.city-chip-ico-letter {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.city-chip-ico-emoji {
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}
.city-chip-name { font-weight: 600; }
.city-chip-ico {
  font-size: 0.75rem;
  opacity: 0.85;
}
.city-chip:hover,
.city-chip.active {
  background: linear-gradient(135deg, #fdf2f6, #fce7ef);
  border-color: #f5c6d6;
  color: var(--primary, #A61E4D);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(166, 30, 77, 0.1);
}
body.dark .popular-cities-sub { color: #a89aa3; }
body.dark .city-chip {
  background: #221a22;
  border-color: #3d2e3c;
  color: #f3d9e3;
}
body.dark .city-chip:hover,
body.dark .city-chip.active {
  background: #3d2436;
  border-color: #5c3d52;
  color: #fce7ef;
}
@media (max-width: 640px) {
  .popular-cities-head { align-items: flex-start; }
  .city-chip { padding: 7px 12px; font-size: 0.8rem; }
}

/* Near Me — professional hero control */
.near-me-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.92);
  color: #7a1f45;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.near-me-btn:hover {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.near-me-btn.is-loading {
  opacity: 0.85;
  pointer-events: none;
}
.near-me-btn.is-loading .near-me-ico {
  animation: nearMePulse 0.9s ease infinite;
}
.near-me-btn.is-active {
  background: linear-gradient(135deg, #A61E4D, #EC5A88);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 16px rgba(166, 30, 77, 0.35);
}
.near-me-btn.is-error {
  border-color: #fca5a5;
  color: #b91c1c;
}
@keyframes nearMePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}
.near-me-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.near-me-status strong { font-weight: 800; }
.near-me-clear {
  border: none;
  background: rgba(255,255,255,0.25);
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  line-height: 1;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  margin-left: 2px;
}
.near-me-clear:hover { background: rgba(255,255,255,0.4); }

.city-chip-count {
  font-size: 0.7rem;
  font-weight: 700;
  background: #fce7ef;
  color: var(--primary, #A61E4D);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 2px;
}
body.dark .city-chip-count {
  background: #3d2436;
  color: #f9a8d4;
}

.pwa-install-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
}

/* Empty states */
.empty-state {
  text-align: center;
  padding: 2.5rem 1.25rem;
  border-radius: 1rem;
  border: 1px dashed rgba(166, 30, 77, 0.25);
  background: rgba(166, 30, 77, 0.04);
}
.empty-state .empty-icon-logo {
  width: 72px;
  height: auto;
  margin: 0 auto 1rem;
  opacity: 0.9;
}
.pd-act-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--muted, #6b7280);
  line-height: 1.5;
}

/* A11y */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--primary, #A61E4D); color: #fff; padding: 0.5rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible {
  outline: 2px solid var(--primary, #A61E4D);
  outline-offset: 2px;
}
.btn:focus-visible, .icon-btn:focus-visible, .input:focus-visible {
  outline: 2px solid var(--primary, #A61E4D);
  outline-offset: 2px;
}

/* Admin bar chart */
.admin-bar-row {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
}
.admin-bar-label { width: 5.5rem; font-size: 0.75rem; color: #6b7280; flex-shrink: 0; }
.admin-bar-track {
  flex: 1; height: 8px; background: #f3e8ee; border-radius: 99px; overflow: hidden;
}
.admin-bar-fill {
  height: 100%; background: linear-gradient(90deg, #A61E4D, #EC5A88); border-radius: 99px;
}
.admin-bar-val { width: 2rem; text-align: right; font-size: 0.75rem; font-weight: 600; }

/* Mobile sticky detail already exists — ensure safe area */
.detail-mobile-sticky {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* NEW LOGO 2026 — geometric MyDera */
.mydera-logo-nav {
  height: 44px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
.mydera-logo-footer {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.brand-lockup .brand-name { display: none; } /* logo file already has MyDera text */
.brand-tag.only-tag {
  font-size: 0.7rem;
  opacity: 0.75;
  margin-left: 0.25rem;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .mydera-logo-nav { height: 36px; max-width: 140px; }
  .brand-text-optional { display: none !important; }
}

/* TOPBAR LOGO FIX */
.topbar-root {
  background: #ffffff !important;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0;
  background: transparent;
}
.mydera-logo-nav {
  height: 42px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  background: #ffffff;
  display: block;
}
.brand-lockup .brand-text,
.brand-lockup .brand-name,
.brand-lockup .brand-tag {
  display: none !important;
}
@media (max-width: 640px) {
  .mydera-logo-nav { height: 34px; max-width: 150px; }
}


/* LOGO SIZE — larger for readability */
.mydera-logo-nav {
  height: 56px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
  background: #ffffff !important;
}
.mydera-logo-footer {
  height: 52px !important;
  width: auto !important;
  max-width: 240px !important;
  object-fit: contain !important;
}
.mydera-logo-pd {
  height: auto !important;
  max-height: 48px !important;
  max-width: min(200px, 100%) !important;
}
.mydera-logo-login {
  height: 88px !important;
  max-width: 280px !important;
}
@media (max-width: 640px) {
  .mydera-logo-nav {
    height: 46px !important;
    max-width: 200px !important;
  }
}


/* Profile sidebar logo — centered */
.pd-sidebar-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 8px 12px 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.pd-sidebar-brand .mydera-logo-pd {
  display: block !important;
  margin: 0 auto !important;
  height: 48px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
}
.pd-sidebar-close {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
}


/* Role choice — professional icons */
.role-card {
  text-align: center;
}
.role-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f9eef2, #f3d9e3);
  color: var(--primary, #8A0E30);
  box-shadow: inset 0 0 0 1px rgba(138, 14, 48, 0.08);
}
.role-card:hover .role-card-icon {
  background: linear-gradient(145deg, #f3d9e3, #e8c4d0);
  color: var(--primary, #8A0E30);
  transform: translateY(-1px);
  transition: 0.15s ease;
}
body.dark .role-card-icon {
  background: rgba(138, 14, 48, 0.25);
  color: #f3d9e3;
}


/* Profile tip — MyDera icon only (no text) */
.pd-tip-art {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-tip-logo-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  opacity: 0.95;
}


/* Profile tip — same full logo as top bar */
.pd-tip-art {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  max-width: 200px;
}
.pd-tip-logo-full {
  height: 48px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  display: block;
  background: #fff;
}


/* Top bar color match logo #A50A41 */
:root {
  --primary: #A61E4D;
  --primary-dark: #7A0830;
  --accent: #A50A41;
  --rose: #A50A41;
  --rose-soft: #FCE8EF;
}
.topbar-root .icon-btn {
  color: #A50A41 !important;
  background: #FCE8EF !important;
  border-color: #F5D0DC !important;
}
.topbar-root .icon-btn:hover {
  background: #A50A41 !important;
  color: #fff !important;
  border-color: #A50A41 !important;
}
.topbar-root .theme-select {
  color: #A50A41 !important;
  background: #FCE8EF !important;
  border-color: #F5D0DC !important;
}
.topbar-root .topbar-search {
  border-color: #F5D0DC !important;
}
.topbar-root .topbar-search:focus {
  border-color: #A50A41 !important;
  box-shadow: 0 0 0 3px rgba(165, 10, 65, 0.18) !important;
}
.user-chip, .topbar-root .user-chip {
  border-color: #F5D0DC !important;
}


/* Top bar: logo left | search TRUE page-center | actions right */
.topbar-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  gap: 12px;
}
.topbar-left {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.topbar-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(480px, 42vw);
  display: flex !important;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* let clicks pass except on children */
}
.topbar-center .topbar-search-wrap {
  pointer-events: auto;
  width: 100%;
}
.topbar-search-wrap .topbar-search {
  width: 100% !important;
  max-width: 100%;
}
.topbar-right {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
@media (max-width: 767px) {
  .topbar-center { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .topbar-center { width: min(360px, 36vw); }
  .mydera-logo-nav { max-width: 160px !important; height: 44px !important; }
}




/* ========== Rose only — no blue accent ========== */
:root {
  --primary: #A61E4D;
  --primary-dark: #8F1942;
  --accent: #A61E4D;
  --rose: #A61E4D;
  --rose-soft: #FCEEF3;
}
a:not(.btn):not(.footer-link):not(.social-icon) {
  color: #A61E4D;
}
a:not(.btn):not(.footer-link):hover {
  color: #8F1942;
}
.badge-count,
.notif-badge,
#notifBellBadge {
  background: #A61E4D !important;
  color: #fff !important;
}
.map-pin-dot,
.near-me-active,
.chip.active,
.filter-chip.active {
  background: #A61E4D !important;
  border-color: #A61E4D !important;
  color: #fff !important;
}
.btn-outline:hover {
  border-color: #A61E4D !important;
  color: #A61E4D !important;
}
.text-blue-trust,
.verified-badge-blue {
  color: #A61E4D !important;
}
.btn-blue {
  background: #A61E4D !important;
}
.chip-blue {
  background: #FCEEF3 !important;
  color: #A61E4D !important;
  border-color: #F3D9E3 !important;
}


/* Login role cards — compact (not oversized) */
#loginModal .relative {
  max-width: 22rem !important; /* ~352px */
}
#loginModal .mydera-logo-login {
  height: 52px !important;
  max-width: 180px !important;
}
#loginModal .role-card {
  padding: 12px 12px !important;
  border-radius: 12px !important;
  gap: 0;
}
#loginModal .role-card-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  margin-bottom: 6px !important;
}
#loginModal .role-card .small {
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
  margin-top: 2px !important;
}
#loginModal .grid.gap-2,
#loginModal .grid.gap-3 {
  gap: 0.5rem !important;
}


/* Login modal + role cards — soft effects */
@keyframes loginModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes roleCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#loginModal:not(.hidden) .relative {
  animation: loginModalIn 0.28s ease-out both;
}
#loginModal .role-card {
  transition:
    border-color 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.2s ease,
    background 0.2s ease;
  animation: roleCardIn 0.35s ease-out both;
}
#loginModal .role-card:nth-child(1) { animation-delay: 0.05s; }
#loginModal .role-card:nth-child(2) { animation-delay: 0.12s; }
#loginModal .role-card:hover {
  border-color: var(--primary, #A61E4D) !important;
  background: linear-gradient(180deg, #fff 0%, #FCEEF3 100%) !important;
  box-shadow: 0 10px 28px rgba(166, 30, 77, 0.16) !important;
  transform: translateY(-3px) !important;
}
#loginModal .role-card:active {
  transform: translateY(-1px) scale(0.98) !important;
}
#loginModal .role-card-icon {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
#loginModal .role-card:hover .role-card-icon {
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(166, 30, 77, 0.2);
  background: linear-gradient(145deg, #FCEEF3, #f3d9e3) !important;
}
#loginModal .mydera-logo-login {
  transition: transform 0.3s ease;
}
#loginModal:not(.hidden) .mydera-logo-login {
  animation: loginModalIn 0.35s ease-out both;
}
/* Soft backdrop */
#loginModal .absolute.inset-0 {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.2s ease;
}


/* ========== UI POLISH BATCH ========== */

/* Modal soft open (profile, detail, info, etc.) */
@keyframes modalPanelIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal:not(.hidden) > div.relative,
.modal:not(.hidden) .modal-panel {
  animation: modalPanelIn 0.28s ease-out both;
}
.modal:not(.hidden) > .absolute.inset-0 {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Profile dashboard shell */
#profileDashboard:not(.hidden),
.pd-shell:not(.hidden) {
  animation: modalPanelIn 0.3s ease-out both;
}

/* Room cards — marketplace hover + image zoom */
.card-premium,
.room-card,
.listing-card {
  transition: transform 0.22s ease, box-shadow 0.25s ease, border-color 0.2s ease;
  overflow: hidden;
}
.card-premium:hover,
.room-card:hover,
.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(11, 31, 58, 0.12);
  border-color: rgba(166, 30, 77, 0.25);
}
.card-premium img,
.room-card img,
.listing-card img,
.card-premium .room-img,
.room-card .room-img {
  transition: transform 0.4s ease;
}
.card-premium:hover img,
.room-card:hover img,
.listing-card:hover img,
.card-premium:hover .room-img,
.room-card:hover .room-img {
  transform: scale(1.05);
}

/* Empty states */
.empty-state {
  padding: 2.75rem 1.25rem !important;
  border-radius: 1rem;
  border: 1px dashed rgba(166, 30, 77, 0.22);
  background: rgba(166, 30, 77, 0.03);
}
.empty-state .empty-icon-logo,
.empty-state img {
  opacity: 0.85;
  transition: transform 0.3s ease;
}
.empty-state:hover .empty-icon-logo,
.empty-state:hover img {
  transform: scale(1.04);
}

/* Skeleton — smoother */
.skeleton-card {
  border-radius: 16px !important;
  border: 1px solid #f0e4ea !important;
}
.skeleton-shimmer {
  animation: shimmer 1.2s ease-in-out infinite !important;
}

/* Mobile topbar spacing */
@media (max-width: 767px) {
  .topbar-root .container,
  .topbar-inner {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
    min-height: 52px;
  }
  .mydera-logo-nav {
    height: 40px !important;
    max-width: 148px !important;
  }
  .topbar-root {
    padding-top: env(safe-area-inset-top, 0);
  }
}

/* Dark mode — rose consistency */
body.dark {
  --primary: #C43A6A;
  --accent: #C43A6A;
  --rose: #C43A6A;
  --rose-soft: #3d2436;
  background: #121018 !important;
}
body.dark .topbar-root {
  background: #1a1520 !important;
  border-bottom-color: #3d2e3c !important;
}
body.dark .topbar-root .icon-btn {
  color: #f3d9e3 !important;
  background: #2b212b !important;
  border-color: #3d2e3c !important;
}
body.dark .topbar-root .icon-btn:hover {
  background: #A61E4D !important;
  color: #fff !important;
}
body.dark .btn-primary,
body.dark .pd-btn-primary,
body.dark .cta-btn {
  background: #A61E4D !important;
  border-color: #A61E4D !important;
}
body.dark .card-premium,
body.dark .room-card,
body.dark .role-card,
body.dark .pd-card {
  background: #221a22 !important;
  border-color: #3d2e3c !important;
}
body.dark .empty-state {
  background: rgba(166, 30, 77, 0.08);
  border-color: rgba(196, 58, 106, 0.3);
}
body.dark footer {
  background: #0B1F3A !important;
}

/* ========== PRODUCT: Navy + Rose theme ========== */
:root {
  --primary: #A61E4D;
  --primary-dark: #8F1942;
  --accent: #A61E4D;
  --rose: #A61E4D;
  --rose-soft: #FCEEF3;
  --navy: #0B1F3A;
}
.btn-primary, .pd-btn-primary, .cta-btn, .topbar-add-btn {
  background: #A61E4D !important;
  border-color: #A61E4D !important;
  color: #fff !important;
}
.btn-outline {
  border-color: #0B1F3A !important;
  color: #0B1F3A !important;
}
.btn-outline:hover {
  background: #0B1F3A !important;
  color: #fff !important;
}
footer, footer.text-white {
  background: #0B1F3A !important;
}
footer .footer-link:hover {
  color: #A61E4D !important;
}
.topbar-root .icon-btn {
  color: #0B1F3A !important;
  background: #F1F5F9 !important;
  border-color: #e2e8f0 !important;
}
.topbar-root .icon-btn:hover {
  background: #0B1F3A !important;
  color: #fff !important;
  border-color: #0B1F3A !important;
}
.topbar-root .theme-select {
  color: #0B1F3A !important;
  background: #F1F5F9 !important;
  border-color: #e2e8f0 !important;
}
.badge-count, #notifBellBadge {
  background: #A61E4D !important;
}
a:not(.btn):not(.footer-link):not(.social-icon) {
  color: #0B1F3A;
}
a:not(.btn):not(.footer-link):hover {
  color: #A61E4D;
}


/* Visit scheduler */
.visit-modal-panel { animation: modalPanelIn 0.28s ease-out both; }
.visit-card {
  border: 1px solid #f0e4ea;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
}
.visit-status {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
body.dark .visit-card {
  background: #221a22;
  border-color: #3d2e3c;
}


/* Topbar profile — avatar only (save space for search / language) */
.nav-profile-btn {
  gap: 0 !important;
  padding: 0 2px !important;
  width: 38px !important;
  height: 38px !important;
  justify-content: center !important;
  border-radius: 50% !important;
}
.nav-profile-name {
  display: none !important;
}
.nav-profile-img {
  width: 32px !important;
  height: 32px !important;
}
.topbar-right {
  gap: 6px !important;
  flex-shrink: 0 !important;
}
.topbar-center {
  width: min(440px, 38vw) !important;
}
@media (max-width: 1100px) {
  .topbar-center {
    width: min(320px, 32vw) !important;
  }
}


/* Seeker access plan cards */
.seeker-plan-card {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #f3d9e3;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.seeker-plan-card:hover {
  border-color: var(--primary, #A61E4D);
  box-shadow: 0 8px 24px rgba(166, 30, 77, 0.12);
  transform: translateY(-2px);
}










/* ===== FOOTER B: desktop 5-col; mobile same row + horizontal scroll ===== */
.footer-main-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr 1.15fr 1fr 1.15fr !important;
  gap: 1.75rem 1.5rem !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: start;
}
.footer-section .footer-links-grid {
  display: block !important;
}
.footer-section .footer-link {
  display: block !important;
}
footer .footer-col-title {
  display: block !important;
  color: #fff !important;
  margin-bottom: 0.55rem !important;
}
footer .footer-link {
  color: rgba(255,255,255,0.85) !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  padding: 4px 0 !important;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 768px) {
  body {
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Same 5-column layout, scroll sideways */
  .footer-main-grid {
    display: grid !important;
    grid-template-columns: 200px 160px 180px 160px 200px !important;
    gap: 1.25rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 10px !important;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .footer-main-grid > div {
    scroll-snap-align: start;
    min-width: 0;
  }
  .footer-section .footer-links-grid {
    display: block !important;
  }
  .footer-section .footer-link {
    white-space: normal;
    font-size: 0.85rem !important;
    padding: 5px 0 !important;
  }
  footer .mydera-logo-footer {
    max-height: 44px !important;
    height: 44px !important;
    width: auto !important;
    max-width: 170px !important;
    background: transparent !important;
    filter: none !important;
    padding: 0 !important;
    opacity: 1 !important;
  }
  /* subtle hint that footer scrolls */
  .footer-main-grid::-webkit-scrollbar {
    height: 4px;
  }
  .footer-main-grid::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 4px;
  }
}














/* ===== ONLY mobile + PWA: desktop-like hero (desktop CSS untouched) ===== */
@media (max-width: 768px) {
  header.container.hero-header,
  header.container:has(.hero-panel) {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-top: 8px !important;
  }
  .hero-panel {
    min-height: 340px !important;
    border-radius: 18px !important;
    padding: 1.25rem 1rem !important;
    background:
      linear-gradient(105deg, rgba(50,12,28,0.78) 0%, rgba(99,24,58,0.42) 45%, rgba(30,10,20,0.22) 100%),
      url('hero-bg.png') center center / cover no-repeat !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.14) !important;
    overflow: hidden !important;
  }
  .hero-panel h2,
  .hero-panel [data-key="hero_title"] {
    color: #fff !important;
    font-size: 1.55rem !important;
    line-height: 1.15 !important;
  }
  .hero-panel p[data-key="hero_sub"],
  .hero-panel .opacity-90 {
    color: rgba(255,255,255,0.92) !important;
    font-size: 0.85rem !important;
  }
  .hero-panel form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }
  #heroLocation {
    flex: 1 1 140px !important;
    min-width: 120px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    font-size: 0.8rem !important;
    padding: 7px 12px !important;
  }
  .hero-panel .hero-select {
    flex: 0 1 auto !important;
    min-width: 90px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    background: #fff !important;
    font-size: 0.72rem !important;
    padding: 5px 8px !important;
  }
  .hero-panel .near-me-btn {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
  }
  .hero-panel form > .btn-primary,
  .hero-panel form button.btn-primary {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
  }
  .hero-panel .chip {
    background: rgba(255,255,255,0.16) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    padding: 5px 11px !important;
    font-size: 0.75rem !important;
  }
  .hero-panel .trust-chip {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    font-size: 0.7rem !important;
  }
}
@media (max-width: 480px) {
  #heroLocation {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .hero-panel .hero-select {
    flex: 1 1 calc(33.33% - 0.35rem) !important;
    min-width: 0 !important;
    font-size: 0.65rem !important;
  }
}
/* PWA uses same mobile rules above via max-width — no desktop change */




/* ===== Mobile/PWA: cards + badges more compact ===== */
@media (max-width: 768px) {
  .airbnb-row-track > article.card-premium,
  .airbnb-row-track > article.airbnb-card {
    flex: 0 0 158px !important;
    width: 158px !important;
    max-width: 158px !important;
    height: auto !important;
    min-height: 0 !important;
  }
  article.card-premium.card-equal {
    height: auto !important;
    min-height: 0 !important;
  }
  .card-equal .card-carousel,
  .card-equal > .relative,
  .airbnb-row-track .card-equal > .relative {
    height: 6.75rem !important;
  }

  /* Verified — small pill */
  .airbnb-row-track .mydera-verified-badge,
  article.card-premium .mydera-verified-badge {
    font-size: 8px !important;
    padding: 2px 6px !important;
    gap: 2px !important;
    top: 4px !important;
    left: 4px !important;
    max-width: calc(100% - 52px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
  }
  /* New badge — tiny */
  .airbnb-row-track .listing-badge,
  .airbnb-row-track .badge-new,
  article.card-premium .listing-badge,
  article.card-premium .badge-new {
    font-size: 8px !important;
    padding: 2px 5px !important;
    top: 4px !important;
    right: 4px !important;
    left: auto !important;
    line-height: 1.2 !important;
  }
  .airbnb-row-track .demo-listing-badge,
  article.card-premium .demo-listing-badge {
    font-size: 8px !important;
    padding: 2px 5px !important;
    top: 4px !important;
    left: 4px !important;
  }

  /* Compare — small bottom-left */
  .airbnb-row-track .compare-checkbox,
  article.card-premium .compare-checkbox {
    bottom: 4px !important;
    left: 4px !important;
    top: auto !important;
    font-size: 9px !important;
    padding: 2px 5px !important;
    gap: 2px !important;
    background: rgba(255,255,255,0.92) !important;
    border-radius: 999px !important;
    line-height: 1.1 !important;
  }
  .airbnb-row-track .compare-checkbox input,
  article.card-premium .compare-chk {
    width: 11px !important;
    height: 11px !important;
    margin: 0 !important;
  }

  /* Heart — small circle */
  .airbnb-row-track .fav-toggle,
  article.card-premium .fav-toggle {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    bottom: 4px !important;
    right: 4px !important;
    top: auto !important;
    padding: 0 !important;
  }

  /* Body compact */
  .airbnb-row-track .card-body {
    padding: 0.45rem 0.5rem 0.55rem !important;
  }
  .airbnb-row-track .card-type-line {
    font-size: 0.55rem !important;
  }
  .airbnb-row-track h4,
  .airbnb-row-track .card-body h4 {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }
  .airbnb-row-track .card-loc {
    font-size: 0.6rem !important;
  }
  .airbnb-row-track .font-mono {
    font-size: 0.82rem !important;
  }
  .airbnb-row-track .text-amber-500,
  .airbnb-row-track .small {
    font-size: 0.58rem !important;
  }
  .airbnb-row-track .amen-chip {
    font-size: 0.55rem !important;
    padding: 1px 4px !important;
  }
  .airbnb-row-track .card-amenities .amen-chip:nth-child(n+3) {
    display: none !important;
  }
  .airbnb-row-track .card-actions {
    padding-top: 0.35rem !important;
    gap: 3px !important;
  }
  .airbnb-row-track .card-actions .btn {
    min-height: 28px !important;
    padding: 3px 4px !important;
    font-size: 0.62rem !important;
    border-radius: 7px !important;
  }
}


/* Featured: only when admin sets featured on real listing (card has .is-featured) */
.featured-badge,
.featured-badge-inline {
  display: none !important;
}
.card-premium.is-featured .featured-badge,
.card-premium.is-featured .featured-badge-inline,
#viewVerifiedRow .featured-badge-inline {
  display: inline-flex !important;
}

/* Card body: no extra bottom stretch */
.card-equal,
article.card-premium.card-equal {
  height: auto !important;
  min-height: 0 !important;
}
.card-equal .card-body {
  flex: 0 1 auto !important;
}
.card-equal .card-actions {
  margin-top: 0.35rem !important;
  padding-top: 0.35rem !important;
}

@media (max-width: 768px) {
  .airbnb-row-track > article.card-premium {
    flex: 0 0 158px !important;
    width: 158px !important;
    max-width: 158px !important;
  }
  .card-equal > .relative,
  .airbnb-row-track .card-equal > .relative,
  .airbnb-row-track .card-carousel {
    height: 6.5rem !important;
  }
  .airbnb-row-track .card-body {
    padding: 0.4rem 0.5rem 0.5rem !important;
  }
  .airbnb-row-track .card-meta-row {
    margin-top: 0.2rem !important;
  }
  /* Hide respond % on mobile to save vertical space */
  .airbnb-row-track .card-resp {
    display: none !important;
  }
  .airbnb-row-track .card-actions {
    margin-top: 0.25rem !important;
    padding-top: 0.25rem !important;
  }
  .airbnb-row-track .card-actions .btn {
    min-height: 28px !important;
    font-size: 0.62rem !important;
    padding: 3px 4px !important;
  }
  .airbnb-row-track .mydera-verified-badge {
    font-size: 8px !important;
    padding: 2px 5px !important;
  }
  .airbnb-row-track .listing-badge,
  .airbnb-row-track .badge-new,
  .airbnb-row-track .demo-listing-badge {
    font-size: 8px !important;
    padding: 2px 5px !important;
  }
  .airbnb-row-track .compare-checkbox {
    font-size: 9px !important;
    padding: 2px 5px !important;
    bottom: 4px !important;
    left: 4px !important;
  }
  .airbnb-row-track .fav-toggle {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    bottom: 4px !important;
    right: 4px !important;
  }
}


/* ===== Card layout: equal bottoms, no extra length ===== */
.airbnb-row-track {
  align-items: stretch !important;
}
.airbnb-row-track > article.card-premium {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  align-self: stretch !important;
}
.airbnb-row-track > article.card-premium .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 8px 10px 10px !important;
  min-height: 0 !important;
}
.airbnb-row-track .card-type-line {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 2px !important;
  line-height: 1.2 !important;
}
.airbnb-row-track .card-title {
  font-size: 0.82rem !important;
  font-weight: 650 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.05em !important; /* always 2 lines slot → equal cards */
  max-height: 2.05em !important;
}
.airbnb-row-track .card-loc {
  font-size: 0.68rem !important;
  color: #6b7280 !important;
  margin: 3px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.airbnb-row-track .card-loc span:last-child {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.airbnb-row-track .card-price-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 4px !important;
  margin-top: 4px !important;
}
.airbnb-row-track .card-price {
  font-family: ui-monospace, monospace !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--accent-dark, #9C2B54) !important;
  white-space: nowrap !important;
}
.airbnb-row-track .card-price span {
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  color: #9ca3af !important;
}
.airbnb-row-track .card-rating {
  font-size: 0.65rem !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.airbnb-row-track .card-amenities-wrap {
  min-height: 1.4rem !important;
  margin-top: 4px !important;
}
.airbnb-row-track .card-amenities {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  margin: 0 !important;
}
.airbnb-row-track .amen-chip {
  font-size: 0.58rem !important;
  padding: 1px 5px !important;
}
.airbnb-row-track .card-amenities .amen-chip:nth-child(n+3) {
  display: none !important;
}
.airbnb-row-track .card-meta-row {
  min-height: 1.25rem !important;
  margin-top: 3px !important;
  display: flex !important;
  align-items: center !important;
}
.airbnb-row-track .avail-badge {
  font-size: 0.6rem !important;
  padding: 1px 6px !important;
}
.airbnb-row-track .card-resp {
  display: none !important;
}
/* Buttons always at bottom of card */
.airbnb-row-track .card-actions {
  margin-top: auto !important;
  padding-top: 6px !important;
  display: flex !important;
  gap: 4px !important;
}
.airbnb-row-track .card-actions .btn {
  flex: 1 1 0 !important;
  min-height: 30px !important;
  padding: 4px 4px !important;
  font-size: 0.68rem !important;
  border-radius: 8px !important;
}

@media (max-width: 768px) {
  .airbnb-row-track > article.card-premium {
    flex: 0 0 160px !important;
    width: 160px !important;
    max-width: 160px !important;
  }
  .airbnb-row-track .card-carousel,
  .airbnb-row-track .card-equal > .relative,
  .airbnb-row-track article.card-premium > .relative {
    height: 6.25rem !important;
    flex-shrink: 0 !important;
  }
  .airbnb-row-track .card-body {
    padding: 6px 8px 8px !important;
  }
  .airbnb-row-track .card-title {
    font-size: 0.75rem !important;
    min-height: 1.9em !important;
    max-height: 1.9em !important;
  }
  .airbnb-row-track .card-price {
    font-size: 0.85rem !important;
  }
  .airbnb-row-track .card-actions .btn {
    min-height: 28px !important;
    font-size: 0.62rem !important;
  }
}


/* Near Me city fallback */
.near-me-fallback {
  margin: 10px 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fdf2f8, #fff);
  border: 1px solid #fbcfe8;
  box-shadow: 0 4px 14px rgba(156,43,84,0.08);
}
.near-me-fallback.hidden { display: none !important; }
.near-me-fallback-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: #9C2B54;
}
.near-me-fallback-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.near-me-city-chip {
  cursor: pointer;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
}
.near-me-city-chip:hover {
  border-color: #9C2B54 !important;
  color: #9C2B54 !important;
}
.near-me-retry {
  border-style: dashed !important;
}

/* Empty state polish */
.empty-state, .near-me-empty {
  text-align: center;
  padding: 2.5rem 1.25rem;
  max-width: 420px;
  margin: 1rem auto;
}
.empty-state-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.empty-state h3 {
  font-size: 1.1rem;
  font-weight: 650;
  margin: 0 0 0.35rem;
  color: #1f2937;
}
.demo-listings-banner, #demoListingsBanner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.85rem;
}


/* ===== Compact compare floating card (overrides) ===== */
.compare-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 16px !important;
  top: auto !important;
  z-index: 80 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  pointer-events: none !important;
  padding: 0 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  gap: 0 !important;
}
.compare-bar.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.compare-bar-card {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 400px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #f0d4de;
  box-shadow: 0 10px 28px rgba(100, 20, 50, 0.18);
}
.compare-bar-left {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.compare-bar-count {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #A61E4D;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
}
.compare-chips::-webkit-scrollbar { display: none; }
.compare-chip {
  flex-shrink: 0;
  max-width: 100px;
  background: #fdf2f8 !important;
  color: #9C2B54 !important;
  border-radius: 999px !important;
  padding: 4px 8px 4px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  display: flex !important;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
}
.compare-chip span { overflow: hidden; text-overflow: ellipsis; max-width: 72px; }
.compare-chip button {
  background: none !important;
  border: none !important;
  color: #9C2B54 !important;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
}
.compare-bar-actions { display: flex; gap: 6px; flex-shrink: 0; }
.compare-btn-go {
  background: #A61E4D;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.compare-btn-clear {
  background: #fff;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.compare-btn-clear:hover { border-color: #A61E4D; color: #A61E4D; }
@media (max-width: 768px) {
  .compare-bar:not(.hidden) { bottom: 72px !important; }
  .compare-bar-card { max-width: 100%; }
}

/* new logo fit */
.mydera-logo-nav {
  height: 48px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  background: transparent !important;
}
.mydera-logo-footer {
  height: 44px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
}
.mydera-logo-login {
  height: 56px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
}
.mydera-logo-pd, .pd-tip-logo-full, .empty-icon-logo {
  max-height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
}
@media (max-width: 768px) {
  .mydera-logo-nav {
    height: 40px !important;
    max-width: 160px !important;
  }
}


/* FOOTER LOGO DARK FIX — no white box, no invert */
footer .mydera-logo-footer,
.footer-brand-col .mydera-logo-footer,
img.mydera-logo-footer {
  background: transparent !important;
  background-color: transparent !important;
  filter: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@media (max-width: 768px) {
  footer .mydera-logo-footer,
  .footer-brand-col .mydera-logo-footer,
  img.mydera-logo-footer {
    height: 42px !important;
    max-height: 42px !important;
    max-width: 170px !important;
  }
}


/* HOW WORKS PWA FIX — cards always visible in installed app */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .how-works-section .reveal,
  .how-step-card.reveal,
  .how-step-card {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}
.how-works-section .how-step-card {
  opacity: 1;
}
.how-works-section .how-step-card.reveal:not(.in) {
  /* still allow animation once, but never stay fully invisible long */
  animation: howFadeIn 0.6s ease forwards;
}
@keyframes howFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}


/* ONBOARD TOUR PWA — above bottom nav / headers */
#onboardTourOverlay {
  z-index: 90 !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.55) !important;
}
#onboardTourTooltip {
  z-index: 91 !important;
  position: fixed !important;
  max-width: min(300px, calc(100vw - 32px)) !important;
}
@media (display-mode: standalone) {
  #onboardTourOverlay { z-index: 100 !important; }
  #onboardTourTooltip { z-index: 101 !important; }
}

.pwa-install-x { padding: 4px 8px !important; min-width: 0; border: none !important; color: #9ca3af; }
.pwa-install-x:hover { color: #A61E4D; }


.city-chip {
  align-items: center;
  gap: 8px;
}
.city-chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* CITY CHIP PROFESSIONAL CIRCLES */
.city-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px 6px 6px !important;
  border-radius: 999px !important;
  border: 1px solid #f0d4de !important;
  background: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(166, 30, 77, 0.06);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.city-chip:hover,
.city-chip.active {
  border-color: #A61E4D !important;
  box-shadow: 0 4px 12px rgba(166, 30, 77, 0.12);
  transform: translateY(-1px);
}
.city-chip-ico-letter {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.city-chip-name { font-size: 0.875rem; font-weight: 600; color: #374151; }
.city-chip-count {
  background: #FCE8EF !important;
  color: #A61E4D !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
}
body.dark .city-chip { background: #2a1f28 !important; border-color: #4a3545 !important; }
body.dark .city-chip-name { color: #f3e8ee; }

/* ONBOARD TOUR Z */
#onboardTourOverlay { z-index: 200 !important; }
#onboardTourTooltip {
  z-index: 210 !important;
  pointer-events: auto !important;
}
#onboardTourNextBtn { pointer-events: auto !important; min-width: 72px; }


/* Compare table — Best Match badge (mobile-safe, no title overlap) */
.compare-table-v2 td { vertical-align: top; }
.compare-table-v2 .compare-photo-wrap {
  position: relative;
  display: inline-block;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
.compare-table-v2 .compare-photo-img {
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.compare-table-v2 .compare-photo-best {
  box-shadow: 0 0 0 2px #A61E4D;
}
.compare-table-v2 .compare-best-badge {
  position: absolute;
  left: 4px;
  top: 4px;
  right: 4px;
  z-index: 2;
  background: linear-gradient(135deg, #A61E4D, #c2185b);
  color: #fff !important;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 3px 6px;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.compare-table-v2 .compare-title-best {
  font-weight: 700;
  color: #A61E4D;
}
@media (max-width: 480px) {
  .compare-table-v2 .compare-photo-img {
    width: 72px;
    height: 52px;
  }
  .compare-table-v2 .compare-best-badge {
    font-size: 0.58rem;
    padding: 2px 4px;
  }
}



/* ========== MyDera Careers (professional standalone) ========== */
body.career-open {
  padding-bottom: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f7f7f8 !important;
}
body.career-open #siteShell,
body.career-open #appSplash,
body.career-open .bnb-nav,
body.career-open #bottomNav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.career-open footer {
  display: none !important;
}

.career-page {
  display: none;
  min-height: 100vh;
  min-height: 100dvh;
  background: #f7f7f8;
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.career-page:not(.hidden) { display: block !important; visibility: visible !important; }

.career-hero {
  background: linear-gradient(145deg, #A61E4D 0%, #8B1840 48%, #5c0f2c 100%);
  color: #fff;
  padding: 1.25rem 0 2.75rem;
  position: relative;
  overflow: hidden;
}
.career-hero::after {
  content: "";
  position: absolute;
  right: -20%;
  top: -40%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.career-hero-inner { max-width: 720px; position: relative; z-index: 1; }
.career-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.career-back {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  transition: background 0.15s;
}
.career-back:hover { background: rgba(255,255,255,0.2); }
.career-hero-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.career-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 0.5rem;
}
.career-hero-title {
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.65rem;
}
.career-hero-sub {
  font-size: 1.02rem;
  line-height: 1.55;
  opacity: 0.92;
  max-width: 34rem;
  margin: 0 0 1.15rem;
}
.career-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.career-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
}
.career-manage-bar { margin-top: 1.25rem; }

.career-section {
  padding: 2.25rem 1rem;
  max-width: 880px;
  margin: 0 auto;
}
.career-section-head { margin-bottom: 1.35rem; }
.career-h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}
.career-h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #A61E4D;
  border-radius: 2px;
  margin-top: 0.45rem;
}
.career-section-lead {
  font-size: 0.92rem;
  color: #666;
  margin: 0.5rem 0 0;
}

.career-about-grid, .career-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}
@media (min-width: 640px) {
  .career-about-grid { grid-template-columns: 1fr 1fr; }
  .career-why-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .career-why-grid { grid-template-columns: repeat(3, 1fr); }
}

.career-about-card, .career-why-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 1.2rem 1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.career-about-card:hover, .career-why-card:hover {
  border-color: #f0c4d0;
  box-shadow: 0 4px 16px rgba(166,30,77,0.08);
}
.career-card-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A61E4D;
  margin-bottom: 0.35rem;
}
.career-about-card h3, .career-why-card h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 0.4rem;
}
.career-about-card p, .career-why-card p {
  font-size: 0.88rem;
  color: #555;
  line-height: 1.55;
  margin: 0;
}
.career-why-icon {
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fdf2f5;
  margin-bottom: 0.65rem;
}

.career-journey {
  margin-top: 1.25rem;
  padding: 1.35rem 1.4rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff 0%, #fdf2f5 100%);
  border: 1px solid #f3d0da;
}
.career-journey-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A61E4D;
  margin-bottom: 0.5rem;
}
.career-journey p {
  font-size: 0.92rem;
  color: #444;
  line-height: 1.6;
  margin: 0;
}

.career-jobs-section { padding-bottom: 3rem; }
.career-vacancy-list { display: flex; flex-direction: column; gap: 1rem; }
.career-loading {
  text-align: center;
  padding: 2rem;
  color: #888;
  font-size: 0.9rem;
}
.career-vacancy-card {
  background: #fff;
  border: 1px solid #eee;
  border-left: 4px solid #A61E4D;
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.career-vacancy-card:hover {
  box-shadow: 0 6px 20px rgba(166,30,77,0.1);
}
.career-vacancy-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.career-vacancy-title {
  font-size: 1.12rem;
  font-weight: 750;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.01em;
}
.career-vacancy-badge {
  background: #e8f5e9;
  color: #1b5e20;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.career-vacancy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.75rem;
}
.career-vacancy-desc {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.5;
  margin: 0 0 1.1rem;
}
.career-vacancy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.career-vacancy-actions .btn {
  min-height: 40px;
  font-weight: 600;
  border-radius: 10px;
}

.career-empty {
  text-align: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 2.75rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.career-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 16px;
  background: #fdf2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
.career-empty .font-semibold { color: #1a1a1a; }

.career-page-footer {
  border-top: 1px solid #e8e8e8;
  background: #fff;
  padding: 1rem 0;
  margin-top: auto;
}
.career-page-footer-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #888;
}
.career-footer-link {
  background: none;
  border: none;
  color: #A61E4D;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.8rem;
}
.career-footer-link:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .career-hero { padding: 1rem 0 2rem; }
  .career-hero-logo { height: 30px; }
  .career-section { padding: 1.75rem 0.85rem; }
  .career-vacancy-actions { flex-direction: column; align-items: stretch; }
  .career-vacancy-actions .btn { width: 100%; text-align: center; }
}

/* Career v2 — facts, life, hire, linkedin, contact, job details */
.career-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}
@media (min-width: 640px) {
  .career-facts { grid-template-columns: repeat(4, 1fr); }
}
.career-fact {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
}
.career-fact-k {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A61E4D;
  margin-bottom: 0.25rem;
}
.career-fact-v {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
}
.career-life-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 640px) {
  .career-life-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .career-life-grid { grid-template-columns: repeat(3, 1fr); }
}
.career-life-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 1.15rem 1.2rem;
}
.career-life-icon {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #fdf2f5;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}
.career-life-card h3 {
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}
.career-life-card p {
  font-size: 0.86rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
}
.career-photo-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #999;
  font-style: italic;
}
.career-hire-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.career-hire-steps li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.career-hire-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #A61E4D;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.career-hire-steps strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}
.career-hire-steps p {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
}
.career-vacancy-details {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: 0.86rem;
  color: #444;
}
.career-vacancy-details li { line-height: 1.4; }
.career-linkedin-box {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e3eaf3;
  border-radius: 16px;
  padding: 1.35rem 1.4rem;
  box-shadow: 0 2px 10px rgba(10,102,194,0.06);
}
.career-li-icon { flex-shrink: 0; margin-top: 2px; }
.career-li-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: #1a1a1a;
}
.career-li-text {
  font-size: 0.9rem;
  color: #555;
  margin: 0 0 0.85rem;
  line-height: 1.45;
}
.career-contact-box {
  background: linear-gradient(135deg, #fff 0%, #fdf2f5 100%);
  border: 1px solid #f0d0da;
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
  text-align: center;
}
.career-email {
  display: inline-block;
  font-size: 1.15rem;
  font-weight: 700;
  color: #A61E4D;
  text-decoration: none;
}
.career-email:hover { text-decoration: underline; }
.career-contact-section { padding-bottom: 2.5rem; }
body.career-open footer {
  display: none !important;
}

/* Career open: modals must sit above career page (z-index 100) */
body.career-open .modal {
  z-index: 220 !important;
}
body.career-open .modal:not(.hidden) {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
body.career-open #infoModal .relative,
body.career-open .modal > div.relative {
  max-height: min(85vh, 90dvh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem;
  z-index: 221;
}


/* Profile tip card — mobile PWA safe (no cut-off logo) */
.pd-tip-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
  position: relative;
}
.pd-tip-text {
  flex: 1 1 auto;
  min-width: 0;
}
.pd-tip-art {
  flex: 0 0 auto;
  max-width: 120px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.pd-tip-logo-full {
  height: 40px !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain !important;
  display: block;
  background: transparent !important;
}
@media (max-width: 768px) {
  .pd-tip-card {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 14px;
  }
  .pd-tip-art {
    align-self: flex-end;
    max-width: 100px;
    margin-top: 4px;
  }
  .pd-tip-logo-full {
    height: 36px !important;
    max-width: 100px !important;
  }
  /* Profile main: space above SOS / home indicator in PWA */
  .pd-main {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden;
  }
  #profileModal.modal:not(.hidden) {
    padding: 0 !important;
    align-items: stretch;
  }
  .pd-shell {
    max-width: 100%;
    overflow: hidden;
  }
}
/* pd-tip-card-mobile-fix */

/* Topbar search: stable icon alignment, no jump */
.topbar-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 420px;
}
.topbar-search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
}
.topbar-search-wrap .topbar-search {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  line-height: 1.25;
  padding-right: 44px !important;
}
.topbar-search-btn {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  flex-shrink: 0;
  z-index: 2;
}
#btnVoiceSearch { display: none !important; }


/* ========== Card overlay + actions fix (favorite / share / PWA) ========== */
.card-premium .relative.card-carousel,
article.card-premium > .relative {
  position: relative;
}
.compare-checkbox {
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;
  top: auto !important;
  right: auto !important;
  z-index: 6 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,0.95) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
  line-height: 1.2 !important;
  max-width: calc(100% - 52px);
}
.compare-checkbox input {
  width: 14px;
  height: 14px;
  margin: 0 !important;
  flex-shrink: 0;
}
.fav-toggle {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 7 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}
.fav-toggle.is-fav {
  background: #fff !important;
}
/* New badge: left of heart */
.listing-badge.badge-new {
  top: 8px !important;
  right: 48px !important;
  left: auto !important;
}
.card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: auto !important;
  flex-wrap: nowrap !important;
}
.card-actions .view-btn,
.card-actions .contact-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.share-listing-btn {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  border: 1px solid #f5d0dc !important;
  background: #fff !important;
  color: var(--primary, #A61E4D) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.share-listing-btn:active {
  transform: scale(0.96);
}
/* PWA / mobile: keep overlays usable, no layout jump on favorite */
@media (max-width: 768px) {
  .fav-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    top: 6px !important;
    right: 6px !important;
    font-size: 0.95rem !important;
  }
  .compare-checkbox {
    left: 6px !important;
    bottom: 6px !important;
    padding: 3px 6px !important;
    font-size: 0.62rem !important;
  }
  .share-listing-btn {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
  }
  .airbnb-row-track .fav-toggle,
  article.card-premium .fav-toggle {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
  }
  .airbnb-row-track .compare-checkbox,
  article.card-premium .compare-checkbox {
    position: absolute !important;
    left: 6px !important;
    bottom: 6px !important;
  }
}

#btnShareShortlist { display: none !important; }


/* ========== Dedicated Favorites page (compact = home cards) ========== */
.favorites-page {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #f8fafc;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
body.dark .favorites-page { background: #0f172a; }
.fav-page-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid #f1e4ea;
}
body.dark .fav-page-header { background: #1e293b; border-color: #334155; }
.fav-page-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: var(--primary, #A61E4D);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 10px;
  min-height: 40px;
}
.fav-page-title {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e293b;
}
body.dark .fav-page-title { color: #f1f5f9; }
.fav-page-count { font-size: 0.75rem; color: #64748b; font-weight: 600; }
.fav-page-empty { text-align: center; padding: 40px 20px; }
.fav-empty-ico { font-size: 2rem; margin-bottom: 6px; }

/* Same density as home list cards */
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 10px 20px;
}
@media (min-width: 768px) {
  .favorites-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 16px 20px 32px;
    max-width: 960px;
    margin: 0 auto;
  }
}
@media (min-width: 1100px) {
  .favorites-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1100px; }
}

.favorites-grid .card-premium {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06) !important;
}
.favorites-grid .card-carousel,
.favorites-grid .card-equal > .relative,
.favorites-grid article.card-premium > .relative {
  height: 110px !important;
  flex-shrink: 0 !important;
}
.favorites-grid .card-body {
  padding: 6px 8px 8px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-height: 0 !important;
}
.favorites-grid .card-type-line {
  font-size: 0.62rem !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.favorites-grid .card-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  max-height: 2.4em !important;
  min-height: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 2px !important;
  word-break: break-word !important;
}
.favorites-grid .card-loc {
  font-size: 0.68rem !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
}
.favorites-grid .card-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  margin: 2px 0 !important;
}
.favorites-grid .card-price {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
}
.favorites-grid .card-price span { font-size: 0.65rem !important; font-weight: 500 !important; }
.favorites-grid .card-rating { font-size: 0.62rem !important; }
.favorites-grid .card-amenities-wrap,
.favorites-grid .card-amenities {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  margin: 2px 0 !important;
  max-height: 22px !important;
  overflow: hidden !important;
}
.favorites-grid .amen-chip {
  font-size: 0.55rem !important;
  padding: 1px 5px !important;
  border-radius: 6px !important;
}
.favorites-grid .amen-chip:nth-child(n+3) { display: none !important; }
.favorites-grid .card-meta-row {
  margin: 2px 0 4px !important;
}
.favorites-grid .avail-badge {
  font-size: 0.58rem !important;
  padding: 1px 6px !important;
}
.favorites-grid .card-resp,
.favorites-grid .area-avg-hint { display: none !important; }
.favorites-grid .card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: auto !important;
  padding-top: 4px !important;
  flex-wrap: nowrap !important;
}
.favorites-grid .card-actions .view-btn,
.favorites-grid .card-actions .contact-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 6px !important;
  font-size: 0.68rem !important;
  border-radius: 8px !important;
  line-height: 1 !important;
}
.favorites-grid .share-listing-btn {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
}
.favorites-grid .fav-toggle {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  top: 6px !important;
  right: 6px !important;
  font-size: 0.9rem !important;
}
.favorites-grid .compare-checkbox {
  font-size: 0.58rem !important;
  padding: 2px 5px !important;
  left: 6px !important;
  bottom: 6px !important;
}

@media (max-width: 380px) {
  .favorites-grid { gap: 8px; padding: 8px; }
  .favorites-grid .card-carousel,
  .favorites-grid article.card-premium > .relative { height: 96px !important; }
  .favorites-grid .card-title { font-size: 0.72rem !important; }
  .favorites-grid .card-actions .view-btn,
  .favorites-grid .card-actions .contact-btn {
    min-height: 28px !important;
    height: 28px !important;
    font-size: 0.62rem !important;
  }
}

/* Home card titles stay 2 lines */
.card-premium .card-title,
.airbnb-row-track .card-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  max-height: 2.5em !important;
  min-height: 0 !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
}


/* Near Me / focused city grid: same compact cards as home */
.listings-grid-5 .card-premium {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.listings-grid-5 .card-carousel,
.listings-grid-5 .card-equal > .relative,
.listings-grid-5 article.card-premium > .relative {
  height: 110px !important;
  flex-shrink: 0 !important;
}
.listings-grid-5 .card-body {
  padding: 6px 8px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
}
.listings-grid-5 .card-type-line { font-size: 0.62rem !important; margin: 0 !important; }
.listings-grid-5 .card-title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  font-size: 0.78rem !important;
  line-height: 1.25 !important;
  max-height: 2.5em !important;
  min-height: 0 !important;
  margin: 0 0 2px !important;
  word-break: break-word !important;
}
.listings-grid-5 .card-loc {
  font-size: 0.68rem !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.listings-grid-5 .card-price { font-size: 0.85rem !important; }
.listings-grid-5 .card-rating { font-size: 0.62rem !important; }
.listings-grid-5 .amen-chip:nth-child(n+3) { display: none !important; }
.listings-grid-5 .amen-chip { font-size: 0.55rem !important; padding: 1px 5px !important; }
.listings-grid-5 .card-amenities-wrap { max-height: 22px !important; overflow: hidden !important; }
.listings-grid-5 .area-avg-hint,
.listings-grid-5 .card-resp { display: none !important; }
.listings-grid-5 .card-actions {
  display: flex !important;
  gap: 4px !important;
  margin-top: auto !important;
  padding-top: 4px !important;
  flex-wrap: nowrap !important;
}
.listings-grid-5 .card-actions .view-btn,
.listings-grid-5 .card-actions .contact-btn {
  flex: 1 1 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 6px !important;
  font-size: 0.68rem !important;
  border-radius: 8px !important;
}
.listings-grid-5 .share-listing-btn {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
}
@media (min-width: 768px) {
  .listings-grid-5 .card-carousel,
  .listings-grid-5 article.card-premium > .relative { height: 140px !important; }
  .listings-grid-5 .card-title { font-size: 0.88rem !important; }
  .listings-grid-5 .card-actions .view-btn,
  .listings-grid-5 .card-actions .contact-btn {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 0.75rem !important;
  }
}

#ownerCongratsModal .relative { animation: mdPopIn 0.28s ease; }
@keyframes mdPopIn { from { opacity:0; transform: translateY(12px) scale(0.96); } to { opacity:1; transform: none; } }

.map-fallback-msg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 280px; padding: 24px; text-align: center; color: #475569;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9); border-radius: 16px;
}
.map-fallback-msg strong { color: var(--primary, #A61E4D); }
.listings-map .leaflet-control-attribution { font-size: 10px; }

.city-seo-banner { padding: 12px 16px 4px; max-width: 1100px; margin: 0 auto; }
.city-seo-h1 { font-size: 1.25rem; font-weight: 800; color: var(--primary, #A61E4D); margin: 0 0 4px; }
.city-seo-sub { font-size: 0.85rem; color: #64748b; margin: 0 0 8px; }
.city-seo-banner.hidden { display: none !important; }

.amen-owner-grid {
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #f1e4ea;
  border-radius: 12px;
  background: #fafafa;
}
.amen-owner-grid label {
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* replaced by pd-mobile-bar-click-fix */

/* ========== Profile mobile bar — always clickable (PWA) ========== */
.pd-mobile-bar {
  z-index: 100 !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: #fff !important;
}
.pd-mobile-bar .pd-icon-btn,
#pdSidebarOpen,
#pdMobileCloseX,
#pdCloseX,
#pdBackBtn {
  pointer-events: auto !important;
  z-index: 101 !important;
  position: relative;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(166, 30, 77, 0.15);
  touch-action: manipulation;
}
@media (max-width: 768px) {
  .pd-sidebar {
    z-index: 90 !important;
  }
  .pd-sidebar-scrim {
    z-index: 85 !important;
  }
  .pd-sidebar:not(.open) {
    pointer-events: none !important;
    visibility: hidden; /* fully out of the way when closed */
  }
  .pd-sidebar.open {
    pointer-events: auto !important;
    visibility: visible !important;
  }
  .pd-main {
    z-index: 5;
  }
  /* backdrop must not block mobile bar */
  #profileModal .pd-backdrop {
    z-index: 0 !important;
  }
  .pd-shell {
    z-index: 1;
    position: relative;
  }
}
/* pd-mobile-bar-click-fix */

.pd-stats-row {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 0.78rem;
  color: #6b7280;
}
.pd-stats-row span {
  background: #fdf2f6;
  padding: 2px 8px;
  border-radius: 8px;
  color: #9C2B54;
  font-weight: 600;
}
.city-seo-block {
  max-width: 1100px;
  margin: 0 auto 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #fff5f8, #fff);
  border: 1px solid #f3d9e3;
  border-radius: 16px;
}
.city-seo-h1 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1f2937;
  margin: 0 0 0.35rem;
}
.city-seo-p {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0;
}
.pd-list-actions .btn { font-size: 0.75rem; }

.pass-field {
  position: relative;
  width: 100%;
  margin-bottom: 0.5rem;
}
.pass-field .input {
  width: 100%;
  padding-right: 2.75rem;
  margin-bottom: 0 !important;
}
.pass-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 4px;
  opacity: 0.7;
  z-index: 2;
}
.pass-toggle:hover { opacity: 1; }
.pass-toggle[aria-pressed="true"] { opacity: 1; }

/* Referral & coins panel */
.ref-hero {
  text-align: center;
  background: linear-gradient(145deg, #FCE8EF 0%, #fff 70%);
  border: 1px solid #f3d9e3;
  border-radius: 16px;
  padding: 1.1rem 1rem 1rem;
  margin-bottom: 1rem;
}
.ref-hero-label { font-size: 0.75rem; color: #9C2B54; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.ref-coins { font-size: 2.4rem; font-weight: 800; color: #9C2B54; line-height: 1.1; margin-top: 4px; }
.ref-coins-unit { font-size: 0.85rem; color: #6b7280; margin-bottom: 10px; }
.ref-progress-wrap { margin-top: 8px; }
.ref-progress-bar {
  height: 8px; background: #f3d9e3; border-radius: 999px; overflow: hidden;
}
.ref-progress-bar span {
  display: block; height: 100%; background: linear-gradient(90deg, #9C2B54, #EC5A88);
  border-radius: 999px; transition: width .3s ease;
}
.ref-progress-label { font-size: 0.72rem; color: #6b7280; margin-top: 6px; }
.ref-how {
  background: #f9fafb; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.ref-how-title { font-weight: 700; font-size: 0.88rem; margin: 0 0 6px; color: #1f2937; }
.ref-steps { margin: 0; padding-left: 1.15rem; font-size: 0.82rem; color: #4b5563; line-height: 1.55; }
.ref-code-box {
  border: 1px dashed #f3b6cb; border-radius: 12px; padding: 12px; text-align: center;
  margin-bottom: 10px; background: #fffafc;
}
.ref-code-label { font-size: 0.72rem; color: #6b7280; margin-bottom: 4px; }
.ref-code-val { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.06em; color: #1f2937; font-family: ui-monospace, monospace; }
.ref-redeem-title { font-weight: 700; font-size: 0.9rem; margin: 12px 0 8px; color: #1f2937; }
.ref-redeem-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left;
  border: 1px solid #f3d9e3; background: #fff;
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.ref-redeem-btn.ready {
  background: #9C2B54; border-color: #9C2B54; color: #fff;
}
.ref-redeem-btn.outline.ready {
  background: #fff; color: #9C2B54; border-color: #9C2B54;
}
.ref-redeem-main { font-weight: 700; font-size: 0.88rem; }
.ref-redeem-hint { font-size: 0.72rem; opacity: 0.85; }
.ref-redeem-btn.ready .ref-redeem-hint { opacity: 0.9; }
.ref-note { font-size: 0.75rem; color: #9ca3af; margin: 8px 0 0; line-height: 1.4; }
#referralModal .relative {
  max-width: 380px;
}

/* ========== PWA Profile logo — never crop ========== */
.pd-sidebar-brand {
  overflow: visible !important;
  flex-shrink: 0 !important;
  min-height: 56px;
  box-sizing: border-box !important;
}
.pd-sidebar-brand .mydera-logo-pd,
img.mydera-logo-pd {
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 48px !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
}
@media (max-width: 768px) {
  .pd-sidebar {
    padding-top: max(14px, env(safe-area-inset-top, 0px)) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .pd-sidebar-brand {
    padding: 10px 8px 14px !important;
    margin-top: 0 !important;
    overflow: visible !important;
  }
  .pd-sidebar-brand .mydera-logo-pd,
  img.mydera-logo-pd {
    max-height: 42px !important;
    max-width: min(180px, calc(100% - 36px)) !important;
    height: auto !important;
  }
  /* shell must not clip sidebar brand */
  .pd-shell {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }
  .pd-sidebar.open {
    overflow-y: auto !important;
  }
  /* tip logo on main profile */
  .pd-tip-art {
    overflow: visible !important;
  }
  .pd-tip-logo-full {
    object-fit: contain !important;
    max-height: 36px !important;
  }
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  .pd-sidebar {
    padding-top: max(18px, env(safe-area-inset-top, 12px)) !important;
  }
  .pd-mobile-bar {
    padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
  }
}

/* ========== PWA Profile logo FORCE VISIBLE ========== */
.pd-sidebar-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  min-height: 56px !important;
  padding: 14px 12px 16px !important;
  background: #fff !important;
  position: relative !important;
  z-index: 5 !important;
}
.pd-sidebar-brand .mydera-logo-pd,
img.mydera-logo-pd {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
  width: auto !important;
  height: 40px !important;
  max-height: 44px !important;
  max-width: 160px !important;
  margin: 0 auto !important;
  background: transparent !important;
  position: relative !important;
  z-index: 6 !important;
}
@media (max-width: 768px), (display-mode: standalone), (display-mode: fullscreen) {
  .pd-sidebar {
    padding-top: max(20px, env(safe-area-inset-top, 16px)) !important;
  }
  .pd-sidebar-brand {
    padding-top: 12px !important;
    min-height: 60px !important;
  }
  .pd-sidebar-brand .mydera-logo-pd,
  img.mydera-logo-pd {
    height: 38px !important;
    max-width: 150px !important;
  }
}

/* ========== Profile sidebar logo — PWA safe (v132) ========== */
.pd-sidebar-safe {
  display: none;
  flex-shrink: 0;
  width: 100%;
  height: 0;
}
.pd-sidebar-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  min-height: 52px !important;
  padding: 12px 14px 14px !important;
  margin: 0 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 6 !important;
}
.pd-sidebar-brand .mydera-logo-pd,
.pd-sidebar-brand .mydera-logo-pd-icon,
img.mydera-logo-pd-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.pd-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
  line-height: 1.15;
}
.pd-brand-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: #A61E4D;
  letter-spacing: -0.02em;
}
.pd-brand-tag {
  font-size: 0.65rem;
  color: #9ca3af;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .pd-sidebar {
    top: 0 !important;
    padding-top: 0 !important;
    /* Ensure drawer is below system status bar */
  }
  .pd-sidebar-safe {
    display: block !important;
    height: max(28px, env(safe-area-inset-top, 0px)) !important;
    min-height: 28px !important;
    background: #fff !important;
  }
  .pd-sidebar-brand {
    padding: 10px 12px 14px !important;
    min-height: 56px !important;
  }
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  .pd-sidebar-safe {
    display: block !important;
    /* Android/iOS PWA status bar — fixed min so logo never under status */
    height: max(36px, env(safe-area-inset-top, 24px)) !important;
    min-height: 36px !important;
  }
  .pd-sidebar {
    padding-top: 0 !important;
  }
}


/* ========== Profile menu: original logo, pushed down (v135) ========== */
.pd-sidebar-safe {
  display: block !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  /* More space under status bar — logo fully visible */
  height: max(56px, calc(env(safe-area-inset-top, 0px) + 40px)) !important;
  min-height: 56px !important;
  background: #fff !important;
}
.pd-sidebar-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  padding: 12px 16px 18px !important;
  margin: 0 !important;
  min-height: 60px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
.pd-sidebar-brand .mydera-logo-pd,
img.mydera-logo-pd {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: 46px !important;
  max-height: 50px !important;
  max-width: 200px !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
  background: transparent !important;
}
.pd-sidebar-brand .pd-sidebar-close {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  .pd-sidebar-safe {
    height: max(64px, calc(env(safe-area-inset-top, 0px) + 44px)) !important;
    min-height: 64px !important;
  }
  .pd-sidebar-brand {
    padding-top: 14px !important;
    padding-bottom: 18px !important;
  }
  .pd-sidebar-brand .mydera-logo-pd,
  img.mydera-logo-pd {
    height: 44px !important;
    max-width: 190px !important;
  }
}
@media (max-width: 768px) {
  .pd-sidebar {
    padding-top: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}


/* ========== Profile menu: narrower + outside close (v136) ========== */
@media (max-width: 768px) {
  .pd-sidebar {
    width: min(72vw, 250px) !important;
    max-width: 250px !important;
    z-index: 95 !important;
  }
  .pd-sidebar-scrim {
    display: none;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 10, 15, 0.45) !important;
    z-index: 90 !important;
    pointer-events: auto !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pd-sidebar-scrim:not(.hidden) {
    display: block !important;
  }
}

/* Featured badge on listing cards */
.featured-badge-card {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 8 !important;
  background: linear-gradient(135deg, #A61E4D, #c43a6a) !important;
  color: #fff !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(166,30,77,0.35) !important;
  letter-spacing: 0.02em !important;
  pointer-events: none !important;
}
.card-premium.is-featured {
  box-shadow: 0 0 0 2px rgba(166,30,77,0.25), 0 8px 24px rgba(0,0,0,0.06) !important;
}

.empty-state-mini {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.25rem; gap: 0.35rem;
}
.empty-state-mini .empty-icon { font-size: 1.75rem; opacity: 0.85; }
.quality-pill {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #374151;
}
.quality-pill.q-hi { background: #d1fae5; color: #065f46; }
.quality-pill.q-mid { background: #e0f2fe; color: #075985; }
.quality-pill.q-lo { background: #fef3c7; color: #92400e; }

.city-seo-banner {
  background: linear-gradient(180deg, #fff5f8 0%, #fff 100%);
  border: 1px solid #f6e4ea;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  margin: 0.75rem 0 1rem;
}
.city-seo-h1 { font-size: 1.35rem; font-weight: 800; color: #A61E4D; margin: 0 0 0.35rem; }
.city-seo-sub { font-size: 0.9rem; color: #4b5563; margin: 0 0 0.75rem; line-height: 1.45; }
.city-seo-tips { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; color: #374151; }
.city-seo-tips li { margin-bottom: 0.25rem; }
.city-seo-blog-link { margin: 0.75rem 0 0; font-size: 0.85rem; }
.city-seo-blog-link a { color: #A61E4D; font-weight: 600; text-decoration: none; }
.city-blog-body h4 { color: #1f2937; }

#adminNavBtn:not(.hidden),
#adminNavBtnMobile:not(.hidden) {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: #A61E4D !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  cursor: pointer;
}
#adminNavBtnMobile:not(.hidden) {
  display: flex !important;
  width: 100%;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.pd-nav-item.pd-admin-only {
  color: #A61E4D !important;
  font-weight: 700 !important;
}

/* ===== Admin full page ===== */
.admin-page {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #f4f5f7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
}
.admin-page.hidden { display: none !important; }
.admin-topbar {
  background: linear-gradient(135deg, #A61E4D 0%, #8B1840 100%);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 14px rgba(166,30,77,.35);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.admin-topbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-brand { display: flex; align-items: center; gap: 10px; }
.admin-logo {
  width: 44px; height: 44px; border-radius: 10px;
  object-fit: contain; background: #fff;
  padding: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.admin-brand-title { font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; }
.admin-brand-sub { font-size: 0.72rem; opacity: .75; }
.admin-top-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-top-actions .btn { border-color: rgba(255,255,255,.35); color: #fff; }
.admin-top-actions .btn-primary { background: #A61E4D; border-color: #A61E4D; }
.admin-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.admin-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #e8eaed;
  padding: 16px 10px;
  overflow-y: auto;
}
.admin-side-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9ca3af;
  font-weight: 700;
  padding: 0 10px 8px;
  margin: 0;
}
.admin-side-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  margin-bottom: 2px;
}
.admin-side-item:hover { background: #fce8ef; color: #A61E4D; }
.admin-side-item.active {
  background: linear-gradient(135deg, #A61E4D, #c42a5c);
  color: #fff;
  box-shadow: 0 4px 12px rgba(166,30,77,.25);
}
.admin-side-item .badge-count {
  margin-left: auto;
  background: #A61E4D;
  color: #fff;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 999px;
}
.admin-side-item.active .badge-count { background: rgba(255,255,255,.25); }
.admin-main {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 40px;
  min-width: 0;
}
.admin-main-head { margin-bottom: 16px; }
.admin-page-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #A61E4D;
  margin: 0 0 4px;
}
.admin-page-desc { margin: 0; color: #6b7280; font-size: 0.9rem; }
.admin-panels > div {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e8eaed;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
body.admin-mode-open {
  overflow: hidden;
}
body.admin-mode-open #hero, body.admin-mode-open .topbar,
body.admin-mode-open footer, body.admin-mode-open #bottomNav,
body.admin-mode-open .sos-fab,
body.admin-mode-open .mobile-menu {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.admin-mode-open {
  overflow: hidden !important;
  /* do NOT use position:fixed on body — blanks content on mobile PWA */
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid #e8eaed;
    padding: 8px 6px;
    gap: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .admin-side-label { display: none; }
  .admin-side-item {
    /* Exactly 2 chips visible per screen width */
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: center;
    padding: 10px 8px;
    font-size: 0.78rem;
    scroll-snap-align: start;
    min-height: 42px;
  }
  .admin-main { padding: 12px 10px 80px; }
  .admin-topbar-inner { flex-wrap: wrap; }
}

.admin-fraud-box {
  margin-bottom: 16px;
  border: 1px solid #f6e4ea !important;
  background: linear-gradient(180deg, #fff8fa 0%, #fff 40%) !important;
}
.admin-fraud-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.admin-fraud-rules {
  font-size: 0.78rem; color: #6b7280; line-height: 1.45;
  background: #f9fafb; border-radius: 10px; padding: 10px 12px; margin: 8px 0 12px;
}
.admin-fraud-rules strong { color: #A61E4D; }
.admin-fraud-item {
  border: 1px solid #eee; border-radius: 12px; padding: 12px; margin-bottom: 8px;
  background: #fff;
}
.admin-fraud-item.sev-high { border-left: 4px solid #dc2626; }
.admin-fraud-item.sev-med { border-left: 4px solid #d97706; }
.admin-fraud-item.sev-low { border-left: 4px solid #2563eb; }
.admin-fraud-reasons { margin: 6px 0 0; padding-left: 1.1rem; font-size: 0.82rem; color: #374151; }
.admin-fraud-reasons li { margin-bottom: 2px; }
.admin-fraud-meta { font-size: 0.75rem; color: #9ca3af; margin-top: 4px; }
.admin-fraud-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.admin-fraud-empty { color: #059669; font-size: 0.9rem; }

.admin-export-box {
  border-color: #f6e4ea !important;
  background: linear-gradient(180deg, #fff8fa, #fff) !important;
}

.admin-user-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 12px;
  margin-bottom: 8px;
  background: #fff;
}
.admin-user-row:hover { border-color: #f6e4ea; background: #fffafb; }

.admin-export-vault {
  border: 1px solid #e8b4c4;
  border-radius: 16px;
  padding: 16px 18px;
  background: linear-gradient(165deg, #1a0a12 0%, #3d1528 40%, #5c1a35 100%);
  color: #fce8ef;
  box-shadow: 0 8px 28px rgba(166,30,77,.25);
}
.admin-export-vault-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px;
}
.admin-export-title { font-weight: 800; font-size: 1rem; color: #fff; }
.admin-export-sub { font-size: 0.75rem; opacity: .75; margin-top: 2px; }
.admin-export-badge {
  font-size: 0.65rem; font-weight: 800; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 999px;
  background: #7f1d1d; color: #fecaca; border: 1px solid #f87171;
}
.admin-export-badge.unlocked {
  background: #065f46; color: #a7f3d0; border-color: #34d399;
}
.admin-export-warn {
  font-size: 0.78rem; line-height: 1.45; opacity: .9;
  margin: 0 0 12px; padding: 8px 10px;
  background: rgba(0,0,0,.25); border-radius: 10px; border: 1px solid rgba(255,255,255,.08);
}
.admin-export-input {
  max-width: 160px; background: #fff !important; color: #111 !important;
  border-radius: 10px !important; font-weight: 700; letter-spacing: .08em;
}
.admin-export-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
}
.admin-export-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1); color: #fff; font-weight: 700; font-size: 0.8rem;
  cursor: pointer; transition: background .15s;
}
.admin-export-btn:hover { background: #A61E4D; border-color: #A61E4D; }
.admin-export-btn span { font-size: 1.2rem; }
#exportLockedPane label { color: #fce8ef; }
#exportLockedPane code { background: rgba(255,255,255,.15); padding: 1px 6px; border-radius: 4px; }

.admin-chip {
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
}
.admin-chip.active, .admin-chip:hover {
  background: #A61E4D;
  border-color: #A61E4D;
  color: #fff;
}
.admin-status-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fce8ef;
  color: #A61E4D;
  margin-left: 4px;
}
.admin-filter-bar { border-bottom: 1px solid #f3f4f6; }
.analytics-card.green .num { color: #059669; }

button.analytics-card.admin-stat-btn {
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform .15s, box-shadow .15s;
  position: relative;
  font: inherit;
  background: #fff;
}
button.analytics-card.admin-stat-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(166,30,77,.12);
  border-color: #A61E4D !important;
}
.admin-stat-go {
  display: block;
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #A61E4D;
  opacity: .85;
}
.admin-user-modal-overlay {
  position: fixed; inset: 0; z-index: 100050 !important;
  display: flex !important; align-items: center; justify-content: center;
  padding: 16px;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.admin-user-modal-backdrop {
  position: absolute; inset: 0; background: rgba(15,10,12,.55);
  backdrop-filter: blur(2px);
}
.admin-user-modal {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  overflow: hidden; max-height: 92vh; overflow-y: auto;
}
.admin-user-modal-x {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  border: none; background: rgba(255,255,255,.9); width: 36px; height: 36px;
  border-radius: 50%; font-size: 1.4rem; color: #666; cursor: pointer;
  line-height: 1;
}
.admin-user-modal-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 20px 18px;
  background: linear-gradient(135deg, #A61E4D 0%, #7a1538 100%);
  color: #fff;
}
.admin-user-avatar {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
}
.admin-user-hero-text h3 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.admin-user-hero-text p { margin: 4px 0 0; font-size: 0.85rem; opacity: .9; }
.admin-user-score {
  margin-left: auto; text-align: center;
  background: rgba(255,255,255,.15); border-radius: 12px; padding: 8px 10px; min-width: 64px;
}
.admin-user-score .score-num { font-size: 1.25rem; font-weight: 800; line-height: 1.1; }
.admin-user-score .score-lbl { font-size: 0.62rem; opacity: .9; margin-top: 2px; }
.admin-user-score.risk-low { box-shadow: inset 0 0 0 1px rgba(52,211,153,.5); }
.admin-user-score.risk-mid { box-shadow: inset 0 0 0 1px rgba(251,191,36,.5); }
.admin-user-score.risk-high { box-shadow: inset 0 0 0 1px rgba(248,113,113,.6); }
.admin-user-modal-body { padding: 18px 20px 20px; }
.admin-user-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
.admin-user-field {
  background: #faf7f8; border: 1px solid #f0e4e9; border-radius: 12px; padding: 10px 12px;
}
.admin-user-field .lbl { display: block; font-size: 0.68rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .03em; }
.admin-user-field .val { display: block; font-size: 0.88rem; font-weight: 600; color: #1f2937; margin-top: 2px; word-break: break-all; }
.admin-user-field .val.mono { font-family: ui-monospace, monospace; font-size: 0.72rem; font-weight: 500; }
.admin-user-trust-wrap { margin-bottom: 12px; }
.admin-user-trust-wrap .lbl { font-size: 0.75rem; font-weight: 700; color: #6b7280; margin-bottom: 6px; }
.admin-trust-row { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-trust-chip {
  font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
}
.admin-trust-chip.ok { background: #ecfdf5; color: #047857; }
.admin-trust-chip.warn { background: #fff7ed; color: #c2410c; }
.admin-user-hint {
  font-size: 0.78rem; line-height: 1.45; color: #6b7280;
  background: #fff8fa; border: 1px solid #f6e4ea; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px;
}
.admin-user-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) {
  .admin-user-grid { grid-template-columns: 1fr; }
}


/* Admin user rows — mobile-friendly cards */
.admin-user-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px;
  border: 1px solid #eee;
  border-radius: 14px;
  margin-bottom: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.admin-user-row:hover { border-color: #f6e4ea; background: #fffafb; }
.admin-user-row .au-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.admin-user-row .au-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #EC5A88;
}
.admin-user-row .au-info {
  flex: 1;
  min-width: 0;
}
.admin-user-row .au-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1f2937;
  word-break: break-word;
  line-height: 1.3;
}
.admin-user-row .au-email {
  font-size: 0.8rem;
  color: #6b7280;
  word-break: break-all;
  margin-top: 2px;
}
.admin-user-row .au-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  align-items: center;
}
.admin-user-row .au-role {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
}
.admin-user-row .au-role-owner { background: #fce8ef; color: #A61E4D; }
.admin-user-row .au-role-seeker { background: #eff6ff; color: #1d4ed8; }
.admin-user-row .au-role-admin { background: #ecfdf5; color: #047857; }
.admin-user-row .au-tag {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}
.admin-user-row .au-tag.ok { background: #ecfdf5; color: #047857; }
.admin-user-row .au-tag.bad { background: #fef2f2; color: #dc2626; }
.admin-user-row .au-trust {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 4px;
  line-height: 1.35;
}
.admin-user-row .au-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid #f3f4f6;
}
.admin-user-row .au-actions .btn {
  flex: 1 1 auto;
  min-width: 100px;
  justify-content: center;
  padding: 8px 10px;
  font-size: 0.8rem;
  border-radius: 10px;
}
@media (min-width: 768px) {
  .admin-user-row {
    flex-direction: row;
    align-items: center;
  }
  .admin-user-row .au-top {
    flex: 1;
    min-width: 0;
  }
  .admin-user-row .au-actions {
    flex: 0 0 auto;
    border-top: none;
    padding-top: 0;
    flex-direction: column;
    min-width: 120px;
  }
  .admin-user-row .au-actions .btn {
    width: 100%;
    flex: none;
  }
}
/* Mobile admin sidebar chips + main padding */
@media (max-width: 768px) {
  .admin-main { padding: 12px 10px 80px !important; }
  .admin-sidebar {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-side-item.active {
    position: relative;
  }
  #adminUsersList {
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }
  #adminUsersList.hidden { display: none !important; }
}

.admin-section-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #f3b6cb;
  background: #fff;
  color: #A61E4D;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 10px;
  -webkit-tap-highlight-color: transparent;
}
.admin-section-back:hover { background: #fce8ef; }
.admin-section-back.hidden { display: none !important; }
.admin-main-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8f5f7;
  padding: 8px 0 10px;
  margin: -4px 0 8px;
}
@media (max-width: 768px) {
  .admin-main-head {
    background: #fff;
    border-bottom: 1px solid #f0e4e9;
    margin: -12px -10px 12px;
    padding: 10px 12px 12px;
  }
  .admin-section-back {
    width: 100%;
    justify-content: flex-start;
    min-height: 42px;
    font-size: 0.9rem;
  }
}

/* Admin forced visible when open */
#adminSection.admin-page:not(.hidden) {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: #f4f5f7 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  flex-direction: column !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#adminOverviewPanel:not(.hidden) {
  display: block !important;
  visibility: visible !important;
}
#adminNavBtn:not(.hidden),
#adminNavBtnMobile:not(.hidden),
#pdNavAdmin:not(.hidden) {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  visibility: visible !important;
}
#adminNavBtnMobile:not(.hidden) {
  display: flex !important;
  width: 100%;
  justify-content: center;
}

/* Admin content panels when shown */
#adminSection .admin-panel-body > div:not(.hidden),
#adminOverviewPanel:not(.hidden),
#adminListingList:not(.hidden),
#adminReportsList:not(.hidden),
#adminUsersList:not(.hidden),
#adminTestimonialsList:not(.hidden),
#adminKycList:not(.hidden),
#adminTicketsList:not(.hidden),
#adminCareerPanel:not(.hidden),
#adminErrorsList:not(.hidden),
#adminFeedbackList:not(.hidden),
#adminAnalyticsPanel:not(.hidden),
#adminSettingsPanel:not(.hidden) {
  display: block !important;
  visibility: visible !important;
}
.admin-side-item, [id^="adminTab"] {
  cursor: pointer;
  pointer-events: auto !important;
}

/* ========== Referral modal (professional) ========== */
.ref-modal-overlay {
  position: fixed; inset: 0; z-index: 100060;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ref-modal-overlay.hidden, #referralModal.hidden { display: none !important; }
.ref-modal-backdrop {
  position: absolute; inset: 0; background: rgba(15, 10, 20, 0.55);
  backdrop-filter: blur(3px);
}
.ref-modal {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  max-height: 92vh; overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 28px 64px rgba(166, 30, 77, 0.22);
}
.ref-modal-x {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.95); font-size: 1.4rem; color: #666;
  cursor: pointer; line-height: 1;
}
.ref-modal-body { padding: 0 0 20px; }
.ref-loading { padding: 40px; text-align: center; color: #888; }
.ref-header {
  background: linear-gradient(135deg, #A61E4D 0%, #7a1538 100%);
  color: #fff; padding: 28px 24px 22px; border-radius: 20px 20px 0 0;
}
.ref-header-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}
.ref-title { font-size: 1.45rem; font-weight: 800; margin: 0 0 6px; }
.ref-sub { margin: 0; font-size: 0.9rem; opacity: 0.92; line-height: 1.4; }
.ref-balance-card {
  margin: -12px 16px 16px; padding: 18px 16px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border: 1px solid #f0e4ea; text-align: center;
}
.ref-bal-label { font-size: 11px; font-weight: 700; color: #A61E4D; letter-spacing: 0.06em; text-transform: uppercase; }
.ref-bal-row { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 6px 0 12px; }
.ref-bal-num { font-size: 2.6rem; font-weight: 800; color: #A61E4D; line-height: 1; }
.ref-bal-unit { font-size: 0.95rem; color: #888; font-weight: 600; }
.ref-progress-track { height: 8px; background: #f3e8ee; border-radius: 999px; overflow: hidden; }
.ref-progress-track i {
  display: block; height: 100%; background: linear-gradient(90deg, #A61E4D, #e85a8c);
  border-radius: 999px;
}
.ref-progress-meta { font-size: 12px; color: #777; margin-top: 8px; }
.ref-steps { padding: 0 20px 8px; display: flex; flex-direction: column; gap: 12px; }
.ref-step { display: flex; gap: 12px; align-items: flex-start; }
.ref-step-n {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: #fce8ef; color: #A61E4D; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.ref-step strong { display: block; font-size: 0.92rem; color: #222; }
.ref-step p { margin: 2px 0 0; font-size: 0.8rem; color: #777; line-height: 1.35; }
.ref-code-box {
  margin: 12px 16px; padding: 14px 16px;
  background: #faf7f8; border: 1px dashed #e0c4d0; border-radius: 14px; text-align: center;
}
.ref-code-label { font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.05em; }
.ref-code-val { font-size: 1.35rem; font-weight: 800; color: #A61E4D; letter-spacing: 0.08em; margin: 6px 0; font-family: ui-monospace, monospace; }
.ref-link-preview { font-size: 11px; color: #999; word-break: break-all; margin-bottom: 12px; }
.ref-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ref-btn { min-width: 120px; }
.ref-wa { background: #25D366 !important; color: #fff !important; border-color: #25D366 !important; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.ref-redeem-box { padding: 8px 16px 4px; }
.ref-note { font-size: 11px; color: #888; line-height: 1.45; margin: 10px 0 0; text-align: center; }
#referralModal:not(.hidden) {
  position: fixed; inset: 0; z-index: 100060;
  display: flex !important; align-items: center; justify-content: center;
}

/* Referral wallet extras */
.ref-wallet-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 10px 0 12px; text-align: center;
}
.ref-wallet-grid .rw-l { display:block; font-size:10px; color:#999; text-transform:uppercase; letter-spacing:.04em; }
.ref-wallet-grid .rw-v { font-weight:800; color:#A61E4D; font-size:1rem; }
.ref-section { padding: 12px 16px 4px; }
.ref-sec-title { font-size: 0.95rem; font-weight: 700; color: #333; margin: 0 0 8px; }
.ref-hist-row, .ref-txn-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #f3e8ee; font-size: 0.85rem;
}
.ref-hist-date { display:block; font-size: 0.72rem; color: #999; }
.ref-st { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ref-st-ok { background: #e8f8ef; color: #157347; }
.ref-st-pending { background: #fff4e5; color: #b45309; }
.ref-hist-coins { font-weight: 700; color: #A61E4D; margin-left: 6px; }
.ref-plus { color: #157347; font-weight: 700; }
.ref-minus { color: #b91c1c; font-weight: 700; }
.ref-empty { font-size: 0.82rem; color: #999; margin: 4px 0 8px; }

/* HR panel */
.hr-page {
  position: fixed; inset: 0; z-index: 99990; background: #f8f5f6;
  overflow: auto;
}
.hr-page.hidden { display: none !important; }
body.hr-mode-open { overflow: hidden; }
.hr-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.hr-stat-card {
  background: #fff; border-radius: 14px; padding: 16px;
  border: 1px solid #f0e4ea; box-shadow: 0 4px 14px rgba(166,30,77,.06);
}
.hr-stat-card .num { font-size: 1.6rem; font-weight: 800; color: #A61E4D; }
.hr-stat-card .lbl { font-size: 0.78rem; color: #777; margin-top: 4px; }
.hr-sec-h { font-size: 1rem; font-weight: 700; color: #A61E4D; margin: 16px 0 8px; }
.hr-form-sec { color: #A61E4D; font-weight: 700; margin: 18px 0 10px; font-size: 0.95rem; }
.hr-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.hr-form-grid label { font-size: 0.8rem; font-weight: 600; color: #555; display: flex; flex-direction: column; gap: 4px; }
.hr-form-grid label.full { grid-column: 1 / -1; }
.hr-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hr-photo-preview { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; margin: 8px 0; }
.hr-badge { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f3e8ee; color: #A61E4D; }
.hr-st-published { background: #e8f8ef; color: #157347; }
.hr-st-pending_review, .hr-st-pending { background: #fff4e5; color: #b45309; }
.hr-st-rejected { background: #fde8e8; color: #b91c1c; }
.hr-st-draft { background: #eee; color: #666; }
.hr-st-changes_required { background: #e8eefc; color: #1d4ed8; }
.hr-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hr-filter-bar .input { max-width: 200px; }
@media (max-width: 768px) {
  .hr-form-grid { grid-template-columns: 1fr; }
}

/* Our Team */
.our-team-page {
  position: fixed; inset: 0; z-index: 99980; background: #fff; overflow: auto;
  padding: 16px 0 48px;
}
.our-team-page.hidden { display: none !important; }
.our-team-title { font-size: 1.75rem; font-weight: 800; color: #A61E4D; margin: 0 0 6px; }
.our-team-sub { color: #777; margin: 0 0 24px; }
.our-team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;
}
.team-card {
  background: #fff; border: 1px solid #f0e4ea; border-radius: 16px; padding: 16px;
  text-align: center; box-shadow: 0 6px 18px rgba(166,30,77,.06);
}
.team-photo {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px;
  border: 3px solid #fce8ef;
}
.team-name { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; color: #222; }
.team-role { font-size: 0.88rem; color: #A61E4D; font-weight: 600; margin: 0; }
.team-dept { font-size: 0.78rem; color: #888; margin: 4px 0 12px; }
.team-profile-overlay {
  position: fixed; inset: 0; z-index: 100090; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.team-profile-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.team-profile-modal {
  position: relative; background: #fff; border-radius: 18px; padding: 24px 20px;
  max-width: 420px; width: 100%; max-height: 90vh; overflow: auto; text-align: center;
}
.team-profile-x {
  position: absolute; right: 12px; top: 10px; border: none; background: #f3f3f3;
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.2rem; cursor: pointer;
}
.team-profile-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.team-profile-role { color: #A61E4D; font-weight: 600; }
.team-profile-bio { text-align: left; color: #444; font-size: 0.9rem; line-height: 1.5; margin-top: 12px; }
.team-skills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0; }
.team-skill { background: #fce8ef; color: #A61E4D; font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.team-profile-exp { text-align: left; font-size: 0.88rem; color: #555; }

/* ========== MyDera HR Management System ========== */
.hr-page {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: #f5f6f8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hr-page.hidden { display: none !important; }
body.hr-mode-open { overflow: hidden; }

.hr-topbar { background: #0B1F3A !important; }
.hr-topbar .admin-brand-text { color: #fff; font-weight: 600; }
.hr-mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  margin-right: 0.5rem;
  cursor: pointer;
}

.hr-layout { flex: 1; min-height: 0; display: flex; }
.hr-sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid #e8e8ec;
  overflow-y: auto;
  flex-shrink: 0;
}
.hr-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 2rem;
  background: #f5f6f8;
}
.hr-content { max-width: 1200px; }

.hr-loading, .hr-empty, .hr-error {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #64748b;
}
.hr-spinner {
  width: 36px; height: 36px;
  border: 3px solid #f1d4de;
  border-top-color: #A61E4D;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
  animation: hrSpin 0.8s linear infinite;
}
@keyframes hrSpin { to { transform: rotate(360deg); } }
.hr-error { color: #A61E4D; }

.hr-dash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.hr-stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(11,31,58,0.06);
  border: 1px solid #eee;
  text-align: center;
}
.hr-stat-ico { font-size: 1.25rem; margin-bottom: 0.25rem; }
.hr-stat-val { font-size: 1.4rem; font-weight: 700; color: #0B1F3A; }
.hr-stat-label { font-size: 0.75rem; color: #64748b; margin-top: 0.15rem; }
.hr-report-btn { cursor: pointer; transition: border-color 0.15s; }
.hr-report-btn:hover { border-color: #A61E4D; }

.hr-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.hr-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(11,31,58,0.06);
  border: 1px solid #eee;
  margin-bottom: 1rem;
}
.hr-card-title {
  font-size: 0.95rem;
  font-weight: 650;
  color: #0B1F3A;
  margin: 0 0 0.75rem;
}
.hr-action-list, .hr-simple-list { list-style: none; padding: 0; margin: 0; }
.hr-action-list li, .hr-simple-list li { padding: 0.4rem 0; border-bottom: 1px solid #f1f1f4; font-size: 0.875rem; }
.hr-link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #0B1F3A; text-align: left; width: 100%; font-size: inherit;
}
.hr-link-btn:hover { color: #A61E4D; }
.hr-link-btn strong { color: #A61E4D; float: right; }

.hr-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1rem; align-items: center;
}
.hr-search { min-width: 180px; flex: 1; }
.hr-filter { min-width: 140px; max-width: 200px; }

.hr-table-wrap { overflow-x: auto; background: #fff; border-radius: 12px; border: 1px solid #eee; }
.hr-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.hr-table th {
  text-align: left; padding: 0.65rem 0.85rem;
  background: #fafafa; color: #64748b; font-weight: 600;
  border-bottom: 1px solid #eee; white-space: nowrap;
}
.hr-table td { padding: 0.65rem 0.85rem; border-bottom: 1px solid #f3f3f5; vertical-align: middle; }
.hr-table tr:hover td { background: #fdf8fa; }
.hr-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
}
.hr-avatar-ph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: #f8c8d8; color: #A61E4D; font-weight: 700; font-size: 0.85rem;
}
.hr-badge {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: #f1f5f9; color: #334155; font-size: 0.75rem; font-weight: 600;
}
.hr-badge-active, .hr-badge-published { background: #dcfce7; color: #166534; }
.hr-badge-probation, .hr-badge-pending { background: #fef3c7; color: #92400e; }
.hr-badge-inactive, .hr-badge-rejected { background: #fee2e2; color: #991b1b; }
.hr-actions { white-space: nowrap; }

.hr-steps {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem;
}
.hr-step-btn {
  border: 1px solid #e2e8f0; background: #fff; border-radius: 8px;
  padding: 0.4rem 0.75rem; font-size: 0.8rem; cursor: pointer; color: #64748b;
}
.hr-step-btn.active {
  background: #A61E4D; color: #fff; border-color: #A61E4D;
}
.hr-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}
.hr-form-grid label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: #334155; }
.hr-form-grid label.full { grid-column: 1 / -1; }
.hr-form-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem;
  padding-top: 1rem; border-top: 1px solid #eee;
}

.hr-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.hr-dl { display: grid; grid-template-columns: 120px 1fr; gap: 0.35rem 0.75rem; font-size: 0.875rem; margin: 0; }
.hr-dl dt { color: #64748b; }
.hr-dl dd { margin: 0; color: #0B1F3A; font-weight: 500; }
.hr-profile-actions { margin-top: 1rem; }

.hr-modal {
  position: fixed; inset: 0; z-index: 9800;
  background: rgba(11,31,58,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.hr-modal-card {
  background: #fff; border-radius: 16px; padding: 1.5rem;
  width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
  position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.hr-modal-x {
  position: absolute; top: 0.75rem; right: 0.85rem;
  border: none; background: none; font-size: 1.4rem; cursor: pointer; color: #94a3b8;
}

@media (max-width: 900px) {
  .hr-mobile-menu-btn { display: inline-block; }
  .hr-sidebar {
    position: fixed; left: 0; top: 56px; bottom: 0; z-index: 9600;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.1);
  }
  .hr-sidebar.hr-sidebar-open { transform: translateX(0); }
  .hr-main { padding: 1rem; }
  .hr-dash-cards { grid-template-columns: repeat(2, 1fr); }
}


/* ===== HR Panel polish v170 ===== */
.hr-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.hr-badge-draft { background: #f3f4f6; color: #4b5563; }
.hr-badge-pending { background: #fef3c7; color: #92400e; }
.hr-badge-published { background: #d1fae5; color: #065f46; }
.hr-badge-active { background: #dbeafe; color: #1e40af; }
.hr-badge-probation { background: #e0e7ff; color: #3730a3; }
.hr-badge-notice { background: #ffedd5; color: #9a3412; }
.hr-badge-inactive { background: #f3f4f6; color: #6b7280; }
.hr-badge-rejected { background: #fee2e2; color: #991b1b; }
.hr-badge-default { background: #f3f4f6; color: #374151; }

.hr-toolbar-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.hr-search { min-width: 180px; flex: 1; }
.hr-av {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.hr-av-ph {
  display: inline-flex; align-items: center; justify-content: center;
  background: #A61E4D; color: #fff; font-weight: 700; font-size: 0.9rem;
}
.hr-emp-namecell {
  display: flex; align-items: center; gap: 0.6rem;
}
.hr-actions { white-space: nowrap; }
.hr-btn-danger { color: #b91c1c !important; border-color: #fecaca !important; }
.hr-bulk-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
  background: #fdf2f8; border: 1px solid #fbcfe8; border-radius: 0.75rem;
  font-size: 0.875rem;
}
.hr-empty-pro {
  text-align: center; padding: 2.5rem 1rem;
  background: #fafafa; border-radius: 1rem; border: 1px dashed #e5e7eb;
}
.hr-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.hr-empty-title { margin: 0 0 1rem; color: #4b5563; }
.hr-skeleton-wrap { padding: 0.5rem 0; }
.hr-skeleton-row {
  height: 48px; margin-bottom: 0.5rem; border-radius: 0.5rem;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: hrShimmer 1.2s ease-in-out infinite;
}
@keyframes hrShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.hr-profile-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 1rem;
  padding: 1.25rem; max-width: 640px;
}
.hr-profile-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.hr-profile-photo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  background: #A61E4D; color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700;
}
.hr-profile-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem;
}
.hr-profile-grid .full { grid-column: 1 / -1; }
.hr-check-label { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; }
.hr-photo-preview {
  width: 80px; height: 80px; object-fit: cover; border-radius: 0.75rem;
  margin-top: 0.5rem; border: 2px solid #fce7f3;
}
.hr-form-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem;
  padding-top: 1rem; border-top: 1px solid #e5e7eb;
}
@media (max-width: 768px) {
  .hr-sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 100060;
    width: min(82vw, 300px); max-width: 300px;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
  }
  .hr-sidebar.hr-sidebar-open { transform: translateX(0); }
  .hr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hr-profile-grid { grid-template-columns: 1fr; }
}

/* HR Coming soon + Admin checklist */
.hr-side-soon { opacity: 0.85; }
.hr-soon-tag {
  font-size: 0.65rem; font-weight: 700; margin-left: 0.35rem;
  padding: 0.1rem 0.35rem; border-radius: 999px;
  background: #f3f4f6; color: #6b7280; vertical-align: middle;
}
.hr-soon {
  text-align: center; padding: 2.5rem 1.25rem; max-width: 420px; margin: 1rem auto;
  background: #fafafa; border: 1px dashed #e5e7eb; border-radius: 1rem;
}
.hr-soon-icon { font-size: 2.25rem; margin-bottom: 0.5rem; }
.hr-soon-list {
  text-align: left; display: inline-block; margin: 1rem auto 1.25rem;
  color: #4b5563; font-size: 0.9rem;
}
.admin-check-list {
  margin-top: 0.35rem; line-height: 1.4;
}

/* Support ticket success card */
.ticket-success-overlay {
  position: fixed; inset: 0; z-index: 100100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 23, 42, 0.45);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.ticket-success-overlay.show { opacity: 1; pointer-events: auto; }
.ticket-success-card {
  background: #fff; border-radius: 16px; padding: 1.5rem 1.25rem;
  max-width: 360px; width: 100%; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  transform: translateY(12px) scale(0.96);
  transition: transform 0.3s ease;
  border-top: 4px solid #A61E4D;
}
.ticket-success-overlay.show .ticket-success-card {
  transform: translateY(0) scale(1);
}
.ticket-success-icon {
  width: 52px; height: 52px; margin: 0 auto 0.75rem;
  border-radius: 50%; background: #d1fae5; color: #065f46;
  font-size: 1.5rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ticket-success-title {
  margin: 0 0 0.5rem; font-size: 1.15rem; color: #111827;
}
.ticket-success-no {
  font-family: ui-monospace, monospace; font-weight: 700;
  font-size: 1.05rem; color: #A61E4D; margin: 0.35rem 0 0.75rem;
  letter-spacing: 0.02em;
}
.ticket-success-msg { margin: 0; color: #4b5563; font-size: 0.9rem; line-height: 1.45; }
.ticket-success-cat { margin: 0.5rem 0 0; font-size: 0.8rem; color: #6b7280; }
.ticket-success-hint { margin: 0.75rem 0 0; font-size: 0.75rem; color: #9ca3af; }

#infoModal.modal {
  z-index: 100050 !important;
  align-items: center;
  justify-content: center;
}
#infoModal.modal:not(.hidden) {
  display: flex !important;
}
#infoModal .relative {
  max-height: min(85vh, 720px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Footer bottom: copyright + legal inline */
.footer-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}
.footer-copy {
  margin: 0;
  white-space: nowrap;
}
.footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.15rem;
}
.footer-bottom-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  text-decoration: none;
}
.footer-bottom-link:hover {
  color: #fff;
  text-decoration: underline;
}
.footer-bottom-dot {
  color: rgba(255,255,255,0.35);
  user-select: none;
  padding: 0 0.15rem;
}
@media (max-width: 640px) {
  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-bottom-links {
    row-gap: 0.25rem;
  }
}


/* ===== Info pages — Career-level polish ===== */
.info-page {
  position: fixed;
  inset: 0;
  z-index: 100040;
  background: #f8fafc;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.info-page.hidden { display: none !important; }
body.info-page-open { overflow: hidden; }
.info-page .info-hero.career-hero {
  /* reuse career hero gradient */
}
.info-hero-inner { max-width: 720px; }
.info-section { padding-bottom: 2.5rem; }
.info-content-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 1.35rem 1.25rem 1.5rem;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.7;
}
.info-content-card p { margin: 0 0 0.9rem; }
.info-content-card p.font-semibold,
.info-content-card p[style*="color:var(--primary)"] {
  color: #A61E4D !important;
  font-size: 1.05rem;
  margin-top: 1.15rem;
  margin-bottom: 0.45rem;
}
.info-content-card p.font-semibold:first-child,
.info-content-card > p:first-child {
  margin-top: 0;
}
.info-content-card ul,
.info-content-card ol {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}
.info-content-card li {
  margin-bottom: 0.4rem;
  line-height: 1.55;
}
.info-content-card strong { color: #1f2937; }
.info-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.35rem;
  justify-content: flex-start;
}
.info-mini-footer {
  border-top: 1px solid #e5e7eb;
  background: #fff;
  padding: 1rem 0 1.5rem;
  margin-top: auto;
}
.info-mini-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.8rem;
  color: #6b7280;
  justify-content: center;
}
.info-mini-link {
  background: none;
  border: none;
  color: #A61E4D;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  font-weight: 600;
}
.info-mini-link:hover { text-decoration: underline; }
.info-mini-sep { opacity: 0.5; }
body.dark .info-page { background: #0f172a; }
body.dark .info-content-card {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark .info-content-card strong { color: #f1f5f9; }
body.dark .info-mini-footer {
  background: #1e293b;
  border-color: #334155;
}
@media (max-width: 640px) {
  .info-page-actions { flex-direction: column; }
  .info-page-actions .btn { width: 100%; }
  .info-content-card { padding: 1.1rem 1rem; border-radius: 0.85rem; }
}

/* Info page rich components */
.info-lead-card {
  background: linear-gradient(135deg, #fdf2f8 0%, #fff 100%);
  border: 1px solid #fbcfe8;
  border-radius: 0.85rem;
  padding: 1rem 1.1rem;
  margin-bottom: 0.5rem;
}
.info-lead-title {
  margin: 0 0 0.4rem !important;
  font-weight: 700;
  font-size: 1.05rem;
  color: #A61E4D !important;
}
.info-grid-3, .info-grid-2 {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.info-grid-3 { grid-template-columns: repeat(3, 1fr); }
.info-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) {
  .info-grid-3, .info-grid-2 { grid-template-columns: 1fr; }
}
.info-mini-card, .info-contact-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  box-shadow: 0 2px 10px rgba(15,23,42,0.04);
}
.info-mini-card h4, .info-contact-card h4 {
  margin: 0.35rem 0 0.25rem;
  font-size: 0.95rem;
  color: #111827;
}
.info-mini-card p, .info-contact-card p {
  margin: 0 !important;
  font-size: 0.85rem;
  color: #4b5563;
  line-height: 1.5;
}
.info-mini-ico { font-size: 1.15rem; display: inline-block; }
.info-process {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  background: #111827;
  color: #fff;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0.75rem 0 1rem;
}
.info-proc-arrow { opacity: 0.5; font-weight: 400; }
.info-alert {
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  margin: 0.75rem 0;
  line-height: 1.5;
}
.info-alert-danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.info-alert-warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.info-steps { display: flex; flex-direction: column; gap: 0.65rem; margin: 0.75rem 0; }
.info-step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
}
.info-step-n {
  flex-shrink: 0;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: #A61E4D;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-step h4 { margin: 0 0 0.2rem; font-size: 0.9rem; color: #111827; }
.info-step p { margin: 0 !important; font-size: 0.85rem; color: #4b5563; }
.info-faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.info-faq-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  overflow: hidden;
}
.info-faq-item summary {
  cursor: pointer;
  padding: 0.85rem 1rem;
  font-weight: 600;
  color: #1f2937;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-faq-item summary::-webkit-details-marker { display: none; }
.info-faq-item summary::after { content: '+'; color: #A61E4D; font-weight: 700; }
.info-faq-item[open] summary::after { content: '\2212'; }
.info-faq-item[open] summary { border-bottom: 1px solid #f3f4f6; color: #A61E4D; }
.info-faq-item p {
  margin: 0 !important;
  padding: 0.75rem 1rem 1rem;
  font-size: 0.88rem;
  color: #4b5563;
}
.info-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}
.info-related-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}
.info-related-btn {
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #A61E4D;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
}
.info-related-btn:hover { border-color: #A61E4D; background: #fdf2f8; }
body.dark .info-lead-card { background: #1e293b; border-color: #4c1d3a; }
body.dark .info-mini-card, body.dark .info-contact-card, body.dark .info-step, body.dark .info-faq-item {
  background: #1e293b; border-color: #334155;
}
body.dark .info-mini-card h4, body.dark .info-step h4, body.dark .info-faq-item summary { color: #f1f5f9; }

/* HR mobile drawer — compact, not full screen */
@media (max-width: 900px) {
  .hr-mobile-menu-btn { display: inline-block !important; }
  .hr-sidebar,
  .hr-page .hr-sidebar,
  .hr-page .admin-sidebar.hr-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 56px !important;
    bottom: 0 !important;
    width: min(78vw, 280px) !important;
    max-width: 280px !important;
    height: auto !important;
    z-index: 9610 !important;
    transform: translateX(-105%) !important;
    transition: transform 0.22s ease !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-shadow: 8px 0 28px rgba(0,0,0,0.12) !important;
    background: #fff !important;
  }
  .hr-sidebar.hr-sidebar-open,
  .hr-page .hr-sidebar.hr-sidebar-open {
    transform: translateX(0) !important;
  }
  .hr-layout { position: relative; }
  .hr-main { width: 100%; padding: 1rem !important; }
  .hr-drawer-backdrop {
    display: none;
    position: fixed;
    left: 0; right: 0; top: 56px; bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: 9605;
  }
  .hr-drawer-backdrop.show { display: block; }
}

/* Experiences — home track + full page */
.testimonial-track,
#testimonialsTrack {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.25rem 1rem;
  scrollbar-width: thin;
}
.testimonial-track::-webkit-scrollbar { height: 6px; }
.exp-card, .testimonial-card {
  flex: 0 0 min(260px, 78vw);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #f0e4ea;
  border-radius: 0.85rem;
  padding: 0.85rem 0.9rem 0.9rem;
  box-shadow: 0 4px 14px rgba(166, 30, 77, 0.05);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: 280px;
}
.exp-card-demo { opacity: 0.95; }
.exp-quote {
  font-size: 1.25rem;
  line-height: 1;
  color: #A61E4D;
  opacity: 0.3;
  font-family: Georgia, serif;
  margin-bottom: 0.15rem;
}
.exp-text {
  margin: 0 0 0.5rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #374151;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.exp-stars { color: #f59e0b; font-size: 0.78rem; margin-bottom: 0.5rem; letter-spacing: 0.04em; }
.exp-user { display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.35rem; border-top: 1px solid #f3f4f6; }
.exp-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #A61E4D; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.exp-name { font-weight: 700; font-size: 0.82rem; color: #111827; }
.exp-role { font-size: 0.7rem; color: #6b7280; }
.exp-sample {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  background: #fce7f3;
  color: #A61E4D;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  vertical-align: middle;
}

.experiences-page {
  position: fixed; inset: 0; z-index: 100030;
  background: #f8fafc; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.experiences-page.hidden { display: none !important; }
body.experiences-open { overflow: hidden; }
.exp-page-section { padding: 1.5rem 1rem 3rem; max-width: 960px; margin: 0 auto; }
.exp-share-box {
  background: #fff;
  border: 1px solid #f0e4ea;
  border-radius: 1rem;
  padding: 1.25rem 1.15rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
  margin-bottom: 0.5rem;
}
.exp-share-title { margin: 0 0 0.35rem; font-size: 1.15rem; color: #A61E4D; font-weight: 700; }
.exp-share-lead { margin: 0 0 1rem; font-size: 0.88rem; color: #6b7280; line-height: 1.5; }
.exp-stars-input .star {
  border: none; background: none; font-size: 1.5rem; color: #d1d5db; cursor: pointer; padding: 0 0.15rem;
}
.exp-stars-input .star.active { color: #f59e0b; }
.exp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.exp-grid .exp-card {
  flex: none;
  width: 100%;
  max-width: none;
  min-height: 0;
}
@media (max-width: 480px) {
  .exp-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .exp-grid .exp-card {
    max-width: 100%;
  }
}
@media (min-width: 900px) {
  .exp-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.exp-page-section {
  padding: 1.15rem 1rem 2.5rem !important;
  max-width: 880px !important;
}
.experiences-page .career-hero {
  padding-bottom: 1.5rem !important;
}
.experiences-page .career-hero-title {
  font-size: clamp(1.35rem, 4vw, 1.75rem) !important;
}
.experiences-page .career-hero-sub {
  font-size: 0.88rem !important;
  max-width: 28rem;
}
.exp-loading, .exp-empty {
  text-align: center; padding: 2rem 1rem; color: #6b7280;
}
body.dark .exp-card, body.dark .exp-share-box {
  background: #1e293b; border-color: #334155;
}
body.dark .exp-text, body.dark .exp-name { color: #e2e8f0; }
body.dark .experiences-page { background: #0f172a; }

/* Share experience — professional compact card */
.exp-share-modal {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.exp-share-modal:not(.hidden) {
  display: flex !important;
}
.exp-share-card {
  background: #fff;
  border-radius: 1.15rem;
  width: 100%;
  max-width: 400px;
  max-height: min(90vh, 560px);
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  border: 1px solid #f0e4ea;
  position: relative;
}
.exp-share-x {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  border: none;
  background: #f3f4f6;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  z-index: 2;
}
.exp-share-x:hover { background: #e5e7eb; color: #111; }
.exp-share-card-head {
  background: linear-gradient(135deg, #A61E4D 0%, #7a1538 100%);
  color: #fff;
  padding: 1.35rem 1.25rem 1.2rem;
  border-radius: 1.15rem 1.15rem 0 0;
  text-align: center;
}
.exp-share-ico { font-size: 1.5rem; display: block; margin-bottom: 0.35rem; }
.exp-share-card-title {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.exp-share-card-sub {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.92;
}
.exp-share-card-body { padding: 1.15rem 1.2rem 1.35rem; }
.exp-share-label {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.exp-share-ta { min-height: 100px; resize: vertical; }
.exp-share-hint {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: #9ca3af;
}
body.dark .exp-share-card { background: #1e293b; border-color: #334155; }
body.dark .exp-share-x { background: #334155; color: #e2e8f0; }

#experiencesLoadMoreBtn { min-width: 200px; }


/* ========== Premium Login Modal (screenshot match) ========== */
.login-modal-panel {
  background: #fff;
  border-radius: 1.35rem;
  padding: 1.15rem 1.15rem 1.35rem;
  width: 92%;
  max-width: 400px;
  max-height: min(90vh, 640px);
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  border: 1px solid #f3e4ea;
  position: relative;
  background-image:
    radial-gradient(ellipse 120% 60% at 50% 100%, rgba(166, 30, 77, 0.07) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #fff9fb 100%);
}
.login-modal-x {
  position: absolute;
  top: 0.65rem;
  right: 0.7rem;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}
.login-modal-x:hover { background: #e5e7eb; color: #111; }
.login-step-panel { position: relative; padding-top: 0.15rem; }
.login-back-link {
  border: none;
  background: none;
  color: #A61E4D;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.15rem 0;
  margin-bottom: 0.35rem;
  cursor: pointer;
}
.login-main-q {
  margin: 0.65rem 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.25;
  color: #A61E4D;
  letter-spacing: -0.02em;
}
.login-main-sub {
  margin: 0;
  font-size: 0.88rem;
  color: #6b7280;
}
.login-accent-bar {
  width: 48px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #A61E4D, #f9a8c4);
  margin: 0.75rem auto 1rem;
}
.login-step-title {
  margin: 0.45rem 0 0.25rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: #A61E4D;
}
.login-step-sub {
  margin: 0;
  font-size: 0.84rem;
  color: #6b7280;
  line-height: 1.4;
}
#loginModal .mydera-logo-login {
  height: 48px !important;
  max-width: 170px !important;
  object-fit: contain;
}
.login-role-stack {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.login-role-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  border: 1.5px solid #f0d6e0;
  border-radius: 1rem;
  padding: 0.85rem 0.75rem;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s;
  background: linear-gradient(135deg, #fff5f8 0%, #ffffff 55%);
}
.login-role-owner {
  background: linear-gradient(135deg, #fff0f5 0%, #ffffff 60%);
  border-color: #f3c4d4;
}
.login-role-seeker {
  background: linear-gradient(135deg, #f0f6ff 0%, #ffffff 60%);
  border-color: #cfe0f5;
}
.login-role-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(166, 30, 77, 0.12);
  border-color: #A61E4D;
}
.login-role-seeker:hover {
  border-color: #1e3a5f;
  box-shadow: 0 12px 28px rgba(30, 58, 95, 0.12);
}
.login-role-visual {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe4ec, #fce7f3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.login-role-visual-seeker {
  background: radial-gradient(circle at 30% 30%, #e0eaff, #dbeafe);
}
.login-role-emoji { font-size: 1.55rem; line-height: 1; }
.login-role-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.login-role-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #fce7f3;
  color: #A61E4D;
}
.login-role-badge-seeker {
  background: #e0e7ff;
  color: #1e3a5f;
}
.login-role-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #A61E4D;
  line-height: 1.2;
}
.login-role-title-seeker { color: #0f172a; }
.login-role-desc {
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.35;
}
.login-role-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #A61E4D;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}
.login-role-arrow-seeker { background: #0f172a; }
.login-or-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.85rem;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.login-or-row::before,
.login-or-row::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}
.login-or-row span { flex-shrink: 0; }
.login-guest-btn {
  width: 100%;
  border: 1.5px solid #A61E4D;
  background: #fff;
  color: #A61E4D;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.login-guest-btn:hover {
  background: #A61E4D;
  color: #fff;
}
.login-guest-hint {
  text-align: center;
  margin: 0.65rem 0 0;
  font-size: 0.75rem;
  color: #9ca3af;
}
#loginModal .login-step-panel .input {
  margin-bottom: 0.55rem;
  border-radius: 0.75rem;
}
#loginModal .login-step-panel .btn-primary,
#loginModal .login-cta {
  border-radius: 0.85rem;
  font-weight: 700;
}
#loginModal .login-cta-outline {
  border-radius: 0.85rem;
}
body.dark .login-modal-panel {
  background: #1e293b;
  border-color: #334155;
  background-image: none;
}
body.dark .login-main-q,
body.dark .login-step-title,
body.dark .login-role-title { color: #f9a8c4; }
body.dark .login-role-row {
  background: #0f172a;
  border-color: #334155;
}
body.dark .login-guest-btn {
  background: transparent;
  color: #f9a8c4;
  border-color: #f9a8c4;
}

.footer-emails {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.footer-email-link {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none;
  font-size: 0.8rem;
}
.footer-email-link:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* ===== Safe polish v193 — empty / skeleton / map note / mobile ===== */
.map-friendly-note {
  background: #fff8fb;
  border: 1px solid #f0d4de;
  color: #6b3a4a;
  font-size: 0.85rem;
  padding: 0.65rem 0.9rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
  text-align: center;
}
.map-friendly-note.hidden { display: none !important; }
body.dark .map-friendly-note {
  background: #2a1f24;
  border-color: #4a3540;
  color: #f0d4de;
}
.empty-state {
  padding: 2.25rem 1.25rem !important;
}
@media (max-width: 640px) {
  .empty-state {
    padding: 1.5rem 0.85rem !important;
  }
  .empty-state .btn { min-height: 40px; }
  .skeleton-card { margin-bottom: 0.65rem; }
  .listings-grid-5 { gap: 0.75rem !important; }
}
.admin-empty-pro {
  text-align: center;
  padding: 1.75rem 1rem;
  border-radius: 14px;
  border: 1px dashed #e8cfd8;
  background: #fffafb;
  color: #6b7280;
  font-size: 0.9rem;
}
body.dark .admin-empty-pro {
  background: #1f1a1c;
  border-color: #3d2a32;
  color: #c4b5bc;
}

/* ===== Premium login steps (match role card) ===== */
.login-main-q-sm {
  font-size: 1.25rem !important;
  margin-top: 0.35rem !important;
}
.login-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem auto 0.15rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #eef2ff;
  color: #1e3a5f;
  border: 1px solid #e0e7ff;
}
.login-role-chip-owner {
  background: #fdf2f8;
  color: #A61E4D;
  border-color: #fce7f3;
}
.login-action-login {
  border-color: #fbcfe8 !important;
  background: linear-gradient(135deg, #fff 0%, #fff5f9 100%) !important;
}
.login-action-register {
  border-color: #e2e8f0 !important;
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%) !important;
}
.login-oauth-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-oauth-btn:hover {
  border-color: #A61E4D;
  box-shadow: 0 4px 14px rgba(166, 30, 77, 0.08);
}
.login-oauth-g {
  font-weight: 800;
  color: #EA4335;
  font-size: 1.05rem;
}
.login-cta-pill,
#loginModal .login-cta-pill {
  border-radius: 999px !important;
  padding: 0.8rem 1rem !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin-top: 0.35rem;
  box-shadow: 0 8px 20px rgba(166, 30, 77, 0.22);
}
#loginModal .login-step-panel .input {
  border-radius: 999px !important;
  padding-left: 1.1rem !important;
  padding-right: 1.1rem !important;
  border: 1.5px solid #e5e7eb;
  min-height: 46px;
}
#loginModal .login-step-panel .input:focus {
  border-color: #A61E4D;
  box-shadow: 0 0 0 3px rgba(166, 30, 77, 0.12);
}
.login-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0;
  margin-bottom: 0.35rem;
}
.login-back-link:hover { color: #A61E4D; }
#loginModal .login-step-panel .btn-outline,
#loginModal .login-cta-outline {
  border-radius: 999px !important;
}
#loginAuthChoiceBox .login-role-row {
  text-align: left;
}
body.dark .login-role-chip {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark .login-role-chip-owner {
  background: #3b1f2e;
  color: #f9a8c4;
  border-color: #5b3048;
}
body.dark .login-oauth-btn {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}