/* ============================================================
   REALSTAY — Complete Design System
   Premium PG Rental Platform
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

/* ── CSS Custom Properties ── */
:root {
  /* Core Colors */
  --navy:        #0A0F2C;
  --navy-800:    #111638;
  --navy-700:    #1A2150;
  --navy-600:    #243068;
  --navy-500:    #2E3F85;

  --gold:        #C9A84C;
  --gold-light:  #E4C76B;
  --gold-pale:   #F5E9C4;
  --gold-dark:   #9E7C2E;

  --sky:         #4F9CF9;
  --sky-light:   #A8CFFC;
  --sky-pale:    #EBF4FF;

  --white:       #FFFFFF;
  --off-white:   #F8F9FC;
  --gray-50:     #F2F4F8;
  --gray-100:    #E8ECF4;
  --gray-200:    #D1D8E8;
  --gray-300:    #B0BCCE;
  --gray-400:    #8895A7;
  --gray-500:    #5E6E82;
  --gray-600:    #3E4D5C;
  --gray-700:    #2A3545;
  --gray-800:    #1A2230;

  --green:       #1DB97E;
  --green-pale:  #E6FBF3;
  --red:         #E84040;
  --red-pale:    #FDEAEA;
  --orange:      #F97316;
  --orange-pale: #FEF0E6;

  /* Gradients */
  --grad-hero:       linear-gradient(135deg, #0A0F2C 0%, #1A2150 50%, #0d1a3e 100%);
  --grad-card:       linear-gradient(145deg, #ffffff 0%, #f8f9fc 100%);
  --grad-gold:       linear-gradient(135deg, #C9A84C 0%, #E4C76B 100%);
  --grad-sky:        linear-gradient(135deg, #4F9CF9 0%, #7BB8FC 100%);
  --grad-navy:       linear-gradient(135deg, #111638 0%, #2E3F85 100%);
  --grad-sidebar:    linear-gradient(180deg, #0A0F2C 0%, #111638 100%);

  /* Typography */
  --font-display:    'Playfair Display', Georgia, serif;
  --font-body:       'DM Sans', sans-serif;
  --font-mono:       'DM Mono', monospace;

  /* Font Sizes */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.25rem;
  --text-4xl:   3rem;
  --text-5xl:   3.75rem;

  /* Spacing */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;

  /* Borders */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:   0 1px 3px rgba(10,15,44,0.06);
  --shadow-sm:   0 2px 8px rgba(10,15,44,0.08);
  --shadow-md:   0 4px 20px rgba(10,15,44,0.10);
  --shadow-lg:   0 8px 40px rgba(10,15,44,0.14);
  --shadow-xl:   0 16px 60px rgba(10,15,44,0.18);
  --shadow-gold: 0 4px 20px rgba(201,168,76,0.30);
  --shadow-sky:  0 4px 20px rgba(79,156,249,0.25);
  --shadow-card: 0 2px 16px rgba(10,15,44,0.08), 0 0 0 1px rgba(10,15,44,0.04);

  /* Transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-io:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;

  /* Layout */
  --container:  1280px;
  --sidebar-w:  260px;
  --topbar-h:   68px;
  --navbar-h:   72px;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--gray-700);
  background: var(--off-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { line-height: 1.2; }

/* ── Typography ── */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }

.font-300 { font-weight: 300; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

.text-navy    { color: var(--navy); }
.text-gold    { color: var(--gold); }
.text-sky     { color: var(--sky); }
.text-white   { color: var(--white); }
.text-gray    { color: var(--gray-500); }
.text-muted   { color: var(--gray-400); }
.text-green   { color: var(--green); }
.text-red     { color: var(--red); }
.text-orange  { color: var(--orange); }

/* ── Layout ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.section { padding: var(--sp-20) 0; }
.section-sm { padding: var(--sp-12) 0; }
.section-lg { padding: var(--sp-24) 0; }

/* Flex */
.flex     { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-1  { gap: var(--sp-1); }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }
.flex-wrap { flex-wrap: wrap; }
.flex-1    { flex: 1; }
.shrink-0  { flex-shrink: 0; }

/* Grid */
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Spacing Utilities ── */
.p-2  { padding: var(--sp-2); }
.p-3  { padding: var(--sp-3); }
.p-4  { padding: var(--sp-4); }
.p-5  { padding: var(--sp-5); }
.p-6  { padding: var(--sp-6); }
.p-8  { padding: var(--sp-8); }
.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.px-6 { padding-left: var(--sp-6); padding-right: var(--sp-6); }
.py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.ml-auto { margin-left: auto; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all var(--dur-base) var(--ease-out);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  opacity: 0;
  transition: opacity var(--dur-fast);
}

.btn:hover::before { opacity: 1; }

.btn-primary {
  background: var(--grad-gold);
  color: var(--navy);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(201,168,76,0.40);
}
.btn-primary:active { transform: translateY(0); }

.btn-navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-navy:hover {
  background: var(--navy-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-sky {
  background: var(--grad-sky);
  color: var(--white);
  box-shadow: var(--shadow-sky);
}
.btn-sky:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(79,156,249,0.35);
}

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--gray-200);
}
.btn-outline:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
}
.btn-outline-gold:hover {
  background: var(--gold);
  color: var(--navy);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.4);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
}
.btn-ghost:hover { background: var(--gray-50); color: var(--navy); }

.btn-danger {
  background: var(--red);
  color: var(--white);
}
.btn-danger:hover { background: #c93030; transform: translateY(-1px); }

.btn-success {
  background: var(--green);
  color: var(--white);
}
.btn-success:hover { background: #17a06c; }

.btn-sm {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-xs);
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--text-md);
  border-radius: var(--radius-lg);
}

.btn-icon {
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  aspect-ratio: 1;
}

.btn-full { width: 100%; }

/* ── Cards ── */
.card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all var(--dur-base) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card-body { padding: var(--sp-5); }
.card-flat { box-shadow: none; border: 1px solid var(--gray-100); }

/* PG Listing Card */
.pg-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: all var(--dur-slow) var(--ease-out);
  position: relative;
}

.pg-card:hover {
  box-shadow: 0 12px 48px rgba(10,15,44,0.16);
  transform: translateY(-6px);
}

.pg-card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--gray-100);
}

.pg-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.pg-card:hover .pg-card-image img { transform: scale(1.06); }

.pg-card-badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  background: var(--grad-gold);
  color: var(--navy);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pg-card-wishlist {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-base);
  color: var(--gray-400);
}

.pg-card-wishlist:hover { color: var(--red); transform: scale(1.1); }
.pg-card-wishlist.active { color: var(--red); }

.pg-card-body { padding: var(--sp-4) var(--sp-5); }

.pg-card-price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-1);
}

.pg-card-price span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--gray-400);
}

.pg-card-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: var(--sp-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-card-location {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: var(--sp-3);
}

.pg-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  background: var(--sky-pale);
  color: var(--sky);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  transition: all var(--dur-fast);
}

.tag-gold {
  background: var(--gold-pale);
  color: var(--gold-dark);
}

.tag-green {
  background: var(--green-pale);
  color: var(--green);
}

.tag-navy {
  background: rgba(10,15,44,0.08);
  color: var(--navy);
}

.tag-gray {
  background: var(--gray-100);
  color: var(--gray-600);
}

.pg-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gray-100);
}

/* ── Stats Cards ── */
.stat-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: all var(--dur-base) var(--ease-out);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 0 var(--radius-xl) 0 80px;
  opacity: 0.08;
}

.stat-card.gold::before  { background: var(--gold); }
.stat-card.sky::before   { background: var(--sky); }
.stat-card.green::before { background: var(--green); }
.stat-card.red::before   { background: var(--red); }

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
  font-size: 1.4rem;
}

.stat-icon.gold  { background: var(--gold-pale); color: var(--gold-dark); }
.stat-icon.sky   { background: var(--sky-pale);  color: var(--sky); }
.stat-icon.green { background: var(--green-pale); color: var(--green); }
.stat-icon.red   { background: var(--red-pale);   color: var(--red); }

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: var(--sp-1);
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--gray-500);
  font-weight: 500;
}

.stat-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: var(--sp-2);
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
}

.stat-change.up {
  background: var(--green-pale);
  color: var(--green);
}

.stat-change.down {
  background: var(--red-pale);
  color: var(--red);
}

/* ── Forms ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
}

.form-label span { color: var(--red); }

.form-control {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  font-size: var(--text-sm);
  color: var(--gray-800);
  background: var(--white);
  transition: all var(--dur-base);
  outline: none;
}

.form-control:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(79,156,249,0.15);
}

.form-control::placeholder { color: var(--gray-300); }

.form-control-lg {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--text-base);
  border-radius: 12px;
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

select.form-control {
  appearance: none;
  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='%238895A7' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-10);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--gray-400);
}

.form-error {
  font-size: var(--text-xs);
  color: var(--red);
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: var(--sp-4);
  color: var(--gray-400);
  font-size: 1rem;
  pointer-events: none;
}

.input-icon-right {
  position: absolute;
  right: var(--sp-4);
  color: var(--gray-400);
}

.input-group .form-control {
  padding-left: calc(var(--sp-4) + 1.5rem + var(--sp-2));
}

.input-group.has-right .form-control {
  padding-right: calc(var(--sp-4) + 1.5rem + var(--sp-2));
}

/* Checkbox & Radio */
.check-group {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--dur-fast);
}

.check-group:hover {
  border-color: var(--sky);
  background: var(--sky-pale);
}

.check-group input[type="checkbox"],
.check-group input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--navy);
  cursor: pointer;
}

/* Amenity Toggle Chips */
.amenity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.amenity-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--dur-fast);
  user-select: none;
}

.amenity-chip:hover {
  border-color: var(--sky);
  color: var(--sky);
  background: var(--sky-pale);
}

.amenity-chip.active {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
}

/* Price Range Slider */
.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--gray-200);
  outline: none;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--navy);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(10,15,44,0.3);
  transition: transform var(--dur-fast);
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* ── Navigation ── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-h);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--gray-100);
  z-index: 1000;
  transition: all var(--dur-base);
}

.navbar.scrolled {
  box-shadow: var(--shadow-md);
}

.navbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
}

.navbar-brand-icon {
  width: 36px;
  height: 36px;
  background: var(--grad-gold);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav-link {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-600);
  transition: all var(--dur-fast);
}

.nav-link:hover {
  background: var(--gray-50);
  color: var(--navy);
}

.nav-link.active {
  background: var(--sky-pale);
  color: var(--sky);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Mobile Nav Toggle */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: all var(--dur-base);
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--navbar-h);
  left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  padding: var(--sp-4) var(--sp-6);
  box-shadow: var(--shadow-lg);
  z-index: 999;
  flex-direction: column;
  gap: var(--sp-2);
}

.mobile-menu.open { display: flex; }

/* Bottom Navigation (Mobile) */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--gray-100);
  padding: var(--sp-2) var(--sp-4);
  z-index: 1000;
  box-shadow: 0 -4px 20px rgba(10,15,44,0.08);
}

.bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  color: var(--gray-400);
  font-size: 10px;
  font-weight: 500;
  transition: all var(--dur-fast);
  text-decoration: none;
}

.bottom-nav-item .icon { font-size: 1.3rem; }

.bottom-nav-item.active {
  color: var(--navy);
}

.bottom-nav-item.active .icon {
  color: var(--gold);
}

/* ── Dashboard Layout ── */
.dash-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--grad-sidebar);
  overflow-y: auto;
  z-index: 200;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out);
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
}

.sidebar-brand-icon {
  width: 38px;
  height: 38px;
  background: var(--grad-gold);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.sidebar-brand-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--white);
}

.sidebar-brand-sub {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  font-weight: 400;
  margin-top: 1px;
}

.sidebar-nav {
  flex: 1;
  padding: var(--sp-4) var(--sp-3);
}

.sidebar-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.55);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--dur-fast);
  margin-bottom: 2px;
  text-decoration: none;
  position: relative;
}

.sidebar-link:hover {
  background: rgba(255,255,255,0.06);
  color: var(--white);
}

.sidebar-link.active {
  background: rgba(201,168,76,0.15);
  color: var(--gold-light);
}

.sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 25%; bottom: 25%;
  width: 3px;
  background: var(--gold);
  border-radius: 0 2px 2px 0;
}

.sidebar-link .icon { font-size: 1.1rem; width: 20px; text-align: center; }

.sidebar-badge {
  margin-left: auto;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

.sidebar-footer {
  padding: var(--sp-4) var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--dur-fast);
}

.sidebar-user:hover { background: rgba(255,255,255,0.06); }

.sidebar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy);
  flex-shrink: 0;
}

.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
}

/* Main Content */
.dash-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-h);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-100);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-8);
}

.topbar-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--navy);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.topbar-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
}

.notif-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--dur-fast);
}

.notif-btn:hover { background: var(--gray-100); color: var(--navy); }

.notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--white);
}

.dash-content {
  flex: 1;
  padding: var(--sp-8);
}

/* Mobile sidebar toggle */
.sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 80px;
  left: var(--sp-4);
  width: 46px;
  height: 46px;
  background: var(--navy);
  color: var(--white);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  cursor: pointer;
}

/* ── Tables ── */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  background: var(--white);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  white-space: nowrap;
}

.table th:first-child { border-radius: var(--radius-xl) 0 0 0; }
.table th:last-child  { border-radius: 0 var(--radius-xl) 0 0; }

.table td {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--text-sm);
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-50);
  vertical-align: middle;
}

.table tr:last-child td { border-bottom: none; }

.table tbody tr:hover { background: var(--gray-50); }

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.badge-pending  { background: var(--orange-pale); color: var(--orange); }
.badge-active   { background: var(--green-pale);  color: var(--green); }
.badge-inactive { background: var(--gray-100);    color: var(--gray-500); }
.badge-rejected { background: var(--red-pale);    color: var(--red); }
.badge-gold     { background: var(--gold-pale);   color: var(--gold-dark); }
.badge-navy     { background: rgba(10,15,44,0.08); color: var(--navy); }

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Hero Section ── */
.hero {
  min-height: 100vh;
  background: var(--grad-hero);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--navbar-h);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 80% 50%, rgba(79,156,249,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(201,168,76,0.10) 0%, transparent 60%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.25);
  color: var(--gold-light);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-6);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: var(--sp-6);
}

