/* ============================================================
   YD CHECKOUT SKIN — served as a real stylesheet file.
   Why a file: NitroPack defers/strips inline <style> blocks for real
   browsers (the dark form panel from post-5757.css rendered while the
   body from the inline skin stayed white). File CSS is the delivery
   path the browser has proven it loads. Enqueued with filemtime() as
   the version, so every edit is cache-busted automatically.
   ============================================================ */

:root{
  --yd-bg:#08090C;--yd-card:#11131A;--yd-card-2:#151823;--yd-line:#242838;
  --yd-tx:#E9EAEE;--yd-mut:#A7AEBE;--yd-dim:#5E6474;
  --yd-gold:#FFB800;--yd-gold-2:#FFE08A;--yd-gold-3:#E08A00;
  --yd-grad:linear-gradient(135deg,var(--yd-gold-2),var(--yd-gold) 46%,var(--yd-gold-3));
}

/* ---------- ground ---------- */
html,body,
body.woocommerce-checkout,
.wfacp-main-wrapper,.wfacp_main_form,#wfacp-e-form,
[data-elementor-type] .elementor-section,
.elementor{background-color:transparent}
html{background:var(--yd-bg)!important}
body{background:var(--yd-bg)!important;color:var(--yd-tx)!important;position:relative}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1000px 560px at 10% -12%,rgba(255,184,0,.14),transparent 60%),
    radial-gradient(820px 480px at 94% 3%,rgba(255,96,0,.09),transparent 58%),
    radial-gradient(1100px 720px at 50% 110%,rgba(255,184,0,.07),transparent 62%);
}
body>*{position:relative;z-index:1}

/* sections that still carry a light template background */
.elementor-section[data-settings],.elementor-section,
.elementor-top-section{background-color:transparent!important}
.elementor-column>.elementor-widget-wrap.elementor-element-populated{background-color:transparent}

/* ---------- header: logo + step breadcrumb on one clean bar ---------- */
.elementor-widget-image img[src*="yd-circle-logo"]{
  max-height:60px!important;width:auto!important;border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,184,0,.35), 0 10px 30px -12px rgba(255,184,0,.6);
}
/* breadcrumb steps — the maroon accents come from kit globals, not post CSS */
#wfacp-e-form .wfacp_custom_breadcrumb li,
.wfacp_custom_breadcrumb .wfacp_steps_sec li{color:var(--yd-mut)!important}
.wfacp_custom_breadcrumb li.active,
.wfacp_custom_breadcrumb li.active a{color:var(--yd-gold)!important;font-weight:800}
.wfacp_custom_breadcrumb li:before{background:var(--yd-card)!important;border-color:var(--yd-line)!important}
.wfacp_custom_breadcrumb li.active:before{background:var(--yd-gold)!important;border-color:var(--yd-gold)!important}
/* the maroon divider/icon accents */
.elementor-widget-divider .elementor-divider-separator{border-color:rgba(255,184,0,.4)!important}
.elementor-icon,.elementor-icon i,.elementor-icon svg,
.elementor-widget-icon .elementor-icon{color:var(--yd-gold)!important;fill:var(--yd-gold)!important}

/* ---------- typography / alignment ---------- */
h1,h2,h3,h4,h5,.elementor-heading-title{
  color:var(--yd-tx);font-weight:800!important;letter-spacing:-.02em;line-height:1.15}
/* the hero pair: keep both centred so the sub-line hangs under the headline */
.elementor-widget-heading{text-align:inherit}
.elementor-section .elementor-column .elementor-widget-heading .elementor-heading-title{
  margin-inline:auto;max-width:22ch}
p,li,.elementor-widget-text-editor{color:var(--yd-mut)}
strong,b{color:var(--yd-tx)}
.wfacp-main-wrapper a:not(.btn){color:var(--yd-gold)}

/* ---------- panels ---------- */
.wfacp-order-summary,.wfacp_mini_cart,.wfacp-section,.wfacp-form-wrapper,
.woocommerce-checkout-review-order,.wfacp-payment-section{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--yd-card)!important;
  border:1px solid var(--yd-line)!important;border-radius:14px!important;
  box-shadow:0 26px 60px -40px #000;
}
/* the dashed "discount applied" box — was white with a red dashed border */
.elementor-column[class*="border"],.elementor-widget-container>.elementor-element[class*="dash"]{border-color:rgba(255,184,0,.45)!important}
.elementor-section .elementor-column .elementor-widget-wrap[style*="border"],
.elementor-column .elementor-widget-wrap.elementor-element-populated[class]{background-clip:padding-box}

