/*
 * Modern Override Styles - Loads AFTER Bootstrap
 * This ensures our custom styles take priority over Bootstrap defaults
 */

/* ============================================
   ORDER FORM REDESIGN (CSS-ONLY)
   Applies to guest (order1.php) and client (order.php)
   No HTML or backend changes required
   ============================================ */

/* Design tokens (fine‑tuned palette) */
:root {
  --ops-primary: #6d3eea; /* Requested primary */
  --ops-primary-dark: #5a2fe3; /* Darker companion */
  --ops-accent: #7b61ff; /* Close-match accent */
  --ops-success: #22c55e; /* Green 500 */
  --ops-warning: #f59e0b; /* Amber 500 */
  --ops-danger: #ef4444;  /* Red 500 */
  --ops-info: #06b6d4;    /* Cyan 500 */
  --ops-text-primary: #0f172a; /* Slate 900 */
  --ops-text-secondary: #475569; /* Slate 600 */
  --ops-text-muted: #94a3b8; /* Slate 400 */
  --ops-bg: #f7f9fc;
  --ops-white: #ffffff;
  --ops-radius-sm: 12px;
  --ops-radius-md: 16px;
  --ops-radius-lg: 20px;
  --ops-shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --ops-shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --ops-shadow-lg: 0 10px 30px rgba(79,70,229,0.15);

  /* Global header palette */
  --topbar-start: #6d3eea; /* Requested */
  --topbar-end:   #7b61ff; /* Close-match gradient end */
  --topbar-text:  #0b1320; /* Deep slate for contrast */
  --topbar-pill:  rgba(255,255,255,0.14);
  --topbar-border: rgba(255,255,255,0.22);
}

/* ============================================
   GLOBAL TOP HEADER (all pages in order app)
   No HTML changes required
   ============================================ */

/* Prevent any accidental horizontal scrolling site-wide */
html, body { overflow-x: hidden !important; }

/* Fixed topbar look & feel */
.wrheader .navbar.fixed-top {
  /* Floating header card */
  position: fixed !important;
  top: 10px !important;                   /* small gap from very top */
  left: 50% !important;
  transform: translateX(-50%) !important; /* center horizontally */
  width: min(1200px, calc(100% - 12px)) !important; /* tighter left/right margin */

  color: #fff !important;
  background: linear-gradient(120deg, rgba(109, 62, 234, 0.92) 0%, rgba(123, 97, 255, 0.92) 100%) !important; /* translucent */
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  border: 1px solid var(--topbar-border) !important;
  border-radius: 18px !important;         /* fully rounded */

  box-shadow: 0 12px 30px rgba(2, 6, 23, 0.22), 0 20px 50px rgba(109, 62, 234, 0.15) !important; /* float glow */
  padding: 10px 6px !important;
  z-index: 1050 !important;
  overflow-x: hidden !important; /* prevent any horizontal scroll from inner content */
}

/* Desktop: anchor header to full width edges (no floating gap) */
@media (min-width: 992px) {
  .wrheader .navbar.fixed-top {
    /* Edge-close, with visible rounded top & bottom corners */
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: calc(100% - 16px) !important;
    border-radius: 16px !important;               /* rounded top & bottom */
    background: linear-gradient(120deg, var(--topbar-start), var(--topbar-end)) !important;
    border: 1px solid var(--topbar-border) !important;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.18) !important;
  }
}

/* Ensure content clears the fixed header */
.wrbody { padding-top: 130px !important; }
@media (max-width: 991.98px) { .wrbody { padding-top: 146px !important; } }
@media (min-width: 992px) { .wrbody { padding-top: 124px !important; } }

/* Brand / logo */
.wrheader .logo-box a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

.wrheader .logo-box a span {
  font-weight: 800 !important;
  letter-spacing: .6px !important;
}

/* Brand primary ("TOP WRITERS") */
.wrheader .logo-box a span:first-child {
  font-size: 22px !important;
  background: linear-gradient(135deg, #ffffff, #e5e7ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-transform: uppercase !important;
}

/* Brand PRO pill */
.wrheader .logo-box a span:last-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35) !important;
  color: #fff !important;
  -webkit-text-fill-color: unset !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  margin-left: 10px !important;
}

/* Navbar links */
.wrheader .navbar .nav-link {
  color: rgba(255,255,255,0.95) !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: all .25s ease !important;
  background: var(--topbar-pill) !important;
  box-shadow: inset 0 0 0 1px var(--topbar-border) !important;
}
.wrheader .navbar .nav-link:hover,
.wrheader .navbar .nav-link:focus {
  background: rgba(255,255,255,0.22) !important;
  color: #fff !important;
}

/* Badges in header */
.wrheader .header-badge {
  margin-left: 6px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25) !important;
}

/* Mobile toggler */
.wrheader .navbar-dark .navbar-toggler {
  border: 1px solid rgba(255,255,255,0.35) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  background: var(--topbar-pill) !important;
  box-shadow: inset 0 0 0 1px var(--topbar-border) !important;
}
.wrheader .navbar-dark .navbar-toggler-icon {
  filter: brightness(0) invert(1) !important;
}