.hero-title em {
  font-style: normal;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--sp-10);
  line-height: 1.7;
  max-width: 540px;
}

/* Hero Search Box */
.hero-search {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-xl);
  margin-bottom: var(--sp-8);
}

.hero-search-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.hero-search-tab {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--dur-fast);
  border: none;
  background: none;
}

.hero-search-tab.active {
  background: var(--navy);
  color: var(--white);
}

.hero-search-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: var(--sp-3);
  align-items: end;
}

.hero-stats {
  display: flex;
  gap: var(--sp-8);
}

.hero-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--white);
}

.hero-stat-label {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

/* ── Filter Sidebar ── */
.filter-sidebar {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
  position: sticky;
  top: calc(var(--navbar-h) + var(--sp-4));
}

.filter-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-section {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--gray-100);
}

.filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── PG Detail Page ── */
.gallery-main {
  width: 100%;
  height: 460px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden;
  position: relative;
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
}

.gallery-thumb {
  height: 90px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base);
}

.gallery-thumb:hover img { transform: scale(1.06); }

.gallery-thumb.more-overlay::after {
  content: attr(data-count);
  position: absolute;
  inset: 0;
  background: rgba(10,15,44,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: var(--text-xl);
  font-weight: 700;
}

.map-placeholder {
  height: 240px;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--sp-3);
  color: var(--gray-400);
  font-size: var(--text-sm);
  overflow: hidden;
  position: relative;
}

.map-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 30px,
      rgba(10,15,44,0.04) 30px,
      rgba(10,15,44,0.04) 31px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 30px,
      rgba(10,15,44,0.04) 30px,
      rgba(10,15,44,0.04) 31px
    );
}

/* Chat / Inquiry */
.chat-box {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.chat-header {
  padding: var(--sp-4) var(--sp-5);
  background: var(--grad-navy);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.chat-messages {
  height: 280px;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--gray-50);
}

.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }

.chat-bubble {
  max-width: 80%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.chat-bubble.sent {
  background: var(--navy);
  color: var(--white);
  align-self: flex-end;
  border-bottom-right-radius: var(--radius-sm);
}

.chat-bubble.received {
  background: var(--white);
  color: var(--gray-700);
  align-self: flex-start;
  border-bottom-left-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}

.chat-time {
  font-size: 10px;
  color: var(--gray-400);
  margin-top: 4px;
}

.chat-input-area {
  padding: var(--sp-4);
  border-top: 1px solid var(--gray-100);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
}

/* ── Auth Pages ── */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.auth-visual {
  background: var(--grad-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12);
  position: relative;
  overflow: hidden;
}

.auth-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(79,156,249,0.15) 0%, transparent 70%);
}

.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-8);
  background: var(--white);
}

.auth-form-box {
  width: 100%;
  max-width: 420px;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-8);
}

.auth-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-2);
}

.auth-subtitle {
  color: var(--gray-500);
  margin-bottom: var(--sp-8);
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
  color: var(--gray-400);
  font-size: var(--text-sm);
}

.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-200);
}

/* Role Selector */
.role-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  background: var(--gray-50);
  padding: var(--sp-2);
  border-radius: var(--radius-lg);
}

.role-tab {
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--dur-fast);
}

.role-tab.active {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

/* ── Page Header ── */
.page-header {
  background: var(--grad-hero);
  padding: calc(var(--navbar-h) + var(--sp-12)) 0 var(--sp-12);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(79,156,249,0.10) 0%, transparent 70%);
}

/* ── Upload Zone ── */
.upload-zone {
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--sp-10);
  text-align: center;
  cursor: pointer;
  transition: all var(--dur-base);
  background: var(--gray-50);
}

.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--sky);
  background: var(--sky-pale);
}

.upload-icon {
  font-size: 2.5rem;
  margin-bottom: var(--sp-3);
  color: var(--gray-300);
}

.image-previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.image-preview-item {
  position: relative;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gray-100);
}

.image-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-remove {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--red);
  color: var(--white);
  border: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast);
}

.image-preview-item:hover .image-preview-remove { opacity: 1; }

/* ── Inquiry Cards ── */
.inquiry-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
  transition: all var(--dur-base);
  border-left: 4px solid transparent;
}

.inquiry-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.inquiry-card.unread {
  border-left-color: var(--sky);
  background: var(--sky-pale);
}

.inquiry-card.urgent {
  border-left-color: var(--gold);
}

/* ── Section Titles ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--sky-pale);
  color: var(--sky);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--sp-4);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-4);
  line-height: 1.2;
}

.section-subtitle {
  font-size: var(--text-md);
  color: var(--gray-500);
  max-width: 560px;
  line-height: 1.7;
}

/* ── Loading Skeletons ── */
@keyframes shimmer {
  0%   { background-position: -500px 0; }
  100% { background-position: 500px 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
  background-size: 1000px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--radius-md);
}

.skeleton-text { height: 16px; width: 100%; }
.skeleton-text.short { width: 60%; }
.skeleton-text.shorter { width: 35%; }
.skeleton-image { height: 200px; border-radius: var(--radius-lg); }
.skeleton-title { height: 28px; margin-bottom: var(--sp-2); }
.skeleton-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* ── Empty States ── */
.empty-state {
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.empty-icon {
  font-size: 4rem;
  opacity: 0.3;
}

.empty-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--navy);
}

.empty-text {
  font-size: var(--text-sm);
  color: var(--gray-500);
  max-width: 320px;
}

/* ── Toast Notifications ── */
.toast-container {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.toast {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 300px;
  border-left: 4px solid var(--green);
  animation: slideInRight var(--dur-base) var(--ease-out);
}

.toast.error { border-left-color: var(--red); }
.toast.warning { border-left-color: var(--orange); }
.toast.info { border-left-color: var(--sky); }

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,15,44,0.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base);
}

.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background: var(--white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95) translateY(20px);
  transition: transform var(--dur-base) var(--ease-out);
}

.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
}

.modal-header {
  padding: var(--sp-6) var(--sp-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--navy);
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--gray-500);
  border: none;
  transition: all var(--dur-fast);
}

.modal-close:hover { background: var(--gray-200); color: var(--navy); }

.modal-body { padding: var(--sp-6); }
.modal-footer {
  padding: 0 var(--sp-6) var(--sp-6);
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-8);
}

.page-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-600);
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  cursor: pointer;
  transition: all var(--dur-fast);
}

.page-btn:hover { border-color: var(--navy); color: var(--navy); }
.page-btn.active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ── WhatsApp Button ── */
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: #25D366;
  color: var(--white);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: var(--text-sm);
  box-shadow: 0 4px 16px rgba(37,211,102,0.3);
  transition: all var(--dur-base);
  text-decoration: none;
}

.whatsapp-btn:hover {
  background: #1fb357;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.4);
}

/* ── Utility ── */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }
.overflow-hidden { overflow: hidden; }
.w-full   { width: 100%; }
.h-full   { height: 100%; }
.block    { display: block; }
.hidden   { display: none !important; }
.rounded  { border-radius: var(--radius-md); }
.rounded-full { border-radius: var(--radius-full); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-center { text-align: center; }
.text-right  { text-align: right; }

.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }

.cursor-pointer { cursor: pointer; }

/* Separator */
.sep { height: 1px; background: var(--gray-100); }

/* Scroll top btn */
.scroll-top {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  width: 44px;
  height: 44px;
  background: var(--navy);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--dur-base);
  z-index: 500;
  border: none;
  font-size: 1.1rem;
}

.scroll-top.visible { opacity: 1; transform: translateY(0); }

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animate-fadeIn   { animation: fadeIn 0.6s var(--ease-out) both; }
.animate-fadeUp   { animation: fadeUp 0.6s var(--ease-out) both; }
.animate-fadeLeft { animation: fadeLeft 0.6s var(--ease-out) both; }
.animate-scaleIn  { animation: scaleIn 0.5s var(--ease-out) both; }
.animate-float    { animation: float 3s ease-in-out infinite; }
.animate-pulse    { animation: pulse 2s ease-in-out infinite; }

.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }
.delay-4 { animation-delay: 400ms; }
.delay-5 { animation-delay: 500ms; }
.delay-6 { animation-delay: 600ms; }

/* ── Footer ── */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,0.7);
  padding: var(--sp-20) 0 var(--sp-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-10);
  margin-bottom: var(--sp-12);
}

.footer-brand-text {
  font-size: var(--text-sm);
  line-height: 1.8;
  margin-top: var(--sp-4);
  opacity: 0.7;
}

.footer-heading {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-link {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  transition: color var(--dur-fast);
  text-decoration: none;
}

.footer-link:hover { color: var(--gold-light); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: var(--text-sm);
}

.social-links {
  display: flex;
  gap: var(--sp-3);
}

.social-link {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
  transition: all var(--dur-fast);
  text-decoration: none;
}

.social-link:hover {
  background: var(--gold);
  color: var(--navy);
}

/* ── Admin Specific ── */
.admin-sidebar .sidebar-brand-sub::before {
  content: '🛡️ ';
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  :root { --sidebar-w: 240px; }
}

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .hero-search-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-form-side { padding: var(--sp-8) var(--sp-6); }
}

@media (max-width: 768px) {
  :root {
    --navbar-h: 60px;
    --topbar-h: 60px;
  }

  .container { padding: 0 var(--sp-4); }
  .section { padding: var(--sp-12) 0; }
  .section-lg { padding: var(--sp-16) 0; }

  /* Navbar */
  .navbar-nav, .navbar-actions .btn { display: none; }
  .hamburger { display: flex; }
  .bottom-nav { display: block; }

  /* Hero */
  .hero { min-height: auto; padding: calc(var(--navbar-h) + var(--sp-8)) 0 var(--sp-12); }
  .hero-title { font-size: var(--text-3xl); }
  .hero-search-row { grid-template-columns: 1fr; }
  .hero-stats { gap: var(--sp-6); }

  /* Grids */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  /* Dash Layout */
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open { transform: translateX(0); }
  .dash-main { margin-left: 0; }
  .topbar { padding: 0 var(--sp-4); }
  .dash-content { padding: var(--sp-4); }
  .sidebar-toggle { display: flex; }

  /* Tables */
  .table { font-size: var(--text-xs); }
  .table th, .table td { padding: var(--sp-3) var(--sp-4); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom { flex-direction: column; gap: var(--sp-4); }

  /* Gallery */
  .gallery-main { height: 260px; }
  .gallery-thumbs { grid-template-columns: repeat(2, 1fr); }

  /* Auth */
  .auth-form-side { padding: var(--sp-8) var(--sp-4); }

  /* Toast */
  .toast-container { left: var(--sp-4); right: var(--sp-4); }
  .toast { min-width: auto; }

  /* Cards */
  .pg-card:hover { transform: none; }
  .card:hover { transform: none; }
  .stat-card:hover { transform: none; }
}

@media (max-width: 480px) {
  .hero-title { font-size: var(--text-2xl); }
  .section-title { font-size: var(--text-2xl); }
  .btn-lg { padding: var(--sp-3) var(--sp-6); font-size: var(--text-base); }

  .gallery-thumbs { display: none; }
  .gallery-main { border-radius: var(--radius-xl); }

  .modal { border-radius: var(--radius-xl); }

}

/* ── Print ── */
@media print {
  .navbar, .sidebar, .bottom-nav, .scroll-top, .toast-container { display: none !important; }
  .dash-main { margin-left: 0 !important; }
}

/* ============================================================
   PHASE 1 — NEW PREMIUM CLASSES (appended, no existing edits)
   ============================================================ */

/* ── WhatsApp Float Button ── */
.wa-float {
  position: fixed; bottom: 86px; right: 20px;
  width: 52px; height: 52px;
  background: #25D366; color: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  z-index: 900; text-decoration: none; transition: all 0.25s ease;
}
.wa-float:hover { transform: scale(1.12) translateY(-3px); }
.wa-float::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.4);
  animation: waPulse 2s ease-in-out infinite;
}
@keyframes waPulse {
  0%,100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.18); opacity: 0; }
}

/* ── Premium Booking Sidebar Card ── */
.booking-card {
  background: white; border-radius: var(--radius-xl);
  box-shadow: 0 8px 40px rgba(10,15,44,0.14), 0 0 0 1px rgba(10,15,44,0.05);
  overflow: hidden; position: relative; margin-bottom: var(--sp-6);
  border-top: 4px solid var(--gold);
}
.booking-card-header {
  background: var(--grad-hero); padding: 20px 24px;
  position: relative; overflow: hidden;
}
.booking-card-header::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(201,168,76,0.2) 0%, transparent 60%);
}
.booking-price {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 800;
  color: white; position: relative; z-index: 1;
}
.booking-price span {
  font-family: var(--font-body); font-size: 0.875rem;
  font-weight: 400; color: rgba(255,255,255,0.6);
}
.booking-body { padding: 20px 24px; }
.booking-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--gray-50); font-size: 0.875rem;
}
.booking-meta-row:last-child { border-bottom: none; }
.booking-trust { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.booking-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.75rem; color: var(--gray-500);
}

/* ── WhatsApp & Call Contact Buttons ── */
.whatsapp-contact-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px; background: #25D366; color: white;
  border-radius: var(--radius-md); font-weight: 700; font-size: 0.875rem;
  text-decoration: none; box-shadow: 0 2px 10px rgba(37,211,102,0.3);
  transition: all 0.2s ease;
}
.whatsapp-contact-btn:hover { background: #1fb357; transform: translateY(-2px); }
.call-contact-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px; background: white; color: var(--navy);
  font-weight: 700; font-size: 0.875rem; text-decoration: none;
  border: 2px solid var(--gray-200); border-radius: var(--radius-md);
  transition: all 0.2s ease;
}
.call-contact-btn:hover { border-color: var(--navy); background: var(--navy); color: white; }

