/* Archie Booking System — Functional Styles
   Loaded regardless of theme styles setting.
   Contains only layout-critical rules — no visual opinions.
   ------------------------------------------------------------------ */

/* Step visibility */
.archie-step { transition: opacity .2s; }
.archie-step[style*="display:none"] { opacity: 0; }

/* Calendar grid — structural */
.archie-calendar { user-select: none; margin-bottom: 10px; }
.archie-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.archie-cal-day {
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: default;
    position: relative;
}
.archie-cal-day.available { cursor: pointer; }
.archie-cal-day.blocked   { cursor: pointer; }
.archie-cal-day.empty     { visibility: hidden; }
.archie-cal-day.past      { opacity: .4; }
.archie-cal-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.archie-cal-title  { flex: 1; text-align: center; font-weight: 700; }

/* Spinner */
.archie-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid #ccc;
    border-top-color: #111;
    border-radius: 50%;
    animation: archie-spin .7s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes archie-spin { to { transform: rotate(360deg); } }

/* Two-column row — collapses on mobile */
.archie-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 480px) { .archie-row { grid-template-columns: 1fr; } }

/* Session pills — column layout */
.archie-pill-group--sessions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.archie-pill--session { width: 100%; }

/* Pill groups — wrap layout */
.archie-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* Booking form section spacing — moved from inline styles */
#archie-member-status         { margin-top: 8px; }
#archie-member-status-under16 { margin-top: 8px; }
.archie-field--age-category   { margin-top: 8px; }
#archie-guardian-wrap         { margin-top: 16px; }
#archie-junior-archer-wrap    { margin-top: 16px; }
.archie-field--checkbox-with-hint { margin-bottom: 16px; }

/* Remove-participant button — layout only */
.archie-btn--remove-participant { display: inline-flex; align-items: center; cursor: pointer; }

/* Guardian wrap — inline layout */
.archie-guardian-wrap { display: inline-block; }