/* Turn the toggler into a labeled Menu pill */
.wrheader .navbar-dark .navbar-toggler { position: relative !important; }
.wrheader .navbar-dark .navbar-toggler::after {
  content: none !important;
  color: #fff;
  font-weight: 700;
  margin-left: 8px;
}
.wrheader .navbar-dark .navbar-toggler .navbar-toggler-icon { margin-right: 0 !important; }

/* Place collapse as a dropdown sheet on mobile */
.wrheader .navbar .container { position: relative !important; }
.wrheader .navbar .collapse {
  transition: transform .22s ease, opacity .18s ease !important;
}
@media (max-width: 992px) {
  /* Header bar layout: brand left, toggler right */
  .wrheader .navbar .container { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
  .wrheader .logo-box { flex: 1 1 auto !important; min-width: 0 !important; }
  .wrheader .logo-box a span:first-child { font-size: 18px !important; letter-spacing: .4px !important; }
  .wrheader .logo-box a span:last-child { font-size: 11px !important; padding: 3px 8px !important; }

  /* Ensure floating header never overflows viewport width */
  .wrheader .navbar.fixed-top { left: 0 !important; right: 0 !important; transform: none !important; width: 100vw !important; max-width: 100vw !important; overflow-x: hidden !important; box-sizing: border-box !important; }
  .wrheader .navbar .container { max-width: 100% !important; padding-left: 8px !important; padding-right: 8px !important; }

  .wrheader .navbar .collapse {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 4px !important;
    left: 4px !important;
    width: auto !important;             /* fully responsive to edges */
    background: rgba(17, 24, 39, 0.85) !important; /* slate with blur */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(2,6,23,.35) !important;
    padding: 10px !important;
    transform-origin: top right !important;
    z-index: 2000 !important; /* ensure above header */
  }
  .wrheader .navbar .collapse:not(.show) { transform: translateY(-6px) scale(.98); opacity: 0; }
  .wrheader .navbar .collapse.show { transform: translateY(0) scale(1); opacity: 1; }

  /* Clean items inside dropdown */
  .wrheader .navbar .collapse .nav-link {
    display: block !important;
    margin: 4px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 10px !important;
  }
  .wrheader .navbar .collapse .nav-link:hover { background: rgba(255,255,255,0.12) !important; }

  /* Hide bulky images in mobile dropdown */
  .wrheader .navbar .collapse .nav-link img { display: none !important; }
  /* Show all original header items in dropdown */
  .wrheader .navbar .navbar-nav > li { display: block !important; }
  /* Hide non-language items from the top header bar on mobile (moved to page menu) */
  .wrheader .navbar .navbar-nav > li:not(.gtranslate) { display: none !important; }
}

/* Prevent accidental horizontal scroll globally within header */
.wrheader { overflow-x: hidden !important; }

/* Brand re-style: simpler, cleaner */
.wrheader .logo-box a span {
  background: none !important;
  -webkit-text-fill-color: initial !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.12) !important;
}
.wrheader .logo-box a span:first-child {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: .5px !important;
  position: relative !important;
}
.wrheader .logo-box a span:first-child::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 28px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--topbar-start), var(--topbar-end));
}
.wrheader .logo-box a span:last-child {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  margin-left: 10px !important;
}

/* Desktop alignment – keep links to the right with breathing room */
@media (min-width: 992px) {
  .wrheader .navbar .navbar-nav { gap: 8px !important; }
  .wrheader .navbar .nav-link { padding: 8px 14px !important; }
  /* Show ALL header items on desktop (WhatsApp, Messages, Logout, Profile, Language) */
  .wrheader .navbar .navbar-nav > li { display: inline-block !important; }
}

/* Google translate chip positioning (avoid header overlap) */
.gtranslation { top: 72px !important; right: 8px !important; max-width: 48vw !important; }
.gtranslation * { font-size: 11px !important; }

/* Optional dim overlay when menu open (modern browsers) */
.wrheader:has(.navbar .collapse.show)::after {
  content: '';
  position: fixed; inset: 0; z-index: 1049;
  background: rgba(2,6,23,0.45);
}

/* Container background and spacing */
.features.orderform#features, /* order1.php */
.features.orderform,
#features { /* order.php (logged-in) */
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
  padding: 2rem 0 !important;
  position: relative !important;
}

.features.orderform#features::before,
.features.orderform::before,
#features::before { 
  content: "" !important;
  position: absolute !important;
  width: 320px !important;
  height: 320px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.10) 0%, transparent 70%) !important;
  top: -120px !important;
  right: -80px !important;
  filter: blur(60px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.features.orderform .container, #features .container { position: relative !important; z-index: 1 !important; }

/* Header title */
.features.orderform .NewOrder__header, #features .NewOrder__header {
  text-align: center !important;
  margin-bottom: 2rem !important;
  position: relative !important;
  z-index: 0 !important;
}
.features.orderform .NewOrder__heading, #features .NewOrder__heading {
  font-size: 2rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, var(--ops-primary), var(--ops-accent)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: 0 !important; /* prevent odd spacing */
  line-height: 1.2 !important;
  text-transform: none !important;
  word-spacing: normal !important;
}
.features.orderform .NewOrder__subheading, #features .NewOrder__subheading {
  color: var(--ops-text-secondary) !important;
  font-weight: 600 !important;
  margin-top: .25rem !important;
  pointer-events: none !important; /* avoid intercepting clicks below */
}

