/* HST Booking Plugin — Frontend Styles
   All selectors are scoped under .hst-booking or .hst-courses-grid
   to avoid conflicts with the active WordPress theme.
*/

/* ── Custom properties ─────────────────────────────────────────────────── */
:root {
    /* Inherits from the active block theme automatically; falls back to HST brand
       colours on classic themes or when the theme does not define these variables. */
    --hst-brand:       var(--wp--preset--color--primary,    #1A3A6E);
    --hst-brand-mid:   var(--wp--preset--color--primary,    #2452A0);
    --hst-accent:      var(--wp--preset--color--secondary,  #D4501A);
    --hst-ink:         var(--wp--preset--color--foreground, #1A1F2E);
    --hst-surface:     var(--wp--preset--color--background, #FFFFFF);

    /* Plugin-specific — no theme equivalent, keep as fixed values */
    --hst-brand-light: #EBF0FA;
    --hst-success:     #0C7A5A;
    --hst-success-bg:  #E6F5EF;
    --hst-error:       #C0392B;
    --hst-error-bg:    #FEECEC;
    --hst-ink-2:       #4C566A;
    --hst-ink-3:       #8A95A8;
    --hst-border:      #D0D7E5;
    --hst-paper:       #F5F7FC;
    --hst-radius:      6px;
    --hst-shadow:      0 2px 8px rgba(0,0,0,.08);
}

/* ── Course grid ────────────────────────────────────────────────────────── */
.hst-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.hst-course-card {
    background: var(--hst-surface);
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-radius);
    box-shadow: var(--hst-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.hst-course-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

.hst-course-card__body {
    padding: 1.25rem;
    flex: 1;
}

.hst-course-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hst-brand);
    margin: 0 0 .5rem;
    line-height: 1.3;
}

.hst-course-card__desc {
    font-size: .875rem;
    color: var(--hst-ink-2);
    line-height: 1.55;
    margin: 0;
}

.hst-course-card__footer {
    padding: .875rem 1.25rem;
    background: var(--hst-paper);
    border-top: 1px solid var(--hst-border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.hst-course-card__price {
    font-size: .85rem;
    color: var(--hst-ink);
    font-weight: 600;
    flex: 1;
}

.hst-course-card__price small {
    font-weight: 400;
    color: var(--hst-ink-3);
}

.hst-course-card__cap {
    font-size: .75rem;
    color: var(--hst-ink-3);
    white-space: nowrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.hst-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55em 1.25em;
    border-radius: var(--hst-radius);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s, box-shadow .15s, opacity .15s;
    line-height: 1.4;
}

.hst-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.hst-btn--primary {
    background: var(--hst-brand);
    color: #fff;
    border-color: var(--hst-brand);
}

.hst-btn--primary:hover:not(:disabled) {
    background: var(--hst-brand-mid);
    color: #fff;
    text-decoration: none;
}

.hst-btn--secondary {
    background: transparent;
    color: var(--hst-brand);
    border-color: var(--hst-brand);
}

.hst-btn--secondary:hover:not(:disabled) {
    background: var(--hst-brand-light);
    text-decoration: none;
}

.hst-btn--pay {
    background: var(--hst-accent);
    color: #fff;
    border-color: var(--hst-accent);
    padding: .65em 1.75em;
    font-size: 1rem;
}

.hst-btn--pay:hover:not(:disabled) {
    background: #B8440F;
    color: #fff;
}

/* ── Booking wrapper ─────────────────────────────────────────────────────── */
.hst-booking {
    max-width: 680px;
    margin: 1.5rem auto;
    font-family: inherit;
}

.hst-booking__header {
    margin-bottom: 1.5rem;
}

.hst-booking__course-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--hst-brand);
    margin: 0 0 .25rem;
}

.hst-booking__price {
    font-size: .95rem;
    color: var(--hst-ink-2);
    margin: 0;
}

/* ── Progress indicator ──────────────────────────────────────────────────── */
.hst-progress {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.hst-progress__step {
    display: flex;
    align-items: center;
    gap: .4rem;
    opacity: .4;
    transition: opacity .2s;
}

.hst-progress__step.active,
.hst-progress__step.complete {
    opacity: 1;
}

.hst-progress__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hst-border);
    color: var(--hst-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}

.hst-progress__step.active .hst-progress__num {
    background: var(--hst-brand);
    color: #fff;
}

.hst-progress__step.complete .hst-progress__num {
    background: var(--hst-success);
    color: #fff;
}

.hst-progress__step.complete .hst-progress__num::before {
    content: '✓';
}

.hst-progress__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--hst-ink-2);
    white-space: nowrap;
}

.hst-progress__step.active .hst-progress__label {
    color: var(--hst-brand);
}

.hst-progress__connector {
    flex: 1;
    height: 1px;
    background: var(--hst-border);
    margin: 0 .5rem;
    min-width: 1rem;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.hst-delegate-block {
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--hst-paper);
}

.hst-delegate-block__legend {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hst-ink-3);
    padding: 0 .35rem;
}

.hst-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-bottom: .75rem;
}

@media (max-width: 480px) {
    .hst-field-row { grid-template-columns: 1fr; }
}

.hst-field { display: flex; flex-direction: column; gap: .3rem; }

.hst-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--hst-ink-2);
}

.hst-required { color: var(--hst-error); }
.hst-optional { font-weight: 400; color: var(--hst-ink-3); }

.hst-input {
    padding: .5rem .7rem;
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-radius);
    font-size: .95rem;
    color: var(--hst-ink);
    background: var(--hst-surface);
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}