/* ── Trust Badge Pills ── */
.trust-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
  border-radius: 999px; font-size: 0.75rem; font-weight: 600;
}
.trust-pill-green { background: var(--green-pale); color: var(--green); border: 1px solid rgba(29,185,126,0.2); }
.trust-pill-gold  { background: var(--gold-pale);  color: var(--gold-dark); border: 1px solid rgba(201,168,76,0.2); }
.trust-pill-sky   { background: var(--sky-pale);   color: var(--sky); border: 1px solid rgba(79,156,249,0.2); }

/* ── Women Safety Section ── */
.women-section {
  background: linear-gradient(135deg, #fff0f5, #f3e5f5);
  border: 1px solid rgba(194,24,91,0.12); border-radius: var(--radius-2xl); padding: 40px;
}
.women-feature-card {
  background: rgba(255,255,255,0.85); border-radius: var(--radius-xl);
  padding: 20px; border: 1px solid rgba(194,24,91,0.1); transition: all 0.25s ease;
}
.women-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ── Pricing Plan Cards ── */
.plan-card {
  background: white; border-radius: var(--radius-2xl); padding: 32px 24px;
  box-shadow: var(--shadow-card); border: 2px solid transparent; transition: all 0.4s ease;
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); border-color: var(--gold); }
.plan-card.featured {
  background: var(--grad-hero); border-color: var(--gold);
  box-shadow: 0 4px 20px rgba(201,168,76,0.3), var(--shadow-xl);
  overflow: hidden; position: relative;
}
.plan-card.featured::before {
  content: 'Most Popular'; position: absolute; top: 16px; right: -28px;
  background: var(--grad-gold); color: var(--navy); font-size: 0.7rem; font-weight: 800;
  padding: 4px 32px; transform: rotate(35deg); width: 120px; text-align: center;
}

/* ── Plan Select Cards (seller-add-listing Step 0) ── */
.plan-select-card {
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  cursor: pointer;
  transition: all 0.2s ease;
  list-style: none;
}
.plan-select-card:hover {
  border-color: var(--sky);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(79,156,249,0.15);
}
.plan-select-card.selected {
  border-color: var(--navy);
  background: linear-gradient(135deg, rgba(10,15,44,0.04), rgba(10,15,44,0.08));
  box-shadow: 0 6px 24px rgba(10,15,44,0.12);
}
.plan-select-card[data-plan="premium"].selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(201,168,76,0.10), rgba(201,168,76,0.18));
  box-shadow: 0 6px 24px rgba(201,168,76,0.25);
}

/* ── Amenity Grid Detail ── */
.amenity-grid-detail {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.amenity-item-detail {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--gray-50); border-radius: var(--radius-md); font-size: 0.875rem;
  color: var(--gray-700); border: 1px solid var(--gray-100); transition: all 0.15s ease;
}
.amenity-item-detail:hover { background: var(--sky-pale); border-color: var(--sky-light); color: var(--sky); }

/* ── Rating Breakdown Bars ── */
.rating-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rating-bar-label { font-size: 0.75rem; color: var(--gray-500); width: 72px; }
.rating-bar-track { flex: 1; height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.rating-bar-fill {
  height: 100%; border-radius: 3px; background: var(--grad-gold);
  transition: width 1.5s cubic-bezier(0.16,1,0.3,1);
}

/* ── Onboarding Step Bar ── */
.onboard-bar { display: flex; align-items: center; margin-bottom: 32px; }
.onboard-step { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.onboard-step-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--gray-100);
  color: var(--gray-400); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem; border: 2px solid var(--gray-200);
  position: relative; z-index: 1; transition: all 0.25s;
}
.onboard-step.active .onboard-step-num { background: var(--navy); color: white; border-color: var(--navy); }
.onboard-step.done   .onboard-step-num { background: var(--green); color: white; border-color: var(--green); }
.onboard-step-line {
  flex: 1; height: 2px; background: var(--gray-200); margin: 0 4px 18px; transition: background 0.3s;
}
.onboard-step-line.done { background: var(--green); }
.onboard-step-label { font-size: 11px; font-weight: 600; color: var(--gray-400); }
.onboard-step.active .onboard-step-label { color: var(--navy); }
.onboard-pane { display: none; animation: fadeIn 0.3s ease; }
.onboard-pane.active { display: block; }

/* ── Verified Badge on PG Cards ── */
.pg-card-verified {
  position: absolute; bottom: 10px; left: 10px; background: var(--green);
  color: white; font-size: 0.68rem; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; letter-spacing: 0.02em;
}

/* ── Card Hover Shimmer ── */
.pg-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%);
  transform: translateX(-100%); pointer-events: none; z-index: 1;
}
.pg-card:hover::after { transform: translateX(100%); transition: transform 0.6s ease; }

/* ── Women Mode Toggle Button ── */
.women-mode-toggle {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: linear-gradient(135deg, rgba(194,24,91,0.08), rgba(156,39,176,0.08));
  border: 1.5px solid rgba(194,24,91,0.2); border-radius: 999px; cursor: pointer;
  transition: all 0.2s ease; white-space: nowrap;
}
.women-mode-toggle:hover {
  background: linear-gradient(135deg, rgba(194,24,91,0.14), rgba(156,39,176,0.14));
}

/* ── Sort Pills ── */
.sort-pill {
  padding: 5px 14px; border-radius: 999px; border: 1.5px solid var(--gray-200);
  background: white; font-size: 0.8rem; font-weight: 600; color: var(--gray-500);
  cursor: pointer; transition: all 0.15s;
}
.sort-pill.active { background: var(--navy); color: white; border-color: var(--navy); }

/* ── Mobile extras ── */
@media (max-width: 768px) {
  .wa-float { bottom: 74px; right: 16px; width: 46px; height: 46px; }
  body { padding-bottom: 70px; }
}

/* ═══════════════════════════════════════════════════
   WOMEN MODE — Full Theme Transformation
═══════════════════════════════════════════════════ */
body.women-mode {
  --theme-pink:    #c2185b;
  --theme-pink-dk: #880e4f;
  --theme-pink-lt: #fce4ec;
  --theme-lav:     #f3e5f5;
}

body.women-mode .navbar {
  background: rgba(252,228,236,0.96) !important;
  border-bottom: 2px solid rgba(194,24,91,0.25) !important;
  transition: background 0.4s ease, border-color 0.4s ease;
}

