/**
 * Cart Geo Shipping Offer – cart-geo-offer.css v3.2.0
 *
 * A centered, spotlight popup that surfaces a location-aware free-shipping
 * offer to anonymous cart-builders who haven't yet identified themselves.
 * Palette matches the nudge / other USA Cabinets popups:
 *   brand red   #e22323 / #d92237
 *   blue hover  #1565d8 / #0e4fae
 *   muted text  #75808d
 *   tint bg     #f6f8fa
 */

/* ── Backdrop ─────────────────────────────────────────────────── */
.cpe-geo-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999998;
    background: rgba(16, 20, 28, 0.55);
    opacity: 0;
    transition: opacity 0.28s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
.cpe-geo-backdrop.cpe-geo-visible { opacity: 1; }

/* ── Card ─────────────────────────────────────────────────────── */
.cpe-geo-card {
    position: relative;
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 20, 28, 0.32);
    overflow: hidden;
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.cpe-geo-backdrop.cpe-geo-visible .cpe-geo-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Accent rail at the very top */
.cpe-geo-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #e22323, #d92237);
}

/* ── Header band with the "truck" framing ─────────────────────── */
.cpe-geo-head {
    padding: 30px 28px 18px;
    text-align: center;
}
.cpe-geo-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #f6f8fa;
    color: #d92237;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 999px;
    margin-bottom: 15px;
}
.cpe-geo-badge svg { width: 15px; height: 15px; display: block; }

.cpe-geo-title {
    margin: 0 auto 8px;
    max-width: 22ch;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 800;
    color: #1b2733;
    text-align: center;
    text-wrap: balance;
}
.cpe-geo-title .cpe-geo-hl {
    color: #d92237;
}
.cpe-geo-sub {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: #57616e;
}

/* ── Body / form ──────────────────────────────────────────────── */
.cpe-geo-body { padding: 4px 28px 26px; }

.cpe-geo-field {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    font-size: 15px;
    border: 1.5px solid #dbe1e8;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    margin-top: 14px;
    font-family: inherit;
}
.cpe-geo-field:focus {
    border-color: #1565d8;
    box-shadow: 0 0 0 3px rgba(21, 101, 216, 0.14);
}

.cpe-geo-submit {
    width: 100%;
    margin-top: 14px;
    padding: 14px 18px;
    font-size: 15.5px;
    font-weight: 700;
    color: #ffffff;
    background: #e22323;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: background 0.18s ease, transform 0.06s ease;
    font-family: inherit;
}
.cpe-geo-submit:hover  { background: #1565d8; }
.cpe-geo-submit:active { transform: translateY(1px); }
.cpe-geo-submit:disabled { opacity: 0.75; cursor: default; }
.cpe-geo-submit.loading { pointer-events: none; }

.cpe-geo-fallback {
    margin: 13px 2px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #75808d;
    text-align: center;
}

.cpe-geo-msg {
    margin-top: 13px;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: center;
    display: none;
}
.cpe-geo-msg.cpe-geo-err { color: #c0392b; display: block; }
.cpe-geo-msg.cpe-geo-ok  { color: #1e874b; display: block; }

/* ── Close button ─────────────────────────────────────────────── */
.cpe-geo-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #9aa4b0;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: background 0.16s ease, color 0.16s ease;
    padding: 0;
}
.cpe-geo-close:hover { background: #f0f2f5; color: #57616e; }

/* ── Spinner (matches nudge) ──────────────────────────────────── */
.cpe-geo-submit .cpe-geo-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
    display: none;
    animation: cpe-geo-spin 0.7s linear infinite;
}
.cpe-geo-submit.loading .cpe-geo-spinner { display: inline-block; }
@keyframes cpe-geo-spin { to { transform: rotate(360deg); } }

/* ── Success state swap ───────────────────────────────────────── */
.cpe-geo-success {
    padding: 34px 28px 30px;
    text-align: center;
    display: none;
}
.cpe-geo-success .cpe-geo-check {
    width: 54px; height: 54px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #eaf7ef;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cpe-geo-success .cpe-geo-check svg { width: 28px; height: 28px; color: #1e874b; }
.cpe-geo-success h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: #1b2733; }
.cpe-geo-success p  { margin: 0; font-size: 14px; line-height: 1.5; color: #57616e; }

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cpe-geo-backdrop,
    .cpe-geo-card { transition: opacity 0.001s linear; }
    .cpe-geo-card { transform: none; }
    .cpe-geo-submit .cpe-geo-spinner { animation: none; }
}

/* ── Small screens ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .cpe-geo-head  { padding: 26px 20px 16px; }
    .cpe-geo-body  { padding: 4px 20px 22px; }
    .cpe-geo-title { font-size: 20px; }
}