/* Pay Portal - Ticket/Tag Cards */

:root {
    --pay-card-height: 380px;
    --pay-card-peek-height: 44px;
}

/* ── Card Stack ── */
.pay-card-stack {
    position: relative;
    height: var(--pay-card-height);
}

/* No extra margin needed — peek is inside the card */

/* ── Main Card (fixed height, fills stack) ── */
.pay-card-main {
    height: 100%;
    overflow: hidden;
}

/* Tag cards with peek need bottom padding so content doesn't overlap the peek */
.has-ticket-peek .pay-card-main .card-body {
    padding-bottom: calc(var(--pay-card-peek-height) + 1.25rem) !important;
}

/* ── QR Code ── */
.pay-card-qr {
    line-height: 0;
}

.pay-card-qr img {
    display: block;
}

/* ── Peek Strip (inside card at bottom, looks like top edge of a ticket) ── */
.pay-card-peek {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: var(--bs-gray-100, #f5f5f5);
    border-radius: 0.625rem 0.625rem 0 0;
    padding: 1.5rem 1.25rem;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.pay-card-peek:hover {
    background: var(--bs-gray-200, #ebebeb);
}

/* ── Ticket Overlay (clip-path reveal from bottom) ── */
.pay-card-ticket-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.pay-card-ticket-overlay.ticket-expanded {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
}

/* Hide peek when overlay is open */
.pay-card-ticket-overlay.ticket-expanded ~ .pay-card-peek {
    opacity: 0;
    pointer-events: none;
}

/* ── Equal height columns ── */
.pay-cards-row > [class*="col"] {
    display: flex;
}

.pay-card-stack {
    width: 100%;
}

/* ── Add Card Column ── */
.pay-add-col {
    height: var(--pay-card-height);
}

/* ── Add Card ── */
.pay-add-card {
    transition: border-color 0.2s ease, background-color 0.2s ease;
    border-radius: 0.625rem;
}

.pay-add-card:hover {
    border-color: var(--bs-primary) !important;
    background-color: var(--bs-light-primary) !important;
}

.pay-add-card:hover i {
    color: var(--bs-primary) !important;
}

/* ── Add Type Box (Radio selection) ── */
.pay-add-type-box {
    transition: border-color 0.2s ease, background-color 0.2s ease;
    border: 1px solid var(--bs-gray-300) !important;
}

.pay-add-type-box.active {
    border: 1px solid var(--bs-primary) !important;
    background-color: var(--bs-light-primary);
}