body.women-mode .navbar-brand { color: #880e4f !important; }
body.women-mode .nav-link { color: #880e4f !important; }
body.women-mode .nav-link:hover,
body.women-mode .nav-link.active {
  background: rgba(194,24,91,0.1) !important;
  color: #c2185b !important;
}

body.women-mode .hero {
  background: linear-gradient(135deg, #880e4f 0%, #c2185b 45%, #ad1457 100%) !important;
}

body.women-mode .trust-bar {
  background: #fce4ec !important;
  border-bottom: 1px solid rgba(194,24,91,0.15) !important;
}
body.women-mode .trust-item { color: #880e4f !important; }
body.women-mode .trust-item strong { color: #4a148c !important; }

body.women-mode section {
  background-color: #fdf2f8 !important;
  transition: background-color 0.4s ease;
}
body.women-mode .section-title { color: #4a148c !important; }
body.women-mode .section-subtitle { color: #880e4f !important; }

body.women-mode .btn-primary {
  background: linear-gradient(135deg, #c2185b, #880e4f) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px rgba(194,24,91,0.4) !important;
}
body.women-mode .btn-navy {
  background: #880e4f !important;
  color: white !important;
}
body.women-mode .btn-outline {
  border-color: rgba(194,24,91,0.4) !important;
  color: #c2185b !important;
}
body.women-mode .btn-outline:hover {
  background: #c2185b !important;
  color: white !important;
}

body.women-mode .pg-card {
  border: 1.5px solid rgba(194,24,91,0.15) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
body.women-mode .pg-card:hover { border-color: rgba(194,24,91,0.35) !important; }
body.women-mode .pg-card-badge {
  background: linear-gradient(135deg,#e91e63,#c2185b) !important;
  color: white !important;
}
body.women-mode .tag {
  background: #fce4ec !important;
  color: #c2185b !important;
}
body.women-mode .plan-card { border-color: rgba(194,24,91,0.2) !important; }

body.women-mode .footer {
  background: linear-gradient(135deg,#880e4f,#4a0026) !important;
}

/* Toggle active state */
body.women-mode .women-mode-toggle {
  background: linear-gradient(135deg,#c2185b,#880e4f) !important;
  border-color: transparent !important;
}

/* Women Safety Banner */
#womenSafetyBanner {
  display: none;
  position: fixed;
  top: var(--navbar-h);
  left: 0; right: 0;
  background: linear-gradient(135deg,#c2185b,#880e4f);
  color: white;
  text-align: center;
  padding: 9px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 998;
  animation: wsBannerIn 0.4s ease;
}
body.women-mode #womenSafetyBanner { display: block; }
body.women-mode { --banner-h: 38px; }
body.women-mode main,
body.women-mode section:first-of-type { scroll-margin-top: calc(40px + var(--banner-h, 0px)); }

@keyframes wsBannerIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Emergency Button */
#emergencyBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 20px;
  z-index: 1001;
  background: linear-gradient(135deg,#d32f2f,#b71c1c);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 11px 18px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(211,47,47,0.5);
  align-items: center;
  gap: 7px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.women-mode #emergencyBtn { display: flex; }
#emergencyBtn:hover { transform: scale(1.05); box-shadow: 0 8px 32px rgba(211,47,47,0.65); }

/* Mobile Women Mode Bar */
#womenModeMobileBar {
  display: none;
  position: fixed;
  bottom: 0px; left: 0; right: 0;
  z-index: 900;
  background: linear-gradient(135deg,#fce4ec,#f8bbd0);
  border-top: 2px solid #f48fb1;
  padding: 7px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #880e4f;
  text-align: center;
}

/* waPulse animation */
@keyframes waPulse {
  0%,100% { transform: scale(1); opacity:1; }
  50% { transform: scale(1.3); opacity:0.7; }
}

/* ═══════════════════════════════════════════════════
   PLAN CARDS — Owner listing plans
═══════════════════════════════════════════════════ */
.plan-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: var(--sp-8) var(--sp-6);
  box-shadow: var(--shadow-card);
  border: 2px solid var(--gray-100);
  transition: all var(--dur-base) var(--ease-out);
  position: relative;
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.plan-card.featured {
  background: var(--grad-navy);
  border-color: transparent;
}

/* Plan select cards in listing form */
.plan-select-card {
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  cursor: pointer;
  transition: all 0.2s ease;
}
.plan-select-card:hover {
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.plan-select-card.selected {
  border-color: var(--navy);
  background: rgba(10,15,44,0.04);
}

/* ═══════════════════════════════════════════════════
   AI QUIZ OPTION BUTTONS
═══════════════════════════════════════════════════ */
.quiz-option {
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1rem;
  background: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  width: 100%;
  font-family: var(--font-body);
}
.quiz-option:hover {
  border-color: var(--sky);
  background: var(--sky-pale);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.quiz-option.selected {
  border-color: var(--navy);
  background: rgba(10,15,44,0.05);
}

/* ═══════════════════════════════════════════════════
   SPECIAL PARTNER CARDS
═══════════════════════════════════════════════════ */
.special-partner-card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.special-partner-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold) !important;
  box-shadow: 0 12px 40px rgba(201,168,76,0.25) !important;
}

/* ═══════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sidebar-toggle { display: flex; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .dash-main { margin-left: 0 !important; }
}

@media (max-width: 768px) {
  /* Container */
  .container { padding: 0 1rem; }
  .section { padding: 2.5rem 0; }
  .section-sm { padding: 1.5rem 0; }

  /* Navbar */
  .navbar-nav { display: none !important; }
  .navbar-actions .btn { display: none; }
  .navbar-actions .women-mode-toggle { display: flex; }
  .hamburger { display: flex !important; }
  .bottom-nav { display: flex !important; }

  /* Hero */
  .hero-visual { display: none !important; }
  .hero-float-card { display: none !important; }
  .hero-content { max-width: 100%; text-align: center; }
  .hero-title { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }
  .hero-search-row {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
  }
  .hero-search-btn { width: 100%; justify-content: center; }
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .hero-search-tabs { flex-wrap: wrap; }

  /* Section grids — force single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Featured grid */
  .listings-grid { grid-template-columns: 1fr !important; }

  /* Cities grid */
  .cities-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cities-grid .city-card:first-child { grid-column: span 1 !important; }

  /* Amenity showcase */
  .amenity-showcase { grid-template-columns: repeat(2, 1fr) !important; }

  /* Plan cards */
  #planSelector { grid-template-columns: 1fr !important; }

  /* CTA Banner */
  .cta-grid { grid-template-columns: 1fr !important; text-align: center; }
  .cta-grid > div:last-child { display: none; }

  /* Women section */
  .women-section [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }

  /* Testimonials */
  [style*="grid-template-columns:repeat(3,1fr)"] .testimonial-card {
    min-width: 0;
  }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-grid > div + div { margin-top: 1.5rem; }

  /* App section */
  [style*="grid-template-columns:1fr 1fr"] .app-btn { display: inline-flex; }

  /* Auth pages */
  .auth-page { grid-template-columns: 1fr !important; }
  .auth-visual { display: none; }
  .auth-form-side { padding: 2rem 1.25rem; }

  /* Dashboard */
  .dash-layout { flex-direction: column; }
  .sidebar { position: fixed; z-index: 300; }
  .dash-main { margin-left: 0; }
  .dash-content { padding: 1rem; }
  .topbar { padding: 0 1rem; }

  /* Add listing form */
  .main-grid { grid-template-columns: 1fr !important; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr !important; }
  .form-card { padding: 1.25rem; }

  /* Search layout */
  .search-layout { flex-direction: column !important; }
  .filter-sidebar {
    width: 100% !important;
    position: static !important;
    top: auto !important;
  }

  /* Tables */
  .table-wrapper { overflow-x: auto; }
  .table th, .table td { padding: 0.75rem 1rem; white-space: nowrap; }

  /* Topbar */
  .topbar-title { font-size: 1rem; }

  /* Women Safety Banner pushes content down */
  body.women-mode .hero { padding-top: calc(var(--navbar-h) + 40px); }

  /* Emergency button position */
  #emergencyBtn { bottom: 80px; right: 12px; font-size: 0.75rem; padding: 9px 14px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.75rem !important; }
  .section-title { font-size: 1.5rem !important; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .amenity-showcase { grid-template-columns: repeat(2, 1fr) !important; }
  .cities-grid { grid-template-columns: 1fr !important; }
  .quiz-option { padding: 1rem 0.75rem; }
  .plan-card { padding: 1.5rem 1.25rem; }
  .toast { min-width: auto; max-width: calc(100vw - 2rem); }
  .toast-container { left: 1rem; right: 1rem; bottom: 80px; }
}

/* ═══════════════════════════════════════════════════
   POPULAR LOCATION CHIPS
═══════════════════════════════════════════════════ */
.popular-locations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-4);
}

.popular-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 2px;
  flex-shrink: 0;
}

.location-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  background: rgba(79,156,249,0.10);
  border: 1px solid rgba(79,156,249,0.25);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--sky);
  text-decoration: none;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.location-chip:hover {
  background: var(--sky);
  color: white;
  border-color: var(--sky);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════
   HERO SEARCH — MOBILE STACK
═══════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .hero-search-row {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }
  .hero-search-btn { width: 100%; justify-content: center; }
  .hero-search .form-group { width: 100%; }
  .hero-search select { min-width: 100% !important; width: 100%; }
  .hero-search-tabs { flex-wrap: wrap; gap: 6px; }
  .popular-locations { gap: 5px; }
}

/* ═══════════════════════════════════════════════════
   WAYFINDER CARDS — Mobile
═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .wayfinder-grid {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4) !important;
  }
  .wayfinder-card { padding: var(--sp-6) !important; }
}

/* ═══════════════════════════════════════════════════
   COMPREHENSIVE MOBILE OVERHAUL
   All sections fully responsive
═══════════════════════════════════════════════════ */

/* — Navbar — */
@media (max-width: 768px) {
  .navbar-nav { display: none !important; }
  .navbar-actions .btn:not(.women-mode-toggle) { display: none !important; }
  .hamburger { display: flex !important; }
  .bottom-nav { display: flex !important; }
  .navbar-inner { padding: 0 1rem; }
  .navbar-brand { font-size: 1rem; }

  /* Women mode toggle stays always visible */
  .women-mode-toggle {
    padding: 6px 10px;
    font-size: 0.7rem;
  }
  #womenModeLabel { display: none; }
}

/* — Hero — */
@media (max-width: 768px) {
  .hero-visual,
  .hero-float-card { display: none !important; }

  .hero-content {
    max-width: 100%;
    text-align: center;
  }
  .hero-title { font-size: clamp(1.75rem, 7vw, 2.6rem) !important; }
  .hero-subtitle { font-size: 0.95rem; margin-bottom: 1.5rem; }
  .hero-eyebrow { font-size: 0.72rem; }

  .hero {
    padding: var(--navbar-h) 0 2rem;
    min-height: auto;
  }
  .hero > .container {
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
  }

  /* Search box full-width stack */
  .hero-search {
    padding: 1rem;
    border-radius: var(--radius-lg);
  }
  .hero-search-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
  }
  .hero-search-row > * { width: 100% !important; min-width: 0 !important; }
  .hero-search-btn { width: 100% !important; margin-top: 0.25rem; }

  /* Stats */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .hero-stat-value { font-size: var(--text-xl) !important; }
  .hero-stat-label { font-size: 0.68rem; }
}

/* — Trust bar — */
@media (max-width: 768px) {
  .trust-bar-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1rem;
  }
  .trust-bar-inner > [style*="width:1px"] { display: none; }
  .trust-item { font-size: 0.72rem; }
}

/* — General sections — */
@media (max-width: 768px) {
  .section { padding: 2.5rem 0; }
  .section-sm { padding: 1.5rem 0; }
  .container { padding: 0 1rem; }
  .section-title { font-size: 1.4rem !important; }
  .section-subtitle { font-size: 0.9rem; }
  .section-label { font-size: 0.68rem; }

  /* All 2-col grids → 1-col */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* All 3-col grids → 1-col */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* 4-col → 2-col */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* — Featured listings grid — */
@media (max-width: 768px) {
  .listings-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 480px) and (max-width: 768px) {
  .listings-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* — Cities grid — */
@media (max-width: 768px) {
  .cities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .cities-grid .city-card:first-child { grid-column: span 1 !important; }
}
@media (max-width: 420px) {
  .cities-grid { grid-template-columns: 1fr !important; }
}

/* — Amenity showcase — */
@media (max-width: 768px) {
  .amenity-showcase { grid-template-columns: repeat(2, 1fr) !important; }
}

/* — Plan cards — */
@media (max-width: 768px) {
  #planSelector { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(3,1fr)"].plan-cards-grid {
    grid-template-columns: 1fr !important;
  }
}

/* — Pricing section 3-col → stack — */
@media (max-width: 768px) {
  .plan-card {
    padding: 1.5rem !important;
  }
}

/* — Special partners grid — */
@media (max-width: 768px) {
  #specialPartners [style*="grid-template-columns:repeat(3,1fr)"],
  #specialPartners [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* — Meal plan section — */
@media (max-width: 768px) {
  .meal-plan-grid { grid-template-columns: 1fr !important; flex-direction: column; }
}

/* — Video section — */
@media (max-width: 768px) {
  #videoWrapper { aspect-ratio: 16/9; }
  [style*="bottom:-16px;left:-16px"] { display: none; }
}

/* — Mannshaktii section — */
@media (max-width: 768px) {
  .mannshaktii-actions { flex-direction: column !important; gap: 0.75rem !important; }
  .mannshaktii-actions .btn { width: 100%; text-align: center; }
}

/* — Testimonials — */
@media (max-width: 768px) {
  .testimonial-card { padding: 1.25rem; }
}

/* — How it works steps — */
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .step-connector { display: none; }
}

/* — CTA banner — */
@media (max-width: 768px) {
  .cta-grid {
    grid-template-columns: 1fr !important;
    text-align: center;
  }
  .cta-grid .btn { width: 100%; justify-content: center; }
  .cta-visual { display: none !important; }
}

/* — App download section — */
@media (max-width: 768px) {
  .app-phones-visual { display: none; }
  .app-btns { flex-direction: column; }
  .app-btn { width: 100%; justify-content: flex-start; }
}

/* — Footer — */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .footer { padding: 3rem 0 1.5rem; }
  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}

/* — Auth pages — */
@media (max-width: 768px) {
  .auth-page { grid-template-columns: 1fr !important; }
  .auth-visual { display: none; }
  .auth-form-side { padding: 1.5rem 1rem; }
  .auth-form-box { max-width: 100%; }
}

/* — Dashboard — */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 300;
  }
  .sidebar.open { transform: translateX(0); }
  .dash-main { margin-left: 0 !important; }
}
@media (max-width: 768px) {
  .dash-content { padding: 1rem; }
  .topbar { padding: 0 1rem; }
  .topbar-title { font-size: 1rem; }
  .form-grid-2,
  .form-grid-3 { grid-template-columns: 1fr !important; }
  .form-card { padding: 1.25rem; }
  .main-grid { grid-template-columns: 1fr !important; }

  /* Search/filter layout */
  .search-layout { flex-direction: column !important; }
  .filter-sidebar {
    width: 100% !important;
    position: static !important;
    top: auto !important;
    border-radius: var(--radius-lg);
  }

  /* Stats grid on dashboard */
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* — Tables — */
@media (max-width: 768px) {
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 600px; }
  .table th, .table td { padding: 0.6rem 0.75rem; white-space: nowrap; font-size: 0.75rem; }
}

/* — AI Quiz on mobile — */
@media (max-width: 768px) {
  #aiQuiz .quiz-step > [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important; /* keep 2-col for quiz options */
  }
  #aiQuiz [style*="grid-template-columns:1fr 1fr"] > button {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.8rem;
  }
  #aiQuiz [style*="grid-template-columns:1fr 1fr"] > button [style*="font-size:2rem"] {
    font-size: 1.4rem !important;
  }
}

/* — Toast & WhatsApp float — */
@media (max-width: 768px) {
  .toast-container {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 75px;
  }
  .toast {
    min-width: 0;
    width: 100%;
    font-size: 0.8rem;
  }
  .wa-float {
    bottom: 72px !important;
    right: 14px !important;
    width: 44px !important;
    height: 44px !important;
  }
  #emergencyBtn {
    bottom: 76px !important;
    right: 14px !important;
    font-size: 0.73rem !important;
    padding: 8px 12px !important;
  }
  body { padding-bottom: 64px; }
}

/* — Women Safety Banner on mobile — */
@media (max-width: 768px) {
  #womenSafetyBanner {
    font-size: 0.7rem;
    padding: 7px 10px;
  }
  body.women-mode .hero { padding-top: calc(var(--navbar-h) + 36px); }
}

/* — Modals on mobile — */
@media (max-width: 768px) {
  .modal-overlay { padding: var(--sp-3); align-items: flex-end; }
  .modal {
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    max-height: 85vh;
  }
}

/* — Scroll top button — */
@media (max-width: 768px) {
  .scroll-top { bottom: 72px; right: 14px; width: 38px; height: 38px; font-size: 0.9rem; }
}

/* — 480px extreme small — */
@media (max-width: 480px) {
  .section-title { font-size: 1.3rem !important; }
  .hero-title { font-size: 1.65rem !important; }
  .plan-card { padding: 1.25rem !important; }
  .cities-grid { grid-template-columns: 1fr !important; }
  .hero-stats { grid-template-columns: repeat(2,1fr) !important; gap: 0.6rem !important; }
  .popular-locations { gap: 4px; }
  .location-chip { font-size: 0.65rem; padding: 3px 8px; }
  .quiz-option { padding: 0.75rem 0.5rem; }
}






/* ====================================================================
   REALSTAY — COMPLETE PROFESSIONAL REFINEMENTS v4
   Clean single block: Women Mode + Mobile + Desktop polish
   NO global * overrides. NO !important abuse. Scoped media queries.
   ==================================================================== */

/* ------------------------------------------------------------------
   SECTION 1 — BASE SAFETY (no global overrides)
   ------------------------------------------------------------------ */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}
img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
   SECTION 2 — WOMEN MODE PROFESSIONAL REDESIGN
   Desktop only (≥1024px) — premium rose theme, no garish colours
   ------------------------------------------------------------------ */

/* CSS custom properties for Women Mode palette */
body.women-mode {
  --wm-deep:    #6b0d2a;
  --wm-dark:    #8c1135;
  --wm-mid:     #b01248;
  --wm-soft:    #d4365e;
  --wm-pale:    #fdedf2;
  --wm-palest:  #fff5f8;
  --wm-border:  rgba(176, 18, 72, 0.14);
  --wm-shadow:  rgba(176, 18, 72, 0.12);
}

/* Women Mode: reset the blunt section override that makes everything pink */
body.women-mode section {
  background-color: transparent;
  transition: none;
}

