:root {
  --brand-dark: #1c1a17;
  --brand-navy: #23282f;
  --brand-gold: #b8894a;
  --brand-gold-light: #d9b174;
  --brand-cream: #f7f3ec;
  --brand-text: #2b2b2b;
  --brand-bg: #ffffff;
  --brand-bg-image: none;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--brand-text);
  background-color: var(--brand-bg);
  background-image: var(--brand-bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.brand-font { font-family: 'Playfair Display', Georgia, serif; }

h1, h2, h3, .section-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; }

a { text-decoration: none; }

/* ---------- Navbar ---------- */
.site-navbar {
  background: var(--brand-dark);
  padding-top: .85rem;
  padding-bottom: .85rem;
}
.navbar-logo { height: 36px; width: auto; object-fit: contain; border-radius: 4px; }
.site-navbar .nav-link { color: rgba(255,255,255,.8); font-weight: 500; }
.site-navbar .nav-link:hover { color: var(--brand-gold-light); }
.btn-order {
  background: var(--brand-gold);
  color: #fff !important;
  border: none;
  padding: .45rem 1.1rem;
  border-radius: 30px;
  font-weight: 600;
}
.btn-order:hover { background: var(--brand-gold-light); color: #1c1a17 !important; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-navy) 100%);
  color: #fff;
  padding: 6rem 0 5rem;
}
.hero h1 { font-size: 3rem; }
.hero .lead { color: rgba(255,255,255,.75); font-size: 1.15rem; }
.hero-badge {
  display: inline-block;
  background: rgba(184,137,74,.18);
  color: var(--brand-gold-light);
  border: 1px solid rgba(184,137,74,.4);
  border-radius: 30px;
  padding: .3rem 1rem;
  font-size: .85rem;
  margin-bottom: 1.25rem;
}

.section { padding: 5rem 0; }
.section-alt { background: var(--brand-cream); }
.section-title { font-size: 2.1rem; margin-bottom: .5rem; }
.section-sub { color: #777; margin-bottom: 3rem; }

/* ---------- Design cards ---------- */
.design-card {
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.design-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.design-card .img-wrap {
  height: 260px;
  background: #ece5d8 center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0a48c;
  font-size: 2.5rem;
}
.design-card .card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.design-card .price { color: var(--brand-gold); font-weight: 700; font-size: 1.1rem; }
.design-card .design-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  min-height: 2.8em;
}
.design-card .price-row { margin-top: auto; }
.category-pill {
  display: inline-block;
  background: var(--brand-cream);
  color: var(--brand-dark);
  border-radius: 20px;
  padding: .2rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* ---------- How it works ---------- */
.step-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--brand-gold);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.3rem;
  margin-bottom: 1rem;
}

/* ---------- Contact buttons ---------- */
.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: 30px;
  font-weight: 600;
  font-size: .9rem;
  color: #fff !important;
  border: none;
}
.btn-whatsapp { background: #25D366; }
.btn-whatsapp:hover { background: #1ebe5a; }
.btn-call { background: var(--brand-dark); }
.btn-call:hover { background: var(--brand-navy); }
.btn-email { background: var(--brand-gold); }
.btn-email:hover { background: var(--brand-gold-light); color: var(--brand-dark) !important; }

/* ---------- Floating WhatsApp bubble (site-wide) ---------- */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 1.6rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  z-index: 1040;
  transition: transform .15s ease;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff !important; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--brand-dark);
  color: rgba(255,255,255,.85);
  padding: 3.5rem 0 1.5rem;
}
.footer-link { color: rgba(255,255,255,.65); }
.footer-link:hover { color: var(--brand-gold-light); }

/* ---------- Order wizard ---------- */
.wizard-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  list-style: none;
  padding: 0;
}
.wizard-steps li {
  flex: 1;
  text-align: center;
  position: relative;
  color: #aaa;
  font-weight: 600;
  font-size: .85rem;
}
.wizard-steps li .dot {
  width: 30px; height: 30px; border-radius: 50%;
  background: #eee; color: #999;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .4rem;
  font-weight: 700;
}
.wizard-steps li.active .dot { background: var(--brand-gold); color: #fff; }
.wizard-steps li.done .dot { background: var(--brand-dark); color: #fff; }
.wizard-steps li.active, .wizard-steps li.done { color: var(--brand-dark); }

.wizard-panel { display: none; }
.wizard-panel.active { display: block; }

.material-option, .plan-option, .delivery-option {
  border: 2px solid #e5e0d5;
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  height: 100%;
}
.material-option:hover, .plan-option:hover, .delivery-option:hover { border-color: var(--brand-gold-light); }
.material-option.selected, .plan-option.selected, .delivery-option.selected {
  border-color: var(--brand-gold);
  background: #fbf6ec;
}
.material-swatch {
  width: 100%; height: 70px; border-radius: 8px;
  background: #ddd center/cover no-repeat;
  margin-bottom: .5rem;
}

.tracking-timeline { list-style: none; padding: 0; margin: 0; }
.tracking-timeline li {
  position: relative;
  padding: 0 0 1.75rem 2.25rem;
  border-left: 2px solid #e5e0d5;
}
.tracking-timeline li:last-child { border-color: transparent; padding-bottom: 0; }
.tracking-timeline li::before {
  content: '';
  position: absolute; left: -7px; top: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: #ccc;
}
.tracking-timeline li.done::before { background: var(--brand-gold); }

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-navy));
}
.auth-card {
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}

