/* Combot Loyalty — storefront widget.
 * Minimal black/white aesthetic to match modern WC themes.
 * Scoped under .cbl-widget so we never collide with theme rules.
 */

.cbl-widget {
    margin: 28px 0;
    font-family: inherit;
    color: #111;
}

.cbl-widget * {
    box-sizing: border-box;
}

/* CSS `display: flex` overrides the native [hidden] attribute, so force
 * display:none on anything inside the widget toggled via .hidden. */
.cbl-widget [hidden] {
    display: none !important;
}

.cbl-widget-inner {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 24px 26px 22px;
}

/* --- Head --- */
.cbl-widget-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #f0f0f0;
}

.cbl-widget-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;    
    background: #111;
    color: #fff;
    flex-shrink: 0;
}

.cbl-widget-icon svg {
    width: 22px;
    height: 22px;
}

.cbl-widget-title {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cbl-widget-sub {
    font-size: 13px;
    color: #6b6b6b;
    margin-top: 4px;
    font-weight: 400;
}

/* --- Form row (phone input + lookup button fused) --- */
.cbl-row {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.cbl-phone-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    font-size: 14px;
    border: 1px solid #d4d4d4;
    border-right: none;
    background: #fff;
    color: #111;
    transition: border-color 0.15s;
}

.cbl-phone-input::placeholder {
    color: #9a9a9a;
}

.cbl-phone-input:focus {
    outline: none;
    border-color: #111;
}

/* --- Buttons --- */
.cbl-btn {
    height: 48px;
    padding: 0 22px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #111;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
    white-space: nowrap;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
}

.cbl-btn-primary {
    background: #111;
    color: #fff;
}

.cbl-btn-primary:hover {
    background: #000;
}

.cbl-btn-primary:disabled {
    background: #999;
    border-color: #999;
    cursor: not-allowed;
    opacity: 0.85;
}

.cbl-btn-ghost {
    background: #fff;
    color: #111;
    border: 1px solid #111;
    height: 40px;
    padding: 0 16px;
    font-size: 11px;
}

.cbl-btn-ghost:hover {
    background: #111;
    color: #fff;
}

/* --- OTP step --- */
.cbl-otp-note {
    font-size: 13px;
    color: #6b6b6b;
    margin-bottom: 14px;
    line-height: 1.4;
}

.cbl-otp-note strong {
    color: #111;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cbl-otp-inputs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: space-between;
}

.cbl-otp-digit {
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    background: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 0;
    padding: 0;
    transition: border-color 0.15s, background 0.15s;
}

.cbl-otp-digit::-webkit-outer-spin-button,
.cbl-otp-digit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.cbl-otp-digit:focus {
    outline: none;
    border-color: #111;
    background: #fafafa;
}

.cbl-otp-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cbl-otp-actions .cbl-btn {
    flex: 0 0 auto;
}

.cbl-otp-actions .cbl-link {
    margin-left: 0;
}

/* --- Inline text link --- */
.cbl-link {
    background: none;
    border: none;
    color: #111;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
    white-space: nowrap;
}

.cbl-link:hover {
    color: #555;
}

/* --- Error --- */
.cbl-error {
    margin-top: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #b91c1c;
    border-left-width: 3px;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cbl-error::before {
    content: "!";
    width: 18px;
    height: 18px;
    background: #b91c1c;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* --- Balance row --- */
/* 2-row layout: top row = label + change link, bottom row = big value.
 * Solves the overflow when "Use a different number" gets squeezed on a
 * single line. Uses CSS Grid for a clean cross-row alignment. */
.cbl-balance-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
    padding: 12px 16px;
    background: #f6f6f6;
    border: 1px solid #e5e5e5;
    margin-bottom: 16px;
}

.cbl-balance-label {
    grid-column: 1;
    grid-row: 1;
    font-size: 10px;
    color: #6b6b6b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

.cbl-balance-value {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 22px;
    font-weight: 800;
    color: #111;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.cbl-balance-value::after {
    content: " PTS";
    font-size: 11px;
    font-weight: 700;
    color: #6b6b6b;
    margin-left: 4px;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.cbl-balance-row .cbl-link {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-size: 11px;
    white-space: nowrap;
}

/* --- Rewards list --- */
.cbl-rewards-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cbl-reward-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e5e5e5;
    transition: border-color 0.15s;
    overflow: hidden;
    min-height: 56px;
}

.cbl-reward-card:hover {
    border-color: #111;
}

.cbl-reward-badge {
    flex: 0 0 auto;
    align-self: stretch;
    width: 54px;
    background: #111;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    text-align: center;
}

.cbl-reward-badge-num {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.cbl-reward-badge-suffix {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-top: 2px;
    color: #b8b8b8;
}

.cbl-reward-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 14px;
    display: flex;
    align-items: center;
}

.cbl-reward-label {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
}

/* Icon-only claim button — fixed compact square, vertically centered */
.cbl-reward-claim {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0 8px 0 0;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cbl-reward-claim svg {
    width: 18px;
    height: 18px;
}

/* --- Empty state --- */
.cbl-empty {
    text-align: center;
    padding: 28px 12px;
    color: #6b6b6b;
    font-size: 13px;
    border: 1px dashed #e5e5e5;
}

.cbl-empty-title {
    font-size: 13px;
    font-weight: 700;
    color: #111;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Applied card (inverse black) --- */
.cbl-applied-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #111;
    border: 1px solid #111;
    color: #fff;
}

.cbl-applied-check {
    width: 34px;
    height: 34px;
    background: #fff;
    color: #111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.cbl-applied-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cbl-applied-title {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cbl-applied-label {
    font-size: 13px;
    color: #d4d4d4;
    margin-top: 4px;
}

.cbl-applied-card .cbl-btn-ghost {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.cbl-applied-card .cbl-btn-ghost:hover {
    background: #fff;
    color: #111;
}

/* --- Loading --- */
.cbl-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6b6b6b;
    font-size: 11px;
    font-weight: 600;
    margin-top: 14px;
    padding: 12px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cbl-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #d4d4d4;
    border-top-color: #111;
    border-radius: 50%;
    animation: cbl-spin 0.7s linear infinite;
}

@keyframes cbl-spin {
    to { transform: rotate(360deg); }
}

/* Soft dim during in-flight request */
.cbl-widget.cbl-is-loading .cbl-step {
    opacity: 0.55;
    pointer-events: none;
}

/* --- Tablet — 601px to 768px --- */
@media (max-width: 768px) and (min-width: 601px) {
    .cbl-widget-inner {
        padding: 22px 22px 20px;
    }
    .cbl-reward-badge {
        width: 60px;
    }
    .cbl-reward-label {
        font-size: 13px;
    }
}

/* --- Mobile — 600px and below --- */
@media (max-width: 600px) {
    .cbl-widget {
        margin: 20px 0;
    }
    .cbl-widget-inner {
        padding: 18px 16px 16px;
    }
    .cbl-widget-head {
        gap: 12px;
        padding-bottom: 14px;
        margin-bottom: 14px;
    }
    .cbl-widget-icon {
        width: 38px;
        height: 38px;
    }
    .cbl-widget-icon svg {
        width: 19px;
        height: 19px;
    }
    .cbl-widget-title {
        font-size: 13px;
    }
    .cbl-widget-sub {
        font-size: 12px;
    }

    /* Phone input — stack input + button vertically */
    .cbl-row {
        flex-direction: column;
        gap: 8px;
    }
    .cbl-phone-input {
        border-right: 1px solid #d4d4d4;
        height: 44px;
    }
    .cbl-btn {
        height: 44px;
        font-size: 12px;
    }

    /* OTP step — smaller boxes */
    .cbl-otp-digit {
        height: 44px;
        font-size: 17px;
    }
    .cbl-otp-inputs {
        gap: 6px;
    }
    .cbl-otp-actions {
        gap: 12px;
    }

    /* Balance row — tighter padding, smaller value, link wraps to row 2 if too long */
    .cbl-balance-row {
        padding: 10px 14px;
        row-gap: 4px;
    }
    .cbl-balance-label {
        font-size: 9px;
    }
    .cbl-balance-value {
        font-size: 20px;
    }
    .cbl-balance-row .cbl-link {
        font-size: 10px;
    }

    /* Reward card — shorter badge, smaller text, compact button */
    .cbl-reward-card {
        min-height: 50px;
    }
    .cbl-reward-badge {
        width: 50px;
        padding: 6px 3px;
    }
    .cbl-reward-badge-num {
        font-size: 13px;
    }
    .cbl-reward-badge-suffix {
        font-size: 7px;
        margin-top: 2px;
    }
    .cbl-reward-text {
        padding: 6px 10px;
    }
    .cbl-reward-label {
        font-size: 12px;
    }
    .cbl-reward-claim {
        width: 36px;
        height: 36px;
        margin: 0 6px 0 0;
    }
    .cbl-reward-claim svg {
        width: 16px;
        height: 16px;
    }

    /* Applied card */
    .cbl-applied-card {
        padding: 12px 14px;
        gap: 10px;
    }
    .cbl-applied-check {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    .cbl-applied-title {
        font-size: 11px;
    }
    .cbl-applied-label {
        font-size: 12px;
    }
}

/* --- Extra-small phones — 380px and below --- */
@media (max-width: 380px) {
    .cbl-widget-inner {
        padding: 16px 12px 14px;
    }
    .cbl-reward-badge {
        width: 44px;
    }
    .cbl-reward-badge-num {
        font-size: 12px;
    }
    .cbl-reward-label {
        font-size: 11px;
        line-height: 1.25;
    }
    .cbl-reward-text {
        padding: 6px 8px;
    }
    .cbl-otp-digit {
        height: 40px;
        font-size: 15px;
    }
    .cbl-otp-inputs {
        gap: 4px;
    }
}