@media (min-width: 1024px) {

  /* — Navbar — clean warm-white, professional rose accent */
  body.women-mode .navbar {
    background: rgba(255, 249, 251, 0.97) !important;
    border-bottom: 1.5px solid var(--wm-border) !important;
    box-shadow: 0 2px 20px rgba(176, 18, 72, 0.08) !important;
    backdrop-filter: blur(20px) !important;
  }
  body.women-mode .navbar-brand {
    color: var(--wm-deep) !important;
  }
  body.women-mode .navbar-brand-icon {
    background: linear-gradient(135deg, var(--wm-mid), var(--wm-dark)) !important;
  }
  body.women-mode .nav-link {
    color: #5c1a2a !important;
  }
  body.women-mode .nav-link:hover {
    background: rgba(176, 18, 72, 0.08) !important;
    color: var(--wm-mid) !important;
  }
  body.women-mode .nav-link.active {
    background: rgba(176, 18, 72, 0.1) !important;
    color: var(--wm-mid) !important;
  }

  /* — Women Mode toggle button — active, polished */
  body.women-mode .women-mode-toggle {
    background: linear-gradient(135deg, var(--wm-mid), var(--wm-dark)) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 2px 12px rgba(176, 18, 72, 0.3) !important;
  }

  /* — Hero — rich, deep rose gradient (not flat candy pink) */
  body.women-mode .hero {
    background: linear-gradient(140deg, var(--wm-deep) 0%, var(--wm-dark) 35%, var(--wm-mid) 70%, var(--wm-dark) 100%) !important;
  }
  body.women-mode .hero::before {
    background:
      radial-gradient(ellipse 60% 50% at 80% 50%, rgba(255, 200, 225, 0.12) 0%, transparent 70%),
      radial-gradient(ellipse 40% 40% at 15% 75%, rgba(120, 0, 80, 0.15) 0%, transparent 60%) !important;
  }

  /* — Trust bar */
  body.women-mode .trust-bar {
    background: #fff0f5 !important;
    border-bottom: 1px solid var(--wm-border) !important;
  }
  body.women-mode .trust-item       { color: var(--wm-deep) !important; }
  body.women-mode .trust-item strong { color: var(--wm-dark) !important; }

  /* — Section backgrounds: alternate white / pale rose, not uniform pink */
  body.women-mode section { background-color: transparent !important; }
  body.women-mode section:nth-child(even) { background-color: var(--wm-palest) !important; }
  body.women-mode section:nth-child(odd)  { background-color: #ffffff !important; }

  /* — Typography */
  body.women-mode .section-label {
    background: rgba(176, 18, 72, 0.08) !important;
    color: var(--wm-mid) !important;
    border: 1px solid rgba(176, 18, 72, 0.18) !important;
  }
  body.women-mode .section-title     { color: var(--wm-dark) !important; }
  body.women-mode .section-subtitle  { color: #6b3040 !important; }

  /* — Buttons */
  body.women-mode .btn-primary {
    background: linear-gradient(135deg, var(--wm-mid), var(--wm-dark)) !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(176, 18, 72, 0.3) !important;
  }
  body.women-mode .btn-primary:hover {
    box-shadow: 0 8px 28px rgba(176, 18, 72, 0.4) !important;
  }
  body.women-mode .btn-navy {
    background: var(--wm-dark) !important;
    color: white !important;
  }
  body.women-mode .btn-outline {
    border-color: rgba(176, 18, 72, 0.35) !important;
    color: var(--wm-mid) !important;
  }
  body.women-mode .btn-outline:hover {
    background: var(--wm-mid) !important;
    color: white !important;
    border-color: var(--wm-mid) !important;
  }

  /* — PG Cards */
  body.women-mode .pg-card {
    border: 1.5px solid var(--wm-border) !important;
    box-shadow: 0 2px 16px var(--wm-shadow) !important;
  }
  body.women-mode .pg-card:hover {
    border-color: rgba(176, 18, 72, 0.3) !important;
    box-shadow: 0 12px 40px rgba(176, 18, 72, 0.14) !important;
  }
  body.women-mode .pg-card-badge {
    background: linear-gradient(135deg, var(--wm-soft), var(--wm-mid)) !important;
    color: white !important;
  }
  body.women-mode .tag {
    background: var(--wm-pale) !important;
    color: var(--wm-mid) !important;
  }

  /* — Form controls */
  body.women-mode .form-control:focus {
    border-color: var(--wm-mid) !important;
    box-shadow: 0 0 0 3px rgba(176, 18, 72, 0.1) !important;
  }
  body.women-mode .hero-search-tab.active {
    background: var(--wm-dark) !important;
  }
  body.women-mode .hero-search {
    box-shadow: 0 20px 60px rgba(107, 13, 42, 0.35) !important;
  }

  /* — Plan cards */
  body.women-mode .plan-card {
    border-color: var(--wm-border) !important;
  }
  body.women-mode .plan-card:hover {
    border-color: var(--wm-mid) !important;
  }
  body.women-mode .plan-card.featured {
    background: linear-gradient(135deg, var(--wm-deep), var(--wm-dark)) !important;
    border-color: transparent !important;
  }

  /* — Women section card */
  body.women-mode .women-section {
    background: linear-gradient(135deg, #fff0f5, #fce8ef) !important;
    border-color: rgba(176, 18, 72, 0.15) !important;
  }
  body.women-mode .women-feature-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(176, 18, 72, 0.1) !important;
  }
  body.women-mode .women-feature-card:hover {
    border-color: rgba(176, 18, 72, 0.25) !important;
    box-shadow: 0 8px 28px rgba(176, 18, 72, 0.1) !important;
  }

  /* — Safety banner desktop */
  body.women-mode #womenSafetyBanner {
    background: linear-gradient(135deg, var(--wm-mid), var(--wm-dark)) !important;
    box-shadow: 0 2px 12px rgba(176, 18, 72, 0.2) !important;
  }

  /* — Footer */
  body.women-mode .footer {
    background: linear-gradient(160deg, var(--wm-deep) 0%, #4a0020 100%) !important;
  }

  /* — Amenity chips */
  body.women-mode .amenity-chip.active {
    background: var(--wm-mid) !important;
    border-color: var(--wm-mid) !important;
  }
  body.women-mode .amenity-chip:hover {
    border-color: var(--wm-mid) !important;
    color: var(--wm-mid) !important;
    background: var(--wm-pale) !important;
  }

  /* — Pagination */
  body.women-mode .page-btn.active {
    background: var(--wm-mid) !important;
    border-color: var(--wm-mid) !important;
  }

  /* — Testimonial quote marks */
  body.women-mode .testimonial-quote { color: var(--wm-mid) !important; }

  /* — Hero eyebrow */
  body.women-mode .hero-eyebrow {
    background: rgba(255, 200, 220, 0.16) !important;
    border-color: rgba(255, 200, 220, 0.3) !important;
    color: #ffd0e4 !important;
  }

  /* — Scroll top */
  body.women-mode .scroll-top { background: var(--wm-mid) !important; }

  /* — Sort pills */
  body.women-mode .sort-pill.active {
    background: var(--wm-mid) !important;
    border-color: var(--wm-mid) !important;
  }

  /* — Stat card accent */
  body.women-mode .stat-card.gold::before { background: var(--wm-mid) !important; }

  /* — Hero stat label */
  body.women-mode .hero-stat-label { color: rgba(255, 205, 225, 0.8) !important; }

  /* — Women Mode label text */
  body.women-mode #womenModeLabel { color: white !important; }
  body.women-mode #womenModeDot   { background: white !important; }

} /* end @media (min-width: 1024px) — Women Mode Desktop */


/* Women Mode mobile — minimal, functional, no heavy tinting */
@media (max-width: 1023px) {
  body.women-mode .navbar {
    background: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1.5px solid rgba(176, 18, 72, 0.2) !important;
  }
  body.women-mode .navbar-brand { color: var(--wm-deep) !important; }
  body.women-mode .navbar-brand-icon {
    background: linear-gradient(135deg, var(--wm-mid), var(--wm-dark)) !important;
  }
  /* Keep section backgrounds clean on mobile */
  body.women-mode section { background-color: transparent !important; }
  body.women-mode .section-title { color: var(--wm-dark) !important; }
  body.women-mode .btn-primary {
    background: linear-gradient(135deg, var(--wm-mid), var(--wm-dark)) !important;
    color: white !important;
  }
  body.women-mode .hero {
    background: linear-gradient(140deg, var(--wm-deep), var(--wm-dark), var(--wm-mid)) !important;
  }
}


/* ------------------------------------------------------------------
   SECTION 3 — HAMBURGER ANIMATION (CSS class-based)
   ------------------------------------------------------------------ */
.hamburger span {
  transform-origin: center;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------------------------
   SECTION 4 — DESKTOP POLISH (≥1024px)
   Spacing, typography, alignment improvements
   ------------------------------------------------------------------ */
@media (min-width: 1024px) {
  /* Navbar spacing */
  .navbar-inner { padding: 0 var(--sp-6); }
  .nav-link {
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.875rem;
    letter-spacing: 0.01em;
  }
  .navbar-actions { gap: var(--sp-2); }

  /* Section typography */
  .section-title { letter-spacing: -0.02em; line-height: 1.15; }
  .section-subtitle { font-size: 1rem; line-height: 1.7; max-width: 540px; }

  /* Hero */
  .hero-content { padding-right: var(--sp-8); }
  .hero-title { letter-spacing: -0.02em; }
  .hero-subtitle { font-size: 1.05rem; line-height: 1.75; }

  /* Card body */
  .pg-card-title { font-size: 0.95rem; }

  /* Footer */
  .footer-grid { gap: var(--sp-12); }

  /* Form cards */
  .form-card { padding: var(--sp-8); }
}


/* ------------------------------------------------------------------
   SECTION 5 — TABLET (768px–1023px)
   ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1023px) {
  .listings-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .cities-grid   { grid-template-columns: repeat(3, 1fr) !important; }
  .cities-grid .city-card:first-child { grid-column: span 2 !important; }
  .amenity-showcase { grid-template-columns: repeat(4, 1fr) !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: var(--sp-8) !important; }
  .hero-search-row { grid-template-columns: 1fr 1fr !important; }
  .hero-search-btn { grid-column: span 2 !important; width: 100% !important; }
  /* Dashboard sidebar collapses on tablet too */
  .sidebar { transform: translateX(-100%) !important; }
  .sidebar.open { transform: translateX(0) !important; }
  .dash-main { margin-left: 0 !important; }
  /* Auth */
  .auth-page   { grid-template-columns: 1fr !important; }
  .auth-visual { display: none !important; }
}


/* ------------------------------------------------------------------
   SECTION 6 — MOBILE (≤768px)
   Complete responsive fix. No global * overrides.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

  /* Body */
  body { padding-bottom: 64px; }

  /* Container */
  .container {
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
  }

  /* Sections */
  .section    { padding: 2.5rem 0; }
  .section-lg { padding: 3rem 0; }
  .section-sm { padding: 1.5rem 0; }
  .section-title   { font-size: 1.5rem; line-height: 1.25; }
  .section-subtitle { font-size: 0.9rem; line-height: 1.65; }

  /* ── Navbar ── */
  .navbar { height: 60px; }
  .navbar-inner {
    height: 60px;
    padding: 0 16px;
    gap: 8px;
  }
  .navbar-brand { font-size: 1rem; }
  .navbar-brand-icon {
    width: 30px;
    height: 30px;
    font-size: 0.85rem;
    flex-shrink: 0;
  }
  .navbar-nav { display: none !important; }
  .navbar-actions .btn:not(.women-mode-toggle) { display: none !important; }
  .navbar-actions .women-mode-toggle {
    display: flex !important;
    padding: 5px 10px !important;
    font-size: 0.7rem !important;
  }
  #womenModeLabel { display: none !important; }
  .hamburger { display: flex !important; }
  .bottom-nav { display: block !important; }

  /* ── Mobile menu ── */
  .mobile-menu {
    top: 60px;
    padding: 12px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .mobile-menu .nav-link {
    display: flex !important;
    align-items: center;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 0.95rem;
    border-radius: 8px;
    gap: 8px;
  }
  .mobile-menu .btn-full {
    margin-top: 10px;
    min-height: 48px;
    font-size: 0.95rem;
  }

  /* ── Bottom nav ── */
  .bottom-nav {
    height: 60px;
    padding: 4px 8px;
  }
  .bottom-nav-inner { padding: 0; }
  .bottom-nav-item {
    min-height: 44px;
    font-size: 9px;
    gap: 2px;
    padding: 4px 6px;
    flex: 1;
  }
  .bottom-nav-item .icon { font-size: 1.2rem; }

  /* ── Hero ── */
  .hero {
    padding-top: 60px;
    min-height: auto;
  }
  .hero > .container {
    padding-top: 28px;
    padding-bottom: 40px;
  }
  .hero-visual    { display: none !important; }
  .hero-float-card { display: none !important; }
  .hero-content {
    text-align: center;
    max-width: 100%;
    padding-right: 0;
  }
  .hero-eyebrow {
    font-size: 0.7rem;
    padding: 5px 12px;
    margin-bottom: 16px;
  }
  .hero-title {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
    line-height: 1.15;
    margin-bottom: 14px;
  }
  .hero-subtitle {
    font-size: 0.9rem;
    line-height: 1.65;
    margin-bottom: 20px;
  }

  /* Hero search box */
  .hero-search {
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 20px;
  }
  .hero-search-tabs {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
  }
  .hero-search-tab {
    font-size: 0.78rem;
    padding: 7px 12px;
    min-height: 34px;
  }
  .hero-search-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    grid-template-columns: unset !important;
  }
  .hero-search-row > * {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
  /* Override inline min-width on selects */
  .hero-search-row select,
  .hero-search-row input {
    min-width: 0 !important;
    width: 100% !important;
  }
  .hero-search-row .form-control,
  .hero-search-row .form-control-lg {
    height: 48px;
    font-size: 16px; /* prevents iOS zoom */
  }
  .hero-search-btn {
    width: 100% !important;
    height: 50px !important;
    justify-content: center !important;
    font-size: 1rem !important;
  }

  /* Hero stats */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    flex-direction: unset !important;
    margin-top: 12px;
  }
  .hero-stat-value { font-size: 1.35rem; line-height: 1.1; }
  .hero-stat-label { font-size: 0.7rem; }

  /* Popular chips */
  .popular-locations {
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
  }
  .location-chip {
    font-size: 0.68rem;
    padding: 4px 9px;
  }

  /* ── Grids (class-based) ── */
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
  }
  .listings-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .cities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .cities-grid .city-card:first-child {
    grid-column: span 1 !important;
  }
  .amenity-showcase {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
  .amenity-item  { padding: 12px 6px !important; }
  .amenity-emoji { font-size: 1.4rem !important; }
  .amenity-name  { font-size: 0.66rem !important; }
  .city-card     { height: 150px !important; }

  /* ── Inline style grid overrides ── */
  /* 2-col inline grids */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 3-col inline grids */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* 4-col inline grids → 2-col */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 4-step how-it-works */
  [style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .step-connector { display: none !important; }

  /* ── PG Cards ── */
  .pg-card-image { height: 190px; }
  .pg-card-body  { padding: 12px 14px; }
  .pg-card-price { font-size: 1.2rem; }
  .pg-card-title {
    font-size: 0.9rem;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* Disable hover transforms on touch devices */
  .pg-card:hover,
  .card:hover,
  .stat-card:hover { transform: none !important; }

  /* ── Buttons ── */
  .btn    { min-height: 44px; }
  .btn-sm { min-height: 36px; padding: 6px 12px; }
  .btn-lg { min-height: 50px; padding: 13px 22px; font-size: 0.95rem; }

  /* ── CTA Banner ── */
  .cta-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 24px !important;
  }
  .cta-grid .btn   { width: 100% !important; justify-content: center !important; }
  .cta-visual      { display: none !important; }

  /* ── App section ── */
  .app-btns    { flex-direction: column !important; gap: 10px !important; }
  .app-btn     { width: 100% !important; }
  .app-phones-visual { display: none !important; }

  /* ── Women safety section ── */
  .women-section   { padding: 24px 18px !important; border-radius: 16px !important; }
  .women-feature-card { padding: 14px !important; }
  .mannshaktii-actions { flex-direction: column !important; gap: 10px !important; }
  .mannshaktii-actions .btn { width: 100% !important; }

  /* ── Forms ── */
  .form-control {
    font-size: 16px; /* prevents iOS zoom */
    min-height: 46px;
    padding: 11px 14px;
  }
  .form-control-lg {
    font-size: 16px;
    min-height: 50px;
  }
  .form-group  { margin-bottom: 16px; }
  .form-label  { font-size: 0.875rem; }
  .form-card   { padding: 18px; border-radius: 16px; }
  .form-grid-2,
  .form-grid-3 { grid-template-columns: 1fr !important; }
  .main-grid   { grid-template-columns: 1fr !important; }

  /* ── Auth pages ── */
  .auth-page   { grid-template-columns: 1fr !important; }
  .auth-visual { display: none !important; }
  .auth-form-side {
    padding: 28px 18px;
    min-height: 100vh;
    align-items: flex-start;
    padding-top: 48px;
  }
  .auth-form-box { max-width: 100%; width: 100%; }
  .auth-title  { font-size: 1.75rem; }
  .auth-logo   { margin-bottom: 20px; }
  .role-tabs   { gap: 8px; }
  .divider     { margin: 16px 0; }

  /* ── Dashboard layout ── */
  .sidebar {
    position: fixed;
    transform: translateX(-100%);
    z-index: 300;
  }
  .sidebar.open       { transform: translateX(0); }
  .dash-main          { margin-left: 0 !important; }
  .topbar             { padding: 0 16px; height: 60px; }
  .topbar-title       { font-size: 0.95rem; font-weight: 600; }
  .dash-content       { padding: 16px; }
  .sidebar-toggle     { display: flex; bottom: 76px; }

  /* Dashboard sidebar toggle top position */
  .sidebar-toggle {
    position: fixed;
    top: 11px;
    left: 16px;
    bottom: auto;
    width: 38px;
    height: 38px;
    z-index: 400;
    font-size: 1.1rem;
    border-radius: 8px;
    background: var(--navy);
    color: white;
    display: none; /* shown by JS */
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
  }
  .topbar { padding-left: 3.5rem; }

  /* ── Tables ── */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
  .table { min-width: 560px; }
  .table th,
  .table td {
    padding: 10px 14px;
    white-space: nowrap;
    font-size: 0.78rem;
  }

  /* ── Search page ── */
  .search-layout {
    grid-template-columns: 1fr !important;
    padding-top: 16px;
  }
  .filter-sidebar  { display: none !important; }
  .mobile-filter-btn { display: flex !important; }
  .search-bar-row  {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .search-bar-row select,
  .search-bar-row input {
    min-width: 0 !important;
    width: 100% !important;
  }
  .results-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }
  .pg-grid { grid-template-columns: 1fr !important; }

  /* ── Listing detail page ── */
  .detail-layout {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  .detail-sidebar  { position: static !important; }
  .gallery-main    { height: 250px !important; }
  .booking-card    { position: static !important; }
  .gallery-thumbs  { grid-template-columns: repeat(2, 1fr) !important; }
  .breadcrumb      { flex-wrap: wrap; font-size: 0.78rem; }

  /* Mobile sticky CTA */
  .mobile-cta {
    bottom: 60px !important;
    padding: 10px 14px;
    gap: 10px;
  }
  .mobile-cta .btn {
    flex: 1;
    justify-content: center;
    font-size: 0.82rem;
    min-height: 42px;
  }

  /* ── Modals ── */
  .modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }
  .modal {
    border-radius: 24px 24px 0 0;
    max-height: 90vh;
  }
  .modal-body,
  .modal-footer { padding-left: 18px; padding-right: 18px; }

  /* ── Toast ── */
  .toast-container {
    left: 12px;
    right: 12px;
    bottom: 72px;
  }
  .toast {
    min-width: 0;
    width: 100%;
    font-size: 0.82rem;
  }

  /* ── Floating elements ── */
  .wa-float {
    bottom: 72px !important;
    right: 14px !important;
    width: 46px !important;
    height: 46px !important;
  }
  #emergencyBtn {
    bottom: 76px !important;
    right: 14px !important;
    font-size: 0.72rem !important;
    padding: 8px 14px !important;
  }
  .scroll-top {
    bottom: 72px;
    right: 14px;
    width: 38px;
    height: 38px;
  }

  /* ── Footer ── */
  .footer { padding: 2.5rem 0 1rem; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .social-links { justify-content: center; }

  /* ── Pagination ── */
  .pagination { flex-wrap: wrap; gap: 6px; }
  .page-btn   { width: 36px; height: 36px; font-size: 0.8rem; }

  /* ── Women Mode safety banner ── */
  #womenSafetyBanner {
    font-size: 0.72rem;
    padding: 7px 12px;
    line-height: 1.5;
  }
  body.women-mode .hero {
    padding-top: calc(60px + 36px);
  }

  /* ── Seller inquiry chat ── */
  .inq-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .chat-panel           { display: none; }
  .chat-panel.open      { display: flex; }
  .chat-messages        { height: 200px; }

  /* ── Plan cards ── */
  .plan-card { padding: 24px 18px !important; }

  /* ── Admin stat grid ── */
  .admin-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .dash-2col   { grid-template-columns: 1fr !important; }
  .dash-3col   { grid-template-columns: 1fr !important; }
  .dash-main-side { grid-template-columns: 1fr !important; }

} /* end @media (max-width: 768px) */


/* ── 480px small screens ── */
@media (max-width: 480px) {
  .section-title    { font-size: 1.35rem; }
  .hero-title       { font-size: 1.65rem !important; }
  .amenity-showcase { grid-template-columns: repeat(2, 1fr) !important; }
  .cities-grid      { grid-template-columns: 1fr !important; }
  .city-card        { height: 130px !important; }
  .hero-stats       { gap: 10px !important; }
  .hero-stat-value  { font-size: 1.2rem !important; }
  .auth-title       { font-size: 1.5rem; }
  .plan-card        { padding: 18px 14px !important; }
  .gallery-main     { height: 220px !important; }
  .gallery-thumbs   { display: none !important; }
  .gallery-main     { border-radius: 16px !important; }
  .modal            { border-radius: 20px 20px 0 0; }
  .cta-banner       { padding: 28px 18px; border-radius: 16px; }
  .step-card        { padding: 18px 14px; }
  .table            { min-width: 480px; }
  .admin-stats      { grid-template-columns: 1fr !important; }
  .pg-grid          { grid-template-columns: 1fr !important; }
  /* Force inline 2-col grids to 1-col at 480px */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}


/* ── 360px extreme small ── */
@media (max-width: 360px) {
  .hero-title   { font-size: 1.5rem !important; }
  .section-title { font-size: 1.2rem !important; }
  .btn-lg       { font-size: 0.9rem !important; padding: 11px 18px !important; }
  .bottom-nav-item { font-size: 8px !important; }
  .hero-search-tab { font-size: 0.7rem !important; padding: 5px 9px !important; }
  .hero-search  { padding: 10px !important; }
}


/* ------------------------------------------------------------------
   SECTION 7 — FOCUS ACCESSIBILITY
   ------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}
body.women-mode :focus-visible,
body.women-mode button:focus-visible,
body.women-mode a:focus-visible {
  outline-color: #b01248;
}



/* ====================================================================
   INLINE GRID OVERRIDES — Mobile (≤768px)
   Covers every exact inline style pattern found across all pages
   ==================================================================== */
@media (max-width: 768px) {

  /* ── Multi-column inline grids → single column ── */

  /* 2-col variants */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: 260px 1fr"],
  [style*="grid-template-columns: 280px 1fr"],
  [style*="grid-template-columns: 340px 1fr"],
  [style*="grid-template-columns: 1fr 360px"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr auto"],
  [style*="grid-template-columns: 1fr auto auto auto auto"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:80px 1fr"],
  [style*="grid-template-columns:60px 1fr 40px"] {
    grid-template-columns: 1fr !important;
  }

  /* 3-col variants → 1-col */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: 2fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: 100px 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* 4-col / 5-col variants → 2-col */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 2-col inline repeat variants → 1-col */
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Specific layout exceptions ── */

  /* Keep quiz option grid 2-col (user experience) */
  #aiQuiz [style*="grid-template-columns: 1fr 1fr"],
  #aiQuiz [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Listing row card — keep small image thumb */
  .listing-row-card[style*="grid-template-columns"] {
    grid-template-columns: 80px 1fr !important;
  }

  /* Rating option grid in filters can stay 1-col */
  .filter-section [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Fix select elements with fixed min-width ── */
  select[style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* ── Fix fixed-height containers ── */
  [style*="height:460px"],
  [style*="height: 460px"],
  [style*="height:420px"],
  [style*="height: 420px"] {
    height: 260px !important;
  }

  /* ── Fix absolute positioned elements that could overflow ── */
  [style*="bottom:-24px"],
  [style*="bottom: -24px"],
  [style*="bottom:-16px"],
  [style*="bottom: -16px"] {
    display: none !important;
  }

  /* ── flex rows that need to wrap ── */
  [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }

  /* Specific non-wrapping flex rows → column */
  [style*="display:grid;grid-template-columns:1fr 300px"],
  [style*="display: grid; grid-template-columns: 1fr 300px"] {
    grid-template-columns: 1fr !important;
  }

} /* end @media (max-width: 768px) — inline grid overrides */


/* ── 480px: force 2→1 col everywhere ── */
@media (max-width: 480px) {
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Keep quiz 2-col at 480px (buttons are still usable) */
  #aiQuiz [style*="grid-template-columns: 1fr 1fr"],
  #aiQuiz [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* ============================================================
   PHASE 2 — PREMIUM NAVBAR & MOBILE MENU IMPROVEMENTS
   ============================================================ */

/* ── Enhanced Navbar Base ── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-h);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(10, 15, 44, 0.07);
  z-index: 1000;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 4px 32px rgba(10, 15, 44, 0.10), 0 1px 0 rgba(10,15,44,0.06);
  border-bottom-color: rgba(10, 15, 44, 0.05);
}

/* ── Brand Enhancement ── */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: opacity 0.2s;
}
.navbar-brand:hover { opacity: 0.82; }

.navbar-brand-icon {
  width: 38px;
  height: 38px;
  background: var(--grad-gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 2px 10px rgba(201,168,76,0.35);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.navbar-brand:hover .navbar-brand-icon {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 4px 16px rgba(201,168,76,0.45);
}

/* ── Nav Links ── */
.navbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 0.855rem;
  font-weight: 500;
  color: var(--gray-600);
  transition: all 0.18s ease;
  position: relative;
  letter-spacing: 0.005em;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 16px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform 0.22s var(--ease-out);
}

.nav-link:hover {
  color: var(--navy);
  background: var(--gray-50);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-link.active {
  color: var(--navy);
  background: rgba(79,156,249,0.08);
  font-weight: 600;
}

/* ── Navbar Actions ── */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Women Mode Toggle — refined */
.women-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(194,24,91,0.07);
  border: 1.5px solid rgba(194,24,91,0.18);
  cursor: pointer;
  transition: all 0.22s;
}
.women-mode-toggle:hover {
  background: rgba(194,24,91,0.13);
  border-color: rgba(194,24,91,0.35);
  transform: translateY(-1px);
}

/* Navbar CTAs — better sizing & spacing */
.navbar-actions .btn-sm {
  padding: 7px 16px;
  font-size: 0.8rem;
  border-radius: 9px;
}

.navbar-actions .btn-primary {
  box-shadow: 0 2px 12px rgba(201,168,76,0.35);
}
.navbar-actions .btn-primary:hover {
  box-shadow: 0 5px 20px rgba(201,168,76,0.50);
  transform: translateY(-2px);
}

/* ── Animated Hamburger ── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-100);
  transition: all 0.2s;
  width: 42px;
  height: 42px;
  position: relative;
}
.hamburger:hover {
  background: var(--gray-100);
  border-color: var(--gray-200);
}

.hamburger span {
  display: block;
  width: 18px;
  height: 1.8px;
  background: var(--navy);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 50%; transform: translateX(-50%) translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 14px; }

/* Hamburger → X animation */
.hamburger.open span:nth-child(1) {
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) scaleX(0);
}
.hamburger.open span:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

/* ── Premium Mobile Menu ── */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--navbar-h);
  left: 0; right: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--gray-100);
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
  box-shadow: 0 20px 60px rgba(10,15,44,0.15);
  z-index: 999;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.3s var(--ease-out);
  pointer-events: none;
}

.mobile-menu.open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  animation: mobileMenuIn 0.3s var(--ease-out) forwards;
}

@keyframes mobileMenuIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-menu .nav-link {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s;
}
.mobile-menu .nav-link:hover {
  background: var(--gray-50);
  color: var(--navy);
  padding-left: 20px;
}

/* Mobile menu divider before CTA */
.mobile-menu-divider {
  height: 1px;
  background: var(--gray-100);
  margin: 6px 0;
}

.mobile-menu .btn-full {
  margin-top: 4px;
  border-radius: 12px;
  padding: 13px 20px;
  font-size: 0.95rem;
  font-weight: 700;
}

/* Mobile menu bottom safe area */
.mobile-menu .mobile-menu-footer {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}
.mobile-menu .mobile-menu-footer a {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-600);
  border: 1.5px solid var(--gray-200);
  transition: all 0.18s;
}
.mobile-menu .mobile-menu-footer a:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--gray-50);
}