/* ---------- inputs ---------- */
#wfacp-e-form .wfacp_main_form.woocommerce .wfacp-form-control:not(.input-checkbox):not(.hidden),
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=password],select,textarea,.select2-selection{
  background:#0C0E14!important;border:1px solid var(--yd-line)!important;
  color:var(--yd-tx)!important;border-radius:10px!important;min-height:46px;
}
input::placeholder,textarea::placeholder{color:var(--yd-dim)!important}
input:focus,select:focus,textarea:focus{
  border-color:var(--yd-gold)!important;outline:none!important;
  box-shadow:0 0 0 3px rgba(255,184,0,.15)!important}
.wfacp-form label,.woocommerce-input-wrapper label{color:var(--yd-mut)!important}
.wfacp_allowed_countries strong{
  background:rgba(255,184,0,.14)!important;color:var(--yd-gold)!important;
  padding:1px 6px;border-radius:5px}

/* ---------- totals + CTA ---------- */
.order-total .amount,.wfacp-order-total .amount,.wfacp_total_amount{
  color:var(--yd-gold)!important;font-weight:800!important}
#place_order,.wfacp_next_page,button.button.alt{
  background:var(--yd-grad)!important;color:#0A0A0C!important;border:0!important;
  font-weight:800!important;border-radius:12px!important;
  padding:16px 26px!important;font-size:1.05rem!important;
  box-shadow:0 16px 40px -16px rgba(255,184,0,.9)!important;
  transition:transform .15s ease}
