/* ==========================================================================
   Swabalombi (স্বাবলম্বী) — Bootstrap 5.3 Theme
   Red  #D62828 — 60% : primary brand, logo, important CTA
   Navy #12355B — 30% : headings, navigation, secondary elements
   Gold #F4B942 — 10% : accent, highlight, premium / reward
   Usage: load AFTER bootstrap.min.css
   ========================================================================== */

/* Optional Bengali font
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');
*/

:root {
  /* ---- Brand tokens ---- */
  --sw-red: #D62828;
  --sw-red-dark: #B51F1F;
  --sw-red-light: #FBE9E9;
  --sw-red-rgb: 214, 40, 40;

  --sw-navy: #12355B;
  --sw-navy-dark: #0C2540;
  --sw-navy-light: #E7EDF4;
  --sw-navy-rgb: 18, 53, 91;

  --sw-gold: #F4B942;
  --sw-gold-dark: #E0A52E;
  --sw-gold-light: #FEF6E3;
  --sw-gold-rgb: 244, 185, 66;

  /* ---- Bootstrap theme overrides ---- */
  --bs-primary: var(--sw-red);
  --bs-primary-rgb: var(--sw-red-rgb);
  --bs-primary-text-emphasis: #561010;
  --bs-primary-bg-subtle: var(--sw-red-light);
  --bs-primary-border-subtle: #EFA9A9;

  --bs-secondary: var(--sw-navy);
  --bs-secondary-rgb: var(--sw-navy-rgb);
  --bs-secondary-text-emphasis: #071524;
  --bs-secondary-bg-subtle: var(--sw-navy-light);
  --bs-secondary-border-subtle: #A0AEBD;

  --bs-warning: var(--sw-gold);
  --bs-warning-rgb: var(--sw-gold-rgb);
  --bs-warning-bg-subtle: var(--sw-gold-light);

  --bs-link-color: var(--sw-red);
  --bs-link-color-rgb: var(--sw-red-rgb);
  --bs-link-hover-color: var(--sw-red-dark);
  --bs-link-hover-color-rgb: 181, 31, 31;

  --bs-heading-color: var(--sw-navy);
  --bs-focus-ring-color: rgba(var(--sw-red-rgb), 0.25);

  /* --bs-body-font-family: 'Hind Siliguri', system-ui, sans-serif; */
}

/* ---- Buttons ---- */
.btn-primary {
  --bs-btn-bg: var(--sw-red);
  --bs-btn-border-color: var(--sw-red);
  --bs-btn-hover-bg: var(--sw-red-dark);
  --bs-btn-hover-border-color: var(--sw-red-dark);
  --bs-btn-active-bg: var(--sw-red-dark);
  --bs-btn-active-border-color: var(--sw-red-dark);
  --bs-btn-disabled-bg: var(--sw-red);
  --bs-btn-disabled-border-color: var(--sw-red);
  --bs-btn-focus-shadow-rgb: var(--sw-red-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--sw-red);
  --bs-btn-border-color: var(--sw-red);
  --bs-btn-hover-bg: var(--sw-red);
  --bs-btn-hover-border-color: var(--sw-red);
  --bs-btn-active-bg: var(--sw-red-dark);
  --bs-btn-active-border-color: var(--sw-red-dark);
  --bs-btn-focus-shadow-rgb: var(--sw-red-rgb);
}

.btn-secondary {
  --bs-btn-bg: var(--sw-navy);
  --bs-btn-border-color: var(--sw-navy);
  --bs-btn-hover-bg: var(--sw-navy-dark);
  --bs-btn-hover-border-color: var(--sw-navy-dark);
  --bs-btn-active-bg: var(--sw-navy-dark);
  --bs-btn-active-border-color: var(--sw-navy-dark);
  --bs-btn-disabled-bg: var(--sw-navy);
  --bs-btn-disabled-border-color: var(--sw-navy);
  --bs-btn-focus-shadow-rgb: var(--sw-navy-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--sw-navy);
  --bs-btn-border-color: var(--sw-navy);
  --bs-btn-hover-bg: var(--sw-navy);
  --bs-btn-hover-border-color: var(--sw-navy);
  --bs-btn-active-bg: var(--sw-navy-dark);
  --bs-btn-active-border-color: var(--sw-navy-dark);
  --bs-btn-focus-shadow-rgb: var(--sw-navy-rgb);
}