/* Main form card */
.features.orderform .borderdottedleft, #features .borderdottedleft {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: var(--ops-radius-lg) !important;
  padding: 2rem !important;
  box-shadow: var(--ops-shadow-md) !important;
  border: 1px solid rgba(79,70,229,0.10) !important;
  position: relative !important;
  z-index: 1 !important;            /* ensure above header text */
  margin-top: 1rem !important;      /* add space to prevent overlap */
}

/* Step flag */
.features.orderform .rc-orderform__step-flag h6, #features .rc-orderform__step-flag h6 { 
  font-size: 0.95rem !important; 
  color: var(--ops-primary) !important; 
  letter-spacing: .2px !important;
}

/* Form layout */
.features.orderform .form-group, #features .form-group { margin-bottom: 1.25rem !important; }
.features.orderform .form-group > label,
#features .form-group > label,
.features.orderform label.col-lg-3,
#features label.col-lg-3,
.features.orderform label.col-sm-3,
#features label.col-sm-3 { 
  font-weight: 700 !important; 
  color: var(--ops-text-primary) !important; 
}

/* Inputs & selects */
.features.orderform .form-control, #features .form-control { 
  border: 2px solid #e2e8f0 !important; 
  border-radius: var(--ops-radius-sm) !important; 
  padding: .75rem 1rem !important; 
  box-shadow: none !important; 
  transition: all .25s ease !important; 
}
.features.orderform .form-control:focus, #features .form-control:focus { 
  border-color: var(--ops-primary) !important; 
  box-shadow: 0 0 0 3px rgba(79,70,229,.12) !important; 
}

.features.orderform select.form-control, #features select.form-control { 
  appearance: none !important; 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236d3eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  padding-right: 2.25rem !important;
}

/* Radio/button groups (APA/MLA, spacing, etc.) */
.features.orderform .opclick .btn-group .btn,
#features .opclick .btn-group .btn,
.features.orderform .btn-group.opclick .btn,
#features .btn-group.opclick .btn,
.features.orderform .btn.btn-default,
#features .btn.btn-default { 
  border: 2px solid #e2e8f0 !important; 
  border-radius: var(--ops-radius-sm) !important; 
  color: var(--ops-text-secondary) !important; 
  background: var(--ops-white) !important; 
  font-weight: 700 !important; 
  transition: all .2s ease !important; 
  pointer-events: auto !important;
  cursor: pointer !important;
}
.features.orderform .opclick .btn-group .btn:hover, #features .opclick .btn-group .btn:hover,
.features.orderform .btn-group.opclick .btn:hover, #features .btn-group.opclick .btn:hover { 
  border-color: var(--ops-primary) !important; 
  background: rgba(79,70,229,.06) !important; 
}
.features.orderform .opclick .btn-group .btn.active, 
#features .opclick .btn-group .btn.active, 
.features.orderform .btn-group.opclick .btn.active,
#features .btn-group.opclick .btn.active,
.features.orderform .btn.btn-default.active,
#features .btn.btn-default.active { 
  background: linear-gradient(135deg, var(--ops-primary), var(--ops-accent)) !important; 
  color: #fff !important; 
  border-color: var(--ops-primary) !important; 
  box-shadow: 0 6px 18px rgba(79,70,229,.25) !important; 
}

/* Number input +/- */
.features.orderform .input-group, #features .input-group { gap: .5rem !important; }
.features.orderform .input-group .btn-number, #features .input-group .btn-number { 
  min-width: 42px !important; 
  height: 42px !important; 
  border-radius: 10px !important; 
  border: 2px solid #e2e8f0 !important; 
  color: var(--ops-primary) !important; 
  transition: all .2s ease !important; 
}
.features.orderform .input-group .btn-number:hover:not(:disabled), #features .input-group .btn-number:hover:not(:disabled) { 
  border-color: var(--ops-primary) !important; 
  background: rgba(79,70,229,.06) !important; 
}
.features.orderform .input-group .btn-number:disabled, #features .input-group .btn-number:disabled { 
  opacity: .5 !important; cursor: not-allowed !important; 
}

/* Fallback icons for +/- (no dependency on Font Awesome) */
.features.orderform .input-group .btn-number[data-type='minus'] i,
#features .input-group .btn-number[data-type='minus'] i,
.features.orderform .input-group .btn-number[data-type='plus'] i,
#features .input-group .btn-number[data-type='plus'] i { display: none !important; }

.features.orderform .input-group .btn-number[data-type='minus']::before,
#features .input-group .btn-number[data-type='minus']::before { 
  content: '\2212'; /* Unicode minus */
  font-weight: 800; font-size: 18px; line-height: 1; color: var(--ops-primary);
}
.features.orderform .input-group .btn-number[data-type='plus']::before,
#features .input-group .btn-number[data-type='plus']::before { 
  content: '+'; 
  font-weight: 800; font-size: 18px; line-height: 1; color: var(--ops-primary);
}

