/* ============================================================
   SQUIDTRONIC — Checkout Page
   Wizard, Forms, Sidebar, Order Success
   ============================================================ */

/* ---------- Checkout Layout ---------- */
.checkout-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:32px;align-items:start}
@media(max-width:768px){.checkout-grid{grid-template-columns:1fr}}
.checkout-form-wrap{min-width:0}
.checkout-form fieldset{border:none;background:var(--c-bg-white);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;border:1px solid var(--c-border)}
.checkout-form legend{display:contents}

/* ---------- Checkout Section ---------- */
.checkout-section{background:var(--c-bg-white);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:24px;margin-bottom:24px}
.checkout-section__title{font-size:var(--text-lg);font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--c-border);width:100%}

/* ---------- Shipping Options ---------- */
.shipping-option{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--c-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color .15s;margin-bottom:8px}
.shipping-option:hover{border-color:var(--c-accent)}
.shipping-option input{accent-color:var(--c-accent-dark)}
.shipping-option__info{flex:1}
.shipping-option__info strong{font-size:var(--text-sm);display:block}
.shipping-option__info span{font-size:var(--text-xs);color:var(--c-text-dim)}
.shipping-option__price{font-weight:700;font-size:var(--text-sm);font-family:var(--font-mono)}

/* ---------- Checkout Submit ---------- */
.checkout-submit{display:block;width:100%;padding:14px;border-radius:var(--radius-md);background:var(--c-cart-green);color:#fff;font-size:var(--text-lg);font-weight:700;text-align:center;transition:background .15s;border:none;cursor:pointer}
.checkout-submit:hover{background:var(--c-cart-hover)}
.checkout-disclaimer{font-size:var(--text-xs);color:var(--c-text-light);text-align:center;margin-top:12px;font-style:italic}

/* ---------- Checkout Sidebar ---------- */
.checkout-sidebar{background:var(--c-bg-white);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:24px;position:sticky;top:calc(var(--header-h) + var(--catnav-h) + 16px)}
.checkout-sidebar__title{font-size:var(--text-lg);font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--c-border)}
.checkout-items{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.checkout-item{display:flex;align-items:center;gap:12px}
.checkout-item__img{width:48px;height:48px;flex-shrink:0;border-radius:var(--radius-md);overflow:hidden}
.checkout-item__img .p-card__img-placeholder{border-radius:var(--radius-md)}
.checkout-item__details{flex:1;display:flex;flex-direction:column;gap:2px}
.checkout-item__name{font-size:var(--text-sm);font-weight:600;line-height:1.3}
.checkout-item__meta{font-size:var(--text-xs);color:var(--c-text-dim)}
.checkout-item__price{font-weight:600;font-family:var(--font-mono);font-size:var(--text-sm);white-space:nowrap}

.checkout-sidebar__toggle{display:none;width:100%;padding:14px 16px;background:var(--c-bg-white);border:1px solid var(--c-border);border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-sm);font-weight:600;margin-bottom:16px}
.checkout-sidebar__toggle-row{display:flex;justify-content:space-between;align-items:center}
.checkout-sidebar__toggle-arrow{transition:transform .2s;font-size:10px;color:var(--c-text-dim)}
.checkout-sidebar__toggle[open] .checkout-sidebar__toggle-arrow{transform:rotate(180deg)}
@media(max-width:768px){.checkout-sidebar__toggle{display:block}.checkout-sidebar{position:static;order:-1}}

