/* ============================================================
   HostGuru Africa — Store / Cart Overrides (custom-store.css)
   Applies to all WHMCS store pages: product listing, order form,
   and product landing pages (landing-page.*)
   ============================================================ */

/* ── Typography base ─────────────────────────────────────────── */
h1, h2, h3, h4 { font-weight: 600 !important; }
h5, h6         { font-weight: 500 !important; }

/* ── Store product listing page (standard_cart template)
      The plan grid at /store/web-hosting
   ═══════════════════════════════════════════════════════════ */

/* Sidebar category navigation */
#order-standard_cart .cart-sidebar .list-group-item {
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  border-color: #e2e8f0;
  padding: 10px 16px;
  transition: all .15s ease;
  border-left: 3px solid transparent;
}
#order-standard_cart .cart-sidebar .list-group-item:hover {
  background-color: #fff7ed !important;
  color: #f57200 !important;
  border-left-color: #f57200;
  text-decoration: none;
}
#order-standard_cart .cart-sidebar .list-group-item.active {
  background-color: #fff7ed !important;
  color: #f57200 !important;
  border-left: 3px solid #f57200 !important;
  font-weight: 700 !important;
}
/* ── Fix □ broken icons in cart CATEGORIES sidebar list items ───
   sidebar-categories.tpl outputs: <i class="fal fa-*"> directly in <a>
   fal (FA Light) has no glyphs in free FA → renders as □.
   Fix: hide all <i> inside list items, add clean CSS chevron via ::before */
#order-standard_cart .cart-sidebar .list-group-item > i {
  display: none !important;  /* hide the broken fal/fad/far icon */
}
#order-standard_cart .cart-sidebar .list-group-item::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 2px solid #f57200;
  border-top: 2px solid #f57200;
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-right: 10px;
  opacity: 0.6;
  transition: opacity .15s;
}
#order-standard_cart .cart-sidebar .list-group-item:hover::before,
#order-standard_cart .cart-sidebar .list-group-item.active::before {
  opacity: 1;
}
/* Make list items flex so the ::before chevron aligns properly */
#order-standard_cart .cart-sidebar .list-group-item {
  display: flex !important;
  align-items: center;
}
#order-standard_cart .cart-sidebar .card {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

/* Fix broken icon in cart CATEGORIES sidebar header.
   products.tpl sidebar uses sidebar-categories.tpl which outputs:
   <h3 class="panel-title"> <i class="{icon}"> LABEL <i class="fas fa-chevron-up card-minimise">
   The panel icon (fad/fal) must be hidden; chevron (fas) must stay visible.
   Use broad selector + specificity to beat WHMCS defaults. */

/* Hide ALL non-chevron icons inside the cart sidebar card header */
#order-standard_cart .cart-sidebar .panel-heading i:not(.card-minimise):not(.panel-minimise),
#order-standard_cart .cart-sidebar .card-header i:not(.card-minimise):not(.panel-minimise) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Style the h3 itself */
#order-standard_cart .cart-sidebar .card-header h3,
#order-standard_cart .cart-sidebar .card-header .panel-title {
  font-size: 12px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: rgba(255,255,255,.85) !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
}
/* Chevron — keep visible, push right */
#order-standard_cart .cart-sidebar .card-header .card-minimise,
#order-standard_cart .cart-sidebar .card-header .panel-minimise {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: auto !important;
  font-size: 11px !important;
  opacity: .55 !important;
  color: rgba(255,255,255,.6) !important;
  padding-left: 8px;
}



/* Plan cards grid — products.tpl wraps each plan in:
   <div class="tt-single-product text-center px-3 py-5 my-3 tt-custom-radius clearfix">
   Bootstrap py-5 = 3rem top+bottom padding, my-3 = 1rem top+bottom margin.
   These cause the big top/bottom spacing. Override both. */
#order-standard_cart .products .tt-single-product {
  padding-top: 1.25rem !important;    /* was py-5 = 3rem */
  padding-bottom: 1.25rem !important;
  margin-top: 0.5rem !important;      /* was my-3 = 1rem */
  margin-bottom: 0.5rem !important;
}
/* Also tighten the row gap between plan columns */
#order-standard_cart .products .row.row-eq-height {
  margin-top: -4px !important;
}

/* Plan cards grid */
#order-standard_cart .package {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  position: relative;
}
#order-standard_cart .package:hover {
  border-color: #f57200 !important;
  box-shadow: 0 8px 28px rgba(245,114,0,.12) !important;
  transform: translateY(-3px) !important;
}

/* Popular / recommended badge */
#order-standard_cart .package.most-popular,
#order-standard_cart .package.recommended,
#order-standard_cart .package.featured {
  border-color: #f57200 !important;
  box-shadow: 0 4px 20px rgba(245,114,0,.15) !important;
}

/* Plan header */
#order-standard_cart .package .package-name {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  padding: 20px 20px 14px;
  text-align: center;
  position: relative;
}
#order-standard_cart .package .package-name h3,
#order-standard_cart .package .package-name h2 {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 !important;
}

/* Most Popular ribbon */
#order-standard_cart .package .most-popular-badge,
#order-standard_cart .package .ribbon,
#order-standard_cart .package .package-name .badge {
  position: absolute;
  top: -1px;
  right: 16px;
  background: #f57200 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 4px 10px !important;
  border-radius: 0 0 8px 8px;
}

/* Price area */
#order-standard_cart .package .price,
#order-standard_cart .package .package-price {
  text-align: center;
  padding: 18px 16px 10px;
  border-bottom: 1px solid #e2e8f0;
}
#order-standard_cart .package .price .price-amount,
#order-standard_cart .package .price .amount {
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  line-height: 1.1;
}
#order-standard_cart .package .price .price-term,
#order-standard_cart .package .price .term,
#order-standard_cart .package .price small {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500;
  display: block;
  margin-top: 4px;
}
#order-standard_cart .package .price .was-price {
  font-size: 13px;
  color: #94a3b8;
  text-decoration: line-through;
  margin-bottom: 2px;
}

/* Shared hosting / VPS price tag inline */
#order-standard_cart .package h3.price {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  text-align: center;
  padding: 16px;
  margin: 0;
  border-bottom: 1px solid #e2e8f0;
}

/* Feature list */
#order-standard_cart .package ul.features,
#order-standard_cart .package .features-list {
  list-style: none !important;
  padding: 12px 20px !important;
  margin: 0 !important;
  flex: 1;
}
#order-standard_cart .package ul.features li,
#order-standard_cart .package .features-list li {
  font-size: 13px !important;
  color: #334155 !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.4 !important;
}
#order-standard_cart .package ul.features li:last-child,
#order-standard_cart .package .features-list li:last-child {
  border-bottom: none !important;
}
#order-standard_cart .package ul.features li::before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #16a34a;
  font-size: 11px;
  flex-shrink: 0;
}
#order-standard_cart .package ul.features li.not-included::before {
  content: '\f00d';
  color: #94a3b8;
}
#order-standard_cart .package ul.features li .feature-heading {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #64748b !important;
  background: #f8fafc !important;
  padding: 6px 0 !important;
  margin: 4px 0 !important;
  width: 100%;
}

/* Order now / Add to cart button */
#order-standard_cart .package .order-button,
#order-standard_cart .package .btn-order,
#order-standard_cart .package a.btn,
#order-standard_cart .package .package-bottom .btn,
#order-standard_cart .package .cta {
  display: block !important;
  width: calc(100% - 32px) !important;
  margin: 16px !important;
  padding: 12px 20px !important;
  background: #f57200 !important;
  border-color: #eb6600 !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  text-align: center !important;
  transition: all .15s ease !important;
  text-decoration: none !important;
  letter-spacing: .03em;
}
#order-standard_cart .package .order-button:hover,
#order-standard_cart .package .btn-order:hover,
#order-standard_cart .package a.btn:hover,
#order-standard_cart .package .package-bottom .btn:hover,
#order-standard_cart .package .cta:hover {
  background: #eb6600 !important;
  border-color: #d45e00 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(245,114,0,.35) !important;
}

/* Billing cycle toggle (if present) */
#order-standard_cart .billing-cycle-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 12px 0;
  margin-bottom: 8px;
}
#order-standard_cart .billing-cycle-tabs .btn {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #334155 !important;
  background: #fff !important;
  transition: all .15s ease !important;
}
#order-standard_cart .billing-cycle-tabs .btn.active,
#order-standard_cart .billing-cycle-tabs .btn:focus {
  background: #f57200 !important;
  border-color: #eb6600 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(245,114,0,.25) !important;
}

/* ── Landing pages (landing-page.* product sub-pages) ───────── */

/* Font overrides */
.landing-page.sitebuilder .nav-tabs > li > a,
.landing-page.sitebuilder .features .title,
.landing-page.sitebuilder .templates .previews .tplname,
.landing-page.sitebuilder .pricing-table-row .col-plans-5,
.landing-page.sitebuilder .faq-title,
.landing-page .navbar .navbar-nav > li > a,
.landing-page.ssl .competitive-upgrade-promo,
.landing-page.cpanelseo .feature-tabs .nav-tabs > li > a,
.landing-page.ox .features p.title,
.landing-page.ox .pricing .pricing-label,
.landing-page .content-block.pricing .btn-group button.btn,
.landing-page .pricing-item .price,
.landing-page .get-started .price,
.landing-page .content-block.tabs .nav-tabs li a,
.landing-page.codeguard .pricing-container .price,
.landing-page.marketgoo .feature-blocks .block span,
.landing-page.marketgoo .plan .header h4,
.landing-page.marketgoo .faqs .faq h4,
.landing-page.sitelock .emergency .price,
.store-order-container .payment-term h4 {
  font-family: var(--font-family-monospace);
}

.landing-page.sitebuilder .nav-tabs > li > a,
.landing-page.sitebuilder .features .title,
.landing-page.sitebuilder .templates .previews .tplname,
.landing-page.sitebuilder .faq-title,
.landing-page .navbar .navbar-nav > li > a,
.landing-page.ssl .competitive-upgrade-promo,
.landing-page .content-block.pricing .btn-group button.btn,
.landing-page .pricing-item .price,
.landing-page .get-started .price,
.landing-page .content-block.tabs .nav-tabs li a,
.landing-page.codeguard .pricing-container .price,
.landing-page.marketgoo .feature-blocks .block span,
.landing-page.sitelock .emergency .price {
  font-weight: 500 !important;
}