/* File dropzone */
.features.orderform .dropzone, #features .dropzone { 
  background: #f8fafc !important; 
  border: 2px dashed rgba(79,70,229,.25) !important; 
  border-radius: 14px !important; 
  padding: 1.25rem !important; 
  transition: border-color .2s ease, background .2s ease !important; 
}
.features.orderform .dropzone:hover, #features .dropzone:hover { 
  background: #f1f5f9 !important; 
  border-color: var(--ops-primary) !important; 
}
.features.orderform .dropzone .dz-message p, #features .dropzone .dz-message p { 
  color: var(--ops-text-secondary) !important; 
  font-weight: 600 !important; 
}

/* Remove misaligned ribbon/flag blocks */
.features.orderform .rc-orderform__step-flag,
#features .rc-orderform__step-flag { display: none !important; }

/* Right summary column (guest and logged-in) */
.features.orderform .totalbox, /* wrapper */
.features.orderform .col-lg-3 .totalbox,
#features .totalbox,
#features .col-lg-3 .totalbox { 
  background: rgba(255,255,255,0.96) !important; 
  border: 1px solid #e5e7eb !important; 
  border-radius: 16px !important; 
  box-shadow: 0 10px 30px rgba(2,6,23,0.08) !important; 
  padding: 1.1rem 1rem !important; 
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.features.orderform .totalsumright, #features .totalsumright { 
  font-weight: 800 !important; 
  color: var(--ops-primary) !important; 
  text-align: right !important; 
}

/* Checkout buttons */
button.OrderformCheckoutInfotype,
.OrderformCheckoutInfotype { 
  display: inline-flex !important; 
  align-items: center !important; 
  justify-content: center !important; 
  gap: .5rem !important; 
  width: 100% !important; 
  padding: .9rem 1.25rem !important; 
  border-radius: 12px !important; 
  border: none !important; 
  background: linear-gradient(135deg, var(--ops-primary), var(--ops-accent)) !important; 
  color: #fff !important; 
  font-weight: 800 !important; 
  letter-spacing: .2px !important; 
  box-shadow: var(--ops-shadow-lg) !important; 
  transition: transform .12s ease, box-shadow .2s ease !important; 
}
.OrderformCheckoutInfotype:hover { 
  transform: translateY(-1px) !important; 
  box-shadow: 0 14px 32px rgba(79,70,229,.25) !important; 
}

/* Floating/Sticky behavior for order summary card on desktop */
@media (min-width: 992px) {
  #features .totalbox, .features.orderform .totalbox {
    position: sticky !important;
    top: 130px !important; /* sits below header */
    right: 0 !important; /* ensure no overflow to the right */
  }
}

/* Payment row styling */
.features.orderform .paymethod, #features .paymethod {
  margin-top: .75rem !important;
  border: 1px dashed rgba(109,62,234,0.2) !important;
  border-radius: 12px !important;
  padding: .75rem !important;
  background: #fafbff !important;
}
.features.orderform .payselect, #features .payselect { 
  font-weight: 700 !important; color: var(--ops-text-secondary) !important; margin-bottom: .5rem !important; 
}

/* Typography tweaks for summary lines */



/* Validation & alerts */
.features.orderform .alert-danger, #features .alert-danger { 
  background: #fef2f2 !important; 
  color: #991b1b !important; 
  border: none !important; 
  border-left: 4px solid var(--ops-danger) !important; 
  border-radius: 10px !important; 
}

/* Mobile responsiveness */
@media (max-width: 991.98px) {
  .features.orderform .borderdottedleft, #features .borderdottedleft { padding: 1.25rem !important; }
  .features.orderform .NewOrder__heading, #features .NewOrder__heading { font-size: 1.65rem !important; }
  .features.orderform .opclick .btn-group .btn, #features .opclick .btn-group .btn { min-width: calc(50% - .5rem) !important; }

  /* Make the summary card a bottom sheet on mobile */
  #features .totalbox, .features.orderform .totalbox {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(2,6,23,0.15) !important;
    z-index: 1040 !important;
    padding: 0.9rem 1rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure there is space at bottom for the sheet */
  #features .container { padding-bottom: 120px !important; }
}

@media (max-width: 575.98px) {
  .features.orderform, #features { padding: 1.25rem 0 !important; }
  .features.orderform .form-group > label,
  #features .form-group > label,
  .features.orderform label.col-sm-3,
  #features label.col-sm-3 { margin-bottom: .5rem !important; text-align: left !important; }
  .features.orderform .input-group .btn-number, #features .input-group .btn-number { min-width: 38px !important; height: 38px !important; }
}

/* ============================================
   CLEAN MODERN HEADER - PC & MOBILE
   ============================================ */

/* Google Translate - Compact style */
.gtranslation {
    position: fixed !important;
    top: 75px !important;
    right: 20px !important;
    z-index: 9999 !important;
    background: white !important;
    padding: 10px 15px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e5e7eb !important;
}

