/* =========================================================
   Security Bank – OPS Store Custom CSS (store_v2 theme)
   Theme Configuration: Custom, store_v2,
   Primary #6F1932 / Secondary #6D625E / Body #FAF9F5
   Colors sampled from securitybankok.com (Oct 2, 2026)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

:root {
  --sb-burgundy:      #6F1932;
  --sb-burgundy-dark: #581527;
  --sb-burgundy-deep: #53091E;
  --sb-warm-gray:     #6D625E;
  --sb-cream:         #FAF9F5;
  --sb-text:          #212529;
}

/* ---------- Base typography ---------- */
body, .btn, input, select, textarea, h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', Arial, Helvetica, sans-serif !important;
}
body { color: var(--sb-text); }
h1, h2, h3, h4, h5, h6 { color: var(--sb-burgundy); font-weight: 700; }
a { color: var(--sb-burgundy); }
a:hover, a:focus { color: var(--sb-burgundy-dark); }

/* ---------- Top bar ---------- */
.top-header { background-color: var(--sb-burgundy-deep) !important; }
.top-header .bg-info { background-color: var(--sb-burgundy-deep) !important; }
.top-header a, .top-header .top-links a, .top-header .dropdown-toggle { color: #fff !important; }

/* ---------- Middle header / logo ---------- */
.middle-header { border-bottom: 4px solid var(--sb-burgundy); }
.middle-header .navbar-brand img { max-height: 90px; width: auto; }

/* ---------- Navigation bar ---------- */
.navbar, .main-menu, .header-menu, nav.bg-primary {
  background-color: var(--sb-burgundy) !important;
}
.navbar .nav-link, .main-menu a, .header-menu a { color: #fff !important; font-weight: 700; }
.navbar .nav-link:hover, .navbar .nav-item.active > .nav-link {
  background-color: var(--sb-burgundy-dark) !important;
}
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus {
  background-color: var(--sb-cream); color: var(--sb-burgundy) !important;
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-info, .btn-theme, .add-to-cart, .btn-cart,
button[type="submit"]:not(.btn-link) {
  background-color: var(--sb-burgundy) !important;
  border-color: var(--sb-burgundy) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-info:hover, .btn-theme:hover, .add-to-cart:hover,
button[type="submit"]:not(.btn-link):hover {
  background-color: var(--sb-burgundy-dark) !important;
  border-color: var(--sb-burgundy-dark) !important;
}
.btn-outline-primary {
  color: var(--sb-burgundy) !important; border-color: var(--sb-burgundy) !important;
}
.btn-outline-primary:hover { background: var(--sb-burgundy) !important; color: #fff !important; }

/* ---------- Product cards ---------- */
.card, .product-box, .product-item {
  border-radius: 6px;
  transition: box-shadow .2s, border-color .2s;
}
.card:hover, .product-box:hover, .product-item:hover {
  border-color: var(--sb-burgundy);
  box-shadow: 0 4px 14px rgba(111, 25, 50, .15);
}
.price, .product-price, .total-price, .text-primary { color: var(--sb-burgundy) !important; }

/* ---------- Forms ---------- */
.form-control:focus, .custom-select:focus {
  border-color: var(--sb-burgundy) !important;
  box-shadow: 0 0 0 .2rem rgba(111, 25, 50, .2) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--sb-burgundy) !important; border-color: var(--sb-burgundy) !important;
}

/* ---------- Footer / copyright bar ---------- */
footer, .footer, .footer-bottom, .copyright {
  background-color: var(--sb-burgundy-deep) !important;
  color: #fff !important;
}
footer *, .footer *, .footer-bottom *, .copyright * { color: #fff !important; }

/* ---------- Pagination / badges ---------- */
.page-item.active .page-link { background: var(--sb-burgundy) !important; border-color: var(--sb-burgundy) !important; }
.page-link { color: var(--sb-burgundy); }
.badge-primary { background: var(--sb-burgundy) !important; }
/* ---------- Specificity fixes for store_v2 (verified on live store) ---------- */
body .middle-header nav.navbar .navbar-nav .nav-item > a.nav-link,
body nav.navbar .navbar-nav .nav-item > a.dropdown-toggle {
  color: #fff !important; font-weight: 700; padding-left: 1.25rem; padding-right: 1.25rem;
}
body nav.navbar .navbar-nav .nav-item > a.nav-link:hover { background-color: var(--sb-burgundy-dark) !important; }
body nav.navbar .dropdown-menu a { color: var(--sb-text) !important; }
body footer.bg-info, body footer.bg-info .container { background-color: var(--sb-burgundy-deep) !important; }
body footer.bg-info p, body footer.bg-info .text-dark, body footer.bg-info a { color: #fff !important; }