/* ── Enhanced Bottom Nav (Mobile) ── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(10,15,44,0.07);
  padding: var(--sp-2) var(--sp-4) calc(var(--sp-2) + env(safe-area-inset-bottom));
  z-index: 1000;
  box-shadow: 0 -8px 32px rgba(10,15,44,0.08);
}

.bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--gray-400);
  font-size: 10px;
  font-weight: 500;
  transition: all 0.18s var(--ease-out);
  text-decoration: none;
  position: relative;
  min-width: 56px;
}

.bottom-nav-item .icon {
  font-size: 1.35rem;
  transition: transform 0.2s var(--ease-out);
}

.bottom-nav-item:hover .icon,
.bottom-nav-item.active .icon {
  transform: translateY(-2px);
}

.bottom-nav-item.active {
  color: var(--navy);
  font-weight: 600;
}

.bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 3px;
  background: var(--grad-gold);
  border-radius: 0 0 4px 4px;
}

/* ── Responsive navbar adjustments ── */
@media (max-width: 1024px) {
  .navbar-nav { gap: 0; }
  .nav-link { padding: 7px 10px; font-size: 0.82rem; }
  .navbar-actions { gap: 8px; }
}

@media (max-width: 768px) {
  .navbar-nav { display: none; }
  .navbar-actions .btn:not(:last-child) { display: none; }
  .navbar-actions .btn-primary { display: none; }
  .hamburger { display: flex; }
  .bottom-nav { display: block; }
  
  /* Keep women mode toggle on mobile navbar */
  .women-mode-toggle { 
    padding: 5px 10px;
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) {
  .navbar-actions .women-mode-toggle { display: none; }
}

/* ── Scroll-progress indicator ── */
.nav-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--grad-gold);
  width: 0%;
  transition: width 0.1s linear;
  border-radius: 2px;
}