/* Landing page icon colors */
.landing-page.ssl .ssl-benefits i,
.landing-page.ssl .ideal-for.dv i,
.landing-page.ssl .features i,
.landing-page.ssl .ideal-for.ov i,
.landing-page.sitelock .feature-wrapper i {
  color: var(--primary) !important;
  font-size: 35px;
}

/* Section headings */
.content-block.features .feature h4,
.landing-page .content-block.faq h4,
.landing-page .tab-content h3,
.landing-page.sitelock .feature-wrapper .content h4,
.landing-page.codeguard .faqs h4,
.landing-page.marketgoo .feature-blocks .block span,
.landing-page.marketgoo .plan .header h4,
.landing-page.marketgoo .faqs .faq h4,
.landing-page.sitelock .emergency .price,
.store-order-container .payment-term h4 {
  font-size: 18px;
}
.content-block.audience h3 { font-size: 20px; }
.landing-page .hero h2,
.landing-page.ox h3,
.landing-page.sitelock h2,
.landing-page.marketgoo h3 { font-size: 2rem; }

/* Font style fixes */
.landing-page.codeguard .faqs h4,
.landing-page.codeguard .strong-green span,
.content-block.image-standout .strong-green strong > em,
.landing-page.marketgoo em { font-style: normal !important; }
.landing-page.codeguard .faqs { text-align: left; }

/* SiteBuilder */
.landing-page.sitebuilder .bold-line { margin-bottom: 10px; }
.landing-page.sitebuilder .nav-tabs > li > a { text-transform: capitalize; font-size: 15px; color: var(--body-color); }
.landing-page.sitebuilder .features img { max-width: 65px; }
.landing-page.sitebuilder .templates .previews img,
.landing-page.sitebuilder .templates .previews .show-more div { border: 1px dashed var(--border-color); border-radius: var(--custom-radius); }
.landing-page.sitebuilder .templates .previews .thumb-wrapper .type-label { top: 18px; right: -36px; font-size: 12px; padding: 1px; transform: rotate(40deg); border: none; }
.landing-page.sitebuilder .pricing-table { border: 1px dashed var(--border-color); border-radius: var(--custom-radius); }
.landing-page.sitebuilder .pricing-table-row .col-primary { font-weight: 400; }
.landing-page.sitebuilder .pricing-table-row.col-heading div { padding: 12px 10px; }
.landing-page.sitebuilder .faq-title { padding: 0 0 15px; }

/* SSL */
.landing-page .hero h3 { font-size: 16px; line-height: 26px; font-weight: normal !important; font-family: var(--font-family-sans-serif); }
.landing-page.ssl .validation-levels { background-color: var(--gray-light); padding-bottom: 50px; }
.landing-page.ssl .validation-levels h3, .landing-page.ssl p.help-me-choose a, .landing-page.ssl a.help-me-choose { color: var(--heading-color); }
.landing-page.ssl .validation-levels .item .btn { background-color: var(--primary); }
.landing-page.ssl .what-is-ssl ul { padding-left: 0; }
.landing-page.ssl .what-is-ssl ul li { display: flex; align-items: center; }
.landing-page.ssl .what-is-ssl .fas, .landing-page.ssl .what-is-ssl .far { font-size: 15px; color: var(--success); }
.landing-page.ssl .content-block h4 { font-size: 18px !important; font-weight: 500 !important; }
.landing-page.ssl .detailed-info .card-header { background-color: var(--primary-dark); }
.landing-page.ssl .detailed-info .card-header h4 { color: var(--white); font-size: 16px !important; }
.landing-page.ssl .ssl-benefits .row > div[class*=col-] { font-family: var(--font-family-monospace); font-weight: 500; font-size: 14px; }
.landing-page.ssl .standout-1 { background-color: var(--primary-dark); }
.landing-page.ssl .logos img { max-height: 35px; }
.landing-page.ssl ul.ssl-certs-all li { border-bottom: 1px dashed var(--border-color); }
.landing-page.ssl .detailed-info .card-body { border: none; }
.landing-page.ssl .detailed-info .card { border: 1px dashed var(--border-color); }
.landing-page.ssl .competitive-upgrade-promo { background-color: var(--primary-dark); }
.landing-page.ssl .features { background-color: transparent; padding: 0; }
.landing-page.ssl .features .feature { background-color: var(--gray-light); border: 1px dashed var(--border-color); border-radius: var(--custom-radius); transition: all 0.3s ease-in-out; margin: 0 0 30px 0; }
.landing-page.ssl .features h3 { color: var(--heading-color); }
.landing-page.ssl .features h5 { margin-top: 15px; margin-bottom: 0; font-size: 16px; }
.landing-page.ssl .features .feature:hover { background-color: transparent; }
.landing-page.ssl .certificate-options, .landing-page.ssl .certificate-options.ov, .landing-page.ssl .certificate-options.ev { background-color: var(--primary-dark); }
.landing-page.ssl .certificate-options h4, .landing-page.ssl .certificate-options h3, .landing-page.ssl .certificate-options h5 { color: var(--white); }
.landing-page.ssl .certificate-options .btn { background-color: var(--primary); color: var(--white); }
.landing-page.ssl p.help-me-choose a, .landing-page.ssl a.help-me-choose { font-size: 15px; }
.landing-page.ssl .certificate-options a.help-me-choose { color: var(--white); }

/* cPanel */
.landing-page.cpanelseo .btn-stretched { padding: 12px 30px; }
.landing-page.cpanelseo .feature-tabs .nav-tabs > li > a.active { color: var(--white) !important; }
.landing-page.cpanelseo .faq .card-header .btn { padding: 0; }
.landing-page.cpanelseo .faq .accordion > .card { border: 1px dashed var(--border-color); margin-bottom: 6px; }
.landing-page.cpanelseo .feature-carousel .carousel-control { font-size: 15px; line-height: 40px; }
.landing-page.cpanelseo .pricing .plan-features { font-weight: normal; }

@media only screen and (min-width: 960px) { .landing-page.ox .header { padding: 100px 0; } }
@media (min-width: 1200px) { .landing-page.cpanelseo .header-img { max-width: 55% !important; } }

.landing-page.ox .features img, .landing-page .features .feature .icon img { width: 50px; }
.landing-page .features .feature .icon { line-height: 90px; }
.landing-page.ox .features p { margin-left: 70px; }
.landing-page.ox .features p.title { font-size: 18px; margin-bottom: 5px; }
.landing-page .features, .landing-page.ox .faqs, .landing-page.ox .stand-out, .landing-page.weebly .faq,
.landing-page .pricing-item .feature-heading, .landing-page.sitelock .plans, .landing-page .light-grey-bg,
.landing-page.codeguard .faqs, .landing-page.marketgoo .plan.marketgoo_pro ul,
.landing-page.marketgoo .feature-wrapper, .landing-page.marketgoo .faqs { background-color: var(--gray-light); }
.landing-page .features .feature { height: 200px; }

/* Landing page pricing items */
.landing-page .pricing-item .price { font-size: 22px; color: var(--primary-dark); }
.landing-page .pricing-item ul li { border-bottom: 1px dashed var(--border-color); }
.landing-page .content-block.pricing .btn-group button.btn { border-color: var(--border-color); }
.landing-page .content-block.pricing .btn-group button.btn.active { background-color: var(--gray-light); }
.landing-page.weebly .weebly-lite-plan { background-color: var(--primary-light); border: none; border-radius: var(--custom-radius); }
.landing-page .pricing-item { border: 1px dashed var(--border-color); border-radius: var(--custom-radius); }
.landing-page .pricing-item .header h5 { font-size: 15px; font-weight: normal !important; }

/* Sitelock */
.landing-page.sitelock .plans h2, .landing-page.sitelock .emergency h2, .landing-page.sitelock .plans h3, .landing-page.sitelock .emergency h3 { color: var(--heading-color); }
.landing-page.sitelock .plans .plan .header { background: var(--primary-dark); border-top-left-radius: var(--custom-radius); border-top-right-radius: var(--custom-radius); }
.landing-page.sitelock .plans .plan .header h4 { color: var(--white); }
.landing-page.sitelock .plans .plan .header p, .landing-page.sitelock .feature-wrapper .content p, .landing-page.sitelock p { font-size: 15px; }
.landing-page.sitelock .plans .plan { border-radius: var(--custom-radius); box-shadow: 2px 4px 15px rgba(120,120,120,0.10); }
.landing-page.sitelock .plans .plan .btn { background-color: var(--primary); }
.landing-page.sitelock .feature-wrapper .content { margin-left: 65px; }
.landing-page.sitelock .feature-wrapper { margin: 0 0 30px 0; }
.landing-page.sitelock .emergency, .landing-page .get-started, .landing-page.codeguard .order-btn { background-color: var(--primary-dark); }
.landing-page.sitelock .emergency .feature-wrapper .content h4, .landing-page.sitelock .emergency h3, .landing-page.sitelock .emergency h2.text-danger, .landing-page .get-started h2, .landing-page .get-started h4 { color: var(--white) !important; }

/* Mail services */
.landing-page.mail-services .product-options { background-color: var(--white); }
.landing-page .content-block.text20 { margin-top: 0; padding-top: 0; }
.landing-page.mail-services .product-options .item { background-color: var(--gray-light); border-radius: var(--custom-radius); }
.landing-page.mail-services .product-options .price { color: var(--primary); margin: 20px 0; }
.landing-page .product-options .item .btn { padding: 10px 30px; background-color: transparent; border-color: var(--border-color); color: var(--body-color); }
.landing-page.mail-services .product-options .btn-buy { background-color: var(--primary); color: var(--white); }
.landing-page .get-started h4 { font-size: 15px; }
.landing-page.mail-services .benefits i { font-size: 13px; }
.content-block.get-started form .row { align-items: center; }
.landing-page .get-started .btn-order-now { background-color: var(--primary); margin-top: 20px !important; }

/* CodeGuard */
.landing-page.codeguard .irs-with-grid { margin: 15px 0 45px; }
.landing-page.codeguard .irs-bar-edge { margin-left: 0; }