#google_translate_element {
    font-size: 11px !important;
}

#google_translate_element .goog-te-gadget {
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 11px !important;
}

#google_translate_element .goog-te-gadget-simple {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: #666 !important;
}

#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span {
    color: #4f46e5 !important;
    font-weight: 600 !important;
}

/* Hide Google branding */
.goog-te-banner-frame,
.goog-te-balloon-frame {
    display: none !important;
}

body {
    top: 0 !important;
    position: static !important;
}

/* Clean Modern Navigation Bar */
#mainNav {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    box-shadow: 0 2px 15px rgba(102, 126, 234, 0.12) !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(229, 231, 235, 0.8) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

#mainNav .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Logo/Brand Styling */
#mainNav .navbar-brand {
    font-size: 20px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-family: 'Segoe UI', sans-serif !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
}

#mainNav .navbar-brand:hover {
    opacity: 0.8 !important;
}

/* Navigation Links */
#mainNav .navbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#mainNav .nav-link {
    color: #1a1a1a !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

#mainNav .nav-link:hover {
    background: rgba(79, 70, 229, 0.08) !important;
    color: #4f46e5 !important;
}

/* Order Now Button */
#mainNav .btn-warning {
    background: linear-gradient(135deg, #06B6D4, #0891B2) !important;
    color: white !important;
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3) !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
}

#mainNav .btn-warning:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4) !important;
}

/* Mobile Menu Toggle */
#mainNav .navbar-toggler {
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #4f46e5 !important;
}

#mainNav .navbar-toggler:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

#mainNav .navbar-toggler .fa-bars {
    color: #4f46e5 !important;
    font-size: 18px !important;
}

/* Mobile Menu */
@media (max-width: 991px) {
    #mainNav .navbar-collapse {
        background: white !important;
        padding: 20px !important;
        border-radius: 15px !important;
        margin-top: 15px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    }

    #mainNav .navbar-nav {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    #mainNav .nav-item {
        width: 100% !important;
    }

    #mainNav .nav-link {
        width: 100% !important;
        text-align: left !important;
        padding: 12px 16px !important;
    }

    #mainNav .btn-warning {
        width: 100% !important;
        margin-top: 8px !important;
        text-align: center !important;
  }
}

/* Make floating header nearly edge-to-edge on small screens */
@media (max-width: 992px) {
  .wrheader .navbar.fixed-top {
    top: 8px !important;
    width: calc(100% - 8px) !important;   /* 4px side margins */
    border-radius: 16px !important;
    padding-left: 4px !important; padding-right: 4px !important;
  }
}

/* Add padding to body for fixed nav */
body {
    padding-top: 70px !important;
}

