/* ---- Saved cards ----
   The card choice (saved-cards.js renderOptions) that the checkout and the lease card step share,
   the checkout's saved-card block, and the My Account page /SavedCards. Plain CSS in the site's
   colours, as lease.css: #4285F4 blue, #191919 text, #6b7280 muted, #e8edf2 lines. Logical
   properties (inline-start/end) so the Arabic layout mirrors without extra rules. */

/* ---- the choice: "Visa ****0008  Default", ..., "Use a new card" ---- */

.saved-card-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.saved-card-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #e8edf2;
    border-radius: 8px;
    background: #fff;
    color: #191919;
    font-size: 0.95rem;
    cursor: pointer;
}

    .saved-card-option:has(input:checked) {
        border-color: #4285F4;
        background: #f3f7fe;
    }

    .saved-card-option input[type="radio"] {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: #4285F4;
        cursor: pointer;
    }

    .saved-card-option.is-disabled {
        background: #F7F7F7;
        color: #6b7280;
        cursor: not-allowed;
    }

        .saved-card-option.is-disabled input[type="radio"] {
            cursor: not-allowed;
        }

/* "Visa ****0008" reads left to right in the Arabic layout too. */
.saved-card-option-text,
.saved-card-display {
    unicode-bidi: isolate;
    direction: ltr;
}

.saved-card-option-text {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.saved-card-option-new .saved-card-option-text {
    direction: inherit;
}

.saved-card-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background: #e8f0fe;
    color: #1f4e9e;
    font-size: 0.75rem;
    font-weight: 600;
}

.saved-card-hint {
    color: #a12626;
    font-size: 0.8rem;
}

/* ---- checkout: under the payment methods, for the card method ---- */

.saved-cards-checkout {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #EEEEEE;
}

.saved-cards-checkout-title {
    font-weight: 600;
    margin-bottom: 8px;
}

/* The checkout form styles every label and input by id (custom.css #guestForm label/input):
   the choice keeps its own size and colours inside it. */
#savedCardsCheckout .saved-card-option {
    color: #191919;
    font-size: 0.95rem;
    line-height: 1.4;
}

    #savedCardsCheckout .saved-card-option.is-disabled {
        color: #6b7280;
    }

#savedCardsCheckout .saved-card-option input[type="radio"],
#savedCardsCheckout .saved-cards-save input[type="checkbox"] {
    width: 18px;
    height: 18px;
    padding: 0;
}

#savedCardsCheckout .saved-cards-save {
    color: #191919;
    line-height: 1.5;
}

.saved-cards-save {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    cursor: pointer;
}

    .saved-cards-save input[type="checkbox"] {
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 2px 0 0;
        accent-color: #4285F4;
        cursor: pointer;
    }

.saved-cards-save-consent {
    display: block;
    color: #6b7280;
    font-size: 0.8rem;
}

/* ---- /SavedCards ---- */

/* custom.css pins .container to 1280px !important, so the width cap sits on the contents. */
.saved-cards-page {
    margin-top: 50px;
    padding-bottom: 120px;
}

    .saved-cards-page h1,
    .saved-cards-box {
        max-width: 720px;
        margin-inline: auto;
    }

    .saved-cards-page h1 {
        font-weight: 700;
        font-size: 1.5rem;
        color: #191919;
        margin-bottom: 20px;
    }

.saved-cards-box {
    border: 1px solid #70707036;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    padding: 24px;
    color: #191919;
}

.saved-cards-intro,
.saved-cards-muted {
    color: #6b7280;
    font-size: 0.875rem;
}

.saved-cards-intro {
    margin: 0 0 16px;
}

.saved-cards-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    min-height: 120px;
}

.saved-cards-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e8edf2;
    border-top-color: #4285F4;
    border-radius: 50%;
    animation: savedCardsSpin 0.8s linear infinite;
}

@keyframes savedCardsSpin {
    to { transform: rotate(360deg); }
}

.saved-cards-banner {
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.saved-cards-banner-success { background: #ecfdf3; border-color: #b7ebc6; color: #1e6b36; }
.saved-cards-banner-warning { background: #fef3c7; border-color: #f6d88a; color: #8a5300; }
.saved-cards-banner-danger  { background: #fdecec; border-color: #f5c2c2; color: #a12626; }

.saved-cards-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.saved-card-row {
    padding: 14px 0;
    border-bottom: 1px solid #EEEEEE;
}

    .saved-card-row:last-child {
        border-bottom: 0;
    }

    .saved-card-row.is-disabled .saved-card-display {
        color: #6b7280;
    }

.saved-card-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.saved-card-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
}

.saved-card-display {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.saved-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.saved-card-btn {
    min-height: 38px;
    padding: 6px 14px;
    border: 1px solid #4285F4;
    border-radius: 6px;
    background: #fff;
    color: #4285F4;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .saved-card-btn:hover {
        background: #f3f7fe;
        color: #4285F4;
    }

    .saved-card-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

.saved-card-btn-danger {
    border-color: #a12626;
    color: #a12626;
}

    .saved-card-btn-danger:hover {
        background: #fdecec;
        color: #a12626;
    }

.saved-card-lease-hint {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 0.8rem;
}

@media (max-width: 575.98px) {
    .saved-cards-page {
        margin-top: 24px;
    }

    .saved-cards-box {
        padding: 16px;
    }

    .saved-card-actions,
    .saved-card-btn {
        width: 100%;
    }

    .saved-card-btn {
        flex: 1 1 auto;
    }
}