/* static/css/register.css */
/* [EVENT PLANNER REPO] */
/* Wanted to remove random styles so they were no longer inline on register.html. Putting them here for now as a temporary measure, I'm imaging we'll relocate these someplace better later, but I wasn't sure where - Sean */
    
/* Video Link Styling */
.video-link {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.video-link:hover {
    opacity: 0.7;
}

.video-link-disabled {
    color: #000000;
    text-decoration: none;
    opacity: 1.0;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .timezone-info {
        font-size: 12px;
        margin-top: 3px;
    }

    .pricing-info .price-amount {
        font-size: 1.05em;
    }

    .payment-method {
        font-size: 0.9em;
    }

}

/* Event info rows styling */

.evntinfo .eic {
    flex-shrink: 0;
    width: 20px;
    font-size: 16px;
}

/* People/Capacity icon */
.icn.people {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icn.people::before {
    content: "👥";
    display: inline-block;
}


/* === Checkout guest-questions breadcrumb ===
   Originally copied from the invite-modal title styles (.invite-title-main
   [data-clickable]) in style.css, then renamed + scoped to checkout so the two
   never share rules. Restyle either freely. The clickable affordance marks a
   visited seat the guest can jump back to. */
.checkout-crumb {
    display: inline;
}

.checkout-crumb-seg[data-clickable="true"] {
    cursor: pointer;
    text-decoration: underline;
}

.checkout-crumb-seg[data-clickable="true"]:hover {
    color: #333;
}

.checkout-crumb-sep {
    /* Visual separator between breadcrumb segments. */
    margin: 0 4px;
}


/* === Checkout single-paid quantity selector ===
   The grey rounded box wrapper for the in-modal quantity selector. The +/-
   controls reuse .qty-btn (appearance only) with checkout-qty-* functional
   classes so the page-level qty-plus/qty-minus click handler in
   register_tickets.js does NOT also fire on these. Box padding copied from
   .ticket-box (style.css). */
.checkout-qty-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 16px;
}

.checkout-qty-selector .checkout-qty-label {
    font-weight: bold;
    color: #000;
    text-align: left !important;
}

.checkout-qty-selector .checkout-qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


/* === Checkout guest-questions: wrapping field labels (overlaid) ===
   Question prompts can be long, so the floated label must wrap and the field
   must grow while KEEPING the shared overlaid floating-label look (the label
   sits in the input's lower-left corner). The shared pattern reserves a fixed
   one-line slot; here the slot is sized from a --gq-label-h CSS variable that
   adjustQuestionLabelSpacing() (checkout_questions.js) sets to each label's
   measured height. The formula reproduces the shared single-line values
   (padding-bottom 28, margin-top -20 at a ~14px label) and scales up for
   multi-line labels. Scoped to #guestQuestionsContent so the global
   .frm-lbl-grp rules (create-event / profile / squads) are untouched.
   The single-line placeholder still clips (native inputs can't wrap a
   placeholder), but the label carries the full text once focused / filled. */
#guestQuestionsContent .frm-lbl-grp label {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
    /* Pull the (possibly multi-line) label up into the input's reserved bottom
       padding. Reproduces the shared -20px at the 14px default. */
    margin-top: calc(-1 * (var(--gq-label-h, 14px) + 6px));
}

/* Reserve bottom padding to fit the measured label height, so typed text never
   collides with the overlaid label. Reproduces the shared 28px at the 14px
   default. Horizontal + top padding unchanged. */
#guestQuestionsContent .frm-lbl-grp input.slbs:focus,
#guestQuestionsContent .frm-lbl-grp input.slbs:not(:placeholder-shown),
#guestQuestionsContent .frm-lbl-grp textarea.slbs:focus,
#guestQuestionsContent .frm-lbl-grp textarea.slbs:not(:placeholder-shown) {
    padding: 10px 10px calc(var(--gq-label-h, 14px) + 14px) 10px;
}

/* Long-answer question textareas: allow vertical grow + a sane min height. */
#guestQuestionsContent .frm-lbl-grp textarea.slbs {
    min-height: 80px;
    resize: vertical;
}


/* ===== Single-select ticket-box one-click loading state ===== */
/* Applied to a .ticket-box-clickable while an all-free one-click (reserve +
   complete-free) is in flight after the box is clicked in single-select mode.
   Dims the box, blocks further pointer interaction, and hides the box's own
   inner content so the injected "Getting tickets…" label reads cleanly. */
.ticket-box.ticket-box-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Remove the box's existing children from layout entirely (display:none, not
   visibility:hidden — the latter reserves their space and pushes the appended
   label down) so the injected label sits where the ticket name normally does. */
.ticket-box.ticket-box-loading > *:not(.ticket-box-loading-label) {
    display: none;
}

/* The injected label carries the .ticket-name class, so it inherits that
   element's styling (left-aligned, correct type) with no overrides. */