/* ============================================================
   YEETAPP-ORDER — brand reskin of the Standard Cart order form
   Loaded via common.tpl (order pages only). Reuses --ya-* tokens
   from yeetapp.css (present on the page through the client shell).
   ============================================================ */

/* ---- page rhythm ---------------------------------------------------- */
#order-standard_cart, #order-standard_cart { color: var(--ya-ink); }
#order-standard_cart .header-lined,
#order-standard_cart h1, .ordersummary h1 {
  font-size: 24px; font-weight: 800; color: var(--ya-ink);
  border: 0; padding: 0; margin: 0 0 4px;
}
#order-standard_cart .header-lined small { color: var(--ya-muted); font-weight: 500; }
#order-standard_cart .text-center.header-lined { text-align: left; }

/* ---- generic cards / panels ---------------------------------------- */
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .panel,
#order-standard_cart .card {
  background: var(--ya-card); border: 1px solid var(--ya-line);
  border-radius: var(--ya-radius); box-shadow: 0 1px 2px rgba(15,23,42,.04);
  margin-bottom: 18px; overflow: hidden;
}
#order-standard_cart .panel-heading,
#order-standard_cart .card-header {
  background: var(--ya-soft); border-bottom: 1px solid var(--ya-line);
  padding: 14px 18px; font-weight: 700; color: var(--ya-ink);
}
#order-standard_cart .panel-title { font-size: 15px; font-weight: 700; }
#order-standard_cart .panel-body, #order-standard_cart .card-body { padding: 18px; }

/* ---- plan / product cards (products.tpl) --------------------------- */
#order-standard_cart .products .product,
#order-standard_cart .product.clearfix {
  background: var(--ya-card); border: 1px solid var(--ya-line);
  border-radius: var(--ya-radius); padding: 22px 22px 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  display: flex; flex-direction: column; height: 100%;
}
#order-standard_cart .products .product:hover {
  transform: translateY(-3px); border-color: var(--ya-brand);
  box-shadow: 0 12px 28px rgba(37,99,235,.12);
}
#order-standard_cart .product h3,
#order-standard_cart .product .product-desc h3 { font-size: 18px; font-weight: 800; color: var(--ya-ink); margin: 0 0 8px; }
#order-standard_cart .product .product-desc { color: var(--ya-muted); font-size: 13.5px; line-height: 1.55; flex: 1; }
#order-standard_cart .product .price { color: var(--ya-brand); font-weight: 800; line-height: 1.1; }
/* page heading ("Select your package") — dark + sized to match the dashboard h1 */
#order-standard_cart .header-lined h1,
#order-standard_cart h1.font-size-36,
#order-standard_cart .font-size-36 { color: var(--ya-ink) !important; font-size: 24px !important; font-weight: 800; }
#order-standard_cart .header-lined p { color: var(--ya-muted); font-size: 14px; margin-top: 2px; }

/* plan-name header (was a default gray bar) → clean card title */
#order-standard_cart .product > header {
  background: none !important; border: 0; border-bottom: 1px solid var(--ya-line);
  padding: 0 0 12px; margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--ya-ink); line-height: 1.35;
}
#order-standard_cart .product > header .qty { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--ya-muted); }

/* feature list → clean blue-check checklist */
#order-standard_cart .product .product-desc ul { list-style: none; margin: 6px 0 0; padding: 0; }
#order-standard_cart .product .product-desc ul li {
  position: relative; padding: 6px 0 6px 26px; font-size: 13.5px; color: #475569; border: 0; line-height: 1.45;
}
#order-standard_cart .product .product-desc ul li:before {
  content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900;
  position: absolute; left: 0; top: 6px; color: var(--ya-brand); font-size: 12px;
}
#order-standard_cart .product .product-desc ul li .feature-value { font-weight: 700; color: var(--ya-ink); }

/* Most plans list features as the client's featuresdesc HTML
   (<font size color="#306897"><strong><br>…</strong></font>) rather than WHMCS
   structured features — neutralise that inline blue/bold to match the theme. */
