/* =============================================================================
   NATURISTA — RESPONSIVE FIXES & UI CONSISTENCY
   Addresses: horizontal scroll, card uniformity, mobile UX, inline-style
   replacements, touch-device hover, cross-browser prefixes.
   Mobile-first: base styles target smallest screens; media queries scale up.
   ============================================================================= */

/* =============================================================================
   0. CSS CUSTOM PROPERTIES
   ============================================================================= */
:root {
  --rf-sidebar-width: 420px;
  --rf-mobile-nav-h: 70px;
  --rf-mobile-header-h: 65px;
  --rf-card-radius: 10px;
  --rf-transition: all 0.3s ease;
  --rf-green: #81b214;
  --rf-green-dark: #6a9611;
}

/* =============================================================================
   1. GLOBAL — Prevent horizontal overflow on every device
   ============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%; /* prevent iOS font bump on orientation change */
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* =============================================================================
   2. BODY OFFSET — compensate for fixed mobile header & bottom nav
   ============================================================================= */
@media (max-width: 1199px) {
  body {
    padding-top: var(--rf-mobile-header-h) !important;
    padding-bottom: var(--rf-mobile-nav-h) !important;
  }
}

@media (min-width: 1200px) {
  body {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Safe area insets for notched devices (iPhone X +) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 1199px) {
    body {
      padding-bottom: calc(var(--rf-mobile-nav-h) + env(safe-area-inset-bottom)) !important;
    }
    .mobile-bottom-nav {
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
      height: calc(var(--rf-mobile-nav-h) + env(safe-area-inset-bottom));
    }
  }
}

/* =============================================================================
   3. LANG SWITCHER FLOATING BUTTON
   (moved here from main.blade.php <style> block)
   ============================================================================= */
.lang-switcher-floating {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 9999;
}

.lang-switcher-btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  gap: 6px;
  background: #2d7a3e;
  color: #fff;
  width: 84px;
  height: 39px;
  border-radius: 50px;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  -webkit-box-shadow: 0 4px 14px rgba(45, 122, 62, 0.4);
  box-shadow: 0 4px 14px rgba(45, 122, 62, 0.4);
  -webkit-transition: var(--rf-transition);
  transition: var(--rf-transition);
}

.lang-switcher-btn:hover {
  background: #1e5c2c;
  color: #fff;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 6px 20px rgba(45, 122, 62, 0.5);
  box-shadow: 0 6px 20px rgba(45, 122, 62, 0.5);
}

.lang-flag {
  font-size: 16px;
  line-height: 1;
  height: 30px;
}

.lang-label {
  letter-spacing: 0.5px;
}

@media (max-width: 1199px) {
  .lang-switcher-floating {
    bottom: calc(var(--rf-mobile-nav-h) + 10px);
    right: 12px;
  }
}

@media (max-width: 374px) {
  .lang-switcher-floating {
    bottom: calc(var(--rf-mobile-nav-h) + 8px);
    right: 8px;
  }
}

/* =============================================================================
   4. PRODUCT CARD FIXES
   ============================================================================= */

/* 4a. Remove the inline margin-right on product title links */
.tpproduct__title a {
  margin-right: 0 !important;
  /* Already 2-line clamped — let overflow handle the shopping-icon overlap */
}

/* 4b. Uniform image area using aspect-ratio */
.tpproduct__thumb {
  overflow: hidden;
  border-radius: var(--rf-card-radius) var(--rf-card-radius) 0 0;
  position: relative;
  aspect-ratio: 1 / 1; /* square crop zone */
  padding: 0; /* override the inline 20px 20px */
}

.tpproduct__thumb > a,
.tpproduct__thumb > a:first-child {
  display: block;
  width: 100%;
  height: 100%;
}

.tpproduct__thumb img:not(.tpproduct__thumb-img) {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  padding: 16px;
}

/* 4c. Hover-overlay image: fill the same space */
.tpproduct__thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  padding: 16px;
}

