:root {
  --rz-header-height: 76px;
  --rz-orange: #F96D00;
  --rz-dark-bg: #0e202f;
  --rz-menu-bg: #1a1d26;
  --rz-text-primary: #ffffff;
  --rz-text-secondary: #cfcfcf;
}

/* =========================
   Rackzar Fixed Header
   ========================= */
.rz-header-wrap {
  width: 100%;
  height: var(--rz-header-height);
  background: var(--rz-dark-bg);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  font-family: "Montserrat", sans-serif;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.rz-container {
  max-width: 1320px;
  height: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.rz-header-wrap .rz-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  z-index: 10;
}

.rz-header-wrap .rz-logo img {
  height: 42px;
  width: auto;
  display: block;
}

.rz-header-wrap .rz-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 1 1 auto;
}

.rz-header-wrap .rz-nav-item {
  position: relative;
}

/* Main navigation links with SVG icons */
.rz-header-wrap .rz-nav-link {
  color: var(--rz-text-primary) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 16px !important;
  transition: color 0.2s !important;
  white-space: nowrap;
}

.rz-header-wrap .rz-nav-link svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.rz-header-wrap .rz-nav-link:hover {
  color: var(--rz-orange) !important;
}

.rz-header-wrap .rz-nav-link:hover svg path {
  stroke: var(--rz-orange);
}

.rz-header-wrap .rz-caret {
  font-size: 10px;
  transition: transform 0.2s;
  margin-left: -4px;
}

.rz-header-wrap .rz-nav-item:hover .rz-caret {
  transform: rotate(180deg);
}

/* Login/CTA Button - Yellow gradient like main site */
.rz-header-wrap .rz-cta {
  background: linear-gradient(135deg, #ffc107, #ff9800) !important;
  color: #000000 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  transition: all 0.2s !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.rz-header-wrap .rz-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

.rz-header-wrap .rz-cta i {
  font-size: 13px;
}

/* Dropdown Menu - Standard */
.rz-header-wrap .rz-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;
  background: var(--rz-menu-bg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  min-width: 280px;
  padding: 20px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 999999;
}

.rz-header-wrap .rz-nav-item:hover > .rz-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.rz-header-wrap .rz-dropdown-menu a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 28px !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: all 0.2s !important;
}

.rz-header-wrap .rz-dropdown-menu a i {
  color: #ffffff !important;
  font-size: 14px !important;
  width: 20px;
}

.rz-header-wrap .rz-dropdown-menu a:hover {
  background: rgba(249, 109, 0, 0.1) !important;
  color: var(--rz-orange) !important;
  padding-left: 32px !important;
}

.rz-header-wrap .rz-dropdown-menu a:hover i {
  color: var(--rz-orange) !important;
}

/* Mega Menu */
.rz-header-wrap .rz-mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  margin-top: 12px;
  background: var(--rz-menu-bg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999999;
  min-width: 850px;
  max-width: 1000px;
}

.rz-header-wrap .rz-nav-item:hover > .rz-mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.rz-header-wrap .rz-mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  padding: 40px 48px;
}

.rz-header-wrap .rz-mega-col {
  border-right: none;
  padding-right: 0;
}

.rz-header-wrap .rz-mega-col:last-child {
  border-right: none;
  padding-right: 0;
}

/* Mega menu header with icon */
.rz-header-wrap .rz-mega-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.rz-header-wrap .rz-mega-header svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
}

.rz-header-wrap .rz-mega-header svg path {
  stroke: #ffffff !important;
}

.rz-header-wrap .rz-mega-header h6 {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rz-header-wrap .rz-mega-col a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: all 0.2s !important;
}

.rz-header-wrap .rz-mega-col a i {
  color: #ffffff !important;
  font-size: 14px !important;
  width: 18px;
  flex-shrink: 0;
}

.rz-header-wrap .rz-mega-col a:hover {
  color: var(--rz-orange) !important;
  padding-left: 10px !important;
}

.rz-header-wrap .rz-mega-col a:hover i {
  color: var(--rz-orange) !important;
}

/* Menu dividers */
.rz-header-wrap .rz-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 10px 0;
}

/* Mobile Toggle */
.rz-header-wrap .rz-mobile-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.rz-header-wrap .rz-mobile-toggle span {
  width: 24px;
  height: 2px;
  background: #ffffff;
  display: block;
  margin: 5px 0;
  transition: all 0.3s;
}

.rz-header-wrap .rz-mobile-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}

.rz-header-wrap .rz-mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}

