/* ============================================================
   MyBayis Luxury — Custom Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --navy:    #0A1628;
  --navy-2:  #0f2040;
  --gold:    #C9A84C;
  --gold-lt: #E8C97A;
  --gold-dk: #A6872C;
  --cream:   #F8F5EE;
  --cream-2: #F2EDE3;
  --gray-lt: #F5F5F5;
  --gray:    #9CA3AF;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}

/* ─── Typography ─── */
.font-serif { font-family: 'Playfair Display', serif; }
.text-navy   { color: var(--navy); }
.text-gold   { color: var(--gold); }
.bg-navy     { background-color: var(--navy); }
.bg-gold     { background-color: var(--gold); }
.bg-cream    { background-color: var(--cream); }
.border-gold { border-color: var(--gold); }

/* ─── Buttons ─── */
.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dk) 100%);
  color: white;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-gold::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 200%;
  height: 200%;
  background: rgba(255,255,255,0.1);
  transform: skewX(-20deg);
  transition: left 0.4s ease;
}
.btn-gold:hover::after { left: 110%; }
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(201,168,76,0.4); }

.btn-navy {
  background: var(--navy);
  color: white;
  transition: all 0.3s ease;
}
.btn-navy:hover { background: var(--navy-2); transform: translateY(-1px); }

.btn-outline {
  border: 1.5px solid var(--gold);
  color: var(--gold);
  transition: all 0.3s ease;
  background: transparent;
}
.btn-outline:hover { background: var(--gold); color: white; }

/* ─── Nav ─── */
#navbar {
  transition: all 0.4s ease;
}
#navbar.scrolled {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 2px 30px rgba(10,22,40,0.08);
}

/* ─── Hero ─── */
.hero-overlay {
  background: linear-gradient(135deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.5) 60%, rgba(201,168,76,0.2) 100%);
}

/* ─── Cards ─── */
.listing-card {
  transition: all 0.35s ease;
  background: white;
}
.listing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(10,22,40,0.12);
}
.listing-card .card-image {
  overflow: hidden;
}
.listing-card .card-image img {
  transition: transform 0.5s ease;
}
.listing-card:hover .card-image img {
  transform: scale(1.07);
}

.city-card {
  transition: all 0.35s ease;
}
.city-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 50px rgba(10,22,40,0.18);
}
.city-card .city-img {
  transition: transform 0.6s ease;
}
.city-card:hover .city-img {
  transform: scale(1.08);
}

/* ─── Badge ─── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.badge-sale     { background: #FEF3C7; color: #92400E; }
.badge-rent     { background: #DBEAFE; color: #1E40AF; }
.badge-seasonal { background: #D1FAE5; color: #065F46; }
.badge-roommate { background: #EDE9FE; color: #5B21B6; }
.badge-wanted   { background: #FCE7F3; color: #9D174D; }
.badge-featured { background: linear-gradient(135deg, var(--gold), var(--gold-dk)); color: white; }

/* ─── Form Inputs ─── */
.input-luxury {
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.95rem;
  transition: all 0.2s;
  width: 100%;
  outline: none;
  background: white;
  color: var(--navy);
  font-family: 'Inter', sans-serif;
}
.input-luxury:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.input-luxury::placeholder { color: #9CA3AF; }

select.input-luxury { cursor: pointer; }

/* ─── Shadows ─── */
.shadow-luxury { box-shadow: 0 10px 40px rgba(10,22,40,0.1); }
.shadow-gold   { box-shadow: 0 8px 25px rgba(201,168,76,0.35); }

/* ─── Section Titles ─── */
.section-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
}

/* ─── Gold Divider ─── */
.gold-divider {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dk));
  border-radius: 2px;
  margin: 0 auto;
}
.gold-divider-left {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dk));
  border-radius: 2px;
}

/* ─── Stat Cards ─── */
.stat-card {
  text-align: center;
  padding: 40px 20px;
  position: relative;
}
.stat-card::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255,255,255,0.15);
}
.stat-card:last-child::after { display: none; }