/* Gold = premium / reward button (dark text for contrast) */
.btn-gold {
  --bs-btn-color: var(--sw-navy);
  --bs-btn-bg: var(--sw-gold);
  --bs-btn-border-color: var(--sw-gold);
  --bs-btn-hover-color: var(--sw-navy);
  --bs-btn-hover-bg: var(--sw-gold-dark);
  --bs-btn-hover-border-color: var(--sw-gold-dark);
  --bs-btn-active-color: var(--sw-navy);
  --bs-btn-active-bg: var(--sw-gold-dark);
  --bs-btn-active-border-color: var(--sw-gold-dark);
  --bs-btn-focus-shadow-rgb: var(--sw-gold-rgb);
  font-weight: 600;
}

/* ---- Navigation (Navy) ---- */
.navbar-sw {
  background-color: var(--sw-navy);
  --bs-navbar-color: rgba(255, 255, 255, 0.85);
  --bs-navbar-hover-color: var(--sw-gold);
  --bs-navbar-active-color: var(--sw-gold);
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.3);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Sidebar for admin panels */
.sidebar-sw {
  background-color: var(--sw-navy);
  color: rgba(255, 255, 255, 0.85);
}
.sidebar-sw .nav-link { color: rgba(255, 255, 255, 0.8); border-left: 3px solid transparent; }
.sidebar-sw .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.sidebar-sw .nav-link.active { color: #fff; border-left-color: var(--sw-gold); background: rgba(255, 255, 255, 0.1); }

/* ---- Form focus ---- */
.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--sw-red-rgb), 0.5);
  box-shadow: 0 0 0 0.25rem rgba(var(--sw-red-rgb), 0.15);
}
.form-check-input:checked {
  background-color: var(--sw-red);
  border-color: var(--sw-red);
}

/* ---- Pagination ---- */
.pagination {
  --bs-pagination-color: var(--sw-navy);
  --bs-pagination-hover-color: var(--sw-red);
  --bs-pagination-active-bg: var(--sw-red);
  --bs-pagination-active-border-color: var(--sw-red);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--sw-red-rgb), 0.25);
}

/* ---- Utilities ---- */
.text-sw-red  { color: var(--sw-red) !important; }
.text-sw-navy { color: var(--sw-navy) !important; }
.text-sw-gold { color: var(--sw-gold) !important; }

.bg-sw-red  { background-color: var(--sw-red) !important; color: #fff; }
.bg-sw-navy { background-color: var(--sw-navy) !important; color: #fff; }
.bg-sw-gold { background-color: var(--sw-gold) !important; color: var(--sw-navy); }

.border-sw-gold { border-color: var(--sw-gold) !important; }

.badge-gold {
  background-color: var(--sw-gold);
  color: var(--sw-navy);
  font-weight: 600;
}

/* Section title with gold underline (like the logo tagline lines) */
.sw-title {
  color: var(--sw-navy);
  font-weight: 700;
  position: relative;
  padding-bottom: 0.5rem;
}
.sw-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3px;
  background: var(--sw-gold);
  border-radius: 2px;
}
.text-center .sw-title::after,
.sw-title.text-center::after { left: 50%; transform: translateX(-50%); }

/* Brand gradient (red → navy, as in the logo wordmark) */
.bg-sw-gradient {
  background: linear-gradient(90deg, var(--sw-red) 0%, var(--sw-navy) 100%);
  color: #fff;
}

/* Premium card */
.card-premium {
  border: 1px solid var(--sw-gold);
  box-shadow: 0 4px 16px rgba(var(--sw-gold-rgb), 0.2);
}
.card-premium .card-header {
  background: var(--sw-gold-light);
  color: var(--sw-navy);
  border-bottom-color: var(--sw-gold);
}

/* Footer */
.footer-sw {
  background: var(--sw-navy-dark);
  color: rgba(255, 255, 255, 0.75);
}
.footer-sw a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.footer-sw a:hover { color: var(--sw-gold); }
/* ===== প্রোডাক্ট ইমেজ: সব পেজে একই মাপের বক্স, ছবি কাটা ছাড়া পুরোটা দেখাবে ===== */
.sw-product-media {
  height: 200px;
  background: #FAFBFC;
  overflow: hidden;
}
.sw-product-media > a,
.card-media > a {
  height: 100%;
}
.sw-product-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100% !important;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 575.98px) {
  .sw-product-media { height: 165px; }
}