/* Uses the active theme's own --c1 (accent) / --r (radius) custom properties (set on :root) so this always matches
   whatever the storefront's colors are — no hardcoded brand color here. */

.super-bale-otp-form { max-width: 400px; margin: 30px auto; padding: 28px 24px; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r, 12px); text-align: center; }
.super-bale-modal-wrap .super-bale-otp-form { margin: 0; padding: 6px 2px; border: 0; }

.super-bale-logo { margin-bottom: 14px; color: var(--c1, #16a34a); }
/* the theme resets every <img> to display:block (its own global fix for the inline-baseline gap under images), which
   quietly defeats the surrounding text-align:center — a block box centers with auto margins, not text-align */
.super-bale-logo img { display: block; max-height: 56px; width: auto; margin-inline: auto; border-radius: 8px; }
.super-bale-otp-form h3 { margin: 8px 0 4px; font-size: 1.1rem; }
.super-bale-desc { color: #64748b; font-size: 13px; margin: 4px 0 18px; line-height: 1.9; }

.super-bale-otp-form .form-row { margin: 0 0 12px; }
.super-bale-otp-form input.super-bale-phone-input,
.super-bale-otp-form input.super-bale-code-input { text-align: center; }
.super-bale-otp-form input.super-bale-code-input { letter-spacing: 6px; font-size: 20px; }

.super-bale-btn-icon { height: 18px; width: auto; margin-inline-end: 6px; vertical-align: middle; }

.super-bale-error { display: none; color: #b91c1c; font-size: 13px; margin: 8px 0; padding: 8px 12px; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--r, 10px); }
.super-bale-timer { font-size: 13px; color: #64748b; margin: 10px 0; }
.super-bale-timer a { color: var(--c1, #16a34a); font-weight: 600; }
.super-bale-phone-display { font-size: 1.15rem; font-weight: 800; direction: ltr; letter-spacing: 1px; margin: 8px 0; }
.super-bale-back-btn { color: #64748b; font-size: 13px; }
.super-bale-back-btn:hover { color: #b91c1c; }
.super-bale-forgot-row { margin: 4px 0 0; }
.super-bale-forgot-password { font-size: 13px; color: #64748b; }

.super-bale-loggedin,
.super-bale-profile-guest { max-width: 400px; margin: 24px auto; padding: 26px 22px; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r, 12px); text-align: center; }
.super-bale-loggedin-t { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; }
.super-bale-logout-link { color: #b91c1c; }

/* profile */
.super-bale-profile { max-width: 440px; margin: 24px auto; background: #fff; border: 1px solid #e2e8f0; border-radius: var(--r, 12px); overflow: hidden; }
.super-bale-profile-header { background: var(--c1, #16a34a); color: #fff; padding: 26px; text-align: center; }
.super-bale-avatar { width: 56px; height: 56px; background: rgba(255, 255, 255, .2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; margin: 0 auto 8px; }
.super-bale-profile-header h3 { margin: 4px 0; color: #fff; font-size: 17px; }
.super-bale-badge { display: inline-block; background: rgba(255, 255, 255, .2); padding: 2px 10px; border-radius: 99px; font-size: 12px; margin-top: 4px; }
.super-bale-profile-body { padding: 20px; }
.super-bale-info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.super-bale-info-label { color: #64748b; font-size: 13.5px; }
.super-bale-info-value { font-weight: 700; font-size: 13.5px; }
.super-bale-section { margin-top: 18px; }
.super-bale-section h4 { margin: 0 0 10px; font-size: 14px; }
.super-bale-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.super-bale-toggle-label input { position: absolute; opacity: 0; width: 0; height: 0; }
.super-bale-toggle-slider { width: 40px; height: 22px; background: #e2e8f0; border-radius: 99px; position: relative; transition: .2s; flex-shrink: 0; }
.super-bale-toggle-slider::after { content: ""; width: 18px; height: 18px; background: #fff; border-radius: 50%; position: absolute; top: 2px; inset-inline-end: 2px; transition: .2s; }
.super-bale-toggle-label input:checked + .super-bale-toggle-slider { background: var(--c1, #16a34a); }
.super-bale-toggle-label input:checked + .super-bale-toggle-slider::after { inset-inline-end: 20px; }
.super-bale-connected { color: var(--c1, #16a34a); font-size: 12.5px; margin: 8px 0; }
.super-bale-not-connected { color: #64748b; font-size: 12.5px; margin: 8px 0; }
.super-bale-logout-btn { display: block; text-align: center; padding: 11px; color: #b91c1c; border: 1px solid #fecaca; border-radius: var(--r, 10px); }
.super-bale-logout-btn:hover { background: #fef2f2; color: #b91c1c; }

/* checkout boxes */
.super-bale-checkout-login { margin-bottom: 18px; padding: 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--r, 12px); text-align: center; }
.super-bale-checkout-login p { margin: 0 0 10px; }
.super-bale-force-login .super-bale-otp-form { margin: 0; border: 0; padding: 6px 0 0; }

/* my-account: the SMS/Bale login box sits above WooCommerce's own login form (and, since registration is hidden
   whenever this box shows, above the only form left on the page) */
.super-bale-wc-login { margin: 0 0 22px; padding: 18px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--r, 12px); }
.super-bale-wc-login-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; color: #94a3b8; font-size: 12.5px; }
.super-bale-wc-login-divider::before,
.super-bale-wc-login-divider::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }

/* modal — always a flex container (never toggled via display:none/block); jQuery's fadeIn()/fadeOut() reset an
   element's own `display` to its tag default ('block' for a <div>), which would silently kill the centering.
   Visibility is toggled with opacity/visibility/pointer-events instead, on the .super-bale-modal-open class. */
.super-bale-modal-overlay { position: fixed; inset: 0; z-index: 99990; background: rgba(15, 23, 42, .6); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.super-bale-modal-overlay.super-bale-modal-open { opacity: 1; visibility: visible; }
.super-bale-modal-wrap { position: relative; background: #fff; border-radius: var(--r, 16px); padding: 26px 20px 18px; max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.super-bale-modal-close { all: unset; position: absolute; top: 12px; inset-inline-start: 12px; width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9; display: grid; place-items: center; cursor: pointer; color: #64748b; font-size: 16px; }
.super-bale-modal-close:hover { background: #e2e8f0; }

.super-bale-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-100px); background: var(--c1, #16a34a); color: #fff; padding: 12px 22px; border-radius: var(--r, 10px); font-size: 14px; font-weight: 700; box-shadow: 0 8px 26px rgba(0, 0, 0, .18); z-index: 999999; transition: transform .35s ease, opacity .35s ease; opacity: 0; }
.super-bale-toast-show { transform: translateX(-50%) translateY(0); opacity: 1; }
.super-bale-toast-hide { transform: translateX(-50%) translateY(-100px); opacity: 0; }

@media (max-width: 480px) {
    .super-bale-otp-form,
    .super-bale-loggedin,
    .super-bale-profile,
    .super-bale-profile-guest { margin: 16px auto; max-width: 100%; }
}