/**
 * The questions block shown above Add to cart on a ticket product page.
 */

.mf-ticket-fields {
    margin: 1.5em 0;
    padding: 1em 1.25em;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fafafa;
}

.mf-ticket-fields .mf-field {
    margin-bottom: 1em;
}

.mf-ticket-fields .mf-field:last-child {
    margin-bottom: 0;
}

.mf-ticket-fields fieldset.mf-field {
    border: none;
    padding: 0;
}

.mf-ticket-fields legend {
    font-weight: 600;
    padding: 0;
    margin-bottom: 0.5em;
}

.mf-ticket-fields .mf-field-question {
    margin: 0 0 0.5em;
    font-weight: 600;
}

.mf-ticket-fields label {
    display: block;
    margin-bottom: 0.35em;
}

.mf-ticket-fields .mf-radio-option {
    display: inline-block;
    margin-right: 1.5em;
    font-weight: normal;
}

.mf-ticket-fields .mf-radio-option input {
    margin-right: 0.4em;
}

.mf-ticket-fields textarea,
.mf-ticket-fields select {
    width: 100%;
    max-width: 420px;
}

.mf-ticket-fields .mf-required {
    color: #c0392b;
    font-weight: 700;
}

.mf-ticket-fields .mf-accessibility-notice {
    margin: 0.75em 0 0;
    font-size: 0.9em;
    font-style: italic;
    color: #4a4a4a;
}

.mf-ticket-fields .mf-accessibility-notice:empty {
    display: none;
}

.mf-ticket-fields .mf-accessibility-details,
.mf-ticket-fields .mf-nation-field {
    display: none;
}

/* ------------------------------------------------------------------ *
 * The short explanation above the questions.
 *
 * A first-time buyer was asked to choose between IC, OC, Accessibility OC,
 * Live-ins and Accessibility Live-ins with nothing on the page explaining
 * any of them, and then which of nine nations they camp with. Same box, same
 * border, same background as the questions it belongs to.
 * ------------------------------------------------------------------ */

.mf-ticket-fields .mf-ticket-help {
    margin: 0 0 1.25em;
    padding-bottom: 1em;
    border-bottom: 1px solid #e3e3e3;
}

.mf-ticket-fields .mf-help-heading {
    margin: 0 0 0.4em;
    font-size: 1.05em;
    font-weight: 600;
}

.mf-ticket-fields .mf-ticket-help p {
    margin: 0 0 0.6em;
    font-size: 0.95em;
    line-height: 1.5;
}

.mf-ticket-fields .mf-ticket-help p:last-child {
    margin-bottom: 0;
}

.mf-ticket-fields .mf-help-list {
    margin: 0 0 0.75em;
}

.mf-ticket-fields .mf-help-list dt {
    font-weight: 600;
    margin-top: 0.5em;
}

.mf-ticket-fields .mf-help-list dd {
    margin: 0 0 0.35em;
    font-size: 0.95em;
    line-height: 1.5;
}

.mf-ticket-fields .mf-help-note {
    font-weight: 600;
}

/*
 * The "your best guess is fine" line. Set apart from the plain help text
 * around it, because it is the sentence that stops somebody stalling on a
 * decision they do not have to make yet, and it is easy to skim past when
 * it reads as one more paragraph of instructions.
 */
.mf-ticket-fields .mf-help-reassure {
    padding: 0.6em 0.8em;
    border-left: 3px solid #8a8a8a;
    background: rgba(0, 0, 0, 0.03);
}

/*
 * The two exceptions to "change your mind freely": book an accessible
 * pitch up front, and tell your nation support if you move to in
 * character camping. Kept OUT of the accordion below, unlike the
 * explanations of each location, because these two are the only part of
 * this block anybody has to act on.
 */
.mf-ticket-fields .mf-help-exceptions {
    margin: 0 0 0.8em;
    font-size: 0.95em;
    line-height: 1.5;
}

/*
 * The accordion holding the explanations of each camping location. Closed
 * by default: a returning player already knows what IC means, and leaving
 * it open put a wall of text between the question and the buy button,
 * which got the whole block skipped including the two sentences above it
 * that do matter.
 */