.hst-input:focus {
    outline: none;
    border-color: var(--hst-brand-mid);
    box-shadow: 0 0 0 3px rgba(36,82,160,.12);
}

.hst-field-group { margin-bottom: 1.25rem; }

.hst-radio-group { display: flex; gap: 1.5rem; margin-top: .4rem; }

.hst-radio-label {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .92rem;
    cursor: pointer;
}

/* ── Calendar (date/slot picker) ─────────────────────────────────────────── */
.hst-calendar {
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-radius);
    background: var(--hst-surface);
    padding: 1rem 1.25rem 1.25rem;
    margin: 1rem 0;
}

.hst-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.hst-calendar__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hst-brand);
}

.hst-calendar__nav {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--hst-border);
    background: var(--hst-surface);
    color: var(--hst-brand);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
}

.hst-calendar__nav:hover:not(:disabled) {
    background: var(--hst-brand-light);
    border-color: var(--hst-brand-mid);
}

.hst-calendar__nav:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.hst-calendar__weekdays,
.hst-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.hst-calendar__weekdays {
    margin-bottom: .35rem;
}

.hst-calendar__weekdays span {
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hst-ink-3);
}

.hst-calendar__grid {
    gap: .3rem;
}

.hst-calendar__day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hst-radius);
    border: 1px solid transparent;
    background: transparent;
    font-size: .85rem;
    color: var(--hst-ink-3);
    padding: 0;
}

.hst-calendar__day--empty {
    visibility: hidden;
}

.hst-calendar__day.has-slot {
    color: var(--hst-brand);
    font-weight: 700;
    border-color: var(--hst-border);
    background: var(--hst-brand-light);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.hst-calendar__day.has-slot:hover {
    border-color: var(--hst-brand-mid);
    background: var(--hst-brand-mid);
    color: #fff;
}

.hst-calendar__day.selected {
    background: var(--hst-brand);
    border-color: var(--hst-brand);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(26,58,110,.18);
}

@media (max-width: 480px) {
    .hst-calendar__day { font-size: .75rem; }
}

/* ── Time picker (only shown when a day has more than one time slot) ────── */
.hst-time-picker {
    margin-top: 1.1rem;
}

.hst-time-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.hst-time-chip {
    padding: .5rem 1rem;
    border-radius: var(--hst-radius);
    border: 2px solid var(--hst-border);
    background: var(--hst-surface);
    font-size: .85rem;
    font-weight: 600;
    color: var(--hst-ink);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.hst-time-chip:hover {
    border-color: var(--hst-brand-mid);
    background: var(--hst-brand-light);
}

.hst-time-chip.selected {
    border-color: var(--hst-brand);
    background: var(--hst-brand-light);
    color: var(--hst-brand);
}

/* ── Step actions ────────────────────────────────────────────────────────── */
.hst-step-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hst-border);
    align-items: center;
}

/* ── Stripe card element ──────────────────────────────────────────────────── */
.hst-stripe-card {
    padding: .75rem;
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-radius);
    background: var(--hst-surface);
    margin: .5rem 0 1rem;
}

.hst-card-errors {
    color: var(--hst-error);
    font-size: .85rem;
    margin-bottom: .75rem;
    padding: .5rem .75rem;
    background: var(--hst-error-bg);
    border-radius: var(--hst-radius);
}

/* ── Booking summary ──────────────────────────────────────────────────────── */
#hst-booking-summary {
    background: var(--hst-paper);
    border: 1px solid var(--hst-border);
    border-radius: var(--hst-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: .9rem;
    color: var(--hst-ink-2);
}

.hst-amount {
    margin: 0;
    font-size: 1rem;
}

.hst-amount strong { color: var(--hst-brand); font-size: 1.1rem; }

/* ── Confirmation ─────────────────────────────────────────────────────────── */
.hst-confirmation {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: var(--hst-success-bg);
    border: 1px solid #A8DCC7;
    border-radius: var(--hst-radius);
}

.hst-confirmation__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--hst-success);
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.hst-confirmation__title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--hst-success);
    margin: 0 0 .75rem;
}

.hst-confirmation__ref {
    font-size: 1.05rem;
    color: var(--hst-ink);
    margin: 0 0 .35rem;
}

.hst-confirmation__amount {
    font-size: .95rem;
    color: var(--hst-ink-2);
    margin: 0 0 1rem;
}

.hst-confirmation__note {
    font-size: .85rem;
    color: var(--hst-ink-2);
    margin: 0;
}

/* ── Utility states ──────────────────────────────────────────────────────── */
.hst-loading {
    color: var(--hst-ink-3);
    font-style: italic;
    font-size: .9rem;
}

.hst-no-slots {
    color: var(--hst-ink-2);
    padding: 1rem;
    background: var(--hst-paper);
    border-radius: var(--hst-radius);
    border: 1px solid var(--hst-border);
}

.hst-field-errors {
    background: var(--hst-error-bg);
    border: 1px solid #F5A8A8;
    border-radius: var(--hst-radius);
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    color: var(--hst-error);
}

.hst-field-errors ul { margin: 0; padding-left: 1.25rem; }
.hst-field-errors li { margin: .15rem 0; }

.hst-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .2em .55em;
    border-radius: 4px;
    line-height: 1.4;
}

.hst-badge--warning {
    background: #FEF3E2;
    color: #9A4D00;
}

.hst-badge--accreditation {
    background: var(--hst-brand-light);
    color: var(--hst-brand);
    margin-bottom: .5rem;
}