/* ─── Testimonial ─── */
.testimonial-card {
  background: white;
  border: 1px solid #F0EBE0;
  border-radius: 16px;
  padding: 28px;
  position: relative;
  transition: all 0.3s ease;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 24px;
  font-family: 'Playfair Display', serif;
  font-size: 80px;
  color: var(--gold);
  line-height: 1;
  opacity: 0.3;
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(10,22,40,0.08);
}

/* ─── Search Bar Hero ─── */
.search-bar-hero {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(10,22,40,0.25);
}

/* ─── Filters Sidebar ─── */
.filter-sidebar {
  background: white;
  border: 1.5px solid #F0EBE0;
  border-radius: 16px;
}

/* ─── Image Gallery ─── */
.gallery-main { border-radius: 16px; overflow: hidden; height: 400px; }
.gallery-thumb { border-radius: 10px; overflow: hidden; height: 120px; cursor: pointer; transition: all 0.2s; }
.gallery-thumb:hover { opacity: 0.85; }
.gallery-thumb.active { ring: 2px; ring-color: var(--gold); }

/* ─── Modal ─── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,22,40,0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-box {
  background: white;
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  padding: 40px;
  position: relative;
  animation: modalIn 0.3s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Dashboard ─── */
.dashboard-sidebar {
  width: 260px;
  min-height: calc(100vh - 80px);
  background: var(--navy);
  padding: 32px 0;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.sidebar-link:hover { color: white; background: rgba(255,255,255,0.06); }
.sidebar-link.active { color: var(--gold); border-left-color: var(--gold); background: rgba(201,168,76,0.08); }

/* ─── Admin ─── */
.admin-stat-card {
  background: white;
  border: 1px solid #F0EBE0;
  border-radius: 14px;
  padding: 24px;
  transition: all 0.2s;
}
.admin-stat-card:hover { box-shadow: 0 8px 30px rgba(10,22,40,0.08); transform: translateY(-2px); }

/* ─── Table ─── */
.luxury-table { width: 100%; border-collapse: collapse; }
.luxury-table th {
  background: var(--cream);
  padding: 12px 16px;
  text-align: left;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
}
.luxury-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #F5F0E8;
  font-size: 0.9rem;
  vertical-align: middle;
}
.luxury-table tr:last-child td { border-bottom: none; }
.luxury-table tr:hover td { background: #FDFAF4; }

/* ─── Animations ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.6s ease forwards; }
.fade-up-1 { animation-delay: 0.1s; }
.fade-up-2 { animation-delay: 0.2s; }
.fade-up-3 { animation-delay: 0.3s; }
.fade-up-4 { animation-delay: 0.4s; }

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.text-shimmer {
  background: linear-gradient(90deg, var(--gold), var(--gold-lt), var(--gold-dk), var(--gold));
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

/* ─── Scroll Progress ─── */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-lt));
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ─── Stars ─── */
.stars { color: #F59E0B; letter-spacing: 2px; }

/* ─── Footer ─── */
footer a { transition: color 0.2s; }
footer a:hover { color: var(--gold-lt); }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .dashboard-sidebar { width: 100%; min-height: auto; }
  .gallery-main { height: 260px; }
  .modal-box { padding: 24px; }
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dk); }

/* ─── Loading Skeleton ─── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 6px;
}
@keyframes skeleton-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Cookie / Toast ─── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--navy);
  color: white;
  padding: 14px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(10,22,40,0.3);
  font-size: 0.88rem;
  z-index: 9999;
  animation: fadeUp 0.3s ease;
  max-width: 320px;
}
.toast.success { border-left: 4px solid #10B981; }
.toast.error   { border-left: 4px solid #EF4444; }
.toast.info    { border-left: 4px solid var(--gold); }

/* ─── Type Badges Color Map ─── */
[data-type="for-sale"]         { background: #FEF3C7; color: #92400E; }
[data-type="long-term-rental"] { background: #DBEAFE; color: #1E40AF; }
[data-type="short-term-rental"]{ background: #D1FAE5; color: #065F46; }
[data-type="roommate"]         { background: #EDE9FE; color: #5B21B6; }
[data-type="wanted"]           { background: #FCE7F3; color: #9D174D; }