/* RetailCore Booking — the form.
   Deliberately plain, and deliberately defensive: themes set their own display
   rules on labels and inputs, so everything here is stated explicitly to keep
   one field per line whatever the theme does. */

/* ── Theming ──────────────────────────────────────────────────────────────
   Variables, settable anywhere up the tree (a theme stylesheet, an Oxygen
   container, a single page):

     --rc-booking-text   the form's text colour      (default: the page's)
     --rc-booking-card   the card behind the form    (default: transparent)
     --rc-chip-bkg       a time chip's fill          (default: transparent)
     --rc-btn-bkg        the submit button's fill    (default: #1f2937)
     --rc-btn-text       the submit button's text    (default: #ffffff)

   Nothing inverts automatically: a card colour can be translucent (a glassy
   panel), and a translucent colour makes a very poor text colour. The button's
   pair is explicit so it is always legible, and the chosen chip is marked by
   weight and border rather than by flipping its colours. */

.retailcore-booking {
    box-sizing: border-box;
    color: var(--rc-booking-text, inherit);
    background: var(--rc-booking-card, transparent);
}

.retailcore-booking *,
.retailcore-booking *::before,
.retailcore-booking *::after {
    box-sizing: border-box;
}

.retailcore-booking .rcb-heading {
    margin: 0 0 0.75rem;
}

.retailcore-booking .rcb-form {
    display: block;
    max-width: 460px;
    width: 100%;
}

/* One field per line. */
.retailcore-booking .rcb-form label {
    display: block;
    width: 100%;
    margin: 0 0 0.85rem;
    font-size: 0.9em;
    float: none;
}

.retailcore-booking .rcb-form input,
.retailcore-booking .rcb-form select,
.retailcore-booking .rcb-form textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0.25rem 0 0;
    padding: 0.5rem 0.6rem;
    font: inherit;
    line-height: 1.4;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 6px;
    float: none;
}

.retailcore-booking .rcb-form textarea {
    resize: vertical;
}

.retailcore-booking .rcb-form button[type="submit"] {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.6rem 1.1rem;
    font: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 6px;
    /* An explicit pair, never derived: contrast can't collapse into the
       background it sits on. Override both together if the site needs to. */
    background: var(--rc-btn-bkg, #1f2937);
    color: var(--rc-btn-text, #ffffff);
}

.retailcore-booking .rcb-form button[type="submit"][disabled] {
    opacity: 0.6;
    cursor: default;
}

/* ── Available times ─────────────────────────────────────────────────────── */

.retailcore-booking .rcb-times {
    display: block;
    width: 100%;
    margin: 0 0 0.85rem;
}

.retailcore-booking .rcb-times-label {
    display: block;
    font-size: 0.9em;
    margin-bottom: 0.3rem;
}

.retailcore-booking .rcb-times-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.retailcore-booking .rcb-times-grid[hidden] {
    display: none;
}

/* A time is a chip, not a full-width field. Scoped through .rcb-form so it also
   outranks the submit-button rule above whatever a theme does. */
.retailcore-booking .rcb-form .rcb-chip {
    display: inline-block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0.45rem 0.75rem;
    font: inherit;
    font-size: 0.9em;
    line-height: 1.2;
    cursor: pointer;
    color: var(--rc-booking-text, inherit);
    background: var(--rc-chip-bkg, transparent);
    border: 1px solid currentColor;
    border-radius: 999px;
}

.retailcore-booking .rcb-form .rcb-chip:hover {
    border-width: 2px;
    padding: calc(0.45rem - 1px) calc(0.75rem - 1px);
}

.retailcore-booking .rcb-form .rcb-chip-on,
.retailcore-booking .rcb-form .rcb-chip-on:hover {
    /* Chosen is shown by weight and a heavier border, not by flipping colours:
       the chip keeps the site's own legible pair whatever the card is. */
    border-width: 2px;
    padding: calc(0.45rem - 1px) calc(0.75rem - 1px);
    font-weight: 600;
}

.retailcore-booking .rcb-chip-day {
    width: 100%;
    font-size: 0.85em;
    opacity: 0.75;
}

.retailcore-booking .rcb-times-note {
    display: block;
    margin: 0.45rem 0 0;
    font-size: 0.85em;
    opacity: 0.85;
}

/* The honeypot is off-screen, not hidden — some bots skip display:none. */
.retailcore-booking .rcb-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0;
}

.retailcore-booking .rcb-status {
    display: block;
    margin: 0.75rem 0 0;
}

.retailcore-booking .rcb-status:empty {
    display: none;
}

.retailcore-booking .rcb-status[data-state="error"] {
    color: #b91c1c;
}

.retailcore-booking .rcb-status[data-state="ok"] {
    color: #15803d;
}