#order-standard_cart .product .product-desc font,
#order-standard_cart .product .product-desc strong,
#order-standard_cart .product .product-desc b,
#order-standard_cart .product .product-desc p,
#order-standard_cart .product .product-desc span {
  color: #475569 !important; font-weight: 500 !important;
  font-size: 13.5px !important; font-family: inherit !important; line-height: 1.95;
}
#order-standard_cart .product .product-pricing { margin: 14px 0; }
#order-standard_cart .product .product-pricing .price { font-size: 30px; }
#order-standard_cart .product .cycle, #order-standard_cart .product .term { color: var(--ya-muted); font-weight: 600; font-size: 13px; }

/* ---- buttons ------------------------------------------------------- */
#order-standard_cart .btn,
#order-standard_cart .btn,
.order-summary .btn {
  border-radius: 11px; font-weight: 700; border: 0; padding: 11px 18px;
}
#order-standard_cart .btn-primary,
#order-standard_cart .btn-success,
.order-summary .btn-checkout,
#order-standard_cart .product .btn {
  background: var(--ya-brand) !important; color: #fff !important;
}
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-success:hover,
.order-summary .btn-checkout:hover,
#order-standard_cart .product .btn:hover { background: var(--ya-brand-dark) !important; color: #fff !important; }
/* the card footer was shrink-wrapping to the button (≈150px) and hugging the
   left edge — make it span the card and CENTER a comfortably-sized button */
#order-standard_cart .product > footer,
#order-standard_cart .product footer {
  width: 100% !important; align-self: stretch !important; flex: 0 0 auto;
  box-sizing: border-box !important; display: block !important;
  padding: 2px 0 0 !important; text-align: center !important; margin-top: auto;
}
#order-standard_cart .product .btn,
#order-standard_cart .product footer .btn,
#order-standard_cart .product footer > a {
  width: auto !important; min-width: 180px; max-width: 100%;
  margin: 18px auto 0 !important;
  padding: 12px 26px !important; font-size: 15px !important; box-sizing: border-box !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
}
.order-summary .btn-checkout, .btn-checkout.btn-lg {
  width: 100%; padding: 14px; font-size: 16px; border-radius: 12px;
  box-shadow: 0 8px 20px rgba(37,99,235,.22);
}
#order-standard_cart .btn-default {
  background: #fff !important; color: var(--ya-ink) !important;
  border: 1px solid var(--ya-line) !important;
}
#order-standard_cart .btn-default:hover { border-color: var(--ya-brand) !important; color: var(--ya-brand) !important; }
#order-standard_cart .btn-link, #order-standard_cart .btn-continue-shopping { color: var(--ya-brand) !important; font-weight: 600; }

/* ---- order summary sidebar ----------------------------------------- */
.cart-sidebar .panel.card-sidebar,
.order-summary, .summary-container {
  border-radius: var(--ya-radius); border: 1px solid var(--ya-line);
}
.cart-sidebar { position: sticky; top: 18px; }
.order-summary .summary-container { padding: 4px 2px; }
.order-summary .item, .summary-container .item {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed var(--ya-line); font-size: 14px;
}
.order-summary .item:last-child { border-bottom: 0; }
.order-summary .total, .summary-container .total {
  font-weight: 800; font-size: 17px; color: var(--ya-ink);
  border-top: 2px solid var(--ya-line); margin-top: 6px; padding-top: 12px;
}
.order-summary .total .amount, .order-summary .total span:last-child { color: var(--ya-brand); }

/* ---- forms (configure + checkout) ---------------------------------- */
#order-standard_cart .form-control,
#order-standard_cart .form-control,
#checkoutFrm .form-control {
  border-radius: 10px; border: 1px solid var(--ya-line);
  padding: 11px 13px; font-size: 14px; background: #fff; color: var(--ya-ink);
  box-shadow: none; height: auto;
}
#order-standard_cart .form-control:focus, #checkoutFrm .form-control:focus {
  border-color: var(--ya-brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
#order-standard_cart label, #checkoutFrm label { font-weight: 700; color: #334155; font-size: 13px; margin-bottom: 5px; }
#order-standard_cart .input-group-text { border-radius: 10px; border-color: var(--ya-line); background: var(--ya-soft); }

/* ---- checkout: payment-method tiles -------------------------------- */
#checkoutFrm .payment-methods label, .paymentmethod label {
  border: 1px solid var(--ya-line); border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
#checkoutFrm .payment-methods label:hover { border-color: var(--ya-brand); background: var(--ya-soft); }

/* ---- promo / alerts ------------------------------------------------ */
#order-standard_cart .alert {
  border-radius: 12px; border: 1px solid var(--ya-line);
  padding: 13px 16px; font-size: 14px;
}
#order-standard_cart .alert-info { background: #eff4ff; border-color: #c7d6f5; color: #1e3a8a; }
#order-standard_cart .alert-success { background: var(--ya-okbg); border-color: #bbf7d0; color: #166534; }
#order-standard_cart .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ---- promo code / qty ---------------------------------------------- */
#order-standard_cart .qty input, #order-standard_cart input.qty {
  border-radius: 10px; border: 1px solid var(--ya-line); text-align: center; padding: 9px;
}

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .cart-sidebar { position: static; }
  #order-standard_cart .products .product { margin-bottom: 14px; }
}