.rz-header-wrap .rz-mobile-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile Menu */
.rz-mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99998;
  opacity: 0;
  transition: opacity 0.3s;
}

.rz-mobile-overlay.active {
  display: block;
  opacity: 1;
}

.rz-mobile-menu {
  position: fixed;
  top: var(--rz-header-height);
  right: -320px;
  width: 300px;
  height: calc(100vh - var(--rz-header-height));
  background: var(--rz-dark-bg);
  padding: 0;
  overflow-y: auto;
  transition: right 0.3s ease;
  z-index: 99999;
  box-shadow: -4px 0 20px rgba(0,0,0,0.3);
}

.rz-mobile-menu.active {
  right: 0;
}

.rz-mobile-menu-header {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.rz-mobile-menu-header h3 {
  color: var(--rz-orange);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.rz-mobile-section {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.rz-mobile-section h4 {
  color: var(--rz-orange);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.rz-mobile-menu a,
.rz-mobile-section a {
  display: block !important;
  padding: 12px 20px !important;
  color: var(--rz-text-secondary) !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  transition: all 0.2s !important;
}

.rz-mobile-menu a:hover,
.rz-mobile-section a:hover {
  color: var(--rz-orange) !important;
  padding-left: 24px !important;
  background: rgba(249, 109, 0, 0.1) !important;
}

.rz-mobile-menu .rz-mobile-cta {
  margin: 20px !important;
  padding: 14px 20px !important;
  background: linear-gradient(135deg, #ffc107, #ff9800) !important;
  color: #000000 !important;
  border-radius: 8px !important;
  text-align: center !important;
  font-weight: 700 !important;
}

.rz-mobile-menu .rz-mobile-cta:hover {
  padding-left: 20px !important;
  transform: translateY(-2px);
}

.rz-mobile-footer {
  padding: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: auto;
}

.rz-mobile-footer a {
  border-bottom: none !important;
}

.rz-mobile-footer p {
  color: var(--rz-text-secondary);
  font-size: 14px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
}

.rz-mobile-footer i {
  color: var(--rz-orange);
}

/* Push Lagom navigation below Rackzar header */
body.lagom .app-nav,
body.lagom #header {
  top: var(--rz-header-height) !important;
}

/* Hide only the logo in secondary header, keep the nav items visible */
.app-nav-header .logo {
  display: none !important;
}

/* Keep the secondary navigation visible */
.app-nav-header {
  display: block !important;
}

.app-nav-header .top-nav {
  display: flex !important;
}

/* Hide the logo in condensed layout since we have our own */
.lagom-layout-condensed .app-nav-menu .logo, 
.lagom-layout-condensed .app-nav-menu .logo > img {
  display: none !important;
}

/* Adjust main menu to account for Rackzar header */
.app-nav {
  top: var(--rz-header-height) !important;
}
/* Main header padding adjustment - account for both Rackzar header (76px) + spacing */
body.lagom .main-header {
  padding-top: 90px !important;
}


/* Header Responsive */
@media (max-width: 991px) {
  .rz-header-wrap .rz-nav { 
    display: none !important; 
  }
  
  .rz-header-wrap .rz-mobile-toggle { 
    display: inline-block !important; 
  }
  
  .rz-container {
    padding: 0 20px;
  }
}

@media (max-width: 575px) {
  .rz-container {
    padding: 0 16px;
  }
  
  .rz-header-wrap .rz-logo img {
    height: 36px;
  }
}

/* =========================
   Rackzar Footer
   ========================= */
.rz-footer-full-bg {
  background: #0e202f;
  width: 100%;
}

/* Footer container and content */
.rz-footer {
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 40px 30px;
  width: 100%;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.6;
}

.rz-footer h5 {
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 15px;
  color: #F96D00;
  display: inline-block;
}

.rz-footer ul.list-unstyled li {
  margin-bottom: 8px;
}

.rz-footer ul.list-unstyled li a {
  color: #cfcfcf;
  font-size: 12.8px;
  text-decoration: none;
}

.rz-footer ul.list-unstyled li a:hover {
  color: #f96d00;
}

.rz-footer-brand {
  grid-column: span 2;
}

.rz-footer-logo {
  max-width: 220px;
  margin-bottom: 15px;
}

.rz-footer-brand p {
  font-size: 14px;
  line-height: 1.6;
  color: #cfcfcf;
}

.rz-footer-contact {
  margin-top: 15px;
}

/* Social icons */
.rz-social-icons {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.rz-social-icons a svg {
  width: 24px;
  height: 24px;
  fill: #cfcfcf;
  transition: fill 0.3s;
}

.rz-social-icons a:hover svg {
  fill: #f96d00;
}

/* Bottom bar */
.rz-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 50px;
  padding: 20px 0;
  background: #0e202f;
}

.rz-footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

.rz-footer-bottom .rz-copyright {
  font-size: 13px;
  color: #cfcfcf;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  max-width: none !important;
  width: auto !important;
}

.rz-footer-bottom .rz-copyright img {
  max-width: 40px;
}

.rz-footer-bottom .rz-payment-icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 35px;
  flex: 0 1 auto;
  margin-left: auto;
  max-width: none !important;
  width: auto !important;
  text-align: right !important;
}

.rz-footer-bottom .rz-payment-icons img {
  height: 32px;
}

/* Wider footer container + gutters */
.rz-footer .container,
.rz-footer-bottom .container {
  max-width: 1400px !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

.rz-footer-grid {
  --bs-gutter-x: 60px !important;
  --bs-gutter-y: 40px !important;
}

/* Footer Responsiveness */
@media (max-width: 992px) {
  .rz-footer-brand {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .rz-footer .container,
  .rz-footer-bottom .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .rz-footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .rz-footer-bottom .rz-copyright {
    max-width: 100% !important;
  }

  .rz-footer-bottom .rz-payment-icons {
    justify-content: center;
    margin-top: 15px;
    margin-left: 0;
    max-width: 100% !important;
  }
}

@media (max-width: 575px) {
  .rz-footer .container,
  .rz-footer-bottom .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =========================
   Force Boxed/Centered Layout for Main Lagom Content
   ========================= */
body.lagom .main-grid,
body.lagom .row,
body.lagom .client-home-panels {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Exact replication of main site footer contact-details and logo */
.contact-details {
  max-width: 280px;
}

.contact-details .logo-footer {
  width: 150px !important;
  margin-bottom: 8px !important;
}

/* Ensure description text matches logo width */
.contact-details p {
  color: #cfcfcf !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
  max-width: 190px !important;
}

.contact-details p strong {
  color: #ffffff !important;
}
/* Remove excessive bottom padding from main-body */
body.lagom .main-body {
  padding-bottom: 0 !important;
}

/* Ensure footer sits flush at bottom */
body.lagom .app-main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Keep top padding only for content spacing */
body.lagom .main-body {
  padding-top: var(--main-body-padding-v) !important;
}
/* =========================
   Order Page Fixes
   ========================= */

/* Reset positioning for order pages */
body.app-main-order .app-main,
body.app-main-order .app-nav {
  position: relative !important;
  margin-top: 0 !important;
}

/* Ensure order form displays above fixed header */
#lagom-one-step-order {
  position: relative !important;
  z-index: 1 !important;
}

/* Fix order loader z-index */
#one-page-order-init-loader {
  z-index: 100000 !important;
}

/* Reduce header z-index on order pages to prevent conflicts */
body[class*="page-cart"] .rz-header-wrap,
body[class*="page-order"] .rz-header-wrap,
body.app-main-order .rz-header-wrap {
  z-index: 9999 !important;
}

/* Ensure order content is not pushed down */
body.app-main-order .main-body {
  padding-top: 0 !important;
}
/* Override main-grid padding-bottom */
body.lagom .main-grid {
  padding-bottom: 150px !important;
}

/* One class to override font for title AND description in a menu item */
.menu-font-override {
    /* Override the variables Lagom uses for large text (title) */
    --font-size-lg: 14px !important;          /* Adjust this for the main title size */
    --font-weight-medium: 500 !important;     /* Adjust this for the main title weight */
    
    /* Additional fallback for any base weight usage */
    --font-weight-base: 600 !important;
}

/* Ensure the description text also gets the override */
.menu-font-override .menu-item-desc {
    font-size: 11px !important;               /* Adjust this separately for the description */
    font-weight: 300 !important;              /* Adjust this for description weight (usually lighter) */
    
    /* Or, if you want description to match title exactly, comment out above and use: */
    /* font-size: var(--font-size-lg) !important; */
    /* font-weight: var(--font-weight-medium) !important; */
}

/* Ultimate global force for dropdown/mega menu max height = exactly 860px */
.app-nav-menu .dropdown-menu,
.dropdown-mega .dropdown-menu,
.lagom-layout-top .app-nav-menu .menu > li .dropdown-menu,
.lagom-layout-top .app-nav-menu .menu > li.dropdown-mega .dropdown-menu,
.lagom:not(.lagom-layout-left).has-scroll .dropdown-menu:not(.dropdown-list) {
    max-height: 760px !important;
    overflow-y: auto !important;
}

/* Safety net for any other dropdown containers */
.dropdown-menu,
.dropdown-mega {
    max-height: 760px !important;
    overflow-y: auto !important;
}

/* One class to add left padding to a menu item (title and description) */
.menu-pad-override .menu-item-content {
    padding-left: 80px !important;
}

/* Optional: If you also want to adjust the link itself or ensure dropdown sub-items get similar treatment */
.menu-pad-override > a {
    padding-left: 80px !important;
}

/* If the item has a description, make sure it aligns properly */
.menu-pad-override .menu-item-desc {
    padding-left: 80px !important;  /* or remove if you want desc to align with title */
}

/* ============================================
   BANDWIDTH USAGE CUSTOMIZATION - UPDATED
   ============================================ */

/* Hide disk usage completely */
.disk-usage-hidden {
    display: none !important;
}

/* Make bandwidth section full width and centered */
.bandwidth-usage-enhanced {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Custom bandwidth display styling - REDUCED PADDING */
.bandwidth-display-custom {
    padding: 20px 20px;  /* Changed from 30px to 20px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Bandwidth label */
.bandwidth-label {
    color: #cfcfcf;
    font-size: 14px;
    margin-bottom: 15px;  /* Reduced from 20px to 15px */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    text-align: center;
}

/* Container for icon and text - VERTICAL STACK */
.bandwidth-value-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;  /* Reduced from 15px to 10px */
    width: 100%;
}

/* Font Awesome icon styling - appears above text */
.bandwidth-icon {
    font-size: 42px;  /* Reduced from 48px to 42px */
    color: #F96D00;
    flex-shrink: 0;
    margin-bottom: 5px;  /* Reduced from 10px to 5px */
}

/* Text wrapper - centered */
.bandwidth-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Main bandwidth value (H4) */
.bandwidth-value {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    text-align: center;
}

/* Subtitle below value - centered */
.bandwidth-subtitle {
    color: #cfcfcf;
    font-size: 15px;
    margin-top: 6px;  /* Reduced from 8px to 6px */
    text-align: center;
}

/* Ensure both cards have equal height */
.product-details .row-eq-height > div {
    display: flex;
}

.product-details .panel,
.product-details .product-icon {
    height: 100%;
}

/* Add consistent spacing after product details */
.product-details {
    margin-bottom: 30px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bandwidth-value {
        font-size: 20px;
    }
    
    .bandwidth-icon {
        font-size: 36px;
    }
}
/* Ensure spacing after product details row */
.product-details .row {
    margin-bottom: 30px !important;
}

/* Or target the bandwidth panel specifically */
.panel-form.cpanel-usage-stats {
    margin-bottom: 30px !important;
}
/* ============================================
   BANDWIDTH USAGE - LIGHT/DARK MODE SUPPORT
   ============================================ */

/* Default (Dark Mode) - White text */
html.lagom-dark-mode .bandwidth-value {
    color: #ffffff !important;
}

html.lagom-dark-mode .bandwidth-subtitle,
html.lagom-dark-mode .bandwidth-label {
    color: #8b92a7 !important;
}

/* Light Mode - Dark text (when lagom-dark-mode class is removed) */
html:not(.lagom-dark-mode) .bandwidth-value {
    color: #2c3e50 !important;  /* Dark text for light backgrounds */
}

html:not(.lagom-dark-mode) .bandwidth-subtitle,
html:not(.lagom-dark-mode) .bandwidth-label {
    color: #6c757d !important;  /* Medium gray for light mode */
}

/* Icon stays orange in both modes */
.bandwidth-icon {
    font-size: 42px;
    color: #F96D00 !important;  /* Orange in both modes */
    flex-shrink: 0;
    margin-bottom: 5px;
}
/* ============================================
   SVG ICON COLOR OVERLAY - panel-icon--icon ONLY
   ============================================ */

/* Add smooth transition */
.panel-icon.panel-icon--icon img {
    transition: filter 0.3s ease;
}

/* Dark Mode - White overlay on SVG */
html.lagom-dark-mode .panel-icon.panel-icon--icon img {
    filter: brightness(0) invert(1) !important;
}

/* Light Mode - Original colors */
html:not(.lagom-dark-mode) .panel-icon.panel-icon--icon img {
    filter: none !important;
}

/* Change Cart Summary to red/text */
.app-main-order .summary-list .list-item .item-name span {
color: #de6820;
}
}
.package-body {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
}
.package-content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
.package-features {
position: relative;
padding: 0;
margin-bottom: 0!important;
list-style: none;
flex: 1 0 auto;
font-size: var(--package-desc-font-size);
line-height: var(--package-desc-line-height);
font-weight: var(--package-desc-font-weight);
}
.package-features > li {
display: flex;
justify-content: space-between;
font-size: 14px;
text-align: right;
position: relative;
padding: 4px 0;
color: var(--text-body-color);
}
.package-features > li > span {
text-align: left;
flex: 1;
padding-right: 10px;
}
.package-features > li > strong {
text-align: right;
flex: 1;
}
/* Base style for the icon */
/* Style for Unicode check mark */
.check-mark {
display: inline-block;
color: black; /* Set the color of the check mark */
font-size: 1.2em; /* Adjust size as needed */
vertical-align: middle; /* Ensures alignment with text */
}
.premium-divider1 {
max-width: 210px;
display: flex;
align-items: center;
position: relative;
}
.premium-divider1 {
margin: 0 auto;
}
.premium-divider1:after,.premium-divider1:before {
content: "";
display: flex;
height: 1px;
width: 100%;
background: linear-gradient(270deg,rgba(16,98,254,0),#ed6307 20.31%,#f96d00 80.73%,rgba(16,98,254,0));
}
.premium-divider1 > span {
white-space: nowrap;
padding: 4px;
display: inline-flex;
justify-content: center;
align-items: center;
color: var(--brand-primary);
}
.cf-turnstile {
    height: 65px;
    margin-bottom: 12px;
}
.register-page .form-actions{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.page-contact .form-actions{
    flex-direction: column;
}
.page-supportticketsubmit-steptwo.lagom-not-portal .form-actions{
    display: block;
}

/* Strong override for the QR Payfast button */
.payment-form input.qr-button[type="submit"] {
    background: linear-gradient(
        135deg,
        var(--rackzar-orange-dark),
        var(--rackzar-orange-bright)
    ) !important;

    border: none !important;
    border-radius: 12px !important;
    color: var(--white) !important;

    padding: 16px 32px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.9rem !important;

    width: 100% !important;
    min-height: var(--ui-height-base) !important;

    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;

    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Hover */
.payment-form input.qr-button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 35px rgba(237, 99, 7, 0.4) !important;
    color: var(--white) !important;
}
:root {
    --rackzar-orange-dark: #d65c00;
    --rackzar-orange-bright: #F96D00;
    --white: #ffffff;
}

.graphic-item-sm {
    width: 48px !important;
    height: 48px !important;
}

/* ============================================
   PRO RATA INFO BOX - Light & Dark Mode
   ============================================ */

/* Light Mode (Default) */
.prorata-info-box {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-left: 3px solid #F96D00;
    border-radius: 4px;
    font-size: 12px;
    color: #0e202f;
    text-align: left;
}

.prorata-info-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.prorata-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    background-color: #F96D00;
    color: #ffffff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    font-family: Arial, sans-serif;
    margin-top: 9px;
}

.prorata-title {
    color: #F96D00;
    font-weight: bold;
    margin-bottom: 4px;
}

.prorata-description {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
}

/* Dark Mode Overrides */
.lagom-dark-mode .prorata-info-box {
    background: #1a2332;
    border-left-color: #F96D00;
    color: #ffffff;
}

.lagom-dark-mode .prorata-description {
    color: #b8c5d6;
}
/* ============================================
   DOMAIN SEARCH - Complete Dark Mode Fix
   ============================================ */

/* Domain search input field */
.lagom-dark-mode .search-box-primary .form-control,
.lagom-dark-mode .box-search-domain .form-control,
.lagom-dark-mode #domainName {
    color: #ffffff !important;
    background-color: #1a2332 !important;
    border-color: #2d3748 !important;
}

/* Placeholder text */
.lagom-dark-mode .search-box-primary .form-control::placeholder,
.lagom-dark-mode .box-search-domain .form-control::placeholder,
.lagom-dark-mode #domainName::placeholder {
    color: #7a8a9e !important;
    opacity: 1;
}

/* TLD Dropdown wrapper and select */
.lagom-dark-mode .tld-wrapper,
.lagom-dark-mode .tld-select,
.lagom-dark-mode .search-dropdown,
.lagom-dark-mode .dropdown.search-dropdown {
    background-color: #1a2332 !important;
    border-color: #2d3748 !important;
}

/* TLD select domain text (the .co.za text) */
.lagom-dark-mode .tld-select-domain,
.lagom-dark-mode .tld-select .tld-select-domain {
    color: #ffffff !important;
}

/* Dropdown options/items */
.lagom-dark-mode .search-dropdown .dropdown-menu,
.lagom-dark-mode .tld-wrapper .dropdown-menu {
    background-color: #1a2332 !important;
    border-color: #2d3748 !important;
}

.lagom-dark-mode .search-dropdown .dropdown-menu li,
.lagom-dark-mode .tld-wrapper .dropdown-menu li,
.lagom-dark-mode .search-dropdown .dropdown-menu li a,
.lagom-dark-mode .tld-wrapper .dropdown-menu li a {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Dropdown hover state */
.lagom-dark-mode .search-dropdown .dropdown-menu li:hover,
.lagom-dark-mode .tld-wrapper .dropdown-menu li:hover,
.lagom-dark-mode .search-dropdown .dropdown-menu li a:hover,
.lagom-dark-mode .tld-wrapper .dropdown-menu li a:hover {
    background-color: #2d3748 !important;
    color: #F96D00 !important;
}

/* Search group combined (panel-choose-domain) */
.lagom-dark-mode .search-group-combined,
.lagom-dark-mode .panel-choose-domain,
.lagom-dark-mode .panel-choose-domain--subdomain {
    background-color: #1a2332 !important;
}

/* Any text inside the search group */
.lagom-dark-mode .search-group-combined *,
.lagom-dark-mode .panel-choose-domain * {
    color: #ffffff !important;
}

/* Search field in the combined group */
.lagom-dark-mode .search-group-combined .search-field input,
.lagom-dark-mode .panel-choose-domain .search-field input {
    color: #ffffff !important;
    background-color: #1a2332 !important;
    border-color: #2d3748 !important;
}
/* ============================================
   TLD Dropdown Search Field - Dark Mode Fix
   ============================================ */

/* Dropdown header (contains the search input) */
.lagom-dark-mode .dropdown-menu-search .dropdown-header,
.lagom-dark-mode .dropdown-menu .dropdown-header {
    background-color: #2d3748 !important;
    padding: 0 !important;
}

/* Search input inside dropdown-header */
.lagom-dark-mode .dropdown-header input[type="text"],
.lagom-dark-mode .dropdown-header .form-control,
.lagom-dark-mode .dropdown-menu-search input[type="text"],
.lagom-dark-mode .dropdown-menu-search .form-control {
    color: #ffffff !important;
    background-color: #2d3748 !important;
    border-color: #3d4a5c !important;
}

/* Placeholder text in dropdown search */
.lagom-dark-mode .dropdown-header input[type="text"]::placeholder,
.lagom-dark-mode .dropdown-header .form-control::placeholder,
.lagom-dark-mode .dropdown-menu-search input::placeholder {
    color: #9ca3af !important;
    opacity: 1;
}

/* Focus state */
.lagom-dark-mode .dropdown-header input[type="text"]:focus,
.lagom-dark-mode .dropdown-header .form-control:focus,
.lagom-dark-mode .dropdown-menu-search input:focus {
    background-color: #3d4a5c !important;
    border-color: #F96D00 !important;
    color: #ffffff !important;
    outline: none !important;
}

/* Input group inside dropdown-header */
.lagom-dark-mode .dropdown-header .input-group {
    background-color: #2d3748 !important;
}

/* ============================================
   CART SUMMARY LOGO - Dark Mode Switching
   ============================================ */

.cart-summary-logo {
    text-align: center;
    padding: 15px 0 10px;
}

.cart-logo-img {
    max-width: 140px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Dark mode - swap to inverse logo */
.lagom-dark-mode .cart-logo-img {
    content: url('/templates/lagom2/assets/img/logo/Rackzar_Logo_Inverse_Medium.svg');
}

/* ============================================
   SOLUTEDNS - Add/Edit Record Modal Fix
   ============================================ */
.bootstrap #dialog_addRecord .modal-dialog,
.bootstrap #dialog_editRecord .modal-dialog {
    width: 860px !important;
    max-width: 92vw !important;
}

/* SoluteDNS modal-lg fix - Lagom uses .modal-lg .modal-dialog but SoluteDNS puts both on same element */
.modal-dialog.modal-lg {
    width: 860px !important;
    max-width: 92vw !important;
}