/* Marketgoo */
.landing-page.marketgoo .video-banner { background-color: transparent; padding-bottom: 60px; }
.landing-page.marketgoo .hero { padding-bottom: 30px; }
@media (min-width: 768px) {
  .landing-page.marketgoo .feature-blocks .block img { max-width: 100px; }
  .landing-page.marketgoo .testimonials .user img { max-width: 55px; }
  .landing-page.marketgoo .testimonials .user .bio { margin-left: 25px; }
}
.landing-page.marketgoo .feature-blocks .block p { font-size: 15px; }
.content-block .plan-container { display: block; position: relative; overflow: hidden; border: 1px dashed var(--border-color); border-radius: var(--custom-radius); }
.landing-page.marketgoo .plan ul li { height: 45px; line-height: 45px; border-bottom: 1px dashed var(--border-color); }
.landing-page.marketgoo .plan.labels ul li { border-right: 1px dashed var(--border-color); }
.landing-page.marketgoo .plan ul li span { font-weight: normal; }
.landing-page.marketgoo .plan ul { border-top: 1px dashed var(--border-color); }
.landing-page.marketgoo .plan .header { padding: 15px 0; }
.landing-page.marketgoo .plan .btn-signup { padding: 10px 30px; background-color: var(--primary); border-color: var(--primary); }
.landing-page.marketgoo .testimonials .testimonial { font-family: var(--font-family-sans-serif); font-size: 18px; line-height: 1.75; }
.landing-page.marketgoo .testimonials .user { display: flex; align-items: center; justify-content: center; }

/* cPanel pricing */
.landing-page.cpanelseo .pricing .money-back { font-size: 18px; line-height: 1.75; }
.landing-page.cpanelseo .pricing .plan .plan-name { padding: 0; border-bottom: 0; }
.plan-container .plan ul li img { max-width: 15px; }
.landing-page.marketgoo .hero h2.strong-green { margin-bottom: 0; }

/* Order form */
.store-order-container form > .row { align-items: center; }

/* xovinow */
.landing-page.xovinow .pricing .plan .plan-name { border-bottom: none; }
.landing-page.xovinow .pricing .plan .plan-price { margin-top: 0; border-bottom: 1px solid var(--border-color); }
.landing-page.xovinow .feature-carousel .carousel-control { line-height: 40px; }
.landing-page.xovinow .feature-carousel .carousel-control .fa { font-weight: 500; }
.landing-page.xovinow .faq .accordion > .card > .card-header { background-color: transparent; border: 1px solid var(--border-color); color: var(--body-color); padding: 0; margin-bottom: 0; }
.landing-page.xovinow .faq .card-header .btn { color: var(--body-color); padding: 0.75rem 1rem; font-weight: 600; }

/* ── Store order (individual product) page ──────────────────── */
.store-order-container { padding: 8px 0; }
.store-order-container h2 { font-size: 22px !important; font-weight: 800 !important; color: #0f172a !important; margin-bottom: 8px; }
.store-order-container p { font-size: 14px; color: #64748b; line-height: 1.7; }
.store-order-container .payment-term { background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 16px; }
.store-order-container .payment-term h4 { font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: #64748b !important; margin-bottom: 8px !important; }
.store-order-container .payment-term .form-control { border-radius: 8px; border-color: #e2e8f0; font-size: 14px; font-weight: 600; }

/* Domain tabs on order page */
.store-domain-tabs .nav-link {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 10px 18px;
  border-radius: 0;
  transition: color .15s, border-color .15s;
  margin-bottom: -2px;
}
.store-domain-tabs .nav-link:hover { color: #f57200; }
.store-domain-tabs .nav-link.active { color: #f57200; border-bottom-color: #f57200; font-weight: 700; background: transparent; }
.store-domain-tabs { border-bottom: 2px solid #e2e8f0; }
.responsive-tabs-sm-connector.store { display: none; }
.store-domain-tab-content { border: 1.5px solid #e2e8f0; border-top: none; border-radius: 0 0 12px 12px; padding: 20px; }

.domain-validation.ok { color: #16a34a; font-weight: 600; font-size: 13px; }
.domain-validation:not(.ok) { color: #64748b; font-size: 13px; }

/* Promoted product upsell block */
.store-promoted-product { border: 1.5px solid #e2e8f0; border-radius: 14px; }
.store-promoted-product h3 { font-size: 18px !important; font-weight: 800 !important; color: #0f172a !important; }
.store-promoted-product h4 { font-size: 14px !important; color: #64748b !important; }
.store-promoted-product .btn-success { background: #16a34a !important; border-color: #15803d !important; border-radius: 10px !important; font-weight: 700 !important; padding: 10px 20px !important; }
/* -----------------------------------------------------------------------
   MODERN CHECKOUT EXPERIENCE � Full Audit Fix
   HostGuru Africa v3.0 | 2026-06-04
   Covers: Configure, Domain, Review Cart, Checkout pages + all buttons
   ----------------------------------------------------------------------- */


/* -- 1. GLOBAL LAYOUT: Cart body wrapper & grid ----------------------- */
#order-standard_cart {
  background: #f8fafc;
  min-height: 70vh;
}
#order-standard_cart .row {
  margin-left: 0;
  margin-right: 0;
}

/* ── Cart body: no white card on any page ────────────────────── */
#order-standard_cart .cart-body {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

#order-standard_cart .header-lined {

  border-bottom: 2px solid #f1f5f9;
  padding-bottom: 16px;
  margin-bottom: 24px;
}
#order-standard_cart .header-lined h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}


/* -- 2. SECTION HEADINGS (.sub-heading) ------------------------------- */
#order-standard_cart .sub-heading {
  border-bottom: 2px solid #f1f5f9;
  margin: 24px 0 16px;
  padding-bottom: 10px;
}
#order-standard_cart .sub-heading span.primary-bg-color {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #64748b !important;
  background: none !important;
  padding: 0 !important;
}


/* -- 3. FIX ALL fad/fal BROKEN ICONS IN BUTTONS ----------------------- */
/* These icons (fad fa-long-arrow-right, fad fa-lock, fad fa-reply etc.)
   render as ?? with FA Free. Strategy: hide them, use CSS arrow on
   the buttons themselves via ::after */

/* Hide ALL fad/fal icons globally in the cart context */
#order-standard_cart i[class*="fad"],
#order-standard_cart i[class*="fal"],
.viewcart i[class*="fad"],
.viewcart i[class*="fal"] {
  display: none !important;
}
/* Keep specific fas icons that are functional (spinners, check, trash etc.) */
#order-standard_cart i.fas,
#order-standard_cart i.far,
#order-standard_cart i.fab,
.viewcart i.fas,
.viewcart i.far {
  display: inline-block !important;
}

/* Add clean CSS ? arrow after Continue/Complete/Checkout primary buttons */
#order-standard_cart .btn-primary::after,
#order-standard_cart .btn.btn-primary::after {
  content: ' \2192';
  font-family: 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -.5px;
}
/* Specific buttons that should NOT get the ? arrow */
#order-standard_cart .btn-primary.btn-empty-cart::after,
#order-standard_cart .btn-primary[data-dismiss]::after,
#order-standard_cart .modal .btn-primary::after,
#order-standard_cart .btn-add-to-cart.btn-primary::after {
  content: none;
}

/* Continue Shopping link � clean text link */
.btn-continue-shopping {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-decoration: none !important;
  padding: 8px 0 !important;
  border: none !important;
  background: none !important;
  transition: color .15s;
}
.btn-continue-shopping::before {
  content: '?';
  font-size: 14px;
}
.btn-continue-shopping:hover {
  color: #f57200 !important;
}


/* -- 4. MODERN BUTTONS ------------------------------------------------ */
#order-standard_cart .btn-primary,
#order-standard_cart .btn.btn-primary {
  background: #f57200 !important;
  border-color: #eb6600 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 11px 24px !important;
  border-radius: 10px !important;
  transition: all .18s ease !important;
  box-shadow: 0 4px 14px rgba(245,114,0,.25) !important;
  letter-spacing: .01em;
}
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn.btn-primary:hover {
  background: #d96500 !important;
  border-color: #d96500 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(245,114,0,.35) !important;
}
/* Large primary buttons (checkout, continue) */
#order-standard_cart .btn-primary.btn-lg,
#order-standard_cart .btn.btn-primary.btn-lg {
  padding: 13px 28px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
}
/* Block buttons */
#order-standard_cart .btn-primary.btn-block,
#order-standard_cart .btn.btn-primary.btn-block {
  width: 100% !important;
}
/* Secondary/default buttons */
#order-standard_cart .btn-default,
#order-standard_cart .btn.btn-default {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}
#order-standard_cart .btn-default:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}


/* -- 5. ORDER SUMMARY SIDEBAR --------------------------------------- */
#order-standard_cart .order-summary,
#order-standard_cart .secondary-cart-sidebar .order-summary {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(15,23,42,.07);
  overflow: hidden;
  position: sticky;
  top: 80px;
}
/* Header */
#order-standard_cart .order-summary h2,
#order-standard_cart .order-summary .font-size-30 {
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #fff !important;
  background: #0f172a !important;
  margin: 0 !important;
  padding: 14px 20px !important;
}
/* Summary container */
#order-standard_cart .summary-container {
  padding: 20px;
}
/* Product name in summary */
#order-standard_cart .order-summary .product-name,
#order-standard_cart .order-summary span.product-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  display: block;
  margin-bottom: 4px;
}
/* Line items */
#order-standard_cart .order-summary .clearfix {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start;
  padding: 5px 0;
  font-size: 13px;
  color: #475569;
}
/* Divider */
#order-standard_cart .summary-totals {
  border-top: 1.5px solid #f1f5f9;
  margin-top: 12px;
  padding-top: 12px;
}
/* Total Due */
#order-standard_cart .total-due-today {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3e2 100%);
  border: 1.5px solid #fed7aa;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#order-standard_cart .total-due-today .amt {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #f57200 !important;
  line-height: 1;
}
#order-standard_cart .total-due-today span:last-child {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* Total due padded variant */
#order-standard_cart .total-due-today-padded {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 12px;
}


/* -- 6. CONFIGURE PAGE: product info, billing cycle ----------------- */
#order-standard_cart .product-info {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
#order-standard_cart .product-info .product-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 6px !important;
}
#order-standard_cart .product-info p:last-child { margin: 0; color: #64748b; font-size: 13.5px; }