header.masthead {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ============================================
   COMPLETELY REDESIGNED CLIENT DASHBOARD
   ============================================ */

/* Modern Dashboard Body */
.wrbody {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    min-height: 100vh !important;
}

/* Modern Header */
.wrheader {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

.wrheader .navbar {
    padding: 12px 0 !important;
}

.wrheader .logo-box a {
    display: flex !important;
    align-items: center !important;
    height: 50px !important;
    text-decoration: none !important;
}

.wrheader .logo-box a span:first-child {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

.wrheader .logo-box a span:last-child {
    color: #06B6D4 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    margin-left: 6px !important;
}

/* Modern Sidebar */
.sidebar {
    background: white !important;
    border-radius: 16px !important;
    padding: 24px 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f1f5f9 !important;
    position: sticky !important;
    top: 90px !important;
    height: fit-content !important;
}

.side-order-btn a {
    display: block !important;
    background: linear-gradient(135deg, #06B6D4, #0891B2) !important;
    color: white !important;
    text-align: center !important;
    padding: 16px 20px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.3) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 24px !important;
}

.side-order-btn a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4) !important;
}

.side-order-btn img {
    width: 20px !important;
    margin-right: 8px !important;
    filter: brightness(0) invert(1) !important;
}

.sidebar-links {
    margin-bottom: 8px !important;
}

.sidebar-links a {
    display: block !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    background: transparent !important;
}

.sidebar-links a:hover {
    background: #f8fafc !important;
    transform: translateX(4px) !important;
}

.side-text {
    display: flex !important;
    align-items: center !important;
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.side-text img.icon-badge {
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
}

.side-badge {
    margin-left: auto !important;
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: white !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Main Content Area */
.features {
    background: transparent !important;
    padding: 24px !important;
}

/* Add top padding for fixed header */
.container > .row.bg-white {
    margin-top: 80px !important;
    background: transparent !important;
}

/* Hide marquee - outdated */
marquee {
    display: none !important;
}

/* Dashboard Container - GRID LAYOUT */
.dashboard-counts {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
    padding: 0 !important;
}

/* Modern Stat Cards - Complete Redesign */
.panels {
    padding: 0 !important;
}

.panel-box {
    background: white !important;
    border-radius: 20px !important;
    padding: 32px 28px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    border: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: visible !important;
    height: 100% !important;
}

/* Remove old top bar */
.panel-box::before {
    display: none !important;
}

.panel-box:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

.panel-box .title {
    position: relative !important;
    z-index: 2 !important;
}

.panel-box .title a {
    text-decoration: none !important;
    display: block !important;
}

/* Modern Panel Count */
.panel-count {
    font-size: 48px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #1a1a1a, #4f46e5) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 12px !important;
    font-family: 'Segoe UI', sans-serif !important;
    line-height: 1 !important;
}

.statustext {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Modern Floating Icon Badges */
.panel-icons {
    position: absolute !important;
    top: -12px !important;
    right: 24px !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.4s ease !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.panel-icons.pink {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%) !important;
}

.panel-icons.blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

.panel-icons.yellow {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
}

.panel-icons img {
    width: 28px !important;
    height: 28px !important;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
}

.panel-box:hover .panel-icons {
    transform: scale(1.15) rotate(-5deg) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
}

/* Dashboard Titles */
.dash-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 20px !important;
    font-family: 'Segoe UI', sans-serif !important;
    position: relative !important;
    padding-left: 16px !important;
}

.dash-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 24px !important;
    background: linear-gradient(180deg, #4f46e5, #7c3aed) !important;
    border-radius: 4px !important;
}

/* Modern Tables */
table.clients {
    background: white !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f1f5f9 !important;
}

table.clients thead {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
}

table.clients thead th {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 20px !important;
    border: none !important;
}

table.clients tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: all 0.2s ease !important;
}

table.clients tbody tr:hover {
    background: #f8fafc !important;
}

table.clients tbody td,
table.clients tbody th {
    padding: 16px 20px !important;
    font-size: 14px !important;
    color: #334155 !important;
    border: none !important;
}

table.clients tbody th a {
    color: #4f46e5 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

table.clients tbody th a:hover {
    text-decoration: underline !important;
}

table.clients tbody td a {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

table.clients tbody td a:hover {
    color: #4f46e5 !important;
}

/* Modern Buttons in Tables */
table.clients .btn {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: all 0.3s ease !important;
    margin: 2px !important;
}

table.clients .btn-info {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: white !important;
}

table.clients .btn-info:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4) !important;
}

table.clients .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}

table.clients .btn-danger:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

table.clients .btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

table.clients .btn-success:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

table.clients .btn-warning {
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    color: white !important;
}

table.clients .btn-warning:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
}