/* 4d. Payzy logo beside installments text */
.payzy-logo {
  width: 50px;
  height: auto;
  vertical-align: middle;
  -webkit-user-select: none;
  user-select: none;
}

/* 4e. Touch devices: product hover area always visible
   (hover pseudo-state doesn't exist on touchscreens — add-to-cart was
   completely inaccessible without tapping twice) */
@media (hover: none), (pointer: coarse) {
  .tpproduct__hover-text {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    bottom: auto !important;
    border: none !important;
    border-top: none !important;
    border-radius: 0 0 var(--rf-card-radius) var(--rf-card-radius) !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    padding: 10px 15px 15px !important;
  }

  .tpproduct__shopping a {
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
  }
}

/* 4f. Product card: equal height columns in the grid */
.tpproduct__shop-item .col-xl-3,
.tpproduct__shop-item .col-xl-4,
.tpproduct__shop-item [class*="col-"] {
  display: -webkit-flex;
  display: flex;
}

.tpproduct {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
}

.tpproduct__content {
  -webkit-flex: 1;
  flex: 1;
}

/* 4g. Sold-count badge — wrap on very small screens */
.product-sold-count {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================================================
   5. BLOG CARD FIXES — uniform height & image crop
   ============================================================================= */

/* 5a. Full-height flex card */
.tpblog__item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 100%;
  border-radius: var(--rf-card-radius);
  overflow: hidden;
}

/* 5b. Image: fixed height with cover crop so all thumbnails align */
.tpblog__thumb {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  overflow: hidden;
}

.tpblog__thumb img {
  width: 100%;
  height: 220px;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.8s ease;
  transition: transform 0.8s ease;
  display: block;
}

.tpblog__item:hover .tpblog__thumb img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

/* 5c. Content area: flex-grow so "Read More" sits at the bottom */
.tpblog__wrapper {
  -webkit-flex: 1;
  flex: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.tpblog__details {
  margin-top: auto;
  padding-top: 8px;
}

/* 5d. Ensure Bootstrap row stretches columns to equal height */
.tpblog__row,
.blog-row-equal {
  -webkit-align-items: stretch;
  align-items: stretch;
}

/* 5e. Responsive image heights */
@media (max-width: 1199px) {
  .tpblog__thumb img {
    height: 200px;
  }
}

@media (max-width: 767px) {
  .tpblog__thumb img {
    height: 180px;
  }
}

@media (max-width: 575px) {
  .tpblog__thumb img {
    height: 160px;
  }
}

/* =============================================================================
   6. CATEGORY CARD FIXES — uniform height
   ============================================================================= */
.category__item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 150px;
  height: 100%;
}

