@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+Bengali:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   Native Sell E-Commerce UI
   Author: Senior Frontend Engineer & UI/UX Designer
   Description: Complete production-ready stylesheet with design tokens,
                semantic brand utility classes, and custom responsive components.
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens (:root)
   ========================================================================== */
:root {
  /* Primary Brand Color (Native Sell Green) */
  --base-color: #0b7b3e;
  --base-color-rgb: 11, 123, 62;
  --base-color-hover: #086131;
  --base-color-active: #064e27;
  --base-color-light: #eef8f2;
  --base-color-subtle: #d7ede1;
  --base-color-dark: #063c1f;

  /* Secondary Accent Color (Vibrant Orange / Tag) */
  --base-two-color: #ff6b00;
  --base-two-rgb: 255, 107, 0;
  --base-two-hover: #e65c00;
  --base-two-light: #fff5ee;
  --base-two-dark: #cc5200;

  /* Semantic Framework Aliases */
  --primary-color: var(--base-color);
  --primary-color-rgb: var(--base-color-rgb);
  --secondary-color: var(--base-two-color);
  --secondary-color-rgb: var(--base-two-rgb);

  /* Semantic Component & Theme Tokens (Linked to Brand) */
  --footer-bg: var(--base-color-dark);
  --footer-border: var(--base-color-active);
  --footer-text: var(--base-color-subtle);
  --footer-link: var(--base-color-subtle);
  --footer-link-hover: var(--white);
  --trust-bar-bg: var(--base-color-light);
  --trust-bar-border: var(--base-color-subtle);

  /* Status Colors */
  --danger-color: #e53935;
  --danger-light: #fdeaea;
  --warning-color: #f59e0b;
  --warning-light: #fef3c7;
  --info-color: #0288d1;
  --info-light: #e1f5fe;

  /* Typography & Neutrals */
  --font-bn: 'Noto Sans Bengali', 'Hind Siliguri', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-en: 'Poppins', sans-serif;
  --font-fr: 'Poppins', sans-serif;
  --font-main: var(--font-bn);
  --heading-color: #1e293b;
  --text-color: #475569;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border-color: #e2e8f0;
  --border-color-light: #f1f5f9;
  --body-bg: #f8faf9;
  --card-bg: #ffffff;
  --white: #ffffff;
  --black: #0f172a;

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 12px 28px rgba(11, 123, 62, 0.12);

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 50rem;
  --card-radius-lg: 8px;
  --card-radius-sm: 4px;

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.25s ease-in-out;
  --transition-slow: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* SVG Icon Component Utility */
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  aspect-ratio: 1 / 1;
  vertical-align: -0.125em;
  fill: currentColor;
  flex-shrink: 0;
  object-fit: contain;
  transition: color 0.15s ease-in-out, fill 0.15s ease-in-out;
}
.svg-icon-colored {
  fill: initial;
}
.svg-icon.spin, .svg-icon-spin {
  animation: svg-icon-spin 1s infinite linear;
}
@keyframes svg-icon-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Specific Progress & Component Sizing Utilities */
.deal--w-60 { width: 60% !important; }
.deal--w-53 { width: 53% !important; }
.deal--w-45 { width: 45% !important; }
.deal--w-46 { width: 46% !important; }
.deal--w-50 { width: 50% !important; }
.user-avatar-placeholder { width: 40px; height: 40px; }
.qv-img { max-height: 240px; }
.qv-cart-btn { width: auto !important; height: auto !important; }
.qv-wishlist-btn { position: static !important; width: 44px !important; height: 44px !important; }

.qv-custom-modal .qv-modal-dialog {
  max-width: 900px;
}

.qv-custom-modal .qv-modal-content {
  background: #f3f3f3;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.qv-custom-modal .qv-modal-header {
  padding: 1rem 1.2rem 0;
}

.qv-custom-modal .qv-close-btn {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  border: 1px solid #dfe7ee;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  opacity: 1;
}

.qv-custom-modal .qv-modal-body {
  padding: 0.25rem 1.4rem 1.4rem;
}

.qv-custom-modal .qv-main-row {
  --bs-gutter-x: 1.4rem;
}

.qv-custom-modal .qv-image-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.qv-custom-modal .qv-image-shell {
  width: 100%;
  min-height: 340px;
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.qv-custom-modal .qv-img {
  max-height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.35));
}

.qv-custom-modal .qv-detail-panel {
  position: relative;
  padding: 0.25rem 0 0.2rem;
}

.qv-custom-modal .qv-mini-fav-btn {
  position: absolute;
  top: -8px;
  right: 0;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  border: 1px solid #dfe7ee;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-muted);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.qv-custom-modal .qv-title {
  font-size: clamp(1.5rem, 2vw, 2.25rem);
  line-height: 1.3;
  margin-bottom: 0.1rem;
}

.qv-custom-modal .qv-price {
  font-size: 2.1rem !important;
  color: var(--base-color);
  font-weight: 700;
}

.qv-custom-modal .qv-old-price {
  font-size: 1.05rem;
}

.qv-custom-modal .qv-variants-container {
  margin-top: 1rem;
}

.qv-custom-modal #qvVariantChips {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.qv-custom-modal .qv-attribute-field { min-width: 0; }
.qv-custom-modal .qv-attribute-label {
  display: block;
  margin-bottom: 6px;
  color: #334155;
  font-size: .78rem;
  font-weight: 600;
}
.qv-custom-modal .qv-attribute-select {
  width: 100%;
  min-height: 44px;
  padding: 0 34px 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  color: #334155;
  font-size: .875rem;
}
.qv-custom-modal .qv-attribute-select:focus {
  outline: 0;
  border-color: var(--base-color);
  box-shadow: 0 0 0 2px rgba(11,123,62,.12);
}
.qv-custom-modal .qv-attribute-field .select2-container { width: 100% !important; }
.qv-custom-modal .qv-attribute-field .select2-selection--single {
  height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
}
.qv-custom-modal .qv-attribute-field .select2-selection__rendered {
  padding-left: 12px;
  padding-right: 32px;
  color: #334155;
  font-size: .875rem;
  line-height: 42px;
}
.qv-custom-modal .qv-attribute-field .select2-selection__arrow {
  top: 0;
  right: 8px;
  height: 42px;
}
.qv-custom-modal .qv-attribute-field .select2-container--open .select2-selection--single,
.qv-custom-modal .qv-attribute-field .select2-selection--single:focus {
  border-color: var(--base-color);
}

.qv-custom-modal .qv-color-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}

.qv-custom-modal .qv-color-swatch {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
}
.qv-custom-modal .select2-dropdown {
  border-color: var(--base-color);
  z-index: 1080;
}

.qv-custom-modal .select2-results__option--highlighted,
.qv-custom-modal .select2-results__option--highlighted[aria-selected="true"],
.qv-custom-modal .select2-results__option[aria-selected="true"] {
  background-color: var(--base-color) !important;
  color: #ffffff !important;
}

.qv-custom-modal .qv-variant-btn {
  width: 100%;
  justify-content: space-between;
  border-radius: 14px !important;
  border: 1.5px solid #dfe7ee !important;
  background-color: rgba(255, 255, 255, 0.75);
  color: var(--heading-color);
  padding: 0.95rem 1rem;
  font-size: 0.97rem;
  font-weight: 600;
  text-align: left;
  box-shadow: none;
}

.qv-custom-modal .qv-variant-btn:hover {
  border-color: var(--base-color) !important;
  background-color: rgba(11, 123, 62, 0.05);
  color: var(--heading-color);
}

.qv-custom-modal .qv-variant-btn.active {
  border-color: var(--base-color) !important;
  background-color: rgba(11, 123, 62, 0.06);
  color: var(--heading-color);
  box-shadow: inset 0 0 0 1px rgba(11, 123, 62, 0.12);
}

.qv-custom-modal .qv-variant-btn .text--base {
  color: var(--base-color);
}

.qv-custom-modal .qv-quantity-row {
  margin-top: 0.25rem;
}

.qv-custom-modal .qv-qty-stepper {
  border: 1px solid #dfe7ee;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
}

.qv-custom-modal .qv-cta-row {
  margin-top: 0.5rem;
}

.qv-custom-modal .qv-primary-btn,
.qv-custom-modal .qv-secondary-btn {
  min-height: 52px;
  border-radius: 12px;
  font-weight: 700;
}

.qv-custom-modal .qv-primary-btn {
  flex: 1 1 220px;
  max-width: 100%;
}

.qv-custom-modal .qv-secondary-btn {
  min-width: 160px;
}

@media (max-width: 767px) {
  .qv-custom-modal .qv-modal-body {
    padding: 0.4rem 1rem 1rem;
  }

  .qv-custom-modal .qv-image-shell {
    min-height: 260px;
  }

  .qv-custom-modal .qv-mini-fav-btn {
    top: 0;
  }
}

/* Quick view variation purchase panel: mirror the product-details purchase UI. */
.qv-custom-modal .qv-modal-dialog {
  max-width: 900px;
}

.qv-custom-modal .qv-modal-content {
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 20px 55px rgba(15, 23, 42, .2);
}

.qv-custom-modal .qv-modal-header {
  position: absolute;
  inset: 0 0 auto auto;
  z-index: 4;
  padding: 14px;
}

.qv-custom-modal .qv-modal-body {
  padding: 34px 24px 26px;
}

.qv-custom-modal .qv-main-row {
  --bs-gutter-x: 22px;
  align-items: center !important;
}

.qv-custom-modal .qv-image-shell {
  min-height: 340px;
  border-radius: 18px;
  background: #172131;
  box-shadow: none;
}

.qv-custom-modal .qv-img {
  width: 100%;
  height: 340px;
  max-height: none;
  object-fit: contain;
  padding: 18px;
  filter: none;
}

.qv-custom-modal .qv-detail-panel {
  padding: 8px 0 0;
}

.qv-custom-modal .qv-mini-fav-btn {
  top: -2px;
  right: 0;
  width: 38px !important;
  height: 38px !important;
  background: #fff;
}

.qv-custom-modal .custom--badge {
  margin-bottom: 8px !important;
  border-radius: 4px;
  font-size: .72rem;
}

.qv-custom-modal .qv-title {
  max-width: calc(100% - 44px);
  font-size: 1.75rem;
  line-height: 1.28;
  margin-bottom: 4px !important;
}

.qv-custom-modal .qv-weight {
  font-size: .84rem;
  margin-bottom: 12px !important;
}

.qv-custom-modal .qv-price {
  font-size: 2rem !important;
  line-height: 1;
}

.qv-custom-modal .qv-variants-container {
  margin-top: 20px;
}

.qv-custom-modal .qv-variants-container .form-label {
  color: #475569 !important;
  font-weight: 500 !important;
}

.qv-custom-modal .qv-variant-btn {
  min-height: 54px;
  border-radius: 12px !important;
  border: 1px solid #dbe3ea !important;
  background: #fff;
  padding: .8rem 1rem;
  font-size: .9rem;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.qv-custom-modal .qv-variant-btn:hover,
.qv-custom-modal .qv-variant-btn.active {
  border-color: var(--base-color) !important;
  background: var(--base-color-light);
  box-shadow: inset 0 0 0 1px rgba(11, 123, 62, .08);
}

.qv-custom-modal .qv-quantity-row {
  margin: 16px 0 20px;
}

.qv-custom-modal .qv-qty-stepper {
  min-height: 46px;
  border-radius: 24px;
  background: #fff;
}

.qv-custom-modal .qv-primary-btn,
.qv-custom-modal .qv-secondary-btn {
  min-height: 46px;
  border-radius: 10px;
}

.qv-custom-modal .qv-primary-btn {
  flex-basis: 220px;
}

@media (max-width: 767px) {
  .qv-custom-modal .qv-modal-body { padding: 44px 16px 18px; }
  .qv-custom-modal .qv-image-shell,
  .qv-custom-modal .qv-img { min-height: 245px; height: 245px; }
  .qv-custom-modal .qv-title { font-size: 1.35rem; }
  .qv-custom-modal .qv-price { font-size: 1.7rem !important; }
}


/* ==========================================================================
   2. Global & Reset
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

body {
  font-family: var(--font-main);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--body-bg);
  margin: 0;
  padding: 0;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Tabular numbers (Equal-width monospaced digits 0-9 for all numbers across Frontend, Customer, and Vendor panels) */
.tabular-nums,
.tnum,
[data-tabular-nums],
table,
th,
td,
.table,
.table *,
.custom--table,
.table-responsive,
.product--card-price-row,
.product--card-current-price,
.product--card-old-price,
.product--distance-tag,
.product--distance-wrap,
.product--card-rating,
.product--card-rating-val,
.product--card-weight,
.vendor--distance,
.vendor--stat-value,
.vendor--stat-row,
.vendor-card,
.vendor-stat-card,
.timo-card,
.timo-card__value,
.timo-card__label,
.pdp--card-price-current,
.pdp--card-price-old,
.pdp--price-current,
.pdp--price-old,
.pdp--price-discount,
.pdp--price-struck,
.pdp--price-large,
.pdp--card-rating,
.shop--card-rating,
.shop--card-meta,
.deal--discount-tag,
.deal--stock-info,
.deal--card-price-current,
.deal--card-price-old,
.cart--item-price,
.cart--total-price,
.cart-total-amount,
.cart-summary-price,
.cart-item-subtotal,
.checkout--price,
.checkout--total,
.order--price,
.order--total,
.order-item-price,
.order-detail-amount,
.trx--amount,
.user--balance,
.badge,
.custom--badge,
.cart-counter,
.wishlist-counter,
.header-count-badge,
.mobile--bottom-nav-badge,
.nav-counter,
.notification-badge,
input[type="number"],
input[type="tel"],
.quantity-input,
[class*="price"],
[class*="amount"],
[class*="total"],
[class*="balance"],
[class*="charge"],
[class*="rate"],
[class*="fee"],
[class*="discount"],
[class*="counter"],
[class*="subtotal"] {
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum" 1, "lnum" 1 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  color: var(--heading-color);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--base-color);
}

img, svg {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font-family: inherit;
}

/* Enhanced Wide Container for Modern Desktop */
@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1280px;
  }
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1400px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==========================================================================
   3. Semantic Brand Classes (Framework Agnostic)
   ========================================================================== */
.text--base { color: var(--base-color) !important; }
.text--base-two { color: var(--base-two-color) !important; }
.text--primary { color: var(--primary-color) !important; }
.text--secondary { color: var(--secondary-color) !important; }
.text--heading { color: var(--heading-color) !important; }
.text--muted { color: var(--text-muted) !important; }

.bg--base { background-color: var(--base-color) !important; color: var(--white) !important; }
.bg--base-two { background-color: var(--base-two-color) !important; color: var(--white) !important; }
.bg--base-light { background-color: var(--base-color-light) !important; }
.bg--base-subtle { background-color: var(--base-color-subtle) !important; }
.bg--primary { background-color: var(--primary-color) !important; color: var(--white) !important; }
.bg--secondary { background-color: var(--secondary-color) !important; }
.bg--surface { background-color: var(--white) !important; }

.border--base { border-color: var(--base-color) !important; }
.border--base-two { border-color: var(--base-two-color) !important; }
.border--light { border-color: var(--border-color) !important; }

/* Reusable Buttons */
.btn--base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--base-color);
  color: var(--white);
  border: 1px solid var(--base-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-align: center;
  white-space: nowrap;
}

.btn--base:hover, .btn--base:focus-visible {
  background-color: var(--base-color-hover);
  border-color: var(--base-color-hover);
  color: var(--white);
  box-shadow: none;
  transform: none;
}

.btn--base:active {
  background-color: var(--base-color-active);
  transform: translateY(0);
}

.btn-outline--base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--base-color) !important;
  border: 1px solid var(--base-color) !important;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-align: center;
  white-space: nowrap;
}

.btn-outline--base:hover, .btn-outline--base:focus-visible {
  background-color: var(--base-color) !important;
  border-color: var(--base-color) !important;
  color: var(--white) !important;
}

.btn-outline--base.btn-sm, .btn-sm.btn-outline--base {
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
}

/* Language Switcher Styling */
.select2-lang-wrap .select2-container {
  width: 130px !important;
}

.select2-lang-wrap .select2-container .select2-selection--single {
  height: 38px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  transition: all 0.2s ease !important;
}

.select2-lang-wrap .select2-container--open .select2-selection--single,
.select2-lang-wrap .select2-container--focus .select2-selection--single {
  border-color: var(--base-color) !important;
  box-shadow: none !important;
}

.select2-lang-wrap .select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0 !important;
  padding-right: 18px !important;
  color: #1e293b !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  line-height: 36px !important;
  display: block !important;
}

.select2-lang-wrap .select2-container .select2-selection--single .select2-selection__arrow {
  height: 36px !important;
  right: 8px !important;
  display: flex !important;
  align-items: center !important;
}

.select2-lang-dropdown {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  z-index: 1060 !important;
  background: #ffffff !important;
}

.select2-lang-dropdown .select2-search,
.select2-lang-dropdown .select2-search--dropdown,
.select2-search--dropdown.select2-search--hide {
  display: none !important;
}

.select2-lang-dropdown .select2-results__option {
  padding: 8px 14px !important;
  font-size: 0.85rem !important;
  color: #334155 !important;
  transition: all 0.15s ease !important;
}

.select2-lang-dropdown .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(11, 123, 62, 0.08) !important;
  color: var(--base-color) !important;
  font-weight: 600 !important;
}

.select2-lang-dropdown .select2-results__option[aria-selected="true"] {
  background-color: var(--base-color) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.btn--base-two {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--base-two-color);
  color: var(--white);
  border: 1px solid var(--base-two-color);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn--base-two:hover {
  background-color: var(--base-two-hover);
  border-color: var(--base-two-hover);
  color: var(--white);
  box-shadow: none;
  transform: none;
}

.btn--outline-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--base-color);
  border: 1.5px solid var(--base-color);
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.btn--outline-base:hover {
  background-color: var(--base-color);
  color: var(--white);
}

.btn--pill {
  border-radius: var(--radius-pill) !important;
}

.badge--success {
  background-color: rgba(40, 199, 111, 0.15) !important;
  color: #28c76f !important;
  border: 1px solid rgba(40, 199, 111, 0.3) !important;
  font-weight: 600 !important;
  padding: 0.32rem 0.75rem !important;
  border-radius: 50rem !important;
  font-size: 0.76rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.badge--warning {
  background-color: rgba(255, 159, 67, 0.15) !important;
  color: #ff9f43 !important;
  border: 1px solid rgba(255, 159, 67, 0.3) !important;
  font-weight: 600 !important;
  padding: 0.32rem 0.75rem !important;
  border-radius: 50rem !important;
  font-size: 0.76rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.btn-outline--primary {
  color: #0b7b3e !important;
  border: 1px solid #0b7b3e !important;
  background-color: transparent !important;
}
.btn-outline--primary:hover {
  background-color: #0b7b3e !important;
  color: #ffffff !important;
}

.btn-outline--warning {
  color: #f59e0b !important;
  border: 1px solid #f59e0b !important;
  background-color: transparent !important;
}
.btn-outline--warning:hover {
  background-color: #f59e0b !important;
  color: #ffffff !important;
}

.btn-outline--success {
  color: #10b981 !important;
  border: 1px solid #10b981 !important;
  background-color: transparent !important;
}
.btn-outline--success:hover {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

/* Reusable Custom Components */
.custom--card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.custom--badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  line-height: 1.2;
}

.custom--badge-discount {
  background-color: var(--danger-color);
  color: var(--white);
}

.custom--badge-base {
  background-color: var(--base-color-light);
  color: var(--base-color);
}

.custom--badge-pill {
  border-radius: var(--radius-pill);
}

.custom--input {
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 0.9375rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  color: var(--text-color);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.custom--input:focus,
.form-control:focus,
.form-select:focus {
  outline: none !important;
  border-color: var(--base-color) !important;
  box-shadow: none !important;
}

.form-select,
.form-control,
.form-check-input,
.custom--input,
select {
  accent-color: var(--base-color);
}

.form-check-input:focus {
  border-color: var(--base-color) !important;
  box-shadow: none !important;
}

.form-check-input:checked {
  background-color: var(--base-color) !important;
  border-color: var(--base-color) !important;
}

.form-select option:checked,
.form-select option:hover,
select option:checked,
select option:hover {
  background-color: var(--base-color) !important;
  color: #ffffff !important;
}

/* Password Input with Show/Hide Toggle */
.password--input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.password--input-wrap .custom--input {
  padding-right: 2.75rem;
}

.password--toggle-btn {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.15rem;
  padding: 0.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color var(--transition-fast);
}

.password--toggle-btn:hover {
  color: var(--base-color);
}

.custom--section {
  padding: 2.25rem 0;
}

.section--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.section--title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.section--link {
  color: var(--base-color);
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all var(--transition-fast);
}
.section--link span {
  white-space: nowrap !important;
}

.section--link:hover {
  color: var(--base-color-hover);
  transform: translateX(3px);
}

/* ==========================================================================
   4. Desktop Header & Navigation
   ========================================================================== */
.site-header {
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: var(--shadow-xs);
}

/* Top Bar */
.header--top {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color-light);
}

/* Vertical centering for all header--top columns */
.header--top .row > [class*="col"] {
  display: flex;
  align-items: center;
}

.header--top .row > .col {
  display: flex;
  align-items: center;
}

.header--brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}

.header--brand-logo {
  height: 48px;
  width: auto;
  flex-shrink: 0;
}

/* Location Selector */
.header--location-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  padding: 0 0.65rem;
  height: 44px;
  min-height: 44px;
  max-width: 150px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.header--location-btn .current-location-text {
  max-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  flex: 1 1 auto;
  min-width: 0;
}

.header--location-btn:hover {
  border-color: var(--base-color);
  color: var(--base-color);
  background-color: var(--base-color-light);
}

.header--location-btn i {
  color: var(--base-color);
}

/* Search Bar */
.header--search-form {
  position: relative;
  width: 100%;
  margin: 0 !important;
  display: flex;
  align-items: center;
}

.header--search-group {
  display: flex;
  align-items: center;
  background-color: var(--white);
  border: 1.5px solid var(--base-color);
  border-radius: 8px;
  height: 44px;
  min-height: 44px;
  width: 100%;
  margin: 0 !important;
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.header--search-group:focus-within {
  box-shadow: none !important;
  outline: none !important;
}

.header--search-input,
.header--search-input:focus,
.header--search-input:focus-visible {
  flex: 1;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0.65rem 1.25rem;
  font-size: 0.95rem;
  color: var(--text-color);
}

.header--search-input::placeholder {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.header--search-mic {
  background: none;
  border: none;
  color: var(--base-color);
  font-size: 1.15rem;
  padding: 0 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: transform var(--transition-fast);
}

.header--search-mic:hover {
  transform: scale(1.1);
}

.header--search-btn {
  background-color: var(--base-color);
  border: none;
  color: var(--white);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: background-color var(--transition-fast);
}

.header--search-btn:hover {
  background-color: var(--base-color-hover);
}

/* Search Suggestions Dropdown */
.search--suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1050;
  display: none;
  overflow: hidden;
}

.search--suggestions.show {
  display: block;
  animation: fadeInDown 0.2s ease;
}

.search--suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  color: var(--text-color);
  text-decoration: none;
  border-bottom: 1px solid var(--border-color-light);
  font-size: 0.9rem;
  transition: background var(--transition-fast);
}

.search--suggestion-item:last-child {
  border-bottom: none;
}

.search--suggestion-item:hover {
  background-color: var(--base-color-light);
  color: var(--base-color);
}

/* Right Header Actions */
.header--actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header--action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--border-color-light);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all var(--transition-fast);
}

/* Fix Bootstrap Icons default line-height causing bottom padding illusion */
.header--action-btn i,
.header--location-btn i,
.header--user-btn i,
.header--lang-dropdown .dropdown-toggle i,
.header--search-btn i,
.header--search-mic i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-style: normal;
}

.header--action-btn:hover {
  background-color: var(--base-color-light);
  color: var(--base-color);
  border-color: var(--base-color);
}

.header--action-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background-color: var(--base-color);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  padding: 0 4px;
}

.header--lang-dropdown .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background-color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-color);
  white-space: nowrap;
  flex-shrink: 0;
}

.header--lang-dropdown .dropdown-toggle::after {
  margin-left: 0.25rem;
}

/* Language Dropdown Menu Theming */
.header--lang-dropdown .dropdown-menu,
.mobile--lang-dropdown .dropdown-menu,
.auth--lang-dropdown .dropdown-menu {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  padding: 6px !important;
  min-width: 140px;
  margin-top: 0.5rem !important;
}

.header--lang-dropdown .dropdown-menu.show,
.mobile--lang-dropdown .dropdown-menu.show,
.auth--lang-dropdown .dropdown-menu.show {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.header--lang-dropdown .dropdown-menu li,
.mobile--lang-dropdown .dropdown-menu li,
.auth--lang-dropdown .dropdown-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header--lang-dropdown .dropdown-menu li:not(:last-child),
.mobile--lang-dropdown .dropdown-menu li:not(:last-child),
.auth--lang-dropdown .dropdown-menu li:not(:last-child) {
  margin-bottom: 0 !important;
}

.header--lang-dropdown .dropdown-item,
.mobile--lang-dropdown .dropdown-item,
.auth--lang-dropdown .dropdown-item {
  border-radius: 4px !important;
  padding: 0.45rem 0.75rem !important;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-color);
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all var(--transition-fast);
}

.header--lang-dropdown .dropdown-item:hover,
.header--lang-dropdown .dropdown-item:focus {
  background-color: var(--base-color-light);
  color: var(--base-color);
}

.header--lang-dropdown .dropdown-item.active,
.header--lang-dropdown .dropdown-item:active {
  background-color: var(--base-color) !important;
  color: var(--white) !important;
  font-weight: 600;
}

/* Global Bootstrap Dropdown Active State Theme Override */
.dropdown-item.active, 
.dropdown-item:active {
  background-color: var(--base-color) !important;
  color: var(--white) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--base-color-light);
  color: var(--base-color);
}

/* Form Check / Inputs Theme Override */
.form-check-input:checked {
  background-color: var(--base-color) !important;
  border-color: var(--base-color) !important;
}

.form-check-input:focus {
  border-color: var(--base-color) !important;
  box-shadow: none !important;
}

.header--user-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  background-color: var(--white);
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.header--user-btn:hover {
  background-color: var(--base-color-light);
  border-color: var(--base-color);
  color: var(--base-color);
}

/* Secondary Navigation Row */
.header--bottom {
  padding: 0.4rem 0;
  background-color: var(--white);
}

.header--category-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background-color: var(--base-color);
  color: var(--white);
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  width: auto;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  white-space: nowrap !important;
  transition: background-color var(--transition-fast);
}

.header--category-btn span {
  white-space: nowrap !important;
}

.header--category-btn:hover {
  background-color: var(--base-color-hover);
  color: var(--white);
}

.header--category-btn .bi-chevron-down {
  display: inline-block;
  transition: transform var(--transition-normal);
}

.header--category-btn.show .bi-chevron-down,
.header--category-btn[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}

.header--category-menu {
  width: 275px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--border-color);
  padding: 0.5rem 0;
  margin-top: 0.5rem !important;
  overflow: visible !important;
}

.header--category-menu .category--item {
  list-style: none;
  position: static;
}

.header--category-menu .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.86rem;
  color: var(--text-color);
  transition: all var(--transition-fast);
  cursor: pointer;
  border-left: 3px solid transparent;
}

.header--category-menu .category--item:hover > .dropdown-item,
.header--category-menu .category--item.active-hover > .dropdown-item,
.header--category-menu .dropdown-item:hover {
  background-color: var(--base-color-light);
  color: var(--base-color);
  padding-left: 1.45rem;
  border-left-color: var(--base-color);
  font-weight: 600;
}

.cat--img-box {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 6px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  overflow: hidden;
}

.cat--img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.category--item:hover .cat--img-box,
.category--item.active-hover .cat--img-box {
  border-color: rgba(11, 123, 62, 0.4);
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(11, 123, 62, 0.12);
}

.header--category-menu .dropdown-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

.header--category-menu .cat--arrow {
  font-size: 0.75rem;
  color: #94a3b8;
  transition: transform 0.2s ease, color 0.2s ease;
}

.header--category-menu .category--item:hover .cat--arrow,
.header--category-menu .category--item.active-hover .cat--arrow {
  transform: translateX(4px);
  color: var(--base-color);
}

/* Subcategory Flyout Panel */
.subcat--flyout {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  width: 760px;
  max-width: min(760px, calc(100vw - 320px));
  min-height: 100%;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-left: 1px solid #e2e8f0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: 18px 18px 36px rgba(0, 0, 0, 0.09);
  padding: 0.9rem 1rem;
  z-index: 1055;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateX(8px);
  flex-direction: column;
}

.header--category-menu .category--item:hover .subcat--flyout,
.header--category-menu .category--item.active-hover .subcat--flyout {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}

/* Subcategory Panel Header */
.subcat--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color-light);
}

.subcat--header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading-color);
}

.subcat--header-title img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.subcat--header-badge {
  font-size: 0.72rem;
  background-color: var(--base-color-light);
  color: var(--base-color);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.subcat--view-all-link {
  font-size: 0.82rem;
  color: var(--base-color);
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s ease;
}

.subcat--view-all-link:hover {
  gap: 0.55rem;
  color: var(--base-color-dark);
}

/* 3-Level Subcategory Hierarchy (Category -> Subcategory -> Sub-subcategory) */
.subcat--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.subcat--col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.subcat--group-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--border-color-light);
}

.subcat--group-link {
  color: var(--heading-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s ease;
}

.subcat--group-link i {
  color: var(--base-color);
  font-size: 0.9rem;
}

.subcat--group-link:hover {
  color: var(--base-color);
}

.subcat--list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.subcat--link {
  font-size: 0.8rem;
  color: #4b5563;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0;
  transition: all 0.15s ease;
}

.subcat--link:hover {
  color: var(--base-color);
  padding-left: 5px;
  font-weight: 600;
}

.subcat--link:hover .cat--img-box {
  border-color: rgba(11, 123, 62, 0.4);
  background-color: #ffffff;
  box-shadow: 0 1px 4px rgba(11, 123, 62, 0.15);
}

.subcat--tag-hot {
  font-size: 0.68rem;
  background-color: #fee2e2;
  color: #dc2626;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}

.subcat--tag-new {
  font-size: 0.68rem;
  background-color: #e0f2fe;
  color: #0284c7;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
}

/* 2-Level Direct Subcategory Cards Grid (Category -> Subcategory) */
.subcat--direct-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.subcat--direct-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  background-color: #f8fafc;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.2s ease;
}

.subcat--direct-card:hover {
  background-color: var(--base-color-light);
  border-color: rgba(11, 123, 62, 0.35);
  box-shadow: 0 4px 12px rgba(11, 123, 62, 0.08);
}

.subcat--direct-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.subcat--direct-info {
  display: flex;
  flex-direction: column;
}

.subcat--direct-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--heading-color);
  transition: color 0.15s ease;
}

.subcat--direct-card:hover .subcat--direct-title {
  color: var(--base-color);
}

.subcat--direct-count {
  font-size: 0.74rem;
  color: #64748b;
}

/* Mixed Subcategory: Leaf Subcategory without child items */
.subcat--tag-direct {
  font-size: 0.68rem;
  background-color: #f1f5f9;
  color: #475569;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
}

.subcat--leaf-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
  background-color: #f8fafc;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all 0.2s ease;
  margin-bottom: 0.4rem;
}

.subcat--leaf-card:last-child {
  margin-bottom: 0;
}

.subcat--leaf-card:hover {
  background-color: var(--base-color-light);
  border-color: rgba(11, 123, 62, 0.35);
  box-shadow: 0 4px 12px rgba(11, 123, 62, 0.08);
}

.subcat--leaf-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.subcat--leaf-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--base-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  padding: 2px;
  overflow: hidden;
}

.subcat--leaf-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.subcat--leaf-details {
  display: flex;
  flex-direction: column;
}

.subcat--leaf-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 2px;
  transition: color 0.15s ease;
}

.subcat--leaf-card:hover .subcat--leaf-title {
  color: var(--base-color);
}

.subcat--leaf-desc {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.35;
}

.subcat--leaf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px dashed #e2e8f0;
}

.subcat--leaf-badge {
  font-size: 0.7rem;
  color: var(--base-color);
  font-weight: 600;
}

.subcat--leaf-arrow {
  font-size: 0.68rem;
  color: var(--base-color);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: gap 0.2s ease;
}

.subcat--leaf-card:hover .subcat--leaf-arrow {
  gap: 0.45rem;
}

/* Keep category thumbnails neutral; only the menu item uses the active color. */
.header--category-menu .cat--img-box,
.header--category-menu .category--item:hover .cat--img-box,
.header--category-menu .category--item.active-hover .cat--img-box,
.header--category-menu .subcat--link:hover .cat--img-box {
  border-color: #e2e8f0;
  background-color: #f8fafc;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Keep long names and action labels from breaking into narrow fragments. */
.header--category-menu .dropdown-item > .d-flex,
.subcat--header-title,
.subcat--group-link,
.subcat--link,
.subcat--leaf-top,
.subcat--leaf-details,
.subcat--leaf-bottom {
  min-width: 0;
}

.header--category-menu .dropdown-item > .d-flex > span:last-child,
.subcat--header-title > span:not(.cat--img-box):not(.subcat--header-badge),
.subcat--group-link > span:last-child,
.subcat--link .d-flex > span:last-child,
.subcat--leaf-title,
.subcat--leaf-desc {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
}

.header--category-menu .dropdown-item > .d-flex > span:last-child {
  line-height: 1.3;
}

.subcat--header {
  min-width: 0;
}

.subcat--header-title {
  flex: 1 1 auto;
  overflow: hidden;
}

.subcat--view-all-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

.subcat--leaf-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (max-width: 991.98px) {
  .subcat--flyout {
    width: min(760px, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
  }

  .subcat--header-title,
  .subcat--view-all-link,
  .subcat--group-link,
  .subcat--leaf-title,
  .subcat--leaf-desc {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

.subcat--leaf-bottom {
  gap: 0.5rem;
}

.subcat--leaf-badge,
.subcat--leaf-arrow,
.subcat--header-badge {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Keep the mega-menu focused on category names and navigation. */
.header--category-menu .subcat--header-badge,
.header--category-menu .subcat--leaf-badge {
  display: none;
}

/* Subcategory Promotional Footer Card */
.subcat--promo {
  margin-top: auto;
  padding-top: 1rem;
}

.subcat--promo-box {
  background: linear-gradient(135deg, rgba(11, 123, 62, 0.08) 0%, rgba(11, 123, 62, 0.02) 100%);
  border: 1px dashed rgba(11, 123, 62, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.subcat--promo-badge {
  background: var(--base-color);
  color: #ffffff;
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 2px;
}

.subcat--promo-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--heading-color);
  margin: 0;
}

.subcat--promo-btn {
  background: var(--base-color);
  color: #ffffff !important;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.subcat--promo-btn:hover {
  background: var(--base-color-dark);
  transform: translateY(-1px);
}

.header--nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.75rem;
}

.header--nav-link {
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--heading-color);
  padding: 0.4rem 0;
  position: relative;
  transition: color var(--transition-fast);
}

.header--nav-link:hover,
.header--nav-link.active {
  color: var(--base-color);
}

.header--nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2.5px;
  background-color: var(--base-color);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.header--nav-link:hover:not(.active)::after {
  transform: scaleX(1);
}

.header--nav-link.active::after {
  transform: scaleX(1) !important;
  transition: none !important;
}

/* ==========================================================================
   5. Mobile Header & Offcanvas
   ========================================================================== */
.mobile--header {
  display: none;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}

.mobile--header.is-sticky {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.mobile--header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.mobile--menu-toggle,
.mobile--icon-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-size: 1.15rem;
  color: var(--heading-color);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: all var(--transition-fast);
}

.mobile--menu-toggle i,
.mobile--icon-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  vertical-align: 0;
  margin: 0;
}

.mobile--menu-toggle {
  font-size: 1.25rem;
}

.mobile--menu-toggle:hover,
.mobile--menu-toggle:active,
.mobile--icon-btn:hover,
.mobile--icon-btn:active {
  background: var(--base-color-light);
  border-color: rgba(var(--base-color-rgb), 0.25);
  color: var(--base-color);
  transform: scale(0.94);
}

.mobile--brand-logo {
  height: 32px;
  width: auto;
  max-width: 135px;
  object-fit: contain;
  display: block;
}

.mobile--sidebar-logo {
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

.mobile--header-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.mobile--lang-dropdown .dropdown-menu {
  min-width: 135px;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  margin-top: 6px !important;
}

.mobile--lang-btn {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  font-size: 0.76rem !important;
  font-weight: 600;
  color: var(--heading-color);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  line-height: 32px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all var(--transition-fast);
}

.mobile--lang-btn:hover,
.mobile--lang-btn:focus,
.mobile--lang-btn.show {
  background: var(--base-color-light);
  border-color: rgba(var(--base-color-rgb), 0.35);
  color: var(--base-color);
  transform: scale(0.96);
}

.mobile--header-bottom {
  margin-top: 0.35rem;
  padding-bottom: 0.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Location Delivery Chip */
.mobile--location-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  background: rgba(var(--base-color-rgb), 0.05);
  border: 1px solid rgba(var(--base-color-rgb), 0.12);
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  color: var(--heading-color);
  cursor: pointer;
  align-self: flex-start;
  transition: all var(--transition-fast);
}

.mobile--location-chip:hover,
.mobile--location-chip:active {
  background: rgba(var(--base-color-rgb), 0.1);
  border-color: rgba(var(--base-color-rgb), 0.25);
  transform: scale(0.98);
}

.mobile--location-chip .location-label {
  color: var(--text-muted);
  font-weight: 500;
}

.mobile--location-chip .current-location-text {
  color: var(--heading-color);
}

/* Modern App-Style Search Bar */
.mobile--search-wrap {
  position: relative;
  width: 100%;
}

.mobile--search-bar {
  display: flex;
  align-items: center;
  position: relative;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px !important;
  padding: 0 0 0 0.8rem;
  height: 42px !important;
  min-height: 42px !important;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all var(--transition-fast);
}

.mobile--search-bar .mobile--search-btn {
  border-radius: 6px !important;
}

.mobile--search-bar:focus-within {
  background: #ffffff;
  border-color: var(--base-color);
  box-shadow: none !important;
}

.mobile--search-bar .mobile--search-icon {
  width: 36px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--base-color);
  font-size: 0.9rem;
  padding: 9px;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  flex-shrink: 0;
}

.mobile--search-input,
.mobile--search-input:focus,
.mobile--search-input:focus-visible {
  flex: 1;
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0.35rem 0.4rem;
  font-size: 0.85rem;
  color: var(--text-color);
  min-width: 0;
}

.mobile--search-input::placeholder {
  color: #94a3b8;
  font-size: 0.825rem;
  transition: opacity 0.25s ease;
}

.mobile--mic-btn {
  width: 36px;
  height: auto;
  border-radius: 0 7px 7px 0;
  background: var(--base-color-light);
  color: var(--base-color);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  transform: none;
  transition: all var(--transition-fast);
}

.mobile--mic-btn:hover,
.mobile--mic-btn:active {
  background: var(--base-color);
  color: var(--white);
  transform: none;
}

.mobile--search-suggestions {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 1050;
  display: none;
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}

.mobile--search-suggestions.show {
  display: block;
  animation: fadeInDown 0.2s ease;
}

/* Mobile Bottom Navigation Bar (Sticky) */
.mobile--bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--white);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  z-index: 1030;
  padding: 0.4rem 0.5rem;
}

.mobile--bottom-nav-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile--bottom-nav-item {
  flex: 1;
  text-align: center;
}

.mobile--bottom-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 400;
  gap: 0.35rem;
  text-decoration: none;
  position: relative;
  padding: 0.25rem 0;
  transition: color var(--transition-fast);
}

.mobile--bottom-nav-link i,
.mobile--bottom-nav-link svg,
.mobile--bottom-nav-link .svg-icon {
  font-size: 1.25rem;
  width: 22px;
  height: 22px;
  line-height: 1;
  display: block;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.mobile--bottom-nav-link:hover i,
.mobile--bottom-nav-link:hover svg,
.mobile--bottom-nav-link:hover .svg-icon,
.mobile--bottom-nav-link.active i,
.mobile--bottom-nav-link.active svg,
.mobile--bottom-nav-link.active .svg-icon {
  transform: translateY(-1px);
}

.mobile--bottom-nav-link span:not(.mobile--bottom-nav-badge) {
  line-height: 1.2;
  display: block;
  letter-spacing: -0.01em;
}

.mobile--bottom-nav-link.active,
.mobile--bottom-nav-link:hover {
  color: var(--base-color);
}

.mobile--nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.mobile--bottom-nav-badge {
  position: absolute;
  top: -4px;
  right: -9px;
  left: auto !important;
  background-color: var(--base-color);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  line-height: 14px;
  border-radius: 10px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 2;
}

.mobile--bottom-nav-link > .mobile--bottom-nav-badge {
  left: calc(50% + 4px) !important;
  right: auto !important;
  top: -2px !important;
}

/* Mobile Offcanvas Drawer */
.offcanvas {
  max-width: 320px;
}

.offcanvas-header {
  border-bottom: 1px solid var(--border-color-light);
  padding: 1rem 1.25rem;
}

.offcanvas-body {
  padding: 1.25rem;
}

.mobile-nav--group {
  margin-bottom: 1.5rem;
}

.mobile-nav--heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.mobile-nav--list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav--list > li {
  margin-bottom: 4px !important;
}

.mobile-nav--list > li:last-child {
  margin-bottom: 0 !important;
}

.mobile-nav--link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.75rem;
  color: var(--heading-color);
  font-weight: 400;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.mobile-nav--link i {
  font-size: 1.15rem;
  color: var(--base-color);
}

.mobile-nav--link:hover {
  background-color: rgba(11, 123, 62, 0.07);
  color: var(--base-color);
}

.mobile-nav--link.active {
  background-color: var(--base-color-light);
  color: var(--base-color);
  font-weight: 400;
}

.mobile-cat--toggle i,
.mobile-cat--toggle svg {
  transition: transform 0.2s ease;
}

.mobile-cat--toggle:not(.collapsed) i,
.mobile-cat--toggle:not(.collapsed) svg {
  transform: rotate(180deg);
}

/* ==========================================================================
   Swiper Slider Global Height & Flex Normalization
   Overrides Swiper's forced height: 100% on wrappers and slides so carousels
   naturally size to their content rather than stretching indefinitely.
   ========================================================================== */
.swiper:not(.swiper-vertical) {
  height: auto;
}

.swiper:not(.swiper-vertical) > .swiper-wrapper {
  height: auto !important;
}

.swiper:not(.swiper-vertical) > .swiper-wrapper > .swiper-slide {
  height: auto !important;
}

.hero--swiper,
.hero--swiper > .swiper-wrapper,
.hero--swiper .swiper-slide {
  height: auto !important;
}

.hero--slide {
  height: 100%;
  width: 100%;
}

.hero--btn-prev svg,
.hero--btn-next svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* ==========================================================================
   6. Hero Slider Section
   ========================================================================== */
.hero--section {
  padding: 1.25rem 0 2rem;
}

.hero--slider-wrapper {
  position: relative;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.hero--slide {
  position: relative;
  padding: 3.5rem 4rem;
  width: 100%;
  aspect-ratio: 1200 / 440;
  min-height: 280px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  text-decoration: none;
}

.hero--slide-link {
  display: block;
  cursor: pointer;
}

.hero--content {
  position: relative;
  z-index: 2;
  max-width: 580px;
}

.hero--badge {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  color: #245738;
  margin-bottom: 0.75rem;
  letter-spacing: 0.3px;
}

.hero--title {
  font-size: 2.65rem;
  font-weight: 600;
  color: #0d3d1e;
  line-height: 1.25;
  margin-bottom: 1rem;
}

.hero--desc {
  font-size: 1.08rem;
  color: #375340;
  margin-bottom: 1.75rem;
  max-width: 480px;
  line-height: 1.6;
}

/* Slider Controls */
.hero--btn-prev,
.hero--btn-next {
  width: 44px;
  height: 44px;
  background-color: var(--white);
  border-radius: 50%;
  color: var(--heading-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: all var(--transition-fast);
  border: 1px solid var(--border-color);
  padding: 0;
  line-height: 1;
}

.hero--btn-prev { left: 1rem; }
.hero--btn-next { right: 1rem; }

.hero--btn-prev i,
.hero--btn-next i {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
}

.hero--btn-prev i::before,
.hero--btn-next i::before {
  vertical-align: 0;
  line-height: 1;
  display: block;
}

.hero--btn-prev:hover,
.hero--btn-next:hover {
  background-color: var(--base-color);
  color: var(--white);
  border-color: var(--base-color);
}

.hero--pagination {
  bottom: 1rem !important;
}

.hero--pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background-color: var(--text-muted);
  opacity: 0.4;
  transition: all var(--transition-normal);
}

.hero--pagination .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: var(--radius-pill);
  background-color: var(--base-color);
  opacity: 1;
}

/* ==========================================================================
   7. Category Section
   ========================================================================== */
.category--section {
  padding: 1.5rem 0 2rem;
}

.category--card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: 8px !important;
  padding: 1.25rem 0.75rem 1rem;
  text-decoration: none;
  transition: all var(--transition-normal);
  height: 100%;
}

.category--card:hover {
  border-color: rgba(var(--base-color-rgb), 0.4);
  box-shadow: var(--shadow-hover);
}

.category--image-wrap {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  transition: transform var(--transition-normal);
}

.category--card:hover .category--image-wrap {
  transform: scale(1.1);
}

.category--image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.category--name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0;
  line-height: 1.35;
  transition: color var(--transition-fast);
}

.category--card:hover .category--name {
  color: var(--base-color);
}

/* ==========================================================================
   8. Popular Products Section & Filter Pills
   ========================================================================== */
.popular--products-section {
  padding: 1.5rem 0 2.5rem;
}

/* Filter Pills Bar */
.filter--pills-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  scrollbar-width: none; /* Firefox */
}

.filter--pills-wrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.filter--pill {
  white-space: nowrap;
  padding: 0.45rem 1.15rem;
  border-radius: 4px !important;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none !important;
  transition: all var(--transition-fast);
}

.filter--pill:hover {
  border-color: var(--base-color);
  color: var(--base-color);
  box-shadow: none !important;
}

.filter--pill.active {
  background-color: var(--base-color);
  color: var(--white);
  border-color: var(--base-color);
  box-shadow: none !important;
}

/* ==========================================================================
   9. Reusable Product Card Component
   ========================================================================== */
.product--card {
  position: relative;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all var(--transition-normal);
}

.product--card:hover {
  border-color: rgba(var(--base-color-rgb), 0.35);
  box-shadow: var(--shadow-hover);
}

.product--card-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
}

.product--card-wishlist {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--white);
  border: 1px solid var(--border-color);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  z-index: 3;
  transition: all var(--transition-fast);
}

.product--card-wishlist:hover {
  color: var(--base-color, #0b7b3e);
  border-color: var(--base-color, #0b7b3e);
  background-color: var(--base-color-light, #eef8f2);
}

.product--card-wishlist.active {
  color: var(--base-color, #0b7b3e) !important;
  background-color: var(--base-color-light, #eef8f2) !important;
  border-color: var(--base-color, #0b7b3e) !important;
}

.product--card-wishlist.active i,
.product--card-wishlist.active svg,
.product--card-wishlist.active .svg-icon {
  color: var(--base-color, #0b7b3e) !important;
  fill: var(--base-color, #0b7b3e) !important;
}

.product--card-image-wrap {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  overflow: hidden;
  cursor: pointer;
}

.product--card-image {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform var(--transition-normal);
}

.product--card:hover .product--card-image {
  transform: scale(1.06);
}

.product--card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product--card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.25rem;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product--card-title a:hover {
  color: var(--base-color);
}

.product--card-weight {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.product--card-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.product--card-current-price {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--base-color);
}

.product--card-old-price {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.product--card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.5rem;
}

.product--card-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--warning-color);
  line-height: 1;
}

.product--card-rating i,
.product--card-rating svg {
  font-size: 0.9rem;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product--card-cart-btn {
  background-color: var(--base-color);
  color: var(--white);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.product--card-cart-btn:hover {
  background-color: var(--base-color-hover);
  box-shadow: none;
  transform: none;
}

.product--card-cart-btn:active {
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   10. Promotional Banner Section (Middle Split)
   ========================================================================== */
.promo--section {
  padding: 1.5rem 0 2.5rem;
}

.promo--card {
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  position: relative;
  overflow: hidden;
  min-height: 170px;
  display: flex;
  align-items: center;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.promo--card:hover {
}

/* Left Promo (Business Ad) */
.promo--card-business {
  background-color: #eef7ee;
  border: 1px solid #d5ecd6;
}

.promo--card-business:hover {
  box-shadow: 0 8px 24px rgba(11, 123, 62, 0.12);
}

/* Right Promo (Big Deals) */
.promo--card-deals {
  background-color: #fff5f0;
  border: 1px solid #fedfd2;
}

.promo--card-deals:hover {
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.12);
}

.promo--card-content {
  position: relative;
  z-index: 2;
  max-width: 320px;
}

.promo--card-sub {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.35rem;
}

.promo--card-title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 1rem;
}

.promo--card-business .promo--card-title {
  color: var(--base-color);
}

.promo--card-deals .promo--card-title {
  color: var(--danger-color);
}

.promo--card-visual {
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.promo--card-visual img {
  max-height: 125px;
  width: auto;
  object-fit: contain;
}

/* ==========================================================================
   Top Shops Section (শীর্ষ শপসমূহ)
   ========================================================================== */
.shops--section {
  padding: 1.5rem 0 2.5rem;
}

.shop--card {
  position: relative;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  transition: all var(--transition-normal);
}

.shop--card:hover {
  border-color: rgba(var(--base-color-rgb), 0.35);
  box-shadow: var(--shadow-hover);
}

.shop--card-verified-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  color: var(--base-color);
  font-size: 1.05rem;
  line-height: 1;
}

.shop--card-logo-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--body-bg);
  border: 1.5px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  padding: 0.4rem;
  transition: transform var(--transition-normal), border-color var(--transition-fast);
}

.shop--card:hover .shop--card-logo-wrap {
  transform: scale(1.06);
  border-color: var(--base-color);
}

.shop--card-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shop--card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.2rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.shop--card-name a {
  color: inherit;
  transition: color var(--transition-fast);
}

.shop--card-name a:hover {
  color: var(--base-color);
}

.shop--card-type {
  font-size: 0.775rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.shop--card-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.775rem;
  margin-bottom: 0.45rem;
}

.shop--card-rating {
  font-weight: 600;
  color: #334155;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 0;
}

.shop--card-items {
  color: var(--text-muted);
}

.shop--card-location {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin-bottom: 0.75rem;
}

.shop--card-location i {
  color: var(--base-color);
}

.shop--card-btn {
  margin-top: auto;
  width: 100%;
  font-size: 0.8rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   11. Best Deals Section (সেরা অফার)
   ========================================================================== */
.deals--section {
  padding: 1.5rem 0 2.5rem;
}

.deal--product-card {
  position: relative;
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: all var(--transition-normal);
}

.deal--product-card:hover {
  border-color: rgba(var(--danger-color), 0.35);
  box-shadow: var(--shadow-hover);
}

.deal--discount-tag {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  background-color: var(--danger-color);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  z-index: 2;
}

.deal--progress-box {
  margin-top: 0.65rem;
  margin-bottom: 0.25rem;
}

.deal--progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.3rem;
  line-height: 1.2;
}

.deal--progress-bar {
  height: 5px;
  background-color: var(--border-color);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.deal--progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--base-two-color), var(--danger-color));
  border-radius: var(--radius-pill);
  transition: width 1s ease-in-out;
}

.deal--cart-btn {
  margin-top: 0.65rem;
  padding: 0.4rem 0.5rem;
  font-size: 0.825rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background-color: var(--base-color);
  color: var(--white);
  border: 1px solid var(--base-color);
  width: 100% !important;
  height: auto !important;
  min-height: 36px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.deal--cart-btn:hover {
  background-color: var(--base-color-hover);
  border-color: var(--base-color-hover);
  color: var(--white);
  box-shadow: none;
  transform: none;
}

.deal--cart-btn:active {
  transform: none;
  box-shadow: none;
}

.deal--cart-btn i {
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .deal--product-card {
    padding: 0.75rem 0.65rem;
  }
  .deal--cart-btn {
    padding: 0.38rem 0.35rem;
    font-size: 0.785rem;
    gap: 0.25rem;
  }
}

@media (max-width: 575.98px) {
  .deal--product-card {
    padding: 0.65rem 0.5rem;
  }
  .deal--cart-btn {
    padding: 0.35rem 0.25rem;
    font-size: 0.75rem;
    min-height: 32px;
    gap: 0.2rem;
  }
  .deal--cart-btn i {
    font-size: 0.85rem;
  }
  .deal--progress-info {
    font-size: 0.68rem;
  }
  .deal--discount-tag {
    top: 0.45rem;
    left: 0.45rem;
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
  }
}

/* ==========================================================================
   Top Brands Section (শীর্ষ ব্র্যান্ডসমূহ)
   ========================================================================== */
.brands--section {
  background-color: var(--base-color-light);
  padding: 1rem 0 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.brands--swiper {
  padding: 0.5rem 0.25rem 0.5rem;
  overflow: hidden;
}

.brand--card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 0.5rem 0.25rem;
  transition: all var(--transition-normal);
}

.brand--card-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: var(--white);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: 0 auto 0.85rem;
  transition: all var(--transition-normal);
  border: 1px solid #eaedf1;
  overflow: hidden;
}

.brand--card:hover .brand--card-circle {
  box-shadow: none;
  border-color: var(--base-color);
}

.brand--card-logo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--transition-normal);
}

.brand--card:hover .brand--card-logo {
  transform: scale(1.06);
}

.brand--card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.25rem;
  line-height: 1.3;
  transition: color var(--transition-fast);
}

.brand--card:hover .brand--card-name {
  color: var(--base-color);
}

.brand--card-category {
  font-size: 0.825rem;
  color: var(--text-muted);
  line-height: 1.3;
  font-weight: 500;
}

@media (max-width: 767.98px) {
  .brand--card-circle {
    width: 96px;
    height: 96px;
    padding: 8px;
    margin-bottom: 0.65rem;
  }
  .brand--card-logo {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  .brand--card-name {
    font-size: 0.9rem;
  }
  .brand--card-category {
    font-size: 0.75rem;
  }
}


/* ==========================================================================
   12. Free Services & Support Section (ফ্রি সার্ভিস ও সহায়তা)
   ========================================================================== */
.services-hero-banner {
  position: relative;
  background-color: transparent;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  padding: 2.5rem 0 3rem;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}
.services-hero-banner.has-bg-img {
  background-color: #062a17;
  padding: 3.25rem 0 3.75rem;
  min-height: 480px;
}
.services-hero-overlay {
  display: none;
}
.services-hero-banner.has-bg-img .services-hero-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(3, 25, 12, 0.90) 0%, rgba(3, 25, 12, 0.76) 32%, rgba(3, 25, 12, 0.20) 54%, transparent 74%);
  z-index: 1;
}
.services-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-layout-wrapper {
  position: relative;
  width: 100%;
}

/* 1. Large Desktop Viewports (>= 1200px) */
@media (min-width: 1200px) {
  .hero-layout-wrapper {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }
  .hero-title-block {
    max-width: 530px;
    position: relative;
    z-index: 2;
  }
  .hero-search-block {
    max-width: 530px;
    position: relative;
    z-index: 2;
  }
  .hero-center-slogan-wrap {
    position: absolute;
    top: 10px;
    left: 49%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: auto;
    max-width: 360px;
    transform: rotate(-8.5deg);
    transform-origin: center center;
  }
  .hero-topright-checklist-wrap {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }
  .hero-slogan-text {
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1e293b;
    text-align: center;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.45);
  }
  .hero-slogan-curve-wrap {
    width: 250px;
    max-width: 100%;
    margin-top: 0.35rem;
  }
}

/* 2. Medium Tablets & Small Laptops (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .services-hero-banner.has-bg-img {
    min-height: 430px;
    padding: 2.75rem 0 3.25rem;
  }
  .hero-layout-wrapper {
    min-height: 410px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
  }
  .hero-title-block {
    max-width: 47%;
    position: relative;
    z-index: 2;
  }
  .hero-search-block {
    max-width: 47%;
    position: relative;
    z-index: 2;
  }
  .services-hero-title {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem) !important;
  }
  .hero-title-curve-wrap {
    width: 240px !important;
  }
  .services-hero-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
  }
  .hero-center-slogan-wrap {
    position: absolute;
    top: 10px;
    left: 46%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: auto;
    max-width: 280px;
    transform: rotate(-7deg);
    transform-origin: center center;
  }
  .hero-slogan-text {
    font-size: 1.15rem !important;
    font-weight: 600;
    color: #1e293b;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.45);
  }
  .hero-slogan-curve-wrap {
    width: 200px !important;
    margin-top: 0.3rem;
  }
  .hero-topright-checklist-wrap {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }
  .hero-trust-checklist {
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
  }
  .hero-trust-checklist-item {
    font-size: 0.8rem !important;
    gap: 0.45rem !important;
  }
}

/* 3. Mobile Devices (< 768px) */
@media (max-width: 767px) {
  .services-hero-banner.has-bg-img {
    min-height: auto;
    padding: 2.25rem 0 2.5rem;
    background-position: center right 20%;
  }
  .services-hero-banner.has-bg-img .services-hero-overlay {
    background: linear-gradient(180deg, rgba(3, 25, 12, 0.94) 0%, rgba(3, 25, 12, 0.84) 45%, rgba(3, 25, 12, 0.92) 100%);
  }
  .hero-layout-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .hero-title-block {
    order: 1;
    width: 100%;
    text-align: center;
  }
  .services-hero-title {
    font-size: clamp(1.6rem, 5.5vw, 2.1rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.3rem !important;
  }
  .hero-title-curve-wrap {
    width: 230px !important;
    margin: 0 auto 1rem !important;
  }
  .services-hero-subtitle {
    font-size: 0.88rem !important;
    margin: 0 auto 1.25rem !important;
    max-width: 100% !important;
  }
  .hero-center-slogan-wrap {
    order: 2;
    position: static;
    margin: 1.5rem auto 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 320px;
    transform: rotate(-4deg);
    transform-origin: center center;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 14px;
    padding: 0.9rem 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }
  .hero-slogan-text {
    font-size: 1.15rem !important;
    font-weight: 600;
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  }
  .hero-slogan-curve-wrap {
    width: 200px !important;
    margin-top: 0.3rem;
  }
  .hero-topright-checklist-wrap {
    order: 3;
    position: static;
    margin-top: 0.5rem;
    width: 100%;
  }
  .hero-trust-checklist {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem 0.75rem !important;
    width: 100% !important;
    background: rgba(4, 34, 18, 0.88) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    padding: 0.9rem 1rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  }
  .hero-trust-checklist-item {
    font-size: 0.82rem !important;
    gap: 0.45rem !important;
    justify-content: flex-start !important;
  }
  .hero-search-block {
    order: 4;
    width: 100%;
    margin-top: 1.75rem;
    text-align: center;
  }
  .hero-search-box-wrap {
    margin: 0 auto 1rem !important;
    max-width: 100% !important;
  }
  .hero-popular-cities-wrap {
    justify-content: center;
  }
}

.hero-slogan-curve-svg {
  width: 100%;
  height: auto;
  display: block;
}
.hero-trust-checklist {
  background: rgba(4, 34, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 0.95rem 1.35rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.65rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.hero-trust-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.hero-trust-checklist-item i {
  color: #22c55e;
  font-size: 1.15rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.services-hero-title {
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  font-weight: 600;
  color: #1e293b;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}
.services-hero-banner.has-bg-img .services-hero-title {
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.hero-title-curve-wrap {
  width: 280px;
  max-width: 85%;
  margin-top: 0.15rem;
  margin-bottom: 1.15rem;
}
.hero-title-curve-svg {
  width: 100%;
  height: auto;
  display: block;
}
.services-hero-subtitle {
  font-size: clamp(0.92rem, 1.5vw, 1.05rem);
  color: #64748b;
  max-width: 560px;
  margin-bottom: 1.5rem;
  line-height: 1.65;
}
.services-hero-banner.has-bg-img .services-hero-subtitle {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.hero-search-box-wrap {
  max-width: 520px;
  margin-bottom: 1.15rem;
}
.hero-search-box-wrap .input-group {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.3rem 0.4rem 0.3rem 0.9rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.services-hero-banner.has-bg-img .hero-search-box-wrap .input-group {
  border: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.hero-search-box-wrap .form-control {
  border: none;
  background: transparent;
  font-size: 0.9rem;
  box-shadow: none;
}
.hero-search-box-wrap .btn--search {
  background-color: var(--base-color, #0b7b3e);
  color: #ffffff;
  border-radius: 6px;
  padding: 0.48rem 1.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  transition: all var(--transition-fast);
}
.hero-search-box-wrap .btn--search:hover {
  background-color: var(--base-color-hover, #086131);
  color: #ffffff;
}
.hero-geo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 1.15rem;
  transition: all var(--transition-fast);
}
.hero-geo-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.services-hero-banner.has-bg-img .hero-geo-btn {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
}
.services-hero-banner.has-bg-img .hero-geo-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
}
.hero-popular-cities-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: #64748b;
}
.services-hero-banner.has-bg-img .hero-popular-cities-wrap {
  color: rgba(255, 255, 255, 0.95);
}
.hero-popular-cities-wrap .city-pill {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  padding: 0.22rem 0.8rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}
.hero-popular-cities-wrap .city-pill:hover,
.hero-popular-cities-wrap .city-pill.active {
  background: var(--base-color);
  border-color: var(--base-color);
  color: #ffffff;
}
.services-hero-banner.has-bg-img .hero-popular-cities-wrap .city-pill {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
.services-hero-banner.has-bg-img .hero-popular-cities-wrap .city-pill:hover,
.services-hero-banner.has-bg-img .hero-popular-cities-wrap .city-pill.active {
  background: var(--base-color);
  border-color: var(--base-color);
  color: #ffffff;
}
.hero-popular-cities-wrap .city-more-pill {
  letter-spacing: 1px;
  font-weight: 600;
  padding: 0.22rem 0.6rem;
  cursor: pointer;
}

/* Feature / Benefits Bar (4 Items under Hero) */
.feature-benefits-bar {
  background: transparent;
  border-bottom: none;
  padding: 1.25rem 0 0.5rem 0;
  margin-bottom: 1.5rem;
  box-shadow: none;
}
.benefit-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.benefit-circle-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.benefit-circle-icon.red { background-color: #e53935; }
.benefit-circle-icon.teal { background-color: #00897b; }
.benefit-circle-icon.blue { background-color: #1e88e5; }
.benefit-circle-icon.orange { background-color: #fb8c00; }
.benefit-text-wrap h6 {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
  color: #1e293b;
}
.benefit-text-wrap p {
  font-size: 0.78rem;
  color: #64748b;
  margin-bottom: 0;
  line-height: 1.3;
}

/* Section Header with Green Left Bar */
.section-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: 0.75rem;
  flex-wrap: nowrap;
}
.section-header-bar > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.section-title-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}
.section-title-bar::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.15rem;
  background-color: var(--base-color);
  border-radius: 2px;
}
.section-link-bar {
  color: var(--base-color);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: gap var(--transition-fast);
}
.section-link-bar span {
  white-space: nowrap !important;
}
.section-link-bar:hover {
  color: var(--base-color-hover);
  gap: 0.5rem;
}

/* 5 Community Service Cards matching screenshot */
.community-service-card {
  background: #ffffff;
  border: 1px solid #e8ece9;
  border-radius: 14px;
  padding: 1.35rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  height: 100%;
  transition: all var(--transition-normal);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.community-service-card:hover {
  border-color: var(--base-color);
  box-shadow: 0 10px 22px rgba(11, 123, 62, 0.09);
}
.comm-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  margin-bottom: 0.85rem;
}
.comm-icon-box.green { background-color: #e8f5e9; color: #2e7d32; }
.comm-icon-box.blue { background-color: #e3f2fd; color: #1565c0; }
.comm-icon-box.pink { background-color: #fce4ec; color: #c2185b; }
.comm-icon-box.purple { background-color: #f3e5f5; color: #7b1fa2; }
.comm-icon-box.red { background-color: #ffebee; color: #c62828; }
.comm-icon-box.orange { background-color: #fff3e0; color: #e65100; }
.comm-icon-box.teal { background-color: #e0f2f1; color: #00796b; }
.comm-icon-box.amber { background-color: #fef3c7; color: #d97706; }
.comm-icon-box.indigo { background-color: #e0e7ff; color: #4338ca; }

.free-services--swiper .swiper-slide {
  height: auto !important;
  display: flex;
}
.free-services--swiper .swiper-slide .community-service-card {
  width: 100%;
}
.comm-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.4rem;
}
.comm-card-desc {
  font-size: 0.78rem;
  color: #64748b;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  flex-grow: 1;
}
.comm-card-link {
  color: var(--base-color);
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Popular City Cards matching screenshot */
.city-photo-card {
  background: #ffffff;
  border: 1px solid #e8ece9;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: all var(--transition-normal);
}
.city-photo-card:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}
.city-photo-img-wrap {
  height: 110px;
  background-color: #f1f5f9;
  overflow: hidden;
}
.city-photo-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.city-photo-card:hover .city-photo-img-wrap img {
  transform: scale(1.06);
}
.city-photo-info {
  padding: 0.65rem 0.75rem;
}
.city-photo-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.1rem;
}
.city-photo-count {
  font-size: 0.75rem;
  color: #64748b;
}

.services--section {
  padding: 1.5rem 0 3rem;
}

.service--card {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: all var(--transition-normal);
  height: 100%;
}

.service--card:hover {
  border-color: var(--base-color);
  box-shadow: var(--shadow-hover);
}

.service--card-icon-wrap {
  width: 52px;
  height: 52px;
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service--card-icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service--card-title-en {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.15rem;
}

.service--card-title-bn {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.service--card-link {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--base-color);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: gap var(--transition-fast);
}

.service--card:hover .service--card-link {
  gap: 0.45rem;
}

/* ==========================================================================
   13. Floating Buttons (Scroll to Top & WhatsApp)
   ========================================================================== */
.floating--buttons-group {
  position: fixed;
  bottom: 2rem;
  right: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  z-index: 1010;
}

.floating--btn-scrolltop {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--base-color);
  color: var(--white);
  border: none;
  box-shadow: 0 4px 14px rgba(11, 123, 62, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-normal);
}

.floating--btn-scrolltop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.floating--btn-scrolltop:hover {
  background-color: var(--base-color-hover);
  transform: translateY(-2px);
}

.floating--btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #25d366;
  color: var(--white);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition-normal);
}

.floating--btn-whatsapp i {
  font-size: 1.35rem;
}

.floating--btn-whatsapp:hover {
  background-color: #20ba59;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* ==========================================================================
   13.5. Trust / Information Bar (Directly Above Footer)
   ========================================================================== */
.trust-info-bar {
  background-color: var(--trust-bar-bg);
  border-top: 1px solid var(--trust-bar-border);
  border-bottom: 1px solid var(--trust-bar-border);
  padding: 1rem 0;
  width: 100%;
}

.trust-info-bar--wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.trust-info-bar--item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex: 1;
}

.trust-info-bar--item:first-of-type {
  justify-content: flex-start;
  text-align: left;
}

.trust-info-bar--item:nth-of-type(2) {
  justify-content: center;
  text-align: center;
}

.trust-info-bar--item:last-of-type {
  justify-content: flex-end;
  text-align: right;
}

.trust-info-bar--icon {
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  color: var(--base-color);
}

.trust-info-bar--text {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--heading-color);
  letter-spacing: 0.01em;
}

.trust-info-bar--divider {
  width: 1px;
  height: 22px;
  background-color: var(--border-color);
  opacity: 0.7;
  flex-shrink: 0;
}

@media (max-width: 991.98px) {
  .trust-info-bar--text {
    font-size: 0.85rem;
  }
  .trust-info-bar--wrapper {
    gap: 1rem;
  }
}

@media (max-width: 767.98px) {
  .trust-info-bar {
    padding: 1rem 0;
  }
  .trust-info-bar--wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0 0.5rem;
  }
  .trust-info-bar--item,
  .trust-info-bar--item:first-of-type,
  .trust-info-bar--item:nth-of-type(2),
  .trust-info-bar--item:last-of-type {
    justify-content: flex-start !important;
    width: 100%;
    text-align: left !important;
    gap: 0.75rem;
  }
  .trust-info-bar--divider {
    display: none;
  }
  .trust-info-bar--text {
    font-size: 0.88rem;
  }
}

/* ==========================================================================
   14. Footer
   ========================================================================== */
.site-footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  padding: 2.5rem 0 1.5rem;
  border-top: 1px solid var(--footer-border);
}

.footer--brand-logo {
  height: 48px;
  width: auto;
  margin-bottom: 1.25rem;
}

.footer--bio {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--footer-text);
  margin-bottom: 1.5rem;
  max-width: 320px;
}

.footer--social-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer--social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: all var(--transition-fast);
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
}

.footer--social-btn svg,
.footer--social-btn .svg-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.footer--social-btn:hover {
  background-color: var(--base-color);
  color: var(--white);
  transform: none;
}

.footer--heading {
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 1.25rem;
  padding-bottom: 8px;
}

/* Menu Underline Base Track: Matches exact Bengali text width */
.footer--heading::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

/* Menu Underline Highlight Sweep: Continuous seamless wrapping Left → Right */
.footer--heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(var(--base-color-rgb), 0.5) 25%,
    var(--base-color-subtle) 45%,
    #ffffff 50%,
    var(--base-color-subtle) 55%,
    rgba(var(--base-color-rgb), 0.5) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 140px 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
  filter: drop-shadow(0 0 3px rgba(var(--base-color-rgb), 0.8));
  animation: menuUnderlineSweep 3.5s linear infinite;
}

/* Reusable Underline Animation Class */
.menu-underline-animated {
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 8px;
}

.menu-underline-animated::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.menu-underline-animated::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(var(--base-color-rgb), 0.5) 25%,
    var(--base-color-subtle) 45%,
    #ffffff 50%,
    var(--base-color-subtle) 55%,
    rgba(var(--base-color-rgb), 0.5) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 140px 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
  filter: drop-shadow(0 0 3px rgba(var(--base-color-rgb), 0.8));
  animation: menuUnderlineSweep 3.5s linear infinite;
}

@keyframes menuUnderlineSweep {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 140px 0;
  }
}

.footer--nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer--nav-item {
  margin-bottom: 0.65rem;
}

.footer--nav-link {
  font-size: 0.9rem;
  color: var(--footer-link);
  transition: all var(--transition-fast);
}

.footer--nav-link:hover {
  color: var(--footer-link-hover);
  padding-left: 4px;
}

.footer--subscribe-desc {
  font-size: 0.9rem;
  color: var(--footer-text);
  margin-bottom: 1rem;
}

.footer--subscribe-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.footer--subscribe-input {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.95);
  color: var(--heading-color);
  font-size: 0.9rem;
  outline: none;
}

.footer--subscribe-btn {
  background-color: var(--base-color);
  color: var(--white);
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.footer--subscribe-btn:hover {
  background-color: var(--base-color-hover);
}

.footer--payments {
  margin-top: 1.25rem;
}

.footer--payments-label {
  font-size: 0.8rem;
  color: var(--footer-text);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.footer--payments-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.footer--payment-img {
  height: 28px;
  width: auto;
  border-radius: 4px;
}

/* Footer Bottom Bar */
.footer--bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer--copy {
  font-size: 0.85rem;
  color: var(--footer-text);
  margin: 0;
}

.footer--apps {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer--app-badge {
  height: 36px;
  width: auto;
}

/* ==========================================================================
   15. Modals & Notifications
   ========================================================================== */
.custom--modal .modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}

.custom--modal .modal-header {
  border-bottom: 1px solid var(--border-color-light);
  padding: 1.25rem 1.5rem;
}

.custom--modal .btn-close {
  cursor: pointer;
  z-index: 10;
  position: relative;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.custom--modal .btn-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

.custom--modal .modal-footer {
  border-top: 1px solid var(--border-color-light);
  padding: 1rem 1.5rem;
}

/* Delivery Location Modal with Map & Search */
.location--modal .modal-dialog {
  max-width: 600px;
}

.location--modal .modal-content {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.map--search-bar-container {
  padding: 0.75rem 1rem;
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
}

.map--search-input-group {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-pill);
  background-color: var(--white);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.map--search-input-group:focus-within {
  border-color: var(--base-color);
  box-shadow: none !important;
}

.map--search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
  pointer-events: none;
  z-index: 5;
}

.map--search-input {
  width: 100%;
  height: 44px;
  border: none;
  padding: 0 95px 0 44px;
  font-size: 0.925rem;
  outline: none;
  color: var(--text-color);
  background: transparent;
}

.map--clear-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  display: none;
}

.map--clear-btn.show {
  display: inline-flex;
}

.map--clear-btn:hover {
  color: var(--danger-color);
}

.map--gps-btn {
  background-color: #dc2626;
  color: var(--white);
  border: none;
  padding: 0.65rem 0.85rem;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.map--gps-btn:hover {
  background-color: #b91c1c;
}

.map--go-btn {
  background-color: #f59e0b;
  color: #1e293b;
  border: none;
  padding: 0.65rem 1.15rem;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.map--go-btn:hover {
  background-color: #d97706;
  color: var(--white);
}

/* Interactive Map Canvas */
.map--canvas-area {
  position: relative;
  height: 290px;
  width: 100%;
  overflow: hidden;
  background-color: #f1f5f9;
  cursor: crosshair;
  user-select: none;
}

.map--image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Center Pin & Pulse Animation */
.map--pin-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: top 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), left 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.map--pin-icon {
  font-size: 2.5rem;
  color: #dc2626;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
  line-height: 1;
}

.map--pin-pulse {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 24px;
  height: 10px;
  background: rgba(220, 38, 38, 0.3);
  border-radius: 50%;
  animation: mapPulse 2s infinite ease-out;
}

@keyframes mapPulse {
  0% {
    transform: translate(-50%, 50%) scale(0.6);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 50%) scale(2.4);
    opacity: 0;
  }
}

/* Map Controls */
.map--controls {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.map--control-btn {
  width: 32px;
  height: 32px;
  background: var(--white);
  border: none;
  color: var(--text-color);
  font-size: 1.15rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.map--control-btn:hover {
  background-color: var(--base-color-light);
  color: var(--base-color);
}

.map--control-btn:first-child {
  border-bottom: 1px solid var(--border-color);
}

/* Address Card */
.map--address-card {
  background-color: var(--base-color-light);
  border-top: 1px solid rgba(var(--base-color-rgb), 0.15);
  border-bottom: 1px solid rgba(var(--base-color-rgb), 0.15);
}

.map--address-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--base-color);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.map--address-title {
  font-size: 0.95rem;
  line-height: 1.3;
}

.map--city-pill {
  border: 1px solid var(--border-color);
  background-color: var(--white);
  color: var(--text-color);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.85rem;
  transition: all var(--transition-fast);
}

.map--city-pill:hover,
.map--city-pill.active {
  background-color: var(--base-color);
  color: var(--white);
  border-color: var(--base-color);
}

.btn-confirm-location {
  background-color: #f59e0b;
  color: #1e293b;
  border: 1px solid #d97706;
  font-weight: 600;
  padding: 0.55rem 1.4rem;
}

.btn-confirm-location:hover {
  background-color: #d97706;
  color: var(--white);
}

/* Toast alert notification */
.toast-container {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 1090;
}

.custom--toast {
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 280px;
  animation: slideInUp 0.3s ease;
}

.custom--toast-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--base-color-light);
  color: var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

/* Variant Selection & Quantity Stepper in Quick View Modal */
.qv-variant-btn {
  border: 1.5px solid var(--border-color);
  background-color: var(--white);
  color: var(--text-color);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.85rem;
  font-size: 0.825rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.qv-variant-btn:hover {
  border-color: var(--base-color);
  color: var(--base-color);
  background-color: var(--base-color-light);
}

.qv-variant-btn.active {
  border-color: var(--base-color);
  background-color: var(--base-color);
  color: var(--white);
  box-shadow: 0 2px 6px rgba(var(--base-color-rgb), 0.25);
}

.product--qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background-color: var(--white);
}

.product--qty-stepper .qty-minus-btn,
.product--qty-stepper .qty-plus-btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0.65rem;
  font-size: 0.9rem;
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.product--qty-stepper .qty-minus-btn:hover,
.product--qty-stepper .qty-plus-btn:hover {
  background-color: var(--base-color-light);
  color: var(--base-color);
}

.product--qty-stepper .qty-input {
  width: 44px;
  border: none;
  background: transparent;
  padding: 0;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-color);
  box-shadow: none;
}

/* ==========================================================================
   16. Responsive Media Queries
   ========================================================================== */

/* Large Desktop */
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1400px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Laptops & Medium Desktops (992px - 1399px) - Prevent Header Wrapping */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .header--top .row {
    flex-wrap: nowrap !important;
  }

  .header--brand-logo {
    height: 38px;
    width: auto;
    max-width: 145px;
  }

  .header--location-btn {
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
    gap: 0.25rem;
    max-width: 135px;
    white-space: nowrap;
  }

  .header--location-btn .current-location-text {
    max-width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
  }

  .header--search-group {
    border-width: 1.5px;
  }

  .header--search-input {
    padding: 0.4rem 0.75rem;
    font-size: 0.825rem;
  }

  .header--search-btn {
    padding: 0 0.85rem;
    font-size: 0.85rem;
  }

  .header--search-mic {
    padding: 0 0.35rem;
    font-size: 0.85rem;
  }

  .header--actions {
    gap: 0.35rem !important;
  }

  .header--lang-dropdown .dropdown-toggle {
    padding: 0.35rem 0.5rem;
    font-size: 0.78rem;
    gap: 0.25rem;
  }

  .header--action-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    font-size: 1.05rem;
  }

  .header--user-btn {
    padding: 0.38rem 0.75rem;
    font-size: 0.8rem;
    gap: 0.3rem;
  }

  /* Secondary Bottom Navigation Row */
  .header--category-btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    gap: 0.4rem;
  }

  .header--nav-list {
    gap: 0.45rem;
  }

  .header--nav-link {
    font-size: 0.825rem;
    padding: 0.45rem 0.35rem;
    white-space: nowrap;
  }
}

/* Desktop & Tablets (<= 991px) */
@media (max-width: 991.98px) {
  .site-header {
    display: none !important; /* Switch to dedicated mobile header */
  }

  .mobile--header {
    display: block !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1040 !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--border-color);
  }

  .mobile--bottom-nav {
    display: block;
  }

  body {
    padding-top: 56px !important; /* Offset for fixed top mobile header */
    padding-bottom: 60px; /* Offset for sticky bottom nav */
  }

  /* Hide slider pagination dots on mobile */
  .swiper-pagination,
  .hero--slider .swiper-pagination,
  .swiper-pagination-bullets,
  .swiper-horizontal > .swiper-pagination-bullets {
    display: none !important;
  }

  .hero--slide {
    padding: 2rem 1.5rem;
    min-height: 320px;
  }

  .hero--title {
    font-size: 2rem;
  }

  .hero--desc {
    font-size: 0.95rem;
  }

  .hero--image {
    max-height: 240px;
  }

  .floating--buttons-group {
    bottom: 4.5rem; /* Avoid covering bottom nav */
    right: 1rem;
  }

  .floating--btn-whatsapp span {
    display: none; /* Icon only on mobile */
  }

  .floating--btn-whatsapp {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .promo--card {
    margin-bottom: 1rem;
  }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .category--grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
  }
}

/* Mobile Screens (<= 767.98px) */
@media (max-width: 767.98px) {
  .custom--section {
    padding: 1.5rem 0;
  }

  .section--title {
    font-size: 1.25rem;
  }

  /* Hero Slider Mobile Layout */
  .hero--slide {
    flex-direction: column;
    text-align: left;
    padding: 1.5rem 1rem;
    min-height: 280px;
    justify-content: center;
    align-items: flex-start;
  }

  .hero--content {
    order: unset;
    margin-top: 0;
    max-width: 65%;
  }

  .hero--title {
    font-size: 1.85rem;
  }

  .hero--desc {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
  }

  .hero--btn-prev, .hero--btn-next {
    display: none; /* Swipe on mobile */
  }

  /* Mobile Categories Scroll */
  .category--scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }

  .category--scroll-container::-webkit-scrollbar {
    display: none;
  }

  .category--scroll-item {
    flex: 0 0 95px;
  }

  .category--card {
    padding: 0.85rem 0.5rem;
  }

  .category--image-wrap {
    width: 54px;
    height: 54px;
  }

  .category--name {
    font-size: 0.8rem;
  }

  /* 2-Column Product Grid for Mobile */
  .product--grid-mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .product--card {
    padding: 0.75rem;
  }

  .product--card-image-wrap {
    height: 110px;
  }

  .product--card-title {
    font-size: 0.85rem;
  }

  .product--card-current-price {
    font-size: 1rem;
  }

  .product--card-old-price {
    font-size: 0.75rem;
  }

  .product--card-cart-btn {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  /* Shop Cards Mobile */
  .shop--card {
    padding: 0.85rem 0.5rem 0.75rem;
  }

  .shop--card-logo-wrap {
    width: 52px;
    height: 52px;
    margin-bottom: 0.5rem;
  }

  .shop--card-name {
    font-size: 0.85rem;
  }

  .shop--card-type {
    font-size: 0.7rem;
    margin-bottom: 0.35rem;
  }

  .shop--card-meta {
    font-size: 0.7rem;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
  }

  .shop--card-location {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
  }

  .shop--card-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
  }

  /* Brand Cards Mobile */
  .brand--card {
    padding: 0.5rem 0.25rem;
  }

  .brand--card-circle {
    width: 90px;
    height: 90px;
    padding: 8px;
    margin-bottom: 0.5rem;
  }

  .brand--card-logo {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .brand--card-name {
    font-size: 0.85rem;
  }

  .brand--card-category {
    font-size: 0.725rem;
  }

  /* Promotional Cards */
  .promo--card {
    padding: 1.25rem;
    flex-direction: column;
    text-align: center;
  }

  .promo--card-content {
    max-width: 100%;
    margin-bottom: 1rem;
  }

  .promo--card-visual {
    margin: 0 auto;
  }

  .promo--card-title {
    font-size: 1.4rem;
  }

  /* Footer adjustments */
  .site-footer {
    padding: 2.5rem 0 1.5rem;
  }

  .footer--bottom {
    margin-top: 2rem;
    flex-direction: column-reverse;
    text-align: center;
  }
}

/* Small Mobiles (360px - 430px) */
@media (max-width: 430px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Compact Hero Slider & No Title/Product Image Overlap */
  .hero--section {
    padding: 0.5rem 0 1rem !important;
  }

  .hero--slide {
    padding: 1rem 0.85rem !important;
    min-height: 180px !important;
    justify-content: center !important;
    align-items: flex-start !important;
  }

  .hero--content {
    max-width: 62% !important;
  }

  .hero--badge {
    font-size: 0.72rem !important;
    padding: 0.2rem 0.5rem !important;
    margin-bottom: 0.35rem !important;
  }

  .hero--title {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.35rem !important;
    word-break: break-word !important;
  }

  .hero--desc {
    font-size: 0.78rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .hero--content .btn {
    padding: 0.3rem 0.75rem !important;
    font-size: 0.78rem !important;
  }

  /* Hide Review Count on Small Screens to Prevent Clutter */
  .product--card-review-count {
    display: none !important;
  }

  .product--card {
    padding: 0.6rem;
  }

  .product--card-image-wrap {
    height: 95px;
  }

  .product--card-title {
    font-size: 0.8rem;
  }

  .category--scroll-item {
    flex: 0 0 85px;
  }
}

/* Animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================
   18. AUTH / REGISTER PAGE STYLES (FULL PAGE NO-SCROLL)
========================================== */
.auth--page-wrapper {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f8f3 100%);
  min-height: 100vh;
  padding: 2rem 1rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* On desktop, lock to full viewport - no inner scroll */
@media (min-width: 992px) {
  body.auth-page { min-height: 100vh; }
  .auth--page-wrapper {
    height: 100vh;
    overflow: hidden;
    padding: 1rem;
  }
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--similar-info small {
  color: var(--text-muted);
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
}

.pdp-detail-layout .pdp--nearby-offer-item {
  align-items: stretch;
  display: block;
  min-height: 250px;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pdp-detail-layout .pdp--nearby-offer-item:hover {
  border-color: rgba(var(--base-color-rgb), 0.35) !important;
  box-shadow: var(--shadow-hover);
  color: var(--heading-color);
  transform: translateY(-2px);
}

.pdp-detail-layout .pdp--nearby-offer-item:hover .pdp--similar-info,
.pdp-detail-layout .pdp--nearby-offer-item:hover .pdp--similar-info h3,
.pdp-detail-layout .pdp--nearby-offer-item:hover .pdp--similar-info small {
  color: inherit;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--similar-info h3 a {
  color: var(--heading-color);
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--similar-info h3 a:hover {
  color: var(--base-color);
}

.pdp-detail-layout .pdp--nearby-shop-name {
  color: var(--heading-color);
  font-size: 0.9rem !important;
  margin-bottom: 4px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-detail-layout .pdp--nearby-product-name {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.35;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-detail-layout .pdp--nearby-details-link {
  color: var(--base-color);
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  margin-top: 8px;
  text-decoration: none;
}

.pdp-detail-layout .pdp--nearby-details-link:hover {
  color: var(--base-color-hover);
  text-decoration: underline;
}

/* Nearby shop list: compact related-item layout with the shop image on the left. */
.pdp-detail-layout .pdp--nearby-offer-item {
  align-items: center;
  display: flex !important;
  gap: 12px;
  min-height: 0;
  padding: 12px !important;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--nearby-offer-image-wrap {
  background: #f8fafc;
  flex: 0 0 70px;
  height: 70px !important;
  margin: 0;
  padding: 6px;
  width: 70px !important;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--similar-info {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--nearby-offer-wishlist {
  height: 28px;
  right: 8px;
  top: 8px;
  width: 28px;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--nearby-offer-badge {
  bottom: 8px;
  left: 8px;
  top: auto;
}

.pdp-detail-layout .pdp--nearby-offer-item .product--card-footer {
  display: none;
}

.pdp-detail-layout .pdp--shop-offer-item {
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  display: flex;
  gap: 12px;
  min-height: 100px;
  padding: 12px;
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pdp-detail-layout .pdp--shop-offer-item:hover {
  border-color: rgba(var(--base-color-rgb), 0.45);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
}

.pdp-detail-layout .pdp--shop-offer-image {
  align-items: center;
  background: #f8fafc;
  display: flex;
  flex: 0 0 70px;
  height: 70px;
  justify-content: center;
  overflow: hidden;
  padding: 6px;
}

.pdp-detail-layout .pdp--shop-offer-image img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.pdp-detail-layout .pdp--shop-offer-image a {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.pdp-detail-layout .pdp--shop-offer-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pdp-detail-layout .pdp--shop-offer-info strong {
  font-size: 0.84rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-detail-layout .pdp--shop-offer-info strong a {
  color: var(--heading-color);
  text-decoration: none;
}

.pdp-detail-layout .pdp--shop-offer-info strong a:hover {
  color: var(--base-color);
}

.pdp-detail-layout .pdp--shop-offer-info small {
  color: var(--base-color);
  font-size: 0.74rem;
  margin-top: 4px;
}

.pdp-detail-layout .pdp--shop-offer-info small svg {
  height: 12px;
  margin-right: 2px;
  width: 12px;
}

.pdp-detail-layout .pdp--shop-offer-price {
  color: var(--base-color);
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 4px;
}

.pdp-detail-layout .pdp--nearby-offer-image-wrap {
  align-items: center;
  background: #f8fafc;
  display: flex;
  height: 125px;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}

.pdp-detail-layout .pdp--nearby-offer-item > .pdp--nearby-offer-image-wrap img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.pdp-detail-layout .pdp--nearby-offer-item > .pdp--similar-info {
  padding: 10px 12px 12px;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--similar-info h3 {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-detail-layout .pdp--nearby-offer-badge {
  background: #e63950;
  border-radius: 4px;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  left: 8px;
  padding: 4px 6px;
  position: absolute;
  top: 8px;
  z-index: 2;
}

.pdp-detail-layout .pdp--nearby-offer-wishlist {
  align-items: center;
  background: #fff;
  border: 1px solid #dbe3ec;
  border-radius: 50%;
  color: #64748b;
  display: flex;
  height: 28px;
  justify-content: center;
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
  z-index: 2;
}

.pdp-detail-layout .pdp--nearby-offer-wishlist svg {
  height: 15px;
  width: 15px;
}

.pdp-detail-layout .pdp--nearby-offer-distance {
  color: var(--base-color) !important;
  margin-bottom: 2px;
}

.pdp-detail-layout .pdp--nearby-offer-distance svg {
  height: 12px;
  margin-right: 2px;
  width: 12px;
}

/* Final product-list card alignment: image on top, details below. */
.pdp-detail-layout .pdp--nearby-offer-item {
  display: block !important;
  padding: 0 !important;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--nearby-offer-image-wrap {
  display: flex !important;
  height: 145px !important;
  width: 100% !important;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--similar-info {
  display: block !important;
  padding: 12px !important;
  width: 100% !important;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--nearby-offer-image-wrap a {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--similar-info h3 a {
  color: var(--heading-color);
  text-decoration: none;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--similar-info h3 a:hover {
  color: var(--base-color);
}

.pdp-detail-layout .pdp--nearby-offer-item .product--card-footer {
  margin-top: 8px;
  padding-top: 0;
}

.pdp-detail-layout .pdp--nearby-offer-item .product--card-cart-btn {
  flex: 0 0 32px;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--nearby-offer-wishlist {
  cursor: pointer;
  padding: 0;
}

/* Auth Header Bar & Home/Back Link */
.auth--header-bar {
  background: transparent !important;
  border-bottom: none !important;
  padding: 0.65rem 0;
}

.auth--back-link,
a.auth--back-link {
  color: #64748b !important;
  transition: color 0.2s ease;
  text-decoration: none !important;
}

.auth--back-link:hover,
a.auth--back-link:hover,
.auth--back-link:focus,
a.auth--back-link:focus {
  color: var(--base-color) !important;
  text-decoration: none !important;
}

.auth--back-link:hover svg,
.auth--back-link:hover i,
a.auth--back-link:hover svg,
a.auth--back-link:hover i {
  color: var(--base-color) !important;
}

/* Subtle background decorative shapes */
.auth--bg-shape-1 {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 123, 62, 0.08) 0%, rgba(11, 123, 62, 0) 70%);
  pointer-events: none;
}

.auth--bg-shape-2 {
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 123, 62, 0.06) 0%, rgba(11, 123, 62, 0) 70%);
  pointer-events: none;
}

/* Left Illustration Column */
.auth--visual-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1rem;
}

.auth--visual-circle {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, #fceceb 0%, rgba(252, 236, 235, 0.4) 65%, transparent 70%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.auth--visual-svg {
  width: 92%;
  height: auto;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.08));
}

.auth--floating-tag {
  position: absolute;
  top: 15%;
  left: 6%;
  background: #ffffff;
  padding: 0.4rem 0.8rem;
  border-radius: 30px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--base-color);
  animation: floatBounce 3s ease-in-out infinite alternate;
}

.auth--floating-sale {
  position: absolute;
  top: 22%;
  right: 16%;
  background: #ef4444;
  color: #ffffff;
  padding: 0.3rem 0.65rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
  animation: floatBounce 3.5s ease-in-out infinite alternate-reverse;
}

@keyframes floatBounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

/* Right Form Card */
.auth--card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  padding: 1.75rem 2.25rem;
  max-width: 530px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.auth--card.auth--card-wide {
  max-width: 1060px;
}

.auth--card-header {
  text-align: center;
  margin-bottom: 1rem;
}

.auth--card-logo {
  display: inline-block;
  margin-bottom: 0.45rem;
}

.auth--card-logo img {
  height: 38px;
  width: auto;
}

.auth--card-subtitle {
  font-size: 0.85rem;
  color: var(--text-color-light);
  margin-bottom: 0;
}

/* Role Switcher Tabs: Customer / Seller */
.auth--role-tabs {
  display: flex;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 1rem;
  background: #f8fafc;
}

.auth--role-tab {
  flex: 1;
  padding: 0.6rem 0.5rem;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all var(--transition-fast);
  border-radius: 0;
}

.auth--role-tab:first-child {
  border-right: 1.5px solid var(--border-color);
}

.auth--role-tab.active {
  background: var(--base-color);
  color: #ffffff;
}

.auth--role-tab:not(.active):hover {
  background: var(--base-color-light);
  color: var(--base-color);
}

.auth--role-tab i {
  font-size: 0.95rem;
}

/* Social Register Buttons at TOP (User requested) */
.auth--social-top {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.auth--social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.52rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background-color: #ffffff;
  color: var(--heading-color);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.auth--social-btn:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.auth--social-btn.google-btn:hover {
  border-color: rgba(66, 133, 244, 0.4);
}

.auth--social-btn.facebook-btn:hover {
  border-color: rgba(24, 119, 242, 0.4);
}

.auth--social-btn img,
.auth--social-btn svg {
  width: 17px;
  height: 17px;
}

/* Divider */
.auth--divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 0.85rem;
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 500;
}

.auth--divider::before,
.auth--divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e2e8f0;
}

.auth--divider span {
  padding: 0 0.75rem;
  white-space: nowrap;
}

/* Form Groups & Inputs */
.auth--form-group {
  margin-bottom: 0.8rem;
}

.auth--label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.3rem;
}

.auth--input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth--input {
  width: 100%;
  height: 44px;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
  color: var(--text-color);
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.auth--input:focus {
  outline: none;
  border-color: var(--base-color);
  box-shadow: none !important;
  background-color: #ffffff;
}

.auth--input::placeholder {
  color: #9ca3af;
  font-size: 0.82rem;
}

/* Password Toggle Icon */
.auth--input-password {
  padding-right: 2.5rem;
}

.auth--toggle-password {
  position: absolute;
  right: 0.75rem;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: color 0.15s ease;
  z-index: 2;
}

.auth--toggle-password:hover {
  color: var(--base-color);
}

/* Terms Checkbox */
.auth--terms {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.65rem 0 0.85rem;
  font-size: 0.78rem;
  color: var(--text-color);
  line-height: 1.4;
}

.auth--terms input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border-radius: 4px;
  accent-color: var(--base-color);
  cursor: pointer;
}

.auth--terms a {
  color: var(--base-color);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth--terms a:hover {
  text-decoration: underline;
  color: var(--base-color-dark);
}

/* Submit Register Button */
.auth--submit-btn {
  width: 100%;
  height: 48px;
  background-color: var(--base-color);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: none !important;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.auth--submit-btn:hover {
  background-color: var(--base-color-dark);
  transform: none !important;
  box-shadow: none !important;
  color: #ffffff;
}

/* Bottom Login Prompt */
.auth--footer-prompt {
  text-align: center;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-color);
}

.auth--footer-prompt a {
  color: var(--base-color);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.auth--footer-prompt a:hover {
  color: var(--base-color-dark);
  text-decoration: underline;
}

/* Vendor Shop CTA Box */
.auth--vendor-cta {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  margin-top: 1rem;
}

.auth--vendor-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--base-color);
  background: #ffffff;
  border: 1.5px solid var(--base-color);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.84rem;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.auth--vendor-cta-btn:hover {
  background: var(--base-color);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(11, 123, 62, 0.2);
}

/* Responsive adjustments (Auth page only) */
@media (max-width: 991px) {
  body.auth-page {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .auth--page-wrapper {
    padding: 1.5rem 1rem;
    height: auto !important;
    min-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden;
  }
  .auth--visual-col {
    display: none !important;
  }
  .auth--card {
    padding: 1.5rem 1.25rem;
    box-shadow: var(--shadow-sm);
    max-width: 100%;
  }
}

/* ==========================================
   19. FORGOT PASSWORD - STEP INDICATOR
========================================== */
.auth--steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.25rem;
}

.auth--step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  position: relative;
}

.auth--step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  background: #ffffff;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  position: relative;
  z-index: 1;
}

.auth--step-item.completed .auth--step-circle {
  background: var(--base-color);
  border-color: var(--base-color);
  color: #ffffff;
}

.auth--step-item.active .auth--step-circle {
  background: #ffffff;
  border-color: var(--base-color);
  color: var(--base-color);
  box-shadow: 0 0 0 4px rgba(11, 123, 62, 0.12);
}

.auth--step-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}

.auth--step-item.active .auth--step-label,
.auth--step-item.completed .auth--step-label {
  color: var(--base-color);
}

.auth--step-connector {
  flex: 1;
  min-width: 40px;
  height: 2px;
  background: #e2e8f0;
  margin: 0 0.25rem;
  margin-bottom: 1.1rem;
  transition: background 0.3s ease;
}

.auth--step-connector.done {
  background: var(--base-color);
}

/* Step panels */
.auth--step-panel {
  display: none;
}

.auth--step-panel.active {
  display: block;
}

.auth--step-icon-wrap {
  text-align: center;
  margin-bottom: 0.85rem;
}

.auth--step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--base-color-light);
  color: var(--base-color);
  font-size: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.auth--step-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.25rem;
}

.auth--step-subtitle {
  font-size: 0.83rem;
  color: var(--text-color-light);
  line-height: 1.45;
  margin-bottom: 0;
}

/* OTP Input Row */
.auth--otp-row {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin: 1rem 0;
}

.auth--otp-input {
  width: 50px;
  height: 54px;
  border: 2px solid #d1d5db;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--heading-color);
  background: #ffffff;
  transition: all var(--transition-fast);
  outline: none;
}

.auth--otp-input:focus {
  border-color: var(--base-color);
  box-shadow: none !important;
}

.auth--otp-input.filled {
  border-color: var(--base-color);
  background: var(--base-color-light);
  color: var(--base-color);
}

/* Resend timer */
.auth--resend-row {
  text-align: center;
  font-size: 0.83rem;
  color: var(--text-color-light);
  margin-top: 0.75rem;
}

.auth--resend-link {
  color: var(--base-color);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.83rem;
}

.auth--resend-link:hover {
  text-decoration: underline;
}

.auth--resend-link:disabled {
  color: #94a3b8;
  cursor: not-allowed;
  text-decoration: none;
}

/* Password strength indicator */
.auth--strength-bar {
  height: 4px;
  border-radius: 2px;
  background: #e2e8f0;
  margin-top: 0.4rem;
  overflow: hidden;
}

.auth--strength-fill {
  height: 100%;
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease, background 0.3s ease;
}

.auth--strength-text {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.25rem;
  color: #94a3b8;
}

/* Back link */
.auth--back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-color);
  text-decoration: none;
  margin-bottom: 1rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.15s ease;
}

.auth--back-link:hover {
  color: var(--base-color);
}



/* ==========================================================================
   16. Product Details Page (PDP) & Nearby Store Services
   ========================================================================== */

/* Breadcrumb Navigation */
.pdp--breadcrumb-wrap {
  background-color: var(--white);
  border-bottom: 1px solid var(--border-color);
  padding: 0.85rem 0;
  margin-bottom: 1.5rem;
}

.pdp--breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.pdp--breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
}

.pdp--breadcrumb a {
  color: #64748b;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.pdp--breadcrumb a:hover {
  color: var(--base-color);
}

.pdp--breadcrumb .active,
.pdp--breadcrumb li.active {
  color: var(--base-color);
  font-weight: 500;
}

/* Product Main Section */
.pdp--main-section {
  padding-bottom: 2.5rem;
}

/* Gallery Box */
.pdp--gallery-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: box-shadow var(--transition-normal);
}

.pdp--gallery-card:hover {
  box-shadow: var(--shadow-md);
}

.pdp--main-img-box {
  position: relative;
  width: 100%;
  height: 380px;
  background: #f8fafc;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: crosshair;
  border: 1px solid var(--border-color-light);
}

.pdp--main-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease, opacity 0.25s ease;
  user-select: none;
}

.pdp--main-img-box:hover .pdp--main-img {
  transform: scale(1.05);
}

/* Floating Badges on Gallery */
.pdp--badge-group {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 3;
}

.pdp--badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pdp--badge-discount {
  background: var(--base-two-color);
  color: var(--white);
}

.pdp--badge-organic {
  background: var(--base-color);
  color: var(--white);
}

.pdp--badge-stock {
  background: var(--base-color);
  color: var(--white);
}

.pdp--gallery-wishlist-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  z-index: 3;
  transition: all var(--transition-fast);
}

.pdp--gallery-wishlist-btn:hover,
.pdp--gallery-wishlist-btn.active {
  background: #fee2e2;
  color: var(--danger-color);
  border-color: #fca5a5;
  transform: scale(1.08);
}

/* Thumbnails Strip */
.pdp--thumbs-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scrollbar-width: thin;
}

.pdp--thumb-item {
  width: 72px;
  height: 72px;
  min-width: 72px;
  background: #f8fafc;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pdp--thumb-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.pdp--thumb-item:hover {
  border-color: var(--base-color-subtle);
  transform: translateY(-2px);
}

.pdp--thumb-item.active {
  border-color: var(--base-color);
  box-shadow: 0 0 0 3px var(--base-color-light);
  background: var(--white);
}

/* Gallery Action Buttons */
.pdp--gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-color-light);
}

.pdp--gallery-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-color);
  background: var(--body-bg);
  border: 1px solid var(--border-color);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pdp--gallery-tool-btn:hover {
  background: var(--base-color-light);
  color: var(--base-color);
  border-color: var(--base-color-subtle);
}

/* Product Info (Center Column) */
.pdp--info-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.pdp--brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.pdp--brand-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--base-color);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--base-color-light);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
}

.pdp--sku-text {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-family: monospace;
}

.pdp--title {
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.4;
  margin-bottom: 0.75rem;
}

/* Rating & Review Summary */
.pdp--ratings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color-light);
}

.pdp--stars-box {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #f59e0b;
  font-size: 0.95rem;
}

.pdp--rating-val {
  font-weight: 600;
  color: var(--heading-color);
  margin-left: 0.25rem;
}

.pdp--review-count-link {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
}

.pdp--review-count-link:hover {
  color: var(--base-color);
}

.pdp--stock-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--base-color);
  background: var(--base-color-light);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
}

/* Price Box */
.pdp--price-box {
  background: #f8fafc;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.85rem;
}

.pdp--current-price {
  font-size: 2rem;
  font-weight: 600;
  color: var(--base-color);
  line-height: 1;
}

.pdp--old-price {
  font-size: 1.15rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.pdp--save-badge {
  background: #fee2e2;
  color: var(--danger-color);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
}

.pdp--unit-calc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* Product Key Highlights */
.pdp--highlights-box {
  margin-bottom: 1.25rem;
}

.pdp--highlights-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
}

.pdp--highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem 1rem;
}

.pdp--highlight-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--text-color);
}

.pdp--highlight-item i {
  color: var(--base-color);
  font-size: 0.95rem;
}

/* Variant Selector */
.pdp--variant-section {
  margin-bottom: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color-light);
}

.pdp--variant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.pdp--variant-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading-color);
}

.pdp--selected-variant-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--base-color);
}

.pdp--variant-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pdp--variant-btn {
  background: var(--white);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading-color);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.pdp--variant-btn span.price-tag {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.pdp--variant-btn:hover {
  border-color: var(--base-color-subtle);
  background: var(--base-color-light);
}

.pdp--variant-btn.active {
  border-color: var(--base-color);
  background: var(--base-color-light);
  color: var(--base-color);
  box-shadow: 0 0 0 2px var(--base-color);
}

.pdp--variant-btn.active span.price-tag {
  color: var(--base-color);
  font-weight: 600;
}

/* Stock Urgency Indicator */
.pdp--urgency-box {
  background: #fff7ed;
  border: 1px solid #ffedd5;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.95rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.pdp--urgency-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #c2410c;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pdp--urgency-bar {
  height: 6px;
  background: #fed7aa;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.pdp--urgency-fill {
  height: 100%;
  width: 78%;
  background: #ea580c;
  border-radius: var(--radius-pill);
  transition: width 0.5s ease;
}

/* Quantity & Action Buttons */
.pdp--actions-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.pdp--qty-box {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--white);
  height: 48px;
  overflow: hidden;
}

.pdp--qty-btn {
  width: 40px;
  height: 100%;
  border: none;
  background: #f8fafc;
  color: var(--heading-color);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.pdp--qty-btn:hover {
  background: #e2e8f0;
}

.pdp--qty-input {
  width: 50px;
  height: 100%;
  border: none;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  color: var(--heading-color);
  background: transparent;
  outline: none;
}

.pdp--btn-cart {
  flex: 1 1 160px;
  height: 48px;
  font-size: 1rem;
  font-weight: 600;
  gap: 0.6rem;
}

.pdp--btn-buy {
  flex: 1 1 160px;
  height: 48px;
  font-size: 1rem;
  font-weight: 600;
  gap: 0.6rem;
}

.pdp--btn-share-icon {
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--text-color);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pdp--btn-share-icon:hover {
  background: var(--base-color-light);
  color: var(--base-color);
  border-color: var(--base-color-subtle);
}

/* Right Sidebar: Delivery & Nearby Services */
.pdp--sidebar-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.pdp--sidebar-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-color-light);
}

.pdp--delivery-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.pdp--delivery-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.8125rem;
}

.pdp--delivery-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: var(--base-color-light);
  color: var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.pdp--delivery-info strong {
  display: block;
  color: var(--heading-color);
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}

.pdp--delivery-info span {
  color: var(--text-muted);
}

/* Delivery Pincode Checker */
.pdp--pincode-checker {
  background: #f8fafc;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  margin-bottom: 1.25rem;
}

.pdp--pincode-form {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.pdp--pincode-input {
  flex-grow: 1;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  font-size: 0.8125rem;
  outline: none;
}

.pdp--pincode-input:focus {
  border-color: var(--base-color);
}

.pdp--pincode-btn {
  background: var(--base-color);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.pdp--pincode-btn:hover {
  background: var(--base-color-hover);
}

.pdp--pincode-result {
  font-size: 0.75rem;
  margin-top: 0.4rem;
  color: var(--base-color);
  font-weight: 600;
  display: none;
}

/* Seller / Store Information Card */
.pdp--seller-card {
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: #fafcfb;
  margin-bottom: 1.25rem;
}

.pdp--seller-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pdp--seller-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--base-color);
}

.pdp--seller-name {
  font-weight: 600;
  font-size: 0.925rem;
  color: var(--heading-color);
  line-height: 1.3;
}

.pdp--seller-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #0284c7;
  font-weight: 600;
}

.pdp--seller-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.35rem;
  margin-bottom: 0.85rem;
}

.pdp--stat-val {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--heading-color);
}

.pdp--stat-lbl {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.pdp--seller-actions {
  display: flex;
  gap: 0.5rem;
}

.pdp--seller-btn {
  flex: 1;
  font-size: 0.8125rem;
  padding: 0.45rem 0.5rem;
  text-align: center;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* Nearby Store Stock & Pickup Locator */
.pdp--nearby-stores-section {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
}

.pdp--nearby-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.pdp--nearby-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.pdp--nearby-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--heading-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pdp--nearby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.pdp--store-outlet-item {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  transition: all var(--transition-fast);
}

.pdp--store-outlet-item:hover {
  border-color: var(--base-color);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.pdp--store-outlet-item.in-stock {
  border-left: 4px solid var(--base-color);
}

.pdp--store-outlet-item.out-of-stock {
  border-left: 4px solid #ef4444;
  opacity: 0.8;
}

.pdp--outlet-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--heading-color);
  margin-bottom: 0.25rem;
}

.pdp--outlet-distance {
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.pdp--outlet-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
}

.pdp--outlet-stock-badge.badge-success {
  background: var(--base-color-light);
  color: var(--base-color-dark);
}

.pdp--outlet-stock-badge.badge-danger {
  background: #fee2e2;
  color: #991b1b;
}

/* Frequently Bought Together (Bundle Offer) */
.pdp--bundle-section {
  margin-bottom: 2.5rem;
}

.pdp--bundle-card {
  background: var(--white);
  border: 1.5px dashed var(--base-color-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.pdp--bundle-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--heading-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.pdp--bundle-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.pdp--bundle-products {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 500px;
}

.pdp--bundle-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.85rem;
}

.pdp--bundle-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: var(--white);
  border-radius: var(--radius-xs);
  padding: 0.2rem;
}

.pdp--bundle-info {
  display: flex;
  flex-direction: column;
}

.pdp--bundle-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.3;
}

.pdp--bundle-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--base-color);
}

.pdp--bundle-plus-icon {
  font-size: 1.2rem;
  color: var(--text-muted);
  font-weight: 600;
}

.pdp--bundle-summary-box {
  background: #f0fdf4;
  border: 1px solid var(--base-color-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pdp--bundle-total-price {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--base-color);
}

.pdp--bundle-old-price {
  font-size: 0.95rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.pdp--bundle-save-tag {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--base-color);
}

/* Detailed Tabs Section */
.pdp--tabs-section {
  margin-bottom: 3rem;
}

.pdp--tabs-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.pdp--tabs-header {
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color);
  padding: 0.5rem 1rem 0;
}

.pdp--nav-tabs {
  border-bottom: none;
  gap: 0.5rem;
}

.pdp--nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-color);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85rem 1.25rem;
  background: transparent;
  border-radius: 0;
  transition: all var(--transition-fast);
}

.pdp--nav-tabs .nav-link:hover {
  color: var(--base-color);
}

.pdp--nav-tabs .nav-link.active {
  color: var(--base-color);
  border-bottom-color: var(--base-color);
  background: var(--white);
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}

.pdp--tab-content {
  padding: 2rem 1.5rem;
}

/* Specs Table */
.pdp--specs-table {
  width: 100%;
  border-collapse: collapse;
}

.pdp--specs-table tr {
  border-bottom: 1px solid var(--border-color-light);
}

.pdp--specs-table tr:last-child {
  border-bottom: none;
}

.pdp--specs-table td {
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
}

.pdp--specs-table td.spec-lbl {
  font-weight: 600;
  color: var(--text-muted);
  width: 32%;
  background: #f8fafc;
}

.pdp--specs-table td.spec-val {
  color: var(--heading-color);
  font-weight: 500;
}

/* Keep dynamic product highlights inside the specifications table. */
.pdp-detail-layout .pdp--features-table-row > td {
  vertical-align: top;
}

.pdp-detail-layout .pdp--features-table-list {
  display: grid;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pdp-detail-layout .pdp--features-table-list li {
  align-items: flex-start;
  display: flex;
  gap: 0.5rem;
  line-height: 1.45;
}

.pdp-detail-layout .pdp--features-table-list svg {
  color: var(--base-color);
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

@media (max-width: 575px) {
  .pdp-detail-layout .pdp--feature-row > td {
    display: block;
    width: 100% !important;
  }

  .pdp-detail-layout .pdp--nutrition-table {
    table-layout: fixed;
  }

  .pdp-detail-layout .pdp--nutrition-table td,
  .pdp-detail-layout .pdp--feature-row > td {
    display: table-cell !important;
    vertical-align: top;
    overflow-wrap: anywhere;
  }

  .pdp-detail-layout .pdp--nutrition-table td:first-child {
    width: 42% !important;
    text-align: left;
  }

  .pdp-detail-layout .pdp--nutrition-table td:last-child {
    width: 58% !important;
    text-align: left;
  }
}

/* Reviews Breakdown Box */
.pdp--reviews-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background: #f8fafc;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 2rem;
  align-items: center;
}

.pdp--review-score-box {
  text-align: center;
  min-width: 140px;
}

.pdp--score-num {
  font-size: 3.25rem;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1;
}

.pdp--review-bars {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pdp--bar-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8125rem;
}

.pdp--bar-lbl {
  width: 45px;
  font-weight: 600;
  color: var(--text-color);
}

.pdp--bar-track {
  flex-grow: 1;
  height: 8px;
  background: #e2e8f0;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.pdp--bar-fill {
  height: 100%;
  background: #f59e0b;
  border-radius: var(--radius-pill);
}

.pdp--bar-count {
  width: 35px;
  text-align: right;
  color: var(--text-muted);
}

.pdp--review-card {
  border-bottom: 1px solid var(--border-color-light);
  padding: 1.25rem 0;
}

.pdp--review-card:last-child {
  border-bottom: none;
}

.pdp--review-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.pdp--review-user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.pdp--review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--base-color-light);
  color: var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
}

.pdp--review-user-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--heading-color);
}

.pdp--verified-badge {
  font-size: 0.75rem;
  color: var(--base-color);
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
}

.pdp--review-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.pdp--review-text {
  font-size: 0.9rem;
  color: var(--text-color);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.pdp--review-photos {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.pdp--review-photo-item {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-color);
  object-fit: cover;
  cursor: pointer;
}

.pdp--review-helpful-btn {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--transition-fast);
}

.pdp--review-helpful-btn:hover {
  border-color: var(--base-color);
  color: var(--base-color);
}

/* Q&A Section */
.pdp--qa-item {
  background: #f8fafc;
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  margin-bottom: 1rem;
}

.pdp--qa-q {
  font-weight: 600;
  color: var(--heading-color);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.pdp--qa-q-tag {
  background: #e2e8f0;
  color: var(--heading-color);
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-weight: 600;
}

.pdp--qa-a {
  font-size: 0.875rem;
  color: var(--text-color);
  margin-left: 2rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.pdp--qa-a-tag {
  background: var(--base-color-light);
  color: var(--base-color);
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-weight: 600;
}

.pdp--qa-seller-tag {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
  margin-left: 2rem;
}

/* Mobile Sticky Action Bar */
.pdp--mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--border-color);
  padding: 0.65rem 1rem;
  z-index: 1020;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}

.pdp--mobile-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.pdp--mobile-sticky-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
}

.pdp--mobile-sticky-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-color);
  background: #f8fafc;
}

.pdp--mobile-sticky-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pdp--mobile-sticky-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--heading-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp--mobile-sticky-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--base-color);
}

.pdp--mobile-sticky-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Responsive Rules for PDP */
@media (max-width: 991.98px) {
  .pdp--main-img-box {
    height: 320px;
  }
  .pdp--highlights-list {
    grid-template-columns: 1fr;
  }
  .pdp--bundle-flex {
    flex-direction: column;
    align-items: stretch;
  }
  .pdp--bundle-summary-box {
    flex: 1 1 auto;
  }
}

@media (max-width: 767.98px) {
  .pdp--main-img-box {
    height: 260px;
  }
  .pdp--title {
    font-size: 1.2rem;
  }
  .pdp--current-price {
    font-size: 1.6rem;
  }
  .pdp--actions-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .pdp--qty-box {
    justify-content: center;
  }
  .pdp--mobile-sticky-bar {
    display: block;
  }
  /* Extra bottom padding on mobile so content is not covered by sticky bar */
  body.pdp-page {
    padding-bottom: 70px;
  }
}


/* ==========================================================================
   17. Comprehensive Styles for All Marketplace Pages
   ========================================================================== */

/* Page Header & Breadcrumb */
.page--header-banner {
  background: linear-gradient(135deg, var(--base-color-light) 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border-color);
  padding: 2.25rem 0;
  margin-bottom: 2rem;
}

.page--title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
}

.page--subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 700px;
  margin-bottom: 0;
}

/* 1. Products Page (Filter Sidebar & Grid/List) */
.filter--sidebar {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.filter--widget {
  border-bottom: 1px solid var(--border-color-light);
  padding-bottom: 1.15rem;
  margin-bottom: 1.15rem;
}

.filter--widget:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.filter--widget-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter--widget-list {
  list-style: none;
  padding: 0 6px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  overscroll-behavior: contain;
}

.filter--widget-list::-webkit-scrollbar {
  width: 5px;
}

.filter--widget-list::-webkit-scrollbar-track {
  background: transparent;
}

.filter--widget-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}

.filter--widget-list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

.filter--widget-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--text-color);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.filter--widget-item:hover {
  color: var(--base-color);
  background-color: var(--base-color-light, #eef8f2);
}

.filter--widget .form-check {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0;
}

.filter--widget .form-check .form-check-input {
  float: none;
  margin: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
  box-shadow: none !important;
  outline: none !important;
}

.filter--widget .form-check .form-check-input:focus,
.filter--widget .form-check .form-check-input:focus-visible {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--base-color, #0b7b3e) !important;
}

.filter--widget .form-check .form-check-input:checked {
  background-color: var(--base-color, #0b7b3e);
  border-color: var(--base-color, #0b7b3e);
}

.filter--widget .form-check .form-check-label {
  cursor: pointer;
  margin-bottom: 0;
  user-select: none;
  font-size: 0.875rem;
  line-height: 1.3;
}

.filter--widget-item .badge-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: #f1f5f9;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.filter--top-bar {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Custom Sort Dropdown */
.custom--sort-dropdown .dropdown-toggle {
  background-color: var(--white) !important;
  border: 1.5px solid var(--border-color) !important;
  color: var(--heading-color) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: var(--radius-sm) !important;
  min-width: 175px;
  box-shadow: none !important;
  transition: all var(--transition-fast) !important;
}

.custom--sort-dropdown .dropdown-toggle:hover,
.custom--sort-dropdown .dropdown-toggle:focus,
.custom--sort-dropdown .dropdown-toggle[aria-expanded="true"] {
  border-color: var(--base-color) !important;
  box-shadow: none !important;
  color: var(--heading-color) !important;
}

.custom--sort-dropdown .dropdown-menu {
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.35rem !important;
  min-width: 185px !important;
  background-color: var(--white) !important;
}

.custom--sort-dropdown .dropdown-item {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-color) !important;
  padding: 0.45rem 0.75rem !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer;
  background: transparent;
  width: 100%;
  text-align: left;
}

.custom--sort-dropdown .dropdown-item:hover,
.custom--sort-dropdown .dropdown-item:focus {
  background-color: var(--base-color-light) !important;
  color: var(--base-color) !important;
}

.custom--sort-dropdown .dropdown-item.active {
  background-color: var(--base-color) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
}

.view--toggle-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  background: var(--white);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view--toggle-btn.active, .view--toggle-btn:hover {
  background: var(--base-color-light);
  color: var(--base-color);
  border-color: var(--base-color);
}

/* 2. Categories Page */
.cat--browser-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  height: 100%;
}

.cat--browser-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--base-color);
}

.cat--browser-icon {
  width: 70px;
  height: 70px;
  background: var(--base-color-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  padding: 0.75rem;
}

.cat--sub-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cat--sub-link {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--transition-fast);
}

.cat--sub-link:hover {
  color: var(--base-color);
}

/* 3. Offers Page */
.offer--hero-card {
  background: linear-gradient(135deg, var(--base-color) 0%, var(--base-color-active) 100%);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2rem;
  color: var(--white);
  position: relative;
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.offer--badge-flash {
  background: var(--base-two-color);
  color: var(--white);
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
}

.offer--timer-box {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0,0,0,0.3);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  margin-top: 1rem;
}

.offer--timer-digit {
  font-weight: 600;
  font-size: 1.25rem;
  background: var(--white);
  color: var(--heading-color);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  min-width: 36px;
  text-align: center;
}

/* 4. Free Services Page */
.service--detail-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  height: 100%;
}

.service--detail-card:hover {
  border-color: var(--base-color);
  box-shadow: var(--shadow-hover);
}

.service--detail-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--base-color-light);
  color: var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.25rem;
}

/* 5. Near Me Page */
.nearme--map-placeholder {
  height: 380px;
  background: #e2e8f0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  margin-bottom: 2rem;
  border: 1px solid var(--border-color);
}

.nearme--shop-item {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transition: all var(--transition-fast);
}

.nearme--shop-item:hover {
  border-color: var(--base-color);
  box-shadow: var(--shadow-sm);
}

/* 6. Blog Page */
.blog--card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog--card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--base-color);
}

.blog--card-img {
  height: 200px;
  width: 100%;
  object-fit: cover;
  background: #f1f5f9;
}

.blog--card-body {
  padding: 1.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.blog--card-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.blog--card-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.4;
  margin-bottom: 0.65rem;
}

.blog--card-title a:hover {
  color: var(--base-color);
}

/* 7. Contact Page */
.contact--info-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: var(--shadow-xs);
}

.contact--info-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--base-color-light);
  color: var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.contact--form-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}

/* 8. Checkout Page */
.checkout--step-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.checkout--step-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--heading-color);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color-light);
}

.checkout--step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--base-color);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.checkout--payment-method-item {
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-bottom: 0.75rem;
}

.checkout--payment-method-item:hover,
.checkout--payment-method-item.active {
  border-color: var(--base-color);
  background: var(--base-color-light);
}

.checkout--summary-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 100px;
}

/* 9. Shop Profile Details Page (Premium Redesign) */
.shop--banner-wrap {
  position: relative;
  background: radial-gradient(circle at 85% 20%, rgba(52, 211, 153, 0.22) 0%, transparent 45%),
              radial-gradient(circle at 15% 85%, rgba(5, 150, 105, 0.28) 0%, transparent 50%),
              linear-gradient(135deg, #052e16 0%, #0b7b3e 50%, #064422 100%);
  border-radius: 20px;
  padding: 2.25rem 2.25rem;
  color: #ffffff;
  margin-bottom: 2rem;
  overflow: hidden;
  box-shadow: 0 15px 35px -8px rgba(11, 123, 62, 0.32), 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.shop--banner-wrap.has-cover {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.shop--banner-backdrop-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6, 44, 23, 0.95) 0%, rgba(6, 44, 23, 0.88) 50%, rgba(6, 44, 23, 0.78) 100%);
  z-index: 1;
}

.shop--banner-pattern {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 320px;
  height: 320px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}

.shop--profile-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.75rem;
  position: relative;
  z-index: 2;
}

.shop--profile-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1 1 500px;
  min-width: 0;
}

.shop--profile-logo {
  width: 96px;
  height: 96px;
  min-width: 96px;
  border-radius: 20px;
  background: #ffffff;
  border: 3px solid rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  flex-shrink: 0;
  position: relative;
  padding: 4px;
}

.shop--profile-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 14px;
}

.shop--profile-logo .shop--logo-icon {
  font-size: 2.75rem;
  color: var(--base-color);
}

.shop--verified-check {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.shop--profile-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.shop--title {
  font-size: 1.75rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.4px;
  line-height: 1.25;
  margin-bottom: 0.35rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.shop--address {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
  margin-bottom: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.shop--meta-pills-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.shop--meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.shop--meta-pill strong {
  color: #ffffff;
  font-weight: 600;
}

/* Right Side: Glassmorphic Actions & Stats Card */
.shop--profile-right {
  flex-shrink: 0;
}

.shop--actions-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  padding: 1.15rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  min-width: 270px;
}

.shop--quick-stats-grid {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.shop--quick-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.5rem;
}

.shop--quick-stat-item .stat-number {
  font-size: 1.15rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

.shop--quick-stat-item .stat-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.shop--quick-stats-grid .stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.22);
}

.shop--actions-btn-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.shop--btn-call {
  background: #ffffff !important;
  color: #0b7b3e !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 1rem !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
}

.shop--btn-call:hover {
  background: #f0fdf4 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
}

.shop--btn-email {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.9rem !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s ease !important;
}

.shop--btn-email:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.shop--btn-share {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.shop--btn-share:hover {
  background: #ffffff !important;
  color: #0b7b3e !important;
  border-color: #ffffff !important;
  transform: scale(1.08);
}

/* Shop details: compact premium storefront header. */
.shop--premium-header {
  border-radius: 16px;
  margin-bottom: 1.5rem !important;
  padding: 1.75rem 2rem;
}

.shop--premium-header .shop--profile-container {
  gap: 1.25rem;
}

.shop--premium-header .shop--profile-left {
  gap: 1.25rem;
}

.shop--premium-header .shop--profile-logo {
  border-radius: 16px;
  height: 84px;
  min-width: 84px;
  width: 84px;
}

.shop--premium-header .shop--title {
  font-size: 1.55rem;
  letter-spacing: -0.25px;
}

.shop--premium-header .shop--actions-card {
  border-radius: 14px;
  min-width: 300px;
  padding: 1rem 1.15rem;
}

.shop--premium-header .shop--actions-btn-group {
  justify-content: center;
}

.shop--premium-header .shop--meta-pill {
  padding: 0.28rem 0.65rem;
}

.shop--premium-header .shop--distance-text {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
}

.shop--premium-header .shop--distance-text strong {
  color: #ffffff;
  font-weight: 600;
}

.shop--catalog-header {
  border-color: #e2e8f0 !important;
  margin-top: 0.25rem;
  padding-bottom: 0.75rem !important;
}

.shop--catalog-header h2 {
  color: var(--heading-color);
  font-size: 1.15rem;
  letter-spacing: -0.15px;
}

.shop--catalog-search {
  max-width: 320px;
  width: 100%;
}

.shop--catalog-search .input-group {
  height: 40px;
}

.shop--catalog-search .form-control {
  border-color: #dbe3ec;
  border-radius: 6px 0 0 6px;
  font-size: 0.82rem;
}

.shop--catalog-search .btn {
  align-items: center;
  background: var(--base-color);
  border-radius: 0 6px 6px 0;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  width: 42px;
}

.shop--catalog-search .btn:hover {
  background: var(--base-color-hover);
  color: #fff;
}

@media (max-width: 991.98px) {
  .shop--premium-header {
    padding: 1.5rem 1.25rem;
  }

  .shop--premium-header .shop--actions-card {
    min-width: 100%;
  }

  .shop--catalog-search {
    max-width: none;
  }
}

@media (max-width: 991.98px) {
  .shop--banner-wrap {
    padding: 1.75rem 1.5rem;
  }
  .shop--profile-container {
    flex-direction: column;
    align-items: stretch;
  }
  .shop--profile-left {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .shop--title {
    justify-content: center;
    font-size: 1.5rem;
  }
  .shop--address {
    justify-content: center;
  }
  .shop--meta-pills-row {
    justify-content: center;
  }
  .shop--actions-card {
    min-width: 100%;
    margin-top: 0.5rem;
  }
  .shop--actions-btn-group {
    justify-content: center;
  }
}

/* 10. Policy & Information Pages */
.policy--layout-wrap {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.policy--sidebar-nav {
  position: sticky;
  top: 100px;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  width: 280px;
  flex-shrink: 0;
}

.policy--nav-link {
  display: block;
  padding: 0.55rem 0.85rem;
  font-size: 0.875rem;
  color: var(--text-color);
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.policy--nav-link:hover, .policy--nav-link.active {
  background: var(--base-color-light);
  color: var(--base-color);
  font-weight: 600;
}

.policy--content-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-sm);
  flex-grow: 1;
}

.policy--section {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color-light);
}

.policy--section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.policy--section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.policy--text {
  font-size: 0.9375rem;
  color: var(--text-color);
  line-height: 1.7;
  margin-bottom: 0.85rem;
}

.policy--list {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.policy--list li {
  margin-bottom: 0.45rem;
  line-height: 1.6;
}

.policy--alert-box {
  background: #f0fdf4;
  border-left: 4px solid var(--base-color);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.25rem 0;
}

/* 11. Order Tracking Timeline */
.track--timeline {
  position: relative;
  padding: 1.5rem 0;
  margin-top: 2rem;
}

.track--timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  position: relative;
  padding-bottom: 2rem;
}

.track--timeline-step:last-child {
  padding-bottom: 0;
}

.track--timeline-step::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 18px;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
}

.track--timeline-step:last-child::before {
  display: none;
}

.track--timeline-step.completed::before {
  background: var(--base-color);
}

.track--step-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--text-muted);
  flex-shrink: 0;
  z-index: 2;
}

.track--timeline-step.completed .track--step-icon {
  background: var(--base-color);
  border-color: var(--base-color);
  color: var(--white);
}

.track--timeline-step.active .track--step-icon {
  background: var(--white);
  border-color: var(--base-color);
  color: var(--base-color);
  box-shadow: 0 0 0 4px var(--base-color-light);
}

/* 12. Marketplace Other Shop Offers Matrix */
.other--shops-table-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-top: 2.5rem;
}

.other--shop-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color-light);
  transition: background var(--transition-fast);
}

.other--shop-row:hover {
  background: #f8fafc;
}

.other--shop-row:last-child {
  border-bottom: none;
}

.other--shop-row.best-value {
  background: #f0fdf4;
  border-left: 4px solid var(--base-color);
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .policy--layout-wrap {
    flex-direction: column;
  }
  .policy--sidebar-nav {
    width: 100%;
    position: static;
  }
}


/* ==========================================================================
   Compact Category Cards & Popular Products Carousel Styling
   ========================================================================== */

/* 10-column grid on desktop */
@media (min-width: 992px) {
  .row-cols-lg-10 > * {
    flex: 0 0 auto;
    width: 10%;
  }
}
@media (min-width: 1200px) {
  .row-cols-xl-10 > * {
    flex: 0 0 auto;
    width: 10%;
  }
}
@media (min-width: 1400px) {
  .row-cols-xxl-10 > * {
    flex: 0 0 auto;
    width: 10%;
  }
}

/* Category Card Compact */
.category--card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--white);
  border: 1px solid #f1f5f9;
  border-radius: 8px !important;
  padding: 10px 4px 8px;
  text-decoration: none;
  transition: all var(--transition-fast);
  height: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.category--card:hover {
  border-color: var(--base-color);
  box-shadow: 0 6px 14px rgba(11, 123, 62, 0.12);
}

.category--image-wrap {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  transition: transform var(--transition-fast);
}

.category--card:hover .category--image-wrap {
  transform: scale(1.08);
}

.category--image {
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
}

.category--name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.category--card:hover .category--name {
  color: var(--base-color);
}

/* Popular Products Swiper Carousel & Nav Buttons */
.popular--products-carousel-wrap {
  position: relative;
  padding: 0 6px;
}

.popular--products-swiper {
  overflow: hidden;
  padding: 8px 6px 16px;
  margin-bottom: -4px;
}

.popular--products-swiper .swiper-slide {
  height: auto !important;
  display: flex;
}

.popular--products-swiper .product--card {
  width: 100%;
}

.popular--nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border-color);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--heading-color);
  font-size: 1rem;
  z-index: 15;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.popular--nav-btn:hover {
  background: var(--base-color);
  color: var(--white);
  border-color: var(--base-color);
  box-shadow: 0 4px 14px rgba(11, 123, 62, 0.3);
}

.popular--nav-prev {
  left: -14px;
}

.popular--nav-next {
  right: -14px;
}

.popular--nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Filter Pills styling */
.filter--pills-wrapper {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}

.filter--pills-wrapper::-webkit-scrollbar {
  display: none;
}

.filter--pill {
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 4px !important;
  border: 1px solid var(--border-color);
  background: var(--white);
  color: var(--text-color);
  white-space: nowrap;
  box-shadow: none !important;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.filter--pill:hover,
.filter--pill.active {
  background: var(--base-color);
  color: var(--white);
  border-color: var(--base-color);
  box-shadow: none !important;
}


/* ==========================================================================
   Strict Single Line Truncation for Products & Category Lists
   ========================================================================== */
.product--card-title,
.product--card-title a,
.deal--product-title,
.deal--product-title a,
.category--name,
.cat--sub-link,
.subcat--link,
.subcat--group-link {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  max-width: 100% !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
}

/* Blog Details Layout Styles */
.blog--detail-hero {
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 2rem;
  background: #f8fafc;
}

.blog--detail-img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.blog--author-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 2rem;
}

.blog--content-body {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #334155;
}

.blog--content-body h2, 
.blog--content-body h3, 
.blog--content-body h4 {
  color: var(--heading-color);
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.blog--quote-box {
  background: var(--base-color-light);
  border-left: 4px solid var(--base-color);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.5rem 1.75rem;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 600;
  color: var(--heading-color);
  margin: 2rem 0;
}

.blog--author-card {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.blog--author-avatar {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: var(--base-color);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.blog--sidebar-widget {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.blog--sidebar-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 1.25rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--base-color-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.blog--recent-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color-light);
  text-decoration: none;
}

.blog--recent-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.blog--recent-img {
  width: 65px;
  height: 65px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: #f1f5f9;
  padding: 6px;
}

.blog--recent-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.35;
  transition: color var(--transition-fast);
}

.blog--recent-item:hover .blog--recent-title {
  color: var(--base-color);
}


/* Blog Details Sticky Sidebar */
.blog--sidebar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 90px;
  z-index: 10;
}

@media (max-width: 991.98px) {
  .blog--sidebar-sticky {
    position: static;
  }
}


/* ==========================================================================
   Guaranteed Sticky Header (Desktop & Mobile)
   ========================================================================== */
.site-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1040 !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #eef2f6 !important;
  box-shadow: none !important;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

@media (max-width: 991.98px) {
  .mobile--header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1040 !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #eef2f6 !important;
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
  }
}

.site-header.is-sticky,
.mobile--header.is-sticky {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}


/* ==========================================================================
   Master Pixel-Perfect Header Styling (Default & Sticky)
   ========================================================================== */
.site-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1040 !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #eef2f6 !important;
  box-shadow: none !important;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.site-header.is-sticky {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09) !important;
}

/* Header Top Row */
.header--top {
  padding: 0.65rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.header--brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.header--brand-logo {
  height: 42px;
  width: auto;
  flex-shrink: 0;
}

/* Location Badge Button */
.header--location-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  height: 44px !important;
  min-height: 44px !important;
  max-width: 150px !important;
  padding: 0 0.65rem !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
}

.header--location-btn .current-location-text {
  max-width: 95px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.header--location-btn:hover {
  border-color: var(--base-color) !important;
  background-color: var(--base-color-light) !important;
  color: var(--base-color) !important;
}

.header--location-btn i,
.header--location-btn svg,
.header--location-btn .svg-icon {
  color: var(--base-color) !important;
  fill: currentColor !important;
  font-size: 1.15rem !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Header Search Group */
.header--search-form {
  position: relative;
  width: 100%;
  margin: 0 !important;
  display: flex;
  align-items: center;
}

.header--search-group {
  display: flex !important;
  align-items: center !important;
  background-color: #ffffff !important;
  border: 1.5px solid var(--base-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  height: 44px !important;
  min-height: 44px !important;
  width: 100% !important;
  margin: 0 !important;
  transition: border-color var(--transition-fast) !important;
}

.header--search-icon {
  font-size: 1.05rem !important;
  width: 1.05rem !important;
  height: 1.05rem !important;
  color: #94a3b8 !important;
  fill: currentColor !important;
  margin-left: 0.85rem !important;
  margin-right: 0.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.header--search-input {
  flex: 1 1 auto !important;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 0.75rem 0 1rem !important;
  font-size: 0.875rem !important;
  color: #1e293b !important;
  outline: none !important;
  box-shadow: none !important;
  min-width: 0 !important;
}

.header--search-input::placeholder {
  color: #94a3b8 !important;
  font-size: 0.825rem !important;
}

.header--search-mic {
  background: transparent !important;
  border: none !important;
  color: var(--base-color) !important;
  font-size: 1.1rem !important;
  padding: 0 0.55rem !important;
  height: 100% !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.header--search-btn {
  background-color: var(--base-color) !important;
  border: none !important;
  color: #ffffff !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 100% !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 6.5px 6.5px 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background-color var(--transition-fast) !important;
}

.header--search-btn:hover {
  background-color: var(--base-color-hover, #086131) !important;
}

.header--search-btn svg,
.header--search-btn .svg-icon,
.header--search-btn i {
  font-size: 1.15rem !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Header Action Buttons (Language, Wishlist, Cart, Login) */
.header--lang-dropdown .btn,
#langDropdown,
#vendorLangDropdown {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #334155 !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  white-space: nowrap !important;
  transition: all 0.2s ease !important;
}

.header--lang-dropdown .btn:hover,
#langDropdown:hover {
  border-color: var(--base-color) !important;
  color: var(--base-color) !important;
  background-color: var(--base-color-light) !important;
}

.header--action-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  position: relative;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.header--action-btn:hover {
  border-color: var(--base-color);
  color: var(--base-color);
  background-color: var(--base-color-light);
}

.header--action-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background-color: var(--base-color);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 600;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header--user-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #334155;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.header--user-btn:hover {
  border-color: var(--base-color);
  color: var(--base-color);
  background-color: var(--base-color-light);
}

/* Header Bottom Nav Row */
.header--bottom {
  padding: 0.45rem 0;
  background-color: #ffffff;
}

.header--category-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background-color: var(--base-color);
  color: #ffffff;
  padding: 0.55rem 1.15rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.925rem;
  border: none;
  cursor: pointer;
  width: auto;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  white-space: nowrap !important;
  transition: background-color var(--transition-fast);
}

.header--category-btn:hover {
  background-color: var(--base-color-hover);
  color: #ffffff;
}

.header--nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.85rem;
}

.header--nav-link {
  font-weight: 400;
  font-size: 0.925rem;
  color: #2d3748;
  padding: 0.35rem 0;
  position: relative;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.header--nav-link:hover,
.header--nav-link.active {
  color: var(--base-color);
}

.header--nav-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2.5px;
  background-color: var(--base-color);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.header--nav-link:hover:not(.active)::after {
  transform: scaleX(1);
}

.header--nav-link.active::after {
  transform: scaleX(1) !important;
  transition: none !important;
}


/* Header Scroll Sticky Shadow Only */
.site-header {
  box-shadow: none !important;
}
.mobile--header {
  box-shadow: none !important;
}

.site-header.is-sticky,
.mobile--header.is-sticky {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}


/* ==========================================================================
   Multi-Language Dynamic Font Controllers (bn: Noto Sans Bengali, en: Poppins, fr: Poppins)
   ========================================================================== */
html, body {
  font-family: var(--font-main);
}

html[lang="bn"], body[lang="bn"], .lang-bn {
  font-family: var(--font-bn) !important;
}

html[lang="en"], body[lang="en"], .lang-en {
  font-family: var(--font-en) !important;
}

html[lang="fr"], body[lang="fr"], .lang-fr {
  font-family: var(--font-fr) !important;
}

h1, h2, h3, h4, h5, h6,
.btn, .form-control, .badge,
.product--card-title, .category--name,
.header--nav-link, .hero--title, .hero--desc {
  font-family: inherit;
}

/* Pagination Info Text */
.pagination-info,
.pagination-info-text,
.pagination-wrapper .pagination-info p {
  font-size: 0.9375rem !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  line-height: 1.5 !important;
}

.pagination-info .text--heading,
.pagination-info span,
.pagination-info strong,
.pagination-info b {
  color: var(--heading-color) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
}






/* ==========================================================================
   CUSTOM.CSS UTILITIES
   ========================================================================== */

/* Copy Animation */
.base-color {
  color: hsl(var(--main)) !important;
}

.copyInput {
  display: inline-block;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

.copied::after {
  position: absolute;
  top: 8px;
  right: 12%;
  width: 100px;
  display: block;
  content: "COPIED";
  font-size: 1em;
  padding: 5px 5px;
  color: #fff;
  background-color: #FF7000;
  border-radius: 3px;
  opacity: 0;
  will-change: opacity, transform;
  animation: showcopied 1.5s ease;
}

@keyframes showcopied {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  50% {
    opacity: 0.7;
    transform: translateX(40%);
  }

  70% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
  }
}




.cookies-card {
  width: 520px;
  padding: 30px;
  color: #1E2337;
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 999999;
  transition: all .5s;
  background: #d1d1d1;
  border-radius: 5px;
}

.cookies-card.hide {
  bottom: -500px !important;
}

.radius--10px {
  border-radius: 10px;
}

.cookies-card__icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #6e6f70;
  color: #fff;
  font-size: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cookies-card__content {
  margin-bottom: 0;
}

.cookies-btn {
  color: #363636;
  text-decoration: none;
  padding: 10px 35px;
  margin: 3px 5px;
  display: inline-block;
  border-radius: 999px;
}

.cookies-btn:hover {
  color: #363636;
}


@media (max-width: 767px) {
  .cookies-card {
    width: 100%;
    left: 0;
    bottom: 0;
    font-size: 14px;
    padding: 15px;
  }
}




.hover-input-popup {
  position: relative;
}

.input-popup {
  display: none;
}

.hover-input-popup .input-popup {
  display: block;
  position: absolute;
  bottom: 130%;
  left: 50%;
  width: 280px;
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.input-popup::after {
  position: absolute;
  content: '';
  bottom: -19px;
  left: 50%;
  margin-left: -5px;
  border-width: 10px 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent #1a1a1a transparent;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.input-popup p {
  padding-left: 20px;
  position: relative;
}

.input-popup p::before {
  position: absolute;
  content: '';
  font-family: 'Line Awesome Free';
  font-weight: 900;
  left: 0;
  top: 4px;
  line-height: 1;
  font-size: 18px;
}

.input-popup p.error {
  text-decoration: line-through;
}

.input-popup p.error::before {
  content: "\f057";
  color: #ea5455;
}

.input-popup p.success::before {
  content: "\f058";
  color: #28c76f;
}



.show-filter {
  display: none;
}

@media(max-width:767px) {
  .responsive-filter-card {
    display: none;
    transition: none;
  }

  .show-filter {
    display: block;
  }
}



/* ////////////////// select 2 css //////////////// */
.select2-dropdown {
  border: 1px solid #e2e8f0 !important;
  margin-top: 4px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.select2-search--dropdown {
  padding: 10px 10px !important;
  border-color: #ced4da !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: #ced4da !important;
  padding: 10px 20px;
}

.select2-results__option.select2-results__option--selected,
.select2-results__option--selectable,
.select2-container--default .select2-results__option--disabled {
  padding: 12px 14px !important;
  border-bottom: 1px solid #eee;
}

.select2-results__option.select2-results__message {
  text-align: center !important;
  padding: 12px 14px !important;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
  background: #ddd;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #ddd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
  content: "\f107";
  font-family: "Line Awesome Free";
  font-weight: 900;
  font-size: 0.85rem;
  color: #64748b;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: transform 0.25s ease;
}

.select2-container--default .select2-selection--single {
  border-color: #ced4da !important;
  border-width: 1px !important;
  border-radius: .375rem !important;
  padding: .375rem .75rem !important;
  height: 42px !important;
  min-height: 42px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 10px !important;
  width: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: auto 0 !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after {
  transform: rotate(-180deg) !important;
  color: #10b981 !important;
}

.select2-results__option:last-child,
.select2-results__option:first-child,
.select2-results__option {
  border-radius: 0 !important;
}

.select2-results__option:last-child,
.select2-container--default .select2-results__option:last-child,
.select2-results__options > .select2-results__option:last-child {
  border-bottom: none !important;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: rgba(11, 123, 62, 0.1) !important;
  color: var(--base-color, #0b7b3e) !important;
  font-weight: 600;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
  background-color: var(--base-color, #0b7b3e) !important;
  color: #ffffff !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: rgb(var(--main)) !important;
  box-shadow: 0 0 25px rgba(11, 123, 62, 0.071) !important;
  outline: 0 !important;
}

.select2-dropdown .country-flag {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.select2-dropdown .gateway-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px !important;
}

.select2-dropdown .gateway-subtitle {
  font-size: 12px;
  margin-bottom: 0px !important;
}
.select2-container--open .select2-selection.select2-selection--single, .select2-container--open .select2-selection.select2-selection--multiple {
  border-color: hsl(var(--base)) !important;
  border-radius: .375rem !important;
}


.gateway-card {
  padding: 15px;
}

.payment-card-title {
  padding: 13px 25px;
  text-align: center;
  background-color: rgb(var(--main));
  border-radius: 5px;
  border: 0;
  margin-bottom: 0px;
  color: #fff;
}

.payment-system-list {
  --thumb-width: 100px;
  --thumb-height: 40px;
  --radio-size: 12px;
  --border-color: #cccccf59;
  --hover-border-color: rgb(var(--main));
  background-color: #fff;
  border-radius: 5px;
  height: 100%;

}


.payment-system-list.is-scrollable {
  max-height: min(388px, 70vh);
  overflow-x: auto;
  padding-block: 4px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;

}

.payment-system-list.is-scrollable::-webkit-scrollbar-thumb {
  background-color: rgb(var(--main));
  border-radius: 10px;
}

.payment-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 18px;
  border: 1px solid #fff;
  border-top-color: var(--border-color);
  transition: all 0.3s;
  border-left: 3px solid transparent;
}

.payment-item:first-child {
  border-top-color: #fff;
  border-radius: 5px 5px 0 0;
}

.payment-item:has(.payment-item__radio:checked) {
  border-left: 3px solid var(--hover-border-color);
  border-radius: 0px;
}

.payment-item__check {
  border: 3px solid transparent;
}

.payment-item:has(.payment-item__radio:checked) .payment-item__check {
  border: 3px solid rgb(var(--main));
}

.payment-item__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - var(--thumb-width))
}

.payment-item__check {
  width: var(--radio-size);
  height: var(--radio-size);
  border: 1px solid rgb(var(--main));
  display: inline-block;
  border-radius: 100%;

}

.payment-item__name {
  padding-left: 10px;
  width: calc(100% - var(--radio-size));
  transition: all 0.3s;
}

.payment-item__thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
  text-align: right;
  padding-left: 10px;

  &:has(.text) {
      width: fit-content;
  }
}

.payment-item__thumb img {
  max-width: var(--thumb-width);
  max-height: var(--thumb-height);
  object-fit: cover;
}


.deposit-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.deposit-info__title {
  max-width: 50%;
  margin-bottom: 0px;
  text-align: left;
}

.deposit-info__input {
  max-width: 50%;
  text-align: right;
  width: 100%;
}

.deposit-info__input-select {
  border: 1px solid var(--border-color);
  width: 100%;
  border-radius: 5px;
  padding-block: 6px;
}

.deposit-info__input-group {
  border: 1px solid var(--border-color);
  border-radius: 5px;

  .deposit-info__input-group-text {
      align-self: center;
      padding-left: 5px;
  }

}

.deposit-info__input-group .form--control {
  padding: 5px;
  border: 0;
  height: 35px;
  text-align: right;
}

.deposit-info__input-group .form--control:focus {
  box-shadow: unset;
}

.info-text .text,
.deposit-info__input .text {
  font-size: 14px;

}

.deposit-info__title .text.has-icon {
  display: flex;
  align-items: center;
  gap: 5px
}

.total-amount {
  border-top: 1px solid var(--border-color);
}

.total-amount .deposit-info__title {
  font-weight: 600;
}

.payment-item__btn {
  border: 0;
  border-block: 1px solid var(--border-color);
  border-bottom: 0;
  background: #fff;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  font-weight: 500;
}

.payment-item:hover+.payment-item__btn {
  border-top-color: #fff;
}

button .spinner-border {
  --bs-spinner-width: 1.5rem;
  --bs-spinner-height: 1.5rem;
}

/* ==========================================
   Delivery Location Modal & Proximity UI
========================================== */
.location--modal .modal-content {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.location--modal .modal-header {
  border-bottom: 1px solid #f1f5f9;
  background-color: #ffffff;
}

.map--search-bar-container {
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.map--search-input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #f8fafc;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.map--search-input-group:focus-within {
  border-color: var(--base-color);
  background-color: #ffffff;
  box-shadow: none !important;
}

.map--search-input {
  width: 100%;
  height: 44px;
  padding: 0 95px 0 44px;
  border: none;
  background: transparent;
  font-size: 0.925rem;
  outline: none;
  color: #1e293b;
}

.map--search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  margin: 0;
  color: #94a3b8;
  font-size: 1rem;
  pointer-events: none;
  z-index: 5;
}

.map--clear-btn {
  position: absolute;
  right: 58px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 0.95rem;
  padding: 6px;
  cursor: pointer;
  display: none;
}

.map--clear-btn.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.map--clear-btn:hover {
  color: #e11d48;
}

.map--go-btn {
  position: absolute;
  right: 5px;
  height: 34px;
  min-width: 50px;
  border: none;
  border-radius: 6px;
  background-color: var(--base-color);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.825rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.map--go-btn:hover {
  opacity: 0.92;
}

/* Modal Controls: City Select2 & Current Location */
.map--controls-bar {
  padding: 10px 16px 14px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.select2-city-parent .select2-container,
.location--modal .select2-container {
  width: 100% !important;
  display: block !important;
  height: 42px !important;
}

.select2-city-parent .select2-container .select2-selection--single,
.select2-city-parent .select2-container--default .select2-selection--single,
.location--modal .select2-container .select2-selection--single,
.location--modal .select2-container--default .select2-selection--single {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 0 36px 0 14px !important;
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-sizing: border-box !important;
}

.select2-city-parent .select2-container--default.select2-container--open .select2-selection--single,
.select2-city-parent .select2-container--default.select2-container--focus .select2-selection--single,
.location--modal .select2-container--default .select2-selection--single:focus,
.location--modal .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--base-color, #0b7b3e) !important;
  box-shadow: none !important;
}

.select2-city-parent .select2-container .select2-selection--single .select2-selection__rendered,
.select2-city-parent .select2-container--default .select2-selection--single .select2-selection__rendered,
.location--modal .select2-container .select2-selection--single .select2-selection__rendered,
.location--modal .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  color: #1e293b !important;
  font-size: 0.925rem !important;
  font-weight: 500 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  display: block !important;
}

.select2-city-parent .select2-container .select2-selection--single .select2-selection__placeholder,
.select2-city-parent .select2-container--default .select2-selection--single .select2-selection__placeholder,
.location--modal .select2-container .select2-selection--single .select2-selection__placeholder,
.location--modal .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #64748b !important;
  font-weight: 400 !important;
  line-height: 40px !important;
  display: block !important;
}

.select2-city-parent .select2-container .select2-selection--single .select2-selection__arrow,
.select2-city-parent .select2-container--default .select2-selection--single .select2-selection__arrow,
.location--modal .select2-container .select2-selection--single .select2-selection__arrow,
.location--modal .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  top: 0 !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.location--modal .select2-dropdown,
.select2-dropdown {
  z-index: 999999 !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
}

.select2-results__option {
  color: #1e293b !important;
  font-size: 0.9rem !important;
  padding: 8px 14px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--base-color, #0b7b3e) !important;
  color: #ffffff !important;
}

.select2-results__option.select2-results__option--selected {
  background-color: #eef8f2 !important;
  color: var(--base-color, #0b7b3e) !important;
  font-weight: 600 !important;
}

/* Rounded Pill Select2 for Filter Bars */
.select2-filter-wrap {
  position: relative;
}

.select2-filter-wrap .select2-container,
.select2-filter-wrap .select2-container--default {
  width: 100% !important;
}

.select2-filter-wrap .select2-container .select2-selection--single,
.select2-filter-wrap .select2-container--default .select2-selection--single {
  border-radius: 50rem !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0.375rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
}

.select2-filter-wrap .select2-container .select2-selection--single .select2-selection__rendered,
.select2-filter-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0 !important;
  padding-right: 20px !important;
  color: #1e293b !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

.select2-filter-wrap .select2-container .select2-selection--single .select2-selection__arrow,
.select2-filter-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px !important;
  top: 0 !important;
  right: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Dark Theme Support for Select2 */
[data-theme="dark"] .select2-dropdown,
body.dark-theme .select2-dropdown,
.dark .select2-dropdown {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .select2-results__option,
body.dark-theme .select2-results__option,
.dark .select2-results__option {
  color: #f1f5f9 !important;
}

[data-theme="dark"] .select2-results__option.select2-results__option--selected,
body.dark-theme .select2-results__option.select2-results__option--selected,
.dark .select2-results__option.select2-results__option--selected {
  background-color: rgba(11, 123, 62, 0.25) !important;
  color: #4ade80 !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
body.dark-theme .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.dark .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--base-color, #0b7b3e) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
body.dark-theme .select2-container--default .select2-search--dropdown .select2-search__field,
.dark .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .select2-filter-wrap .select2-container .select2-selection--single,
[data-theme="dark"] .select2-filter-wrap .select2-container--default .select2-selection--single {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .select2-filter-wrap .select2-container .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-filter-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f8fafc !important;
}

.pac-container {
  z-index: 999999 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18) !important;
  border: 1px solid #cbd5e1 !important;
  font-family: inherit !important;
  margin-top: 4px;
}

.btn-gps-location {
  height: 42px;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
  color: #334155;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-gps-location:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* Interactive Map Canvas */
.map--canvas-area {
  position: relative;
  width: 100%;
  height: 350px;
  background-color: #e2e8f0;
  overflow: hidden;
}

.google-map-container {
  width: 100%;
  height: 100%;
}

.map--loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 500;
  transition: opacity 0.2s;
}

.map--loading-overlay.d-none {
  display: none !important;
}

.map--controls {
  position: absolute;
  right: 14px;
  bottom: 16px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map--control-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s;
}

.map--control-btn:hover {
  background-color: #f8fafc;
  color: #0f172a;
}

.map--instruction-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.775rem;
  pointer-events: none;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Selected Address Card */
.map--address-card {
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  padding: 14px 18px;
}

.map--address-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: rgba(var(--base-color-rgb), 0.12);
  color: var(--base-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.map--address-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
}

.map--address-desc {
  font-size: 0.825rem;
  color: #64748b;
  margin-top: 2px;
}

/* Modal Footer & Buttons */
.location--modal .modal-footer {
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.btn-reset-france {
  height: 42px;
  padding: 0 1.25rem;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

.btn-reset-france .btn-icon {
  color: #0b7b3e;
  font-size: 0.95rem;
  transition: transform 0.25s ease;
}

.btn-reset-france:hover {
  background-color: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.btn-reset-france:hover .btn-icon {
  transform: rotate(20deg);
}

.btn-reset-france:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-confirm-location {
  height: 42px;
  padding: 0 1.5rem;
  background-color: var(--base-color, #0b7b3e);
  color: #ffffff;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(11, 123, 62, 0.25);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-confirm-location:disabled {
  background-color: #cbd5e1;
  border-color: transparent;
  color: #64748b;
  cursor: not-allowed;
  opacity: 0.85;
  box-shadow: none;
  transform: none !important;
}

.btn-confirm-location:not(:disabled):hover {
  background-color: #096834;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(11, 123, 62, 0.35);
  transform: translateY(-1px);
}

.btn-confirm-location:not(:disabled):active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(11, 123, 62, 0.2);
}

/* Proximity / Distance Tag on Product & Shop Cards */
.product--distance-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #047857;
  background-color: #ecfdf5;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #a7f3d0;
}

.shop--card-distance-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.775rem;
  font-weight: 600;
  color: #0f172a;
  background-color: #f1f5f9;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 4px;
}

/* Available from Nearby Shops on Product Details */
.nearby--shops-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}

.nearby--shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.15s;
}

.nearby--shop-row:last-child {
  border-bottom: none;
}

.nearby--shop-row:hover {
  background-color: #f8fafc;
}

.nearby--shop-row.active-shop {
  background-color: #f0fdf4;
  border-left: 3px solid var(--base-color);
}

@media (max-width: 767px) {
  .map--canvas-area {
    height: 280px;
  }
  .map--search-input {
    padding-right: 85px;
    font-size: 0.875rem;
  }
  .nearby--shop-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Native Sell - Main Custom CSS (main.css)
   Strict Standard: Frontend / Vendor / Shared Custom Styling
   ========================================================================== */

/* 1. Global Select2 Standard Height & Appearance */
.select2-container--default .select2-selection--single {
  border-color: #cbd5e1 !important;
  border-width: 1.5px !important;
  border-radius: 8px !important;
  padding: 0 36px 0 14px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px !important;
  color: #1e293b !important;
  font-size: 0.925rem !important;
  font-weight: 500 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  display: block !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #64748b !important;
  font-weight: 400 !important;
  line-height: 42px !important;
  display: block !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  top: 0 !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2. Select2 Dropdown Styling & High Z-Index */
.select2-dropdown {
  z-index: 999999 !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden !important;
}

.select2-search--dropdown {
  padding: 8px 10px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 0.875rem !important;
  outline: none !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #0b7b3e !important;
  box-shadow: none !important;
}

.select2-results__options {
  max-height: 240px !important;
  overflow-y: auto !important;
  padding: 4px 0 !important;
}

.select2-results__option {
  color: #1e293b !important;
  font-size: 0.9rem !important;
  padding: 9px 14px !important;
  display: block !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #0b7b3e !important;
  color: #ffffff !important;
}

.select2-results__option.select2-results__option--selected {
  background-color: #eef8f2 !important;
  color: #0b7b3e !important;
  font-weight: 600 !important;
}

.select2-results__option.select2-results__message {
  text-align: center !important;
  padding: 12px 14px !important;
  color: #64748b !important;
}

/* 3. Delivery Location Modal UI */
.location--modal .modal-content {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.location--modal .modal-header {
  border-bottom: 1px solid #f1f5f9;
  background-color: #ffffff;
}

.map--search-bar-container {
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.map--search-input-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  background-color: #f8fafc;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}

.map--search-input-group:focus-within {
  border-color: #0b7b3e;
  background-color: #ffffff;
  box-shadow: none !important;
}

.map--search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 !important;
  margin: 0 !important;
  color: #94a3b8;
  font-size: 1rem;
  pointer-events: none;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.map--search-input {
  width: 100%;
  height: 44px;
  padding: 0 65px 0 44px !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.925rem;
  outline: none !important;
  box-shadow: none !important;
  color: #1e293b;
}

.map--search-input::-webkit-search-cancel-button,
.map--search-input::-webkit-search-decoration,
.map--search-input::-ms-clear,
.map--search-input::-ms-reveal {
  display: none !important;
  -webkit-appearance: none !important;
  width: 0 !important;
  height: 0 !important;
}

.map--clear-btn {
  display: none !important;
}

.map--go-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  min-width: 50px;
  border: none;
  border-radius: 6px;
  background-color: #0b7b3e;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.825rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.2s;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.map--go-btn:hover {
  opacity: 0.92;
}

.map--controls-bar {
  padding: 10px 16px 14px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
}

.select2-city-parent .select2-container,
.location--modal .select2-container {
  width: 100% !important;
  display: block !important;
}

/* Custom City Dropdown in Location Modal */
.city--custom-dropdown {
  position: relative;
  width: 100%;
}

.city--dropdown-toggle {
  height: 42px;
  background-color: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 0.925rem;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  text-align: left;
}

.city--dropdown-toggle:hover {
  border-color: #94a3b8;
}

.city--dropdown-toggle:focus,
.city--custom-dropdown.show .city--dropdown-toggle {
  border-color: #0b7b3e;
  outline: none;
  box-shadow: none !important;
}

.city--selected-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
}

.city--dropdown-chevron {
  font-size: 0.85rem;
  color: #64748b;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.city--custom-dropdown.show .city--dropdown-chevron {
  transform: rotate(180deg);
}

.city--dropdown-menu {
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  z-index: 999999 !important;
  max-height: 280px;
  overflow: hidden;
  margin-top: 4px;
}

.city--search-header {
  background-color: #f8fafc;
}

.city--search-header .input-group {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}

.city--search-header .input-group:focus-within {
  border-color: #0b7b3e !important;
  box-shadow: none !important;
}

.city--search-header .input-group-text {
  background: transparent !important;
  border: none !important;
  padding: 0 0.5rem 0 0.75rem;
  color: #64748b;
}

.city--search-input {
  font-size: 0.875rem;
  height: 34px;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
  padding-left: 0.25rem;
}

.city--search-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.city--dropdown-options-list {
  max-height: 210px;
  overflow-y: auto;
}

.city--dropdown-item {
  cursor: pointer;
  font-size: 0.9rem;
  color: #1e293b;
  transition: background-color 0.15s;
}

.city--dropdown-item:hover {
  background-color: #f1f5f9;
  color: #0b7b3e;
}

.city--dropdown-item.active {
  background-color: #eef8f2;
  color: #0b7b3e;
  font-weight: 600;
}

.btn-gps-location {
  height: 42px;
  border: 1.5px solid #cbd5e1;
  background-color: #f8fafc;
  color: #334155;
  border-radius: 8px;
  font-size: 0.825rem;
  font-weight: 500;
  padding: 0 12px;
  white-space: nowrap;
  flex-shrink: 0;
  width: auto;
  transition: all 0.2s ease;
}

.btn-gps-location:hover {
  background-color: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

/* 4. Google Map Canvas */
.map--canvas-area {
  position: relative;
  width: 100%;
  height: 350px;
  background-color: #e2e8f0;
  overflow: hidden;
}

.google-map-container {
  width: 100%;
  height: 100%;
}

.map--loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 500;
}

.map--loading-overlay.d-none {
  display: none !important;
}

.map--helper-hint-bar {
  background-color: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 16px;
  font-size: 0.815rem;
  color: #475569;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.map--helper-hint-bar i {
  color: #0b7b3e;
  font-size: 0.95rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.map--controls {
  position: absolute;
  right: 14px;
  bottom: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map--control-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #334155;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.map--control-btn:hover {
  background-color: #f8fafc;
  color: #0f172a;
}

/* 5. Google Places Autocomplete dropdown z-index */
.pac-container {
  z-index: 999999 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18) !important;
  border: 1px solid #cbd5e1 !important;
  font-family: inherit !important;
  margin-top: 4px;
}

/* ==========================================================================
   6. Product Details Page (PDP) Redesign - Matching doc/5.product details page.jfif
   Strict Standard: Human-Designed Aesthetics, Zero Inline Blade Styles
   ========================================================================== */

/* Breadcrumb */
.pdp--breadcrumb-wrap {
  padding: 14px 0 10px 0;
  background: transparent;
}
.pdp--breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
}
.pdp--breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
}
.pdp--breadcrumb li a {
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
  font-size: inherit;
  transition: color 0.15s ease;
}
.pdp--breadcrumb li a:hover {
  color: var(--base-color, #0b7b3e);
}
.pdp--breadcrumb-sep {
  font-size: 0.65rem;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
}
.pdp--breadcrumb li.active,
.pdp--breadcrumb .active {
  color: var(--base-color, #0b7b3e) !important;
  font-weight: 500 !important;
  font-size: inherit !important;
}

/* Integrated Breadcrumbs inside Page Header Banner */
.page--header-banner .pdp--breadcrumb {
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
}
.page--header-banner .pdp--breadcrumb li {
  color: #64748b;
}
.page--header-banner .pdp--breadcrumb li a {
  color: #64748b;
  font-weight: 500;
}
.page--header-banner .pdp--breadcrumb li a:hover {
  color: var(--base-color, #0b7b3e);
}
.page--header-banner .pdp--breadcrumb li.active {
  color: var(--base-color, #0b7b3e) !important;
  font-weight: 500 !important;
}

/* Main Section */
.pdp--main-section {
  padding-bottom: 25px;
}
.pdp--hero-main-row {
  align-items: flex-start;
}
.pdp--primary-block {
  align-items: flex-start;
}
.pdp--sidebar-col {
  align-self: stretch;
  position: relative;
}
.pdp--sidebar-sticky-wrap {
  position: -webkit-sticky;
  position: sticky;
  top: 115px;
  z-index: 20;
}
@media (max-width: 991px) {
  .pdp--sidebar-sticky-wrap {
    position: static;
  }
}

/* Gallery Column Flex Wrapper */
.pdp--gallery-col {
  display: flex;
  flex-direction: column;
}

/* Gallery - Vertical Layout (Left Thumbnails + Right Main Image) */
.pdp--gallery-layout {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: 100%;
}
.pdp--vertical-thumbs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 62px;
  flex-shrink: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
.pdp--thumb-nav {
  width: 32px;
  height: 24px;
  border: none;
  background: #f1f5f9;
  border-radius: 4px;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.pdp--thumb-nav:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.pdp--thumbs-scroll-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pdp--thumbs-scroll-container::-webkit-scrollbar {
  display: none;
}
.pdp--thumb-item {
  width: 60px;
  height: 60px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  overflow: hidden;
}
.pdp--thumb-item img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}
.pdp--thumb-item:hover {
  border-color: #94a3b8;
  transform: translateY(-1px);
}
.pdp--thumb-item.active {
  border-color: var(--base-color, #0b7b3e);
  box-shadow: 0 0 0 2px rgba(11, 123, 62, 0.25);
}
.pdp--main-image-card {
  flex: 1;
  height: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.pdp--main-image-card .pdp--main-img,
.pdp--main-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
  user-select: none;
}
.pdp--main-image-card:hover .pdp--main-img {
  transform: scale(1.05);
}
.pdp--zoom-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1e293b;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  z-index: 3;
}
.pdp--zoom-btn:hover {
  background: #0f172a;
  transform: scale(1.1);
}

/* Product Info Column (Center) */
.pdp--info-col {
  padding: 0 10px;
}
.pdp--bestseller-badge {
  background: #15803d;
  color: #ffffff;
  font-size: 0.725rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  display: inline-block;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.pdp--product-title {
  font-size: 1.55rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 3px;
}
.pdp--product-subtitle {
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 10px;
}
.pdp--meta-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.pdp--star-icon {
  color: #eab308;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
}
.pdp--rating-number {
  font-weight: 600;
  color: #0f172a;
}
.pdp--reviews-text {
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}
.pdp--reviews-text:hover {
  color: var(--base-color, #0b7b3e);
  text-decoration: underline;
}
.pdp--meta-divider {
  color: #cbd5e1;
  margin: 0 2px;
}
.pdp--sold-text {
  color: #64748b;
  font-weight: 500;
}
.pdp--price-container {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 3px;
}
.pdp--price-large {
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--base-color, #0b7b3e);
  line-height: 1;
}
.pdp--price-struck {
  font-size: 1.05rem;
  color: #94a3b8;
  text-decoration: line-through;
}
.pdp--discount-pill {
  background: #dc2626;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.pdp--unit-calc-text {
  font-size: 0.8125rem;
  color: #64748b;
  margin-bottom: 16px;
}
.pdp--variations-wrapper {
  margin-bottom: 14px;
}
.pdp--var-lbl {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
  display: block;
}
.pdp--variation-chip {
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 5px 12px;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pdp--variation-chip:hover {
  border-color: var(--base-color, #0b7b3e);
  color: var(--base-color, #0b7b3e);
  background: #f0fdf4;
}
.pdp--variation-chip.active {
  border-color: var(--base-color, #0b7b3e);
  color: #ffffff;
  background: var(--base-color, #0b7b3e);
}
.pdp--info-spec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}
.pdp--info-spec-item {
  display: grid;
  grid-template-columns: 125px 14px 1fr;
  align-items: baseline;
  font-size: 0.875rem;
  line-height: 1.45;
}
.pdp--spec-key {
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}
.pdp--spec-sep {
  color: #64748b;
  font-weight: 600;
  text-align: left;
}
.pdp--spec-val {
  color: #1e293b;
  font-weight: 600;
  word-break: break-word;
}
.pdp--spec-val a {
  color: #1e293b;
  text-decoration: none;
}
.pdp--spec-val a:hover {
  color: var(--base-color, #0b7b3e);
  text-decoration: underline;
}

/* 4 Trust Badges in Center Column */
.pdp--trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.pdp--trust-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.pdp--trust-badge-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #10b981;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: #ffffff;
  transition: all 0.2s ease;
}
.pdp--trust-badge-item:hover .pdp--trust-badge-icon {
  background: #f0fdf4;
  transform: translateY(-2px);
}
.pdp--trust-badge-text {
  font-size: 0.725rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.25;
}

/* Right Sidebar: Pickup & Other Shops Cards */
.pdp--sidebar-pickup-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  margin-bottom: 16px;
}
.pdp--sidebar-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 12px;
}
.pdp--pickup-method-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.pdp--pickup-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #dcfce7;
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.pdp--pickup-main-title {
  font-size: 0.825rem;
  font-weight: 600;
  color: #166534;
  margin-bottom: 2px;
}
.pdp--pickup-sub-desc {
  font-size: 0.725rem;
  color: #15803d;
  line-height: 1.35;
}
.pdp--qty-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 8px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}
.pdp--qty-lbl {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 4px;
}
.pdp--qty-stepper {
  display: flex;
  align-items: center;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  height: 32px;
  background: #ffffff;
}
.pdp--qty-step-btn {
  width: 28px;
  height: 100%;
  border: none;
  background: #f8fafc;
  color: #334155;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pdp--qty-step-btn:hover {
  background: #e2e8f0;
}
.pdp--qty-step-input {
  width: 34px;
  height: 100%;
  border: none;
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: #0f172a;
  outline: none;
  background: transparent;
}
.pdp--total-lbl {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 4px;
  text-align: right;
}
.pdp--total-val {
  font-size: 1.15rem;
  font-weight: 600;
  color: #0f172a;
  text-align: right;
  line-height: 1;
}
.pdp--btn-primary-cart {
  width: 100%;
  background: #064e3b;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 11px 16px;
  font-size: 0.925rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 10px;
}
.pdp--btn-primary-cart:hover {
  background: #022c22;
  color: #ffffff;
}
.pdp--btn-primary-cart:active {
  transform: scale(0.98);
}
.pdp--btn-secondary-wishlist {
  width: 100%;
  background: #ffffff;
  color: #334155;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 12px;
}
.pdp--btn-secondary-wishlist:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}
.pdp--notice-alert {
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.75rem;
  color: #78350f;
  line-height: 1.4;
}
.pdp--notice-icon {
  color: #d97706;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Other Shops Card */
.pdp--other-shops-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.pdp--other-shops-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pdp--other-shops-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
}
.pdp--other-shops-link {
  font-size: 0.775rem;
  font-weight: 600;
  color: var(--base-color, #0b7b3e);
  text-decoration: none;
}
.pdp--other-shops-link:hover {
  text-decoration: underline;
}
.pdp--other-shops-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdp--other-shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}
.pdp--other-shop-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.pdp--other-shop-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.pdp--other-shop-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp--other-shop-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pdp--other-shop-dist {
  background: #ecfdf5;
  color: #059669;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  white-space: nowrap;
  border: 1px solid #a7f3d0;
}
.pdp--btn-shop-view {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #475569;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.pdp--btn-shop-view:hover {
  border-color: var(--base-color, #0b7b3e);
  color: var(--base-color, #0b7b3e);
  background: #f0fdf4;
}

/* Tabs Section */
.pdp--tabs-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  margin-top: 30px;
}
.pdp--tabs-header {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 18px;
}
.pdp--tabs-header .nav-tabs {
  border-bottom: none;
  gap: 10px;
}
.pdp--tabs-header .nav-link {
  border: none;
  border-bottom: 2.5px solid transparent;
  color: #64748b;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 14px 16px;
  background: transparent;
  border-radius: 0;
  transition: all 0.15s ease;
}
.pdp--tabs-header .nav-link:hover {
  color: var(--base-color, #0b7b3e);
}
.pdp--tabs-header .nav-link.active {
  color: var(--base-color, #0b7b3e);
  border-bottom-color: var(--base-color, #0b7b3e);
  background: transparent;
}
.pdp--tab-content-area {
  padding: 24px;
}
.pdp--desc-lead-text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #334155;
}
.pdp--check-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pdp--check-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #1e293b;
  font-weight: 500;
}
.pdp--check-list li svg,
.pdp--check-list li i {
  color: #16a34a;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Nutrition Box */
.pdp--nutrition-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
}
.pdp--nutrition-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #166534;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.pdp--nutrition-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #dbe2e8;
  border-radius: 8px;
  overflow: hidden;
}
.pdp--nutrition-table tr {
  border-bottom: 1px dashed #e2e8f0;
}
.pdp--nutrition-table tr:last-child {
  border-bottom: none;
}
.pdp--nutrition-table td {
  padding: 8px 12px;
  font-size: 0.85rem;
  border-bottom: 1px solid #dbe2e8;
  text-align: left !important;
}

.pdp--nutrition-table tr:last-child td {
  border-bottom: 0;
}
.pdp--nutrition-table td:first-child {
  color: #475569;
  font-weight: 500;
}
.pdp--nutrition-table td:last-child {
  color: #0f172a;
  font-weight: 600;
  text-align: left !important;
}

/* Carousels: Related & Recommended */
.pdp--carousel-section {
  margin-top: 2.25rem;
  margin-bottom: 3.25rem;
}
.pdp--section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pdp--section-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
}
.pdp--section-link {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--base-color, #0b7b3e);
  text-decoration: none;
}
.pdp--section-link:hover {
  text-decoration: underline;
}
.pdp--carousel-wrap {
  position: relative;
}
.pdp--carousel-nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pdp--carousel-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  font-size: 0.85rem;
}
.pdp--carousel-nav-btn:hover {
  background: #f1f5f9;
  color: #0b7b3e;
  border-color: #0b7b3e;
}
.pdp--carousel-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.pdp--related-swiper {
  overflow: hidden;
  padding: 6px 4px 16px;
  margin: -6px -4px 0;
}
.pdp--related-swiper .swiper-slide {
  height: auto !important;
  display: flex;
}
.pdp--related-swiper .product--card {
  width: 100%;
}

/* Card in Carousels */
.pdp--product-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  transition: all 0.2s ease;
  position: relative;
  height: 100%;
  min-height: 250px;
  display: flex;
  flex-direction: column;
}
.pdp--product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}
.pdp--card-img-wrap {
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background-color: #f8fafc;
  border-radius: 6px;
  overflow: hidden;
}
.pdp--card-img-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.pdp--card-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e293b;
  margin-bottom: 2px;
  line-height: 1.35;
  min-height: 2.7em;
  max-height: 2.7em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pdp--card-title a {
  color: inherit;
  text-decoration: none;
}
.pdp--card-title a:hover {
  color: var(--base-color, #0b7b3e);
}
.pdp--card-weight {
  font-size: 0.725rem;
  color: #64748b;
  margin-bottom: 4px;
  min-height: 1.2em;
}
.pdp--card-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.pdp--card-price-current {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #0f172a;
}
.pdp--card-price-old {
  font-size: 0.75rem;
  color: #94a3b8;
  text-decoration: line-through;
}
.pdp--card-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
}
.pdp--card-rating-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
}
.pdp--card-star {
  color: #eab308;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
}
.pdp--card-score {
  font-weight: 600;
  color: #0f172a;
}
.pdp--product-card .pdp--card-wishlist-inline-btn,
.pdp--card-wishlist-inline-btn.product--card-wishlist {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  padding: 0 4px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: color 0.15s ease !important;
}
.pdp--product-card .pdp--card-wishlist-inline-btn:hover,
.pdp--card-wishlist-inline-btn.product--card-wishlist:hover {
  color: #ef4444 !important;
  background: transparent !important;
}
.pdp--card-cart-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #064e3b;
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s ease;
}
.pdp--card-cart-btn:hover {
  background: #022c22;
}

/* Image Zoom Modal */
.pdp--zoom-modal .modal-content {
  background: rgba(15, 23, 42, 0.95);
  border: none;
  border-radius: 12px;
}
.pdp--zoom-modal .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pdp--zoom-modal-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
}

/* Responsive Adaptations */
@media (max-width: 991px) {
  .pdp--carousel-prev {
    left: -4px;
  }
  .pdp--carousel-next {
    right: -4px;
  }
}
@media (max-width: 767px) {
  .pdp--gallery-col {
    display: block;
  }
  .pdp--gallery-layout {
    flex-direction: column-reverse;
    height: auto;
  }
  .pdp--vertical-thumbs {
    flex-direction: row;
    width: 100%;
    height: auto;
    overflow-x: auto;
    justify-content: center;
  }
  .pdp--thumb-nav {
    display: none;
  }
  .pdp--thumbs-scroll-container {
    flex-direction: row;
    max-height: none;
    height: auto;
  }
  .pdp--main-image-card {
    height: 320px;
    min-height: 320px;
  }
  .pdp--trust-badges-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ==========================================================================
   Flatpickr Custom Theme (Emerald Green & Modern Rounded Aesthetics)
   ========================================================================== */
.flatpickr-calendar {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  font-family: inherit;
  overflow: hidden;
  z-index: 1060;
}

/* Keep the calendar above form content and anchored to the visible date input. */
.flatpickr-calendar.open {
  z-index: 99999 !important;
}
.flatpickr-calendar .flatpickr-months {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 6px;
  border-radius: 14px 14px 0 0;
}
.flatpickr-calendar .flatpickr-month {
  color: #1e293b;
  fill: #1e293b;
  height: 38px;
}
.flatpickr-current-month {
  padding: 4px 0 0 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 600;
  color: #0f172a;
}
.flatpickr-current-month input.cur-year {
  font-weight: 600;
  color: #0f172a;
}
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
  color: #10843f;
  fill: #10843f;
  padding: 8px 12px;
}
.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg {
  fill: #0d6832;
}
span.flatpickr-weekday {
  color: #64748b;
  font-weight: 600;
  font-size: 0.85rem;
}
.flatpickr-day {
  border-radius: 8px;
  font-weight: 500;
  color: #1e293b;
  height: 38px;
  line-height: 38px;
  margin: 1px;
}
.flatpickr-day:hover {
  background: #e8f5ed;
  border-color: #c2e5cf;
  color: #10843f;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
  background: #10843f !important;
  border-color: #10843f !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(16, 132, 63, 0.35);
}
.flatpickr-day.today {
  border-color: #10843f;
  color: #10843f;
  font-weight: 600;
}
.flatpickr-day.today:hover {
  background: #10843f;
  color: #ffffff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #cbd5e1 !important;
  background: transparent !important;
  cursor: not-allowed !important;
  opacity: 0.45;
}
.flatpickr-time {
  border-top: 1px solid #e2e8f0;
  height: 46px;
  line-height: 46px;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #e8f5ed;
}
.checkout-date-input,
.checkout-time-input {
  cursor: pointer !important;
  background-color: #ffffff !important;
}
.checkout-date-input:focus,
.checkout-time-input:focus {
  border-color: #10843f !important;
  box-shadow: none !important;
}

.shop-pickup-schedule {
  background: var(--base-color-light, #eef8f2) !important;
}

.shop-pickup-schedule .form-control {
  min-height: 38px;
}

.order-confirmation-page {
  padding-top: 5.5rem;
}

.order-confirmation-page .order-numbers-panel {
  width: min(100%, 600px);
  max-width: 600px;
  overflow: visible;
}

.order-confirmation-page .order-numbers-panel > .d-flex {
  align-items: stretch;
}

.order-confirmation-page .order-numbers-panel > .d-flex > div {
  max-width: 100%;
  flex-wrap: wrap;
}

.order-confirmation-page .order-shop-meta {
  background: #fbfdfc;
}

.order-confirmation-page .order-product-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
}

.order-confirmation-page .order-shop-thumb {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #dbe7df;
  border-radius: 6px;
  background: #eef8f2;
}

.order-confirmation-page .order-shop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image previews remain available; remove the separate upload CTA labels. */
label[for="userJobImageInput"],
label[for="userEventImageInput"] {
  display: none !important;
}

/* Keep the confirmation page cards static; hover effects belong to browsing pages. */
.order-confirmation-page .card:hover,
.order-confirmation-page .custom--card:hover,
.order-confirmation-page .cart-shop-card:hover {
  transform: none !important;
  box-shadow: var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)) !important;
}

@media (max-width: 767.98px) {
  .order-confirmation-page {
    padding-top: 3rem;
  }
}

/* User service form: keep contact and availability fields balanced. */
#userServiceForm .service-email-column,
#userServiceForm .service-availability-column {
  min-width: 0;
}

#userServiceForm .service-availability-options {
  align-items: center;
  min-height: 38px;
}

@media (max-width: 767.98px) {
  #userServiceForm .service-email-column,
  #userServiceForm .service-availability-column {
    width: 100%;
  }
}

/* Keep Flatpickr's month/year controls independent from global form focus rules. */
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year {
  -webkit-appearance: textfield !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year::-webkit-inner-spin-button,
.flatpickr-calendar .flatpickr-current-month input.cur-year::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option:checked,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option:hover,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option:focus,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option[selected] {
  background: var(--base-color, #0b7b3e) !important;
  color: #ffffff !important;
}

/* Match the Frontend date picker to the shared base-color theme. */
.flatpickr-calendar .flatpickr-months {
  background: var(--base-color, #0b7b3e) !important;
  border-bottom-color: var(--base-color, #0b7b3e) !important;
}

.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-current-month,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-calendar .flatpickr-current-month input.cur-year:focus {
  outline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.flatpickr-calendar .flatpickr-current-month {
  left: 0 !important;
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  transform: none !important;
}

.flatpickr-calendar {
  overflow: visible !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  appearance: menulist !important;
  -webkit-appearance: menulist !important;
  position: relative !important;
  z-index: 4 !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: #ffffff !important;
  color: #1e293b !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option:checked,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option:hover {
  background: var(--base-color, #0b7b3e) !important;
  color: #ffffff !important;
}

.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.flatpickr-calendar span.flatpickr-weekday {
  color: var(--base-color, #0b7b3e) !important;
}

/* ==========================================================================
   Order Status Badges - High-Contrast & Accessible
   ========================================================================== */
.order-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  padding: 0.28rem 0.75rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: 50rem !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  letter-spacing: 0.01em !important;
}
.order-status-badge i {
  font-size: 0.85rem !important;
}
.order-status-badge--pending {
  background-color: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}
.order-status-badge--confirmed {
  background-color: #f0f9ff !important;
  color: #0369a1 !important;
  border: 1px solid #bae6fd !important;
}
.order-status-badge--processing {
  background-color: #faf5ff !important;
  color: #7e22ce !important;
  border: 1px solid #e9d5ff !important;
}
.order-status-badge--ready {
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}
.order-status-badge--completed {
  background-color: #059669 !important;
  color: #ffffff !important;
  border: 1px solid #059669 !important;
}
.order-status-badge--completed i {
  color: #ffffff !important;
}
.order-status-badge--rejected {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}
.order-status-badge--cancelled {
  background-color: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}

/* ============================================================
   RATING COLOR SYSTEM  — danger(1-2) / warning(3) / success(4-5)
   Usage:  <span class="rating-color--{1..5}"> wraps the filled stars
   ============================================================ */

/* Per-score colour tokens: Red (1-2), Yellow (3), Green (4-5) */
.rating-color--1 { color: #dc2626 !important; fill: #dc2626 !important; }   /* red    */
.rating-color--2 { color: #dc2626 !important; fill: #dc2626 !important; }   /* red    */
.rating-color--3 { color: #eab308 !important; fill: #eab308 !important; }   /* yellow */
.rating-color--4 { color: #16a34a !important; fill: #16a34a !important; }   /* green  */
.rating-color--5 { color: #16a34a !important; fill: #16a34a !important; }   /* green  */

/* Single-star + number badge (product cards, shop cards, PDP header) */
.rating-badge--1 i,
.rating-badge--1 .bi,
.rating-badge--1 svg,
.rating-badge--1 .svg-icon { color: #dc2626 !important; fill: #dc2626 !important; }
.rating-badge--1 span { color: #334155 !important; }

.rating-badge--2 i,
.rating-badge--2 .bi,
.rating-badge--2 svg,
.rating-badge--2 .svg-icon { color: #dc2626 !important; fill: #dc2626 !important; }
.rating-badge--2 span { color: #334155 !important; }

.rating-badge--3 i,
.rating-badge--3 .bi,
.rating-badge--3 svg,
.rating-badge--3 .svg-icon { color: #eab308 !important; fill: #eab308 !important; }
.rating-badge--3 span { color: #334155 !important; }

.rating-badge--4 i,
.rating-badge--4 .bi,
.rating-badge--4 svg,
.rating-badge--4 .svg-icon { color: #16a34a !important; fill: #16a34a !important; }
.rating-badge--4 span { color: #334155 !important; }

.rating-badge--5 i,
.rating-badge--5 .bi,
.rating-badge--5 svg,
.rating-badge--5 .svg-icon { color: #16a34a !important; fill: #16a34a !important; }
.rating-badge--5 span { color: #334155 !important; }

/* Interactive star selector (review form) — update via JS */
.star-btn.star-active--1 i, .star-btn.star-active--1 svg  { color: #dc2626 !important; fill: #dc2626 !important; }
.star-btn.star-active--2 i, .star-btn.star-active--2 svg  { color: #dc2626 !important; fill: #dc2626 !important; }
.star-btn.star-active--3 i, .star-btn.star-active--3 svg  { color: #eab308 !important; fill: #eab308 !important; }
.star-btn.star-active--4 i, .star-btn.star-active--4 svg  { color: #16a34a !important; fill: #16a34a !important; }
.star-btn.star-active--5 i, .star-btn.star-active--5 svg  { color: #16a34a !important; fill: #16a34a !important; }

/* PDP hero single-star icon inherits rating color */
.pdp--meta-rating-row.rating-badge--1 .pdp--star-icon { color: #dc2626 !important; fill: #dc2626 !important; }
.pdp--meta-rating-row.rating-badge--2 .pdp--star-icon { color: #dc2626 !important; fill: #dc2626 !important; }
.pdp--meta-rating-row.rating-badge--3 .pdp--star-icon { color: #eab308 !important; fill: #eab308 !important; }
.pdp--meta-rating-row.rating-badge--4 .pdp--star-icon { color: #16a34a !important; fill: #16a34a !important; }
.pdp--meta-rating-row.rating-badge--5 .pdp--star-icon { color: #16a34a !important; fill: #16a34a !important; }

/* ==========================================================================
   Wishlist Styles & Micro-interactions
   ========================================================================== */
.product--card-wishlist {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease;
}
.product--card-wishlist:active {
  transform: scale(0.85);
}
.product--card-wishlist.active,
.pdp--card-wishlist-btn.active {
  background-color: var(--base-color-light, #eef8f2) !important;
  border-color: var(--base-color, #0b7b3e) !important;
  color: var(--base-color, #0b7b3e) !important;
}
.product--card-wishlist.active i,
.product--card-wishlist.active svg,
.product--card-wishlist.active .svg-icon,
.pdp--card-wishlist-btn.active i,
.pdp--card-wishlist-btn.active svg,
.pdp--card-wishlist-btn.active .svg-icon {
  color: var(--base-color, #0b7b3e) !important;
  fill: var(--base-color, #0b7b3e) !important;
}

/* Global Input Focus Shadow Removal */
input:not(.mobile--search-input):not(.header--search-input):focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-check-input:focus-visible {
  box-shadow: none !important;
  outline: none !important;
  border-color: var(--base-color, #0b7b3e) !important;
}
.wishlist-item-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  background-color: #f8fafc;
}
.hover-primary:hover {
  color: var(--base-color, #0b7b3e) !important;
}
.sidebar-wishlist-badge {
  font-size: 0.75rem;
  padding: 0.3em 0.65em;
  font-weight: 600;
}
.header--action-btn {
  text-decoration: none !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & CARD DESIGN SYSTEM (320px & 375px SUPPORT)
   ========================================================================== */

/* 1. Global Card Layout & Uniform Alignment */
.product--card,
.deal--product-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.product--card:hover,
.deal--product-card:hover {
  box-shadow: 0 2px 8px rgba(var(--base-color-rgb, 11, 123, 62), 0.10) !important;
  border-color: var(--base-color) !important;
}

.product--card-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* 2. Badge & Wishlist Positioning (Zero Collision on Small Screens) */
.deal--discount-tag,
.product--card .badge.bg-danger {
  position: absolute !important;
  top: 0.5rem !important;
  left: 0.5rem !important;
  z-index: 2 !important;
  max-width: calc(100% - 46px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 0.18rem 0.45rem !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
}

.product--card-wishlist {
  position: absolute !important;
  top: 0.5rem !important;
  right: 0.5rem !important;
  z-index: 3 !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #e2e8f0 !important;
  color: #64748b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  outline: none !important;
}

.product--card-wishlist svg,
.product--card-wishlist .svg-icon,
.product--card-wishlist i,
.pdp--card-wishlist-btn svg,
.pdp--card-wishlist-btn .svg-icon,
.pdp--card-wishlist-btn i {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transform: none !important;
}

.product--card-wishlist i::before,
.pdp--card-wishlist-btn i::before {
  display: block !important;
  line-height: 1 !important;
  vertical-align: 0 !important;
  margin: 0 !important;
}

/* 3. Product Card Images */
.product--card-image-wrap {
  width: 100% !important;
  height: 140px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0.5rem !important;
  margin-bottom: 0.85rem !important;
}

.product--card-image {
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transition: transform 0.25s ease !important;
}

.product--card:hover .product--card-image,
.deal--product-card:hover .product--card-image {
  transform: scale(1.05) !important;
}

/* 4. Product Card Typography & Alignment */
.product--card-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  margin-top: 0.25rem !important;
  margin-bottom: 0.4rem !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
  height: 2.7em !important;
  word-break: break-word !important;
}

.product--card-title a {
  color: #1e293b !important;
  text-decoration: none !important;
}

.product--card-title a:hover {
  color: #0b7b3e !important;
}

/* 5. Distance Tag & Meta */
.product--distance-wrap {
  margin-top: 0.2rem !important;
  margin-bottom: 0.45rem !important;
}
.product--distance-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  font-size: 0.72rem !important;
  color: #0b7b3e !important;
  background-color: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  padding: 0.15rem 0.4rem !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

.product--card-weight {
  font-size: 0.75rem !important;
  color: #64748b !important;
  margin-bottom: 0.3rem !important;
}

/* 6. Price Row */
.product--card-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.35rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 0.3rem !important;
}

.product--card-current-price {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0b7b3e !important;
  line-height: 1.2 !important;
}

.product--card-old-price {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
  line-height: 1.2 !important;
}

/* 7. Stock Bar */
.deal--progress-wrap {
  margin-top: 0.3rem !important;
  margin-bottom: 0.25rem !important;
}

.deal--progress-bar {
  height: 4px !important;
  background-color: #e2e8f0 !important;
  border-radius: 999px !important;
}

.deal--stock-info {
  font-size: 0.72rem !important;
  color: #64748b !important;
  margin-top: 0.2rem !important;
  font-weight: 500 !important;
}

/* 8. Full-Width Add to Cart Buttons (Zero Clipping) */
.product--card-cart-btn.w-100,
.deal--cart-btn,
.product--card-content .product--card-cart-btn.w-100 {
  width: 100% !important;
  height: auto !important;
  min-height: 35px !important;
  padding: 0.35rem 0.45rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem !important;
  border-radius: 6px !important;
  background-color: #0b7b3e !important;
  color: #ffffff !important;
  border: 1px solid #0b7b3e !important;
  margin-top: auto !important;
  cursor: pointer !important;
  text-align: center !important;
  white-space: normal !important;
}

.product--card-cart-btn.w-100:hover,
.deal--cart-btn:hover {
  background-color: #086332 !important;
  border-color: #086332 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

.product--card-cart-btn.w-100:active,
.deal--cart-btn:active {
  box-shadow: none !important;
  transform: none !important;
}

.product--card-cart-btn.w-100 i,
.deal--cart-btn i {
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
}

/* Product Card Rating Badge & Footer alignment */
.product--card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-top: auto !important;
  padding-top: 0.4rem !important;
}

.product--card-rating,
.pdp--card-rating {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  vertical-align: middle !important;
  gap: 3px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.product--card-stars-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 1.5px !important;
  line-height: 0 !important;
  vertical-align: middle !important;
}

.product--card-stars-group .star-icon,
.product--card-stars-group svg,
.product--card-stars-group .svg-icon {
  width: 12px !important;
  height: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.product--card-review-count {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin-left: 2px !important;
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.pdp--meta-rating-row .product--card-stars-group .star-icon,
.pdp--meta-rating-row .product--card-stars-group svg {
  width: 15px !important;
  height: 15px !important;
}

.pdp--meta-rating-row .product--card-review-count {
  font-size: 0.85rem !important;
  color: #64748b !important;
  margin-left: 4px !important;
  transition: color 0.15s ease;
}

.pdp--meta-rating-row a:hover .product--card-review-count {
  color: var(--base-color, #0b7b3e) !important;
}

.product--card-rating-val {
  font-size: 0.85rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  color: #334155 !important;
}

.product--card-cart-btn:not(.w-100) {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  font-size: 1.1rem !important;
  background-color: #0b7b3e !important;
  color: #ffffff !important;
  border: 1px solid #0b7b3e !important;
}

.product--card-cart-btn:not(.w-100):hover {
  background-color: #086332 !important;
  border-color: #086332 !important;
  color: #ffffff !important;
}

/* 9. Offers Hero Banner Fix */
.offer--hero-card h1,
.offer--hero-card h2,
.offer--hero-card h3,
.offer--hero-card p {
  color: #ffffff !important;
}

/* 10. Responsive Screen Sizes: Tablets & Phones (max-width: 575.98px) */
@media (max-width: 575.98px) {
  .product--card,
  .deal--product-card {
    padding: 0.55rem 0.45rem !important;
  }

  .product--card-image-wrap {
    height: 118px !important;
    margin-bottom: 0.55rem !important;
    padding: 0.25rem !important;
  }

  .product--card-title,
  .product--card-title a {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    min-height: 2.6em !important;
    height: 2.6em !important;
    margin-top: 0.15rem !important;
    margin-bottom: 0.25rem !important;
  }

  .product--card-current-price {
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  .product--card-old-price {
    font-size: 11px !important;
  }

  .product--card-wishlist {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.8rem !important;
  }

  .product--card-cart-btn.w-100,
  .deal--cart-btn {
    min-height: 33px !important;
    padding: 0.3rem 0.3rem !important;
    font-size: 0.75rem !important;
  }

  /* Compact Floating Buttons */
  .floating--buttons-group {
    bottom: 4.25rem !important;
    right: 0.65rem !important;
    gap: 0.4rem !important;
    z-index: 1025 !important;
  }

  .floating--btn-scrolltop,
  .floating--btn-whatsapp {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.05rem !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
  }

  .floating--btn-whatsapp span {
    display: none !important;
  }

  .floating--btn-whatsapp {
    padding: 0 !important;
    justify-content: center !important;
  }

  /* Safe Bottom Spacing for Content */
  main.main--content {
    padding-bottom: 4.5rem !important;
  }

  /* Bottom Nav Touch Targets */
  .mobile--bottom-nav {
    padding: 0.35rem 0.25rem !important;
    height: 60px !important;
  }

  .mobile--bottom-nav-link {
    font-size: 0.7rem !important;
    gap: 0.32rem !important;
    padding: 0.2rem 0 !important;
  }

  .mobile--bottom-nav-link i,
  .mobile--bottom-nav-link svg,
  .mobile--bottom-nav-link .svg-icon {
    font-size: 1.25rem !important;
    width: 21px !important;
    height: 21px !important;
  }

  .mobile--bottom-nav-badge {
    font-size: 0.6rem !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 14px !important;
    right: -9px !important;
    left: auto !important;
    top: -4px !important;
  }

  .mobile--bottom-nav-link > .mobile--bottom-nav-badge {
    left: calc(50% + 4px) !important;
    right: auto !important;
    top: -2px !important;
  }

  /* Breadcrumb Wrapping */
  .pdp--breadcrumb {
    flex-wrap: wrap !important;
    font-size: 0.78rem !important;
  }

  /* Filter Top Bar */
  .filter--top-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.65rem 0.85rem !important;
  }
}

/* 11. Ultra-Narrow Screens (320px to 360px) */
@media (max-width: 360px) {
  .product--card,
  .deal--product-card {
    padding: 0.45rem 0.35rem !important;
  }

  .product--card-image-wrap {
    height: 105px !important;
  }

  .product--card-title,
  .product--card-title a {
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  .product--card-current-price {
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  .deal--discount-tag,
  .product--card .badge.bg-danger {
    font-size: 0.68rem !important;
    padding: 0.15rem 0.35rem !important;
  }

  .product--card-cart-btn.w-100,
  .deal--cart-btn {
    min-height: 32px !important;
    font-size: 0.72rem !important;
    padding: 0.25rem 0.2rem !important;
    gap: 0.2rem !important;
  }

  .product--card-cart-btn.w-100 i,
  .deal--cart-btn i {
    font-size: 0.8rem !important;
  }

  .mobile--bottom-nav-link {
    font-size: 0.65rem !important;
    gap: 0.25rem !important;
  }

  .mobile--bottom-nav-link i,
  .mobile--bottom-nav-link svg,
  .mobile--bottom-nav-link .svg-icon {
    font-size: 1.15rem !important;
    width: 19px !important;
    height: 19px !important;
  }
}

/* ==========================================================================
   NATIVE SELL BLOG SYSTEM & STYLING
   ========================================================================== */
.blog--card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.blog--card:hover {
  box-shadow: 0 2px 8px rgba(var(--base-color-rgb, 11, 123, 62), 0.10) !important;
  border-color: var(--base-color) !important;
}

.blog--card-img-wrap {
  position: relative !important;
  width: 100% !important;
  height: 200px !important;
  overflow: hidden !important;
  background-color: #f8fafc !important;
}

.blog--card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.35s ease !important;
}

.blog--card:hover .blog--card-img {
  transform: scale(1.05) !important;
}

.blog--date-tag {
  position: absolute !important;
  bottom: 0.75rem !important;
  left: 0.75rem !important;
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 999px !important;
  letter-spacing: 0.2px !important;
}

.blog--card-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.7em !important;
}

.blog--card-title a {
  color: #1e293b !important;
  text-decoration: none !important;
}

.blog--card-title a:hover {
  color: var(--base-color, #0b7b3e) !important;
}

.blog--card-desc {
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
  color: #64748b !important;
}

.blog--read-more {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}

/* Blog Details Main Title (Fixed UI outside editor) */
.blog--details-title {
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.35;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.blog--details-meta {
  font-size: 0.8125rem;
  color: #64748b;
}

.blog--sidebar-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}

.blog--recent-title {
  font-size: 0.85rem;
  line-height: 1.35;
}

/* Non-destructive Rich Text Content Formatting (Preserves Text Editor Styles) */
.blog--content-body {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #334155;
  word-break: break-word;
  overflow-wrap: break-word;
}

.blog--content-body p {
  margin-bottom: 1.15rem;
}

.blog--content-body p:last-child {
  margin-bottom: 0;
}

.blog--content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem 0;
}

@media (max-width: 575.98px) {
  .blog--card-img-wrap {
    height: 165px !important;
  }
  .blog--card-title {
    font-size: 0.875rem !important;
  }
  .blog--details-title {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   RESPONSIVE VERIFICATION & OTP SYSTEM (320px & 375px DEVICE SUPPORT)
   ========================================================================== */
.otp-boxes {
  display: flex !important;
  justify-content: space-between !important;
  gap: 0.35rem !important;
  width: 100% !important;
  max-width: 340px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.otp-box {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 48px !important;
  height: 50px !important;
  text-align: center !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background-color: #f8fafc !important;
  color: #0f172a !important;
  padding: 0 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s !important;
}

.otp-box:focus {
  border-color: #0b7b3e !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.otp-box.filled {
  border-color: #0b7b3e !important;
  background-color: #f0fdf4 !important;
  color: #0b7b3e !important;
}

@media (max-width: 575.98px) {
  .otp-boxes {
    gap: 0.25rem !important;
  }
  .otp-box {
    height: 44px !important;
    font-size: 1.15rem !important;
    border-radius: 6px !important;
  }
  .verification-code-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.25rem !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 360px) {
  .otp-boxes {
    gap: 0.18rem !important;
  }
  .otp-box {
    height: 40px !important;
    font-size: 1rem !important;
    border-width: 1.5px !important;
  }
}

/* ========================================================
   GLOBAL OVERFLOW & VIEWPORT GUARD (Eliminates horizontal scrollbars)
======================================================== */
html {
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
}

body {
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative;
}

img, svg, video, canvas {
  max-width: 100%;
}

/* ========================================================
   AUTH LAYOUT & RESPONSIVE STRUCTURE (Header, Footer, Content)
======================================================== */
body.auth-page {
  background: #f8fafc !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
}

.auth--layout-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f8f3 100%);
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative;
}

.auth--header-bar {
  padding: 0.85rem 0.5rem;
  width: 100%;
  position: relative;
  z-index: 1050;
  background: transparent !important;
  border-bottom: none !important;
  flex-shrink: 0;
}

.auth--back-link {
  padding: 0.4rem 0.75rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e2e8f0;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.auth--back-link:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0b7b3e !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.auth--lang-btn {
  font-size: 0.825rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #334155;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.auth--lang-btn:hover, .auth--lang-btn:focus {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.auth--main-body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  position: relative;
}

.auth--page-wrapper {
  background: transparent !important;
  min-height: unset !important;
  height: auto !important;
  padding: 1rem 0.75rem 2rem !important;
  position: relative;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* Ensure background decorative shapes never push viewport or cause scrollbar */
.auth--bg-shape-1 {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 123, 62, 0.08) 0%, rgba(11, 123, 62, 0) 70%);
  pointer-events: none !important;
  z-index: 0;
}

.auth--bg-shape-2 {
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 123, 62, 0.06) 0%, rgba(11, 123, 62, 0) 70%);
  pointer-events: none !important;
  z-index: 0;
}

.auth--footer {
  flex-shrink: 0;
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 1.25rem 0;
  width: 100%;
}

.auth--card {
  max-width: 530px;
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--radius-lg, 12px);
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

@media (max-width: 575.98px) {
  .auth--header-bar {
    padding: 0.65rem 0.25rem;
  }
  .auth--page-wrapper {
    padding: 0.5rem 0.5rem 1.5rem !important;
  }
  .auth--card {
    padding: 1.25rem 1rem !important;
    border-radius: 12px;
  }
  .auth--social-top {
    flex-direction: column;
    gap: 0.5rem;
  }
  .auth--footer {
    padding: 1rem 0;
  }
}

@media (max-width: 375px) {
  .auth--card {
    padding: 1rem 0.75rem !important;
  }
  .auth--role-tab {
    font-size: 0.8rem;
    padding: 0.5rem 0.25rem;
  }
}

/* ==========================================================================
   Blog Social Share Buttons
   ========================================================================== */
.blog-share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #475569;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.blog-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.blog-share-btn.facebook {
  color: #1877f2;
}
.blog-share-btn.facebook:hover {
  background-color: #1877f2 !important;
  border-color: #1877f2 !important;
  color: #ffffff !important;
}
.blog-share-btn.facebook:hover i {
  color: #ffffff !important;
}

.blog-share-btn.whatsapp {
  color: #25d366;
}
.blog-share-btn.whatsapp:hover {
  background-color: #25d366 !important;
  border-color: #25d366 !important;
  color: #ffffff !important;
}
.blog-share-btn.whatsapp:hover i {
  color: #ffffff !important;
}

.blog-share-btn.twitter {
  color: #0f1419;
}
.blog-share-btn.twitter:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}
.blog-share-btn.twitter:hover i {
  color: #ffffff !important;
}

.blog-share-btn.copylink {
  color: #0b7b3e;
}
.blog-share-btn.copylink:hover {
  background-color: #0b7b3e !important;
  border-color: #0b7b3e !important;
  color: #ffffff !important;
}
.blog-share-btn.copylink:hover i {
  color: #ffffff !important;
}

.blog--sticky-sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 150px;
  z-index: 10;
}

@media (min-width: 992px) {
  .ticket--sticky-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 150px !important;
    z-index: 10;
    will-change: transform, top;
  }
}

/* ==========================================================================
   Contact Page Styles (Modern 2-Column Info & Form Layout)
   ========================================================================== */
.contact--page-section .custom--card,
.contact--card {
  box-shadow: none !important;
  border: none !important;
}
.contact--page-section .custom--card:hover,
.contact--card:hover {
  box-shadow: none !important;
  border: none !important;
}

.contact--info-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 12px;
  background-color: #f8fafc;
  border: none !important;
  box-shadow: none !important;
  transition: none;
}
.contact--icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11, 123, 62, 0.1);
  color: #0b7b3e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.contact--info-title {
  font-weight: 600;
  font-size: 0.92rem;
  color: #0f172a;
  margin-bottom: 0.15rem;
}
.contact--info-text {
  font-size: 0.875rem;
  color: #475569;
  text-decoration: none;
  display: block;
  font-weight: 500;
}
.contact--info-text:hover {
  color: #0b7b3e;
}
.contact--info-note {
  font-size: 0.75rem;
  color: #94a3b8;
  display: block;
  margin-top: 0.15rem;
}
.contact--highlight-card {
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(11, 123, 62, 0.08) 0%, rgba(15, 118, 110, 0.08) 100%);
  border: 1px solid rgba(11, 123, 62, 0.15);
  padding: 1.15rem;
}
[data-theme="dark"] .contact--info-box {
  background-color: #1e293b;
  border: none !important;
  box-shadow: none !important;
}
[data-theme="dark"] .contact--info-title {
  color: #f8fafc;
}
[data-theme="dark"] .contact--info-text {
  color: #cbd5e1;
}
[data-theme="dark"] .contact--info-text:hover {
  color: #4ade80;
}
[data-theme="dark"] .contact--info-note {
  color: #94a3b8;
}
[data-theme="dark"] .contact--highlight-card {
  background: rgba(11, 123, 62, 0.15);
  border-color: rgba(11, 123, 62, 0.3);
}

/* ==========================================================================
   Support Ticket Styles
   ========================================================================== */
.ticket-reply-admin,
.ticket-reply-user {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-color) !important;
}

.ticket-reply-admin {
  background-color: rgba(11, 123, 62, 0.03);
}

.ticket-reply-admin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--base-color, #0b7b3e);
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.ticket-reply-user::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background-color: #cbd5e1;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

[data-theme="dark"] .ticket-reply-admin {
  background-color: rgba(11, 123, 62, 0.08);
}
[data-theme="dark"] .ticket-reply-admin::before {
  background-color: #0b7b3e;
}
[data-theme="dark"] .ticket-reply-user::before {
  background-color: #475569;
}

/* Attachment Multi-File Preview Chips */
.ticket--attachment-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  width: 100%;
}
.ticket--file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  font-size: 0.8rem;
  color: #334155;
  transition: all 0.15s ease;
  max-width: 240px;
}
.ticket--file-chip .file-thumb {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.ticket--file-chip .file-icon {
  font-size: 1.1rem;
  color: #0b7b3e;
  flex-shrink: 0;
}
.ticket--file-chip .file-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.2;
}
.ticket--file-chip .file-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket--file-chip .file-size {
  font-size: 0.7rem;
  color: #64748b;
}
.ticket--file-chip .file-remove-btn {
  background: transparent;
  border: none;
  color: #ef4444;
  padding: 0 0 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
}
.ticket--file-chip .file-remove-btn:hover {
  color: #b91c1c;
}
[data-theme="dark"] .ticket--file-chip {
  background-color: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
[data-theme="dark"] .ticket--file-chip .file-size {
  color: #94a3b8;
}

/* ==========================================================================
   Universal Status Badges (Frontend / Vendor / Dashboard)
   ========================================================================== */
.badge--success,
.badge.badge--success {
  background-color: rgba(11, 123, 62, 0.12) !important;
  color: #0b7b3e !important;
  border: 1px solid rgba(11, 123, 62, 0.3) !important;
  font-weight: 600 !important;
  padding: 0.35em 0.85em !important;
  border-radius: 50rem !important;
  font-size: 0.78rem !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}
.badge--primary,
.badge.badge--primary {
  background-color: rgba(14, 165, 233, 0.12) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(14, 165, 233, 0.3) !important;
  font-weight: 600 !important;
  padding: 0.35em 0.85em !important;
  border-radius: 50rem !important;
  font-size: 0.78rem !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}
.badge--warning,
.badge.badge--warning {
  background-color: rgba(245, 158, 11, 0.12) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  font-weight: 600 !important;
  padding: 0.35em 0.85em !important;
  border-radius: 50rem !important;
  font-size: 0.78rem !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}
.badge--dark,
.badge.badge--dark {
  background-color: rgba(100, 116, 139, 0.12) !important;
  color: #475569 !important;
  border: 1px solid rgba(100, 116, 139, 0.3) !important;
  font-weight: 600 !important;
  padding: 0.35em 0.85em !important;
  border-radius: 50rem !important;
  font-size: 0.78rem !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}
.badge--danger,
.badge.badge--danger {
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #dc2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  font-weight: 600 !important;
  padding: 0.35em 0.85em !important;
  border-radius: 50rem !important;
  font-size: 0.78rem !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}

[data-theme="dark"] .badge--success,
[data-theme="dark"] .badge.badge--success {
  background-color: rgba(74, 222, 128, 0.15) !important;
  color: #4ade80 !important;
  border-color: rgba(74, 222, 128, 0.3) !important;
}
[data-theme="dark"] .badge--primary,
[data-theme="dark"] .badge.badge--primary {
  background-color: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}
[data-theme="dark"] .badge--warning,
[data-theme="dark"] .badge.badge--warning {
  background-color: rgba(251, 191, 36, 0.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}
[data-theme="dark"] .badge--dark,
[data-theme="dark"] .badge.badge--dark {
  background-color: rgba(148, 163, 184, 0.15) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}
[data-theme="dark"] .badge--danger,
[data-theme="dark"] .badge.badge--danger {
  background-color: rgba(248, 113, 113, 0.15) !important;
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
}

/* ==========================================================================
   Modern Pagination Component (Frontend / Vendor / Dashboard)
   Theme: Native Sell Green (#0b7b3e / var(--base-color))
   ========================================================================== */
.pagination-wrapper,
.pagination-wrap {
  width: 100% !important;
  display: block !important;
  clear: both !important;
}

/* Ensure any parent d-flex doesn't collapse pagination */
.d-flex:has(> nav[role="navigation"]),
.d-flex:has(> .pagination-wrapper) {
  width: 100% !important;
  justify-content: space-between !important;
}

/* Force nav to be full 100% width */
nav[role="navigation"] {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Desktop layout container (d-none d-sm-flex) */
nav[role="navigation"] > div.d-none.flex-sm-fill.d-sm-flex,
nav[role="navigation"] .d-none.flex-sm-fill.d-sm-flex {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Left side results text */
nav[role="navigation"] .d-none.flex-sm-fill.d-sm-flex > div:first-child {
  text-align: left !important;
  margin-right: auto !important;
}

/* Right side pagination pills */
nav[role="navigation"] .d-none.flex-sm-fill.d-sm-flex > div:last-child {
  text-align: right !important;
  margin-left: auto !important;
}

/* "Showing X to Y of Z results" text */
nav[role="navigation"] p.text-muted,
nav[role="navigation"] .text-muted,
.pagination-info,
.pagination-info-text,
.pagination-wrapper .pagination-info p {
  font-size: 0.9375rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  text-align: left !important;
  line-height: 1.5 !important;
}

nav[role="navigation"] p.text-muted .fw-semibold,
nav[role="navigation"] p.text-muted b,
nav[role="navigation"] p.text-muted strong,
nav[role="navigation"] .text-muted .fw-semibold,
.pagination-info .text--heading,
.pagination-info span,
.pagination-info strong,
.pagination-info b {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
}

/* Pagination container */
.pagination {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 4px !important;
  list-style: none !important;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Page items reset */
.pagination .page-item {
  margin: 0 !important;
}

/* Page links base */
.pagination .page-link {
  min-width: 36px;
  width: auto !important;
  height: 36px;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background-color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  margin-left: 0 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover state (inactive items only) */
.pagination .page-item:not(.active):not(.disabled) > .page-link:hover,
.pagination .page-item:not(.active):not(.disabled) > a.page-link:hover {
  background-color: #eef8f2 !important;
  border-color: #86efac !important;
  color: #0b7b3e !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(11, 123, 62, 0.12);
  z-index: 2;
}

/* Active page (solid state on default, hover, and focus) */
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus,
.pagination .page-link.active,
.pagination .page-link.active:hover,
.pagination .page-link.active:focus {
  background-color: #0b7b3e !important;
  border-color: #0b7b3e !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: 0 3px 8px rgba(11, 123, 62, 0.3) !important;
  transform: none !important;
  cursor: default !important;
  z-index: 3;
}

/* Disabled state (< or > when inactive) */
.pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link:hover,
.pagination .page-link:disabled,
.pagination .page-link.disabled {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.7 !important;
}

/* Focus & Active state (remove border ring on click and focus) */
.pagination .page-item:not(.active):not(.disabled) .page-link:focus,
.pagination .page-item:not(.active):not(.disabled) .page-link:focus-visible,
.pagination .page-item:not(.active):not(.disabled) .page-link:active {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Responsive adjustment */
@media (max-width: 575.98px) {
  nav[role="navigation"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  nav[role="navigation"] > div {
    display: flex;
    justify-content: center !important;
    text-align: center;
  }
  .pagination {
    justify-content: center !important;
    gap: 4px !important;
  }
  .pagination .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 8px !important;
    font-size: 0.815rem !important;
  }
}

/* ==========================================================================
   Footer Brand & Social Links Spacing & Alignment
   ========================================================================== */
.footer--bio {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--footer-text, #d7ede1);
  margin-bottom: 1.25rem !important;
  max-width: 320px;
}

/* Newsletter Integrated Capsule Input & Button */
.footer--subscribe-form {
  display: block;
  width: 100%;
  margin-bottom: 1.25rem !important;
}

.footer--subscribe-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background: #ffffff;
  border-radius: 50px;
  padding: 4px 5px 4px 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  border: 2px solid transparent;
  transition: all 0.25s ease;
}

.footer--subscribe-box:focus-within {
  border-color: var(--base-color, #0b7b3e);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.footer--subscribe-box .footer--subscribe-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  color: #1f2937 !important;
  font-size: 0.95rem;
  padding: 9px 10px 9px 0 !important;
  outline: none !important;
  width: 100%;
  min-width: 0;
  box-shadow: none !important;
  font-weight: 500;
}

.footer--subscribe-box .footer--subscribe-input::placeholder {
  color: #8c98a4 !important;
  font-size: 0.92rem;
}

.footer--subscribe-box .footer--subscribe-btn {
  background-color: var(--base-color, #0b7b3e);
  color: #ffffff !important;
  border: none !important;
  padding: 9px 22px !important;
  border-radius: 50px !important;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.footer--subscribe-box .footer--subscribe-btn:hover {
  background-color: var(--base-color-hover, #085e2f);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  color: #ffffff !important;
}

.footer--subscribe-box .footer--subscribe-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.footer--social-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem !important;
}

.footer--social-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  text-align: center;
  vertical-align: middle;
  border: none;
  text-decoration: none;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
}

.footer--social-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  color: #ffffff;
}

.footer--social-btn i::before {
  display: block;
  line-height: 1;
  vertical-align: 0;
  margin: 0;
  padding: 0;
}

/* Brand Colors Matching Reference */
.footer--social-btn.footer--social-x {
  background: #181818;
  background-image: linear-gradient(145deg, #242424, #121212);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.footer--social-btn.footer--social-instagram {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
}

.footer--social-btn.footer--social-linkedin {
  background-color: #0077b5;
  background-image: linear-gradient(145deg, #0a85c8, #00669c);
}

.footer--social-btn.footer--social-facebook {
  background-color: #1877f2;
  background-image: linear-gradient(145deg, #2884fb, #1265d6);
}

.footer--social-btn.footer--social-youtube {
  background-color: #ff0000;
  background-image: linear-gradient(145deg, #ff1a1a, #d90000);
}

.footer--social-btn:hover {
  opacity: 0.9 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Sticky Header (Desktop & Mobile)
   ========================================================================== */
.site-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  background-color: #ffffff !important;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.site-header.is-sticky {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

@media (max-width: 991.98px) {
  .mobile--header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1040 !important;
    background-color: #ffffff !important;
    transition: box-shadow 0.25s ease, background-color 0.25s ease;
  }
  .mobile--header.is-sticky {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  }

  /* Reset body padding-top: sticky header is in normal flow, no offset needed */
  body {
    padding-top: 0 !important;
  }
}

/* ==========================================================================
   Add-to-Cart Button - Perfect Center Alignment
   ========================================================================== */
.product--card-cart-btn:not(.w-100) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  vertical-align: middle !important;
  border-radius: 6px !important;
  position: relative !important;
}

.product--card-cart-btn:not(.w-100) i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  font-size: 1.15rem !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(0.5px, 1px) !important;
}

.product--card-cart-btn:not(.w-100) i::before {
  display: block !important;
  line-height: 1 !important;
  vertical-align: 0 !important;
  margin: 0 !important;
}

.product--card-cart-btn,
.deal--cart-btn {
  position: relative !important;
}

.cart-btn-qty-badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  background-color: var(--base-two-color, #ff6b00) !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  min-width: 17px !important;
  height: 17px !important;
  line-height: 17px !important;
  border-radius: 9px !important;
  padding: 0 3px !important;
  text-align: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
  pointer-events: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

/* ==========================================================================
   Header User / Login Button & Icon Sizing
   ========================================================================== */
.header--user-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 1.15rem !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  color: #1e293b !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.header--user-btn .user-name-text {
  display: inline-block;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.header--user-btn i,
.header--user-btn svg,
.header--user-btn .svg-icon {
  font-size: 1.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #475569;
  transition: color 0.2s ease;
}

.header--user-btn:hover {
  border-color: var(--base-color, #0b7b3e) !important;
  color: var(--base-color, #0b7b3e) !important;
  background-color: var(--base-color-light, #eef8f2) !important;
}

.header--user-btn:hover i,
.header--user-btn:hover svg,
.header--user-btn:hover .svg-icon {
  color: var(--base-color, #0b7b3e) !important;
}

.header--seller-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 1rem !important;
  border-radius: 8px !important;
  border: 1px solid rgba(11, 123, 62, 0.25) !important;
  background-color: #f0fdf4 !important;
  color: #0b7b3e !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.header--seller-btn i,
.header--seller-btn svg {
  font-size: 1.15rem !important;
  line-height: 1 !important;
  color: #0b7b3e !important;
  fill: currentColor !important;
  transition: transform 0.2s ease, color 0.2s ease;
}

.header--seller-btn:hover,
.header--seller-btn:focus,
.header--seller-btn:active,
.header--seller-btn.show,
.header--seller-btn[aria-expanded="true"],
.header--vendor-dropdown.show .header--seller-btn {
  background-color: #0b7b3e !important;
  color: #ffffff !important;
  border-color: #0b7b3e !important;
}

.header--seller-btn:hover i,
.header--seller-btn:hover svg,
.header--seller-btn:focus i,
.header--seller-btn:focus svg,
.header--seller-btn:active i,
.header--seller-btn:active svg,
.header--seller-btn.show i,
.header--seller-btn.show svg,
.header--seller-btn[aria-expanded="true"] i,
.header--seller-btn[aria-expanded="true"] svg,
.header--vendor-dropdown.show .header--seller-btn i,
.header--vendor-dropdown.show .header--seller-btn svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* ==========================================================================
   Category Directory Showcase & Subcategories Grid
   ========================================================================== */
.cat--search-bar-wrap {
  max-width: 520px;
  margin-top: 1.5rem;
}

.cat--search-bar-wrap .input-group {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  border-radius: 50px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  transition: all 0.25s ease;
}

.cat--search-bar-wrap .input-group:focus-within {
  border-color: var(--base-color, #0b7b3e);
  box-shadow: none !important;
}

.cat--search-bar-wrap .input-group-text {
  border: none;
  background: transparent;
  padding-left: 1.25rem;
  font-size: 1.1rem;
}

.cat--search-bar-wrap .form-control {
  border: none;
  font-size: 0.95rem;
  padding: 0.75rem 1rem 0.75rem 0.5rem;
  background: transparent;
}

.cat--search-bar-wrap .form-control:focus {
  box-shadow: none;
}

.cat--search-bar-wrap .btn-clear {
  border: none;
  background: transparent;
  color: #94a3b8;
  padding-right: 1.25rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.cat--search-bar-wrap .btn-clear:hover {
  color: #ef4444;
}

.cat--showcase-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.cat--showcase-card:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.cat--showcase-banner {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #1e293b;
}

.cat--banner-img-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.cat--banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
  filter: brightness(0.92);
}

.cat--showcase-card:hover .cat--banner-img {
  transform: scale(1.06);
  filter: brightness(0.98);
}

.cat--banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.15) 0%, rgba(15, 23, 42, 0.35) 45%, rgba(15, 23, 42, 0.88) 100%);
  pointer-events: none;
}

.cat--banner-top-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}

.cat--featured-badge {
  background: rgba(11, 123, 62, 0.9);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cat--count-badge {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cat--featured-badge i,
.cat--count-badge i,
.cat--view-all-pill i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-style: normal;
}

.cat--banner-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  z-index: 2;
}

.cat--showcase-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.cat--showcase-title a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.cat--showcase-title a:hover {
  color: #86efac;
}

.cat--view-all-pill {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff !important;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 6px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.cat--view-all-pill:hover {
  background: var(--base-color, #0b7b3e);
  border-color: var(--base-color, #0b7b3e);
  color: #ffffff !important;
  transform: translateX(2px);
}

.cat--showcase-body {
  padding: 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.cat--sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.cat--sub-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cat--sub-masonry {
  column-count: 2;
  column-gap: 12px;
}

.cat--sub-card {
  break-inside: avoid;
  display: block;
  margin-bottom: 12px;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  padding: 10px 12px;
  text-decoration: none !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.cat--sub-card:hover {
  border-color: #86efac;
  box-shadow: 0 6px 16px rgba(11, 123, 62, 0.08);
}

.cat--sub-main-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  width: 100%;
}

.cat--sub-thumb {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cat--sub-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.cat--sub-card:hover .cat--sub-thumb img {
  transform: scale(1.08);
}

.cat--sub-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.cat--sub-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.cat--sub-card:hover .cat--sub-name {
  color: var(--base-color, #0b7b3e);
}

.cat--sub-count {
  font-size: 0.74rem;
  color: #64748b;
  margin-top: 1px;
}

.cat--sub-arrow {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

.cat--sub-card:hover .cat--sub-arrow {
  color: var(--base-color, #0b7b3e);
  transform: translateX(3px);
}

/* ==========================================================================
   Multi-level Hierarchical Tree (Level 3 & Level 4)
   ========================================================================== */
.cat--child-tree {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cat--child-tree-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat--child-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.815rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none !important;
  transition: color 0.15s ease;
  width: fit-content;
}

.cat--child-bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--base-color, #0b7b3e);
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cat--child-link:hover .cat--child-bullet {
  opacity: 1;
  transform: scale(1.4);
}

.cat--child-link:hover .cat--child-name {
  color: var(--base-color, #0b7b3e);
}

.cat--child-name {
  transition: color 0.15s ease;
}

.cat--child-count {
  font-size: 0.7rem;
  color: #94a3b8;
  font-weight: 500;
}

.cat--deep-inline-wrap {
  padding-left: 12px;
  font-size: 0.74rem;
  color: #94a3b8;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.cat--deep-link {
  color: #475569;
  text-decoration: none !important;
  background: #f1f5f9;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.72rem;
  transition: all 0.15s ease;
}

.cat--deep-link:hover {
  background: #dcfce7;
  color: var(--base-color, #0b7b3e) !important;
}

.cat--showcase-footer {
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  padding: 12px 20px;
  border-radius: 0 0 18px 18px;
}

.cat--footer-cta-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--base-color, #0b7b3e);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.cat--footer-cta-link:hover {
  color: #045a2b;
  transform: translateX(2px);
}

.cat--footer-cta-link i {
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}

.cat--footer-cta-link:hover i {
  transform: scale(1.15);
}

@media (max-width: 767.98px) {
  .cat--showcase-banner {
    height: 160px;
  }
  .cat--showcase-title {
    font-size: 1.1rem;
  }
  .cat--sub-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cat--sub-masonry {
    column-count: 1 !important;
    column-gap: 0 !important;
  }
  .cat--sub-card {
    width: 100% !important;
    display: block !important;
  }
}

/* ==========================================================================
   Free Services Page Styles
   ========================================================================== */
.service-card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card-hover:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}
.service-card-hover:hover .transition-img {
  transform: scale(1.04);
}
.transition-img {
  transition: transform 0.3s ease;
}
.service-title-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.05rem;
  line-height: 1.35;
}
.service-desc-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.category-filter-wrapper::-webkit-scrollbar {
  height: 4px;
}
.category-filter-wrapper::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 4px;
}

.social-login-btn {
  border: 1px solid #cbc4c4;
}

/* ==========================================================================
   Progressive Web App (PWA) Custom Styling
   ========================================================================== */

/* PWA Standalone Mode Adjustments */
html.is-pwa-standalone {
  -webkit-tap-highlight-color: transparent;
}

html.is-pwa-standalone body {
  -webkit-tap-highlight-color: transparent;
}

html.is-pwa-standalone .site-header,
html.is-pwa-standalone .mobile--header {
  padding-top: max(0.5rem, env(safe-area-inset-top));
}

html.is-pwa-standalone .site-footer {
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* PWA Floating Install Banner */
.pwa--install-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 420px;
  width: calc(100% - 48px);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  z-index: 1040;
  overflow: hidden;
  animation: pwaSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pwaSlideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.pwa--banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 14px;
}

.pwa--banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.pwa--banner-info {
  flex-grow: 1;
  min-width: 0;
}

.pwa--banner-title {
  font-weight: 600;
  font-size: 0.925rem;
  color: #1e293b;
  line-height: 1.25;
}

.pwa--banner-desc {
  font-size: 0.775rem;
  color: #64748b;
  line-height: 1.35;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pwa--banner-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pwa--install-action-btn {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.pwa--close-btn {
  position: absolute !important;
  top: 7px !important;
  right: 8px !important;
  font-size: 0.65rem !important;
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  opacity: 0.55 !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-size: 8px !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}

.pwa--close-btn:hover {
  opacity: 1 !important;
  transform: scale(1.15);
}

/* PWA Update Notification Toast */
.pwa--update-toast {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  border: 1.5px solid var(--base-color, #0b7b3e);
  border-radius: 9999px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  padding: 6px 16px;
  z-index: 1060;
  animation: pwaSlideDown 0.3s ease forwards;
}

@keyframes pwaSlideDown {
  from {
    transform: translate(-50%, -40px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.pwa--update-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pwa--update-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
}

.pwa--step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eef8f2;
  color: var(--base-color, #0b7b3e);
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .pwa--install-banner {
    bottom: 16px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}


/* ==========================================================================
   PWA Scroll Fix — Critical for installed Android PWA
   ========================================================================== */

/*
 * Fix: AOS (Animate on Scroll) uses pointer-events:none during animation.
 * On slow Android devices in PWA mode, this can block touch/scroll temporarily.
 * Force AOS animated elements to always allow pointer events after animation.
 */
[data-aos].aos-animate {
  pointer-events: auto !important;
}


/* ==========================================================================
   Universal Multilingual Vertical Alignment & Centering (EN, BN, FR)
   Ensures text & icons across buttons, badges, nav items, pills, forms, 
   and cards are vertically centered without top-bias or excess bottom gap.
   ========================================================================== */

/* 1. Global Font Smoothing & Consistent Baseline */
html[lang="bn"],
html[lang="bn"] body,
body[lang="bn"],
.lang-bn {
  font-family: var(--font-bn) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html[lang="en"],
html[lang="en"] body,
body[lang="en"],
.lang-en {
  font-family: 'Poppins', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[lang="fr"],
html[lang="fr"] body,
body[lang="fr"],
.lang-fr {
  font-family: 'Poppins', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Icon Font Preservation against global typography overrides */
.bi, [class^="bi-"], [class*=" bi-"] {
  font-family: "bootstrap-icons" !important;
}
.la, .las {
  font-family: 'Line Awesome Free' !important;
  font-weight: 900 !important;
}
.lar {
  font-family: 'Line Awesome Free' !important;
  font-weight: 400 !important;
}
.lab {
  font-family: 'Line Awesome Brands' !important;
  font-weight: 400 !important;
}

/* 2. All Buttons & CTA Centering */
.btn,
.btn--base,
.btn--base-two,
.btn--outline-base,
.btn-sm,
.btn-lg,
.custom--btn,
.header--category-btn,
.header--user-btn,
.header--location-btn,
.header--search-btn,
.policy,
.cookies-card__btn a,
.cat--view-all-pill,
.pwa--install-action-btn,
.pwa--install-guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1.25;
}

/* 3. All Badges, Status Indicators, Pills & Tags */
.badge,
.custom--badge,
.custom--badge-discount,
.custom--badge-base,
.custom--badge-pill,
.cat--featured-badge,
.cat--count-badge,
.cat--sub-label,
.cat--sub-pill,
.cat--leaf-badge,
.subcat--header-badge,
.subcat--leaf-badge,
.subcat--promo-badge,
.subcat--tag-hot,
.subcat--tag-new,
.subcat--tag-direct,
.product--card-badge,
.product--badge,
.pdp--badge-tag,
.pdp--badge-discount,
.pdp--badge-organic,
.pdp--badge-stock,
.pdp--save-badge,
.pdp--seller-badge,
.pdp--outlet-stock-badge,
.pdp--verified-badge,
.order-status-badge,
.status-badge,
.rating-badge,
.rating-badge--1,
.header--action-badge,
.mobile--bottom-nav-badge,
.hero--badge,
.filter--widget-item .badge-count,
.offer--badge-flash,
.shop--stats-badge,
.map--instruction-badge,
.pdp--bestseller-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* 4. Icon & Text Alignment inside interactive elements */
.btn i,
.btn svg,
.badge i,
.badge svg,
.cat--featured-badge i,
.cat--count-badge i,
.cat--view-all-pill i,
.cat--sub-label i,
.header--user-btn i,
.header--location-btn i,
.header--category-btn i,
.header--search-btn i,
.header--nav-link i,
.order-status-badge i,
.subcat--group-link i,
.subcat--leaf-arrow i,
.pdp--badge-tag i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-style: normal;
  vertical-align: middle;
  margin-top: 0;
  margin-bottom: 0;
}

/* 5. Navigation Links & Dropdowns */
.header--nav-link,
.header--lang-dropdown .dropdown-toggle,
.header--lang-dropdown .dropdown-item,
.header--category-menu .dropdown-item,
.subcat--link,
.subcat--group-link,
.pdp--breadcrumb li,
.pdp--breadcrumb a {
  display: inline-flex;
  align-items: center;
  line-height: 1.3;
}

/* 6. Form Controls & Input Groups */
.form-control,
.form-select,
.input-group-text,
.custom--input {
  line-height: 1.5;
  vertical-align: middle;
  accent-color: var(--base-color);
}

.form-select:focus,
.form-control:focus,
.custom--input:focus {
  outline: none !important;
  border-color: var(--base-color) !important;
  box-shadow: none !important;
}

.form-check-input:focus {
  border-color: var(--base-color) !important;
  box-shadow: none !important;
}

.form-check-input:checked {
  background-color: var(--base-color) !important;
  border-color: var(--base-color) !important;
}

.form-select option:checked,
.form-select option:hover,
select option:checked,
select option:hover {
  background-color: var(--base-color) !important;
  color: #ffffff !important;
}

.input-group-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Custom Sort Dropdown */
.custom--sort-dropdown .dropdown-toggle {
  background-color: var(--white) !important;
  border: 1.5px solid var(--border-color, #e2e8f0) !important;
  color: var(--heading-color, #1e293b) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.4rem 0.85rem !important;
  border-radius: var(--radius-sm, 6px) !important;
  min-width: 175px;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.custom--sort-dropdown .dropdown-toggle:hover,
.custom--sort-dropdown .dropdown-toggle:focus,
.custom--sort-dropdown .dropdown-toggle[aria-expanded="true"] {
  border-color: var(--base-color, #0b7b3e) !important;
  box-shadow: 0 0 0 3px rgba(var(--base-color-rgb, 11, 123, 62), 0.18) !important;
  color: var(--heading-color, #1e293b) !important;
}

.custom--sort-dropdown .dropdown-toggle::after {
  display: inline-block !important;
  margin-left: 0.5em !important;
  vertical-align: 0.15em !important;
  content: "" !important;
  border-top: 0.35em solid currentColor !important;
  border-right: 0.35em solid transparent !important;
  border-bottom: 0 !important;
  border-left: 0.35em solid transparent !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.custom--sort-dropdown .dropdown-toggle[aria-expanded="true"]::after,
.custom--sort-dropdown.show .dropdown-toggle::after,
.custom--sort-dropdown .dropdown-toggle.show::after {
  transform: rotate(180deg) !important;
}

.custom--sort-dropdown .dropdown-menu {
  border: 1px solid var(--border-color, #e2e8f0) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  border-radius: var(--radius-sm, 6px) !important;
  padding: 0.35rem !important;
  min-width: 185px !important;
  background-color: #ffffff !important;
}

.custom--sort-dropdown .dropdown-item {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--text-color, #334155) !important;
  padding: 0.45rem 0.75rem !important;
  border-radius: var(--radius-sm, 6px) !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
  background: transparent;
  width: 100%;
  text-align: left;
}

.custom--sort-dropdown .dropdown-item:hover,
.custom--sort-dropdown .dropdown-item:focus {
  background-color: var(--base-color-light, #eef8f2) !important;
  color: var(--base-color, #0b7b3e) !important;
}

.custom--sort-dropdown .dropdown-item.active {
  background-color: var(--base-color, #0b7b3e) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* 7. Tables & Dashboard Cells */
.table > :not(caption) > * > * {
  vertical-align: middle;
}

/* 8. Sidebar Filter Radio/Checkbox & Label Alignment */
.filter--widget-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
  font-size: 0.875rem;
  color: #334155;
  cursor: pointer;
  margin-bottom: 2px;
}

.filter--widget-item:hover {
  background-color: #f8fafc;
  color: #0b7b3e;
}

.filter--widget-item .form-check {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  min-height: auto !important;
  cursor: pointer;
  flex: 1;
}

.filter--widget-item .form-check-input {
  float: none !important;
  margin: 0 !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  cursor: pointer;
  border: 1.5px solid #cbd5e1;
  transition: all 0.15s ease;
  vertical-align: middle;
}

.filter--widget-item .form-check-input:checked {
  background-color: #0b7b3e !important;
  border-color: #0b7b3e !important;
}

.filter--widget-item .form-check-input:focus {
  box-shadow: none !important;
  border-color: #0b7b3e !important;
}

.filter--widget-item .form-check-label {
  cursor: pointer;
  margin-bottom: 0 !important;
  font-size: 0.875rem;
  line-height: 1.35;
  color: inherit;
  user-select: none;
  display: inline-flex;
  align-items: center;
}

.filter--widget-item .form-check-input:checked ~ .form-check-label {
  font-weight: 600;
  color: #0b7b3e;
}

.filter--widget-item .badge-count {
  font-size: 0.75rem;
  color: #64748b;
  background-color: #f1f5f9;
  padding: 2px 7px;
  border-radius: 20px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ==========================================================================
   Responsive Footer Bottom Swap: App Badges on Top, Copyright on Bottom
   ========================================================================== */
@media (max-width: 767.98px) {
  .footer--bottom {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 1.25rem !important;
    margin-top: 2rem !important;
    padding-top: 1.25rem !important;
  }

  .footer--bottom .footer--copy {
    order: 2 !important;
    text-align: center !important;
    width: 100% !important;
  }

  .footer--bottom .footer--apps-wrapper {
    order: 1 !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .footer--bottom .footer--apps {
    justify-content: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }
}

/* ==========================================================================
   Responsive Products Page & Filter Offcanvas Sidebar Drawer
   ========================================================================== */

/* Filter Top Bar */
.filter--top-bar {
  background: var(--white, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.filter--total-count {
  font-size: 0.92rem;
  color: var(--heading-color, #0f172a);
  white-space: nowrap;
}

/* Filter Toggle Button (Mobile/Tablet) */
.filter--toggle-btn {
  background-color: var(--white, #ffffff);
  border: 1.5px solid var(--border-color, #cbd5e1);
  color: var(--heading-color, #1e293b);
  border-radius: var(--radius-sm, 6px) !important;
  height: 38px;
  padding: 0 0.95rem;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1;
  transition: all var(--transition-fast, 0.2s ease);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.filter--toggle-btn:hover,
.filter--toggle-btn:focus {
  border-color: var(--base-color, #0b7b3e);
  color: var(--base-color, #0b7b3e);
  background-color: rgba(var(--base-color-rgb, 11, 123, 62), 0.06);
}

.filter--toggle-btn i {
  font-size: 1rem;
  color: var(--base-color, #0b7b3e);
}

.filter--toggle-btn .filter--badge {
  background-color: var(--base-color, #0b7b3e);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Base Filter Sidebar Styling */
.filter--sidebar {
  background: var(--white, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
  margin-bottom: 1.5rem;
}

/* Desktop Filter Sidebar (Sticky, clean layout without container scrollbars) */
@media (min-width: 992px) {
  .filter--sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 125px !important;
    z-index: 10;
  }

  .filter--sidebar,
  .filter--sidebar-body {
    max-height: none !important;
    overflow: visible !important;
  }
}

.filter--sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color-light, #e2e8f0);
}

.filter--sidebar-header h5 {
  font-size: 1.05rem;
}

.filter--reset-link {
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.filter--reset-link:hover {
  background-color: #fee2e2;
}


/* Offcanvas Drawer Behavior for Screens < 992px */
@media (max-width: 991.98px) {
  /* Prevent scroll when filter drawer is active */
  body.filter-drawer-open {
    overflow: hidden !important;
    touch-action: none;
  }

  /* Backdrop Overlay */
  .filter--sidebar-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 1065 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.35s cubic-bezier(0.25, 0.9, 0.25, 1), visibility 0.35s cubic-bezier(0.25, 0.9, 0.25, 1) !important;
    -webkit-transition: opacity 0.35s cubic-bezier(0.25, 0.9, 0.25, 1), visibility 0.35s cubic-bezier(0.25, 0.9, 0.25, 1) !important;
    pointer-events: none !important;
    will-change: opacity;
  }

  .filter--sidebar-backdrop.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Sidebar Drawer */
  .filter--sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 330px !important;
    max-width: 86vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    background: #ffffff !important;
    z-index: 1070 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    transform: translate3d(-100%, 0, 0) !important;
    -webkit-transform: translate3d(-100%, 0, 0) !important;
    visibility: hidden !important;
    transition: transform 0.35s cubic-bezier(0.25, 0.9, 0.25, 1), visibility 0.35s cubic-bezier(0.25, 0.9, 0.25, 1) !important;
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.25, 0.9, 0.25, 1), visibility 0.35s cubic-bezier(0.25, 0.9, 0.25, 1) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    will-change: transform;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .filter--sidebar.show {
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
  }

  .filter--sidebar-header {
    padding: 1.15rem 1.25rem !important;
    border-bottom: 1px solid var(--border-color, #e2e8f0) !important;
    background: #ffffff !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }

  .filter--close-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background-color: #f1f5f9 !important;
    border: 1px solid var(--border-color, #cbd5e1) !important;
    color: var(--heading-color, #334155) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    line-height: 1 !important;
    margin-left: 0.35rem !important;
  }

  .filter--close-btn:hover {
    background-color: #fee2e2 !important;
    color: #ef4444 !important;
    border-color: #fca5a5 !important;
  }

  .filter--sidebar-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 1.25rem !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .filter--sidebar-footer {
    padding: 1rem 1.25rem !important;
    padding-bottom: max(1.25rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important;
    border-top: 1px solid var(--border-color, #e2e8f0) !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
  }

  .filter--top-bar {
    padding: 0.75rem 1rem !important;
    gap: 0.75rem !important;
  }

  .filter--toggle-btn {
    height: 36px !important;
    padding: 0 0.85rem !important;
    font-size: 0.85rem !important;
  }
}

/* Mobile Screens <= 576px */
@media (max-width: 575.98px) {
  .filter--top-bar {
    padding: 0.65rem 0.85rem !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }

  .filter--total-count {
    display: none !important;
  }

  .filter--toggle-btn {
    height: 34px !important;
    padding: 0 0.75rem !important;
    font-size: 0.82rem !important;
  }

  .custom--sort-dropdown .dropdown-toggle {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 0.75rem !important;
    font-size: 0.85rem !important;
  }

  .product--card {
    padding: 0.65rem !important;
  }

  .product--card-image-wrap {
    height: 125px !important;
    padding: 0.25rem !important;
  }

  .product--card-title,
  .product--card-title a {
    font-size: 12px !important;
    font-weight: 500 !important;
    min-height: 2.5em !important;
  }

  .product--card-current-price {
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  .product--card-old-price {
    font-size: 11px !important;
  }

  .product--card-cart-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }
}

/* ==========================================================================
   Marketplace Shops & Stores Directory ("Near Me") & Universal Banner
   ========================================================================== */
.page--header-banner {
  background: linear-gradient(135deg, rgba(23, 163, 74, 0.06) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  padding: 2.5rem 0 2rem;
  margin-bottom: 2rem;
  position: relative;
}

.page--header-banner .page--title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--heading-color, #0f172a);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.page--header-banner .page--subtitle {
  font-size: 0.95rem;
  color: var(--text-muted, #64748b);
  max-width: 680px;
  line-height: 1.5;
}

/* Shop Search & Filter Toolbar */
.shops--search-toolbar {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  padding: 1rem 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  margin-bottom: 2rem;
}

.shops--search-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  max-width: 480px;
}

.shops--search-input-wrap {
  position: relative;
  flex: 1;
}

.shops--search-input-wrap .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #94a3b8);
  font-size: 0.95rem;
  pointer-events: none;
}

.shops--search-input-wrap input {
  padding-left: 2.6rem;
  padding-right: 2.2rem;
  height: 44px;
  border-radius: var(--radius-pill, 50px);
  border: 1px solid var(--border-color, #e2e8f0);
  font-size: 0.9rem;
  background-color: #f8fafc;
  transition: all 0.2s ease;
}

.shops--search-input-wrap input:focus {
  background-color: #ffffff;
  border-color: var(--base-color, #10b981);
  box-shadow: none !important;
}

.shops--search-input-wrap .search-clear-btn {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.9rem;
  text-decoration: none;
}

.shops--search-input-wrap .search-clear-btn:hover {
  color: #ef4444;
}

.shops--search-btn {
  height: 44px;
  padding: 0 1.5rem;
  border-radius: var(--radius-pill, 50px);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.shops--count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  background-color: #f1f5f9;
  border-radius: var(--radius-pill, 50px);
  color: #334155;
  font-size: 0.825rem;
  font-weight: 600;
}

/* ==========================================================================
   Professional Marketplace Vendor / Shop Listing Cards
   ========================================================================== */
.vendor--item-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vendor--item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

/* Header: Logo + Title + Location */
.vendor--header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.vendor--logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 1.4rem;
}

.vendor--logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vendor--meta {
  flex-grow: 1;
  min-width: 0;
}

.vendor--name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.vendor--name {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vendor--name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.vendor--name a:hover {
  color: var(--base-color, #10b981);
}

.vendor--verified-icon {
  color: var(--base-color, #10b981);
  font-size: 0.9rem;
  flex-shrink: 0;
  line-height: 1;
}

.vendor--location {
  font-size: 0.8rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.3;
}

.vendor--location i,
.vendor--location svg {
  font-size: 0.8rem;
  width: 14px;
  height: 14px;
  color: #94a3b8;
  flex-shrink: 0;
}

.vendor--dist-dot {
  color: #cbd5e1;
  margin: 0 0.1rem;
}

.vendor--distance {
  color: #475569;
  font-weight: 500;
}

/* Description */
.vendor--desc {
  font-size: 0.825rem;
  color: #64748b;
  line-height: 1.45;
  margin-bottom: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4rem;
}

/* Compact Vertical Stats List */
.vendor--stat-list {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: auto;
  margin-bottom: 0.85rem;
}

.vendor--stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
}

.vendor--stat-label {
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
}

.vendor--stat-label i,
.vendor--stat-label svg {
  font-size: 0.85rem;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.vendor--stat-value {
  font-weight: 600;
  color: #1e293b;
  font-size: 0.825rem;
}

/* Action Button */
.vendor--btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--base-color, #10b981);
  background-color: transparent;
  border: 1px solid var(--base-color, #10b981);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.vendor--btn:hover {
  background-color: var(--base-color, #10b981);
  color: #ffffff;
}

.vendor--btn i,
.vendor--btn svg {
  font-size: 0.8rem;
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.vendor--item-card:hover .vendor--btn i,
.vendor--item-card:hover .vendor--btn svg {
  transform: translateX(3px);
}

/* ==========================================================================
   Support Ticket Multi-File Gallery Attachment Uploader
   ========================================================================== */
.ticket-gallery-uploader {
  border: 1.5px dashed #cbd5e1;
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 12px;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ticket-gallery-uploader:hover {
  border-color: var(--base-color, #0b7b3e);
}

.ticket-gallery-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
  gap: 10px;
}

.ticket-gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ticket-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.ticket-gallery-item .file-doc-icon {
  font-size: 1.8rem;
  color: var(--base-color, #10b981);
  margin-bottom: 2px;
}

.ticket-gallery-item .file-name {
  font-size: 0.7rem;
  font-weight: 500;
  color: #1e293b;
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.ticket-gallery-item .file-size {
  font-size: 0.62rem;
  color: #64748b;
  margin-top: 2px;
}

.ticket-gallery-item .remove-gallery-item {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.9);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  z-index: 2;
  transition: all 0.2s ease;
}

.ticket-gallery-item .remove-gallery-item:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.ticket-gallery-add-btn {
  aspect-ratio: 1 / 1;
  border: 1.5px dashed #cbd5e1;
  background-color: #ffffff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s ease;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  padding: 6px;
  user-select: none;
}

.ticket-gallery-add-btn:hover {
  border-color: var(--base-color, #10b981);
  color: var(--base-color, #10b981);
  background-color: rgba(16, 185, 129, 0.08);
}

.ticket-gallery-add-btn i {
  font-size: 1.4rem;
  margin-bottom: 2px;
}

/* Dark theme overrides */
[data-theme="dark"] .ticket-gallery-uploader,
.dark-theme .ticket-gallery-uploader {
  border-color: rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .ticket-gallery-uploader:hover,
.dark-theme .ticket-gallery-uploader:hover {
  border-color: var(--base-color, #10b981);
}

[data-theme="dark"] .ticket-gallery-item,
.dark-theme .ticket-gallery-item {
  border-color: rgba(255, 255, 255, 0.12);
  background-color: rgba(0, 0, 0, 0.3);
  box-shadow: none;
}

[data-theme="dark"] .ticket-gallery-item .file-name,
.dark-theme .ticket-gallery-item .file-name {
  color: #e2e8f0;
}

[data-theme="dark"] .ticket-gallery-item .file-size,
.dark-theme .ticket-gallery-item .file-size {
  color: #94a3b8;
}

[data-theme="dark"] .ticket-gallery-add-btn,
.dark-theme .ticket-gallery-add-btn {
  border-color: rgba(255, 255, 255, 0.22);
  background-color: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
}

[data-theme="dark"] .ticket-gallery-add-btn:hover,
.dark-theme .ticket-gallery-add-btn:hover {
  border-color: var(--base-color, #10b981);
  color: var(--base-color, #10b981);
  background-color: rgba(16, 185, 129, 0.08);
}









/* ==========================================================================
   User Sidebar Menu Enhancements
   ========================================================================== */
.user-menu-item-row { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; transition: all 0.2s ease; position: relative; }
.user-menu-item-row:hover { background-color: #f8fafc; }
.user-menu-item-row.is-active { background-color: #f0fdf4; }
.user-menu-item-row.is-active .nav-link { color: #0b7b3e !important; font-weight: 600; }
.user-menu-item-row.is-active .nav-link i { color: #0b7b3e !important; }
.sidebar-quick-add-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background-color: #f1f5f9; color: #475569; font-size: 14px; text-decoration: none !important; transition: all 0.2s ease; margin-right: 10px; flex-shrink: 0; }
.sidebar-quick-add-btn:hover { background-color: #0b7b3e; color: #ffffff !important; transform: scale(1.1); box-shadow: 0 2px 6px rgba(11, 123, 62, 0.3); }
.user-menu-item-row.is-active .sidebar-quick-add-btn { background-color: #dcfce7; color: #0b7b3e; }
.user-menu-item-row.is-active .sidebar-quick-add-btn:hover { background-color: #0b7b3e; color: #ffffff !important; }

/* ==========================================================================
   Direct Gallery Uploader Styles
   ========================================================================== */
.direct-gallery-wrapper {
  background: #ffffff;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  padding: 1rem;
  min-height: 180px;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.direct-gallery-wrapper.dragover {
  border-color: #0b7b3e;
  background-color: #f0fdf4;
}
.direct-gallery-placeholder {
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.direct-gallery-placeholder:hover {
  opacity: 0.85;
}
.direct-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
  width: 100%;
}
.direct-gallery-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.direct-gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.direct-gallery-add-card {
  aspect-ratio: 1 / 1;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0;
}
.direct-gallery-add-card:hover {
  border-color: #0b7b3e;
  background: #f0fdf4;
  color: #0b7b3e !important;
}
.direct-gallery-remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 2;
}
.direct-gallery-remove-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
}
.direct-gallery-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  z-index: 2;
}

.service-title-clamp a {
  color: #1e293b;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.service-title-clamp a:hover,
.service-card-hover:hover .service-title-clamp a {
  color: #16a34a !important;
}

/* ==========================================================================
   Job Details Page - Unified Compact Modern Styling
   ========================================================================== */
.job-hero-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}
.job-hero-banner-top {
  width: 100%;
  height: 380px;
  background: #0f172a;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.job-hero-banner-backdrop {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(24px) brightness(0.5);
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
}
.job-hero-banner-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}
@media (max-width: 991px) {
  .job-hero-banner-top {
    height: 280px;
  }
}
@media (max-width: 768px) {
  .job-hero-banner-top {
    height: 200px;
  }
}
.job-hero-media {
  width: 100%;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #edf2f7;
}
.job-highlight-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 18px;
  transition: all 0.25s ease;
}
.job-highlight-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.06);
}
.job-highlight-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.job-desc-content {
  font-size: 15px;
  line-height: 1.85;
  color: #334155;
  letter-spacing: 0.01em;
}
.job-desc-content p {
  margin-bottom: 1rem;
}
.job-apply-banner {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.job-apply-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #16a34a;
}
@media (min-width: 992px) {
  .job-sticky-sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 155px !important;
    z-index: 10;
    will-change: transform, top;
  }
}
@media (max-width: 991.98px) {
  .job-sticky-sidebar {
    position: static !important;
  }
}
.job-employer-avatar {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
  flex-shrink: 0;
}
.job-share-btn {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  transition: all 0.2s ease;
  text-decoration: none;
}
.job-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.job-share-btn.fb:hover {
  background: #1877f2;
  border-color: #1877f2;
  color: #ffffff;
}
.job-share-btn.wa:hover {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
}
.job-share-btn.tw:hover {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

/* Community Hub Category & Showcase Enhancements */
.comm-hub-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 4px;
  display: inline-block;
}
.comm-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin: 6px 0 10px;
}
.comm-tag-chip {
  font-size: 10.5px;
  background: #f1f5f9;
  color: #475569;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}
.comm-tag-chip:hover {
  background: var(--base-color, #0b7b3e);
  color: #ffffff;
  border-color: var(--base-color, #0b7b3e);
}
.comm-spotlight-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.comm-spotlight-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

/* ==========================================================================
   Global Frontend Card, Radius & Spacing Standardization
   - Large cards / content cards / hero cards / modals: 8px border-radius
   - Small cards / sub-cards / chips / tags: 4px border-radius
   - Standardized uniform card padding (1rem / 16px to 1.25rem / 20px max)
   ========================================================================== */
.card,
.custom--card,
.vendor-card,
.job-hero-card,
.service-card,
.community-service-card,
.product-card,
.product-item,
.product--card,
.event-card,
.city-card,
.city-photo-card,
.comm-spotlight-card,
.job-highlight-card,
.job-apply-banner,
.modal-content,
.dropdown-menu,
.rounded-4,
.rounded-3,
.rounded-lg,
.rounded-xl,
.rounded-2xl {
  border-radius: 8px !important;
}

.job-hero-banner-top {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}

/* Small Cards, Badges, Chips & Mini Elements */
.card-sm,
.small-card,
.comm-tag-chip,
.comm-hub-badge,
.rounded-2,
.rounded-1,
.rounded-sm,
.rounded-xs {
  border-radius: 4px !important;
}

/* Standardized Balanced Card Padding Globally */
.card.p-md-5,
.card.p-5,
.custom--card.p-md-5,
/* ==========================================================================
   Modern Premium Pillar Cards (Services, Jobs, Events)
   ========================================================================== */
.hub-pillar-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 1.1rem 1.25rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px !important;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}
.hub-pillar-card:not(.active):hover {
  background: #f8fdfa;
  border-color: #0b7b3e;
  box-shadow: 0 8px 20px -4px rgba(11, 123, 62, 0.16);
}
.hub-pillar-card:not(.active):hover .hub-pillar-title {
  color: #0b7b3e;
}
.hub-pillar-card:not(.active):hover .hub-pillar-icon {
  transform: scale(1.06);
  background: #0b7b3e;
  color: #ffffff;
  border-color: #0b7b3e;
}
.hub-pillar-card:not(.active):hover .hub-pillar-badge {
  background: #0b7b3e;
  color: #ffffff;
  border-color: #0b7b3e;
}
.hub-pillar-card.active {
  background: #f0fdf4 !important;
  border: 1px solid #0b7b3e !important;
  box-shadow: 0 3px 12px rgba(11, 123, 62, 0.1) !important;
  cursor: default;
}
.hub-pillar-card.active:hover {
  transform: none !important;
  box-shadow: 0 3px 12px rgba(11, 123, 62, 0.1) !important;
  border-color: #0b7b3e !important;
}
.hub-pillar-card.active:hover .hub-pillar-icon {
  transform: none !important;
}

.hub-pillar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.hub-pillar-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  transition: all 0.3s ease;
}
.hub-pillar-card.active .hub-pillar-icon {
  background: #0b7b3e;
  color: #ffffff;
  border-color: #0b7b3e;
}

.hub-pillar-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.01em;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  transition: all 0.3s ease;
}
.hub-pillar-card.active .hub-pillar-badge {
  background: #0b7b3e;
  color: #ffffff;
  border-color: #0b7b3e;
}

.hub-pillar-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.hub-pillar-card.active .hub-pillar-title {
  color: #065f46;
}
.hub-pillar-desc {
  font-size: 0.82rem;
  color: #64748b;
  margin-bottom: 0;
  line-height: 1.45;
  transition: color 0.3s ease;
}
.hub-pillar-card.active .hub-pillar-desc {
  color: #334155;
}

/* Dark theme overrides for pillar cards */
[data-theme="dark"] .hub-pillar-card,
body.dark-theme .hub-pillar-card {
  background: #1e293b;
  border-color: #334155;
}
[data-theme="dark"] .hub-pillar-card:not(.active):hover,
body.dark-theme .hub-pillar-card:not(.active):hover {
  background: #243447;
  border-color: #475569;
}
[data-theme="dark"] .hub-pillar-card.active,
body.dark-theme .hub-pillar-card.active {
  background: rgba(11, 123, 62, 0.25) !important;
  border-color: #10b981 !important;
}
[data-theme="dark"] .hub-pillar-title,
body.dark-theme .hub-pillar-title {
  color: #f8fafc;
}
[data-theme="dark"] .hub-pillar-desc,
body.dark-theme .hub-pillar-desc {
  color: #94a3b8;
}

/* ==========================================================================
   Select2 Filter & Form Controls Styling (Dark Green Theme with Live Search)
   ========================================================================== */
.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single {
  height: 42px !important;
  min-height: 42px !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
  background-color: #ffffff !important;
  border-color: #10b981 !important;
  box-shadow: none !important;
  outline: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #1e293b !important;
  line-height: 40px !important;
  padding-left: 0 !important;
  padding-right: 20px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #94a3b8 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 10px !important;
  width: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: auto 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

.select2-dropdown {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  z-index: 99999 !important;
  margin-top: 3px !important;
}

.select2-container--default .select2-search--dropdown {
  padding: 8px !important;
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  outline: none !important;
  font-size: 0.85rem !important;
  color: #1e293b !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
  color: #94a3b8 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #10b981 !important;
  box-shadow: none !important;
}

.select2-container--default .select2-results__options {
  max-height: 240px !important;
  padding: 4px 0 !important;
  background-color: #ffffff !important;
}

.select2-container--default .select2-results__option {
  padding: 8px 14px !important;
  font-size: 0.875rem !important;
  color: #334155 !important;
  background-color: transparent !important;
  transition: all 0.15s ease;
  cursor: pointer !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #0b7b3e !important;
  color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #eef8f2 !important;
  color: #0b7b3e !important;
  font-weight: 600 !important;
}

.select2-container--default .select2-results__message {
  color: #64748b !important;
  font-size: 0.85rem !important;
  padding: 10px 14px !important;
}

/* Dark Mode Overrides for Select2 */
[data-theme="dark"] .select2-container--default .select2-selection--single,
body.dark-theme .select2-container--default .select2-selection--single {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
body.dark-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #ffffff !important;
}

[data-theme="dark"] .select2-dropdown,
body.dark-theme .select2-dropdown {
  background-color: #0c1c14 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown,
body.dark-theme .select2-container--default .select2-search--dropdown {
  background-color: #08140e !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field,
body.dark-theme .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: #11251c !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .select2-container--default .select2-results__options,
body.dark-theme .select2-container--default .select2-results__options {
  background-color: #0c1c14 !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option,
body.dark-theme .select2-container--default .select2-results__option {
  color: #e2e8f0 !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected=true],
body.dark-theme .select2-container--default .select2-results__option[aria-selected=true] {
  background-color: rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
}

/* ==========================================================================
   Hub Search & Filter Bar Styling (Modern Adaptive with 4px Radius)
   ========================================================================== */
.hub-filter-bar-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.hub-search-input-group {
  transition: all 0.2s ease;
}

.hub-search-input-group .input-group-text {
  background: #f8fafc !important;
  border: 1px solid #d1d5db !important;
  border-right: none !important;
  color: #64748b !important;
  border-radius: 4px 0 0 4px !important;
  transition: all 0.2s ease;
}

.hub-search-input-group .form-control {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-left: none !important;
  color: #0f172a !important;
  border-radius: 0 4px 4px 0 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease;
}

.hub-search-input-group .form-control::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

.hub-search-input-group:focus-within .input-group-text {
  border-color: #10b981 !important;
  color: #059669 !important;
  background: #ffffff !important;
}

.hub-search-input-group:focus-within .form-control {
  border-color: #10b981 !important;
  box-shadow: none !important;
}

/* Dark Mode Overrides for Hub Filter Bar */
[data-theme="dark"] .hub-filter-bar-card,
body.dark-theme .hub-filter-bar-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .hub-search-input-group .input-group-text,
body.dark-theme .hub-search-input-group .input-group-text {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .hub-search-input-group .form-control,
body.dark-theme .hub-search-input-group .form-control {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .hub-search-input-group .form-control::placeholder,
body.dark-theme .hub-search-input-group .form-control::placeholder {
  color: #64748b !important;
}

.filter-select-custom {
  height: 42px !important;
  border-radius: 4px !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 0.375rem 2.25rem 0.375rem 0.85rem !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-size: 14px 10px !important;
  background-repeat: no-repeat !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
}

.filter-select-custom:focus {
  border-color: #10b981 !important;
  box-shadow: none !important;
  outline: none !important;
}

.filter-select-custom option {
  background-color: #0d1b14 !important;
  color: #ffffff !important;
  padding: 10px !important;
  font-size: 0.875rem !important;
}

.filter-reset-btn {
  height: 42px !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #94a3b8 !important;
  transition: all 0.2s ease;
}

.filter-reset-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ==========================================================================
   Modern Bootstrap 5 Tooltip Styling
   ========================================================================== */
.tooltip {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  z-index: 1080 !important;
  pointer-events: none;
  opacity: 1 !important;
}

.tooltip .tooltip-inner {
  max-width: 250px !important;
  padding: 6px 12px !important;
  color: #ffffff !important;
  text-align: center !important;
  background-color: var(--base-color, #0b7b3e) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}

.user-entry-details__image {
  width: 96px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-color, #e2e8f0);
}

.user-entry-details {
  font-size: 0.9rem;
}

.user-entry-details h4 {
  font-size: 1.3rem;
}

.user-entry-details-page h5 {
  font-size: 1.25rem !important;
}

.user-entry-details__grid .small {
  font-size: 0.76rem !important;
}

.user-entry-details__grid .fw-medium {
  font-size: 0.92rem;
}

.user-entry-details__grid .text-dark {
  line-height: 1.45;
}

.user-profile-settings-card form > .row {
  --bs-gutter-y: 0.6rem;
}

.user-profile-settings-card form > .row .form-group {
  margin-bottom: 0.35rem !important;
}

.user-profile-settings-card form > .d-flex {
  margin-top: 1.25rem !important;
  padding-top: 0.75rem !important;
}

.panel-cell-limit {
  display: block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ensure customer listing titles show an ellipsis instead of overflowing. */
.user-job-list-table > tbody > tr > td:first-child > .d-flex > div:last-child,
.user-entry-list-table > tbody > tr > td:first-child > .d-flex > div:last-child {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  overflow: hidden;
}

.user-job-list-table .panel-cell-limit,
.user-entry-list-table .panel-cell-limit {
  width: 100%;
  max-width: 100%;
}

/* Compact customer tables: fit the full row without horizontal scrolling. */
@media (min-width: 768px) {
  :is(.user-job-list-table, .user-entry-list-table) {
    table-layout: fixed;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 0.78rem;
  }

  :is(.user-job-list-table, .user-entry-list-table) th,
  :is(.user-job-list-table, .user-entry-list-table) td {
    padding: 0.55rem 0.45rem !important;
    overflow: hidden;
  }

  :is(.user-job-list-table, .user-entry-list-table) th:last-child,
  :is(.user-job-list-table, .user-entry-list-table) td:last-child {
    width: 92px;
    min-width: 92px;
    overflow: visible;
  }

  :is(.user-job-list-table, .user-entry-list-table) .panel-cell-limit {
    max-width: 100%;
  }

  :is(.user-job-list-table, .user-entry-list-table) .btn {
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  :is(.user-job-list-table, .user-entry-list-table) ~ * {
    max-width: 100%;
  }

  :is(.user-job-list-table, .user-entry-list-table) {
    overflow: hidden;
  }

  :is(.user-job-list-table, .user-entry-list-table) .panel-cell-limit,
  :is(.user-job-list-table, .user-entry-list-table) td > .d-flex {
    min-width: 0;
  }

  .panel-table-frame:has(> .user-job-list-table),
  .panel-table-frame:has(> .user-entry-list-table) {
    overflow-x: hidden !important;
  }
}

@media (max-width: 767.98px) {
  .panel-cell-limit {
    max-width: 100%;
  }
}

.user-entry-details__grid > div {
  min-width: 0;
}

@media (max-width: 575.98px) {
  .user-entry-details .card-body {
    padding: 1rem !important;
  }
  .user-entry-details__image {
    width: 76px;
    height: 60px;
  }
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  border-top-color: var(--base-color, #0b7b3e) !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom-color: var(--base-color, #0b7b3e) !important;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  border-left-color: var(--base-color, #0b7b3e) !important;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-popper-placement[data-popper-placement^=right] .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: var(--base-color, #0b7b3e) !important;
}

/* ==========================================================================
   nicEdit Responsive & Modern WYSIWYG Editor Styles
   ========================================================================== */
.nicEdit-panelContain {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #f8fafc !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
}
.nicEdit-panel {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 6px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px !important;
}
.nicEdit-main {
  width: 100% !important;
  min-height: 160px !important;
  outline: none !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  border: none !important;
  font-family: inherit !important;
  font-size: 0.925rem !important;
  line-height: 1.6 !important;
  color: #1e293b !important;
  overflow-y: auto !important;
}
.nicEdit-main:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
div:has(> .nicEdit-panelContain) {
  width: 100% !important;
  box-sizing: border-box !important;
}
div:has(> .nicEdit-main) {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #cbd5e1 !important;
  border-top: none !important;
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  margin: 0 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
div:has(> .nicEdit-main):focus-within {
  border-color: #0b7b3e !important;
  box-shadow: none !important;
}

/* Rich Description Content (Jobs, Events, Services) */
.job-desc-content,
.event-desc-content,
.service-desc-content {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #334155;
  word-break: break-word;
}
.job-desc-content p,
.event-desc-content p,
.service-desc-content p {
  margin-bottom: 0.85rem;
}
.job-desc-content p:last-child,
.event-desc-content p:last-child,
.service-desc-content p:last-child {
  margin-bottom: 0;
}
.job-desc-content ul,
.event-desc-content ul,
.service-desc-content ul {
  padding-left: 1.5rem;
  margin-bottom: 0.85rem;
  list-style-type: disc;
}
.job-desc-content ol,
.event-desc-content ol,
.service-desc-content ol {
  padding-left: 1.5rem;
  margin-bottom: 0.85rem;
  list-style-type: decimal;
}
.job-desc-content li,
.event-desc-content li,
.service-desc-content li {
  margin-bottom: 0.35rem;
}
.job-desc-content h1, .job-desc-content h2, .job-desc-content h3, .job-desc-content h4, .job-desc-content h5, .job-desc-content h6,
.event-desc-content h1, .event-desc-content h2, .event-desc-content h3, .event-desc-content h4, .event-desc-content h5, .event-desc-content h6,
.service-desc-content h1, .service-desc-content h2, .service-desc-content h3, .service-desc-content h4, .service-desc-content h5, .service-desc-content h6 {
  font-weight: 600;
  color: #0f172a;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.job-desc-content a,
.event-desc-content a,
.service-desc-content a {
  color: #0b7b3e;
  text-decoration: underline;
}
.event-desc-content h3,
.worship-article-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1e293b;
  margin-top: 1.25rem;
  margin-bottom: 0.6rem;
}
.event-desc-content p,
.worship-article-body p {
  color: #475569;
  line-height: 1.75;
  margin-bottom: 0.9rem;
}
.event-desc-content ul,
.worship-article-body ul {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}
.event-desc-content li,
.worship-article-body li {
  color: #475569;
  line-height: 1.65;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   Clean Input Autofill & Auto-suggestion Styles (Frontend)
   ========================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #1e293b !important;
  color: #1e293b !important;
  caret-color: #1e293b !important;
  transition: background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s !important;
}

input:autofill,
textarea:autofill,
select:autofill {
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color: #1e293b !important;
  color: #1e293b !important;
  caret-color: #1e293b !important;
}

/* Dark theme frontend autofill */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active,
body.dark-theme input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
  box-shadow: 0 0 0 1000px #1e293b inset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  caret-color: #ffffff !important;
}

/* ==========================================================================
   Customer / User Panel Sticky Sidebar
   ========================================================================== */
@media (min-width: 768px) {
  .user-sidebar {
    height: 100%;
  }

  .user-menu-card {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 125px !important;
    z-index: 20;
  }
}

/* ==========================================================================
   Customer / User Dashboard — Professional Human-Designed UI System
   ========================================================================== */
.user-panel-main {
  background-color: #f8fafc;
  min-height: calc(100vh - 200px);
}

/* User Card System */
.user-card,
.user-panel-main .card.custom--card {
  background: #ffffff;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  overflow: hidden;
}

.user-card-header,
.user-panel-main .card.custom--card .card-header {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 1rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.user-card-title,
.user-panel-main .card.custom--card .card-title {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0 !important;
}

.user-card-subtitle {
  color: #64748b !important;
  font-size: 0.8125rem !important;
  margin-top: 3px !important;
  margin-bottom: 0 !important;
}

.user-card-body,
.user-panel-main .card.custom--card .card-body {
  padding: 1.5rem !important;
  background-color: #ffffff !important;
}

/* User Profile Sidebar Card */
.user-profile-card {
  background: #ffffff;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  padding: 1.25rem 1rem !important;
  text-align: center;
}

@media (max-width: 991.98px) {
  .user-profile-card,
  .user-menu-card {
    display: none !important;
  }
}

.user-profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0b7b3e;
  font-weight: 600;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e2e8f0;
  margin: 0 auto 0.65rem auto;
}

.user-profile-name {
  color: #0f172a;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.user-avatar-upload {
  position: relative;
  width: 80px;
  height: 80px;
  padding: 0;
  cursor: pointer;
}

.user-avatar-upload-preview {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
}

.user-avatar-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-avatar-upload-mark {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--base-color);
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
}

.user-avatar-upload:focus-visible {
  outline: 2px solid var(--base-color);
  outline-offset: 4px;
}

.user-avatar-upload:disabled {
  cursor: wait;
}

.user-avatar-upload-loading {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  color: var(--base-color);
}

.user-avatar-upload[aria-busy="true"] .user-avatar-upload-loading {
  display: flex;
}

.user-profile-email {
  color: #64748b;
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
}

.user-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

/* User Menu Navigation Sidebar Card */
.user-menu-card {
  background: #ffffff;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  padding: 0.45rem !important;
}

.user-menu-card .nav {
  gap: 2px;
}

.user-menu-card .nav-link {
  color: #475569 !important;
  font-size: 0.875rem !important;
  font-weight: 400;
  padding: 0.52rem 0.75rem !important;
  border-radius: 6px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.15s ease;
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem;
  text-decoration: none;
  line-height: 1 !important;
}

.user-menu-card .nav-link i,
.user-menu-card .nav-link svg,
.user-menu-card .nav-link .svg-icon {
  color: #64748b;
  width: 1.15rem !important;
  height: 1.15rem !important;
  font-size: 1.15rem !important;
  transition: color 0.15s ease;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

.user-menu-card .nav-link > span:not(.user-nav-badge) {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
  transform: translateY(-1.5px);
}

.user-menu-card .nav-link:hover {
  background-color: #f0fdf4 !important;
  color: #0b7b3e !important;
}

.user-menu-card .nav-link:hover i,
.user-menu-card .nav-link:hover svg {
  color: #0b7b3e !important;
}

/* Refined human active link: soft brand tint with clean accent bar */
.user-menu-card .nav-link.active-user-link {
  background-color: #f0fdf4 !important;
  color: #0b7b3e !important;
  font-weight: 400 !important;
  border-left: 3px solid #0b7b3e !important;
}

/* User Panel Status Filter Tabs & Filter Pills (Matches Left-Side Menu Hover & Color) */
.user-filter-tabs .btn,
.bg-light.rounded-3 > .btn {
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  transform: none !important;
  box-shadow: none !important;
}

.user-filter-tabs .btn-light,
.user-filter-tabs .nav-link:not(.active),
.bg-light.rounded-3 > .btn.btn-light {
  background-color: transparent !important;
  color: #64748b !important;
  border: 1px solid transparent !important;
}

.user-filter-tabs .btn-light:hover,
.user-filter-tabs .btn-light:focus,
.user-filter-tabs .nav-link:not(.active):hover,
.user-filter-tabs .nav-link:not(.active):focus,
.bg-light.rounded-3 > .btn.btn-light:hover,
.bg-light.rounded-3 > .btn.btn-light:focus {
  background-color: #f0fdf4 !important;
  color: #0b7b3e !important;
  border-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

.user-filter-tabs .btn-success,
.user-filter-tabs .btn--base,
.user-filter-tabs .nav-link.active,
.bg-light.rounded-3 > .btn.btn-success,
.bg-light.rounded-3 > .btn.btn--base {
  background-color: #0b7b3e !important;
  border-color: #0b7b3e !important;
  color: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
}

.req, span.req,
.form-label .text-danger,
label .text-danger,
.user-form-label .text-danger,
.user-lang-section .text-danger,
.card h6 .text-danger,
h6 .text-danger {
  color: #ea5455 !important;
  font-weight: 600 !important;
  margin-left: 2px;
}

.user-menu-card .nav-link.active-user-link i,
.user-menu-card .nav-link.active-user-link svg {
  color: #0b7b3e !important;
}

.user-menu-card .user-nav-badge {
  margin-left: auto;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px;
  height: 20px;
  padding: 0 6px !important;
  border-radius: 10px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-align: center !important;
  background-color: #e2e8f0;
  color: #334155;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.user-menu-card .nav-link:hover .user-nav-badge,
.user-menu-card .nav-link:focus .user-nav-badge,
.user-menu-card .nav-link.active-user-link .user-nav-badge {
  background-color: var(--base-color, #0b7b3e) !important;
  color: #ffffff !important;
}

.user-menu-card .nav-divider {
  margin: 0.35rem 0;
  border-top: 1px solid #f1f5f9;
}

.user-menu-card .nav-group-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem 0.2rem;
}

.user-menu-card .nav-link-logout {
  color: #dc2626 !important;
}

.user-menu-card .nav-link-logout i,
.user-menu-card .nav-link-logout svg {
  color: #dc2626;
}

.user-menu-card .nav-link-logout:hover {
  background-color: #fef2f2 !important;
  color: #b91c1c !important;
}

.user-menu-card .nav-link-logout:hover i,
.user-menu-card .nav-link-logout:hover svg {
  color: #b91c1c;
}

/* ==========================================================================
   Customer / User Offcanvas Drawer (Mobile / Right Side)
   ========================================================================== */
.user-offcanvas-drawer,
.offcanvas {
  max-width: 320px;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
}

.offcanvas-body {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
}

body.offcanvas-open,
html.offcanvas-open {
  overflow: hidden !important;
  height: 100% !important;
}

.user-offcanvas-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #0b7b3e;
  border: 1px solid #a7f3d0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.user-offcanvas-body {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.user-offcanvas-menu-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

.user-offcanvas-logout-footer {
  flex-shrink: 0;
  margin-top: auto;
  background-color: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 0.85rem 1rem;
}

.user-offcanvas-logout-footer .btn {
  border-radius: var(--radius-sm, 6px);
  font-weight: 400;
  transition: all 0.2s ease;
}

.user-offcanvas-logout-footer .btn:hover {
  background-color: #dc3545;
  color: #ffffff;
}

/* User Form Controls & Inputs */
.user-form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.35rem;
  display: block;
  letter-spacing: 0.005em;
}

.user-form-label .req {
  color: #dc2626;
  margin-left: 2px;
}

.user-panel-main .form-control,
.user-panel-main .form-select {
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  font-size: 0.875rem !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  padding: 0.525rem 0.75rem !important;
  height: 44px !important;
  min-height: 44px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.user-panel-main .form-control:focus,
.user-panel-main .form-select:focus {
  border-color: #0b7b3e !important;
  box-shadow: none !important;
  outline: none !important;
}

.user-panel-main .form-control::placeholder {
  color: #94a3b8 !important;
}

.user-panel-main .input-group {
  display: flex !important;
  align-items: stretch !important;
  border-radius: 6px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.user-panel-main .input-group-text {
  border: 1px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #64748b !important;
  font-size: 0.875rem !important;
  height: 44px !important;
  min-height: 44px !important;
}

.user-panel-main .input-group > .input-group-text:first-child {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
  padding-left: 0.75rem !important;
  padding-right: 0.5rem !important;
}

.user-panel-main .input-group > .form-control:not(:first-child),
.user-panel-main .input-group > input.flatpickr-input {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  border-left: 0 !important;
  padding-left: 0.25rem !important;
}

.user-panel-main .input-group:focus-within {
  box-shadow: none !important;
  border-radius: 6px !important;
}

.user-panel-main .input-group:focus-within > .input-group-text {
  border-color: #0b7b3e !important;
  border-right: 0 !important;
}

.user-panel-main .input-group:focus-within > .form-control,
.user-panel-main .input-group:focus-within > input.flatpickr-input {
  border-color: #0b7b3e !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

/* User Form Buttons */
.user-btn-primary {
  background-color: #0b7b3e !important;
  border: 1px solid #0b7b3e !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 0 1.25rem !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
  text-decoration: none;
}

.user-btn-primary:hover {
  background-color: #085e2f !important;
  border-color: #085e2f !important;
  color: #ffffff !important;
}

.user-btn-secondary {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  padding: 0 1.15rem !important;
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
  text-decoration: none;
}

.user-btn-secondary:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #1e293b !important;
}

.user-btn-secondary.btn-sm {
  padding: 0.35rem 0.85rem !important;
  font-size: 0.8125rem !important;
  min-height: 32px;
}



/* Multilingual Form Section Cards */
.user-lang-section {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fbfcfe;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.user-lang-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.65rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #eef2f6;
}

.user-lang-chip {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  border-radius: 4px;
}

/* ==========================================================================
   TimoDesk Card Style (User Panel Top Cards)
   Directly ported from TimoDesk user panel storage page (timo-card)
   ========================================================================== */
.timo-card,
.user-metric-card {
  --tone: var(--base-color-rgb, 11, 123, 62);
  --accent: rgb(var(--tone));
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 16px 20px 16px 23px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) left / 3px 100% no-repeat, #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: all 0.2s ease;
}

.timo-card::before,
.user-metric-card::before {
  content: "";
  position: absolute;
  inset: 0 0 0 45%;
  z-index: -1;
  background-image: radial-gradient(rgba(var(--tone), 0.35) 1px, transparent 1.5px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000000 70%);
  mask-image: linear-gradient(to right, transparent, #000000 70%);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

a.timo-card:hover,
a.user-metric-card:hover {
  --accent: rgba(var(--tone), 0.5);
  color: inherit !important;
  text-decoration: none !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
  transform: none !important;
}

a.timo-card:hover::before,
a.user-metric-card:hover::before {
  opacity: 0.4;
}

/* Tone Modifiers */
.timo-card--base,
.user-metric-card--base       { --tone: 11, 123, 62; }
.timo-card--primary,
.user-metric-card--primary    { --tone: 37, 99, 235; }
.timo-card--success,
.user-metric-card--success    { --tone: 22, 163, 74; }
.timo-card--info,
.user-metric-card--info       { --tone: 2, 132, 199; }
.timo-card--warning,
.user-metric-card--warning    { --tone: 217, 119, 6; }
.timo-card--danger,
.user-metric-card--danger     { --tone: 220, 38, 38; }
.timo-card--secondary,
.user-metric-card--secondary  { --tone: 100, 116, 139; }
.timo-card.is-loading,
.user-metric-card.is-loading  { --tone: 203, 213, 225; }

.timo-card__label,
.user-metric-title {
  margin-bottom: 6px;
  padding-right: 48px;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #64748b;
}

.timo-card__value,
.user-metric-value {
  margin-bottom: 0;
  overflow: hidden;
  font-family: inherit;
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a;
}

.timo-card__icon,
.user-metric-icon {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 1;
  color: rgba(var(--tone), 0.22);
  pointer-events: none;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

a.timo-card:hover .timo-card__icon,
a.user-metric-card:hover .user-metric-icon {
  color: rgba(var(--tone), 0.42);
  transform: translateY(-50%) scale(1.08);
}

.timo-card__icon svg,
.timo-card__icon i,
.user-metric-icon svg,
.user-metric-icon i {
  width: 52px !important;
  height: 52px !important;
  font-size: 52px !important;
}

@media (max-width: 1599px) {
  .timo-card,
  .user-metric-card {
    padding: 14px 16px 14px 19px;
  }
  .timo-card__value,
  .user-metric-value {
    font-size: 1.5rem;
  }
  .timo-card__icon,
  .user-metric-icon {
    right: 14px;
  }
  .timo-card__icon svg,
  .timo-card__icon i,
  .user-metric-icon svg,
  .user-metric-icon i {
    width: 46px !important;
    height: 46px !important;
    font-size: 46px !important;
  }
}

@media (max-width: 575.98px) {
  .timo-card__value,
  .user-metric-value {
    font-size: 1.25rem;
  }
  .timo-card__icon,
  .user-metric-icon {
    right: 10px;
  }
  .timo-card__icon svg,
  .timo-card__icon i,
  .user-metric-icon svg,
  .user-metric-icon i {
    width: 38px !important;
    height: 38px !important;
    font-size: 38px !important;
  }
}


/* ==========================================================================
   User Order Table — High-Density Responsive Table List
   ========================================================================== */
.user-order-table .btn-copy-order {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.user-order-table .btn-copy-order:hover {
  opacity: 1;
  color: var(--base-color, #0b7b3e) !important;
}

/* ==========================================================================
   Universal Card Hover Stabilization & Base Color Border & Shadow
   Completely removes bottom-to-top (translateY) hover movement from all cards
/* ==========================================================================
   CARDS HOVER SYSTEM:
   1. Only cards that ARE links or clickable item cards get base-color border & soft shadow.
   2. Cards that DO NOT have any link (forms, info containers, static text containers)
      strictly do NOT have hover effects.
   ========================================================================== */
a.card:hover,
a.custom--card:hover,
.shop--card:hover,
.product--card:hover,
.product-card:hover,
.deal--product-card:hover,
.category--card:hover,
.service--card:hover,
.service-card:hover,
.community-service-card:hover,
.city-photo-card:hover,
.cat--browser-card:hover,
.cat--showcase-card:hover,
.cat--sub-card:hover,
.subcat--direct-card:hover,
.subcat--leaf-card:hover,
.service--detail-card:hover,
.service-card-hover:hover,
.blog--card:hover,
.job-highlight-card:hover,
.comm-spotlight-card:hover,
.hub-pillar-card:hover,
.vendor--item-card:hover {
  transform: none !important;
  border-color: var(--base-color) !important;
  box-shadow: 0 2px 8px rgba(var(--base-color-rgb, 11, 123, 62), 0.10) !important;
}

.brand--card,
.brand--card:hover {
  transform: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.brand--card-circle {
  border: 1px solid #eaedf1 !important;
  box-shadow: none !important;
}

.brand--card:hover .brand--card-circle {
  transform: none !important;
  border: 1px solid var(--base-color) !important;
  border-color: var(--base-color) !important;
  box-shadow: none !important;
}

.brand--card:hover .brand--card-logo {
  transform: scale(1.08) !important;
}

.brand--card:hover .brand--card-name {
  color: var(--base-color) !important;
}

/* Strictly remove hover effects from cards without any link, form containers, and static boxes */
.card:not(a):not(.contact--card):not(.contact--page-section *):not(.shop--card):not(.product--card):not(.product-card):not(.deal--product-card):not(.category--card):not(.brand--card):not(.service--card):not(.service-card):not(.community-service-card):not(.city-photo-card):not(.cat--browser-card):not(.cat--showcase-card):not(.cat--sub-card):not(.subcat--direct-card):not(.subcat--leaf-card):not(.service--detail-card):not(.service-card-hover):not(.blog--card):not(.job-highlight-card):not(.comm-spotlight-card):not(.hub-pillar-card):not(.vendor--item-card):hover,
.custom--card:not(a):not(.contact--card):not(.contact--page-section *):not(.shop--card):not(.product--card):not(.product-card):not(.deal--product-card):not(.category--card):not(.brand--card):not(.service--card):not(.service-card):not(.community-service-card):not(.city-photo-card):not(.cat--browser-card):not(.cat--showcase-card):not(.cat--sub-card):not(.subcat--direct-card):not(.subcat--leaf-card):not(.service--detail-card):not(.service-card-hover):not(.blog--card):not(.job-highlight-card):not(.comm-spotlight-card):not(.hub-pillar-card):not(.vendor--item-card):hover,
.custom--card:not(.contact--card):not(.contact--page-section *):has(form):hover,
.card:not(.contact--card):not(.contact--page-section *):has(form):hover,
form .card:hover,
form .custom--card:hover,
.vendor-card:hover,
.vendor-card .card:hover,
.card-form:not(.contact--card):not(.contact--page-section *):hover {
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}

.vendor-card .card,
.vendor-card .card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #dee2e6 !important;
  transition: none !important;
}

/* Contact page cards & contact info boxes - strictly borderless and shadowless in all states */
.contact--page-section .card,
.contact--page-section .custom--card,
.contact--card,
.contact--info-box {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.contact--page-section .card:hover,
.contact--page-section .custom--card:hover,
.contact--card:hover,
.contact--info-box:hover,
.policy--card:hover {
  transform: none !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  outline: none !important;
  transition: none !important;
}

.policy--card {
  transition: none !important;
}

.contact--info-box,
.contact--info-box:hover {
  background-color: #f8fafc !important;
  transition: none !important;
}

[data-theme="dark"] .contact--info-box,
[data-theme="dark"] .contact--info-box:hover {
  transform: none !important;
  border: none !important;
  box-shadow: none !important;
  background-color: #1e293b !important;
  transition: none !important;
}

/* Frontend Confirmation Modal Styles */
#frontendConfirmationModal .modal-content {
  background-color: var(--card-bg, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
}

.confirm-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid var(--border-color, #e2e8f0) !important;
  background-color: var(--card-bg, #ffffff) !important;
  color: var(--text-muted, #64748b) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  z-index: 10;
}

.confirm-modal-close:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  transform: scale(1.05);
}

[data-theme="dark"] #frontendConfirmationModal .modal-content {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .confirm-modal-close {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .confirm-modal-close:hover {
  background-color: #475569 !important;
  color: #ffffff !important;
}

[data-theme="dark"] #frontendConfirmationModal .modal-title {
  color: #f8fafc !important;
}

[data-theme="dark"] #frontendConfirmationModal .question {
  color: #cbd5e1 !important;
}

[data-theme="dark"] #frontendConfirmationModal .btn-light {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

[data-theme="dark"] #frontendConfirmationModal form {
  border-color: #334155 !important;
}















/* ==========================================================================
   Universal Button Hover Stabilization
   Completely removes translateY movement and bottom glow/shadow from all buttons
   ========================================================================== */
.btn:hover,
.btn:focus,
.btn:focus-visible,
.btn--base:hover,
.btn--base:focus,
.btn--base:focus-visible,
.btn--base-two:hover,
.btn--base-two:focus,
.btn--base-two:focus-visible,
.btn--outline-base:hover,
.btn--outline-base:focus,
.user-btn-primary:hover,
.user-btn-primary:focus,
.user-btn-secondary:hover,
.user-btn-secondary:focus,
.auth--submit-btn:hover,
.auth--submit-btn:focus,
.auth--social-btn:hover,
.auth--vendor-cta-btn:hover,
.footer--subscribe-btn:hover,
.footer--subscribe-box .footer--subscribe-btn:hover,
.popular--nav-btn:hover,
.subcat--promo-btn:hover,
.product--card-cart-btn:hover,
.product--card-cart-btn:focus,
.product--card-cart-btn:active,
.product--card-cart-btn.w-100:hover,
.product--card-cart-btn.w-100:focus,
.product--card-cart-btn.w-100:active,
.deal--cart-btn:hover,
.deal--cart-btn:focus,
.deal--cart-btn:active,
.pdp--card-cart-btn:hover,
.pdp--card-cart-btn:focus,
.pdp--card-cart-btn:active {
  transform: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Review Edit Star Rating Widget
   ========================================================================== */
.edit-star-btn {
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0 4px;
  line-height: 1;
  outline: none !important;
  box-shadow: none !important;
}
.edit-star-btn:focus,
.edit-star-btn:hover {
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ==========================================================================
   Form Controls & Select2 Active / Focused State (Base Brand Color)
   ========================================================================== */
.form-control:focus,
.form-control:active,
.form-select:focus,
.form-select:active,
.form--control:focus,
.form--control:active,
input[type="text"]:focus,
input[type="text"]:active,
input[type="email"]:focus,
input[type="email"]:active,
input[type="password"]:focus,
input[type="password"]:active,
input[type="number"]:focus,
input[type="number"]:active,
input[type="tel"]:focus,
input[type="tel"]:active,
input[type="url"]:focus,
input[type="url"]:active,
input[type="search"]:focus,
input[type="search"]:active,
input[type="date"]:focus,
input[type="date"]:active,
input[type="time"]:focus,
input[type="time"]:active,
textarea:focus,
textarea:active,
select:focus,
select:active {
  border-color: #0b7b3e !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Input Group Active State */
.input-group:focus-within {
  border-radius: 0.5rem;
}
.input-group:focus-within .input-group-text {
  border-color: #0b7b3e !important;
  color: #0b7b3e !important;
}
.input-group:focus-within .form-control,
.input-group:focus-within .form--control {
  border-color: #0b7b3e !important;
}

/* Form Check / Checkboxes / Radio */
.form-check-input:focus {
  border-color: #0b7b3e !important;
  box-shadow: none !important;
}
.form-check-input:checked {
  background-color: #0b7b3e !important;
  border-color: #0b7b3e !important;
}

/* Select2 Container Active / Focused */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
  border-color: #0b7b3e !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Select2 Dropdown Border & Shadow (no border radius) */
.select2-container--default .select2-dropdown,
.select2-dropdown {
  border-color: #0b7b3e !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden;
}

.select2-container--default .select2-results > .select2-results__options,
.select2-results__options,
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar,
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track,
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
  border-radius: 0 !important;
}

/* Select2 Search Input inside Dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-search--dropdown .select2-search__field:focus,
.select2-search__field:focus {
  border-color: #0b7b3e !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Select2 Dropdown Highlighted Option */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option[aria-selected] {
  background-color: #0b7b3e !important;
  color: #ffffff !important;
}

/* Select2 Dropdown Selected Option */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #f0fdf4 !important;
  color: #0b7b3e !important;
  font-weight: 600 !important;
}

/* Select2 Multiple Choice Tag Chips */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #0b7b3e !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #0b7b3e !important;
  margin-right: 6px !important;
  border-right: 1px solid #bbf7d0 !important;
  padding-right: 5px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #ea5455 !important;
  background: transparent !important;
}

/* User Product Reviews Styling */
.user-review-card {
  border: 1px solid #eef2f6;
  background-color: #ffffff;
  border-radius: 12px;
  transition: all 0.25s ease;
  position: relative;
}
.user-review-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.user-review-bubble {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid var(--base-color);
  border-radius: 8px;
}

/* ==========================================================================
   Bootstrap Tooltip Component (Aligned with Timodesk UI System)
   ========================================================================== */
.tooltip {
  --bs-tooltip-bg: var(--base-color);
  --bs-tooltip-color: #ffffff;
  --bs-tooltip-padding-x: 10px;
  --bs-tooltip-padding-y: 6px;
  --bs-tooltip-font-size: 0.75rem;
  --bs-tooltip-border-radius: 6px;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-max-width: 240px;
  --bs-tooltip-arrow-width: 10px;
  --bs-tooltip-arrow-height: 5px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  z-index: 1080;
}

.tooltip .tooltip-inner {
  font-size: 0.75rem;
  font-weight: 500;
  color: #ffffff;
  background-color: var(--base-color);
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 6px 16px rgba(0, 106, 78, 0.25), 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.14s ease;
}

/* Keep button tooltips inside the viewport on phones and tablets. */
.tooltip {
  max-width: min(280px, calc(100vw - 16px)) !important;
  pointer-events: none !important;
}

.tooltip .tooltip-inner {
  max-width: min(280px, calc(100vw - 32px)) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* A tooltip from a modal trigger must not float above modal content. */
body:has(.timo-confirm-modal.show) > .tooltip,
.timo-confirm-modal.show ~ .tooltip {
  display: none !important;
}

@media (max-width: 767.98px) {
  .tooltip {
    max-width: calc(100vw - 12px) !important;
  }

  .tooltip .tooltip-inner {
    max-width: calc(100vw - 24px) !important;
    padding: 5px 9px !important;
    font-size: 0.72rem !important;
  }

  .timo-confirm-modal__dialog {
    width: calc(100% - 24px);
    max-width: 420px;
    margin: 0.75rem auto;
  }

  .timo-confirm-modal__dialog .modal-content {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    padding: 28px 16px 16px;
  }

  .timo-confirm-modal__text {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Popper owns the transform on .tooltip, entrance moves the inner box instead */
.tooltip.fade {
  transition: opacity 0.14s ease;
}

.tooltip.fade:not(.show) .tooltip-inner {
  transform: scale(0.96);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: var(--base-color) !important;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: var(--base-color) !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: var(--base-color) !important;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: var(--base-color) !important;
}

/* ==========================================================================
   Timodesk Confirmation Modal Component (Enable / Disable / Delete / Cancel)
   ========================================================================== */
.timo-confirm-modal {
  z-index: 1065;
  --tone: var(--base-color);
  --tone-rgb: 0, 106, 78;
  --tone-hover: #00523d;
}

.timo-confirm-modal[data-tone="danger"],
.timo-confirm-modal.tone--danger {
  --tone: #dc2626;
  --tone-rgb: 220, 38, 38;
  --tone-hover: #b91c1c;
}

.timo-confirm-modal[data-tone="success"],
.timo-confirm-modal.tone--success {
  --tone: var(--base-color);
  --tone-rgb: 0, 106, 78;
  --tone-hover: #00523d;
}

.timo-confirm-modal[data-tone="warning"],
.timo-confirm-modal.tone--warning {
  --tone: #f59e0b;
  --tone-rgb: 245, 158, 11;
  --tone-hover: #d97706;
}

.timo-confirm-modal__dialog {
  max-width: 420px;
  margin: 1.75rem auto;
}

.timo-confirm-modal__dialog .modal-content {
  padding: 36px 24px 24px;
  text-align: center;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  background-color: #ffffff;
}

.timo-confirm-modal.show .modal-dialog {
  transform: scale(1) !important;
}

.timo-confirm-modal:not(.show) .modal-dialog {
  transform: scale(0.92) !important;
}

.timo-confirm-modal .modal-dialog {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.timo-confirm-modal__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 88px;
  margin: 0 0 20px;
}

.timo-confirm-modal.show .timo-confirm-modal__art {
  animation: timoConfirmPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes timoConfirmPop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.timo-confirm-modal__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  font-size: 2rem;
  color: #ffffff;
  background-color: var(--tone);
  border-radius: 50%;
  outline: 8px solid rgba(var(--tone-rgb), 0.12);
}

.timo-confirm-modal__icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 2;
}

.timo-confirm-modal__title {
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
}

.timo-confirm-modal__text {
  max-width: 320px;
  margin: 0 auto;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #6b7280;
}

.timo-confirm-modal__reason {
  margin-top: 18px;
  text-align: left;
}

.timo-confirm-modal__reason textarea {
  resize: none;
  border-radius: 8px;
}

.timo-confirm-modal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.timo-confirm-modal__actions.single-btn,
.timo-confirm-modal__actions--single {
  grid-template-columns: minmax(0, 1fr);
}

.timo-confirm-modal__actions .btn {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 8px;
  padding: 0 16px;
  transition: all 0.2s ease;
}

.timo-confirm-modal .timo-confirm-modal__submit {
  background-color: var(--tone) !important;
  border: 1px solid var(--tone) !important;
  color: #ffffff !important;
}

.timo-confirm-modal .timo-confirm-modal__submit:hover {
  background-color: var(--tone-hover) !important;
  border-color: var(--tone-hover) !important;
  color: #ffffff !important;
}

.timo-confirm-modal .timo-confirm-modal__cancel {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #374151;
}

.timo-confirm-modal .timo-confirm-modal__cancel:hover {
  background-color: #e5e7eb;
  border-color: #d1d5db;
  color: #111827;
}

/* ==========================================================================
   Language Switcher Select2 Component
   ========================================================================== */
.select2-lang-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.select2-lang-wrap .select2-container {
  width: auto !important;
  min-width: 105px;
}

.select2-lang-wrap .select2-container .select2-selection--single {
  height: 36px;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 50rem !important;
  padding: 0 28px 0 14px;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.select2-lang-wrap .select2-container--default.select2-container--open .select2-selection--single,
.select2-lang-wrap .select2-container--default.select2-container--focus .select2-selection--single,
.select2-lang-wrap .select2-container--default:hover .select2-selection--single {
  border-color: var(--base-color, #0b7b3e);
}

.select2-lang-wrap .select2-container--default.select2-container--open .select2-selection--single {
  box-shadow: none !important;
}

.select2-lang-wrap .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: normal;
  font-size: 0.835rem;
  font-weight: 500;
  color: #1e293b;
}

.select2-lang-wrap .select2-container .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 10px;
  top: 0;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select2-lang-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #64748b transparent transparent transparent;
  border-width: 5px 4px 0 4px;
  margin-top: -2px;
  margin-left: -4px;
}

.select2-lang-wrap .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--base-color, #0b7b3e) transparent;
  border-width: 0 4px 5px 4px;
}

/* Language Dropdown Menu */
.select2-dropdown.select2-lang-dropdown {
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
  margin-top: 4px;
  padding: 4px;
  min-width: 125px;
}

.select2-dropdown.select2-lang-dropdown .select2-results__option {
  padding: 8px 12px;
  font-size: 0.835rem;
  font-weight: 500;
  border-radius: 8px;
  margin-bottom: 2px;
  transition: all 0.15s ease;
}

.select2-dropdown.select2-lang-dropdown .select2-results__option:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   TIMODESK DASHBOARD UI: APP-HEADER & FILTER-BAR STYLES
   ========================================================================== */
:root {
  --header-h: 58px;
  --control-h: 38px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --border-color: #eaecf0;
  --input-border: #d0d5dd;
  --text-main: #101828;
  --text-muted: #667085;
}

/* 1. App Header (Top Fixed Bar) */
.vendor-fixed-header,
.app-header {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--vendor-sidebar-width, 260px);
  height: var(--header-h, 58px);
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-color, #eaecf0);
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-header__start,
.app-header__end {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-header__start {
  min-width: 0;
}

.app-header__end {
  flex-shrink: 0;
  gap: 10px;
}

.app-header__toggle,
.bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #ffffff;
  border: 1px solid var(--border-color, #eaecf0);
  border-radius: var(--radius, 8px);
  color: #344054;
  cursor: pointer;
  transition: all 0.15s ease;
}

.app-header__toggle:hover,
.bar-btn:hover {
  background: #f9fafb;
  border-color: #d0d5dd;
  color: #101828;
}

.app-header__divider {
  flex-shrink: 0;
  width: 1px;
  height: 24px;
  margin-inline: 4px;
  background-color: var(--border-color, #eaecf0);
}

.app-header__title,
.vendor-page-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-main, #101828);
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 0;
}

/* User Account Button */
.user-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 2px 12px 2px 4px;
  background: #ffffff;
  border: 1px solid var(--border-color, #eaecf0);
  border-radius: 50rem;
  color: #344054;
  cursor: pointer;
  transition: all 0.15s ease;
}

.user-btn:hover {
  background: #f9fafb;
  border-color: #d0d5dd;
}

.user-btn__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #344054;
  max-width: 140px;
}

.user-btn__caret {
  color: #98a2b3;
  font-size: 0.75rem;
}

/* Select2 Language Dropdown in App Header */
.select2-lang-wrap {
  min-width: 110px;
  display: inline-block;
}

.select2-lang-wrap .select2-container {
  width: 100% !important;
}

.select2-lang-wrap .select2-container--default .select2-selection--single {
  height: 44px;
  background-color: #ffffff;
  border: 1px solid var(--border-color, #eaecf0);
  border-radius: var(--radius, 8px);
  padding: 0 12px;
  position: relative;
  transition: all 0.15s ease;
}

.select2-lang-wrap .select2-container--default .select2-selection--single:hover {
  background-color: #f9fafb;
  border-color: #d0d5dd;
}

.select2-lang-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #344054 !important;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 36px !important;
  padding-left: 0 !important;
  padding-right: 20px !important;
  display: block !important;
}

.select2-lang-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  position: absolute;
  top: 0;
  right: 10px;
  width: 20px;
}

.select2-lang-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: #667085 transparent transparent transparent;
}

/* 2. Filter Bar (Timodesk style) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.filter-bar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.filter-bar__group--end {
  justify-content: flex-end;
  margin-left: auto;
}

/* Search input with icon */
.filter-search {
  max-width: 280px;
  min-width: 200px;
  height: var(--control-h, 38px);
  border: 1px solid var(--input-border, #d0d5dd);
  border-radius: var(--radius, 8px) !important;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-search:focus-within {
  border-color: var(--base-color, #0b7b3e);
  box-shadow: none !important;
}

.filter-search .form-control {
  border: none !important;
  box-shadow: none !important;
  padding: 6px 12px;
  font-size: 0.875rem;
  color: var(--text-main, #101828);
  background: transparent;
}

.filter-search .filter-search__btn,
.filter-search .input-group-text {
  border: none !important;
  background: transparent !important;
  color: #98a2b3;
  padding: 0 12px 0 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.filter-search .filter-search__btn:hover {
  color: var(--base-color, #0b7b3e);
}

/* Segmented Tabs (screen-filter-tab) */
.screen-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--control-h, 38px);
  padding: 3px;
  background-color: #f2f4f7;
  border: 1px solid #e4e7ec;
  border-radius: var(--radius, 8px);
}

.screen-filter-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding-inline: 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  color: #475467;
  border-radius: var(--radius-sm, 6px);
  text-decoration: none;
  transition: all 0.15s ease;
}

.screen-filter-tab-btn:hover {
  color: #101828;
}

.screen-filter-tab-btn.active {
  font-weight: 600;
  color: #101828;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Tab count pill */
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 10px;
  background-color: #eaecf0;
  color: #344054;
  transition: all 0.15s ease;
}

.screen-filter-tab-btn.active .tab-count {
  background-color: #f2f4f7;
  color: #101828;
}

/* Vendor status tabs use the marketplace base color for the active state. */
.vendor-main-wrapper .screen-filter-tab-btn.active {
  color: #fff !important;
  background-color: var(--base-color, #0b7b3e) !important;
  border-color: var(--base-color, #0b7b3e) !important;
  box-shadow: 0 1px 3px rgba(11, 123, 62, 0.24);
}

.vendor-main-wrapper .screen-filter-tab-btn.active:hover,
.vendor-main-wrapper .screen-filter-tab-btn.active:focus-visible {
  color: #fff !important;
  background-color: var(--base-color, #0b7b3e) !important;
}

.vendor-main-wrapper .screen-filter-tab-btn.active .tab-count {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}

.vendor-confirm-dialog {
  max-width: 500px;
}

.vendor-confirm-modal {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.18);
}

.vendor-confirm-modal__header {
  padding: 20px 22px 16px;
}

.vendor-confirm-modal__icon {
  width: 42px;
  height: 42px;
  color: #fff;
  background: var(--base-color, #0b7b3e);
  border-radius: 10px;
  font-size: 21px;
}

.vendor-confirm-modal__body {
  padding: 16px 22px 22px;
}

.vendor-confirm-modal__notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
}

.vendor-confirm-modal__notice svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

.vendor-confirm-modal__footer {
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 22px 20px;
  background: #f8fafc;
}

@media (max-width: 575px) {
  .vendor-confirm-dialog {
    margin: 12px;
  }

  .vendor-confirm-modal__footer .btn {
    flex: 1;
  }
}

.vendor-status-modal-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--base-color, #0b7b3e);
  border-radius: 8px;
  font-size: 20px;
}

/* Keep every Vendor confirmation flow aligned with the shared confirmation
   component: centered icon, message, and two clear actions. */
:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-content {
  max-width: 420px;
  margin-inline: auto;
  padding: 32px 24px 24px;
  text-align: center;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.2) !important;
}

:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-header {
  justify-content: center;
  padding: 0 0 8px !important;
  border: 0 !important;
}

:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-header > :is(.d-inline-flex, .vendor-confirm-modal__icon) {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  outline: 8px solid rgba(11, 123, 62, 0.12);
}

:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-header {
  padding-top: 82px !important;
}

:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-header .btn-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-body {
  padding: 8px 0 0 !important;
}

:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 20px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}

:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-footer .btn {
  min-height: 44px;
  border-radius: 8px !important;
  font-weight: 600;
}

/* Dark Mode Alignment for Vendor Confirmation & Action Modals */
body.dark-theme :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) .modal-content,
[data-theme="dark"] :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) .modal-content {
  background-color: #131d18 !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-theme :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) .modal-title,
[data-theme="dark"] :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) .modal-title,
body.dark-theme :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) .text-dark,
[data-theme="dark"] :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) .text-dark {
  color: #f8fafc !important;
}

body.dark-theme :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) :is(.text-secondary, .text-muted),
[data-theme="dark"] :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) :is(.text-secondary, .text-muted) {
  color: #94a3b8 !important;
}

body.dark-theme .vendor-confirm-modal__notice,
[data-theme="dark"] .vendor-confirm-modal__notice {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.28) !important;
  color: #86efac !important;
}

body.dark-theme :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) .btn-light,
[data-theme="dark"] :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) .btn-light {
  background-color: #1e2c24 !important;
  border-color: #2e4337 !important;
  color: #e2e8f0 !important;
}

body.dark-theme :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) .btn-close,
[data-theme="dark"] :is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal) .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* 3. Timodesk Button Styles */
.btn--md {
  height: var(--control-h, 38px);
  padding: 8px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius, 8px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--base-color, #0b7b3e);
  border: 1px solid var(--base-color, #0b7b3e);
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.btn--primary:hover {
  background-color: #096332;
  border-color: #096332;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.1);
}

.btn--primary:disabled,
.btn--primary.disabled,
.btn--base:disabled,
.btn--base.disabled,
.btn--submit-reg:disabled,
.btn--submit-reg.disabled {
  background-color: var(--base-color, #0b7b3e) !important;
  border-color: var(--base-color, #0b7b3e) !important;
  color: #ffffff !important;
  opacity: 0.82 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.btn--primary:disabled *,
.btn--primary.disabled *,
.btn--base:disabled *,
.btn--base.disabled * {
  color: #ffffff !important;
}

.btn--secondary {
  font-weight: 500;
  color: #344054 !important;
  background-color: #ffffff !important;
  border: 1px solid var(--input-border, #d0d5dd) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.btn--secondary:hover {
  background-color: #f9fafb !important;
  border-color: #c4c9d2 !important;
  color: #101828 !important;
}

/* 4. Table Card (Timodesk style) */
.table-card {
  background-color: #ffffff;
  border: 1px solid var(--border-color, #eaecf0);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
  overflow: hidden;
}

.table-card__scroll {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* ==========================================================================
   Universal No-Hover Rule for Empty Table Rows across all tables
   ========================================================================== */
table tbody tr.empty-table-row:hover,
table tbody tr.empty-table-row:hover > *,
table tbody tr:has(td[colspan]):hover,
table tbody tr:has(td[colspan]):hover > *,
.table-card .data-table tbody tr.empty-table-row:hover td,
.table-card .data-table tbody tr:has(td[colspan]):hover td,
.table-hover > tbody > tr.empty-table-row:hover > *,
.table-hover > tbody > tr:has(td[colspan]):hover > *,
.table-hover > tbody > tr:hover:has(td[colspan]) > *,
.user-order-table tbody tr:has(td[colspan]):hover td,
.user-wishlist-table tbody tr:has(td[colspan]):hover,
.user-wishlist-table tbody tr:has(td[colspan]):hover td,
.custom-table tbody tr:has(td[colspan]):hover td {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
}

/* ==========================================================================
   Vendor Dashboard Layout & Sidebar (Timodesk Architecture)
   ========================================================================== */
:root {
  --vendor-sidebar-width: 260px;
  --vendor-header-height: 58px;
  --vendor-primary: var(--base-color, #0b7b3e);
  --vendor-primary-light: rgba(11, 123, 62, 0.08);
  --vendor-bg: #f8fafc;
  --vendor-card-border: #eaecf0;
}

.vendor-app-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Fixed Left Sidebar */
.vendor-fixed-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--vendor-sidebar-width);
  background: #051426;
  border-right: 1px solid #0d2238;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
}

.vendor-sidebar-brand {
  height: var(--vendor-header-height);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #051426;
}

.vendor-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0.85rem 0.85rem 1.5rem 0.85rem;
}

.vendor-sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}
.vendor-sidebar-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.vendor-sidebar-footer {
  padding: 0.9rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #051426;
  margin-top: auto;
}

.vendor-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  height: 44px;
  min-height: 44px;
  padding: 0 1rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #ef4444 !important;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.vendor-logout-btn:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

.vendor-logout-btn:hover i,
.vendor-logout-btn:hover span {
  color: #ffffff !important;
}

.vendor-store-badge-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0.25rem 0.35rem 1rem 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vendor-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  color: #cbd5e1;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-bottom: 2px;
}

.vendor-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.vendor-nav-link.active {
  background: #0b7b3e;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(11, 123, 62, 0.35);
}

.vendor-subnav {
  border-left: 2px solid #16a34a;
  margin-left: 21px;
  padding-left: 14px;
  margin-top: 4px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vendor-subnav-link {
  color: #cbd5e1;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.vendor-subnav-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.vendor-subnav-link.active {
  color: #22c55e !important;
  font-weight: 600;
}

.vendor-dropdown-arrow {
  transition: transform 0.25s ease;
  display: inline-block;
}

.vendor-sidebar-dropdown.open .vendor-dropdown-arrow,
.vendor-dropdown-toggle.open .vendor-dropdown-arrow {
  transform: rotate(180deg);
}

/* Vendor Fixed Header Positioning */
.vendor-fixed-header {
  left: var(--vendor-sidebar-width) !important;
  width: calc(100% - var(--vendor-sidebar-width)) !important;
}

.vendor-main-wrapper {
  margin-left: var(--vendor-sidebar-width);
  padding-top: var(--vendor-header-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.vendor-page-content {
  flex: 1;
  padding: 1.5rem 1.75rem;
  width: 100%;
}

.vendor-footer {
  background: #ffffff;
  border-top: 1px solid var(--vendor-card-border);
  padding: 0.875rem 1.75rem;
  font-size: 0.825rem;
  color: #64748b;
}

.vendor-sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1040;
}

@media (max-width: 991.98px) {
  .vendor-fixed-sidebar {
    transform: translateX(-100%);
  }
  .vendor-fixed-sidebar.show {
    transform: translateX(0);
  }
  .vendor-fixed-header {
    left: 0 !important;
    width: 100% !important;
    padding: 0 1rem;
  }
  .vendor-main-wrapper {
    margin-left: 0 !important;
  }
  .vendor-page-content {
    padding: 1.25rem 1rem;
  }
  .vendor-sidebar-backdrop.show {
    display: block;
  }
}

.vendor-card {
  background: #ffffff;
  border: 1px solid var(--vendor-card-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}

/* ==========================================================================
   Theme Pill Toggle Switch Component (Universal for Vendor & Basic Templates)
   ========================================================================== */
.form-switch-box {
  display: flex;
  align-items: center;
}

.theme-pill-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  user-select: none;
}

.theme-pill-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.theme-pill-track {
  position: relative;
  width: 110px;
  height: 38px;
  background: #94a3b8;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 -1px 1px rgba(255, 255, 255, 0.2);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.theme-pill-input:checked + .theme-pill-track {
  background: #0b7b3e;
  background: linear-gradient(135deg, #0b7b3e 0%, #086131 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(11, 123, 62, 0.35);
}

.theme-pill-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 46px;
  height: 32px;
  background: #f8fafc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
  z-index: 2;
  pointer-events: none;
}

.theme-pill-input:checked + .theme-pill-track .theme-pill-knob {
  transform: translateX(58px);
  background: #ffffff;
}

.theme-pill-text {
  position: absolute;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.8px;
  line-height: 1;
  z-index: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  pointer-events: none;
}

.theme-pill-text.on-text {
  left: 16px;
  opacity: 0;
  transform: translateX(-4px);
}

.theme-pill-text.off-text {
  right: 18px;
  opacity: 1;
  transform: translateX(0);
}

.theme-pill-input:checked + .theme-pill-track .theme-pill-text.on-text {
  opacity: 1;
  transform: translateX(0);
}

.theme-pill-input:checked + .theme-pill-track .theme-pill-text.off-text {
  opacity: 0;
  transform: translateX(4px);
}

/* ==========================================================================
   Store Operating Schedule Controls (Day chips & Time inputs)
   ========================================================================== */
.schedule-day-chip {
  cursor: pointer;
  margin: 0;
  user-select: none;
}

.schedule-day-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.schedule-day-chip:hover .schedule-day-btn {
  background: #e2e8f0;
  color: #0f172a;
}

.schedule-day-check:checked + .schedule-day-btn {
  background: #0b7b3e;
  color: #ffffff;
  border-color: #0b7b3e;
  box-shadow: 0 2px 4px rgba(11, 123, 62, 0.25);
}

/* ==========================================================================
   Near Me Page (Current Location Wise Near Shop Section)
   ========================================================================== */
.nearme-location-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  box-shadow: none;
}

.nearme-location-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.nearme-location-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nearme-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.nearme-icon-wrap.is-active {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.08);
}

.nearme-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: #0f172a;
}

.nearme-subtitle {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 2px;
}

.nearme-label {
  color: #64748b;
  font-size: 0.8125rem;
}

.nearme-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.25);
}

.nearme-loc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 9999px;
  background: #ffffff;
  color: #0b7b3e;
  border: 1.5px solid #0b7b3e;
  transition: all 0.2s ease;
}

.nearme-loc-btn:hover {
  background: #0b7b3e;
  color: #ffffff;
  box-shadow: none;
}

.nearme-filter-bar {
  border-top: 1px solid #f1f5f9;
  margin-top: 1rem;
  padding-top: 1rem;
}

.nearme-input-group {
  height: 42px;
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
}

.nearme-input-group .input-group-text {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
  border-radius: 8px 0 0 8px;
  transition: border-color 0.2s ease;
}

.nearme-input-group .form-control {
  border-color: #e2e8f0;
  height: 42px;
  border-radius: 0 8px 8px 0;
  font-size: 0.875rem;
  transition: border-color 0.2s ease;
}

.nearme-input-group:focus-within {
  box-shadow: none !important;
  border-radius: 8px;
}

.nearme-input-group:focus-within .input-group-text,
.nearme-input-group:focus-within .form-control {
  border-color: #0b7b3e !important;
}

.nearme-input-group .form-control:focus {
  border-color: #0b7b3e !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.nearme-filter-bar .select2-container--default .select2-selection--single,
.nearme-filter-bar .select2-container .select2-selection--single {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.nearme-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px !important;
  padding-left: 0 !important;
  padding-right: 20px !important;
  color: #334155 !important;
  font-size: 0.875rem !important;
}

.nearme-filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 40px !important;
  right: 8px !important;
}

.nearme-filter-bar .select2-container--default.select2-container--focus .select2-selection--single,
.nearme-filter-bar .select2-container--default.select2-container--open .select2-selection--single {
  border-color: #0b7b3e !important;
  box-shadow: none !important;
}

.nearme-filter-bar .btn--base,
.nearme-filter-bar button[type="submit"] {
  height: 42px !important;
  border-radius: 8px !important;
}

.vendor--distance-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.25);
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   Services Hub: Top Category-Wise Section
   ========================================================================== */
.hub-top-categories-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.hub-cat-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f172a;
}

.hub-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.85rem 0.6rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1.5px solid transparent;
  text-decoration: none !important;
  transition: all 0.22s ease;
  height: 100%;
}

.hub-cat-card:hover {
  background: #ffffff;
  border-color: #0b7b3e;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(11, 123, 62, 0.08);
}

.hub-cat-card.active {
  background: #ffffff;
  border-color: #0b7b3e;
  box-shadow: 0 0 0 2px rgba(11, 123, 62, 0.2);
}

.hub-cat-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  transition: transform 0.2s ease;
}

.hub-cat-card:hover .hub-cat-icon-wrap {
  transform: scale(1.1);
}

.hub-cat-name {
  font-size: 0.825rem;
  font-weight: 600;
  color: #1e293b;
  max-width: 100%;
  line-height: 1.3;
  margin-bottom: 2px;
}

.hub-cat-card.active .hub-cat-name {
  color: #0b7b3e;
  font-weight: 600;
}

.hub-cat-count {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .nearme-location-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .nearme-action {
    width: 100%;
  }
  .nearme-loc-btn {
    width: 100%;
    justify-content: center;
  }
  .hub-top-categories-card,
  .nearme-location-card {
    padding: 1rem;
  }
}

/* Near Me Navigation Pills & Section Headers */
.nearme-nav-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nearme-nav-pills::-webkit-scrollbar {
  display: none;
}

.nearme-nav-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 4px !important;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
  text-decoration: none !important;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.nearme-nav-pill:hover {
  background: #ffffff;
  color: #0b7b3e;
  border-color: #0b7b3e;
  box-shadow: none;
}

.nearme-nav-pill.active {
  background: #0b7b3e;
  color: #ffffff;
  border-color: #0b7b3e;
  box-shadow: none;
}

.nearme-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px !important;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
}

.nearme-nav-pill.active .nearme-pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.nearme-section-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* ==========================================================================
   Header Tablet & Compact Desktop Fit (992px - 1199px, including 1024px)
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header .container,
  .header--top .container,
  .header--bottom .container {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .header--top .row {
    flex-wrap: nowrap !important;
  }

  .header--top .row > .col-auto:first-child {
    flex-shrink: 0 !important;
  }

  .header--brand {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .header--brand-logo {
    width: 140px !important;
    min-width: 130px !important;
    max-width: 145px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
    display: block !important;
  }

  .header--location-btn {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    padding: 0 0.5rem !important;
    max-width: 110px !important;
    font-size: 0.75rem !important;
    gap: 0.25rem !important;
    flex-shrink: 0 !important;
  }

  .header--location-btn .current-location-text {
    max-width: 60px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .header--top .row > .col {
    min-width: 130px !important;
    flex: 1 1 auto !important;
  }

  .header--search-form {
    min-width: 0 !important;
    width: 100% !important;
  }

  .header--search-group {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
  }

  .header--search-icon {
    font-size: 0.9rem !important;
    width: 0.9rem !important;
    height: 0.9rem !important;
    margin-left: 0.5rem !important;
    margin-right: 0.2rem !important;
  }

  .header--search-input {
    padding: 0 0.4rem !important;
    font-size: 0.78rem !important;
    min-width: 0 !important;
  }

  .header--search-input::placeholder {
    font-size: 0.75rem !important;
  }

  .header--search-btn {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    font-size: 0.85rem !important;
    border-radius: 0 6.5px 6.5px 0 !important;
  }

  .header--search-mic {
    padding: 0 0.25rem !important;
    font-size: 0.8rem !important;
  }

  .header--top .row > .col-auto:last-child {
    gap: 0.3rem !important;
    flex-shrink: 0 !important;
  }

  .header--lang-dropdown .dropdown-toggle,
  .header--lang-dropdown .btn,
  #langDropdown {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
    padding: 0 0.55rem !important;
    font-size: 0.75rem !important;
    gap: 0.25rem !important;
  }

  .header--action-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
  }

  .header--seller-btn {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 0.5rem !important;
    font-size: 0.75rem !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .header--seller-btn:not(:hover):not(:focus):not(:active):not(.show):not([aria-expanded="true"]) i,
  .header--seller-btn:not(:hover):not(:focus):not(:active):not(.show):not([aria-expanded="true"]) svg {
    font-size: 0.95rem !important;
    color: #0b7b3e !important;
    fill: currentColor !important;
  }

  .header--seller-btn:hover i,
  .header--seller-btn:hover svg,
  .header--seller-btn:focus i,
  .header--seller-btn:focus svg,
  .header--seller-btn:active i,
  .header--seller-btn:active svg,
  .header--seller-btn.show i,
  .header--seller-btn.show svg,
  .header--seller-btn[aria-expanded="true"] i,
  .header--seller-btn[aria-expanded="true"] svg,
  .header--vendor-dropdown.show .header--seller-btn i,
  .header--vendor-dropdown.show .header--seller-btn svg {
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  .header--user-btn {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 0.55rem !important;
    font-size: 0.75rem !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .header--user-btn i,
  .header--user-btn svg,
  .header--user-btn .svg-icon {
    font-size: 1.05rem !important;
    width: 1.05rem !important;
    height: 1.05rem !important;
  }
}

/* ==========================================================================
   Mobile Responsive Tables (Key-Value Card Layout)
   Transforms tables on mobile devices into clean key-value rows:
   Left: Column Label (data-label)
   Right: Cell Value
   ========================================================================== */
.table-card-value {
  display: block;
  text-align: inherit;
}

@media (max-width: 767.98px) {
  .user-order-table,
  .user-table-responsive table,
  .table-responsive > .table:not(.table-no-card),
  .custom--table {
    display: block !important;
    width: 100% !important;
    border: none !important;
    margin-bottom: 0 !important;
  }

  .user-order-table thead,
  .user-table-responsive table thead,
  .table-responsive > .table:not(.table-no-card) thead,
  .custom--table thead {
    display: none !important;
  }

  .user-order-table tbody,
  .user-table-responsive table tbody,
  .table-responsive > .table:not(.table-no-card) tbody,
  .custom--table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .user-order-table tbody tr,
  .user-table-responsive table tbody tr,
  .table-responsive > .table:not(.table-no-card) tbody tr,
  .custom--table tbody tr {
    display: block !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 0.85rem 1rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important;
  }

  .user-order-table tbody tr:hover,
  .user-table-responsive table tbody tr:hover,
  .table-responsive > .table:not(.table-no-card) tbody tr:hover,
  .custom--table tbody tr:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  }

  .user-order-table tbody td,
  .user-table-responsive table tbody td,
  .table-responsive > .table:not(.table-no-card) tbody td,
  .custom--table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.55rem 0 !important;
    border: none !important;
    border-bottom: 1px dashed #f1f5f9 !important;
    font-size: 0.875rem !important;
    text-align: right !important;
    gap: 0.75rem !important;
    min-height: 2.25rem !important;
  }

  .user-order-table tbody td:last-child,
  .user-table-responsive table tbody td:last-child,
  .table-responsive > .table:not(.table-no-card) tbody td:last-child,
  .custom--table tbody td:last-child {
    border-bottom: none !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.25rem !important;
  }

  /* Left-side Label / Column Name */
  .user-order-table tbody td::before,
  .user-table-responsive table tbody td::before,
  .table-responsive > .table:not(.table-no-card) tbody td::before,
  .custom--table tbody td::before {
    content: attr(data-label);
    font-weight: 600 !important;
    color: #64748b !important;
    font-size: 0.8125rem !important;
    text-align: left !important;
    flex-shrink: 0 !important;
    max-width: 45% !important;
    letter-spacing: 0.01em;
    line-height: 1.35;
  }

  /* Don't show data-label pseudo-element if empty */
  .user-order-table tbody td:not([data-label])::before,
  .user-order-table tbody td[data-label=""]::before,
  .table-responsive > .table tbody td:not([data-label])::before,
  .table-responsive > .table tbody td[data-label=""]::before,
  .custom--table tbody td:not([data-label])::before,
  .custom--table tbody td[data-label=""]::before {
    display: none !important;
  }

  /* Right-side Value Container */
  .table-card-value {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    flex-grow: 1 !important;
    min-width: 0 !important;
  }

  .table-card-value .d-flex {
    justify-content: flex-end !important;
  }

  /* When TD has colspan (like 'No data found' message) */
  .user-order-table tbody td[colspan],
  .table-responsive > .table tbody td[colspan],
  .custom--table tbody td[colspan] {
    display: block !important;
    text-align: center !important;
    border-bottom: none !important;
    padding: 1.5rem 0 !important;
  }
  .user-order-table tbody td[colspan]::before,
  .table-responsive > .table tbody td[colspan]::before,
  .custom--table tbody td[colspan]::before {
    display: none !important;
  }
  .user-order-table tbody td[colspan] .table-card-value,
  .table-responsive > .table tbody td[colspan] .table-card-value {
    align-items: center !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   Header & Mobile Search Input Focus Reset (Eliminate Inner Focus Box)
   ========================================================================== */
.mobile--search-bar input,
.mobile--search-bar input:focus,
.mobile--search-bar input:focus-visible,
.mobile--search-input,
.mobile--search-input:focus,
.mobile--search-input:focus-visible,
.header--search-group input,
.header--search-group input:focus,
.header--search-group input:focus-visible,
.header--search-input,
.header--search-input:focus,
.header--search-input:focus-visible {
  border: 0 none transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  outline: 0 none transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ==========================================================================
   Cart Page Sticky Summary Sidebar
   ========================================================================== */
.cart-summary-sticky {
  position: static;
}

@media (min-width: 992px) {
  .cart-summary-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 155px !important;
    z-index: 20;
  }
}

/* ==========================================================================
   Cart Page - Strictly Remove Card Hover Effects
   ========================================================================== */
.cart-shop-card,
.cart-shop-card:hover,
.cart--summary-card,
.cart--summary-card:hover,
.cart-summary-sticky .card,
.cart-summary-sticky .card:hover,
.custom--section .cart-shop-card:hover,
.custom--section .cart--summary-card:hover {
  transform: none !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
  border-color: #dee2e6 !important;
  transition: none !important;
}

/* ==========================================================================
   Utility: 4px Border Radius
   ========================================================================== */
.rounded-4px {
  border-radius: 4px !important;
}

/* ==========================================================================
   Checkout & Order CTA Button with Background Hover Effect
   ========================================================================== */
.btn-checkout-cta {
  background-color: #054e27 !important;
  border-color: #054e27 !important;
  color: #ffffff !important;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.btn-checkout-cta:hover,
.btn-checkout-cta:focus-visible {
  background-color: #0b7b3e !important;
  border-color: #0b7b3e !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(11, 123, 62, 0.3) !important;
}

.btn-checkout-cta:active {
  background-color: #04381c !important;
  border-color: #04381c !important;
}

/* ==========================================================================
   Universal Typographic Consistency (Section Headers, Page Titles, Cards & Prices)
   Guarantees unified sizing across all pages without awkward size disparities.
   ========================================================================== */

/* 1. Large Devices / Desktop (min-width: 992px) */
@media (min-width: 992px) {
  /* Page Titles & Hero Headers */
  .page--title,
  .page--header-banner .page--title,
  .services-hero-title {
    font-size: 1.5rem !important; /* 24px */
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  /* Detail Pages Main Titles & Main Price */
  .pdp--product-title,
  .service-details-title,
  .blog--details-title {
    font-size: 1.35rem !important; /* ~21.5px */
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  .pdp--price-large {
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  /* Section Header Titles (All Pages) */
  .section--title,
  .section-title-bar,
  .pdp--section-title,
  .pdp--other-shops-title,
  .hub-cat-section-title,
  .policy--section-title,
  .section--header h2,
  .section-header-bar h2,
  .section-header-bar h3,
  .section-header-bar h4 {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  .section--link,
  .section-link-bar,
  .pdp--section-link {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .section--link span,
  .section-link-bar span,
  .pdp--section-link span {
    white-space: nowrap !important;
  }

  .hub-pillar-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
  }

  /* All Card Titles & Names Across All Pages (Products, Shops, Categories, Services, Jobs, Events, Ads, Cart) */
  .product--card-title,
  .product--card-title a,
  .deal--product-title,
  .deal--product-title a,
  .pdp--card-title,
  .pdp--card-title a,
  .shop--card-name,
  .shop--card-name a,
  .vendor--name,
  .vendor--name a,
  .pdp--other-shop-name,
  .category--name,
  .category--name a,
  .comm-card-title,
  .comm-card-title a,
  .service--card-title,
  .service--card-title a,
  .service--card-title-en,
  .service--card-title-bn,
  .service-title-clamp,
  .service-title-clamp a,
  .service-card-hover h5 a,
  .job--card-title,
  .job--card-title a,
  .event--card-title,
  .event--card-title a,
  .ad--card-title,
  .ad--card-title a,
  .cart--item-title,
  .cart--item-name,
  .cart-product-title,
  .wishlist--product-name {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  /* All Amounts & Current Prices Across All Pages */
  .product--card-current-price,
  .pdp--card-price-current,
  .deal--card-price-current,
  .deal--product-card .product--card-current-price,
  .product--card .product--card-current-price,
  .product--card-price-row .product--card-current-price,
  .shop--card-price,
  .service--card-price,
  .job--card-salary,
  .event--card-price,
  .ad--card-price,
  .cart--item-price,
  .cart-product-price,
  .wishlist--product-price {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  /* Struck / Old Prices */
  .product--card-old-price,
  .pdp--card-price-old,
  .deal--product-card .product--card-old-price,
  .product--card .product--card-old-price,
  .product--card-price-row .product--card-old-price {
    font-size: 12px !important;
    font-weight: 400 !important;
  }
}

/* 2. Tablet & Below / Small Devices (max-width: 991.98px) */
@media (max-width: 991.98px) {
  /* Page Titles & Hero Headers */
  .page--title,
  .page--header-banner .page--title,
  .services-hero-title {
    font-size: 1.2rem !important; /* ~19px */
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  /* Detail Pages Main Titles & Main Price */
  .pdp--product-title,
  .service-details-title,
  .blog--details-title {
    font-size: 1.15rem !important; /* ~18px */
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  .pdp--price-large {
    font-size: 1.25rem !important; /* 20px */
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  /* Section Header Titles (All Pages) */
  .section--title,
  .section-title-bar,
  .pdp--section-title,
  .pdp--other-shops-title,
  .hub-cat-section-title,
  .policy--section-title,
  .section--header h2,
  .section-header-bar h2,
  .section-header-bar h3,
  .section-header-bar h4 {
    font-size: 1rem !important; /* 16px */
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  .section-title-bar::before {
    height: 0.95rem !important;
  }

  .section--link,
  .section-link-bar,
  .pdp--section-link {
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .section--link span,
  .section-link-bar span,
  .pdp--section-link span {
    white-space: nowrap !important;
  }

  .hub-pillar-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
  }

  /* All Card Titles & Names Across All Pages (Products, Shops, Categories, Services, Jobs, Events, Ads, Cart) */
  .product--card-title,
  .product--card-title a,
  .deal--product-title,
  .deal--product-title a,
  .pdp--card-title,
  .pdp--card-title a,
  .shop--card-name,
  .shop--card-name a,
  .vendor--name,
  .vendor--name a,
  .pdp--other-shop-name,
  .category--name,
  .category--name a,
  .comm-card-title,
  .comm-card-title a,
  .service--card-title,
  .service--card-title a,
  .service--card-title-en,
  .service--card-title-bn,
  .service-title-clamp,
  .service-title-clamp a,
  .service-card-hover h5 a,
  .job--card-title,
  .job--card-title a,
  .event--card-title,
  .event--card-title a,
  .ad--card-title,
  .ad--card-title a,
  .cart--item-title,
  .cart--item-name,
  .cart-product-title,
  .wishlist--product-name {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
  }

  /* All Amounts & Current Prices Across All Pages */
  .product--card-current-price,
  .pdp--card-price-current,
  .deal--card-price-current,
  .deal--product-card .product--card-current-price,
  .product--card .product--card-current-price,
  .product--card-price-row .product--card-current-price,
  .shop--card-price,
  .service--card-price,
  .job--card-salary,
  .event--card-price,
  .ad--card-price,
  .cart--item-price,
  .cart-product-price,
  .wishlist--product-price {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }

  /* Struck / Old Prices */
  .product--card-old-price,
  .pdp--card-price-old,
  .deal--product-card .product--card-old-price,
  .product--card .product--card-old-price,
  .product--card-price-row .product--card-old-price {
    font-size: 11px !important;
    font-weight: 400 !important;
  }
}


/* ==========================================================================
   Universal Font-Weight Cap: Maximum 600 (Strictly No 700 / 800 / 900 / Bold)
   Guarantees headings, <b>, <strong>, .fw-bold, .fw-bolder never exceed 600.
   ========================================================================== */
b, strong, .fw-bold, .fw-bolder, .font-bold, .font-extrabold, .font-black {
  font-weight: 600 !important;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
}

/* ==========================================================================
   Form Input Labels Standardization (Frontend, User, Vendor)
   Every form input label across text, email, password, number, search,
   select, textarea, checkbox/radio field labels strictly uses font-weight: 500.
   ========================================================================== */
label,
.form-label,
.form-check-label,
.user-form-label,
.auth--label,
.form--label,
.filter--label,
.custom-control-label {
  font-weight: 500;
}

label.fw-bold,
label.fw-semibold,
.form-label.fw-bold,
.form-label.fw-semibold {
  font-weight: 500 !important;
}


/* ==========================================================================
   Brand Loader (Issue 38)
   ========================================================================== */
.brand-loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  width: 100%;
}

.brand-loader {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-loader--sm {
  width: 36px;
  height: 36px;
}

.brand-loader--lg {
  width: 68px;
  height: 68px;
}

.brand-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(11, 123, 62, 0.15);
  border-top-color: var(--base-color, #0b7b3e);
  animation: brandSpin 0.85s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

.brand-loader-inner {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: rgba(11, 123, 62, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: brandSpinReverse 1.2s linear infinite;
}

.brand-loader-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  animation: brandPulse 1.8s ease-in-out infinite;
}

@keyframes brandSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes brandSpinReverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes brandPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

.brand-loader-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: #64748b;
  margin-top: 0.75rem;
  margin-bottom: 0;
  letter-spacing: 0.2px;
}

/* ==========================================================================
   Category List & Inner Item Border Radius (Issue 39)
   ========================================================================== */
.cat--showcase-card {
  border-radius: 8px !important;
}

.cat--showcase-footer {
  border-radius: 0 0 8px 8px !important;
}

.cat--sub-card {
  border-radius: 4px !important;
}

.cat--sub-thumb {
  border-radius: 4px !important;
}

/* ==========================================================================
   User Dashboard Stat Cards Responsive Grid (Issue 29)
   ========================================================================== */
@media (max-width: 425.98px) {
  .dashboard-stats-row .dashboard-stat-col {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 426px) and (max-width: 680px) {
  .dashboard-stats-row .dashboard-stat-col {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ==========================================================================
   Pagination Styling Across Frontend & Mobile (Issue 32)
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination .page-item .page-link {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  background-color: #f1f8f3;
  border-color: var(--base-color);
  color: var(--base-color);
}

.pagination .page-item.active .page-link {
  background-color: var(--base-color) !important;
  border-color: var(--base-color) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.pagination .page-item.disabled .page-link {
  background-color: #f8fafc;
  border-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.7;
}

.pagination-mobile-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.pagination-mobile-wrap .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pagination-mobile-wrap a.page-link:hover {
  border-color: var(--base-color);
  color: var(--base-color);
  background: #f1f8f3;
}

.pagination-mobile-wrap .page-link.disabled {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ==========================================================================
   Filter Header Vertical Alignment (Issue 36)
   ========================================================================== */
.filter--sidebar-header h5,
.filter--sidebar-header h5 span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
}

.filter--sidebar-header h5 svg,
.filter--sidebar-header h5 i {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   Sort Dropdown Menu on <= 768px (Issue 41)
   ========================================================================== */
@media (max-width: 768px) {
  .custom--sort-dropdown .dropdown-toggle {
    min-width: auto !important;
    width: auto !important;
    padding: 0.35rem 0.65rem !important;
  }
  .custom--sort-dropdown .dropdown-menu {
    min-width: fit-content !important;
    width: auto !important;
    max-width: calc(100vw - 2rem) !important;
  }
  .custom--sort-dropdown .dropdown-item {
    white-space: nowrap !important;
    padding: 0.4rem 0.75rem !important;
  }
}

/* ==========================================================================
   Global Input, Dropdown, Search & Button Focus Shadow & Glow Removal
   Applies across Frontend, Customer/User, and Vendor Panels
   Preserves borders, colors, border-radius, layout, and functionality
   ========================================================================== */
input:focus,
input:focus-visible,
input:focus-within,
textarea:focus,
textarea:focus-visible,
textarea:focus-within,
select:focus,
select:focus-visible,
select:focus-within,
button:focus,
button:focus-visible,
.btn:focus,
.btn:focus-visible,
.btn:active:focus,
.btn-check:focus + .btn,
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
.form-check-input:focus,
.form-check-input:focus-visible,
.form--control:focus,
.form--control:focus-visible,
.custom--input:focus,
.custom--input:focus-visible,
.auth--input:focus,
.auth--otp-input:focus,
.otp-box:focus,
.dropdown-toggle:focus,
.dropdown-toggle:focus-visible,
.dropdown-toggle[aria-expanded="true"],
.header--search-group:focus-within,
.mobile--search-bar:focus-within,
.map--search-input-group:focus-within,
.shops--search-input-wrap:focus-within,
.nearme-input-group:focus-within,
.input-group:focus-within,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ==========================================================================
   Universal 44px Standard Height Rule for Frontend, Customer & Vendor Panels
   Applies to all input fields, dropdowns, and buttons.
   Preserves borders, border-radius, padding, alignment, and responsiveness.
   ========================================================================== */
input[type="text"]:not(.product--card-qty-input):not(.quantity-input):not(.cart-qty-input):not(.form-control-sm):not(.form-control-xs),
input[type="email"]:not(.form-control-sm):not(.form-control-xs),
input[type="password"]:not(.form-control-sm):not(.form-control-xs),
input[type="number"]:not(.product--card-qty-input):not(.quantity-input):not(.cart-qty-input):not(.form-control-sm):not(.form-control-xs),
input[type="tel"]:not(.form-control-sm):not(.form-control-xs),
input[type="search"]:not(.form-control-sm):not(.form-control-xs),
input[type="url"]:not(.form-control-sm):not(.form-control-xs),
input[type="date"]:not(.form-control-sm):not(.form-control-xs),
input[type="datetime-local"]:not(.form-control-sm):not(.form-control-xs),
.form-control:not(textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not(.product--card-qty-input):not(.quantity-input):not(.cart-qty-input):not(.form-control-sm):not(.form-control-xs),
.form--control:not(textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not(.product--card-qty-input):not(.quantity-input):not(.cart-qty-input):not(.form-control-sm):not(.form-control-xs),
.custom--input:not(textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not(.product--card-qty-input):not(.quantity-input):not(.cart-qty-input):not(.form-control-sm),
.auth--input:not(textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
.form-select:not(.form-select-sm),
select.form-control:not(.form-control-sm),
select.custom--input,
select.form--control:not(.form-control-sm),
select:not(.form-select-sm):not(.form-control-sm),
.select2-container--default .select2-selection--single,
.select2-container .select2-selection--single,
.header--location-btn,
.header--lang-dropdown .btn,
#langDropdown,
#vendorLangDropdown,
.user-btn:not(.vendor-header-control),
.city--dropdown-toggle,
.filter-select-custom,
.dropdown-toggle:not(.btn-sm):not(.btn-xs):not(.nav-link):not(.page-link):not(.header--seller-btn):not(.header--user-btn):not(#vendorHeaderMenuBtn):not(#userMenuBtn):not(.mobile--lang-btn):not(#mobileLangDropdown):not(.header--lang-dropdown .btn):not(#langDropdown),
.btn:not(.btn-sm):not(.btn-xs):not(.btn-close):not(.page-link):not(.product--card-cart-btn:not(.w-100)):not(.carousel-control-prev):not(.carousel-control-next):not(.deal--cart-btn):not(.btn-clear):not(.floating--btn-whatsapp):not(.pwa--badge-close):not(.edit-star-btn):not(.search-clear-btn):not(.mobile--icon-btn):not(.mobile--menu-toggle):not(.mobile--lang-btn):not(#mobileLangDropdown):not(.header--seller-btn):not(#vendorHeaderMenuBtn):not(.header--user-btn):not(#userMenuBtn):not(.header--lang-dropdown .btn):not(#langDropdown):not(.header--search-btn):not(.navbar-toggler):not(.badge):not(.vendor-header-control),
button[type="submit"]:not(.btn-sm):not(.btn-xs):not(.btn-close):not(.page-link):not(.product--card-cart-btn:not(.w-100)):not(.carousel-control-prev):not(.carousel-control-next):not(.deal--cart-btn):not(.btn-clear):not(.floating--btn-whatsapp):not(.pwa--badge-close):not(.edit-star-btn):not(.search-clear-btn):not(.mobile--icon-btn):not(.mobile--menu-toggle):not(.mobile--lang-btn):not(#mobileLangDropdown):not(.header--search-btn):not(.navbar-toggler):not(.badge),
.custom--btn:not(.btn-sm),
.btn--base:not(.btn-sm),
.btn--primary:not(.btn-sm),
.btn--secondary:not(.btn-sm):not(.vendor-header-control),
.user-btn-primary:not(.btn-sm),
.user-btn-secondary:not(.btn-sm),
.vendor-logout-btn,
.header--user-btn,
.header--seller-btn,
.auth--submit-btn,
.auth--vendor-cta-btn,
.footer--subscribe-btn,
.input-group:not(.input-group-sm) > .form-control:not(textarea),
.input-group:not(.input-group-sm) > .form-select,
.input-group:not(.input-group-sm) > .input-group-text,
.input-group:not(.input-group-sm) > .btn:not(.btn-sm),
.user-panel-main .form-control:not(textarea),
.user-panel-main .form-select,
.user-panel-main .input-group-text {
  height: 44px !important;
  min-height: 44px !important;
}

#vendorNotificationDropdown:not(.vendor-header-control) {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

.app-header__toggle:not(.vendor-header-control),
.bar-btn:not(.vendor-header-control) {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Flex vertical center alignment for buttons */
.btn:not(.btn-sm):not(.btn-xs):not(.btn-close):not(.page-link):not(.product--card-cart-btn:not(.w-100)):not(.carousel-control-prev):not(.carousel-control-next):not(.deal--cart-btn):not(.btn-clear):not(.floating--btn-whatsapp):not(.pwa--badge-close):not(.edit-star-btn):not(.search-clear-btn):not(.mobile--icon-btn):not(.navbar-toggler) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ensure flex/center alignment for single select rendered text and input groups */
.select2-container--default .select2-selection--single {
  max-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  line-height: 42px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
}

/* Header Action Buttons & Dropdowns Font Weight 500 */
.header--location-btn,
.header--lang-dropdown .btn,
#langDropdown,
#vendorLangDropdown,
.header--seller-btn,
.header--user-btn,
.header--location-btn span,
.header--lang-dropdown .btn span,
.header--seller-btn span,
.header--user-btn span,
.header--user-btn .user-name-text {
  font-weight: 500 !important;
}

/* ==========================================================================
   Responsive Header Height: Standardize to 36px on Compact Screens (<= 1199.98px)
   Matches the search input (36px) and cart button (36px) for 1024px and less.
   ========================================================================== */
@media (max-width: 1199.98px) {
  .header--location-btn,
  .header--search-group,
  .header--search-btn,
  button.header--search-btn,
  .header--search-group button[type="submit"],
  .header--search-input,
  .header--lang-dropdown .btn,
  .header--lang-dropdown .dropdown-toggle,
  .header--lang-dropdown button,
  #langDropdown,
  button#langDropdown,
  #vendorLangDropdown,
  .header--action-btn,
  .header--seller-btn,
  .header--seller-btn.dropdown-toggle,
  button.header--seller-btn,
  #vendorHeaderMenuBtn,
  button#vendorHeaderMenuBtn,
  .header--user-btn,
  .header--user-btn.dropdown-toggle,
  button.header--user-btn,
  #userMenuBtn,
  button#userMenuBtn {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 34px !important;
  }

  .header--seller-btn,
  .header--seller-btn.dropdown-toggle,
  button.header--seller-btn,
  #vendorHeaderMenuBtn {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 0.75rem !important;
  }

  .header--action-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
  }

  .header--search-btn {
    width: 36px !important;
    min-width: 36px !important;
  }

  .header--location-btn i,
  .header--location-btn svg,
  .header--location-btn .svg-icon,
  .header--lang-dropdown .btn i,
  .header--lang-dropdown .btn svg,
  .header--seller-btn i,
  .header--seller-btn svg,
  .header--user-btn i,
  .header--user-btn svg,
  .header--user-btn .svg-icon {
    font-size: 1rem !important;
    width: 1rem !important;
    height: 1rem !important;
  }

  .header--seller-btn.show i,
  .header--seller-btn.show svg,
  .header--seller-btn:focus i,
  .header--seller-btn:focus svg,
  .header--seller-btn:active i,
  .header--seller-btn:active svg,
  .header--seller-btn[aria-expanded="true"] i,
  .header--seller-btn[aria-expanded="true"] svg,
  .header--vendor-dropdown.show .header--seller-btn i,
  .header--vendor-dropdown.show .header--seller-btn svg {
    color: #ffffff !important;
    fill: #ffffff !important;
  }
}

/* Mobile Header Elements Height: 34px (<= 991.98px) */
@media (max-width: 991.98px) {
  .mobile--lang-btn,
  .mobile--lang-btn.dropdown-toggle,
  #mobileLangDropdown,
  .mobile--icon-btn,
  .mobile--menu-toggle {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    line-height: 32px !important;
  }
}

/* ==========================================================================
   Service Cards Hover Effect (Matches Product Card Border & Image Zoom)
   ========================================================================== */
.service-card-hover {
  position: relative;
  background-color: var(--white);
  border: 1px solid var(--border-color, #e2e8f0) !important;
  border-radius: var(--radius-md, 16px);
  transition: border-color var(--transition-normal, 0.3s ease), 
              box-shadow var(--transition-normal, 0.3s ease), 
              transform var(--transition-normal, 0.3s ease) !important;
}

.service-card-hover:hover {
  border-color: rgba(var(--base-color-rgb, 11, 123, 62), 0.35) !important;
  box-shadow: var(--shadow-hover, 0 12px 28px rgba(11, 123, 62, 0.12)) !important;
}

.service-card-hover img {
  transition: transform var(--transition-normal, 0.35s ease) !important;
  will-change: transform;
}

.service-card-hover:hover img {
  transform: scale(1.06) !important;
}

.service-card-hover .service-title-clamp a {
  color: inherit;
  transition: color var(--transition-fast, 0.2s ease);
}

.service-card-hover .service-title-clamp a:hover {
  color: var(--base-color, #0b7b3e) !important;
}

/* Placeholder icons smooth zoom effect on hover */
.service-card-hover a > div svg,
.service-card-hover a > div .svg-icon,
.service-card-hover a > div i {
  transition: transform var(--transition-normal, 0.35s ease), 
              color var(--transition-normal, 0.35s ease), 
              opacity var(--transition-normal, 0.35s ease);
  will-change: transform;
}

.service-card-hover:hover a > div svg,
.service-card-hover:hover a > div .svg-icon,
.service-card-hover:hover a > div i {
  transform: scale(1.08);
  color: var(--base-color, #0b7b3e) !important;
  opacity: 0.75 !important;
}

/* ==========================================================================
   Sort Dropdown Height: 44px Everywhere (Products, Offers, Catalogs)
   ========================================================================== */
.custom--sort-dropdown .dropdown-toggle,
.custom--sort-dropdown > button,
#productSortDropdown,
#offersSortDropdown {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1rem !important;
  font-size: 0.875rem !important;
  line-height: 42px !important;
  box-sizing: border-box !important;
}

.filter--toggle-btn {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Form Submittable Left Search Icons (Always) & Offers Filter Responsive
   ========================================================================== */
.offers-search-submit-btn,
.hub-search-input-group button.input-group-text,
.nearme-input-group button.input-group-text {
  cursor: pointer !important;
  background-color: transparent !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  border-right: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}

.offers-search-submit-btn:hover,
.offers-search-submit-btn:focus,
.hub-search-input-group button.input-group-text:hover,
.hub-search-input-group button.input-group-text:focus,
.nearme-input-group button.input-group-text:hover,
.nearme-input-group button.input-group-text:focus {
  color: var(--base-color, #0b7b3e) !important;
}

.offers-search-group {
  height: 44px !important;
}

.offers-search-group .form-control,
.offers-search-group .input-group-text,
.offers-search-group .btn {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
}

/* On <= 425px (and all mobile devices <= 575.98px), remove the Offers Filter button */
@media (max-width: 575.98px), (max-width: 425px) {
  .offers-filter-submit-btn {
    display: none !important;
  }

  .offers-search-group .offers-search-input {
    border-top-right-radius: var(--radius-sm, 6px) !important;
    border-bottom-right-radius: var(--radius-sm, 6px) !important;
    border-right: 1.5px solid var(--border-color, #e2e8f0) !important;
  }

  .offers-search-group .offers-search-input:focus {
    border-right-color: var(--base-color, #0b7b3e) !important;
  }

  .offers-search-group:has(.offers-search-reset-btn) .offers-search-input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
  }

  .offers-search-group .offers-search-reset-btn {
    border-top-right-radius: var(--radius-sm, 6px) !important;
    border-bottom-right-radius: var(--radius-sm, 6px) !important;
    border-right: 1.5px solid var(--border-color, #e2e8f0) !important;
  }
}
/* ==========================================================================
   Typography Utility Classes (Small text helpers)
   ========================================================================== */
.fs-7 { font-size: 0.8125rem !important; }
.fs-8 { font-size: 0.75rem !important; }

/* Product Details Fixed UI Typography */
.pdp--product-subtitle {
  font-size: 0.875rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1.45;
  margin-top: 2px;
  margin-bottom: 0.65rem;
}

/* Service Details Fixed UI Typography */
.service-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0f172a;
}

.service-sidebar-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}

/* ==========================================================================
   Rich Text / Text Editor Content Formatting (Preserve Editor Styles)
   Applies to: Blog Details (.blog--content-body), Service Details (.service-desc-content),
   and Product Details (.pdp--desc-lead-text).
   Rules are non-destructive and do NOT use !important on typography, ensuring
   editor-authored inline styles, custom font sizes, headings, weights, colors,
   and alignments are 100% respected.
   ========================================================================== */
.blog--content-body,
.service-desc-content,
.pdp--desc-lead-text {
  font-size: 0.95rem;
  line-height: 1.75;
  color: #334155;
  word-break: break-word;
  overflow-wrap: break-word;
}

.blog--content-body p,
.service-desc-content p,
.pdp--desc-lead-text p {
  margin-bottom: 1rem;
}

.blog--content-body p:last-child,
.service-desc-content p:last-child,
.pdp--desc-lead-text p:last-child {
  margin-bottom: 0;
}

.blog--content-body h1, .service-desc-content h1, .pdp--desc-lead-text h1 { font-size: 1.65rem; font-weight: 600; margin-top: 1.4rem; margin-bottom: 0.7rem; color: #0f172a; }
.blog--content-body h2, .service-desc-content h2, .pdp--desc-lead-text h2 { font-size: 1.4rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.6rem; color: #0f172a; }
.blog--content-body h3, .service-desc-content h3, .pdp--desc-lead-text h3 { font-size: 1.2rem; font-weight: 600; margin-top: 1.15rem; margin-bottom: 0.5rem; color: #0f172a; }
.blog--content-body h4, .service-desc-content h4, .pdp--desc-lead-text h4 { font-size: 1.05rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.45rem; color: #0f172a; }
.blog--content-body h5, .service-desc-content h5, .pdp--desc-lead-text h5 { font-size: 0.95rem; font-weight: 600; margin-top: 0.85rem; margin-bottom: 0.35rem; color: #0f172a; }
.blog--content-body h6, .service-desc-content h6, .pdp--desc-lead-text h6 { font-size: 0.875rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.25rem; color: #0f172a; }

.blog--content-body ul, .service-desc-content ul, .pdp--desc-lead-text ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  list-style-type: disc;
}

.blog--content-body ol, .service-desc-content ol, .pdp--desc-lead-text ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
  list-style-type: decimal;
}

.blog--content-body li, .service-desc-content li, .pdp--desc-lead-text li {
  margin-bottom: 0.35rem;
}

.blog--content-body img, .service-desc-content img, .pdp--desc-lead-text img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.blog--content-body table, .service-desc-content table, .pdp--desc-lead-text table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.blog--content-body table td, .blog--content-body table th,
.service-desc-content table td, .service-desc-content table th,
.pdp--desc-lead-text table td, .pdp--desc-lead-text table th {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e2e8f0;
}

.blog--content-body blockquote, .service-desc-content blockquote, .pdp--desc-lead-text blockquote {
  padding: 0.75rem 1.25rem;
  margin: 1rem 0;
  border-left: 4px solid var(--base-color, #0b7b3e);
  background: #f8fafc;
  border-radius: 0 8px 8px 0;
  color: #475569;
}

/* ==========================================================================
   DROPDOWN ARROW STATE TOGGLING (Frontend, Customer Panel, Vendor Panel)
   When closed: arrow points down. When open: arrow points up (rotated 180deg).
   ========================================================================== */

/* 1. Universal CSS Carets (Dropdown Toggle ::after) */
.dropdown-toggle::after {
  display: inline-block !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.dropdown-toggle.show::after,
.dropdown-toggle[aria-expanded="true"]::after,
.dropdown-toggle.dropdown-is-open::after,
.dropdown.show > .dropdown-toggle::after,
.dropdown.show > button.dropdown-toggle::after,
.dropdown.show > a.dropdown-toggle::after {
  transform: rotate(180deg) !important;
}

/* 2. Header Category Dropdown Button (chevron-down SVG / icon) */
.cat--toggle-chevron,
.header--category-btn > svg:last-child,
.header--category-btn > i:last-child,
.header--category-btn .bi-chevron-down,
.header--category-btn .svg-icon:last-child {
  display: inline-block !important;
  transform-origin: center center !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.header--category-btn.show .cat--toggle-chevron,
.header--category-btn[aria-expanded="true"] .cat--toggle-chevron,
.header--category-btn.dropdown-is-open .cat--toggle-chevron,
.dropdown.show > .header--category-btn .cat--toggle-chevron,
.header--category-btn.show > svg:last-child,
.header--category-btn[aria-expanded="true"] > svg:last-child,
.header--category-btn.dropdown-is-open > svg:last-child,
.header--category-btn.show > i:last-child,
.header--category-btn[aria-expanded="true"] > i:last-child,
.header--category-btn.dropdown-is-open > i:last-child,
.header--category-btn.show .bi-chevron-down,
.header--category-btn[aria-expanded="true"] .bi-chevron-down,
.header--category-btn.dropdown-is-open .bi-chevron-down,
.dropdown.show > .header--category-btn > svg:last-child,
.dropdown.show > .header--category-btn > i:last-child {
  transform: rotate(180deg) !important;
}

/* 3. Vendor Header User Dropdown Button */
.user-btn__caret {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-btn.show .user-btn__caret,
.user-btn[aria-expanded="true"] .user-btn__caret,
.user-btn.dropdown-is-open .user-btn__caret,
.dropdown.show > .user-btn .user-btn__caret {
  transform: rotate(180deg) !important;
}

/* 4. City Dropdown & Modal Dropdowns */
.city--dropdown-chevron {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.city--custom-dropdown.show .city--dropdown-chevron,
.city--dropdown-toggle.show .city--dropdown-chevron,
.city--dropdown-toggle[aria-expanded="true"] .city--dropdown-chevron,
.city--dropdown-toggle.dropdown-is-open .city--dropdown-chevron {
  transform: rotate(180deg) !important;
}

/* 5. Mobile Category Accordion / Dropdown Toggle */
.mobile-cat--toggle svg,
.mobile-cat--toggle i {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-cat--toggle[aria-expanded="true"] svg,
.mobile-cat--toggle:not(.collapsed) svg,
.mobile-cat--toggle[aria-expanded="true"] i,
.mobile-cat--toggle:not(.collapsed) i {
  transform: rotate(180deg) !important;
}

/* 6. Universal Chevron Icon Rotation for any Dropdown Toggle */
[data-bs-toggle="dropdown"] .bi-chevron-down,
[data-bs-toggle="dropdown"] .chevron-down,
[data-bs-toggle="dropdown"] .dropdown-arrow,
[data-bs-toggle="dropdown"] > svg:last-child:not(:first-child),
[data-bs-toggle="dropdown"] > i:last-child:not(:first-child) {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-bs-toggle="dropdown"].show .bi-chevron-down,
[data-bs-toggle="dropdown"][aria-expanded="true"] .bi-chevron-down,
[data-bs-toggle="dropdown"].dropdown-is-open .bi-chevron-down,
[data-bs-toggle="dropdown"].show .chevron-down,
[data-bs-toggle="dropdown"][aria-expanded="true"] .chevron-down,
[data-bs-toggle="dropdown"].dropdown-is-open .chevron-down,
[data-bs-toggle="dropdown"].show .dropdown-arrow,
[data-bs-toggle="dropdown"][aria-expanded="true"] .dropdown-arrow,
[data-bs-toggle="dropdown"].dropdown-is-open .dropdown-arrow,
[data-bs-toggle="dropdown"].show > svg:last-child:not(:first-child),
[data-bs-toggle="dropdown"][aria-expanded="true"] > svg:last-child:not(:first-child),
[data-bs-toggle="dropdown"].dropdown-is-open > svg:last-child:not(:first-child),
[data-bs-toggle="dropdown"].show > i:last-child:not(:first-child),
[data-bs-toggle="dropdown"][aria-expanded="true"] > i:last-child:not(:first-child),
[data-bs-toggle="dropdown"].dropdown-is-open > i:last-child:not(:first-child),
.dropdown.show > [data-bs-toggle="dropdown"] > svg:last-child:not(:first-child),
.dropdown.show > [data-bs-toggle="dropdown"] > i:last-child:not(:first-child) {
  transform: rotate(180deg) !important;
}

/* ==========================================================================
   MENU ITEMS HOVER ANIMATION (Frontend, Customer Panel, Vendor Panel)
   Left-to-right animated bottom border on hover; static on active; no hover on active
   ========================================================================== */
.header--nav-link,
.user-navbar .nav-link {
  position: relative;
  text-decoration: none;
  transition: color var(--transition-fast, 0.2s ease);
}

.header--nav-link::after,
.user-navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 2.5px;
  background-color: var(--base-color, #0b7b3e);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.user-navbar .nav-link::after {
  bottom: -2px;
  height: 2px;
}

/* Inactive menu items: animate bottom border from left to right on hover */
.header--nav-link:hover:not(.active)::after,
.user-navbar .nav-link:hover:not(.active)::after {
  transform: scaleX(1);
}

/* Active menu items: keep existing bottom border, disable hover animation */
.header--nav-link.active::after,
.user-navbar .nav-link.active::after {
  transform: scaleX(1) !important;
  transition: none !important;
}

.cart-drawer-qty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  border: 1px solid #ced4da !important;
  background-color: #f8f9fa !important;
  color: #495057 !important;
  transition: all 0.15s ease-in-out !important;
}

.cart-drawer-qty-btn:hover {
  background-color: var(--base-color, #059669) !important;
  border-color: var(--base-color, #059669) !important;
  color: #ffffff !important;
}

.cart-drawer-item-qty {
  font-size: 0.8rem !important;
  min-width: 20px !important;
  text-align: center !important;
  font-weight: 600 !important;
  color: #212529 !important;
}


/* Product details: purchase controls precede all secondary information. */
.pdp-detail-breadcrumb {
  border: 0 !important;
  box-shadow: none;
  margin-bottom: 0.75rem;
}

.pdp-detail-layout .pdp--variation-selects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 440px;
}

.pdp-detail-layout .pdp--attribute-select {
  min-height: 44px;
  border-radius: 4px;
  font-size: 0.875rem;
}

.pdp-detail-layout .pdp--variation-field {
  min-width: 0;
  position: relative;
}

.pdp-detail-layout .pdp--variation-field .select2-container .select2-selection--single {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
}

.pdp-detail-layout .pdp--variation-field .select2-selection__rendered {
  padding-left: 12px;
  padding-right: 28px;
  font-size: 0.875rem;
}

.pdp-detail-layout .pdp--variation-field .select2-selection__arrow {
  top: 0 !important;
  right: 8px !important;
  height: 100% !important;
  transform: none !important;
}

.pdp-detail-layout .pdp--variation-field .select2-selection__arrow b {
  top: 50% !important;
  margin-top: -2px;
}

.pdp-detail-layout .pdp--variation-field .select2-results__option[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.pdp-detail-layout .pdp--color-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}

.pdp-detail-layout .pdp--color-swatch {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid #cbd5e1;
  border-radius: 50%;
}

.pdp-detail-layout {
  padding-top: 0;
}

.pdp-detail-layout > .container {
  max-width: 1440px;
}

.pdp-detail-layout .pdp--hero-main-row {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.3fr) 280px;
  gap: 36px 32px;
  margin: 0;
}

.pdp-detail-layout .pdp--content-col {
  display: contents;
}

.pdp-detail-layout .pdp--primary-block {
  display: contents;
}

.pdp-detail-layout .pdp--gallery-col {
  grid-column: 1;
  grid-row: 1;
}

.pdp-detail-layout .pdp--info-col {
  grid-column: 2;
  grid-row: 1;
}

.pdp-detail-layout .pdp--sidebar-col {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.pdp-detail-layout :is(.pdp--gallery-col, .pdp--info-col, .pdp--sidebar-col) {
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
}

.pdp-detail-layout .pdp--gallery-layout {
  height: auto;
  max-height: none;
  flex-direction: column-reverse;
  gap: 16px;
}

.pdp-detail-layout .pdp--main-image-card {
  height: 400px;
  flex: none;
  min-height: 0;
  border-radius: 2px;
  padding: 24px;
  box-shadow: none;
}

.pdp-detail-layout .pdp--main-img {
  object-fit: contain;
}

.pdp-detail-layout .pdp--thumb-item {
  padding: 0;
  background: #fff;
  width: 68px;
  height: 68px;
  border-radius: 3px;
}

.pdp-detail-layout .pdp--vertical-thumbs {
  width: 100%;
  height: auto;
  flex-direction: row;
  justify-content: flex-start;
  gap: 8px;
  overflow: hidden;
}

.pdp-detail-layout .pdp--thumbs-scroll-container {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 0;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  padding: 2px;
  cursor: grab;
  user-select: none;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}

.pdp-detail-layout .pdp--thumb-nav {
  display: flex;
  width: 28px;
  height: 44px;
  flex: 0 0 28px;
  align-self: center;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: var(--base-color);
}

.pdp-detail-layout .pdp--thumb-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.pdp-detail-layout .pdp--thumbs-scroll-container.is-dragging,
.pdp-detail-layout .pdp--thumbs-scroll-container.is-dragging .pdp--thumb-item {
  cursor: grabbing;
}

.pdp-detail-layout .pdp--thumb-item img {
  pointer-events: none;
}

.pdp-detail-layout .pdp--thumb-item:focus-visible {
  outline: 2px solid var(--base-color);
  outline-offset: 2px;
}

.pdp-detail-layout .pdp--product-title {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  line-height: 1.4;
  margin-bottom: 8px;
}

.pdp-detail-layout .pdp--price-container {
  margin: 8px 0 22px;
}

.pdp-detail-layout .pdp--price-large {
  font-size: 1.25rem;
  color: #111827;
}

.pdp-detail-layout .pdp--product-subtitle {
  margin-bottom: 22px;
  font-size: 0.875rem;
  line-height: 1.75;
}

.pdp-detail-layout .pdp--summary-meta {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #475569;
}

.pdp-detail-layout .pdp--summary-meta a {
  color: inherit;
}

.pdp-detail-layout .pdp--availability {
  margin-bottom: 20px;
  font-size: 0.8125rem;
}

.pdp-detail-layout .pdp--variations-wrapper {
  padding-bottom: 20px;
  margin-bottom: 0 !important;
}

.pdp-detail-layout .pdp--variation-chip {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 6px;
}

.pdp-detail-layout .pdp--purchase-panel {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 44px;
  gap: 16px 10px;
  padding: 8px 0 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.pdp-detail-layout .pdp--purchase-panel .pdp--pickup-method-box {
  grid-column: 1 / -1;
  grid-row: auto;
  margin: 0;
}

.pdp-detail-layout .pdp--pickup-method-box {
  order: 4;
  padding: 0;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #64748b;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.pdp-detail-layout .pdp--pickup-main-title {
  font-size: 0.75rem;
  font-weight: 400;
  color: #64748b;
}

.pdp-detail-layout .pdp--pickup-sub-desc a {
  color: #1e293b;
  font-size: 0.875rem;
  font-weight: 500;
}

.pdp-detail-layout .pdp--qty-total-row {
  display: contents;
}

.pdp-detail-layout .pdp--qty-total-row > div:first-child {
  grid-column: 1;
  grid-row: 1;
}

.pdp-detail-layout .pdp--qty-lbl {
  display: none;
}

.pdp-detail-layout #pdpTotalGroup {
  grid-column: 1 / -1;
  grid-row: auto;
  order: 3;
  text-align: left;
}

.pdp-detail-layout :is(.pdp--qty-step-btn, .pdp--qty-step-input) {
  height: 44px;
  min-height: 44px;
  width: 0;
  min-width: 0;
  flex: 1 1 0;
}

.pdp-detail-layout .pdp--qty-stepper {
  height: 44px;
  width: 100%;
}

.pdp-detail-layout .pdp--qty-step-input {
  appearance: textfield;
  -moz-appearance: textfield;
}

.pdp-detail-layout .pdp--qty-step-input::-webkit-inner-spin-button,
.pdp-detail-layout .pdp--qty-step-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdp-detail-layout .pdp--btn-primary-cart {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 44px !important;
  min-height: 44px !important;
  min-width: 0;
  padding: 0 12px;
  gap: 8px;
  white-space: nowrap;
  max-width: none;
  margin: 0;
  border-radius: 6px;
}

.pdp-detail-layout .pdp--btn-primary-cart > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-detail-layout .pdp--btn-secondary-wishlist {
  grid-column: 3;
  grid-row: 1;
  justify-self: stretch;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border-radius: 6px;
}

.pdp-detail-layout .pdp--btn-secondary-wishlist span {
  display: none;
}

.pdp-detail-layout .pdp--btn-secondary-wishlist svg {
  margin: 0 !important;
}

.pdp-detail-layout button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pdp-detail-layout .pdp--btn-primary-cart[aria-busy="true"]::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

.pdp-detail-layout .pdp--btn-primary-cart[aria-busy="true"] > * {
  visibility: hidden;
}

.pdp-detail-layout .pdp--tabs-card {
  grid-column: 1 / span 2;
  grid-row: 2;
  min-width: 0;
  margin: 0 !important;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.pdp-detail-layout .pdp--tabs-header {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  margin-bottom: 24px;
}

.pdp-detail-layout .pdp--tabs-header .nav-tabs {
  gap: 8px;
  padding: 12px;
  border: 0;
}

.pdp-detail-layout .pdp--tabs-header .nav-link {
  padding: 8px 14px;
  background: #f4f4f3;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 4px;
  font-weight: 400;
}

.pdp-detail-layout .pdp--tabs-header .nav-link.active {
  color: var(--base-color);
  border-bottom-color: var(--base-color);
}

.pdp-detail-layout .pdp--tab-content-area {
  padding: 0;
}

.pdp-detail-layout .pdp--sidebar-col:not(:has(.pdp--other-shops-card, .pdp--similar-products)) {
  display: none;
}

.pdp-detail-layout .pdp--sidebar-sticky-wrap {
  position: static;
  padding-top: 28px;
}

.pdp-detail-layout .pdp--other-shops-card {
  margin: 0;
  border-radius: 8px;
  box-shadow: none;
}

.pdp-detail-layout .pdp--other-shops-title {
  font-size: 1rem;
  line-height: 1.5;
}

.pdp-detail-layout .pdp--similar-products h2 {
  margin: 0 0 16px;
  font-size: 1.125rem;
  line-height: 1.5;
}

.pdp-detail-layout .pdp--shop-offers-list > h2 {
  margin: 0 0 12px;
  font-size: 1rem !important;
  line-height: 1.35;
}

@media (max-width: 991px) {
  .pdp-detail-layout .pdp--sidebar-sticky-wrap {
    padding-top: 0;
  }
}

.pdp-detail-layout .pdp--similar-list {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.pdp-detail-layout .pdp--similar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  color: #1e293b;
  text-decoration: none;
}

.pdp-detail-layout .pdp--similar-item > img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  flex-shrink: 0;
}

.pdp-detail-layout .pdp--similar-info {
  min-width: 0;
}

.pdp-detail-layout .pdp--similar-info h3 {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}

.pdp-detail-layout .pdp--similar-price {
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--base-color);
}

.pdp-detail-layout .pdp--similar-price del {
  margin-left: 4px;
  font-size: 0.75rem;
  font-weight: 400;
  color: #94a3b8;
}

.pdp-detail-layout .pdp--info-spec-list {
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 991.98px) {
  .mobile--header .container,
  .pdp--breadcrumb-wrap .container,
  .pdp-detail-layout > .container {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .pdp-detail-layout .pdp--hero-main-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pdp-detail-layout .pdp--primary-block {
    gap: 24px;
  }
  .pdp-detail-layout .pdp--gallery-layout {
    height: auto;
  }
  .pdp-detail-layout .pdp--tabs-card {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .pdp-detail-layout .pdp--sidebar-col {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .pdp-detail-layout .pdp--similar-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .pdp-detail-layout .pdp--hero-main-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .pdp-detail-layout .pdp--info-col {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
  }
  .pdp-detail-layout .pdp--tabs-card {
    grid-column: 1;
    grid-row: 3;
  }
  .pdp-detail-layout .pdp--sidebar-col {
    grid-row: 4;
  }
  .pdp-detail-layout .pdp--similar-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdp-detail-layout .pdp--product-title { order: 0; }
  .pdp-detail-layout .pdp--meta-rating-row { order: 1; }
  .pdp-detail-layout .pdp--price-container { order: 2; }
  .pdp-detail-layout .pdp--availability { order: 3; }
  .pdp-detail-layout .pdp--variations-wrapper { order: 4; }
  .pdp-detail-layout .pdp--purchase-panel { order: 5; }
  .pdp-detail-layout .pdp--product-subtitle { order: 6; margin-top: 20px; }
  .pdp-detail-layout .pdp--summary-meta { order: 7; }
  .pdp-detail-layout .pdp--primary-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .pdp-detail-layout .pdp--gallery-layout {
    height: auto;
    flex-direction: column-reverse;
    gap: 10px;
  }
  .pdp-detail-layout .pdp--main-image-card {
    height: clamp(240px, 70vw, 360px);
    flex: auto;
    padding: 16px;
  }
  .pdp-detail-layout .pdp--vertical-thumbs {
    justify-content: flex-start;
  }
  .pdp-detail-layout .pdp--thumbs-scroll-container {
    justify-content: flex-start;
    overflow-x: auto;
  }
  .pdp-detail-layout .pdp--purchase-panel {
    padding: 16px 0 0;
  }
  .pdp-detail-layout .pdp--tabs-header .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .pdp-detail-layout .pdp--tabs-header .nav-link {
    white-space: nowrap;
    padding: 12px;
  }
  .pdp-detail-layout .pdp--tab-content-area {
    padding: 16px;
  }
}

/* Panel badges display their translated text/count without decorative icons. */
:is(.user-panel-main, .vendor-app-wrapper) :is(.badge, .order-status-badge) {
  gap: 0 !important;
  padding: 3px 8px !important;
  min-height: 24px;
  height: auto !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  border-radius: 4px !important;
  white-space: nowrap;
}

:is(.user-panel-main, .vendor-app-wrapper) :is(.order-status-badge, .user-verified-badge, .user-nav-badge) :is(svg, i, .svg-icon) {
  display: none !important;
}

.product-create-section-icon {
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-create-section-icon i,
.product-create-section-icon svg {
  width: 21px !important;
  height: 21px !important;
  font-size: 21px !important;
  display: inline-flex !important;
  stroke-width: 2.4 !important;
}

/* Common rectangular status filters across user and vendor pages. */
:is(.user-panel-main, .vendor-main-wrapper) :is(.user-filter-tabs, .screen-filter-tab) {
  border-radius: 0 !important;
}

:is(.user-panel-main, .vendor-main-wrapper) :is(.user-filter-tabs .btn, .user-filter-tabs .nav-link, .screen-filter-tab-btn) {
  border-radius: 4px !important;
  overflow: hidden;
}

:is(.user-panel-main, .vendor-main-wrapper) :is(.user-filter-tabs .btn:not(.btn--base):not(.btn-success):not(.active), .user-filter-tabs .nav-link:not(.active), .screen-filter-tab-btn:not(.active)) {
  background-color: #fff !important;
  border: 1px solid #e2e5e9 !important;
  color: #475569 !important;
  box-shadow: none !important;
}

:is(.user-panel-main, .vendor-main-wrapper) :is(.user-filter-tabs .btn:not(.btn--base):not(.btn-success):not(.active), .user-filter-tabs .nav-link:not(.active), .screen-filter-tab-btn:not(.active)):is(:hover, :focus-visible) {
  background-color: #f0fdf4 !important;
  border-color: #cbded2 !important;
  color: var(--base-color, #0b7b3e) !important;
}

/* User and vendor list tables: headings sit above an edge-to-edge table card. */
:is(.user-panel-main, .vendor-main-wrapper) .panel-table-heading {
  background: transparent;
  border: 0;
  padding: 0;
}

:is(.user-panel-main, .vendor-main-wrapper) .panel-table-frame {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #dfe4ea !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  background: #fff;
}

:is(.user-panel-main, .vendor-main-wrapper) :is(.card, .table-card):has(> .panel-table-frame),
:is(.user-panel-main, .vendor-main-wrapper) .card:has(> :is(.card-body, .user-card-body) > .panel-table-frame) {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  background: transparent !important;
}

:is(.user-panel-main, .vendor-main-wrapper) :is(.card-body, .user-card-body):has(> .panel-table-frame) {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

:is(.user-panel-main, .vendor-main-wrapper) table {
  width: 100%;
  margin: 0 !important;
  border: 1px solid #dfe4ea !important;
  border-radius: 6px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  color: #475569;
}

:is(.user-panel-main, .vendor-main-wrapper) .panel-table-frame > table {
  border: 0 !important;
}

:is(.user-panel-main, .vendor-main-wrapper) table > thead {
  text-transform: none !important;
}

:is(.user-panel-main, .vendor-main-wrapper) table > thead > tr > th {
  padding: 12px 18px !important;
  background: #e8edf3 !important;
  color: #334155 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  border: 0 !important;
  border-bottom: 1px solid #dfe4ea !important;
  border-radius: 0 !important;
  white-space: nowrap;
}

@media (min-width: 768px) {
  :is(.user-panel-main, .vendor-main-wrapper) table > tbody > tr > td {
    padding: 10px 18px !important;
    background: #fff;
    vertical-align: middle;
    border: 0 !important;
    border-bottom: 1px solid #e6e9ee !important;
  }
}

@media (min-width: 768px) {
  :is(.user-panel-main, .vendor-main-wrapper) table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
  }
}

/* Mobile card tables use each record's border, without an extra outer frame. */
@media (max-width: 767.98px) {
  /* Job cards: keep the banner above the job title on narrow screens. */
  .user-job-list-table > tbody > tr > td:first-child > .d-flex {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }

  .user-job-list-table > tbody > tr > td:first-child > .d-flex > img,
  .user-job-list-table > tbody > tr > td:first-child > .d-flex > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    height: 132px !important;
    border-radius: 8px !important;
  }

  .user-job-list-table > tbody > tr > td:first-child > .d-flex > div:last-child {
    width: 100%;
  }

  /* Keep the responsive job card continuous without an extra card background. */
  .user-job-list-table,
  .user-job-list-table > tbody,
  .user-job-list-table > tbody > tr,
  .user-job-list-table > tbody > tr > td {
    width: 100% !important;
    max-width: 100% !important;
    background-color: transparent !important;
  }

  .user-job-list-table > tbody > tr {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
  }

  .user-job-list-table > tbody > tr > td {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .user-job-list-table > tbody > tr > td:first-child {
    padding-top: 12px !important;
  }

  .user-job-list-table > tbody > tr > td:last-child {
    padding-bottom: 12px !important;
  }

  .user-entry-list-table > tbody > tr > td:first-child > .d-flex {
    align-items: stretch !important;
  }

  .user-entry-list-table > tbody > tr > td:first-child > .d-flex > img,
  .user-entry-list-table > tbody > tr > td:first-child > .d-flex > div:first-child {
    width: 100% !important;
    height: 132px !important;
    min-width: 0 !important;
    border-radius: 8px !important;
  }

  :is(.user-panel-main, .vendor-main-wrapper) .panel-table-frame:has(> .table:not(.table-no-card)) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    overflow-x: hidden;
  }

  :is(.user-panel-main, .vendor-main-wrapper) .panel-table-frame > .table:not(.table-no-card) {
    max-width: 100%;
    min-width: 0;
  }

  :is(.user-panel-main, .vendor-main-wrapper) .panel-table-frame > .table:not(.table-no-card) > tbody {
    gap: 12px !important;
  }

  :is(.user-panel-main, .vendor-main-wrapper) .panel-table-frame > .table:not(.table-no-card) > tbody > tr {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }

  :is(.user-panel-main, .vendor-main-wrapper) .panel-table-frame > .table:not(.table-no-card) > tbody > tr > td {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  :is(.user-panel-main, .vendor-main-wrapper) .panel-table-frame .table-card-value {
    max-width: 65%;
  }
}

:is(.user-panel-main, .vendor-main-wrapper) table > tbody > tr:not(:has(td[colspan])):hover > td {
  --bs-table-accent-bg: #f8fafc;
  --bs-table-bg-state: #f8fafc;
  --bs-table-hover-bg: #f8fafc;
  background-color: #f8fafc !important;
  box-shadow: none !important;
}

:is(.user-panel-main, .vendor-main-wrapper) table .panel-icon-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 4px !important;
  font-size: 0 !important;
}

:is(.user-panel-main, .vendor-main-wrapper) table .panel-icon-action :is(svg, i) {
  width: 16px;
  height: 16px;
  margin: 0 !important;
  font-size: 16px !important;
}

/* Compact, search-first delivery location experience. */
.location--modal .modal-dialog {
  width: min(100% - 1rem, 620px);
  max-width: 620px;
  margin: .5rem auto;
}
.location--modal .modal-content {
  max-height: calc(100dvh - 1rem);
  overflow: hidden;
  border-radius: 10px;
}
.location--modal .modal-header { padding: 12px 16px; }
.location--modal .modal-body { overflow-y: auto; }
.location--modal .map--search-bar-container { padding: 10px 16px 12px; }
.location--modal .map--search-input-group { gap: 8px; }
.location--modal .map--search-input { min-width: 0; height: 42px; }
.location--modal .map--search-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.location--modal .map--go-btn { height: 36px; min-width: 58px; }
.location--modal .map--map-toggle-btn {
  height: 36px; min-width: 104px; padding: 0 10px; flex: 0 0 104px; border: 1px solid var(--base-color);
  border-radius: 6px; background: var(--base-color-light); color: var(--base-color);
  font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
}
.location--modal .map--map-toggle-btn:hover { color: #fff; background: var(--base-color); }
.location--modal .map--controls-bar { display: none; position: relative; padding: 8px 16px; }
.location--modal .modal-content.location-map-active .map--controls-bar { display: block; }
.location--modal .map--canvas-area { display: none; height: min(42vh, 300px); min-height: 210px; }
.location--modal .modal-content.location-map-active .map--canvas-area { display: block; }
.location--modal .map--close-view-btn {
  position: absolute; top: 10px; right: 10px; z-index: 20;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 6px 10px; border: 1px solid #cbd5e1;
  border-radius: 6px; background: rgba(255,255,255,.95); color: #334155;
  box-shadow: 0 2px 8px rgba(15,23,42,.16); font-size: .75rem; font-weight: 600;
}
.location--modal .map--close-view-btn:hover:not(:disabled) {
  border-color: var(--base-color); color: var(--base-color); background: #fff;
}
.location--modal .map--close-view-btn:disabled { opacity: .55; cursor: not-allowed; }
.location--modal .map--helper-hint-bar { display: none; padding: 7px 12px; font-size: .72rem; }
.location--modal .modal-content.location-map-active .map--helper-hint-bar { display: flex; }
.location--modal .map--address-card { padding: 10px 16px; }
.location--modal .map--address-title { font-size: .85rem; }
.location--modal .map--address-desc { font-size: .72rem; }
.location--modal .map--location-empty-state {
  padding: 18px 16px;
  color: #64748b;
  font-size: .82rem;
  text-align: center;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.location--modal .modal-footer { padding: 10px 16px !important; gap: 8px; }
.location--modal .modal-footer .btn { min-height: 38px; padding: 7px 12px; font-size: .78rem; }
.location--modal .modal-content:not(.location-map-active) #centerFranceBtn { display: none !important; }
.location--modal .modal-content:not(.location-map-active) .modal-footer { justify-content: flex-end !important; }

@media (max-width: 575.98px) {
  .location--modal .modal-dialog { width: calc(100% - .5rem); margin: .25rem auto; }
  .location--modal .modal-content { max-height: calc(100dvh - .5rem); border-radius: 8px; }
  .location--modal .modal-header { padding: 10px 12px; }
  .location--modal .map--search-bar-container { padding: 8px 10px 10px; }
  .location--modal .map--search-input-group { flex-wrap: nowrap; gap: 6px; }
  .location--modal .map--search-input { flex: 1 1 auto; min-width: 0; width: auto; }
  .location--modal .map--search-actions { width: auto; flex: 0 0 auto; }
  .location--modal .map--map-toggle-btn { flex: 0 0 auto; min-width: 104px; justify-content: center; white-space: nowrap; }
  .location--modal .map--go-btn { flex: 0 0 58px; }
  .location--modal .map--canvas-area { height: min(42vh, 260px); min-height: 190px; }
  .location--modal .map--close-view-btn { top: 8px; right: 8px; }
  .location--modal .map--address-card { padding: 8px 10px; }
  .location--modal .modal-footer { padding: 8px 10px !important; }
  .location--modal .modal-footer { flex-wrap: wrap; }
  .location--modal .modal-footer .btn { flex: 1 1 45%; justify-content: center; }
}

/* PDP-matched add-to-cart variation modal. Keep this scoped to quick view. */
.qv-custom-modal .qv-modal-dialog { max-width: 920px; }
.qv-custom-modal .qv-modal-dialog {
  width: calc(100% - 2rem);
  min-height: calc(100% - 2rem);
  margin: 1rem auto;
  display: flex;
  align-items: center;
}
.qv-custom-modal .qv-modal-content { width: 100%; }
.qv-custom-modal .qv-modal-content {
  background: #f8faf9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}
.qv-custom-modal .qv-modal-header { padding: 12px; }
.qv-custom-modal .qv-close-btn {
  position: relative;
  z-index: 5;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  opacity: 1;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  line-height: 1 !important;
}
.qv-custom-modal .qv-close-btn::before {
  content: '\00d7';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  color: #334155;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  margin: 0;
}
.qv-custom-modal .qv-close-btn:hover { color: var(--base-color); background: transparent !important; }
.qv-custom-modal .qv-mini-fav-btn { display: none !important; }
.qv-custom-modal .qv-variants-container > .form-label { display: none !important; }
.qv-custom-modal .qv-modal-body { padding: 32px 28px 28px; }
.qv-custom-modal .qv-main-row { --bs-gutter-x: 32px; align-items: start !important; }
.qv-custom-modal .qv-image-shell {
  min-height: 400px;
  border: 1px solid #dbe3ea;
  border-radius: 2px;
  background: #fff;
  box-shadow: none;
}
.qv-custom-modal .qv-img {
  width: 100%;
  height: 400px;
  padding: 24px;
  object-fit: contain;
  filter: none;
}
.qv-custom-modal .qv-detail-panel { padding: 2px 0 0; }
.qv-custom-modal .qv-title {
  max-width: calc(100% - 42px);
  margin: 0 0 8px !important;
  color: #0f172a;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 600 !important;
}
.qv-custom-modal .qv-weight { margin-bottom: 10px !important; }
.qv-custom-modal .qv-price { font-size: 1.8rem !important; color: #0b7b3e; }
.qv-custom-modal .qv-variants-container {
  margin-top: 28px;
  padding-top: 0;
}
.qv-custom-modal .qv-variants-container .form-label {
  margin-bottom: 10px !important;
  color: #334155 !important;
}
.qv-custom-modal #qvVariantChips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.qv-custom-modal .qv-variant-btn {
  min-height: 46px;
  padding: .65rem .8rem;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  background: #fff;
  font-size: .83rem;
  font-weight: 500;
}
.qv-custom-modal .qv-variant-btn:hover,
.qv-custom-modal .qv-variant-btn.active {
  border-color: #0b7b3e !important;
  background: #eef8f2;
  box-shadow: inset 0 0 0 1px #0b7b3e;
}
.qv-custom-modal .qv-quantity-row { margin: 22px 0 16px; }
.qv-custom-modal .qv-qty-stepper {
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
}
.qv-custom-modal .qv-cta-row { flex-wrap: nowrap !important; margin-top: 0; }
.qv-custom-modal .qv-qty-stepper {
  flex: 0 0 120px;
  min-width: 120px;
  height: 44px;
  border-radius: 4px;
}
.qv-custom-modal .qv-primary-btn {
  min-height: 48px;
  flex: 1 1 auto;
  border-radius: 4px;
}
.qv-custom-modal .qv-secondary-btn {
  min-width: 150px;
  width: auto;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 4px;
}
.qv-custom-modal .qv-wishlist-action {
  flex: 0 0 44px;
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qv-custom-modal .qv-wishlist-action svg,
.qv-custom-modal .qv-wishlist-action i { width: 16px; height: 16px; font-size: 16px; }
.qv-custom-modal .qv-wishlist-action:hover {
  border-color: var(--base-color) !important;
  background: var(--base-color-light) !important;
  color: var(--base-color) !important;
}

/* Dookan-style cart confirmation panel. */
.cart-added-notification {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1095;
  width: min(380px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .2);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(24px, -8px, 0);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.cart-added-notification.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
}
.cart-added-notification__header,
.cart-added-notification__item { display: flex; align-items: flex-start; }
.cart-added-notification__header { justify-content: space-between; margin-bottom: 16px; }
.cart-added-notification__status { color: #475569; font-size: .84rem; font-weight: 600; }
.cart-added-notification__status svg { width: 14px; height: 14px; color: var(--base-color); margin-right: 5px; vertical-align: -2px; }
.cart-added-notification__close {
  border: 0; background: transparent; color: #64748b; padding: 0 2px;
  font-size: 25px; line-height: .7; cursor: pointer;
}
.cart-added-notification__close:hover { color: var(--base-color); }
.cart-added-notification__image-wrap {
  width: 88px; height: 88px; flex: 0 0 88px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: #fff;
}
.cart-added-notification__image-wrap img { width: 100%; height: 100%; object-fit: contain; }
.cart-added-notification__details { min-width: 0; padding: 2px 0 0 14px; }
.cart-added-notification__details strong { display: block; color: #475569; font-size: .92rem; line-height: 1.35; }
.cart-added-notification__details small { display: block; color: #64748b; font-size: .75rem; margin-top: 4px; }
.cart-added-notification__details span { display: block; color: #e53935; font-size: .9rem; font-weight: 700; margin-top: 7px; }
.cart-added-notification__cart-btn,
.cart-added-notification__checkout-btn {
  display: block; width: 100%; text-align: center; text-decoration: none; font-weight: 600; font-size: .88rem;
}
.cart-added-notification__cart-btn { margin-top: 18px; padding: 11px 14px; border-radius: 22px; color: #fff; background: var(--base-color); }
.cart-added-notification__cart-btn svg { width: 16px; height: 16px; margin-right: 5px; vertical-align: -3px; }
.cart-added-notification__cart-btn:hover { color: #fff; background: var(--base-color-hover); }
.cart-added-notification__checkout-btn { margin-top: 12px; color: var(--base-color); }
.cart-added-notification__checkout-btn:hover { color: var(--base-color-hover); }

.qv-custom-modal .qv-attribute-field .select2-selection--single:hover,
.qv-custom-modal .qv-attribute-field .select2-container--open .select2-selection--single,
.qv-custom-modal .qv-attribute-field .select2-container--focus .select2-selection--single {
  border-color: var(--base-color) !important;
}
.qv-custom-modal .qv-attribute-field .select2-selection--single:hover .select2-selection__rendered,
.qv-custom-modal .qv-attribute-field .select2-selection--single:hover .select2-selection__arrow b {
  color: var(--base-color);
}
.qv-custom-modal .select2-results__option--highlighted[aria-selected] {
  background-color: var(--base-color) !important;
  color: #fff !important;
}
.qv-custom-modal .qv-qty-stepper {
  width: 120px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 120px;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.qv-custom-modal .qv-qty-stepper :is(.qty-minus-btn, .qty-plus-btn) {
  width: 40px !important;
  height: 100% !important;
  min-width: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  color: #334155 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qv-custom-modal .qv-qty-stepper :is(.qty-minus-btn, .qty-plus-btn):hover {
  background: #e2e8f0 !important;
}
.qv-custom-modal .qv-qty-stepper .qty-input {
  width: 40px !important;
  height: 100% !important;
  min-width: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #0f172a !important;
  text-align: center;
  font-size: .875rem;
  font-weight: 600;
  outline: 0;
}
@media (max-width: 767px) {
  .qv-custom-modal .qv-modal-dialog {
    width: calc(100% - 1rem);
    min-height: calc(100% - 1rem);
    margin: .5rem auto;
    max-width: calc(100% - 1rem);
  }
  .qv-custom-modal .qv-modal-content,
  .qv-custom-modal .qv-modal-body,
  .qv-custom-modal .qv-detail-panel { min-width: 0; max-width: 100%; overflow-x: hidden; }
  .qv-custom-modal .qv-modal-body { padding: 42px 16px 18px; }
  .qv-custom-modal .qv-image-shell, .qv-custom-modal .qv-img { min-height: 270px; height: 270px; }
  .qv-custom-modal #qvVariantChips { grid-template-columns: 1fr; }
  .qv-custom-modal .qv-cta-row {
    width: 100%;
    min-width: 0;
    gap: 8px !important;
  }
  .qv-custom-modal .qv-qty-stepper { flex: 0 0 112px; flex-basis: 112px; min-width: 112px; }
  .qv-custom-modal .qv-primary-btn { min-width: 0; padding-left: 8px !important; padding-right: 8px !important; }
  .qv-custom-modal .qv-wishlist-action { flex: 0 0 44px; min-width: 44px; width: 44px; }
}

/* Keep product details tabs below the main content, independent of sidebar height. */
@media (min-width: 992px) {
  .pdp-detail-layout .pdp--hero-main-row { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .pdp-detail-layout .pdp--content-col { display: block; grid-column: 1; grid-row: 1; width: 100% !important; max-width: none; min-width: 0; }
  .pdp-detail-layout .pdp--primary-block { display: grid; grid-template-columns: minmax(280px, .95fr) minmax(0, 1.3fr); gap: 36px 32px; }
  .pdp-detail-layout .pdp--gallery-col, .pdp-detail-layout .pdp--info-col { grid-column: auto; grid-row: auto; width: auto; }
  .pdp-detail-layout .pdp--tabs-card { margin-top: 32px !important; }
  .pdp-detail-layout .pdp--sidebar-col { grid-column: 2; grid-row: 1; width: auto; min-width: 0; }
  .pdp-detail-layout .pdp--sidebar-sticky-wrap {
    position: sticky;
    top: 115px;
    align-self: start;
    max-height: none;
    overflow: visible;
  }
}

/* Keep nearby product offers in the same vertical card pattern as product listings. */
.pdp-detail-layout .pdp--nearby-offer-item {
  display: block !important;
  background-color: var(--white) !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.07) !important;
  height: 100%;
  padding: 1rem !important;
  transform: none !important;
}

.pdp-detail-layout .pdp--nearby-offer-item:hover {
  border-color: rgba(var(--base-color-rgb), 0.35) !important;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.11) !important;
  transform: none !important;
}

.pdp-detail-layout .pdp--nearby-offer-item .pdp--nearby-offer-image-wrap {
  display: flex !important;
  background: transparent;
  height: 150px !important;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  width: 100% !important;
}
.pdp-detail-layout .pdp--nearby-offer-item .pdp--similar-info {
  display: block !important;
  padding: 0 !important;
  width: 100% !important;
}
.user-notification-item.is-unread { border-color: rgba(13, 138, 75, .35) !important; background: rgba(13, 138, 75, .04); }
.user-notification-icon { width: 38px; height: 38px; }
.user-notification-item form { display: inline-flex; }

/* Customer support create page uses the same full-width content area as other user pages. */
.ticket-create-page > .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.ticket-create-page .custom--card {
  width: 100%;
}

/* Keep the support message area comfortably tall regardless of global input rules. */
.ticket-message-textarea,
textarea.ticket-message-textarea.form-control {
  min-height: 150px !important;
  height: 150px !important;
  resize: vertical;
}

.ticket-all-requests-link {
  color: var(--base-color) !important;
  font-weight: 600;
}

.ticket-all-requests-link:hover {
  color: var(--base-color) !important;
  text-decoration: none !important;
}

.order-details-table tfoot td:first-child {
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-left: 1px solid var(--border-color) !important;
}

.order-details-table tfoot td:last-child {
  border-left: 1px solid var(--border-color) !important;
  border-color: var(--border-color) !important;
}

.order-details-table tfoot tr:first-child td {
  border-top: 1px solid var(--border-color) !important;
}

.ticket-static-card:hover,
.ticket-static-card.custom--card:hover {
  transition: none !important;
  transform: none !important;
  box-shadow: var(--shadow-sm) !important;
}
.pdp--shop-tab-pane .pdp--shop-profile {
    max-width: 760px;
}

.pdp--shop-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.pdp--shop-logo {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    overflow: hidden;
    color: var(--base-color, #087f5b);
    background: #f0f8f4;
    border: 1px solid #d8ebe2;
    border-radius: 8px;
    font-size: 24px;
}

.pdp--shop-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdp--shop-verified {
    color: var(--base-color, #087f5b);
    font-size: 12px;
    font-weight: 600;
}

.pdp--shop-distance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #687789;
    font-size: 12px;
}

.pdp--shop-distance svg {
    color: var(--base-color, #087f5b);
}

.pdp--shop-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    padding: 18px 0;
    border-top: 1px solid #e9eef0;
    border-bottom: 1px solid #e9eef0;
}

.pdp--shop-info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #526274;
    font-size: 14px;
}

.pdp--shop-info-item > svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--base-color, #087f5b);
}

.pdp--shop-info-item strong {
    display: block;
    margin-bottom: 3px;
    color: #27364a;
    font-size: 12px;
}

@media (max-width: 575px) {
    .pdp--shop-info-grid {
        grid-template-columns: 1fr;
    }
}
.vendor-status-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-width: 10rem;
    white-space: nowrap;
}

/* Keep vendor order status filters on one swipeable row on narrow screens. */
.vendor-main-wrapper .filter-bar__group {
    min-width: 0;
    max-width: 100%;
}

.vendor-main-wrapper .screen-filter-tab {
    flex-wrap: nowrap !important;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.vendor-main-wrapper .screen-filter-tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .vendor-main-wrapper .vendor-products-table {
        width: 100% !important;
        min-width: 1040px !important;
        max-width: none !important;
        table-layout: fixed;
    }

    .vendor-main-wrapper .vendor-products-table th:nth-child(1),
    .vendor-main-wrapper .vendor-products-table td:nth-child(1) {
        width: 300px;
    }

    .vendor-main-wrapper .vendor-products-table th:nth-child(2),
    .vendor-main-wrapper .vendor-products-table td:nth-child(2) {
        width: 170px;
    }

    .vendor-main-wrapper .vendor-products-table th:nth-child(3),
    .vendor-main-wrapper .vendor-products-table td:nth-child(3) {
        width: 165px;
    }

    .vendor-main-wrapper .vendor-products-table th:nth-child(4),
    .vendor-main-wrapper .vendor-products-table td:nth-child(4) {
        width: 210px;
    }

    .vendor-main-wrapper .vendor-products-table th:nth-child(5),
    .vendor-main-wrapper .vendor-products-table td:nth-child(5) {
        width: 130px;
    }

    .vendor-main-wrapper .vendor-products-table th:nth-child(6),
    .vendor-main-wrapper .vendor-products-table td:nth-child(6) {
        width: 125px;
    }

    .vendor-main-wrapper .vendor-products-table th:nth-child(7),
    .vendor-main-wrapper .vendor-products-table td:nth-child(7) {
        width: 135px;
    }

    .vendor-main-wrapper .vendor-products-table th:nth-child(8),
    .vendor-main-wrapper .vendor-products-table td:nth-child(8) {
        width: 135px;
    }
}

.vendor-status-submit-btn .spinner-border {
    flex: 0 0 auto;
    margin: 0 !important;
    vertical-align: middle !important;
}

.vendor-status-submit-btn.disabled,
.vendor-status-submit-btn:disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: .85;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .vendor-fixed-header.app-header {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 12px !important;
        gap: 10px !important;
    }

    .vendor-main-wrapper {
        padding-top: 48px !important;
    }

    .vendor-fixed-header .app-header__start,
    .vendor-fixed-header .app-header__end {
        gap: 8px !important;
    }

    .vendor-fixed-header .vendor-header-control {
        box-sizing: border-box !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 36px !important;
        padding: 0 !important;
    }

    .vendor-fixed-header .btn--secondary.vendor-header-control {
        display: inline-flex !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        flex: 0 0 36px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .vendor-fixed-header .btn--secondary.vendor-header-control span {
        display: none !important;
    }

    .vendor-fixed-header #vendorLangDropdown {
        width: auto !important;
        min-width: 0 !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 9px !important;
        font-size: .8rem !important;
        white-space: nowrap;
    }

    .vendor-fixed-header #vendorTopDropdown {
        width: auto !important;
        min-width: 150px !important;
        max-width: 220px !important;
        flex: 0 1 auto !important;
        padding: 0 10px 0 6px !important;
        gap: 7px !important;
        justify-content: flex-start !important;
    }

    .vendor-fixed-header #vendorTopDropdown .user-btn__name {
        display: inline-block !important;
        max-width: 118px;
        font-size: .8rem;
    }

    .vendor-fixed-header #vendorTopDropdown .user-btn__caret {
        display: inline-block !important;
        width: 12px !important;
        height: 12px !important;
        margin-left: auto;
    }

    .vendor-fixed-header .vendor-header-control svg {
        width: 16px !important;
        height: 16px !important;
    }

    .vendor-fixed-header #vendorTopDropdown img,
    .vendor-fixed-header #vendorTopDropdown > div {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }
}

@media (min-width: 1200px) {
    .vendor-fixed-header .app-header__end > .app-header__divider {
        display: none !important;
    }

    .vendor-fixed-header .vendor-header-icon-button,
    .vendor-fixed-header #vendorNotificationDropdown {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        flex: 0 0 38px !important;
    }

    .vendor-fixed-header #vendorNotificationDropdown svg {
        width: 18px !important;
        height: 18px !important;
    }
}

@media (max-width: 575.98px) {
    .vendor-status-submit-btn {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* Final compact vendor header sizing for tablet and phone widths. */
.vendor-fixed-header .app-header__end > .app-header__divider {
    display: none !important;
}

@media (max-width: 767.98px) {
    .vendor-main-wrapper .panel-table-frame {
        overflow: visible !important;
    }

    .vendor-main-wrapper .panel-table-frame > table.panel-list-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .vendor-main-wrapper .panel-table-frame > table.panel-list-table > thead {
        display: none !important;
    }

    .vendor-main-wrapper .panel-table-frame > table.panel-list-table > tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .vendor-main-wrapper .panel-table-frame > table.panel-list-table > tbody > tr {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        border: 1px solid #dfe4ea !important;
        border-radius: 8px !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
    }

    .vendor-main-wrapper .panel-table-frame > table.panel-list-table > tbody > tr > td {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #eef1f4 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .vendor-main-wrapper .panel-table-frame > table.panel-list-table > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        color: #64748b;
        font-size: .75rem;
        font-weight: 600;
        text-align: left;
    }

    .vendor-main-wrapper .panel-table-frame > table.panel-list-table > tbody > tr > td:last-child {
        border-bottom: 0 !important;
        padding-bottom: 2px !important;
    }

    .vendor-main-wrapper .panel-table-frame > table.panel-list-table > tbody > tr > td:first-child {
        padding-top: 2px !important;
    }

    .vendor-main-wrapper .panel-table-frame > table.panel-list-table > tbody > tr > td > * {
        max-width: 62%;
    }

    .vendor-fixed-header.app-header {
        box-sizing: border-box !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 6px !important;
        gap: 4px !important;
    }

    .vendor-main-wrapper {
        padding-top: 46px !important;
    }

    .vendor-fixed-header .app-header__start,
    .vendor-fixed-header .app-header__end {
        height: 100% !important;
        min-height: 0 !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .vendor-fixed-header .app-header__end {
        flex: 0 0 auto !important;
    }

    .vendor-fixed-header #vendorSidebarToggle,
    .vendor-fixed-header .btn--secondary,
    .vendor-fixed-header .vendor-header-icon-button,
    .vendor-fixed-header #vendorNotificationDropdown,
    .vendor-fixed-header #vendorTopDropdown {
        box-sizing: border-box !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex: 0 0 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .vendor-fixed-header #vendorSidebarToggle svg,
    .vendor-fixed-header .btn--secondary svg,
    .vendor-fixed-header #vendorNotificationDropdown svg {
        width: 14px !important;
        height: 14px !important;
    }

    .vendor-fixed-header #vendorTopDropdown img,
    .vendor-fixed-header #vendorTopDropdown > div {
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
    }

    .vendor-fixed-header .app-header__title {
        font-size: 14px !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    .vendor-fixed-header .btn--secondary span,
    .vendor-fixed-header .user-btn__name,
    .vendor-fixed-header .user-btn__caret,
    .vendor-fixed-header .header--lang-dropdown,
    .vendor-fixed-header .app-header__end > .app-header__divider,
    .vendor-fixed-header .app-header__start > .app-header__divider {
        display: none !important;
    }
}
.vendor-profile-tabs .nav-link {
    color: var(--base-color, #087f42);
}

.vendor-profile-tabs .nav-link.active {
    color: #fff;
    background-color: var(--base-color, #087f42);
    border-color: var(--base-color, #087f42) var(--base-color, #087f42) #fff;
}

/* Product filter drawer trigger is responsive-only. */
@media (min-width: 992px) {
  .filter--toggle-btn {
    display: none !important;
  }
}


/* ==========================================================================
   Vendor Product Studio Form Label Headers & Quick Stock Buttons
   ========================================================================== */
.vendor-product-form-container .vendor-form-label-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 26px;
    margin-bottom: 0.25rem;
}

.vendor-product-form-container .vendor-form-label-header .form-label {
    margin-bottom: 0 !important;
}

.vendor-product-form-container .vendor-form-label-header .btn-quick-stock {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    padding: 2px 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 500;
}

/* ==========================================================================
   Checkout: 3 Delivery Methods, Sendcloud Pickup Points & Stripe Cards
   ========================================================================== */
.delivery-method-card {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    position: relative;
    height: 100%;
}
.delivery-method-card:hover {
    border-color: #054e27;
    box-shadow: 0 4px 12px rgba(5, 78, 39, 0.08);
}
.delivery-method-card.active {
    border-color: #054e27 !important;
    background-color: #f7faf8 !important;
}
.delivery-method-card .method-radio {
    accent-color: #054e27;
    width: 18px;
    height: 18px;
}
.pickup-point-card {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    transition: all 0.2s ease;
    background: #fff;
    cursor: pointer;
}
.pickup-point-card:hover {
    border-color: #054e27;
    background-color: #f9fcf9;
}
.pickup-point-card.is-selected {
    border: 2px solid #054e27 !important;
    background-color: #edf7ef !important;
}
.pickup-point-map-container {
    height: 320px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    overflow: hidden;
    position: relative;
}
.checkout-summary-calculating {
    position: relative;
    pointer-events: none;
    opacity: 0.65;
}
.payment-method-card {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 0.75rem 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
}
.payment-method-card:hover {
    border-color: #054e27;
}
.payment-method-card.active {
    border-color: #054e27 !important;
    background-color: #f7faf8 !important;
}
.payment-radio {
    accent-color: #054e27;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.payment-card-img {
    height: 20px;
    width: auto;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    transition: transform 0.15s ease;
}
.payment-card-img:hover {
    transform: scale(1.08);
}
.shop-header-thumb {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #ffffff;
    padding: 3px;
    flex-shrink: 0;
    overflow: hidden;
}
.shop-header-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.shop-header-thumb-sm {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    padding: 2px;
}
.shop-title-link {
    color: #212529 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.shop-title-link:hover,
.shop-title-link:hover .shop-name-text,
.shop-title-link:hover span {
    color: var(--base-color, #0b7b3e) !important;
}
.shop-title-link:hover .shop-header-thumb {
    border-color: var(--base-color, #0b7b3e) !important;
}

.address-select-card {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
}
.address-select-card:hover {
    border-color: #054e27;
}
.address-select-card.active {
    border-color: #054e27 !important;
    background-color: #f7faf8 !important;
}


.btn-card-show-map {
    font-size: 0.7rem;
    padding: 0.18rem 0.45rem;
    border-radius: 4px;
    font-weight: 500;
}
#pickupLocationSuggestions {
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
#pickupLocationSuggestions .list-group-item:hover {
    background-color: #f1f8f3;
}
.mr-custom-pin, .mr-custom-pin-selected {
    background: transparent !important;
    border: none !important;
}

.checkout-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    width: 100%;
}
.checkout-stepper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    z-index: 1;
}
.checkout-stepper-line {
    flex-grow: 1;
    height: 2px;
    background-color: #e9ecef;
    margin-top: 17px;
    margin-left: 12px;
    margin-right: 12px;
}
.checkout-stepper-line.completed {
    background-color: var(--base-color, #0b7b3e);
}
#panelPickupPointSelection,
#panelHomeDeliveryAddress,
.pickup-point-card,
.delivery-method-card {
    scroll-margin-top: 140px;
}
.cart-summary-sticky {
    position: sticky;
    top: 100px;
    z-index: 10;
}
@media (max-width: 991.98px) {
    .cart-summary-sticky {
        position: static !important;
        margin-top: 1rem;
    }
}
@media (max-width: 575.98px) {
    .delivery-method-card {
        padding: 0.85rem;
    }
    .checkout-stepper-line {
        margin-left: 6px;
        margin-right: 6px;
    }
}

/* ==========================================================================
   Checkout Pickup Point Badges & Action Buttons Vertical Centering
   ========================================================================== */
.mr-carrier-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background-color: #990033 !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 50rem !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}
.mr-carrier-badge i {
    font-size: 0.9rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}
.mr-carrier-badge-sm {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.65rem !important;
    gap: 3px !important;
    border-radius: 50rem !important;
    line-height: 1.2 !important;
}
.pickup-distance-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 50rem !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.65rem !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}
.selected-point-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #198754 !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 6px !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
}
.btn-card-show-map {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    padding: 0.16rem 0.42rem !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}
.btn-card-show-map i {
    font-size: 0.78rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}
.pickup-point-card .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.25rem 0.6rem !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
}


/* ==========================================================================
   Product Variation Color Badge & Clean Text in Checkout / Cart / Orders
   ========================================================================== */
.product-variation-color-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background-color: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50rem !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    padding: 0.12rem 0.55rem 0.12rem 0.35rem !important;
    line-height: 1.25 !important;
    vertical-align: middle !important;
}
.product-variation-color-dot {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}
.cart-item-variation-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
    font-size: 0.8rem;
    color: #64748b;
}
.input-group > .btn-outline--base {
    border-radius: 0;
}
.input-group > .btn-outline--base:last-child {
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
}

/* Disabled State for Checkout CTA */
.btn-checkout-cta:disabled,
.btn-checkout-cta[disabled],
.btn-checkout-cta.disabled {
    background-color: #94a3b8 !important;
    border-color: #94a3b8 !important;
    color: #ffffff !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

#btnSearchPickupPoints {
    white-space: nowrap;
}


/* Vendor Header Notification Badge (Perfect Circle & Aligned) */
.vendor-header-icon-button {
    overflow: visible !important;
}

.vendor-header-notification-badge {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    transform: none !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

.vendor-header-notification-badge--pill {
    width: auto !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
}


/* Vendor Withdrawal Details Modal */
#detailModal .modal-content {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

#detailModal .modal-header {
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 16px 20px !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#detailModal .modal-title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

#detailModal .modal-body {
    padding: 20px !important;
    background-color: #ffffff !important;
}

#detailModal .userData {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

#detailModal .userData .list-group-item {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 12px 16px !important;
    background-color: #ffffff !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.875rem !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

#detailModal .userData .list-group-item:last-child {
    border-bottom: none !important;
}

#detailModal .userData .list-group-item .item-label,
#detailModal .userData .list-group-item > span:first-child {
    color: #64748b !important;
    font-weight: 500 !important;
}

#detailModal .userData .list-group-item .item-value,
#detailModal .userData .list-group-item > span:last-child {
    color: #0f172a !important;
    font-weight: 600 !important;
    text-align: right !important;
}

#detailModal .modal-footer {
    border-top: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    padding: 14px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

#detailModal .modal-footer .btn-close-modal,
#detailModal .modal-footer .btn-secondary {
    min-width: 100px !important;
    padding: 8px 20px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#detailModal .modal-footer .btn-close-modal:hover,
#detailModal .modal-footer .btn-secondary:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}


/* Vendor Lifecycle & Confirmation Modals Button Fit Fix */
:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-dialog {
  max-width: 440px !important;
}

:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-content {
  max-width: 440px !important;
}

:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-footer .btn {
  min-height: 44px;
  border-radius: 8px !important;
  font-weight: 600;
  padding: 8px 12px !important;
  font-size: 0.84rem !important;
  line-height: 1.25;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

:is(#confirmOrderModal, #rejectOrderModal, #lifecycleModal, #vendorConfirmStatusModal, #vendorRejectStatusModal,
    #dashboardConfirmOrderModal, #dashboardRejectOrderModal, #requestDeleteModal)
    .modal-footer .btn .spinner-border {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-right: 6px !important;
}


/* ==========================================================================
   Vendor Orders Table Action Dropdown Menu
   ========================================================================== */
.vendor-order-dropdown {
  position: relative;
}

.vendor-order-dropdown .dropdown-toggle {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  color: #374151;
  transition: all 0.2s ease-in-out;
}

.vendor-order-dropdown .dropdown-toggle::after {
  display: none !important;
}

.vendor-order-dropdown .dropdown-toggle .svg-icon,
.vendor-order-dropdown .dropdown-toggle svg,
.vendor-order-dropdown .dropdown-toggle i {
  font-size: 1rem !important;
  width: 1rem !important;
  height: 1rem !important;
  line-height: 1 !important;
}

.vendor-order-dropdown .dropdown-toggle:hover,
.vendor-order-dropdown .dropdown-toggle:focus,
.vendor-order-dropdown .dropdown-toggle[aria-expanded="true"] {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  color: #111827;
}

.vendor-order-dropdown__menu {
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  font-size: 0.82rem;
  padding: 4px 0 !important;
}

.vendor-order-dropdown__menu .dropdown-item {
  padding: 7px 12px !important;
  font-size: 0.82rem !important;
  color: #374151 !important;
  border-radius: 6px !important;
  margin: 1px 4px !important;
  width: calc(100% - 8px) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.vendor-order-dropdown__menu .dropdown-item:hover,
.vendor-order-dropdown__menu .dropdown-item:focus {
  background-color: #f3f4f6 !important;
}

.vendor-order-dropdown__menu .dropdown-item.text-success {
  color: #10b981 !important;
}
.vendor-order-dropdown__menu .dropdown-item.text-success:hover {
  background-color: #ecfdf5 !important;
  color: #059669 !important;
}

.vendor-order-dropdown__menu .dropdown-item.text-danger {
  color: #ef4444 !important;
}
.vendor-order-dropdown__menu .dropdown-item.text-danger:hover {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
}

.vendor-order-dropdown__menu .dropdown-item.text-warning {
  color: #f59e0b !important;
}
.vendor-order-dropdown__menu .dropdown-item.text-warning:hover {
  background-color: #fffbeb !important;
  color: #d97706 !important;
}

.vendor-order-dropdown__menu .dropdown-item.text-info {
  color: #0284c7 !important;
}
.vendor-order-dropdown__menu .dropdown-item.text-info:hover {
  background-color: #f0f9ff !important;
  color: #0369a1 !important;
}

.vendor-order-dropdown__menu .dropdown-item.text-dark,
.vendor-order-dropdown__menu .dropdown-item:not(.text-success):not(.text-danger):not(.text-warning):not(.text-info) {
  color: #1f2937 !important;
}

.vendor-order-dropdown__menu .dropdown-item .text-secondary {
  color: #4b5563 !important;
}

.vendor-order-dropdown__menu .dropdown-item:hover .text-secondary {
  color: #111827 !important;
}