/* =====================================================================
   SMARTDEAL — SHARED THEME
   One design system, reused on every front-end page so the whole app
   looks and feels like index.html. Loaded AFTER each page's own CSS so
   it can safely override old mismatched colors/fonts.
   ===================================================================== */

:root{
  --sd-gold:      #c9a96e;
  --sd-gold-dark: #a9884f;
  --sd-olive:     #8C907E;
  --sd-olive-dark:#5e624e;
  --sd-dark:      #0e1c22;
  --sd-dark-2:    #152a33;
  --sd-ocean:     #1a5f7a;
  --sd-teal:      #2e8b9a;
  --sd-coral:     #c7694a;
  --sd-sand:      #f5efe6;
  --sd-light-bg:  #faf7f2;
  --sd-text:      #3a3a3a;
  --sd-text-muted:#8f8f8f;
  --sd-border:    #e7e0d4;
  --sd-heading-font: "Marcellus", "Cormorant Garamond", serif;
  --sd-body-font:    "Jost", Roboto, sans-serif;
  --sd-radius: 6px;
  --sd-shadow-sm: 0 2px 10px rgba(14,28,34,.06);
  --sd-shadow-md: 0 8px 30px rgba(14,28,34,.12);
}

/* ---------- Global type & color harmonisation ---------- */
body{
  font-family: var(--sd-body-font);
  color: var(--sd-text);
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--sd-heading-font);
  color: var(--sd-dark);
}
a{ color: var(--sd-ocean); }
a:hover{ color: var(--sd-gold-dark); }

/* Brand buttons — used across dashboards, forms, cards.
   Index.html's own primary color is the sage-olive tone; gold is its
   decorative accent (dividers, card borders) — mirrored here. */
.btn-primary,
.btn-brand,
button[type="submit"].btn,
.btn.btn-dark{
  background: var(--sd-olive) !important;
  border-color: var(--sd-olive) !important;
  color: #fff !important;
  border-radius: 50px;
  transition: .3s ease;
}
.btn-primary:hover,
.btn-brand:hover,
button[type="submit"].btn:hover,
.btn.btn-dark:hover{
  background: var(--sd-olive-dark) !important;
  border-color: var(--sd-olive-dark) !important;
  color: #fff !important;
}
.btn-outline-primary{
  color: var(--sd-olive-dark);
  border-color: var(--sd-olive);
  border-radius: 50px;
}
.btn-outline-primary:hover{
  background: var(--sd-olive);
  border-color: var(--sd-olive);
  color: #fff;
}
.text-primary{ color: var(--sd-olive) !important; }

/* Focus rings */
.form-control:focus,
.form-select:focus{
  border-color: var(--sd-olive);
  box-shadow: 0 0 0 .2rem rgba(140,144,126,.25);
}

/* ---------- Shared inner-page navbar (non-home pages) ---------- */
.sd-navbar{
  position: relative;
  background: var(--sd-dark);
  padding: .6rem 1.5rem;
}
.sd-navbar .navbar-brand h2,
.sd-navbar .navbar-brand{
  color: var(--sd-gold) !important;
  font-family: var(--sd-heading-font);
  letter-spacing: 1px;
}
.sd-navbar .nav-link{
  color: #f1ede4 !important;
  text-transform: uppercase;
  font-size: .92rem;
  margin-right: 1.25rem;
}
.sd-navbar .nav-link:hover,
.sd-navbar .nav-link.active{
  color: var(--sd-gold) !important;
}
.sd-navbar .dropdown-menu{ border-radius: var(--sd-radius); }
.sd-navbar .navbar-toggler{ border-color: rgba(255,255,255,.4); }
.sd-navbar .navbar-toggler-icon{
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---------- Shared compact app footer (dashboards / logged-in pages) ---------- */
.sd-app-footer{
  background: var(--sd-dark);
  color: #cfd6d3;
  padding: 1.25rem 0;
  margin-top: 3rem;
  text-align: center;
  font-size: .85rem;
}
.sd-app-footer a{ color: var(--sd-gold); text-decoration: none; }

/* ---------- Auth pages (login / register / forgot password) ---------- */
.sd-auth-shell{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  background:
    linear-gradient(rgba(14,28,34,.88), rgba(14,28,34,.88)),
    url('../images/banner-image-3.jpg') center/cover no-repeat fixed;
}
.sd-auth-shell .sd-auth-brand{
  text-align: center;
  margin-bottom: 1.75rem;
}
.sd-auth-shell .sd-auth-brand img{ height: 46px; margin-bottom: .5rem; }
.sd-auth-shell .sd-auth-brand a{
  display: inline-block;
  font-family: var(--sd-heading-font);
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.login-card,
.sd-auth-shell .card{
  border: none;
  border-top: 3px solid var(--sd-gold);
  border-radius: var(--sd-radius);
  box-shadow: var(--sd-shadow-md);
}
.login-body{
  background: transparent;
}

/* ---------- Dashboard shells (partner / admin / executive / account) ---------- */
.sd-topbar{
  background: var(--sd-dark);
  color: #f1ede4;
  padding: .65rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.sd-topbar a.sd-topbar-brand{
  color: var(--sd-gold);
  font-family: var(--sd-heading-font);
  text-decoration: none;
  font-size: 1.15rem;
  letter-spacing: .5px;
}
.sd-topbar .sd-topbar-links a{
  color: #f1ede4;
  text-decoration: none;
  margin-left: 1rem;
  font-size: .85rem;
  text-transform: uppercase;
}
.sd-topbar .sd-topbar-links a:hover{ color: var(--sd-gold); }

/* Cards used generically across account/deal/wishlist/cart pages */
.card{
  border-radius: var(--sd-radius);
}

/* Badges: keep semantic colors (danger/success/warning) for recognizability,
   but round them consistently with the rest of the UI */
.badge{ border-radius: 50px; font-weight: 500; }

/* ---------- Responsive safety net (applies everywhere) ---------- */
img{ max-width: 100%; height: auto; }

.table-responsive{ -webkit-overflow-scrolling: touch; }

@media (max-width: 991.98px){
  .sd-navbar .navbar-nav{ margin-top: .5rem; }
  .sd-navbar .nav-link{ margin-right: 0; padding: .5rem 0; }
  .sd-topbar{ justify-content: center; text-align: center; }
  .sd-topbar .sd-topbar-links{ width: 100%; text-align: center; }
  .sd-topbar .sd-topbar-links a{ margin: 0 .5rem; }
}

@media (max-width: 767.98px){
  h1{ font-size: 1.9rem; }
  h2{ font-size: 1.6rem; }
  h3{ font-size: 1.35rem; }
  .sd-auth-shell{ padding: 1.5rem .75rem; }
  .container, .container-fluid{ padding-left: 1rem; padding-right: 1rem; }
  table{ font-size: .85rem; }
}

@media (max-width: 575.98px){
  .btn{ width: 100%; }
  .btn.btn-inline, .btn-icon, .navbar-toggler{ width: auto; }
}