/* YEETAPP-ORDER-LAYOUT — store/products page: narrow categories rail + products fill the rest,
   responsive auto-fill card grid (replaces the fixed 25% float sidebar + 2-up col-md-6). */
#order-standard_cart .row:has(.products){display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;margin:0}
#order-standard_cart .row:has(.products) > .cart-sidebar{float:none;width:250px;flex:0 0 250px;max-width:250px;padding:0;position:static}
#order-standard_cart .row:has(.products) > .cart-body{float:none;width:auto;flex:1 1 320px;min-width:0;padding:0}
#order-standard_cart .products > .row{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;margin:0 0 20px}
#order-standard_cart .products > .row:empty{display:none;margin:0}
#order-standard_cart .products > .row > [class*="col-"]{width:auto;max-width:none;float:none;padding:0;margin:0}
@media(max-width:760px){
  #order-standard_cart .row:has(.products){display:block}
  #order-standard_cart .row:has(.products) > .cart-sidebar{width:auto;max-width:none;margin-bottom:16px}
}
/* END YEETAPP-ORDER-LAYOUT */

/* YEETAPP-ORDER-BRAND — bring the whole order flow (configure / cart / checkout) on-brand */

/* Order Summary header (was a dark-grey bar) -> brand gradient */
.order-summary h2,
.order-summary h2.font-size-30 {
  background: linear-gradient(135deg, var(--ya-brand), var(--ya-brand-dark)) !important;
  color: #fff !important; margin: 0 !important; padding: 15px 18px !important;
  font-size: 18px !important; font-weight: 800; border: 0 !important;
  border-radius: var(--ya-radius) var(--ya-radius) 0 0;
}
.order-summary h2 i, .order-summary h2 .fa, .order-summary h2 svg { color: #fff !important; }

/* configure/cart product features (client's featuresdesc <font color="#306897">) -> muted, on-brand */
.product-info font, .product-info strong, .product-info b,
.secondary-cart-body font, .secondary-cart-body strong,
#order-standard_cart .product-info font, #order-standard_cart .product-info strong {
  color: #475569 !important; font-weight: 500 !important; font-family: inherit !important;
}

/* teal "Already Registered" + green "I AGREE" consent + generic info buttons -> brand */
#btnAlreadyRegistered, #agreeConsentBtn,
#order-standard_cart .btn-info, #checkoutFrm .btn-info {
  background: var(--ya-brand) !important; border-color: var(--ya-brand) !important; color: #fff !important;
}
#btnAlreadyRegistered:hover, #agreeConsentBtn:hover,
#order-standard_cart .btn-info:hover, #checkoutFrm .btn-info:hover {
  background: var(--ya-brand-dark) !important; border-color: var(--ya-brand-dark) !important; color: #fff !important;
}

/* section dividers (.header-lined "Additional Information", "Personal Information", etc.) -> brand */
#order-standard_cart .header-lined, #checkoutFrm .header-lined,
#order-standard_cart .header-lined span, #checkoutFrm .header-lined span,
#order-standard_cart .header-lined h3, #checkoutFrm .header-lined h3 { color: var(--ya-brand) !important; }

