/*
 * Shared front end product page styles: the opt-in product details list and the
 * customer-chosen start date picker. Both are rendered by TPFW_Functions for Ticket,
 * Timeslot Ticket and Pass alike, so they are styled once here rather than in each
 * product type's own stylesheet.
 *
 * The two blocks sit inches apart in the add-to-cart form, so they share one card
 * shell: one surface, one hairline, one radius scale and one shadow. Both receive inline
 * custom properties from the product type's colour settings; the values below are only
 * the fallback for markup rendered without them.
 *
 * Radius scale, used here and nowhere else: card 14px, control 10px, pill 999px.
 *
 * Plain CSS on purpose - there is no nesting or variable maths to justify a .scss
 * sibling, and a file without one is left alone by the project's Prepros build.
 */

.tpfw-product-info,
.tpfw-startdate-picker {
    --tpfw-accent: #3f7d4a;
    --tpfw-accent-fg: #ffffff;
    --tpfw-ink: #1f2421;
    --tpfw-hint: #5f6b62;
    --tpfw-border: #e3e7e3;
    --tpfw-bg: #ffffff;
    /* Not shop-configurable: a sunk tone for the picker's footer strip, and an error
       red. Both are mixed from the shop's own background so they sink on a dark card as
       well as a light one, instead of showing as a pale strip on a dark theme. */
    --tpfw-sunk: color-mix(in srgb, var(--tpfw-bg) 94%, var(--tpfw-ink));
    --tpfw-danger: #c0362c;
    --tpfw-danger-soft: color-mix(in srgb, var(--tpfw-bg) 88%, var(--tpfw-danger));

    width: 100%;
    max-width: 440px;
    margin: 24px 0;
    background: var(--tpfw-bg);
    color: var(--tpfw-ink);
    border: 1px solid var(--tpfw-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(24, 38, 28, 0.05), 0 8px 20px rgba(24, 38, 28, 0.05);
}

/* Product details - label and value pairs, not tabular data, so rows rather than a
   table. A hairline between rows does the job zebra striping used to, without making
   two columns of plain text read as a spreadsheet. */
.tpfw-product-info {
    padding: 6px 18px;
    font-size: 0.9rem;
    line-height: 1.45;
}

.tpfw-product-info-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0;
}

.tpfw-product-info-row + .tpfw-product-info-row {
    border-top: 1px solid var(--tpfw-border);
}

.tpfw-product-info-label {
    color: var(--tpfw-hint);
    font-weight: 500;
}

/* The values are dates and counts - right aligned and lining, they share one edge and
   stay readable when several rows sit above each other. */
.tpfw-product-info-value {
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Start date picker - the same card treatment as the timeslot picker, so a shop running
   both product types shows one consistent calendar. */
.tpfw-startdate-picker {
    padding: 18px 18px 6px;
}

.tpfw-startdate-picker-label {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.tpfw-startdate-picker-label label {
    display: block;
    /* Themes commonly give every label a bottom margin; the hint below sets its own. */
    margin: 0;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--tpfw-ink);
}

.tpfw-startdate-picker-hint {
    margin: 4px 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--tpfw-hint);
}

/* The only thing on the card that answers "have I chosen yet", so it has to read in
   both states: dashed and muted while empty, filled with the accent once picked. The
   filled text colour is the contrast colour PHP already works out for the accent. */
.tpfw-startdate-chosen {
    flex: none;
    padding: 5px 12px;
    border: 1px dashed var(--tpfw-border);
    border-radius: 999px;
    background: var(--tpfw-sunk);
    color: var(--tpfw-hint);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tpfw-startdate-picker.is-chosen .tpfw-startdate-chosen {
    border: 1px solid var(--tpfw-accent);
    background: var(--tpfw-accent);
    color: var(--tpfw-accent-fg);
}

.tpfw-startdate-calendar {
    border-radius: 10px;
    overflow: hidden;
}

/* AirDatepicker only needs this input as its mount anchor in inline mode - the calendar
   already highlights the selected date, so showing the raw text above it too is noise. */
.tpfw-startdate-calendar input {
    display: none;
}

/* Add-to-cart is already refused server side when no date was picked, but that costs a
   page load to say so. This says it in place, next to the calendar that has to answer. */
.tpfw-startdate-error {
    display: none;
    margin: 6px -18px 0;
    padding: 11px 18px;
    border-top: 1px solid var(--tpfw-border);
    border-radius: 0 0 14px 14px;
    background: var(--tpfw-danger-soft);
    color: var(--tpfw-danger);
    font-size: 0.85rem;
    font-weight: 600;
}

.tpfw-startdate-picker.is-invalid {
    border-color: var(--tpfw-danger);
}

.tpfw-startdate-picker.is-invalid .tpfw-startdate-error {
    display: block;
}

/* The library ships a border and shadow meant for a floating popup; rendered inline the
   card treatment above replaces them rather than the two stacking. */
.tpfw-startdate-picker .air-datepicker {
    border: none;
    box-shadow: none;
    width: 100%;

    --adp-accent-color: var(--tpfw-accent, #3f7d4a);
    --adp-background-color: var(--tpfw-bg, #fff);
    --adp-color: var(--tpfw-ink, #1f2421);
    --adp-color-secondary: var(--tpfw-hint, #5f6b62);
    --adp-nav-arrow-color: var(--tpfw-hint, #5f6b62);
    --adp-nav-color-secondary: var(--tpfw-hint, #5f6b62);
    --adp-border-color-inline: var(--tpfw-border, #e3e7e3);
    /* The library's hover is a fixed near-white, which flashes on a dark card. */
    --adp-cell-background-color-hover: color-mix(in srgb, var(--tpfw-accent, #3f7d4a) 18%, var(--tpfw-bg, #fff));
    --adp-color-current-date: var(--tpfw-ink, #1f2421);
    --adp-cell-background-color-selected: var(--tpfw-accent, #3f7d4a);
    --adp-cell-background-color-selected-hover: var(--tpfw-accent, #3f7d4a);
    --adp-btn-color: var(--tpfw-accent, #3f7d4a);
    /* The library's own day-name orange belongs to no shop's palette, so this is a setting
       of its own rather than something inherited from --adp defaults. */
    --adp-day-name-color: var(--tpfw-dayname, #5f6b62);

    /* air-datepicker never sets its own font-weight, so it inherits the theme's body
       weight - often a light 300, which reads as faint at the calendar's 14px. */
    font-weight: 500;
}

/* The library hardcodes the selected day's text to white with no CSS var exposed for it,
   which disappears against a light accent colour. */
.tpfw-startdate-picker .air-datepicker-cell.-selected- {
    color: var(--tpfw-accent-fg, #fff);
}

.tpfw-startdate-picker .air-datepicker-body--day-name {
    font-weight: 600;
    font-size: 0.72rem;
}

.tpfw-startdate-picker .air-datepicker-nav--title,
.tpfw-startdate-picker .air-datepicker-nav--title i {
    color: var(--tpfw-navtitle, #1f2421);
    font-weight: 600;
}

/* Keyboard users get the affordance mouse users get on hover. */
.tpfw-startdate-picker .air-datepicker-cell:focus-visible {
    outline: 2px solid var(--tpfw-ink, #1f2421);
    outline-offset: -2px;
}