/* Billing cycle select */
#order-standard_cart .payment-term h4,
#order-standard_cart select[name="billingcycle"] {
  font-size: 14px !important;
}
#order-standard_cart select.form-control,
#order-standard_cart select.custom-select {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  background-color: #fff !important;
  font-weight: 600;
  transition: border-color .15s;
}
#order-standard_cart select.form-control:focus,
#order-standard_cart select.custom-select:focus {
  border-color: #f57200 !important;
  box-shadow: 0 0 0 3px rgba(245,114,0,.12) !important;
  outline: none !important;
}


/* -- 7. ADDON CARDS ------------------------------------------------ */
#order-standard_cart .panel-addon,
#order-standard_cart .card.panel-addon {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  background: #fff !important;
  margin-bottom: 16px;
}
#order-standard_cart .panel-addon:hover {
  border-color: #f57200 !important;
  box-shadow: 0 4px 16px rgba(245,114,0,.1) !important;
}
#order-standard_cart .panel-addon.panel-addon-selected {
  border-color: #f57200 !important;
  background: #fff7ed !important;
}
#order-standard_cart .panel-addon .panel-body,
#order-standard_cart .panel-addon .card-body {
  padding: 16px 18px !important;
  font-size: 13.5px;
  color: #334155;
}
#order-standard_cart .panel-addon .panel-body label {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: #0f172a !important;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 6px;
}
#order-standard_cart .panel-addon .panel-price {
  background: #f8fafc;
  border-top: 1.5px solid #e2e8f0;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
#order-standard_cart .panel-addon .panel-add {
  background: #0f172a;
  color: #fff !important;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
#order-standard_cart .panel-addon .panel-add:hover { background: #1e293b; }
#order-standard_cart .panel-addon .panel-add .fa-plus { font-size: 10px !important; display: inline-block !important; }

/* Add to Cart button in addon */
#order-standard_cart .btn-add-to-cart {
  background: #16a34a !important;
  border-color: #15803d !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  transition: all .15s !important;
}
#order-standard_cart .btn-add-to-cart:hover {
  background: #15803d !important;
  transform: none !important;
  box-shadow: 0 3px 10px rgba(22,163,74,.25) !important;
}


/* -- 8. DOMAIN SELECTION OPTIONS ----------------------------------- */
#order-standard_cart .domain-selection-options {
  display: flex !important;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
#order-standard_cart .domain-selection-options .option {
  flex: 1;
  min-width: 180px;
  border: 2px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s;
  background: #fff !important;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#order-standard_cart .domain-selection-options .option:hover {
  border-color: #f57200 !important;
  box-shadow: 0 4px 16px rgba(245,114,0,.1) !important;
  background: #fff7ed !important;
}
#order-standard_cart .domain-selection-options .option.active,
#order-standard_cart .domain-selection-options input[type="radio"]:checked + .option,
#order-standard_cart .domain-selection-options .option input:checked ~ label {
  border-color: #f57200 !important;
  background: #fff7ed !important;
}
/* Radio button inside domain options */
#order-standard_cart .domain-selection-options .option input[type="radio"] {
  accent-color: #f57200;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}
#order-standard_cart .domain-selection-options .option label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  cursor: pointer;
  margin: 0 !important;
  line-height: 1.4;
}


/* -- 9. DOMAIN CHECK INPUT ----------------------------------------- */
#order-standard_cart .domain-checker-container,
#order-standard_cart .input-group-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
#order-standard_cart .domain-checker-container .input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
#order-standard_cart .domain-checker-container input[type="text"],
#order-standard_cart .domain-input,
#order-standard_cart .subdomain-input,
#order-standard_cart input.form-control {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  transition: border-color .15s, box-shadow .15s;
}
#order-standard_cart input.form-control:focus {
  border-color: #f57200 !important;
  box-shadow: 0 0 0 3px rgba(245,114,0,.12) !important;
  outline: none !important;
}
/* Domain check button */
#order-standard_cart .btn.btn-lookup,
#order-standard_cart #btnDomainCheck,
#order-standard_cart .btn-check-domain {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  white-space: nowrap;
}
#order-standard_cart .btn.btn-lookup:hover,
#order-standard_cart #btnDomainCheck:hover {
  background: #1e293b !important;
}


/* -- 10. REVIEW CART TABLE ------------------------------------------ */
#order-standard_cart .table-list,
#order-standard_cart .view-cart-items {
  border-radius: 12px !important;
  overflow: hidden;
  border: 1.5px solid #e2e8f0 !important;
}
#order-standard_cart .table-list thead th,
#order-standard_cart .view-cart-items .cart-header {
  background: #0f172a !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 12px 16px !important;
  border: none !important;
}
#order-standard_cart .table-list tbody td,
#order-standard_cart .view-cart-items .item {
  padding: 14px 16px !important;
  border-color: #f1f5f9 !important;
  vertical-align: middle !important;
  font-size: 13.5px;
}
#order-standard_cart .view-cart-items .item-domain,
#order-standard_cart .view-cart-items .item-name {
  font-weight: 700 !important;
  color: #0f172a !important;
}
/* Empty cart button */
#order-standard_cart .btn-empty-cart,
#order-standard_cart .btn.btn-danger {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  border-color: #fecaca !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 7px 14px !important;
  transition: all .15s;
}
#order-standard_cart .btn-empty-cart:hover,
#order-standard_cart .btn.btn-danger:hover {
  background: #dc2626 !important;
  color: #fff !important;
  border-color: #dc2626 !important;
}


/* -- 11. PROMO CODE SECTION ---------------------------------------- */
#order-standard_cart .promo-code-container,
#order-standard_cart [id*="promo"] {
  background: #f8fafc;
  border: 1.5px dashed #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 20px 0;
}
#order-standard_cart .promo-code-container a,
#order-standard_cart .view-promo-code {
  color: #f57200 !important;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
#order-standard_cart input[name="promocode"],
#order-standard_cart input[id="inputPromoCode"] {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
}
#order-standard_cart .btn-validate-promo,
#order-standard_cart .btn[value="Validate Code"],
#order-standard_cart .btn[name="Submit"] {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}


/* -- 12. CHECKOUT PAYMENT SECTION --------------------------------- */
/* Account selection */
#order-standard_cart .checkout-existing-accounts,
#order-standard_cart .list-group.choose-account,
#order-standard_cart .register-user-container {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}
/* Payment method tabs */
#order-standard_cart .payment-methods,
#order-standard_cart .choose-payment-method {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
#order-standard_cart .payment-method-item,
#order-standard_cart label.payment-method-label {
  flex: 1;
  min-width: 100px;
  border: 2px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#order-standard_cart .payment-method-item:hover,
#order-standard_cart label.payment-method-label:hover {
  border-color: #f57200 !important;
  background: #fff7ed !important;
  color: #f57200 !important;
}
#order-standard_cart .payment-method-item.active,
#order-standard_cart input[name="paymentmethod"]:checked + label {
  border-color: #f57200 !important;
  background: #fff7ed !important;
  color: #f57200 !important;
}

/* Credit balance section */
#order-standard_cart .credit-balance-container,
#order-standard_cart .apply-credit {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
#order-standard_cart .credit-balance-container label {
  font-size: 13.5px;
  font-weight: 600;
  color: #166534;
}

/* Terms of service checkbox */
#order-standard_cart .tt-captcha-join-mail label.checkbox-inline {
  font-size: 13px;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
#order-standard_cart .tt-captcha-join-mail input[name="accepttos"] {
  accent-color: #f57200;
  width: 16px;
  height: 16px;
}

/* Complete Order button */
#btnCompleteOrder {
  width: 100%;
  padding: 16px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  border-radius: 12px !important;
}

/* Security notice */
#order-standard_cart .alert-warning.checkout-security-msg {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #64748b !important;
  font-size: 12px !important;
  margin-top: 20px;
}

/* Already registered / New account buttons */
#order-standard_cart .btn-registered,
#order-standard_cart .btn-register-new {
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
}


/* -- 13. TRUST STRIP (order summary) ------------------------------ */
#order-standard_cart .hg-trust-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0;
  padding: 14px 16px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
}
#order-standard_cart .hg-trust-strip span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
}
#order-standard_cart .hg-trust-strip .fa-lock { color: #16a34a !important; display: inline-block !important; }
#order-standard_cart .hg-trust-strip .fa-mobile-alt { color: #f57200 !important; display: inline-block !important; }
#order-standard_cart .hg-trust-strip .fa-shield-alt { color: #3b82f6 !important; display: inline-block !important; }


/* -- 14. INFO ALERT (questions contact) --------------------------- */
#order-standard_cart .alert.info-text-sm {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #64748b !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}
#order-standard_cart .alert.info-text-sm i.fa-question-circle {
  color: #f57200 !important;
  display: inline-block !important;
}
#order-standard_cart .alert.info-text-sm a { color: #f57200 !important; font-weight: 700; }


/* -- 15. FORM INPUTS GLOBAL ---------------------------------------- */
#order-standard_cart .form-control,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="tel"],
#order-standard_cart textarea {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: #0f172a !important;
  transition: border-color .15s, box-shadow .15s;
  background: #fff !important;
}
#order-standard_cart .form-control:focus,
#order-standard_cart input[type="text"]:focus,
#order-standard_cart input[type="email"]:focus,
#order-standard_cart input[type="tel"]:focus,
#order-standard_cart textarea:focus {
  border-color: #f57200 !important;
  box-shadow: 0 0 0 3px rgba(245,114,0,.1) !important;
  outline: none !important;
}
#order-standard_cart label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 6px;
}