/* cart items header bar (Product/Options — deep WHMCS teal #005588) -> brand */
.view-cart-items-header,
#order-standard_cart .view-cart-items-header {
  background: linear-gradient(135deg, var(--ya-brand), var(--ya-brand-dark)) !important;
  color: #fff !important; border: 0 !important;
}
.view-cart-items-header, .view-cart-items-header * { color: #fff !important; }

/* Order Summary card: header has 16px corners but card had 4px -> match + clip cleanly */
.order-summary {
  border-radius: 14px !important; overflow: hidden;
  border: 1px solid var(--ya-line) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.order-summary h2, .order-summary h2.font-size-30 { border-radius: 0 !important; }

/* "Empty Cart" -> clean ghost-danger (was a stray solid-blue button) */
#order-standard_cart .empty-cart .btn, .empty-cart .btn, #btnEmptyCart {
  background: #fff !important; color: #dc2626 !important;
  border: 1px solid var(--ya-line) !important; border-radius: 10px !important; box-shadow: none;
}
#order-standard_cart .empty-cart .btn:hover, .empty-cart .btn:hover, #btnEmptyCart:hover {
  border-color: #dc2626 !important; background: #fef2f2 !important; color: #dc2626 !important;
}
/* END YEETAPP-ORDER-BRAND */

/* YEETAPP-ORDER-DARK — dark mode for the order flow (configure / cart / checkout / signup).
   Brand headers/buttons stay brand; cards, forms, fields, labels flip to the dark tokens. */
html[data-ya-theme="dark"] #order-standard_cart,
html[data-ya-theme="dark"] #checkoutFrm { color: var(--ya-ink); }

/* cards / panels / product + summary bodies */
html[data-ya-theme="dark"] #order-standard_cart .panel,
html[data-ya-theme="dark"] #order-standard_cart .card,
html[data-ya-theme="dark"] #order-standard_cart .product,
html[data-ya-theme="dark"] #order-standard_cart .product.clearfix,
html[data-ya-theme="dark"] #order-standard_cart .secondary-cart-body,
html[data-ya-theme="dark"] .order-summary,
html[data-ya-theme="dark"] .summary-container {
  background: var(--ya-card) !important; border-color: var(--ya-line) !important; color: var(--ya-ink);
}

/* the Order Summary body (header gradient stays brand) */
html[data-ya-theme="dark"] .order-summary .item,
html[data-ya-theme="dark"] .summary-container .item,
html[data-ya-theme="dark"] .order-summary .total,
html[data-ya-theme="dark"] .summary-container .total { border-color: var(--ya-line) !important; color: var(--ya-ink); }

/* form fields + input groups */
html[data-ya-theme="dark"] #order-standard_cart .form-control,
html[data-ya-theme="dark"] #checkoutFrm .form-control,
html[data-ya-theme="dark"] #order-standard_cart .input-group-text,
html[data-ya-theme="dark"] #checkoutFrm .input-group-text,
html[data-ya-theme="dark"] #order-standard_cart select,
html[data-ya-theme="dark"] #checkoutFrm select,
html[data-ya-theme="dark"] #order-standard_cart textarea,
html[data-ya-theme="dark"] #checkoutFrm textarea {
  background: var(--ya-soft) !important; border-color: var(--ya-line) !important; color: var(--ya-ink) !important;
}
html[data-ya-theme="dark"] #order-standard_cart .form-control::placeholder,
html[data-ya-theme="dark"] #checkoutFrm .form-control::placeholder,
html[data-ya-theme="dark"] #checkoutFrm textarea::placeholder { color: var(--ya-muted) !important; }

/* labels + muted text */
html[data-ya-theme="dark"] #order-standard_cart label,
html[data-ya-theme="dark"] #checkoutFrm label { color: var(--ya-ink) !important; }
html[data-ya-theme="dark"] #order-standard_cart .text-muted,
html[data-ya-theme="dark"] #checkoutFrm .text-muted,
html[data-ya-theme="dark"] #order-standard_cart small,
html[data-ya-theme="dark"] #checkoutFrm small { color: var(--ya-muted) !important; }

/* product features (client featuresdesc) — readable on dark */
html[data-ya-theme="dark"] #order-standard_cart .product-info font,
html[data-ya-theme="dark"] #order-standard_cart .product-info strong,
html[data-ya-theme="dark"] #order-standard_cart .product-info b,
html[data-ya-theme="dark"] .product-info font,
html[data-ya-theme="dark"] .product-info strong,
html[data-ya-theme="dark"] #order-standard_cart .product .product-desc font,
html[data-ya-theme="dark"] #order-standard_cart .product .product-desc strong { color: var(--ya-muted) !important; }