.category__thumb img {
  width: 80px;
  height: 80px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* Category title: clamp to 2 lines so cards stay aligned */
.category__title {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

/* =============================================================================
   7. PRODUCT-DETAILS PAGE — CSS classes replacing inline styles
   ============================================================================= */

/* Main product image */
.product-detail__main-img {
  max-width: 400px;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}

/* Thumbnail wrapper */
.product-detail__thumb {
  cursor: pointer;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 6px;
  border: 2px solid transparent;
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.product-detail__thumb:hover,
.product-detail__thumb.active {
  border-color: var(--rf-green);
}

/* Thumbnail image */
.product-detail__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .product-detail__main-img {
    max-width: 100%;
  }

  .product-detail__thumb {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 374px) {
  .product-detail__thumb {
    width: 52px;
    height: 52px;
  }
}

/* =============================================================================
   8. CART / WISHLIST SIDEBAR — Responsive widths
   ============================================================================= */

/* Tablet portrait (576px–767px): narrower than desktop but not full-width */
@media (min-width: 576px) and (max-width: 767px) {
  .tpcartinfo,
  .tpwishlistinfo {
    width: 360px;
    right: -360px;
  }

  .tpcartinfo.tp-sidebar-opened,
  .tpwishlistinfo.tp-sidebar-opened {
    right: 0;
  }
}

/* =============================================================================
   9. SHOP SIDEBAR — Mobile behaviour
   ============================================================================= */

/* On non-xl screens the sidebar stacks above the product grid */
@media (max-width: 1199px) {
  .tpshop__leftbar {
    margin-bottom: 24px;
  }

  /* Horizontal scrollable category chip row */
  .tpshop__widget .form-check {
    display: inline-flex;
  }
}

/* Price range slider — full width on mobile */
@media (max-width: 575px) {
  .productsidebar__range {
    width: 100%;
  }

  #slider-range {
    width: 100% !important;
  }
}

/* =============================================================================
   10. CHECKOUT PAGE — Responsive tables & toast placement
   ============================================================================= */

/* Shipping table: stack columns on mobile */
@media (max-width: 767px) {
  #shippingRow th,
  #shippingRow td {
    display: block;
    width: 100% !important;
  }

  .shipping-cost-wrapper {
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin-top: 12px;
  }

  .shipping-detail-item {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/* Toast z-index: always above sidebars (sidebar is z-index 9999) */
.toast-container {
  z-index: 10001 !important;
}

/* =============================================================================
   11. FOOTER — Mobile spacing
   ============================================================================= */
@media (max-width: 1199px) {
  .site-footer {
    /* No extra margin needed — body bottom padding handles the nav gap */
    margin-bottom: 0;
  }
}

/* =============================================================================
   12. BREADCRUMB — Mobile font scaling
   ============================================================================= */
@media (max-width: 575px) {
  .tp-breadcrumb__content h1,
  .tp-breadcrumb__content .tp-breadcrumb__title {
    font-size: clamp(18px, 5vw, 28px);
  }
}

/* =============================================================================
   13. HORIZONTAL SCROLL HARDENING
   — targets elements that commonly break out of viewport
   ============================================================================= */

/* Prevent Swiper from causing horizontal scroll */
.swiper {
  overflow: hidden;
}

.swiper-wrapper {
  max-width: 100%;
}

/* Tables inside cards/modals */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure no fixed-width element breaks narrow screens */
@media (max-width: 479px) {
  .tpcart,
  .tpcart__item {
    min-width: 0;
  }

  /* Very small screens: reduce cart padding */
  .tpcart__item {
    gap: 10px;
    padding: 10px;
  }

  .tpcart__img {
    width: 60px !important;
    height: 60px !important;
  }
}

/* =============================================================================
   14. CROSS-BROWSER PREFIXES — Flex & Transform
   ============================================================================= */

/* Flexbox — older Safari & Chrome */
.tpcart__item,
.tpcart__content,
.category__item,
.tpblog__item,
.tpblog__wrapper,
.tpproduct,
.header__info,
.mobile-bottom-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* -webkit- for backdrop-filter (Safari < 15) */
.tpsearchbar {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* =============================================================================
   15. FONT SCALING — tiny viewports
   ============================================================================= */
@media (max-width: 374px) {
  html {
    font-size: 13.5px;
  }

  .tpproduct__price span {
    font-size: 15px;
  }

  .tpproduct__title {
    font-size: 13px;
  }
}

/* =============================================================================
   16. PRINT STYLES — remove interactive chrome
   ============================================================================= */
@media print {
  .mobile-bottom-nav,
  .lang-switcher-floating,
  .tpcartinfo,
  .tpwishlistinfo,
  .tpsearchbar,
  .tpsideinfo,
  #header-sticky-2 {
    display: none !important;
  }

  body {
    padding: 0 !important;
  }
}

/* =============================================================================
   17. HERO SLIDER — Mobile Image Scaling & Header Clearance
   ============================================================================= */

/* ── A: Fix mobile header height ─────────────────────────────────────────────
   .tpmobile-menu base style has padding: 20px 0 which inflates the real
   header height to ~105 px. body padding-top only compensated 72 px (now
   65 px), so ~33 px of hero content was hidden behind the fixed bar.
   Removing the outer padding makes the rendered header match the variable. */
@media (max-width: 1199px) {
  #header-sticky-2 {
    padding: 0 !important;
  }
}

/* ── B: Viewport-relative hero height ────────────────────────────────────────
   Replace fixed pixel heights with max() so the image fills a proportional
   share of the viewport on portrait phones. The pixel floor (350 / 320 / 300)
   prevents the hero from collapsing in landscape orientation where vh is small.
   height (not min-height) is used so .swiper-wrapper { height: 100% } resolves
   correctly and background-size: cover fills the container. */
@media (max-width: 767px) {
  .hero-bg-swiper,
  .hero-bg-slide {
    height: max(350px, 70vh) !important;
  }
}

@media (max-width: 575px) {
  .hero-bg-swiper,
  .hero-bg-slide {
    height: max(320px, 70vh) !important;
  }
}

@media (max-width: 400px) {
  .hero-bg-swiper,
  .hero-bg-slide {
    height: max(300px, 65vh) !important;
  }
}

/* ── C: Feature items — horizontal row layout on mobile ─────────────────────
   Stacking 3 items in a column (original mobile behaviour) consumed ~175 px.
   A compact horizontal row (icon + text stacked per item) takes ~80 px. */
@media (max-width: 767px) {
  .hero-features {
    -webkit-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    -webkit-justify-content: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin-top: 18px !important;
  }

  .hero-feature-item {
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-align-items: center !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 90px !important;
    max-width: 110px !important;
  }

  .hero-feature-text {
    text-align: center !important;
  }

  .hero-feature-label {
    font-size: 10px !important;
  }

  .hero-feature-value {
    font-size: 13px !important;
  }
}

/* ── D: Reduce content wrapper padding on mobile ─────────────────────────────
   Original 70 px top+bottom at ≤575 px consumed most of the hero height;
   reduce to leave room for actual content. */
@media (max-width: 767px) {
  .hero-content-wrapper {
    padding: 35px 15px !important;
  }
}

@media (max-width: 575px) {
  .hero-content-wrapper {
    padding: 25px 15px !important;
  }

  .hero-badge {
    margin-bottom: 12px !important;
  }

  .hero-title {
    margin-bottom: 10px !important;
  }

  .hero-subtitle {
    margin-bottom: 16px !important;
    max-width: 280px !important;
  }

  .hero-features {
    gap: 10px !important;
    margin-top: 14px !important;
  }

  .hero-feature-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 400px) {
  .hero-content-wrapper {
    padding: 20px 12px !important;
  }

  /* Features don't fit in the short landscape/tiny-portrait viewport; hide
     them so badge + title + subtitle + buttons remain fully visible. */
  .hero-features {
    display: none !important;
  }
}

/* ── E: Landscape orientation on mobile ─────────────────────────────────────
   Landscape vh is ~375 px or less; the pixel floor kicks in (350 px hero).
   Hiding features and tightening padding ensures the primary CTA is visible. */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-content-wrapper {
    padding: 15px 15px !important;
  }

  .hero-features {
    display: none !important;
  }

  .hero-subtitle {
    margin-bottom: 12px !important;
  }
}

/* ── F: Desktop – match container height to image aspect ratio ──────────────
   The hero images are 1921×800 px (aspect ratio 800/1921 ≈ 0.4165:1).

   Problem A (original): fixed pixel heights (774 px / 650 px / 600 px) gave
   containers a narrower ratio than the image.  background-size:cover then
   scaled by HEIGHT → rendered image wider than viewport → right-side crop
   (~60–120 px) hiding the Naturista logo.

   Problem B (previous attempt): switching to background-size:100% auto fixed
   the horizontal crop but left the image shorter than the container (e.g.
   599 px image inside a 650 px slot) → a near-black gap at the bottom (the
   dark overlay over the #1a2e1a background reads as solid black).

   Fix: drive the container height with max(550px, calc(100vw * 0.4165)).
   • When 100vw is large enough the calc wins → container height ≈ image
     natural height at that viewport width → cover fills it exactly with
     virtually no H-crop and zero V-gap.
   • When the viewport is narrow enough that the calc would fall below 550 px,
     the floor kicks in → cover may crop ~60 px per side, but the container is
     always fully covered (no black gap).
   • margin and padding of .hero-slider-modern are explicitly zeroed to remove
     any stray spacing that could expose the background between sections.
   Mobile (≤767 px) is fully unaffected; it retains all its own height rules. */
@media (min-width: 768px) {
  .hero-slider-modern {
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-bg-swiper,
  .hero-bg-slide {
    height: max(550px, calc(100vw * 0.4165)) !important;
  }

  .hero-bg-slide {
    background-size: cover !important;
    background-position: center center !important;
  }
}


/* =============================================================================
   NAT-STEPS — Shared Checkout Progress Bar (4-step: Cart→Checkout→Payment→Success)
   Colours: Active/Completed dark green #1b3c17, Completed light green #8bc34a,
            Pending light grey #e0e0e0.
   Include via @include('partials.checkout-steps', ['currentStep' => N])
   ============================================================================= */

.nat-steps-wrap {
  width: 100%;
  padding: 18px 24px 14px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  margin-bottom: 26px;
}

.nat-steps {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Individual step */
.nat-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Connector line — spans from this step's centre to the next */
.nat-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 17px; /* vertically centred within 34px bullet */
  left: 55%;
  width: 90%;
  height: 2px;
  background: #e0e0e0;
  z-index: 0;
  transition: background 0.35s ease;
}

/* Green connector only after a *completed* step */
.nat-step.completed:not(:last-child)::after {
  background: linear-gradient(to right, #8bc34a, #7ab53a);
}

/* ── Bullet circle ── */
.nat-step-bullet {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  position: relative;
  z-index: 2;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid transparent;
}

/* Pending */
.nat-step.pending .nat-step-bullet {
  background: #f0f0f0;
  color: #b0b0b0;
  border-color: #e0e0e0;
  font-size: 12px;
}

/* Completed */
.nat-step.completed .nat-step-bullet {
  background: #8bc34a;
  color: #ffffff;
  border-color: #8bc34a;
  box-shadow: 0 2px 8px rgba(139, 195, 74, 0.40);
}

/* Active */
.nat-step.active .nat-step-bullet {
  background: #1b3c17;
  color: #ffffff;
  border-color: #1b3c17;
  box-shadow: 0 3px 14px rgba(27, 60, 23, 0.40);
  animation: natBulletPulse 2.2s ease-in-out infinite;
}

@keyframes natBulletPulse {
  0%, 100% { box-shadow: 0 3px 14px rgba(27, 60, 23, 0.40); }
  50%       { box-shadow: 0 3px 20px rgba(27, 60, 23, 0.65),
                          0 0 0 5px rgba(27, 60, 23, 0.09); }
}

/* ── Labels ── */
.nat-step-lbl {
  font-size: 11px;
  font-weight: 600;
  margin-top: 7px;
  text-align: center;
  color: #aaa;
  white-space: nowrap;
  line-height: 1;
}

.nat-step.completed .nat-step-lbl { color: #5a9e20; }
.nat-step.active    .nat-step-lbl { color: #1b3c17; font-weight: 800; }

/* ── Tablet ── */
@media (max-width: 767px) {
  .nat-steps-wrap { padding: 14px 16px 10px; margin-bottom: 20px; }
  .nat-step-bullet { width: 30px; height: 30px; font-size: 12px; }
  .nat-step:not(:last-child)::after { top: 15px; }
  .nat-step-lbl { font-size: 10px; margin-top: 5px; }
}

/* ── Very small phones — icon-only (hide labels) ── */
@media (max-width: 360px) {
  .nat-step-lbl { display: none; }
  .nat-steps-wrap { padding: 12px 10px 12px; }
  .nat-step-bullet { width: 28px; height: 28px; font-size: 11px; }
}


/* =============================================================================
   CHECKOUT PAGE — Mobile & Form Enhancements
   ============================================================================= */

/* ── Mobile column order: Billing FIRST, Order Summary SECOND ── */
@media (max-width: 991.98px) {
  .checkout-col-billing { order: 1 !important; }
  .checkout-col-order   { order: 2 !important; }
}

/* ── Touch-friendly form inputs ── */
.modern-billing-card .form-control,
.modern-billing-card .form-select {
  min-height: 50px;
  padding: 12px 16px;
  font-size: 15px;
  border: 2px solid #e4e8e4;
  border-radius: 10px;
  background: #fafafa;
  color: #333;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  line-height: 1.4;
}

.modern-billing-card .form-control:focus,
.modern-billing-card .form-select:focus {
  border-color: #1b3c17;
  box-shadow: 0 0 0 3px rgba(27, 60, 23, 0.10);
  background: #ffffff;
  outline: none;
}

.modern-billing-card textarea.form-control {
  min-height: 100px;
  height: auto;
  resize: vertical;
}

.modern-billing-card .form-label {
  font-size: 13px;
  font-weight: 700;
  color: #3a3a3a;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Section divider heading inside billing card */
.nat-form-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: #1b3c17;
  margin: 22px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nat-form-section-title i { color: #8bc34a; }
.nat-form-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, #c8e6c9, transparent);
}

/* ── Sticky Place-Order button on mobile ── */
@media (max-width: 767px) {
  .order-button-payment {
    position: sticky;
    bottom: 72px; /* sits above the 70px mobile bottom nav */
    z-index: 40;
    background: #ffffff;
    margin: 0 -24px -24px; /* bleed to card edges */
    padding: 14px 20px 18px;
    border-top: 1px solid #e8f0e8;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
  }

  /* Remove bottom padding from the card so sticky fits flush */
  .modern-order-card {
    padding-bottom: 0 !important;
  }
}


/* =============================================================================
   ADMIN DASHBOARD — Naturista-themed Bootstrap 5 pagination
   Scope: .admin-pagination-wrapper — applied to the outer wrapper div on
   Orders, Shipping Rates, UPS Rates, and Payment Management pages.
   Colours: primary-green #81b214, gold #d4af37, hover/active darken by 10 %.
   ============================================================================= */

.admin-pagination-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* "Showing X – Y of Z" info label */
.admin-pagination-wrapper .pagination-info {
  color: #6c757d;
  font-size: 0.875rem;
}

/* ── Pagination list ──────────────────────────────────────────────────────── */
.admin-pagination-wrapper .pagination {
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: 3px;
}

/* All page-links: default state */
.admin-pagination-wrapper .page-link {
  color: #81b214;
  background-color: #fff;
  border-color: #d0dba0;
  border-radius: 6px !important;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  transition: color .15s ease-in-out,
              background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
}

/* Hover / focus */
.admin-pagination-wrapper .page-link:hover {
  color: #fff;
  background-color: #6e990f;
  border-color: #6e990f;
  text-decoration: none;
}

.admin-pagination-wrapper .page-link:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(129, 178, 20, 0.3);
}

/* Active (current) page — gold badge so it stands out */
.admin-pagination-wrapper .page-item.active .page-link {
  color: #fff;
  background-color: #81b214;
  border-color: #81b214;
  font-weight: 700;
}

/* Disabled prev / next arrows */
.admin-pagination-wrapper .page-item.disabled .page-link {
  color: #adb5bd;
  background-color: #f8f9fa;
  border-color: #dee2e6;
  pointer-events: none;
}

/* ── Mobile: stack info above pagination, reduce link padding ─────────────── */
@media (max-width: 575.98px) {
  .admin-pagination-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .admin-pagination-wrapper .pagination-info {
    width: 100%;
    text-align: center;
  }

  .admin-pagination-wrapper .page-link {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
  }
}