/* ---------- Order Summary (legacy) ---------- */
.order-summary{background:var(--c-bg-white);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:24px;position:sticky;top:calc(var(--header-h) + 16px)}
.order-summary__title{font-size:var(--text-lg);font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--c-border)}
.order-summary__item{display:flex;justify-content:space-between;padding:8px 0;font-size:var(--text-sm);border-bottom:1px solid var(--c-border-light)}
.order-summary__item-name{flex:1;color:var(--c-text-mid)}
.order-summary__item-qty{margin:0 12px;color:var(--c-text-light)}
.order-summary__item-price{font-weight:600;font-family:var(--font-mono)}
.place-order-btn{display:block;width:100%;padding:14px;margin-top:20px;border-radius:var(--radius-md);background:var(--c-cart-green);color:#fff;font-size:var(--text-lg);font-weight:700;text-align:center;transition:background .15s}
.place-order-btn:hover{background:var(--c-cart-hover)}

/* ---------- Order Success ---------- */
.order-success{text-align:center;padding:60px 20px}
.order-success__icon{margin-bottom:16px}
.order-success h2{font-size:var(--text-2xl);font-weight:800;margin-bottom:8px}
.order-success__number{font-family:var(--font-mono);font-size:var(--text-lg);color:var(--c-info);font-weight:700;margin-bottom:16px}
.order-success p{color:var(--c-text-mid);line-height:1.6;max-width:460px;margin:0 auto}

/* ---------- Step Indicator (Wizard) ---------- */
.step-indicator{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:32px}
.step-indicator__step{display:flex;align-items:center;gap:8px}
.step-indicator__num{width:34px;height:34px;border-radius:var(--radius-full);background:var(--c-border);color:var(--c-text-dim);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-sm);transition:all .3s ease;flex-shrink:0}
.step-indicator__label{font-size:var(--text-sm);font-weight:600;color:var(--c-text-dim);transition:color .3s ease}
.step-indicator__connector{width:48px;height:2px;background:var(--c-border);margin:0 12px;transition:background .3s ease;flex-shrink:0}
.step-indicator__step--active .step-indicator__num{background:var(--c-accent);color:#fff}
.step-indicator__step--active .step-indicator__label{color:var(--c-text)}
.step-indicator__step--completed .step-indicator__num{background:var(--c-cart-green);color:#fff}
.step-indicator__step--completed .step-indicator__label{color:var(--c-cart-green)}
.step-indicator__connector--completed{background:var(--c-cart-green)}
@media(max-width:480px){.step-indicator__label{display:none}.step-indicator__connector{width:28px}}

/* ---------- Checkout Steps ---------- */
.checkout-step{display:none}
.checkout-step--active{display:block;animation:wizardFadeIn .3s ease}
@keyframes wizardFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.checkout-step__actions{display:flex;gap:12px;margin-top:24px}
.checkout-step__back{padding:12px 24px;border-radius:var(--radius-md);background:transparent;color:var(--c-text-mid);font-size:var(--text-sm);font-weight:600;border:1px solid var(--c-border);cursor:pointer;transition:all .15s}
.checkout-step__back:hover{border-color:var(--c-text-mid);color:var(--c-text)}
.checkout-step__next{flex:1;padding:14px 24px;border-radius:var(--radius-md);background:var(--c-accent);color:#fff;font-size:var(--text-base);font-weight:700;border:none;cursor:pointer;transition:background .15s}
.checkout-step__next:hover{background:var(--c-accent-dark)}

/* ---------- Checkout Trust Signals ---------- */
.checkout-trust{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:16px 12px;margin-top:20px;border-radius:var(--radius-md);background:var(--c-bg);border:1px solid var(--c-border)}
.checkout-trust__item{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--c-text-mid);font-weight:500}
.checkout-trust__item svg{width:16px;height:16px;flex-shrink:0}
.checkout-cards{display:flex;gap:6px;align-items:center;margin-top:4px;justify-content:center}
.checkout-cards img,.checkout-cards svg{height:20px;width:auto;opacity:.6}

/* ---------- Checkout Helpers ---------- */
.company-toggle{font-size:var(--text-xs);color:var(--c-accent-dark);cursor:pointer;font-weight:500;margin-bottom:14px;display:inline-block;border:none;background:none;padding:0}
.company-toggle:hover{text-decoration:underline}

.save-info{display:flex;align-items:center;gap:8px;font-size:var(--text-sm);color:var(--c-text-mid);margin-top:16px;cursor:pointer}
.save-info input{accent-color:var(--c-accent);width:18px;height:18px}