/*
 * Deposit (מקדמה) payment choice - "full payment" vs "partial deposit".
 *
 * Shared by BOTH reservation form templates:
 *   - resources/views/reservations/form.blade.php        (internal modal + /reservations/forms/{token})
 *   - resources/views/reservations/public/index.blade.php (/reservations/links/{id}/{token})
 * They are the duplicate pair for the pay button, so the styling lives here
 * rather than inline in one of them, where the other would silently render
 * unstyled buttons.
 *
 * Every custom property has a literal fallback: the --rsv-* / --bb-* token
 * scale exists on the internal form but not necessarily on the public page.
 */

.pay-choice {
    width: 100%;
    border: 1px solid var(--rsv-border, var(--bb-border, #e2e8f0));
    border-radius: var(--rsv-radius, var(--bb-radius, 10px));
    background: var(--rsv-surface-2, var(--bb-surface-2, #f8fafc));
    padding: .75rem;
}

.pay-choice__title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--rsv-text-body, var(--bb-text-body, #334155));
    margin-bottom: .6rem;
    text-align: center;
}

.pay-choice__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
}

@media (min-width: 480px) {
    .pay-choice__options { grid-template-columns: 1fr 1fr; }
}

/* The `.footer-payment-section .btn` rule in form.blade.php is more specific
   than a bare class, so the compound selector matches it rather than relying
   on !important. */
.pay-choice__btn,
.footer-payment-section .pay-choice__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    width: 100%;
    min-height: 58px;
    padding: .5rem .6rem;
    font-weight: 700;
    line-height: 1.25;
    border-radius: var(--rsv-radius-sm, var(--bb-radius-sm, 8px));
    border: 1.5px solid var(--rsv-border-strong, var(--bb-border-strong, #cbd5e1));
    background: var(--rsv-surface, var(--bb-surface, #fff));
    color: var(--rsv-text, var(--bb-text, #0f172a));
    /* Properties listed explicitly - never `transition: all`. */
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    /* Removes the 300ms double-tap zoom delay on touch devices. */
    touch-action: manipulation;
}

/* Explicit focus ring: the hover/focus styling below only shifts background
   and border colour, which is not a strong enough keyboard indicator on its
   own. Never removes the outline without replacing it. */
.pay-choice__btn:focus-visible,
.footer-payment-section .pay-choice__btn:focus-visible {
    outline: 2px solid var(--rsv-accent, var(--bb-primary, #0f766e));
    outline-offset: 2px;
}

.pay-choice__btn--full,
.footer-payment-section .pay-choice__btn--full {
    border-color: var(--rsv-success, var(--bb-success, #16a34a));
    color: var(--rsv-success, var(--bb-success, #16a34a));
}

.pay-choice__btn--full:hover,
.pay-choice__btn--full:focus-visible,
.footer-payment-section .pay-choice__btn--full:hover,
.footer-payment-section .pay-choice__btn--full:focus-visible {
    background: var(--rsv-success-soft, var(--bb-success-soft, rgba(22, 163, 74, .09)));
    color: var(--rsv-success, var(--bb-success, #16a34a));
}

.pay-choice__btn--deposit,
.footer-payment-section .pay-choice__btn--deposit {
    border-color: var(--rsv-accent, var(--bb-primary, #0f766e));
    color: var(--rsv-accent, var(--bb-primary, #0f766e));
}

.pay-choice__btn--deposit:hover,
.pay-choice__btn--deposit:focus-visible,
.footer-payment-section .pay-choice__btn--deposit:hover,
.footer-payment-section .pay-choice__btn--deposit:focus-visible {
    background: var(--rsv-accent-soft, var(--bb-primary-soft, rgba(15, 118, 110, .08)));
    color: var(--rsv-accent-hover, var(--bb-primary-hover, #0c5f59));
}

.pay-choice__label {
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pay-choice__pct {
    font-size: .72rem;
    font-weight: 700;
    padding: .05rem .3rem;
    border-radius: 999px;
    background: var(--rsv-accent-soft-2, var(--bb-primary-soft-2, rgba(15, 118, 110, .17)));
}

.pay-choice__amount {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Hidden until JS fills the live amount, so no empty gap is rendered. */
.pay-choice__amount:empty { display: none; }

.pay-choice__hint {
    margin-top: .5rem;
    font-size: .72rem;
    color: var(--rsv-text-muted, var(--bb-text-muted, #64748b));
    text-align: center;
}

.pay-choice__hint:empty { display: none; }

.pay-choice__btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .pay-choice__btn { transition: none; }
}