.mf-ticket-fields .mf-help-details {
    margin: 0 0 0.8em;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mf-ticket-fields .mf-help-details > summary {
    padding: 0.55em 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    list-style-position: outside;
}

.mf-ticket-fields .mf-help-details > summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.mf-ticket-fields .mf-help-details .mf-help-list {
    margin: 0 0 0.7em;
}

.mf-ticket-fields .mf-field-hint {
    margin: 0.4em 0 0;
    font-size: 0.9em;
    color: #4a4a4a;
}

/* ------------------------------------------------------------------ *
 * "Ticket added. Buying for someone else?"
 *
 * Rendered inside WooCommerce's success notice, so it inherits the notice
 * background and only has to lay its own contents out.
 * ------------------------------------------------------------------ */

.mf-added-panel {
    width: 100%;
}

.mf-added-panel .mf-added-title {
    margin: 0 0 0.35em;
    font-weight: 700;
}

.mf-added-panel .mf-added-body {
    margin: 0 0 0.85em;
    font-size: 0.95em;
    line-height: 1.5;
}

.mf-added-panel .mf-added-actions {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

.mf-added-panel .mf-added-actions .button {
    float: none;
    margin: 0;
}

/* The basket, as a plain link in the sentence rather than a second
   button competing with the one call to action. */
.mf-added-panel .mf-added-basket-link {
    white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Thursday Camping, offered where the decision is actually made:
 * under the buy button on a ticket, and again in the basket when the
 * party is short of places.
 *
 * Deliberately quieter than the ticket's own buy button. This is a
 * suggestion about a second product, and styling it as a second primary
 * action would make somebody choose between two buttons when only one
 * of them is what they came for.
 * ------------------------------------------------------------------ */

/*
 * A separator, then a card. Both, not one or the other.
 *
 * The rule closes off Add to basket, which is the end of one job. The
 * card then presents this as its own thing: a different product, bought
 * for a different reason. Stripping the card back to bare text under a
 * line made it read as something tacked on to the bottom of the page.
 *
 * The rule is drawn on a pseudo-element rather than as a border on the
 * card itself, so it spans the full width while the card keeps its own
 * inset padding.
 */
.mf-thursday-card {
    position: relative;
    margin: 2.25em 0 1.5em;
    padding: 1.1em 1.25em;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    background: #fafafa;
}

.mf-thursday-card::before {
    content: "";
    position: absolute;
    top: -1.15em;
    left: 0;
    right: 0;
    border-top: 1px solid #e3e3e3;
}

/* A small section heading. Sized down from the theme's default h3, which
   is built for page headings and would outweigh the product title. */
.mf-thursday-card .mf-thursday-title {
    margin: 0 0 0.4em;
    padding: 0;
    font-size: 1.05em;
    line-height: 1.3;
    font-weight: 600;
}

.mf-thursday-card .mf-thursday-body {
    margin: 0 0 0.6em;
    font-size: 0.95em;
    line-height: 1.5;
}

.mf-thursday-card .mf-thursday-actions {
    margin: 0;
}

/*
 * The product page's button takes the theme's own button styling through
 * the .button class, so only its own spacing is set here. The basket
 * reminder's version stays an inline link: it sits inside a sentence in a
 * list, one line per event, and a button on each line would shout over
 * the basket it is meant to sit beside.
 */
.mf-thursday-card .mf-thursday-add {
    float: none;
    margin: 0;
}

/* Says where the button goes before it is pressed. Quieter than the
   label, but visible: a link that opens a new tab and does not say so is
   a small unpleasant surprise, and it is read aloud with the label by a
   screen reader. */
.mf-thursday-card .mf-thursday-newtab {
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.85;
}

.mf-thursday-reminder .mf-thursday-add {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.mf-thursday-reminder {
    margin: 0 0 1.5em;
    padding: 0.9em 1.1em;
    border: 1px solid #d5d5d5;
    border-left: 3px solid #7a5c2e;
    border-radius: 4px;
    background: #fafafa;
}

.mf-thursday-reminder .mf-thursday-reminder-title {
    margin: 0 0 0.4em;
    font-weight: 600;
}

.mf-thursday-reminder .mf-thursday-reminder-list {
    margin: 0 0 0.5em;
    padding-left: 1.2em;
}

.mf-thursday-reminder .mf-thursday-reminder-list li {
    margin-bottom: 0.35em;
    font-size: 0.95em;
    line-height: 1.5;
}

.mf-thursday-reminder .mf-thursday-reminder-note {
    margin: 0;
    font-size: 0.9em;
    color: #4a4a4a;
}