/* -- 16. RESPONSIVE ------------------------------------------------ */
@media (max-width: 767px) {
  #order-standard_cart .cart-body { padding: 18px 16px; }
  #order-standard_cart .domain-selection-options { flex-direction: column; }
  #order-standard_cart .domain-selection-options .option { min-width: 100%; }
  #order-standard_cart .payment-methods { flex-direction: column; }
  #order-standard_cart .payment-method-item { min-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT AUDIT PATCH v2 — 2026-06-04
   Fixes based on full template audit:
   - Real payment gateway selectors (.tt-payment-gateways label.radio-inline)
   - Account selection cards (.account.active in checkout.tpl)
   - Already Registered / Create Account buttons (btn-info / btn-warning)
   - Checkout form field icons (.prepend-icon .field-icon fad icons)
   - Domain promo boxes (fad fa-server / fad fa-globe-americas)
   - Modal trash icons (fad fa-trash)
   - Apply credit section
   - Existing CC grid
   ═══════════════════════════════════════════════════════════════════════ */


/* ── CHECKOUT: "Already Registered?" / "Create New Account" buttons ── */
#order-standard_cart .already-registered {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
#order-standard_cart .already-registered p {
  font-size: 14px;
  font-weight: 500;
  color: #334155;
  margin: 0;
}
/* Override Bootstrap btn-info / btn-warning with brand-consistent styles */
#order-standard_cart .btn.btn-info,
#order-standard_cart #btnAlreadyRegistered {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  transition: all .15s !important;
}
#order-standard_cart .btn.btn-info:hover,
#order-standard_cart #btnAlreadyRegistered:hover {
  background: #1e293b !important;
  transform: none !important;
}
#order-standard_cart .btn.btn-warning,
#order-standard_cart #btnNewUserSignup {
  background: #f57200 !important;
  border-color: #eb6600 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(245,114,0,.25) !important;
  transition: all .15s !important;
}
#order-standard_cart .btn.btn-warning:hover,
#order-standard_cart #btnNewUserSignup:hover {
  background: #d96500 !important;
  transform: translateY(-1px) !important;
}
/* Neither btn gets the → arrow */
#order-standard_cart .btn.btn-info::after,
#order-standard_cart .btn.btn-warning::after { content: none !important; }


/* ── CHECKOUT: Account selection cards ──────────────────────────────── */
#order-standard_cart .account-select-container {
  gap: 14px;
  margin-bottom: 20px;
}
#order-standard_cart .account-select-container .account {
  border: 2px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: #fff !important;
  margin-bottom: 12px;
}
#order-standard_cart .account-select-container .account:hover {
  border-color: #f57200 !important;
  background: #fff7ed !important;
}
#order-standard_cart .account-select-container .account.active {
  border-color: #f57200 !important;
  background: #fff7ed !important;
}
#order-standard_cart .account-select-container .account label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  cursor: pointer;
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#order-standard_cart .account-select-container .account label small {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  display: block;
  margin-top: 3px;
}
#order-standard_cart .account-select input[type="radio"] {
  accent-color: #f57200;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
/* Account label badges */
#order-standard_cart .account .label-default {
  background: #f1f5f9 !important;
  color: #64748b !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}
#order-standard_cart .account .label-info {
  background: #dbeafe !important;
  color: #1d4ed8 !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
}


/* ── CHECKOUT: form field icons (.prepend-icon) ─────────────────────── */
/* checkout.tpl uses <label class="field-icon"> with fad icons as 
   visual decoration before inputs. fad renders as â–¡ with free FA.
   Strategy: hide the label (it's only visual), keep layout intact */
#order-standard_cart .prepend-icon .field-icon {
  position: relative;
  z-index: 1;
}
/* Hide fad icons specifically inside field-icon labels */
#order-standard_cart .prepend-icon .field-icon i[class*="fad"],
#order-standard_cart .prepend-icon .field-icon i[class*="fal"] {
  display: none !important;
}
/* fas/far icons inside prepend are fine (envelope, lock, barcode etc.) */
#order-standard_cart .prepend-icon .field-icon i.fas,
#order-standard_cart .prepend-icon .field-icon i.far {
  display: inline-block !important;
  color: #64748b;
  font-size: 13px;
}
/* If no icon remains visible, collapse the icon label cleanly */
#order-standard_cart .prepend-icon .field-icon:not(:has(i.fas)):not(:has(i.far)) {
  display: none !important;
}


/* ── CHECKOUT: Real payment gateway selectors ──────────────────────── */
/* checkout.tpl actual structure:
   .tt-payment-gateways > label.radio-inline > input.payment-methods */
#order-standard_cart .tt-payment-container h6 {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #64748b !important;
  margin-bottom: 14px !important;
}
#order-standard_cart .tt-payment-gateways {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
#order-standard_cart .tt-payment-gateways label.radio-inline {
  flex: 1 !important;
  min-width: 110px !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  transition: border-color .15s, background .15s !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
#order-standard_cart .tt-payment-gateways label.radio-inline:hover {
  border-color: #f57200 !important;
  background: #fff7ed !important;
  color: #f57200 !important;
}
/* When the input inside is checked, style the label */
#order-standard_cart .tt-payment-gateways label.radio-inline:has(input:checked) {
  border-color: #f57200 !important;
  background: #fff7ed !important;
  color: #f57200 !important;
  box-shadow: 0 0 0 3px rgba(245,114,0,.1) !important;
}
/* Hide the actual radio button - label click handles selection */
#order-standard_cart .tt-payment-gateways input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* Payment gateway errors */
#order-standard_cart .gateway-errors {
  border-radius: 10px !important;
  font-size: 13px !important;
  margin-top: 12px;
}
/* Payment gateway input area */
#order-standard_cart #paymentGatewayInput {
  margin-top: 16px;
}


/* ── CHECKOUT: Credit/apply credit section ─────────────────────────── */
#order-standard_cart #applyCreditContainer.apply-credit-container {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
#order-standard_cart .apply-credit-container label.radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #134e2a !important;
  cursor: pointer;
  padding: 6px 0;
  margin: 0 !important;
}
#order-standard_cart .apply-credit-container input[type="radio"] {
  accent-color: #16a34a;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}


/* ── CHECKOUT: Total due today alert  ──────────────────────────────── */
#order-standard_cart .alert-success.large-text#totalDueToday {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3e2 100%) !important;
  border: 1.5px solid #fed7aa !important;
  border-radius: 12px !important;
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#order-standard_cart .alert-success.large-text strong {
  color: #f57200 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}


/* ── CHECKOUT: Credit card input fields ────────────────────────────── */
#order-standard_cart .cc-input-container {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}
#order-standard_cart .existing-cc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
#order-standard_cart .existing-cc-grid label {
  flex: 1;
  min-width: 140px;
  border: 2px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  cursor: pointer;
  transition: border-color .15s;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: #fff;
}
#order-standard_cart .existing-cc-grid label:has(input:checked) {
  border-color: #f57200 !important;
  background: #fff7ed !important;
}


/* ── DOMAIN REGISTER: promo boxes ──────────────────────────────────── */
/* domainregister.tpl promo boxes use fad fa-server / fad fa-globe-americas
   which render as â–¡. Replace with CSS icon backgrounds */
#order-standard_cart .domain-promo-box {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  height: 100%;
  transition: border-color .2s, box-shadow .2s;
}
#order-standard_cart .domain-promo-box:hover {
  border-color: #f57200;
  box-shadow: 0 4px 16px rgba(245,114,0,.1);
}
#order-standard_cart .domain-promo-box h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 4px !important;
}
#order-standard_cart .domain-promo-box p {
  font-size: 13.5px !important;
  color: #64748b !important;
}
/* Hide the broken fad icons in promo boxes */
#order-standard_cart .domain-promo-box i[class*="fad"],
#order-standard_cart .domain-promo-box i[class*="fal"] {
  display: none !important;
}
/* Replace the icon area with CSS gradient boxes */
#order-standard_cart .domain-promo-box .d-flex.align-items-center {
  align-items: flex-start !important;
  gap: 14px;
}
#order-standard_cart .domain-promo-box .d-flex > i,
#order-standard_cart .domain-promo-box .d-flex > [class*="fa-"] {
  display: none !important;
}
/* Style the .tt-domains-register-transfer wrapper */
#order-standard_cart .tt-domains-register-transfer {
  flex: 1;
}
/* Add a visual icon box before the heading using the parent container */
#order-standard_cart .domain-promo-box:first-of-type {
  border-left: 4px solid #f57200;
}
#order-standard_cart .domain-promo-box:last-of-type {
  border-left: 4px solid #3b82f6;
}
/* Promo box CTA buttons */
#order-standard_cart .domain-promo-box .btn.btn-default {
  background: #fff !important;
  border: 1.5px solid #0f172a !important;
  color: #0f172a !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  margin-top: 12px;
}
#order-standard_cart .domain-promo-box .btn.btn-default:hover {
  background: #0f172a !important;
  color: #fff !important;
}
#order-standard_cart .domain-promo-box .btn.btn-primary {
  margin-top: 12px;
}


/* ── VIEWCART: Modal fixes (fad fa-trash renders as □) ─────────────── */
/* Modal uses fad fa-trash fa-3x for empty cart / remove item icons
   Replace with a clean emoji or CSS alternative */
#order-standard_cart .modal-remove-item .modal-title i[class*="fad"],
#order-standard_cart .modal-remove-item .modal-title i[class*="fal"] {
  display: none !important;
}
#order-standard_cart .modal-remove-item .modal-title::before {
  content: '🗑';
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
}
#order-standard_cart .modal-remove-item .modal-body {
  text-align: center !important;
}
#order-standard_cart .modal-content {
  border-radius: 14px !important;
  border: 1.5px solid #e2e8f0 !important;
  overflow: hidden;
}
#order-standard_cart .modal-footer {
  border-top: 1.5px solid #f1f5f9 !important;
  background: #f8fafc !important;
  border-radius: 0 0 14px 14px !important;
  padding: 14px 20px !important;
}
/* Modal buttons */
#order-standard_cart .modal-footer .btn.btn-default { font-weight: 700 !important; }
#order-standard_cart .modal-footer .btn.btn-primary::after { content: none !important; }


/* ── VIEWCART: Edit / Remove item buttons ──────────────────────────── */
#order-standard_cart .btn.btn-link.btn-xs {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: color .15s, background .15s !important;
  border: none !important;
  background: none !important;
}
#order-standard_cart .btn.btn-link.btn-xs:hover {
  color: #f57200 !important;
  background: #fff7ed !important;
}
#order-standard_cart .btn.btn-link.btn-xs.btn-remove-from-cart:hover {
  color: #dc2626 !important;
  background: #fee2e2 !important;
}
/* Keep fad icons in viewcart edit/remove buttons visible via fallback */
#order-standard_cart .btn.btn-link.btn-xs i[class*="fad"],
#order-standard_cart .btn.btn-link.btn-xs i[class*="fal"] {
  display: none !important;
}
/* Add text indicator instead */
#order-standard_cart a.btn.btn-xs i.far.fa-trash-alt { display: inline-block !important; }