/* ============================================================
   PHASE 3 — PREMIUM HERO SECTION
   ============================================================ */

/* ── Hero background & mesh ── */
.hero {
  min-height: 100vh;
  background: var(--grad-hero);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--navbar-h);
}

/* Richer mesh gradient overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 75% 45%, rgba(79,156,249,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 45% 50% at 15% 75%, rgba(201,168,76,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 55% 10%, rgba(255,255,255,0.04) 0%, transparent 55%);
  pointer-events: none;
}

/* Animated dot grid */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: heroGridDrift 20s linear infinite;
  pointer-events: none;
}
@keyframes heroGridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

/* ── Hero content ── */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

/* ── Eyebrow badge — premium version ── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,168,76,0.10);
  border: 1.5px solid rgba(201,168,76,0.30);
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep on eyebrow */
.hero-eyebrow::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: eyebrowShimmer 3.5s ease-in-out infinite 1.5s;
}
@keyframes eyebrowShimmer {
  0%   { left: -60%; }
  100% { left: 120%; }
}

/* ── Hero Title ── */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.08;
  margin-bottom: 22px;
  letter-spacing: -0.02em;
}

.hero-title em {
  font-style: normal;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

/* Underline accent on em */
.hero-title em::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 3px;
  background: var(--grad-gold);
  border-radius: 2px;
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left;
  animation: titleUnderline 0.7s var(--ease-out) 0.9s forwards;
}
@keyframes titleUnderline {
  to { transform: scaleX(1); }
}

/* ── Subtitle ── */
.hero-subtitle {
  font-size: 1.07rem;
  color: rgba(255,255,255,0.62);
  margin-bottom: 36px;
  line-height: 1.75;
  max-width: 520px;
  font-weight: 400;
}

/* ── Hero Search Box ── */
.hero-search {
  background: rgba(255,255,255,0.98);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(10,15,44,0.30), 0 4px 16px rgba(10,15,44,0.12);
  margin-bottom: 32px;
  border: 1px solid rgba(255,255,255,0.9);
  transition: box-shadow 0.3s ease;
}
.hero-search:focus-within {
  box-shadow: 0 24px 70px rgba(10,15,44,0.35), 0 0 0 3px rgba(201,168,76,0.25);
}

/* Tabs inside search */
.hero-search-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  background: var(--gray-50);
  border-radius: 12px;
  padding: 4px;
}

.hero-search-tab {
  flex: 1;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  border: none;
  background: none;
  text-align: center;
}

.hero-search-tab:hover {
  color: var(--navy);
  background: rgba(255,255,255,0.7);
}

.hero-search-tab.active {
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(10,15,44,0.18);
}

/* Search row — cleaner grid */
.hero-search-row {
  display: grid;
  grid-template-columns: 1.8fr 0.9fr 0.9fr 0.9fr auto;
  gap: 10px;
  align-items: end;
}

/* Search inputs — consistent height */
.hero-search .form-control-lg {
  height: 50px;
  border-radius: 12px;
  border: 1.5px solid var(--gray-200);
  font-size: 0.9rem;
  transition: border-color 0.18s, box-shadow 0.18s;
  background: var(--white);
}
.hero-search .form-control-lg:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 3px rgba(79,156,249,0.12);
  outline: none;
}

/* Search CTA button */
.hero-search-btn {
  height: 50px !important;
  padding: 0 28px !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(201,168,76,0.40) !important;
  transition: all 0.22s var(--ease-out) !important;
}
.hero-search-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(201,168,76,0.55) !important;
}

/* ── Popular location chips ── */
.popular-locations {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
}

.popular-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.location-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  transition: all 0.18s var(--ease-out);
  white-space: nowrap;
}

.location-chip:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(10,15,44,0.15);
}

/* ── Hero Stats ── */
.hero-stats {
  display: flex;
  gap: 0;
  align-items: center;
}

.hero-stats > div {
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,0.12);
  position: relative;
}
.hero-stats > div:first-child { padding-left: 0; }
.hero-stats > div:last-child  { border-right: none; }

.hero-stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hero-stat-label {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.48);
  margin-top: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Floating hero cards — polished ── */
.hero-float-card {
  position: absolute;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 16px 48px rgba(10,15,44,0.18), 0 2px 8px rgba(10,15,44,0.08);
  z-index: 10;
  animation: heroFloat 5s ease-in-out infinite;
  border: 1px solid rgba(255,255,255,0.9);
}
.hero-float-card:nth-child(2) { animation-delay: -2.5s; }
.hero-float-card:nth-child(3) { animation-delay: -1.2s; }

@keyframes heroFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(0.5deg); }
  66%       { transform: translateY(-5px) rotate(-0.3deg); }
}

/* ── Trust Bar — animated scroll ── */
.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  padding: 14px 0;
  overflow: hidden;
  position: relative;
}
.trust-bar::before,
.trust-bar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.trust-bar::before { left: 0;  background: linear-gradient(to right, var(--white), transparent); }
.trust-bar::after  { right: 0; background: linear-gradient(to left, var(--white), transparent); }

.trust-bar-track {
  display: flex;
  align-items: center;
  gap: 36px;
  width: max-content;
  animation: trustScroll 28s linear infinite;
  white-space: nowrap;
}
.trust-bar-track:hover { animation-play-state: paused; }

@keyframes trustScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-500);
  flex-shrink: 0;
}
.trust-item strong { color: var(--navy); }
.trust-divider {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gray-300);
  flex-shrink: 0;
}

/* ── Wayfinder cards — CSS-only hover (no inline JS) ── */
.wayfinder-card {
  text-decoration: none;
  display: block;
  background: var(--white);
  border: 2px solid var(--gray-100);
  border-radius: var(--radius-2xl);
  padding: var(--sp-8);
  text-align: center;
  transition: transform 0.28s var(--ease-out), border-color 0.28s, box-shadow 0.28s;
  cursor: pointer;
}
.wayfinder-card:hover {
  transform: translateY(-5px);
}
.wayfinder-card.tenant:hover {
  border-color: var(--sky);
  box-shadow: 0 14px 44px rgba(79,156,249,0.18);
}
.wayfinder-card.owner:hover {
  border-color: var(--gold);
  box-shadow: 0 14px 44px rgba(201,168,76,0.20);
}

/* ── Hero Visual (right side) ── */
.hero-visual {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 46%;
  overflow: hidden;
}
.hero-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.20;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.hero:hover .hero-visual img {
  transform: scale(1.0);
}
.hero-visual::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--navy) 15%, rgba(10,15,44,0.5) 55%, transparent 85%);
  z-index: 1;
}

/* ── Responsive Phase 3 ── */
@media (max-width: 1024px) {
  .hero-search-row { grid-template-columns: 1fr 1fr 1fr auto; }
  .hero-search-row > :nth-child(3),
  .hero-search-row > :nth-child(4) { display: none; } /* hide price on tablets */
}

@media (max-width: 768px) {
  .hero-visual, .hero-float-card { display: none !important; }
  .hero-content { max-width: 100%; text-align: center; }
  .hero-title { font-size: clamp(2rem, 8vw, 2.8rem) !important; letter-spacing: -0.025em; }
  .hero-subtitle { font-size: 0.97rem; max-width: 100%; margin-left: auto; margin-right: auto; }
  .hero-eyebrow { font-size: 0.72rem; }
  .hero-search-row { grid-template-columns: 1fr; }
  .hero-search-row > :nth-child(3),
  .hero-search-row > :nth-child(4) { display: block; }
  .hero-search-btn { width: 100% !important; justify-content: center; }
  .hero-stats { gap: 0; flex-wrap: wrap; justify-content: center; }
  .hero-stats > div { padding: 10px 18px; border-right: 1px solid rgba(255,255,255,0.12); }
  .hero-stats > div:nth-child(even) { border-right: none; }
  .popular-locations { justify-content: center; }
  .trust-bar::before, .trust-bar::after { width: 40px; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 1.9rem !important; }
  .hero-stat-value { font-size: 1.4rem; }
  .hero-search { padding: 14px; border-radius: 16px; }
  .hero-search-tabs { gap: 4px; }
  .hero-search-tab { font-size: 0.76rem; padding: 8px 8px; }
}


/* ============================================================
   PHASE 4 — SECTION HEADERS + PG CARDS + FILTER TABS
   ============================================================ */

/* ── Premium Section Labels ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(79,156,249,0.08);
  color: var(--sky);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
  border: 1.5px solid rgba(79,156,249,0.16);
}

/* ── Section Titles ── */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 1.02rem;
  color: var(--gray-500);
  max-width: 540px;
  line-height: 1.75;
  font-weight: 400;
}

/* ── Filter Tabs — premium pill style ── */
.listings-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.listings-filter-bar .btn-outline {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.80rem;
  font-weight: 600;
  border: 1.5px solid var(--gray-200);
  color: var(--gray-600);
  background: var(--white);
  transition: all 0.18s var(--ease-out);
  cursor: pointer;
}

.listings-filter-bar .btn-outline:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--gray-50);
  transform: translateY(-1px);
}

.listings-filter-bar .btn-navy,
.listings-filter-bar .btn-outline.active-filter {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(10,15,44,0.20);
}

/* ── PG Cards — polished ── */
.pg-card {
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(10,15,44,0.07), 0 1px 3px rgba(10,15,44,0.04);
  overflow: hidden;
  transition: transform 0.30s var(--ease-out), box-shadow 0.30s var(--ease-out);
  position: relative;
  border: 1px solid rgba(10,15,44,0.06);
}

.pg-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 52px rgba(10,15,44,0.14), 0 4px 12px rgba(10,15,44,0.06);
  border-color: rgba(10,15,44,0.10);
}

/* Image container */
.pg-card-image {
  position: relative;
  height: 210px;
  overflow: hidden;
  background: var(--gray-100);
}

.pg-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out);
}

.pg-card:hover .pg-card-image img {
  transform: scale(1.07);
}

/* Gradient overlay on image */
.pg-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,15,44,0.28) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.pg-card:hover .pg-card-image::after {
  opacity: 1;
}

/* Badge */
.pg-card-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--grad-gold);
  color: var(--navy);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(10,15,44,0.15);
  z-index: 2;
}

/* Wishlist button */
.pg-card-wishlist {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  color: var(--gray-400);
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(10,15,44,0.12);
  z-index: 2;
}
.pg-card-wishlist:hover {
  transform: scale(1.18);
  color: var(--red);
  background: rgba(255,255,255,0.98);
}
.pg-card-wishlist.active { color: var(--red); }

/* Card body */
.pg-card-body {
  padding: 16px 18px;
}

/* Price */
.pg-card-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.pg-card-price span {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--gray-400);
}

/* Title */
.pg-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Location */
.pg-card-location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--gray-500);
  margin-bottom: 12px;
}

/* Tags */
.pg-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--sky-pale);
  color: var(--sky);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.tag:hover { opacity: 0.8; }

.tag-gold  { background: var(--gold-pale);  color: var(--gold-dark); }
.tag-green { background: var(--green-pale); color: var(--green); }
.tag-navy  { background: rgba(10,15,44,0.07); color: var(--navy); }
.tag-gray  { background: var(--gray-100);   color: var(--gray-600); }

/* Footer */
.pg-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}

/* Rating inside footer */
.pg-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
}

/* ── Skeleton Cards — refined ── */
.skeleton-card {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10,15,44,0.06);
  border: 1px solid rgba(10,15,44,0.05);
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(10,15,44,0.05) 25%,
    rgba(10,15,44,0.02) 50%,
    rgba(10,15,44,0.05) 75%
  );
  background-size: 1000px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 8px;
}

@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.skeleton-image  { height: 210px; border-radius: 0; }
.skeleton-title  { height: 22px; width: 75%; margin-bottom: 8px; }
.skeleton-text   { height: 14px; width: 100%; }
.skeleton-text.short   { width: 55%; }
.skeleton-text.shorter { width: 32%; }

/* ── View-all CTA button ── */
.section-cta-row {
  text-align: center;
  margin-top: 48px;
}
.section-cta-row .btn-navy {
  padding: 14px 36px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 20px rgba(10,15,44,0.18);
  transition: all 0.22s var(--ease-out);
}
.section-cta-row .btn-navy:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(10,15,44,0.26);
}

/* ── Featured section wrapper ── */
.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 16px;
}

/* ── Responsive Phase 4 ── */
@media (max-width: 768px) {
  .section-header-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .listings-filter-bar { width: 100%; }
  .pg-card-image { height: 190px; }
  .section-title { font-size: 1.55rem !important; }
  .section-subtitle { font-size: 0.92rem; }
  .section-cta-row .btn-navy { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .pg-card-image { height: 175px; }
  .section-title { font-size: 1.4rem !important; }
  .pg-card-body { padding: 13px 15px; }
}


/* ============================================================
   PHASE 5 — HOW IT WORKS + CITIES + TESTIMONIALS + PRICING
   ============================================================ */

/* ── How It Works — premium step cards ── */
.step-card {
  background: var(--white);
  border-radius: 20px;
  padding: 36px 28px 32px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(10,15,44,0.07), 0 1px 4px rgba(10,15,44,0.04);
  position: relative;
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out);
  border: 1px solid rgba(10,15,44,0.06);
  overflow: hidden;
}

/* Hover lift */
.step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 52px rgba(10,15,44,0.13), 0 4px 12px rgba(10,15,44,0.06);
}

/* Faint background number — bigger, more elegant */
.step-number {
  position: absolute;
  top: 12px; right: 18px;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  color: rgba(10,15,44,0.04);
  line-height: 1;
  pointer-events: none;
  letter-spacing: -0.04em;
}

/* Icon bubble */
.step-icon {
  width: 68px; height: 68px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  margin: 0 auto 22px;
  transition: transform 0.25s var(--ease-out);
}
.step-card:hover .step-icon {
  transform: scale(1.10) rotate(-4deg);
}

