/*
 * Nexora Forward Pro -- Storefront design layer (v3.97.0).
 *
 * Premium look for the plugin's own customer-facing popups and widgets, driven by the store's
 * "Storefront Branding" settings (CSS custom properties --nxf-* printed on :root by
 * SP_Storefront_Branding). PRESENTATION ONLY -- no widget changes how it works.
 *
 * Each feature's own colour settings stay in charge by default; the brand colour only replaces
 * them when the merchant switches on "Use my brand colour on every widget" (body.nxf-brand-force).
 */

:root {
    --nxf-brand: #4f46e5;
    --nxf-brand-2: #7c3aed;
    --nxf-brand-soft: #eef2ff;
    --nxf-ring: 0 0 0 4px rgba(79, 70, 229, .2);
    --nxf-text: #0f172a;
    --nxf-muted: #64748b;
    --nxf-btn-bg: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --nxf-btn-text: #fff;
    --nxf-btn-border: transparent;
    --nxf-radius: 14px;
    --nxf-radius-ctl: 10px;
    --nxf-font: inherit;
    --nxf-overlay: rgba(15, 23, 42, .55);
    --nxf-overlay-blur: 6px;
    --nxf-shadow: 0 2px 6px rgba(2, 6, 23, .06), 0 30px 70px rgba(2, 6, 23, .28);
}

/* ===== Shared: popup backdrops ========================================= */
.sp-qvp-backdrop,
#sp-multi-order-overlay,
#wfsb-otp-modal .wfsb-modal-backdrop {
    background: var(--nxf-overlay) !important;
    -webkit-backdrop-filter: blur(var(--nxf-overlay-blur));
    backdrop-filter: blur(var(--nxf-overlay-blur));
}

/* ===== Shared: popup cards ============================================== */
.sp-qvp-modal,
#sp-multi-order-modal,
#wfsb-otp-modal .wfsb-modal-box {
    border-radius: var(--nxf-radius) !important;
    box-shadow: var(--nxf-shadow) !important;
    font-family: var(--nxf-font) !important;
    color: var(--nxf-text);
    animation: nxf-pop .28s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes nxf-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
#sp-multi-order-modal,
#wfsb-otp-modal .wfsb-modal-box { animation-name: nxf-pop-plain; }
@keyframes nxf-pop-plain { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }

/* Inputs / selects inside plugin widgets */
.sp-qvp-modal select,
.sp-qvp-modal input,
#sp-multi-order-modal input,
#sp-multi-order-modal select,
#wfsb-otp-modal input,
#sp-lc-panel input,
#sp-lc-panel textarea,
.sp-review-wrap input[type=text],
.sp-review-wrap input[type=email],
.sp-review-wrap textarea {
    border-radius: var(--nxf-radius-ctl) !important;
    border: 1.5px solid #e2e8f0 !important;
    font-family: var(--nxf-font);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sp-qvp-modal select:focus,
.sp-qvp-modal input:focus,
#sp-multi-order-modal input:focus,
#wfsb-otp-modal input:focus,
#sp-lc-panel input:focus,
#sp-lc-panel textarea:focus,
.sp-review-wrap input:focus,
.sp-review-wrap textarea:focus,
.sp-track-wrap input[type=text]:focus {
    outline: none !important;
    border-color: var(--nxf-brand) !important;
    box-shadow: var(--nxf-ring) !important;
}

/* Primary action buttons of the plain (not merchant-coloured) widgets */
.sp-qvp-modal .sp-qvp-add-btn,
#wfsb-otp-modal #wfsb-submit-otp-btn,
#wfsb-otp-modal .wfsb-submit-otp-btn,
#sp-multi-order-modal button.button-primary,
.sp-review-wrap button[type=submit],
.sp-review-wrap input[type=submit] {
    background: var(--nxf-btn-bg) !important;
    color: var(--nxf-btn-text) !important;
    border: 1.5px solid var(--nxf-btn-border) !important;
    border-radius: var(--nxf-radius-ctl) !important;
    font-family: var(--nxf-font);
    font-weight: 800 !important;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--nxf-brand) 28%, transparent) !important;
    transition: transform .12s ease, filter .15s ease, box-shadow .15s ease !important;
    text-shadow: none !important;
}
.sp-qvp-modal .sp-qvp-add-btn:hover:not(:disabled),
#wfsb-otp-modal #wfsb-submit-otp-btn:hover,
#sp-multi-order-modal button.button-primary:hover,
.sp-review-wrap button[type=submit]:hover { transform: translateY(-1px); filter: brightness(1.06); }
.sp-qvp-modal .sp-qvp-add-btn:disabled { opacity: .5; box-shadow: none !important; cursor: not-allowed; }