/* Modern Nav Pills/Tabs */
.nav-pills {
    background: white !important;
    padding: 8px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.nav-pills .nav-item {
    flex: 1 !important;
    min-width: 150px !important;
}

.nav-pills .nav-link {
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
}

.nav-pills .nav-link:hover {
    background: #f8fafc !important;
    color: #4f46e5 !important;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
}

/* Tab Content Spacing */
.tab-content {
    margin-top: 24px !important;
}

/* Complete Mobile Responsive Redesign */
@media (max-width: 991px) {
    /* Stack sidebar and content */
    .ops-sm-3.sidebar {
        margin-bottom: 24px !important;
    }

    .ops-sm-9.features {
        padding: 16px !important;
    }
}

@media (max-width: 768px) {
    /* Fixed header adjustments */
    .container > .row.bg-white {
        margin-top: 70px !important;
    }

    /* Sidebar - full width on mobile */
    .sidebar {
        position: static !important;
        margin-bottom: 24px !important;
    }

    /* Dashboard counts - single column */
    .dashboard-counts {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Panel cards mobile */
    .panel-box {
        padding: 28px 24px !important;
    }

    .panel-icons {
        top: -10px !important;
        right: 20px !important;
        width: 56px !important;
        height: 56px !important;
    }

    .panel-icons img {
        width: 24px !important;
        height: 24px !important;
    }

    .panel-count {
        font-size: 40px !important;
    }

    /* Titles */
    .dash-title {
        font-size: 19px !important;
    }

    /* Tables - horizontal scroll */
    table.clients {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Tabs - vertical stack */
    .nav-pills {
        flex-direction: column !important;
    }

    .nav-pills .nav-item {
        width: 100% !important;
        min-width: auto !important;
    }

    .nav-pills .nav-link {
        width: 100% !important;
        text-align: left !important;
    }

    /* Buttons - full width */
    table.clients .btn {
        display: block !important;
        width: 100% !important;
        margin: 4px 0 !important;
    }
}

@media (max-width: 480px) {
    /* Extra small screens */
    .panel-box {
        padding: 24px 20px !important;
    }

    .panel-count {
        font-size: 36px !important;
    }

    .statustext {
        font-size: 11px !important;
    }

    .dash-title {
        font-size: 17px !important;
    }

    table.clients thead th,
    table.clients tbody td,
    table.clients tbody th {
        padding: 12px 14px !important;
        font-size: 13px !important;
    }

    .features {
        padding: 12px !important;
    }
}

/* ============================================
   CLEAN MODERN LOGIN PAGE - REFERENCE DESIGN
   ============================================ */

/* Light gradient background */
section.download.features {
    padding: 100px 20px 40px !important;
    width: 100% !important;
    background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

/* Floating particles animation */
section.download.features::before,
section.download.features::after {
    content: '' !important;
    position: fixed !important;
    width: 4px !important;
    height: 4px !important;
    background: rgba(79, 70, 229, 0.3) !important;
    border-radius: 50% !important;
    animation: floatParticle 15s infinite !important;
    z-index: 0 !important;
}

section.download.features::before {
    top: 10% !important;
    left: 20% !important;
    animation-delay: 0s !important;
}

section.download.features::after {
    top: 60% !important;
    left: 80% !important;
    animation-delay: 2s !important;
}

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) !important;
        opacity: 0.3 !important;
    }
    50% {
        transform: translateY(-30px) rotate(180deg) !important;
        opacity: 0.6 !important;
    }
}

section.download .row {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
}

/* Clean Modern Login Box */
.loginbox {
    width: 100% !important;
    max-width: 400px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 25px !important;
    padding: 40px 30px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
}

.loginbox:hover {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Login Header with Icon */
.auth-block {
    text-align: center !important;
    margin-bottom: 35px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Add icon box before title */
.auth-block::before {
    content: '\f007' !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    width: 70px !important;
    height: 70px !important;
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    border-radius: 20px !important;
    margin: 0 auto 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.3) !important;
}

.auth-block hr {
    display: none !important;
}

/* Login Title - Dark with gradient */
h1.signin {
    font-size: 26px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
    background: linear-gradient(135deg, #1a1a1a, #4f46e5) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Add subtitle after title */
.auth-block::after {
    content: 'Login to access your account' !important;
    display: block !important;
    font-size: 14px !important;
    color: #666 !important;
    margin-top: 8px !important;
}

/* Modern Form Inputs */
.loginbox .form-group {
    margin-bottom: 20px !important;
}

.loginbox .col-form-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #444 !important;
    margin-bottom: 8px !important;
    display: block !important;
    text-shadow: none !important;
}

.loginbox .form-control {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s ease !important;
    color: #1a1a1a !important;
}

.loginbox .form-control::placeholder {
    color: #999 !important;
}

.loginbox .form-control:focus {
    border-color: #4f46e5 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
    background: white !important;
}

/* Clean Gradient Button */
button.OrderformCheckoutInfotype {
    width: 100% !important;
    padding: 16px !important;
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 20px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
}

button.OrderformCheckoutInfotype:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(79, 70, 229, 0.5) !important;
}

button.OrderformCheckoutInfotype:active {
    transform: translateY(0) !important;
}

/* Register Link Section */
.signbox {
    text-align: center !important;
    padding-top: 25px !important;
    border-top: 1px solid #e5e7eb !important;
    margin-top: 25px !important;
}

.signbox p {
    font-size: 14px !important;
    color: #666 !important;
}

.loginmeta {
    color: #4f46e5 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 5px !important;
    transition: all 0.3s ease !important;
    display: inline !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    text-shadow: none !important;
}

.loginmeta:hover {
    color: #7c3aed !important;
    text-decoration: underline !important;
    transform: none !important;
    box-shadow: none !important;
    background: none !important;
}

.loginmeta img {
    display: none !important;
}

.registermeta {
    color: #10B981 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-left: 5px !important;
    transition: all 0.3s ease !important;
    display: inline !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    text-shadow: none !important;
}

.registermeta:hover {
    color: #059669 !important;
    text-decoration: underline !important;
    transform: none !important;
    box-shadow: none !important;
    background: none !important;
}

.registermeta img {
    display: none !important;
}

/* Alert Styles */
.loginbox .alert {
    border-radius: 12px !important;
    border: none !important;
    padding: 1rem 1.25rem !important;
    margin-bottom: 1.5rem !important;
}

.loginbox .alert-danger {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-left: 4px solid #ef4444 !important;
}

.loginbox .alert-success {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border-left: 4px solid #10B981 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .loginbox {
        padding: 2rem 1.5rem !important;
        border-radius: 15px !important;
    }

    h1.signin {
        font-size: 24px !important;
    }

    .loginmeta, .registermeta {
        width: 100% !important;
        justify-content: center !important;
        margin: 0.75rem 0 !important;
    }

    .col-form-label {
        text-align: left !important;
        margin-bottom: 0.5rem !important;
    }

    button.OrderformCheckoutInfotype {
        width: 100% !important;
        padding: 1rem 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .loginbox {
        padding: 1.5rem 1rem !important;
    }

    h1.signin {
        font-size: 22px !important;
    }

    button.OrderformCheckoutInfotype {
        font-size: 15px !important;
        padding: 0.875rem 1.25rem !important;
    }
}

/* Ensure the right-side pricing column never clips on the right */
#features .price-box .ops-sm-5,
.features.orderform .price-box .ops-sm-5 {
  padding-right: 10px !important;
  box-sizing: border-box !important;
}

/* Safety: price calculation wrapper fully within column */
#features .pricecalculate,
.features.orderform .pricecalculate {
  max-width: 100% !important;
  overflow: visible !important;
}



/* Force summary card as bottom bar on all viewports */
#features .totalbox, .features.orderform .totalbox {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -8px 24px rgba(2,6,23,0.15) !important;
  z-index: 1040 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

/* Give page content breathing room above the bottom bar */
#features .container { padding-bottom: 140px !important; }

/* Summary card placement overrides */
/* Reset desktop view to inline card and avoid clipping */
@media (min-width: 992px) {
  /* Desktop: keep card inline and neatly aligned inside right column */
  #features .col-lg-3, .features.orderform .col-lg-3 {
    display: flex !important;
    justify-content: flex-end !important;
  }
  #features .totalbox, .features.orderform .totalbox {
    position: static !important; /* not sticky, not fixed */
    bottom: auto !important; left: auto !important; right: auto !important;
    width: 100% !important;      /* fill the column */
    max-width: 100% !important;
    border-radius: 14px !important;
    box-shadow: var(--ops-shadow-sm) !important;
    margin: 12px 0 0 0 !important;
    padding: 12px !important;    /* slightly tighter padding */
    z-index: auto !important; display: block !important;
    box-sizing: border-box !important;
    min-height: initial !important;
    background: #fff !important;
  }
  /* Stack inner sections vertically to fit the thin card */
  
  /* Ensure inner columns take full width inside the thin card */
    }
  /* Typography tuning for compact width */
  
  
  /* Push payment row toward bottom to use the tall space gracefully */
  #features .paymethod, .features.orderform .paymethod {
    margin-top: auto !important;
  }
  #features .container { padding-bottom: 0 !important; overflow: visible !important; }
}