/* ---------- Admin layout ---------- */
.admin-body { background: #f4f5f7; }
.admin-wrapper { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 240px;
  background: var(--brand-dark);
  color: #fff;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar-brand { padding: 1.25rem 1.25rem .5rem; font-family: 'Playfair Display', serif; }
.sidebar-brand a { color: #fff; font-size: 1.15rem; font-weight: 700; }
.sidebar-nav { padding: 1rem 0; flex: 1; overflow-y: auto; }
.sidebar-nav .nav-link {
  color: rgba(255,255,255,.7);
  padding: .65rem 1.25rem;
  font-size: .92rem;
  border-left: 3px solid transparent;
}
.sidebar-nav .nav-link i { width: 22px; display: inline-block; }
.sidebar-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar-nav .nav-link.active {
  color: #fff;
  background: rgba(184,137,74,.15);
  border-left-color: var(--brand-gold);
}
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-section-label {
  padding: 1rem 1.25rem .35rem;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255,255,255,.35);
}
.admin-content { flex: 1; min-width: 0; }
.admin-topbar {
  background: #fff;
  padding: .9rem 1.5rem;
  border-bottom: 1px solid #e6e6e6;
  position: sticky;
  top: 0;
  z-index: 10;
}
.admin-main { padding: 1.5rem; }

.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  border: 1px solid #eee;
}
.stat-card .stat-value { font-size: 1.7rem; font-weight: 700; }
.stat-card .stat-label { color: #888; font-size: .85rem; }

.table-card { background: #fff; border-radius: 12px; padding: 1.25rem; border: 1px solid #eee; }

/* ---------- Notification bell ---------- */
.notif-bell-wrap { position: relative; }
.notif-badge {
  position: absolute; top: -6px; right: -6px;
  font-size: .65rem; padding: .25em .45em;
}
.notif-dropdown {
  display: none;
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 320px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  border: 1px solid #eee;
  z-index: 1050;
  overflow: hidden;
}
.notif-dropdown.open { display: block; }
.notif-dropdown-header {
  padding: .85rem 1rem;
  border-bottom: 1px solid #eee;
  display: flex; justify-content: space-between; align-items: center;
}
.notif-dropdown-body { max-height: 320px; overflow-y: auto; }
.notif-item {
  display: block;
  padding: .65rem 1rem;
  border-bottom: 1px solid #f2f2f2;
  color: inherit;
}
.notif-item:hover { background: #faf7f1; }
.notif-item:last-child { border-bottom: none; }
.notif-dropdown-footer {
  padding: .6rem 1rem;
  text-align: center;
  border-top: 1px solid #eee;
  background: #fafafa;
}

/* ---------- Body type / measurement unit ---------- */
.body-type-option {
  border: 2px solid #e5e0d5;
  border-radius: 10px;
  padding: .65rem;
  text-align: center;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
}
.body-type-option:hover { border-color: var(--brand-gold-light); }
.body-type-option.selected { border-color: var(--brand-gold); background: #fbf6ec; }
.unit-toggle .btn { min-width: 70px; }

.color-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  vertical-align: middle;
  margin-right: 4px;
}

/* ---------- Star ratings ---------- */
.star-rating-input {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  font-size: 2rem;
}
.star-rating-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-rating-input label {
  cursor: pointer;
  color: #ddd;
  padding: 0 .1rem;
  transition: color .1s ease;
}
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {
  color: var(--brand-gold);
}
.star-display { font-size: 1.1rem; color: #ddd; }
.star-display .bi-star-fill { color: var(--brand-gold); }
.star-display .bi-star { color: #ddd; }

/* ---------- Upload preview ---------- */
.upload-preview {
  margin-top: .5rem;
  max-width: 160px;
  max-height: 160px;
  border-radius: 8px;
  border: 1px solid #e5e0d5;
  display: none;
  object-fit: cover;
}

@media (max-width: 991px) {
  .admin-sidebar { position: fixed; left: -240px; z-index: 1000; transition: left .2s ease; }
  .admin-sidebar.open { left: 0; }
}