/* ── VIEWCART: view-cart-items table ───────────────────────────────── */
#order-standard_cart .view-cart-items-header .row {
  background: #0f172a !important;
  color: rgba(255,255,255,.8) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 10px 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  margin: 0 !important;
}
#order-standard_cart .view-cart-items {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden;
  margin-bottom: 20px;
}
#order-standard_cart .view-cart-items .item {
  border-bottom: 1.5px solid #f1f5f9 !important;
  padding: 14px 0 !important;
}
#order-standard_cart .view-cart-items .item:last-child { border-bottom: none !important; }
#order-standard_cart .view-cart-items .item-title { font-weight: 700 !important; color: #0f172a !important; font-size: 14px !important; }
#order-standard_cart .view-cart-items .item-domain { font-size: 12px !important; color: #64748b !important; font-weight: 500 !important; }
#order-standard_cart .view-cart-items .item-price { font-weight: 800 !important; color: #0f172a !important; font-size: 15px !important; }
#order-standard_cart .view-cart-items .cycle { font-size: 11px !important; color: #64748b !important; font-weight: 500 !important; }


/* ── VIEWCART: Promo code tab styling ──────────────────────────────── */
#order-standard_cart .view-cart-tabs .nav-tabs {
  border-bottom: 2px solid #e2e8f0 !important;
  gap: 0;
}
#order-standard_cart .view-cart-tabs .nav-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  border: none !important;
  border-bottom: 2.5px solid transparent !important;
  padding: 10px 18px !important;
  border-radius: 0 !important;
  transition: color .15s, border-color .15s !important;
  margin-bottom: -2px !important;
}
#order-standard_cart .view-cart-tabs .nav-link:hover { color: #f57200 !important; }
#order-standard_cart .view-cart-tabs .nav-link.active {
  color: #f57200 !important;
  border-bottom-color: #f57200 !important;
  font-weight: 700 !important;
  background: transparent !important;
}
#order-standard_cart .view-cart-tabs .tab-content {
  padding: 20px 0 0 !important;
}
/* Promo code icon fix */
#order-standard_cart .view-cart-tabs .fas.fa-ticket-alt {
  display: inline-block !important;
  color: #f57200 !important;
}
/* Validate promo button */
#order-standard_cart .btn.btn-default[name="Submit"],
#order-standard_cart button[name="validatepromo"],
#order-standard_cart .btn-validate-promo {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  transition: background .15s !important;
}
#order-standard_cart .btn.btn-default[name="Submit"]:hover,
#order-standard_cart button[name="validatepromo"]:hover {
  background: #1e293b !important;
}
/* Validate button shouldn't get → arrow */
#order-standard_cart .btn.btn-default[name="Submit"]::after,
#order-standard_cart button[name="validatepromo"]::after { content: none !important; }


/* ── DOMAIN CHECKER: Search input + button ─────────────────────────── */
#order-standard_cart .domain-checker-container {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3e2 100%);
  border: 2px solid #fed7aa;
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 28px;
}
#order-standard_cart .tt-domain-search-box {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 6px 6px 6px 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
#order-standard_cart .tt-domain-search-box #inputDomain,
#order-standard_cart .tt-domain-search-box .form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  flex: 1;
}
#order-standard_cart .tt-domain-search-box #inputDomain:focus,
#order-standard_cart .tt-domain-search-box .form-control:focus {
  box-shadow: none !important;
  border: none !important;
}
#order-standard_cart .tt-domain-search-box .input-group-btn { flex-shrink: 0; }
#order-standard_cart #btnCheckAvailability,
#order-standard_cart .domain-check-availability {
  background: #f57200 !important;
  border-color: #eb6600 !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  padding: 10px 24px !important;
  font-size: 15px !important;
  letter-spacing: .01em;
  box-shadow: 0 3px 10px rgba(245,114,0,.3) !important;
}
#order-standard_cart #btnCheckAvailability:hover { background: #d96500 !important; }
#order-standard_cart #btnCheckAvailability::after { content: none !important; }


/* ── SPOTLIGHT TLDs: domain result cards ───────────────────────────── */
#order-standard_cart .spotlight-tlds-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
#order-standard_cart .spotlight-tld {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  transition: border-color .2s, box-shadow .2s;
  min-width: 100px;
}
#order-standard_cart .spotlight-tld:hover { border-color: #f57200; }
#order-standard_cart .spotlight-tld .available.price { color: #16a34a; font-weight: 700; font-size: 13px; }
#order-standard_cart .spotlight-tld .btn-add-to-cart { font-size: 12px !important; padding: 6px 12px !important; border-radius: 8px !important; }


/* ── CHECKOUT: Login form section ──────────────────────────────────── */
#order-standard_cart #containerExistingUserSignin {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
#order-standard_cart #btnExistingLogin {
  width: 100%;
  padding: 12px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-top: 8px;
}
#order-standard_cart #btnExistingLogin::after { content: none !important; }


/* ── CHECKOUT: Password strength meter ─────────────────────────────── */
#order-standard_cart .password-strength-meter .progress {
  height: 6px !important;
  border-radius: 6px !important;
  background: #e2e8f0 !important;
  overflow: hidden;
  margin-top: 8px;
}
#order-standard_cart .progress-bar-success { background: #16a34a !important; }


/* ── CHECKOUT: TOS checkbox ─────────────────────────────────────────── */
#order-standard_cart .tt-captcha-join-mail {
  margin-top: 20px;
}
#order-standard_cart .tt-captcha-join-mail > p {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
#order-standard_cart .tt-captcha-join-mail label.checkbox-inline {
  font-size: 13px !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#order-standard_cart .tt-captcha-join-mail a { color: #f57200 !important; font-weight: 700 !important; }


/* ── ADDONS PAGE: Product cards ─────────────────────────────────────── */
#order-standard_cart .product.tt-rounded.tt-product-addons {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 20px !important;
  background: #fff !important;
  transition: border-color .2s, box-shadow .2s !important;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
}
#order-standard_cart .product.tt-rounded.tt-product-addons:hover {
  border-color: #f57200 !important;
  box-shadow: 0 4px 16px rgba(245,114,0,.1) !important;
}
#order-standard_cart .tt-product-addons h6 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}
#order-standard_cart .tt-product-addons .product-desc {
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
}
#order-standard_cart .tt-product-addons .product-pricing .price {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #f57200 !important;
}
#order-standard_cart .tt-product-addons .product-pricing small {
  font-size: 11px !important;
  color: #64748b !important;
}
#order-standard_cart .tt-product-addons .btn-primary {
  width: 100% !important;
  font-size: 13px !important;
  padding: 10px !important;
}


/* ═══════════════════════════════════════════════════════════════
   ONE-STEP CHECKOUT (OSC) — HostGuru Africa
   All rules scoped to #hg-osc to avoid conflicts
   ═══════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ───────────────────────────────────────────── */
#hg-osc {
  background: #f8fafc;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, sans-serif;
}

/* ── Secure checkout header bar ──────────────────────────────── */
#hg-osc .hg-osc-header {
  background: #0f172a;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}
#hg-osc .hg-osc-header .hg-osc-logo {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
#hg-osc .hg-osc-header .hg-osc-logo span {
  color: #f57200;
}
#hg-osc .hg-osc-header .hg-osc-secure {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 5px 12px;
  border-radius: 20px;
}
#hg-osc .hg-osc-header .hg-osc-secure i { color: #4ade80; }

/* ── Main grid (2-column) ────────────────────────────────────── */
#hg-osc .hg-osc-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  #hg-osc .hg-osc-body {
    grid-template-columns: 1fr;
    padding: 16px 12px;
  }
  #hg-osc .hg-osc-sidebar {
    order: -1;
  }
}

/* ── Section cards (left column) ────────────────────────────── */
#hg-osc .hg-osc-section {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
#hg-osc .hg-osc-section:last-child { margin-bottom: 0; }

#hg-osc .hg-osc-section-header {
  background: #0f172a;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
#hg-osc .hg-osc-section-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f57200;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#hg-osc .hg-osc-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.9);
  margin: 0;
  flex: 1;
}
#hg-osc .hg-osc-section-body {
  padding: 20px;
}

/* ── Order items list ─────────────────────────────────────────── */
#hg-osc .hg-osc-items {}
#hg-osc .hg-osc-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  gap: 12px;
}
#hg-osc .hg-osc-item:last-child { border-bottom: none; padding-bottom: 0; }
#hg-osc .hg-osc-item-info { flex: 1; }
#hg-osc .hg-osc-item-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  display: block;
}
#hg-osc .hg-osc-item-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  display: block;
}
#hg-osc .hg-osc-item-price {
  text-align: right;
  flex-shrink: 0;
}
#hg-osc .hg-osc-item-price .amt {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  display: block;
}
#hg-osc .hg-osc-item-price .cycle {
  font-size: 11px;
  color: #64748b;
  display: block;
}
#hg-osc .hg-osc-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
#hg-osc .hg-osc-item-actions a,
#hg-osc .hg-osc-item-actions button {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  background: none;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.1s;
  text-decoration: none;
}
#hg-osc .hg-osc-item-actions a:hover { color: #f57200; background: #fff7ed; }
#hg-osc .hg-osc-item-actions button:hover { color: #dc2626; background: #fee2e2; }

/* ── Promo code inline ───────────────────────────────────────── */
#hg-osc .hg-osc-promo {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
}
#hg-osc .hg-osc-promo input {
  flex: 1;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  transition: border-color 0.15s;
  outline: none;
  font-family: inherit;
}
#hg-osc .hg-osc-promo input:focus { border-color: #f57200; box-shadow: 0 0 0 3px rgba(245,114,0,0.1); }
#hg-osc .hg-osc-promo button {
  background: #0f172a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
#hg-osc .hg-osc-promo button:hover { background: #1e293b; }
#hg-osc .hg-osc-promo-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #16a34a;
  margin-top: 16px;
  padding-top: 16px;
  border-top: none;
}

/* ── Account section tabs ────────────────────────────────────── */
#hg-osc .hg-osc-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 20px;
}
#hg-osc .hg-osc-tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  border: none;
  background: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
#hg-osc .hg-osc-tab.active {
  color: #f57200;
  border-bottom-color: #f57200;
}
#hg-osc .hg-osc-tab:hover:not(.active) { color: #334155; }

/* Logged-in account banner */
#hg-osc .hg-osc-loggedin-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #166534;
}
#hg-osc .hg-osc-loggedin-banner i { color: #16a34a; font-size: 16px; }
#hg-osc .hg-osc-loggedin-banner a { color: #f57200; font-weight: 700; margin-left: auto; font-size: 12px; }