/* ghost / default buttons that were hard-coded white */
html[data-ya-theme="dark"] #order-standard_cart .btn-default,
html[data-ya-theme="dark"] #checkoutFrm .btn-default,
html[data-ya-theme="dark"] .empty-cart .btn,
html[data-ya-theme="dark"] #order-standard_cart .empty-cart .btn {
  background: var(--ya-card) !important; color: var(--ya-ink) !important; border-color: var(--ya-line) !important;
}

/* checkout payment-method tiles */
html[data-ya-theme="dark"] #checkoutFrm .payment-methods label,
html[data-ya-theme="dark"] .paymentmethod label {
  background: var(--ya-card) !important; border-color: var(--ya-line) !important; color: var(--ya-ink) !important;
}
html[data-ya-theme="dark"] #checkoutFrm .payment-methods label:hover { background: var(--ya-soft) !important; }

/* cart / item tables */
html[data-ya-theme="dark"] #order-standard_cart table td,
html[data-ya-theme="dark"] #order-standard_cart table th { border-color: var(--ya-line) !important; color: var(--ya-ink); }

/* category sidebar header + generic panel headings (non-brand) */
html[data-ya-theme="dark"] #order-standard_cart .panel-heading:not(.card-header),
html[data-ya-theme="dark"] #order-standard_cart .cart-sidebar .panel-heading { background: var(--ya-soft) !important; color: var(--ya-ink) !important; border-color: var(--ya-line) !important; }
/* configure-page product summary box (.product-info hard-codes #f8f8f8) -> dark card */
html[data-ya-theme="dark"] #order-standard_cart .product-info { background: var(--ya-card) !important; color: var(--ya-ink) !important; }
/* section-header line-mask spans (.primary-bg-color = #f1f1f1) -> match the dark page bg */
html[data-ya-theme="dark"] #order-standard_cart .primary-bg-color,
html[data-ya-theme="dark"] #checkoutFrm .primary-bg-color { background: var(--ya-bg) !important; }
/* cart item rows (white .item) + promo tab wrapper (#f8f8f8) + new-card box (#f3f3f3) -> dark */
html[data-ya-theme="dark"] #order-standard_cart .item,
html[data-ya-theme="dark"] #order-standard_cart .tab-content,
html[data-ya-theme="dark"] #checkoutFrm .cc-input-container,
html[data-ya-theme="dark"] #checkoutFrm #creditCardInputFields,
html[data-ya-theme="dark"] .cc-input-container { background: var(--ya-card) !important; border-color: var(--ya-line) !important; }
html[data-ya-theme="dark"] #checkoutFrm .cc-input-container .text-muted,
html[data-ya-theme="dark"] #checkoutFrm #creditCardInputFields label { color: var(--ya-muted) !important; }
/* "Apply Promo Code" tab pill (Bootstrap active nav-tab = white) -> dark */
html[data-ya-theme="dark"] #order-standard_cart .nav-tabs .nav-link,
html[data-ya-theme="dark"] #order-standard_cart .nav-tabs > li > a { color: var(--ya-muted) !important; background: transparent !important; border-color: var(--ya-line) !important; }
html[data-ya-theme="dark"] #order-standard_cart .nav-tabs .nav-link.active,
html[data-ya-theme="dark"] #order-standard_cart .nav-tabs > li.active > a {
  background: var(--ya-card) !important; color: var(--ya-ink) !important;
  border-color: var(--ya-line) var(--ya-line) var(--ya-card) !important;
}

/* product/plan name (theme hard-codes #333) -> light in dark */
html[data-ya-theme="dark"] #order-standard_cart .product > header,
html[data-ya-theme="dark"] #order-standard_cart .product > header span[id*="-name"],
html[data-ya-theme="dark"] #order-standard_cart .product h3,
html[data-ya-theme="dark"] #order-standard_cart .product .product-name,
html[data-ya-theme="dark"] .order-summary .summary-container,
html[data-ya-theme="dark"] .summary-container strong,
html[data-ya-theme="dark"] .summary-container b { color: var(--ya-ink) !important; }
/* END YEETAPP-ORDER-DARK */