/* Connector dashes between steps */
.steps-connector {
  position: absolute;
  top: 78px; left: calc(33.33% + 12px); right: calc(33.33% + 12px);
  height: 2px;
  background: linear-gradient(90deg,
    rgba(201,168,76,0.6) 0%,
    rgba(79,156,249,0.6) 50%,
    rgba(56,201,145,0.6) 100%
  );
  border-radius: 2px;
  display: none; /* shown on desktop via below rule */
  pointer-events: none;
}
@media (min-width: 769px) {
  .steps-connector { display: block; }
}

/* Step h3 */
.step-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

/* Step p */
.step-card p {
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.85;
  margin: 0;
}

/* ── Amenity Showcase ── */
.amenity-showcase {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}
.amenity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 10px;
  border-radius: 14px;
  background: var(--white);
  border: 1.5px solid var(--gray-100);
  transition: all 0.22s var(--ease-out);
  cursor: default;
}
.amenity-item:hover {
  border-color: var(--sky-light);
  background: var(--sky-pale);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(79,156,249,0.12);
}
.amenity-emoji  { font-size: 1.7rem; line-height: 1; }
.amenity-name   { font-size: 0.72rem; font-weight: 700; color: var(--gray-600); text-align: center; line-height: 1.3; }

/* ── City Cards ── */
.city-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  height: 190px;
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s;
  box-shadow: 0 4px 16px rgba(10,15,44,0.10);
}
.city-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(10,15,44,0.18);
}
.city-card:hover img { transform: scale(1.10); }
.city-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out);
}
.city-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,15,44,0.88) 0%, rgba(10,15,44,0.15) 55%, transparent 100%);
  transition: opacity 0.3s;
}
.city-card:hover .city-card-overlay {
  opacity: 0.9;
}
.city-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px 18px;
}
.city-card-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.city-card-count {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.65);
  margin-top: 3px;
  font-weight: 500;
}

/* ── Testimonial Cards — polished ── */
.testimonial-card {
  background: var(--white);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 14px rgba(10,15,44,0.07), 0 1px 3px rgba(10,15,44,0.04);
  transition: transform 0.30s var(--ease-out), box-shadow 0.30s;
  border: 1px solid rgba(10,15,44,0.06);
  position: relative;
  overflow: hidden;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -8px; right: 20px;
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 900;
  color: rgba(201,168,76,0.10);
  line-height: 1;
  pointer-events: none;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(10,15,44,0.12);
}

/* Drop the old jumbo quote div — use ::before instead */
.testimonial-quote { display: none; }

.testimonial-text {
  font-size: 0.90rem;
  color: var(--gray-600);
  line-height: 1.82;
  margin-bottom: 22px;
  font-style: italic;
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold-pale);
  box-shadow: 0 2px 8px rgba(10,15,44,0.10);
}

/* Stars — gold rendered properly */
.testimonial-stars {
  display: flex;
  gap: 2px;
  margin-top: 3px;
}
.star { color: var(--gold); font-size: 0.78rem; }

/* ── Pricing Plan Cards — refined ── */
.plan-card {
  background: var(--white);
  border-radius: 22px;
  padding: 34px 26px;
  box-shadow: 0 2px 16px rgba(10,15,44,0.07);
  border: 2px solid transparent;
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s, border-color 0.32s;
  position: relative;
  overflow: hidden;
}
.plan-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 56px rgba(10,15,44,0.14);
  border-color: rgba(201,168,76,0.50);
}
.plan-card.featured {
  background: var(--grad-hero);
  border-color: rgba(201,168,76,0.60);
  box-shadow: 0 8px 32px rgba(201,168,76,0.25), 0 4px 12px rgba(10,15,44,0.12);
  transform: translateY(-4px); /* always slightly elevated */
}
.plan-card.featured:hover {
  transform: translateY(-12px);
  box-shadow: 0 28px 60px rgba(201,168,76,0.30), 0 8px 20px rgba(10,15,44,0.14);
}
/* Remove old ribbon ::before */
.plan-card.featured::before { display: none; }

/* ── Women feature cards ── */
.women-feature-card {
  background: rgba(255,255,255,0.90);
  border-radius: 16px;
  padding: 22px;
  border: 1px solid rgba(194,24,91,0.10);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.women-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(194,24,91,0.12);
  border-color: rgba(194,24,91,0.22);
}

/* ── Responsive Phase 5 ── */
@media (max-width: 1024px) {
  .amenity-showcase { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .step-card { padding: 28px 20px 24px; }
  .step-number { font-size: 3.5rem; }
  .step-icon { width: 58px; height: 58px; font-size: 1.6rem; }
  .city-card { height: 155px; }
  .city-card-name { font-size: 1rem; }
  .testimonial-card { padding: 22px; }
  .amenity-showcase { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .plan-card { padding: 26px 20px; }
  .plan-card.featured { transform: none; }
}
@media (max-width: 480px) {
  .amenity-showcase { grid-template-columns: repeat(2, 1fr); }
  .city-card { height: 140px; }
  .testimonial-card::before { font-size: 5rem; }
}


/* ============================================================
   PHASE 6 — CTA BANNER + APP SECTION + FOOTER + SCROLL-TOP
              + FINAL MOBILE POLISH
   ============================================================ */

/* ── CTA Banner — richer depth ── */
.cta-banner {
  background: var(--grad-hero);
  border-radius: 28px;
  padding: 60px 52px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(10,15,44,0.30);
}

/* Animated orb overlays */
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 85% 50%, rgba(79,156,249,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 15% 75%, rgba(201,168,76,0.18) 0%, transparent 55%);
  pointer-events: none;
}

/* Subtle dot mesh inside banner */
.cta-banner::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: 0.6;
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}

/* CTA title */
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

/* CTA stats card on right */
.cta-stats-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  padding: 32px 36px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  min-width: 200px;
  transition: background 0.3s, border-color 0.3s;
}
.cta-stats-card:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}

.cta-stat-value {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}
.cta-stat-label {
  font-size: 0.78rem;
  margin-bottom: 28px;
  opacity: 0.6;
  font-weight: 500;
}

/* CTA micro-list */
.cta-checklist {
  display: flex;
  gap: 20px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.cta-checklist span {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── App Section ── */
.app-section-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Replace ugly emoji phone with a premium card mockup */
.app-mockup {
  background: var(--grad-hero);
  border-radius: 28px;
  padding: 40px 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(10,15,44,0.30), 0 8px 24px rgba(10,15,44,0.12);
  border: 1px solid rgba(255,255,255,0.08);
  min-width: 280px;
  text-align: center;
}

.app-mockup::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79,156,249,0.20) 0%, transparent 65%);
  pointer-events: none;
}

.app-mockup-screen {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 24px 20px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.app-mockup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  margin-bottom: 8px;
  transition: background 0.2s;
}
.app-mockup-row:last-child { margin-bottom: 0; }
.app-mockup-row:hover { background: rgba(255,255,255,0.12); }

.app-mockup-thumb {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(201,168,76,0.6), rgba(201,168,76,0.3));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.app-mockup-info { text-align: left; flex: 1; }
.app-mockup-name {
  font-size: 0.78rem; font-weight: 700;
  color: rgba(255,255,255,0.9);
  line-height: 1.2;
}
.app-mockup-price {
  font-size: 0.70rem;
  color: var(--gold-light);
  font-weight: 600;
  margin-top: 2px;
}

.app-mockup-badge {
  background: var(--grad-gold);
  color: var(--navy);
  font-size: 0.60rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}

.app-mockup-label {
  color: rgba(255,255,255,0.55);
  font-size: 0.78rem;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

/* App download buttons */
.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--navy);
  color: var(--white);
  padding: 13px 22px;
  border-radius: 14px;
  transition: all 0.22s var(--ease-out);
  border: 1.5px solid rgba(255,255,255,0.10);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(10,15,44,0.18);
}
.app-btn:hover {
  background: #151d4a;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(10,15,44,0.28);
  border-color: rgba(255,255,255,0.18);
}
.app-btn-icon { font-size: 1.7rem; line-height: 1; }
.app-btn-sub  { font-size: 0.68rem; opacity: 0.55; line-height: 1.2; }
.app-btn-name { font-size: 0.90rem; font-weight: 800; line-height: 1.4; }

/* Social proof avatars */
.app-social-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.app-avatars {
  display: flex;
}
.app-avatars img {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-right: -8px;
  box-shadow: 0 2px 6px rgba(10,15,44,0.15);
}
.app-avatars img:last-child { margin-right: 0; }

/* ── Footer — polished ── */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,0.65);
  padding: 72px 0 32px;
  position: relative;
}

/* Subtle top gradient edge */
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.4), rgba(79,156,249,0.3), transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

.footer-brand-text {
  font-size: 0.83rem;
  line-height: 1.85;
  margin-top: 16px;
  color: rgba(255,255,255,0.50);
  max-width: 280px;
}

.footer-heading {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 18px;
  opacity: 0.9;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-link {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.48);
  transition: color 0.18s, padding-left 0.18s;
  text-decoration: none;
  line-height: 1.4;
}
.footer-link:hover {
  color: var(--gold-light);
  padding-left: 4px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.80rem;
  color: rgba(255,255,255,0.35);
}

/* Social links */
.social-links {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.social-link {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
  font-size: 0.95rem;
  transition: all 0.20s var(--ease-out);
  text-decoration: none;
}
.social-link:hover {
  background: var(--gold);
  color: var(--navy);
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(201,168,76,0.35);
}

/* ── Scroll-to-top button ── */
.scroll-top {
  position: fixed;
  bottom: 28px; right: 24px;
  width: 46px; height: 46px;
  background: var(--navy);
  color: var(--white);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(10,15,44,0.28);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  transition: all 0.28s var(--ease-out);
  z-index: 500;
  border: none;
  font-size: 1rem;
}
.scroll-top:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(201,168,76,0.40);
}
.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Section spacing consistency ── */
.section {
  padding: 80px 0;
}
.section-lg {
  padding: 100px 0;
}

/* ── Smooth scroll behaviour ── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--navbar-h) + 16px);
}

/* ── Selection colour ── */
::selection {
  background: rgba(201,168,76,0.25);
  color: var(--navy);
}

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Phase 6 Responsive ── */
@media (max-width: 1024px) {
  .cta-banner { padding: 48px 40px; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .cta-banner { padding: 36px 28px; border-radius: 20px; }
  .cta-grid { grid-template-columns: 1fr; text-align: center; }
  .cta-grid > div:last-child { display: none; }
  .cta-checklist { justify-content: center; }
  .cta-banner h2 { font-size: 1.8rem; }

  .app-section-visual { display: none; } /* hide mockup on small screens */

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand-text { max-width: 100%; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer { padding: 52px 0 28px; }

  .scroll-top { bottom: 76px; right: 16px; width: 42px; height: 42px; border-radius: 12px; }

  .section { padding: 56px 0; }
  .section-lg { padding: 72px 0; }
}

@media (max-width: 480px) {
  .cta-banner { padding: 28px 20px; border-radius: 16px; }
  .cta-banner h2 { font-size: 1.6rem; }

  .app-btn { width: 100%; justify-content: flex-start; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid > div + div { padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); }

  .section { padding: 44px 0; }
}

#createPlanCard{
    border-radius: var(--radius-xl);
    padding: var(--sp-6);
}

/* ── Antigravity Premium Responsive Sweeper ── */
@media (max-width: 1024px) {
  .sidebar-toggle {
    display: flex !important;
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 9999 !important;
    background: var(--navy) !important;
    color: var(--white) !important;
    border-radius: var(--radius-md) !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(10, 15, 44, 0.15) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
  }
  .topbar {
    padding-left: 4.5rem !important; /* Perfect clearance for sidebar toggle */
  }
  .sidebar {
    transform: translateX(-100%) !important;
    z-index: 9998 !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }
  .dash-main {
    margin-left: 0 !important;
  }
}

@media (max-width: 768px) {
  /* Layout Paddings */
  .dash-content {
    padding: var(--sp-4) !important;
  }
  
  /* Grid layouts */
  .plans-grid, .media-grid, .user-stats, .rev-stats, .listings-admin-grid, .admin-stats, .dash-2col, .dash-3col, .dash-main-side {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4) !important;
  }

  /* Table Horizontal Scrolling Protection */
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: var(--radius-xl) !important;
  }
  .table-wrapper table {
    min-width: 650px !important;
  }

  /* Drawers and Modals */
  .user-drawer, .listing-drawer {
    width: 100% !important;
    max-width: 100vw !important;
  }
  .modal {
    width: calc(100% - 32px) !important;
    max-width: 100% !important;
    margin: 16px !important;
  }

  /* Topbar stacking on tablets and mobiles */
  .topbar {
    height: auto !important;
    min-height: 72px !important;
    padding: var(--sp-4) var(--sp-4) var(--sp-4) 4.5rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--sp-3) !important;
  }
  .topbar-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--sp-3) !important;
    flex-wrap: wrap !important;
  }
  .topbar-actions .btn {
    flex: 0 1 auto !important;
    min-width: auto !important;
    text-align: center !important;
    justify-content: center !important;
    padding: var(--sp-2) var(--sp-4) !important;
    font-size: var(--text-xs) !important;
    white-space: nowrap !important;
  }
  .topbar-actions .notif-btn, .topbar-actions .topbar-avatar {
    flex-shrink: 0 !important;
  }

  /* Banners */
  .alert-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--sp-3) !important;
  }
  .alert-banner .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  
  /* Inline grid overrides */
  div[style*="display:grid"][style*="grid-template-columns"],
  div[style*="display: grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4) !important;
  }
}

@media (max-width: 600px) {
  /* Accordion Headers stacking (like KYC queue) */
  .accordion-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--sp-3) !important;
    padding: var(--sp-4) !important;
  }
  .accordion-header > div {
    width: 100% !important;
  }
  .accordion-header > div:last-child {
    justify-content: space-between !important;
    margin-top: var(--sp-1) !important;
  }

  /* Form and search items auto width stretching */
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .filter-bar .input-group, .filter-bar select, .filter-bar button {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  /* Profiles and action buttons are handled perfectly by the horizontal layout rules */
}