#place_order:hover{transform:translateY(-1px)}
.wfacp-order-place-btn-wrap button:before{color:#0A0A0C!important}
table,table th,table td,.wfacp_mini_cart_item{
  border-color:var(--yd-line)!important;color:var(--yd-tx)!important;background:transparent!important}
.woocommerce-info,.woocommerce-message{
  background:rgba(255,184,0,.08)!important;border-color:rgba(255,184,0,.32)!important;
  color:var(--yd-tx)!important}
.woocommerce form .form-row .required{color:var(--yd-gold)}

/* step header */
.wfacp-order2StepTitle{font-size:1.02rem!important;font-weight:800!important;color:var(--yd-tx)!important}
.wfacp-order2StepSubTitle{font-size:.8rem!important;color:var(--yd-mut)!important}
.wfacp-order2StepNumber{background:var(--yd-grad)!important;color:#0A0A0C!important;font-weight:800!important}

/* demo leftovers that must never render */
img[src*="cloudfront.net/templates"]{display:none!important}

@media(max-width:768px){
  .elementor-widget-image img[src*="yd-circle-logo"]{max-height:46px!important}
  #place_order{width:100%!important}
}

/* ============================================================
   ALIGNMENT FIXES — 2026-09-10
   From a live screenshot: the order-summary table rendered white
   bands (WooCommerce/FunnelKit set explicit #fff on thead/rows),
   the quantity stepper showed as a black box with the number
   invisible, and the floating labels on Country/State sat on top
   of the select text instead of above it.
   ============================================================ */

/* --- order summary table: kill the white bands --- */
.wfacp-order-summary table,
.wfacp-order-summary thead,
.wfacp-order-summary tbody,
.wfacp-order-summary tr,
.wfacp-order-summary th,
.wfacp-order-summary td,
#wfacp-e-form table.shop_table,
#wfacp-e-form table.shop_table thead,
#wfacp-e-form table.shop_table tbody tr,
#wfacp-e-form table.shop_table th,
#wfacp-e-form table.shop_table td,
.wfacp_mini_cart,.wfacp_mini_cart *{
  background:transparent!important;
  color:var(--yd-tx)!important;
  border-color:var(--yd-line)!important;
}
.wfacp-order-summary thead th,
#wfacp-e-form table.shop_table thead th{
  color:var(--yd-mut)!important;font-size:.74rem!important;
  letter-spacing:.08em;text-transform:uppercase;font-weight:800!important;
  border-bottom:1px solid var(--yd-line)!important;
}
/* product rows: subtle card instead of a white slab */
#wfacp-e-form table.shop_table tbody tr,
.wfacp_mini_cart_item{
  background:rgba(255,255,255,.03)!important;
  border-bottom:1px solid var(--yd-line)!important;
}
.wfacp_mini_cart_item_name,.product-name{color:var(--yd-tx)!important;font-weight:700}
/* the "Buy 1 and Save" savings line was red-on-dark */
.wfacp_you_save,.wfacp-save-text,[class*="you_save"]{color:#3AE87A!important;font-weight:700}
.product-total,.wfacp_mini_cart_item_price{color:var(--yd-gold)!important;font-weight:800}
del,del *{color:var(--yd-dim)!important}

/* --- quantity stepper: was a black box with an invisible number --- */
.wfacp_quantity_selector,.quantity{
  display:inline-flex!important;align-items:center;gap:0;
  background:#0C0E14!important;border:1px solid var(--yd-line)!important;
  border-radius:10px!important;overflow:hidden}
.wfacp_quantity_selector input,.quantity input.qty{
  background:transparent!important;color:var(--yd-tx)!important;
  border:0!important;text-align:center!important;width:46px!important;
  min-height:38px!important;font-weight:800;-moz-appearance:textfield}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wfacp_quantity_selector .wfacp_quantity_incrementer,
.wfacp_quantity_selector button,.quantity .plus,.quantity .minus{
  background:rgba(255,255,255,.06)!important;color:var(--yd-tx)!important;
  border:0!important;width:34px;min-height:38px;cursor:pointer;font-weight:800}
.wfacp_quantity_selector .wfacp_quantity_incrementer:hover,
.quantity .plus:hover,.quantity .minus:hover{background:var(--yd-gold)!important;color:#0A0A0C!important}

/* --- floating labels sat ON TOP of the select text --- */
.wfacp-form-control-wrapper,.wfacp_select_wrap{position:relative}
select,.wfacp_main_form select,select.wfacp-form-control{
  padding-top:22px!important;padding-bottom:8px!important;
  padding-left:14px!important;padding-right:34px!important;
  line-height:1.2!important;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--yd-mut) 50%),
                   linear-gradient(135deg,var(--yd-mut) 50%,transparent 50%)!important;
  background-position:calc(100% - 18px) 55%, calc(100% - 12px) 55%!important;
  background-size:6px 6px,6px 6px!important;background-repeat:no-repeat!important}
/* verified against the live markup: the wrapper is <p class="…
   wfacp-form-control-wrapper …"> and the label is
   <label class="wfacp-form-control-label">. An earlier guess at
   ".wfacp-label" matched nothing on the page. */
.wfacp-form-control-wrapper > label,
label.wfacp-form-control-label{
  position:absolute;top:7px;left:15px;margin:0!important;
  font-size:.66rem!important;letter-spacing:.05em;text-transform:uppercase;
  color:var(--yd-mut)!important;pointer-events:none;z-index:2;line-height:1;
  max-width:calc(100% - 30px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* the input sits inside a span, so the wrapper is what must be positioned */
.wfacp-form-control-wrapper{position:relative}
.wfacp-form-control-wrapper .woocommerce-input-wrapper{display:block;width:100%}
/* inputs need the same top padding so their label doesn't overlap either */
#wfacp-e-form .wfacp_main_form.woocommerce .wfacp-form-control:not(.input-checkbox):not(.hidden){
  padding-top:22px!important;padding-bottom:8px!important}
.required,.wfacp-label .required{color:var(--yd-gold)!important}

/* --- product thumbnails in the summary --- */
.wfacp_mini_cart_item img,.wfacp-order-summary img,
#wfacp-e-form table.shop_table img{
  width:48px!important;height:48px!important;object-fit:cover;
  border-radius:8px!important;border:1px solid var(--yd-line)!important;background:#0C0E14}

/* --- coupon row --- */
.wfacp-coupon-wrap,.wfacp_coupon_field,.showcoupon{color:var(--yd-gold)!important}

@media(max-width:768px){
  .wfacp_quantity_selector input,.quantity input.qty{width:38px!important}
  .wfacp_mini_cart_item img{width:40px!important;height:40px!important}
}