/* Serofic Shop UX */
:root{--sfx-red:#d00019;--sfx-red-dark:#a30014;--sfx-ink:#1f2933;--sfx-muted:#5f6b7a;--sfx-line:#e6e9ee;--sfx-soft:#f5f6f8}

/* ---------- Botones ---------- */
.sf-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:13px 22px;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none !important;cursor:pointer;border:2px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s}
.sf-btn--primary{background:var(--sfx-red);color:#fff !important}
.sf-btn--primary:hover{background:var(--sfx-red-dark);color:#fff !important}
.sf-btn--outline{background:#fff;color:var(--sfx-red) !important;border-color:var(--sfx-red)}
.sf-btn--outline:hover{background:var(--sfx-red);color:#fff !important}
.sf-btn--link{background:none;color:var(--sfx-muted) !important;padding:8px 10px;font-weight:600;text-decoration:underline !important}
.sf-btn--link:hover{color:var(--sfx-ink) !important}

/* ---------- Popup al agregar al carro ---------- */
html.sf-modal-open{overflow:hidden}
.sf-cart-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px}
.sf-cart-modal[hidden]{display:none}
.sf-cart-modal__overlay{position:absolute;inset:0;background:rgba(17,24,39,.55);opacity:0;transition:opacity .2s}
.sf-cart-modal__box{position:relative;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.25);width:100%;max-width:460px;padding:26px 24px 20px;transform:translateY(16px) scale(.98);opacity:0;transition:transform .22s,opacity .22s}
.sf-cart-modal.is-open .sf-cart-modal__overlay{opacity:1}
.sf-cart-modal.is-open .sf-cart-modal__box{transform:none;opacity:1}
.sf-cart-modal__x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;background:none;font-size:26px;line-height:1;color:var(--sfx-muted);cursor:pointer;border-radius:50%}
.sf-cart-modal__x:hover{background:var(--sfx-soft);color:var(--sfx-ink)}
.sf-cart-modal__title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--sfx-ink);margin:0 0 18px;padding-right:30px}
.sf-check{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#16a34a;color:#fff;font-size:15px;flex-shrink:0}
.sf-cart-modal__product{display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--sfx-line);border-radius:14px}
.sf-cart-modal__img{width:76px;height:76px;object-fit:contain;border-radius:10px;background:#fff;flex-shrink:0}
.sf-cart-modal__name{margin:0 0 4px;font-weight:600;color:var(--sfx-ink);font-size:15px;line-height:1.35}
.sf-cart-modal__qty{margin:0 0 4px;color:var(--sfx-muted);font-size:13px}
.sf-cart-modal__price{color:var(--sfx-red);font-weight:700;font-size:17px}
.sf-cart-modal__price ins{text-decoration:none}
.sf-cart-modal__summary{display:flex;justify-content:space-between;align-items:center;margin:14px 2px 0;font-size:15px;color:var(--sfx-muted)}
.sf-cart-modal__summary strong{color:var(--sfx-ink);font-size:18px}
.sf-cart-modal__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.sf-cart-modal__actions .sf-btn--link{grid-column:1/-1;justify-self:center}
@media (max-width:480px){
 .sf-cart-modal{align-items:flex-end;padding:0}
 .sf-cart-modal__box{max-width:none;border-radius:18px 18px 0 0;padding:22px 18px 18px}
 .sf-cart-modal__actions{grid-template-columns:1fr}
}
/* El aviso "Ver carrito" que agrega WooCommerce junto al botón ya no es necesario */
.woocommerce a.added_to_cart.wc-forward{display:none !important}

/* ---------- Barra de pasos ---------- */
.sf-steps-bar{list-style:none;margin:0 auto 34px;padding:0;display:flex;justify-content:space-between;max-width:760px;counter-reset:none;position:relative}
.sf-steps-bar::before{content:"";position:absolute;top:18px;left:12%;right:12%;height:3px;background:var(--sfx-line);z-index:0}
.sf-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1;margin:0;padding:0}
.sf-step a{display:flex;flex-direction:column;align-items:center;text-decoration:none !important;color:inherit}
.sf-step-num{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:3px solid var(--sfx-line);color:var(--sfx-muted);font-weight:700;font-size:15px;transition:all .2s}
.sf-step-label{margin-top:8px;font-size:14px;font-weight:600;color:var(--sfx-muted)}
.sf-step.is-current .sf-step-num{border-color:var(--sfx-red);background:var(--sfx-red);color:#fff;box-shadow:0 0 0 5px rgba(208,0,25,.12)}
.sf-step.is-current .sf-step-label{color:var(--sfx-ink)}
.sf-step.is-done .sf-step-num{border-color:var(--sfx-red);color:var(--sfx-red);font-size:0}
.sf-step.is-done .sf-step-num::after{content:"✓";font-size:16px}
.sf-step.is-done .sf-step-label{color:var(--sfx-ink)}
.sf-steps-bar .sf-step.is-done[data-step="2"]{cursor:pointer}
@media (max-width:600px){
 .sf-steps-bar{margin-bottom:24px}
 .sf-step-num{width:32px;height:32px;font-size:13px}
 .sf-steps-bar::before{top:15px}
 .sf-step-label{font-size:11.5px;line-height:1.2}
}

/* ---------- Checkout por pasos ---------- */
.sf-steps-form.sf-on-step-1 #payment{display:none !important}
/* Paso 2: una sola columna centrada, enfocada en envío y pago */
.sf-steps-form.sf-on-step-2{display:block !important;max-width:760px;margin-left:auto;margin-right:auto}
.sf-steps-form.sf-on-step-2 #order_review{position:static !important}
.sf-steps-form .sf-recap,.sf-steps-form .sf-step-nav{grid-column:1 !important}
@media (min-width:992px){
 .sf-steps-form .sf-recap{grid-row:1 / span 2 !important}
}
.sf-recap{background:#fff;border:1px solid var(--sfx-line);border-radius:14px;padding:22px 24px;margin-bottom:24px}
.sf-recap__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sf-recap__head h3{margin:0 !important;font-size:20px}
.sf-recap__body p{margin:0 0 6px;color:var(--sfx-muted);line-height:1.5}
.sf-recap__body strong{color:var(--sfx-ink)}
.sf-step-nav{margin:6px 0 10px}
.sf-step-nav .sf-step-next{width:100%;font-size:17px;padding:16px}
.sf-step-secure{margin:10px 0 0;text-align:center;color:var(--sfx-muted);font-size:13.5px}
.sf-step-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:10px;padding:10px 14px;margin:0 0 12px;font-size:14px}