/* Mobile: make it a bottom sheet that is always visible */
@media (max-width: 991.98px) {
  #features .totalbox, .features.orderform .totalbox {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(2,6,23,0.15) !important;
    z-index: 1040 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    display: block !important;
  }
  #features .container { padding-bottom: 160px !important; }
}

/* Hamburger icon: use a clean 3-line SVG for visibility */
.wrheader .navbar-dark .navbar-toggler-icon {
  width: 1.35rem !important; height: 1.1rem !important;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
}

/* Mobile toggler pill aligned inside header corner */
@media (max-width: 992px) {
  .wrheader .navbar-dark .navbar-toggler {
    position: absolute !important;
    right: 10px !important; top: 8px !important;
    width: 44px !important; height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    background: rgba(255,255,255,0.12) !important;
    z-index: 1060 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
}
/* FINAL placement rule: static summary card at bottom (both PC & mobile) */
#features .totalbox, .features.orderform .totalbox {
  position: static !important;
  left: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important; max-width: 100% !important;
  margin: 16px 0 0 0 !important; padding: 12px !important;
  border-radius: 14px !important; box-shadow: var(--ops-shadow-sm) !important;
  z-index: auto !important;
}
/* Remove artificial bottom padding now that the bar is static */
#features .container { padding-bottom: 0 !important; }

/* Mobile header: truly edge-to-edge + crisp hamburger */
@media (max-width: 992px) {
  .wrheader > .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
  .wrheader .navbar.fixed-top {
    top: 0 !important; left: 0 !important; right: 0 !important;
    transform: none !important; width: 100% !important; max-width: 100% !important;
    border-radius: 0 !important; margin: 0 !important;
  }
  .wrheader .navbar .container { max-width: 100% !important; padding: 8px 10px !important; }
  .wrheader .navbar-dark .navbar-toggler { right: 10px !important; top: 8px !important; }
}

/* Remove the old right-column info card so only the bottom summary remains */
#features .col-lg-3 .pricecalculate,
.features.orderform .col-lg-3 .pricecalculate {
  display: none !important;
}


/* Center the bottom summary card and give it the original slim look */
#features .bottom-summary { display: flex; justify-content: center; }
#features .summary-card { width: 100%; max-width: 360px; }
#features .summary-card .totalbox { background: #fff !important; }
#features .summary-card .paymethod { margin-top: 12px !important; }


/* --- FINAL SPACING TUNING: remove global white gap under header --- */
#features, .features.orderform { padding-top: 0.75rem !important; }
.wrbody { padding-top: 80px !important; }
@media (max-width: 992px) { .wrbody { padding-top: 88px !important; } }


/* Remove white gap under header completely */
#features, .features.orderform { padding-top: 0 !important; margin-top: 0 !important; }
.wrbody { padding-top: 64px !important; }
@media (max-width: 992px) { .wrbody { padding-top: 64px !important; } }

/* HARD OVERRIDE: remove any gap under the header on all pages */
.wrheader .navbar.fixed-top { top: 0 !important; margin: 0 !important; border-radius: 0 !important; }
#features, .features.orderform { padding-top: 0 !important; margin-top: 0 !important; }
#features .container { padding-top: 0 !important; margin-top: 0 !important; }
#features .container > *:first-child { margin-top: 0 !important; }
#features .NewOrder__header { margin-top: 0 !important; }
/* Keep content visible below fixed header but minimal */
.wrbody { padding-top: 56px !important; }
@media (max-width: 992px) { .wrbody { padding-top: 56px !important; } }