/* ===== Quick Variation popup =========================================== */
.sp-qvp-modal { padding: 24px !important; width: 480px !important; }
.sp-qvp-modal .sp-qvp-close { top: 14px !important; right: 14px !important; background: #f1f5f9 !important; transition: background .15s ease, transform .15s ease; }
.sp-qvp-modal .sp-qvp-close:hover { background: #e2e8f0 !important; transform: rotate(90deg); }
.sp-qvp-modal .sp-qvp-head { gap: 16px !important; padding-right: 32px; }
.sp-qvp-modal .sp-qvp-img { width: 96px !important; height: 96px !important; border-radius: calc(var(--nxf-radius) - 4px) !important; box-shadow: 0 6px 16px rgba(2, 6, 23, .1); }
.sp-qvp-modal .sp-qvp-title { font-size: 17px !important; font-weight: 800 !important; color: var(--nxf-text) !important; line-height: 1.3; letter-spacing: -.01em; }
.sp-qvp-modal .sp-qvp-price { color: var(--nxf-brand) !important; font-size: 16px !important; font-weight: 800 !important; }
.sp-qvp-modal .sp-qvp-attr label { font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .06em; color: var(--nxf-muted) !important; }
.sp-qvp-modal .sp-qvp-attr select { padding: 11px 12px !important; background-color: #fff; font-weight: 600; color: var(--nxf-text); }
.sp-qvp-modal .sp-qvp-qty-row input { padding: 10px !important; text-align: center; font-weight: 700; }
.sp-qvp-modal .sp-qvp-add-btn { padding: 14px !important; font-size: 15px !important; }
.sp-qvp-modal .sp-qvp-stock-msg { color: var(--nxf-muted) !important; font-size: 12.5px; }
.sp-qvp-modal .sp-qvp-loading { color: var(--nxf-muted) !important; }
@media (max-width: 520px) {
    .sp-qvp-modal { top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; width: 100% !important; max-width: none !important; max-height: 88vh !important; border-radius: var(--nxf-radius) var(--nxf-radius) 0 0 !important; animation-name: nxf-sheet; }
    @keyframes nxf-sheet { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ===== OTP popup ======================================================= */
#wfsb-otp-modal .wfsb-modal-box h3,
#wfsb-otp-modal .wfsb-modal-box h2 { font-family: var(--nxf-font); color: var(--nxf-text); letter-spacing: -.01em; }
#wfsb-otp-modal .wfsb-otp-inputs input { font-weight: 800; font-size: 20px; text-align: center; }

/* ===== Multi-Order popup =============================================== */
#sp-multi-order-modal { padding: 26px !important; }
#sp-multi-order-modal h2,
#sp-multi-order-modal h3 { font-family: var(--nxf-font); letter-spacing: -.01em; color: var(--nxf-text); }
#sp-multi-order-modal button { border-radius: var(--nxf-radius-ctl) !important; }

/* ===== Live chat ======================================================= */
#sp-lc-panel { border-radius: var(--nxf-radius) !important; box-shadow: var(--nxf-shadow) !important; font-family: var(--nxf-font); }
#sp-lc-btn { box-shadow: 0 10px 28px rgba(2, 6, 23, .28) !important; transition: transform .15s ease, box-shadow .15s ease; }
#sp-lc-btn:hover { transform: translateY(-2px) scale(1.03); }
#sp-lc-panel button { border-radius: var(--nxf-radius-ctl); }

/* ===== Social proof toast (CRO) ======================================== */
#sp-cro-social-proof { border-radius: var(--nxf-radius) !important; box-shadow: 0 2px 6px rgba(2, 6, 23, .06), 0 18px 40px rgba(2, 6, 23, .16) !important; font-family: var(--nxf-font); border-color: #eef2f7 !important; }

/* ===== Order tracking page ============================================= */
.sp-track-wrap input[type=text] { border-radius: var(--nxf-radius-ctl) !important; }
.sp-track-wrap button,
.sp-track-wrap .button { border-radius: var(--nxf-radius-ctl) !important; transition: transform .12s ease, filter .15s ease; }
.sp-track-wrap button:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ===== Reviews / UGC =================================================== */
.sp-review-wrap { border-radius: var(--nxf-radius) !important; font-family: var(--nxf-font); }
.sp-ugc-grid img,
.sp-ugc-gallery img { border-radius: calc(var(--nxf-radius) - 4px); transition: transform .2s ease; }
.sp-ugc-grid img:hover,
.sp-ugc-gallery img:hover { transform: scale(1.03); }

/* ===== Spin-details notice on checkout ================================= */
#wfsb-spin-lock-notice { border-radius: var(--nxf-radius) !important; font-family: var(--nxf-font); box-shadow: 0 1px 2px rgba(2, 6, 23, .04), 0 8px 22px rgba(2, 6, 23, .06); }
#wfsb-spin-lock-notice button { border-radius: var(--nxf-radius-ctl) !important; }

/* ===== Spin wheel / slot: premium touches that keep the merchant's own colours ===== */
#wfsb-spin-modal input,
#wfsb-slot-modal input { border-radius: var(--nxf-radius-ctl) !important; }
#wfsb-spin-modal button,
#wfsb-slot-modal button { transition: transform .12s ease, filter .15s ease, box-shadow .15s ease; }
#wfsb-spin-modal button:hover:not(:disabled),
#wfsb-slot-modal button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }

/* ===== "Use my brand colour on every widget" (opt-in) ================== */
body.nxf-brand-force #wfsb-spin-trigger-btn,
body.nxf-brand-force #wfsb-spin-done-btn,
body.nxf-brand-force #wfsb-slot-spin-btn,
body.nxf-brand-force #wfsb-slot-claim-btn,
body.nxf-brand-force #sp-lc-btn,
body.nxf-brand-force #sp-lc-send,
body.nxf-brand-force #sp-lc-start-btn,
body.nxf-brand-force .sp-track-wrap button[type=submit],
body.nxf-brand-force .sp-cro-sticky-cta a,
body.nxf-brand-force .sp-cro-sticky-cta button {
    background: var(--nxf-btn-bg) !important;
    color: var(--nxf-btn-text) !important;
    border-color: var(--nxf-btn-border) !important;
}
body.nxf-brand-force #sp-cro-social-proof .sp-cro-avatar { background: var(--nxf-btn-bg) !important; }
body.nxf-brand-force .sp-qvp-modal .sp-qvp-price,
body.nxf-brand-force .sp-track-wrap a { color: var(--nxf-brand) !important; }

@media (prefers-reduced-motion: reduce) {
    .sp-qvp-modal, #sp-multi-order-modal, #wfsb-otp-modal .wfsb-modal-box { animation: none !important; }
}