/* ==========================================================================
   Event Payment Forms — form.q, checkout.q, thanks.q
   Loaded only on /event-form/ pages (see interior.q). Scoped to #event-form
   and #ef-checkout so nothing bleeds into the rest of the site.
   ========================================================================== */

/* ---- Form page: item picker ------------------------------------------------ */
#event-form .item-line { position: relative; }

#event-form .item-desc {
    display: none;               /* revealed by JS once an option is chosen */
    margin-top: 8px;
    color: #666;
    font-size: 0.9em;
}

#event-form .qty-wrap { display: none; }   /* revealed by JS once an option is chosen */

/* Block-level flex so the stepper drops BELOW its label and lines up with the
   dropdown field, not the label. */
#event-form .qty-stepper { display: flex; align-items: stretch; }

#event-form .qty-btn {
    border: 1px solid #cccccc;
    background: #f2f2f2;
    color: #333;
    width: 42px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
#event-form .qty-btn:hover { background: #e6e6e6; }

#event-form .qty-input {
    width: 58px;
    text-align: center;
    border: 1px solid #cccccc;
    border-left: 0;
    border-right: 0;
    background: #fff;
    font-size: 15px;
}
#event-form .qty-input.at-max {
    border-color: #c0392b;
    color: #c0392b;
    background: #fdeceb;
    font-weight: 700;
}

#event-form .qty-max-msg {
    display: none;               /* shown by JS when the max is reached */
    color: #c0392b;
    font-size: 0.82em;
    margin-top: 5px;
    font-weight: 600;
}

/* Remove = red circle with a white × in the box's top-right corner. Hidden while
   there is only one item (nothing to remove). */
#event-form .remove-circle {
    display: none;
    position: absolute;
    top: -12px;
    right: -12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #c0392b;
    color: #fff;
    border: 2px solid #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: center;
}
#event-form .item-line.has-remove .remove-circle { display: flex; }
#event-form .remove-circle:hover { background: #a52824; }

/* The clone source for "Add another item" — never shown itself. */
#item-line-template { display: none; }

/* Continue to Checkout: right-aligned on desktop (via d-flex justify-content-end); on phones
   give it more breathing room and center it. */
#event-form .continue-wrap { margin-top: 1.5rem; }
@media (max-width: 575px) {
    #event-form .continue-wrap { margin-top: 2.5rem; justify-content: center !important; }
}

/* ---- Checkout page --------------------------------------------------------- */
#ef-checkout .order-table tfoot tr.order-total td {
    font-size: 1.4em;
    padding-top: 14px;
}

#ef-checkout .detail-box {
    background: #f7f7f7;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 18px 20px;
}
#ef-checkout .detail-box .drow { display: flex; padding: 5px 0; }
#ef-checkout .detail-box .dlabel { flex: 0 0 130px; color: #777; }
#ef-checkout .detail-box .dval { color: #222; font-weight: 600; }

#ef-checkout .ro-field {
    background: #eeeeee;
    color: #555;
    cursor: not-allowed;
}

#ef-checkout .same-billing-label { font-weight: normal; }

#ef-checkout .consent-box {
    background: #f7f7f7;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 18px 20px;
}
#ef-checkout .consent-box .consent-check {
    display: block;
    font-weight: normal;
    margin: 0;
}

/* ---- Receipt (thank-you) --------------------------------------------------- */
/* Keep the Print / Back buttons off the printed page. */
@media print {
    .receipt-actions { display: none; }
}