/* ── Form fields ─────────────────────────────────────────────── */
#hg-osc .hg-osc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
#hg-osc .hg-osc-form-row.single { grid-template-columns: 1fr; }
#hg-osc .hg-osc-form-row.triple { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 600px) {
  #hg-osc .hg-osc-form-row { grid-template-columns: 1fr; }
  #hg-osc .hg-osc-form-row.triple { grid-template-columns: 1fr 1fr; }
}
#hg-osc .hg-osc-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#hg-osc .hg-osc-field label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
#hg-osc .hg-osc-field label .req { color: #f57200; margin-left: 2px; }
#hg-osc .hg-osc-field input,
#hg-osc .hg-osc-field select,
#hg-osc .hg-osc-field textarea {
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #0f172a;
  background: #fff;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
#hg-osc .hg-osc-field input:focus,
#hg-osc .hg-osc-field select:focus,
#hg-osc .hg-osc-field textarea:focus {
  border-color: #f57200;
  box-shadow: 0 0 0 3px rgba(245,114,0,0.1);
}
#hg-osc .hg-osc-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
#hg-osc .hg-osc-field-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* Password strength */
#hg-osc .hg-osc-pw-strength {
  height: 4px;
  background: #e2e8f0;
  border-radius: 4px;
  margin-top: 6px;
  overflow: hidden;
}
#hg-osc .hg-osc-pw-strength-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s, background 0.3s;
  background: #16a34a;
}

/* Generate password btn */
#hg-osc .hg-osc-genpw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  margin-top: 6px;
  transition: all 0.15s;
  font-family: inherit;
}
#hg-osc .hg-osc-genpw:hover { border-color: #f57200; color: #f57200; }

/* ── Payment methods ─────────────────────────────────────────── */
#hg-osc .hg-osc-gateways {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
#hg-osc .hg-osc-gateway-label {
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
}
#hg-osc .hg-osc-gateway-label:hover {
  border-color: #f57200;
  background: #fff7ed;
}
#hg-osc .hg-osc-gateway-label.selected {
  border-color: #f57200;
  background: #fff7ed;
  color: #f57200;
  box-shadow: 0 0 0 3px rgba(245,114,0,0.1);
}
#hg-osc .hg-osc-gateway-label input[type=radio] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#hg-osc .hg-osc-gateway-label .gateway-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
#hg-osc .hg-osc-gateway-label.selected .gateway-icon {
  background: rgba(245,114,0,0.1);
}
#hg-osc #hg-osc-gateway-input {
  margin-top: 4px;
}
#hg-osc .hg-osc-cc-grid {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
}
#hg-osc .hg-osc-cc-row {
  display: grid;
  grid-template-columns: 1fr 120px 100px;
  gap: 12px;
}
@media (max-width: 600px) {
  #hg-osc .hg-osc-cc-row { grid-template-columns: 1fr 1fr; }
}

/* ── TOS + Complete Order ────────────────────────────────────── */
#hg-osc .hg-osc-tos {
  margin: 20px 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
}
#hg-osc .hg-osc-tos input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: #f57200;
  flex-shrink: 0;
  margin-top: 2px;
}
#hg-osc .hg-osc-tos a { color: #f57200; font-weight: 700; }

/* ── Right sticky sidebar ────────────────────────────────────── */
#hg-osc .hg-osc-sidebar {
  position: sticky;
  top: 20px;
}
#hg-osc .hg-osc-summary-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
#hg-osc .hg-osc-summary-header {
  background: #0f172a;
  padding: 14px 20px;
}
#hg-osc .hg-osc-summary-header h3 {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.9);
  margin: 0;
}
#hg-osc .hg-osc-summary-body {
  padding: 16px 20px;
}
#hg-osc .hg-osc-summary-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 13.5px;
  padding: 7px 0;
  gap: 12px;
}
#hg-osc .hg-osc-summary-line .label { color: #64748b; font-weight: 500; flex: 1; }
#hg-osc .hg-osc-summary-line .val { font-weight: 700; color: #0f172a; text-align: right; }
#hg-osc .hg-osc-summary-line .val small { display: block; font-size: 11px; font-weight: 500; color: #64748b; }
#hg-osc .hg-osc-summary-divider {
  border: none;
  border-top: 1.5px solid #f1f5f9;
  margin: 8px 0;
}
#hg-osc .hg-osc-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(135deg, #fff7ed 0%, #fef3e2 100%);
  border-top: 2px solid #fed7aa;
}
#hg-osc .hg-osc-total-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #92400e;
}
#hg-osc .hg-osc-total-amt {
  font-size: 26px;
  font-weight: 900;
  color: #f57200;
  line-height: 1;
}

/* Trust strip */
#hg-osc .hg-osc-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid #f1f5f9;
}
#hg-osc .hg-osc-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
#hg-osc .hg-osc-trust-item i { color: #16a34a; width: 16px; text-align: center; }
#hg-osc .hg-osc-trust-item i.fa-mobile-alt { color: #f57200; }
#hg-osc .hg-osc-trust-item i.fa-shield-alt { color: #3b82f6; }

/* Complete Order button */
#hg-osc .hg-osc-submit-wrap {
  padding: 16px 20px 20px;
  border-top: 1px solid #f1f5f9;
}
#hg-osc #btnCompleteOrder {
  width: 100%;
  background: linear-gradient(135deg, #f57200 0%, #eb6600 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  padding: 16px 24px !important;
  cursor: pointer;
  transition: all 0.2s !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(245,114,0,0.35) !important;
  letter-spacing: 0.01em;
  font-family: inherit;
}
#hg-osc #btnCompleteOrder:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(245,114,0,0.45) !important;
}
#hg-osc #btnCompleteOrder:active {
  transform: translateY(0) !important;
}
#hg-osc #btnCompleteOrder::after { content: none !important; }
#hg-osc .hg-osc-submit-note {
  text-align: center;
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 10px;
  line-height: 1.5;
}
#hg-osc .hg-osc-submit-note a { color: #64748b; }

/* ── Alerts ──────────────────────────────────────────────────── */
#hg-osc .hg-osc-alert {
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
  font-weight: 500;
  border: 1.5px solid;
}
#hg-osc .hg-osc-alert-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
#hg-osc .hg-osc-alert-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #16a34a;
}
#hg-osc .hg-osc-alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

/* ── Login panel ─────────────────────────────────────────────── */
#hg-osc .hg-osc-login-panel {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
#hg-osc .hg-osc-login-panel .hg-osc-form-row { margin-bottom: 12px; }
#hg-osc .hg-osc-login-btn {
  background: #0f172a;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  width: 100%;
  font-family: inherit;
}
#hg-osc .hg-osc-login-btn:hover { background: #1e293b; }

/* Hide WHMCS default layout when one-step is active */
#hg-osc ~ .cart-sidebar,
#hg-osc .cart-sidebar {
  display: none !important;
}

/* Recurring charges display */
#hg-osc .hg-osc-recurring {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}

/* Error feedback at top */
#hg-osc .hg-osc-top-errors {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 13.5px;
  color: #b91c1c;
}
#hg-osc .hg-osc-top-errors ul { margin: 6px 0 0 16px; padding: 0; }

/* ── Sidebar collapse chevron (replaces broken fad fa-chevron-up) ── */
.card-sidebar .card-header .panel-title .hg-sidebar-chevron {
  font-size: 14px;
  line-height: 1;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: transform 0.2s ease;
  display: inline-block;
  font-style: normal;
}
.card-sidebar .card-header .panel-title .hg-sidebar-chevron:hover {
  color: #fff;
}

/* ── Hide ALL fad icons sitewide that have no FA Pro (render as □) ── */
i[class*="fad fa-"] {
  display: none !important;
}
/* Restore safe fad icons we explicitly want to show using fas fallback */
i.fad.fa-check::before    { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c"; display: inline !important; }
i.fad.fa-lock::before     { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f023"; display: inline !important; }
i.fad.fa-user::before     { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; display: inline !important; }
i.fad.fa-phone::before    { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f095"; display: inline !important; }
i.fad.fa-envelope::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0e0"; display: inline !important; }
i.fad.fa-globe-americas::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f57d"; display: inline !important; }
i.fad.fa-map-marker-alt::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f3c5"; display: inline !important; }
i.fad.fa-long-arrow-right::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f30b"; display: inline !important; }


/* ================================================================
   PHASE 1 — ORDER LAYOUT
   Sidebar is now VISIBLE on all pages (matches WHMCS default).
   The checkout overlay (#hg-osc) already hides it during checkout.
   ================================================================ */

/* Keep inner 2-col layout for configure product page */

/* 1c. Keep the inner 2-column layout for configure pages */
#order-standard_cart .row > .secondary-cart-body {
  width: 65% !important;
  max-width: 65% !important;
  flex: 0 0 65% !important;
  padding-right: 20px;
}
#order-standard_cart .row > .secondary-cart-sidebar {
  width: 35% !important;
  max-width: 35% !important;
  flex: 0 0 35% !important;
  position: sticky !important;
  top: 80px !important;
}
@media (max-width: 768px) {
  #order-standard_cart .row > .secondary-cart-body,
  #order-standard_cart .row > .secondary-cart-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-right: 0;
    position: static !important;
  }
}

/* 1d. Style the page header for orderform pages */
#order-standard_cart .header-lined {
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 24px;
  padding-bottom: 12px;
}
#order-standard_cart .header-lined h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

/* 1e. Container padding for orderform */
#order-standard_cart {
  padding: 28px 0;
}

/* ================================================================
   PHASE 1 — MISSING FAD ICON FALLBACKS
   Add ::before content for fad icons without FA Pro fallbacks
   ================================================================ */

/* fa-sync — order summary loader (configureproduct.tpl) */
i.fad.fa-sync::before,
i.fad.fa-sync-alt::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f021";
  display: inline !important;
}

/* fa-map-signs — state field icon (checkout.tpl) */
i.fad.fa-map-signs::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f277";
  display: inline !important;
}

/* fa-certificate — postcode field icon (checkout.tpl) */
i.fad.fa-certificate::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0a3";
  display: inline !important;
}

/* fa-tachometer-alt — dashboard link (complete.tpl) */
i.fad.fa-tachometer-alt::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f3fd";
  display: inline !important;
}

/* fa-shield-alt — SSL upsell (complete.tpl) */
i.fad.fa-shield-alt::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f3ed";
  display: inline !important;
}

/* fa-globe — domain upsell (complete.tpl) — differs from fa-globe-americas */
i.fad.fa-globe::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0ac";
  display: inline !important;
}

/* fa-server — hosting promo (domainregister.tpl) */
i.fad.fa-server::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f233";
  display: inline !important;
}

/* fa-barcode — if used anywhere */
i.fad.fa-barcode::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f02a";
  display: inline !important;
}

/* hg-spin — SVG spinner animation used in configureproduct.tpl */
@keyframes hg-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.hg-spin {
  animation: hg-spin 0.8s linear infinite;
  display: inline-block;
}

/* ================================================================
   PHASE 2+ — PREMIUM ORDER PAGES VISUAL REDESIGN
   Products, Configure, Complete — all styled here
   ================================================================ */

/* ── SHARED: Page wrapper ──────────────────────────────────────── */
#order-standard_cart {
  padding: 0;
}

#order-standard_cart .header-lined {
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 28px;
  padding-bottom: 14px;
}
#order-standard_cart .header-lined h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  letter-spacing: -0.02em;
}
#order-standard_cart .header-lined p {
  font-size: 14px;
  color: #64748b;
  margin: 6px 0 0;
}

/* ── PRODUCTS PAGE — Premium plan cards ───────────────────────── */
#order-standard_cart .products .row.row-eq-height {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 !important;
}
#order-standard_cart .col-md-6.col-lg-4 {
  flex: 0 0 calc(33.333% - 14px);
  max-width: calc(33.333% - 14px);
  padding: 0 !important;
}
@media (max-width: 991px) {
  #order-standard_cart .col-md-6.col-lg-4 {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}
@media (max-width: 600px) {
  #order-standard_cart .col-md-6.col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Individual product card */
.tt-single-product {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
  position: relative;
}
.tt-single-product:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.10) !important;
  border-color: #f57200 !important;
}

/* Featured badge */
.tt-featured-badge {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
}
.tt-featured-badge .badge {
  background: linear-gradient(135deg, #f57200, #eb6600) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  border-radius: 0 14px 0 12px !important;
  padding: 6px 14px !important;
}

/* Card header band (dark navy top) */
.tt-single-product::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #0f172a, #1e293b);
  border-radius: 16px 16px 0 0;
  transition: background 0.2s ease;
}
.tt-single-product:hover::before {
  background: linear-gradient(90deg, #f57200, #eb6600);
}

/* Product name */
.tt-product-name {
  padding: 20px 20px 0 !important;
}
.tt-product-name h5 {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Pricing block */
.tt-product-price,
.product-pricing.tt-product-price {
  padding: 16px 20px !important;
  margin: 0 !important;
}
.tt-product-price .price {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #f57200 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}
.tt-product-price .tt-cycle {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.tt-product-price .text-muted.tt-cycle {
  font-size: 12px !important;
  color: #94a3b8 !important;
  display: block !important;
  margin-top: 4px !important;
}
.tt-product-price small.text-muted {
  font-size: 11px !important;
  background: #fff7ed !important;
  color: #f57200 !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-weight: 700 !important;
}

/* Stock quantity */
.tt-single-product .qty {
  font-size: 11px;
  padding: 0 20px;
  color: #94a3b8;
}

/* Product description / feature list */
.tt-product-desc,
.product-desc.tt-product-desc {
  padding: 0 20px 16px !important;
  flex: 1 !important;
}
.tt-product-desc ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 !important;
}
.tt-product-desc ul li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #475569 !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
.tt-product-desc ul li:last-child { border-bottom: none !important; }
.tt-product-desc ul li .feature-value {
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}
.tt-product-desc ul li svg { margin-top: 2px; flex-shrink: 0; }

/* Order Now button */
.btn-order-now,
a.btn.btn-primary.btn-order-now {
  display: block !important;
  margin: 0 20px 20px !important;
  padding: 12px 20px !important;
  background: linear-gradient(135deg, #f57200, #eb6600) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  letter-spacing: .01em !important;
}
.btn-order-now:hover {
  background: linear-gradient(135deg, #eb6600, #d45d00) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(245,114,0,.35) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Product group featured section */
.tt-group-featured-wrap {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border-radius: 14px !important;
  padding: 24px 28px !important;
  margin-top: 32px !important;
  color: #fff;
}
.tt-group-head {
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: rgba(255,255,255,.7) !important;
  margin-bottom: 16px !important;
}
.tt-group-features-list li {
  font-size: 14px !important;
  color: rgba(255,255,255,.85) !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.tt-group-features-list li:last-child { border-bottom: none !important; }
.tt-group-features-list li svg circle { fill: rgba(245,114,0,.3) !important; }
.tt-group-features-list li svg path { stroke: #ffa040 !important; }

/* ── CONFIGURE PRODUCT PAGE ────────────────────────────────────── */
/* Left column — config options */
.secondary-cart-body .product-info {
  background: linear-gradient(135deg, #f8fafc, #fff);
  border: 1.5px solid #e2e8f0;
  border-left: 4px solid #f57200;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.secondary-cart-body .product-info .product-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px !important;
}
.secondary-cart-body .product-info p:last-child {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

/* Sub-headings inside configure form */
.secondary-cart-body .sub-heading {
  margin: 24px 0 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1.5px solid #e2e8f0 !important;
}
.secondary-cart-body .sub-heading .primary-bg-color {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #64748b !important;
  background: none !important;
}

/* Billing cycle select → styled dropdown */
#inputBillingcycle.custom-select {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #fff !important;
  cursor: pointer !important;
  max-width: 280px;
}
#inputBillingcycle.custom-select:focus {
  border-color: #f57200 !important;
  box-shadow: 0 0 0 3px rgba(245,114,0,.12) !important;
  outline: none !important;
}

/* Addon cards */
.panel-addon {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  cursor: pointer !important;
  margin-bottom: 12px !important;
}
.panel-addon:hover, .panel-addon-selected {
  border-color: #f57200 !important;
  box-shadow: 0 4px 16px rgba(245,114,0,.1) !important;
}
.panel-addon .card-body {
  padding: 14px 16px !important;
  font-size: 13.5px !important;
}
.panel-addon .card-body label { font-weight: 700 !important; color: #0f172a !important; cursor: pointer !important; }
.panel-addon .panel-price {
  padding: 8px 16px !important;
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f57200 !important;
}
.panel-addon .panel-add {
  display: none !important;
}

/* Right column — order summary */
.secondary-cart-sidebar .order-summary {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.secondary-cart-sidebar .order-summary h2.font-size-30 {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 !important;
  background: #0f172a;
  padding: 16px 20px !important;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.secondary-cart-sidebar .summary-container {
  padding: 16px 20px !important;
}
.secondary-cart-sidebar #producttotal {
  font-size: 13.5px;
  color: #334155;
  line-height: 1.7;
  margin-bottom: 14px;
}
.secondary-cart-sidebar .loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
}
.secondary-cart-sidebar #btnCompleteProductConfig {
  background: linear-gradient(135deg, #f57200, #eb6600) !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 20px !important;
  color: #fff !important;
  width: 100% !important;
  transition: all 0.15s ease !important;
}
.secondary-cart-sidebar #btnCompleteProductConfig:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(245,114,0,.35) !important;
}

/* Alert style inside configure page */
.secondary-cart-body .alert-warning.info-text-sm {
  background: #fffbeb !important;
  border: 1.5px solid #fde68a !important;
  border-radius: 10px !important;
  color: #92400e !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
  margin-top: 24px !important;
}

/* ── COMPLETE PAGE — Success celebration ───────────────────────── */

/* Success header */
#order-standard_cart .order-confirmation {
  background: linear-gradient(135deg, #dcfce7, #f0fdf4) !important;
  border: 1.5px solid #bbf7d0 !important;
  border-radius: 14px !important;
  color: #15803d !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 18px 24px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Add a success icon before the order number text */
#order-standard_cart .order-confirmation::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Ccircle cx='14' cy='14' r='14' fill='%2316a34a' opacity='.15'/%3E%3Cpath d='M9 14l4 4 7-7' stroke='%2316a34a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  flex-shrink: 0;
}

/* Complete page Go to Dashboard button */
#order-standard_cart .cart-body .btn-primary[href*="clientarea"] {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  transition: all 0.15s ease !important;
}
#order-standard_cart .cart-body .btn-primary[href*="clientarea"]:hover {
  background: linear-gradient(135deg, #1e293b, #334155) !important;
  transform: translateY(-1px) !important;
}

/* Complete page upsell section */
#order-standard_cart .cart-body > div:last-of-type > .row .col-sm-4 a {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 20px !important;
  transition: all 0.2s ease !important;
  background: #fff !important;
  height: 100%;
}
#order-standard_cart .cart-body > div:last-of-type > .row .col-sm-4 a:hover {
  border-color: #f57200 !important;
  box-shadow: 0 8px 24px rgba(245,114,0,.12) !important;
  transform: translateY(-3px) !important;
}

/* Referral strip */
#order-standard_cart div[style*="rgba(245,114,0"] {
  border-radius: 12px !important;
  padding: 14px 20px !important;
}

/* ── SIDEBAR-COLLAPSED (mobile category selector) ─────────────── */
.sidebar-collapsed {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.sidebar-collapsed .custom-select {
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: #334155 !important;
}
.sidebar-collapsed .custom-select:focus {
  border-color: #f57200 !important;
  box-shadow: 0 0 0 3px rgba(245,114,0,.12) !important;
}

/* ── ERROR PAGE ───────────────────────────────────────────────── */
#order-standard_cart .alert-danger .fas.fa-exclamation-triangle {
  margin-right: 8px;
  color: #dc2626;
}

/* ── MOBILE RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #order-standard_cart { padding: 16px 12px; }
  #order-standard_cart .header-lined h2 { font-size: 20px !important; }
  .tt-single-product { border-radius: 12px !important; }
  .tt-product-price .price { font-size: 24px !important; }
  .secondary-cart-sidebar { margin-top: 24px; }
}

/* ================================================================
   NUCLEAR FIX — CART SIDEBAR + STEPS
   These rules use maximum specificity to override all theme CSS
   ================================================================ */

/* Keep step indicator hidden (not used in this theme) */
.hg-steps-wrap,
.hg-steps-row,
div.hg-steps-wrap {
  display: none !important;
}

/* Cart sidebar is NOW VISIBLE — restored for WHMCS default layout */
/* The checkout overlay (#hg-osc ~ .cart-sidebar) hides it during checkout */