/* =========================================================================
   FSN Classes Product Page — Custom Form Styles
   Target: WooCommerce Single Product pages for Classes & Tricking
========================================================================= */

/* --- Base Wrapper --- */
.fsn-classes-custom-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: inherit;
    margin-bottom: 12px;
}

/* --- Section Headings --- */
.fsn-field-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fsn-field-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
}

/* --- Age Division Select --- */
.fsn-age-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px;
    padding: 12px 40px 12px 14px;
    font-size: 14px !important;
    font-weight: 600;
    color: #0f172a !important;
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

.fsn-age-select option {
    color: #0f172a !important;
    background-color: #ffffff !important;
    font-weight: 500;
    padding: 8px;
}

.fsn-age-select:focus {
    outline: none;
    border-color: #dc2626 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* --- Product Header: Edit / Switch Mode Notice (fires via woocommerce_single_product_summary) --- */
.fsn-header-switch-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.25);
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.fsn-header-switch-notice__icon {
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.9;
}

.fsn-header-switch-notice__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fsn-header-switch-notice strong {
    font-weight: 800;
    font-size: 13px;
    color: #fcd34d;
}

.fsn-header-switch-notice span {
    color: rgba(255,255,255,0.90);
    font-size: 12px;
}

.fsn-header-switch-notice em {
    font-style: normal;
    font-weight: 700;
    color: #fff;
}

/* --- Edit / Switch Mode Banner (inside product form area) --- */
.fsn-switch-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #78350f;
}

.fsn-switch-banner__icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.fsn-switch-banner strong {
    display: block;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 2px;
    color: #92400e;
}

.fsn-switch-banner span {
    color: #78350f;
}

.fsn-switch-banner em {
    font-style: normal;
    font-weight: 700;
}

/* --- Membership Pricing Cards --- */
.fsn-pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.fsn-price-card {
    position: relative;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: #fff;
    text-align: center;
    user-select: none;
}

.fsn-price-card:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.fsn-price-card.selected {
    border-color: #dc2626;
    background: #fff1f2;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

.fsn-price-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.fsn-price-card__freq {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;
    margin-bottom: 4px;
}

.fsn-price-card.selected .fsn-price-card__freq {
    color: #dc2626;
}

.fsn-price-card__price {
    font-size: 24px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
    font-style: italic;
    margin: 4px 0;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fsn-price-card.selected .fsn-price-card__price {
    color: #dc2626;
}

.fsn-price-card__strike {
    font-size: 11px;
    color: #94a3b8;
    text-decoration: line-through;
    min-height: 14px;
    display: block;
    text-align: center;
}

.fsn-price-card__period {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 2px;
}

.fsn-price-card__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #dc2626;
    color: white;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* --- Schedule Slots --- */
.fsn-schedule-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    overflow: visible !important;
}

#fsn_class_schedule_container {
    overflow: visible !important;
}


.fsn-schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fsn-schedule-help {
    font-size: 11px;
    color: #64748b;
    font-style: italic;
}

.fsn-price-summary-bar {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: var(--brxw-space-s) var(--brxw-space-m);
    background-color: var(--secondary-ultra-dark);
    color: var(--velora-neutral-50);
    border-radius: var(--brxw-border-radius-m);
    margin-top: var(--brxw-space-m);
}

/* Hide default WooCommerce zero price above the custom UI
   NOTE: We no longer hide .product .summary .price because the PHP filter now
   injects the correct starting price and JS keeps it updated on tier selection.
   Only hide the Bricks element which sometimes renders a duplicate. */
.brxe-woocommerce-product-price {
    display: none !important;
}

/* --- Age Division Badge (replaces dropdown) --- */
.fsn-age-display {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.fsn-age-badge {
    display: inline-flex;
    align-items: center;
    background: #fff1f2;
    border: 1.5px solid #fca5a5;
    color: #dc2626;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: 0.03em;
}


/* --- Day-row layout: one row per day, pills per timeslot --- */
.fsn-day-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.fsn-day-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Day abbreviation label (TUE, THU, SAT …) */
.fsn-day-row__label {
    min-width: 36px;
    width: 36px;
    padding-top: 8px;
    /* vertically align with pill top */
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

/* Container for time pills within a day */
.fsn-day-row__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

/* Individual time pill (was .fsn-slot, now pill variant) */
.fsn-slot--pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    background: #fff;
    user-select: none;
}

.fsn-slot--pill:hover:not(.fsn-slot--full) {
    border-color: #94a3b8;
    background: #f8fafc;
}

.fsn-slot--pill.fsn-slot--checked {
    border-color: #dc2626;
    background: #fff1f2;
}

.fsn-slot--pill.fsn-slot--full {
    background: #f8fafc;
    cursor: not-allowed;
    opacity: 0.55;
}

.fsn-slot--pill input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    accent-color: #dc2626;
    cursor: inherit;
    flex-shrink: 0;
}

.fsn-slot__time {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

.fsn-slot--pill.fsn-slot--full .fsn-slot__time {
    color: #94a3b8;
}

/* Badge styles (shared) */
.fsn-slot__badge {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.fsn-slot__badge--available {
    background: #dcfce7;
    color: #15803d;
}

.fsn-slot__badge--warning {
    background: #fef3c7;
    color: #b45309;
}

.fsn-slot__badge--full {
    background: #fee2e2;
    color: #dc2626;
}


/* --- Membership Start Radio Cards --- */
.fsn-start-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fsn-start-card {
    position: relative;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: #fff;
    user-select: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.fsn-start-card:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.fsn-start-card.selected {
    border-color: #dc2626;
    background: #fff1f2;
}

.fsn-start-card input[type="radio"] {
    accent-color: #dc2626;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.fsn-start-card__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fsn-start-card__label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
}

.fsn-start-card.selected .fsn-start-card__label {
    color: #dc2626;
}

.fsn-start-card__date {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

/* --- Price Summary Box --- */
/* Permanently hidden in redesign — price shown in header card instead */
.fsn-price-summary {
    display: none !important;
}

.fsn-price-summary__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

.fsn-price-summary__val {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    font-style: italic;
}

.fsn-price-summary__val del {
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
    margin-right: 6px;
    font-style: normal;
}

.fsn-price-summary__fee {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

/* --- Gravity Form #15 Override --- */
#gform_wrapper_15 {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#gform_15 .gfield {
    margin-bottom: 18px !important;
}

#gform_15 .gfield_label {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

#gform_15 input[type="text"],
#gform_15 input[type="email"],
#gform_15 input[type="tel"],
#gform_15 input[type="number"],
#gform_15 input[type="date"],
#gform_15 select,
#gform_15 textarea {
    width: 100% !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

#gform_15 input:focus,
#gform_15 select:focus,
#gform_15 textarea:focus {
    border-color: #dc2626 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Radio buttons */
#gform_15 .gfield_radio {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#gform_15 .gfield_radio .gchoice {
    display: flex;
    align-items: center;
    gap: 8px;
}

#gform_15 .gfield_radio .gchoice label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
}

#gform_15 .gfield_radio input[type="radio"] {
    accent-color: #dc2626;
    width: 16px;
    height: 16px;
}

/* Checkboxes */
#gform_15 .gfield_checkbox .gchoice {
    display: flex;
    align-items: center;
    gap: 8px;
}

#gform_15 .gfield_checkbox .gchoice input[type="checkbox"] {
    accent-color: #dc2626;
    width: 16px;
    height: 16px;
}

#gform_15 .gfield_checkbox .gchoice label {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #0f172a !important;
    cursor: pointer;
}

/* Name field side by side */
#gform_15 .ginput_complex.ginput_container_name {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

#gform_15 .gform-field-label--type-sub {
    font-size: 10px !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Submit button */
#gform_submit_button_15 {
    display: none !important;
    /* Hidden — WooCommerce Add to Cart button is used */
}

/* Section titles */
#gform_15 .gsection_title {
    font-size: 13px !important;
    font-weight: 900 !important;
    font-style: italic;
    text-transform: uppercase !important;
    color: #0f172a !important;
    border-left: 3px solid #dc2626 !important;
    padding-left: 10px !important;
    margin-bottom: 14px !important;
}

#field_15_4 .ginput_container_select {
    height: 60px;
}

#feild_15_4 #input_15_4 {
    height: 56px;
}

/* --- Separator line between form sections --- */
.fsn-section-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 0;
}

/* --- Prevent Scrollbar on HTML fields containing custom selection UI --- */
.gfield_html,
.fsn-classes-custom-options {
    overflow: visible !important;
    max-height: none !important;
}

/* --- Age Group Cards (same visual language as .fsn-price-card) --- */
.fsn-age-toggles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

/* !important required — Bricks theme resets all <button> elements globally */
.fsn-classes-custom-options .fsn-age-toggle {
    position: relative !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 14px 12px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    background: #fff !important;
    text-align: center !important;
    user-select: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #475569 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    outline: none !important;
    white-space: normal !important;
    width: 100% !important;
}

.fsn-classes-custom-options .fsn-age-toggle:focus-visible {
    outline: 2px solid #dc2626 !important;
    outline-offset: 2px !important;
}

.fsn-classes-custom-options .fsn-age-toggle:hover {
    border-color: #94a3b8 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    transform: none !important;
    box-shadow: none !important;
}

.fsn-classes-custom-options .fsn-age-toggle:active {
    transform: none !important;
}

.fsn-classes-custom-options .fsn-age-toggle.active {
    border-color: #dc2626 !important;
    background: #fff1f2 !important;
    color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
    transform: none !important;
}
/* ============================================================
   Athlete Registration Form — Native HTML (replaces GF Form 15)
   ============================================================ */

/* Mode toggle */
.fsn-reg-mode-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.fsn-reg-mode-btn {
    flex: 1;
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}
.fsn-reg-mode-btn.active,
.fsn-reg-mode-btn:hover {
    border-color: #ec2027;
    background: #ec2027;
    color: #fff;
}

/* Self-register checkbox */
.fsn-self-reg-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
}
.fsn-self-reg-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #ec2027;
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Athlete card ─────────────────────────────────────────────────── */
.fsn-athlete-entry {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #f8fafc;
}

/* Header: label + remove button */
.fsn-ae-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.fsn-athlete-entry__label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.fsn-remove-athlete-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1.5px solid #e2e8f0;
    border-radius: 50%;
    color: #cbd5e1;
    font-size: 11px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.fsn-remove-athlete-btn:hover { border-color: #ec2027; color: #ec2027; }

/* Two-column field row */
.fsn-ae-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

/* Shared input / select — all fields identical */
.fsn-ai,
.fsn-ai:not([type="hidden"]) {
    /* Geometry */
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    width: 100% !important;

    /* Typography */
    font-family: inherit !important;
    font-size: 14px !important;
    color: #1e293b !important;

    /* Box */
    background: #fff !important;
    background-color: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 7px !important;
    box-shadow: none !important;

    /* Strip browser-specific chrome */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    transition: border-color .15s;
    display: block !important;
    vertical-align: middle;
}
.fsn-ai:focus,
.fsn-ai:focus-within          { outline: none !important; border-color: #ec2027 !important; box-shadow: none !important; }
.fsn-ai::placeholder          { color: #94a3b8 !important; font-size: 14px !important; opacity: 1; }

/* Date — keep browser calendar icon, just strip background chrome */
input[type="date"].fsn-ai {
    padding-right: 8px !important;
    line-height: normal !important;
    color-scheme: light;       /* forces white calendar icon background on Chrome */
}

/* Select — custom chevron arrow */
select.fsn-ai {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 32px !important;
    cursor: pointer;
}

/* Medical — full width row */
.fsn-ai--medical { display: block !important; width: 100% !important; margin-bottom: 0; }




/* Add another button */
#fsn_add_athlete_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    margin-top: 4px;
}
#fsn_add_athlete_btn:hover { border-color: #ec2027; color: #ec2027; }

/* Existing athlete panel — Select2 full width */
#fsn_existing_athlete_panel {
    margin-top: 4px;
}
#fsn_existing_athlete_panel select {
    width: 100%;
}
/* Select2 / selectWoo overrides — match form design */
#fsn_existing_athlete_panel .select2-container {
    width: 100% !important;
}
#fsn_existing_athlete_panel .select2-selection--single {
    height: 40px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 7px !important;
    display: flex;
    align-items: center;
    background: #fff !important;
}
#fsn_existing_athlete_panel .select2-selection__rendered {
    line-height: 40px !important;
    padding-left: 12px !important;
    font-size: 14px !important;
    color: #1e293b !important;
}
#fsn_existing_athlete_panel .select2-selection__placeholder {
    color: #94a3b8 !important;
}
#fsn_existing_athlete_panel .select2-selection__arrow {
    height: 38px !important;
    right: 8px !important;
}
#fsn_existing_athlete_panel .select2-selection__clear {
    margin-right: 8px;
    color: #94a3b8;
    font-size: 16px;
}
#fsn_existing_athlete_panel .select2-container--open .select2-selection--single {
    border-color: #ec2027 !important;
}
.select2-dropdown {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 7px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
    font-size: 14px !important;
}
.select2-search__field {
    border: 1px solid #e2e8f0 !important;
    border-radius: 5px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
}
.select2-search__field:focus { outline: none !important; border-color: #ec2027 !important; }
.select2-results__option--highlighted { background: #ec2027 !important; }


/* Mobile: stack each row to single column */
@media (max-width: 480px) {
    .fsn-ae-row { grid-template-columns: 1fr; }
    .fsn-reg-mode-toggle { flex-direction: column; }
}

/* Hide Free Trial card — functionality preserved, card not shown */
#fsn-card-trial { display: none !important; }


/* =========================================================================
   Free Trial Product Form — Single Product Page
   Classes: .fsn-trial-form-wrap and all children
========================================================================= */

/* Card body padding */
.fsn-camp-card-body {
    padding: 20px 24px 24px;
    background: #fff;
    border-radius: 0 0 12px 12px;
}

/* Section labels (small uppercase headings inside the form) */
.fsn-section-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
    margin-bottom: 6px;
}

/* Generic input / textarea */
.fsn-input {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    background: #fff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px !important;
    font-weight: 500;
    color: #0f172a !important;
    transition: border-color 0.2s;
    line-height: 1.4;
}
.fsn-input:focus {
    outline: none;
    border-color: #e94560 !important;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.12);
}
textarea.fsn-input { resize: vertical; min-height: 68px; }

/* Select */
.fsn-select {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px;
    padding: 11px 40px 11px 14px;
    font-size: 14px !important;
    font-weight: 600;
    color: #0f172a !important;
    cursor: pointer;
    transition: border-color 0.2s;
}
.fsn-select:focus { outline: none; border-color: #e94560 !important; }

/* Help text beneath a field */
.fsn-field-help {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

/* Required / optional labels */
.fsn-required { color: #e94560; font-weight: 700; }
.fsn-optional { font-size: 11px; color: #94a3b8; font-weight: 400; }

/* Program selector — pill radio buttons */
.fsn-radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.fsn-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #f8fafc;
    flex: 1;
    min-width: 140px;
}
.fsn-radio-option:hover { border-color: #cbd5e1; background: #f1f5f9; }
.fsn-radio-option--selected {
    border-color: #e94560;
    background: #fff5f6;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.10);
}
.fsn-radio-option input[type="radio"] { margin: 0; accent-color: #e94560; }
.fsn-radio-label { font-size: 13px; font-weight: 600; color: #0f172a; }
.fsn-radio-label small { font-weight: 400; color: #64748b; display: block; font-size: 11px; }

/* Class time grid */
.fsn-class-time-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fsn-class-time-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #f8fafc;
}
.fsn-class-time-option:hover { border-color: #cbd5e1; background: #f1f5f9; }
.fsn-class-time-option.selected {
    border-color: #e94560;
    background: #fff5f6;
    box-shadow: 0 0 0 3px rgba(233,69,96,0.10);
}
.fsn-class-time-option input[type="radio"] { margin: 0; accent-color: #e94560; flex-shrink: 0; }
.fsn-slot-day {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    min-width: 80px;
}
.fsn-slot-time {
    font-size: 13px;
    color: #475569;
    flex: 1;
}
.fsn-slot-spots {
    font-size: 11px;
    color: #22c55e;
    font-weight: 600;
    background: #f0fdf4;
    padding: 2px 8px;
    border-radius: 20px;
}

/* Inline two-column row */
.fsn-inline-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.fsn-field-half, .fsn-field-full { display: flex; flex-direction: column; gap: 6px; }
.fsn-field-full { grid-column: 1 / -1; }

/* Form wrap spacing */
.fsn-trial-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 8px;
}

/* Mobile */
@media (max-width: 600px) {
    .fsn-radio-group { flex-direction: column; }
    .fsn-inline-fields-row { grid-template-columns: 1fr; }
    .fsn-camp-card-body { padding: 16px; }
}

/* ─── Free Trial Booking Calendar ──────────────────────────────────────────── */
.fsn-trial-calendar-container { margin-top: 6px; }

.fsn-calendar { border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: #fff; }
.fsn-calendar-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.fsn-calendar-header button { background: none; border: 1px solid #cbd5e1; border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 13px; color: #64748b; font-weight: 700; transition: all 0.15s; }
.fsn-calendar-header button:hover { color: #0f172a; background: #e2e8f0; }
.fsn-calendar-title { font-weight: 700; color: #0f172a; font-size: 15px; }
.fsn-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.fsn-calendar-day-name { padding: 8px 2px; font-size: 10px; font-weight: 700; color: #64748b; background: #f8fafc; border-bottom: 1px solid #e2e8f0; text-transform: uppercase; }
.fsn-calendar-cell { padding: 6px 2px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: default; }
.fsn-calendar-cell:nth-child(7n) { border-right: none; }
.fsn-calendar-cell.empty    { background: #f8fafc; }
.fsn-calendar-cell.disabled { opacity: 0.4; background: #f8fafc; }
.fsn-calendar-cell.available { cursor: pointer; }
.fsn-calendar-cell.available:hover { background: #e2e8f0; }
.fsn-calendar-cell.selected { background: #ec2027 !important; border-color: #ec2027 !important; }
.fsn-calendar-date { font-weight: 700; font-size: 13px; color: #0f172a; line-height: 1; }
.fsn-calendar-cell.selected .fsn-calendar-date { color: #fff; }
.fsn-calendar-spots { font-size: 9px; font-weight: 700; color: #10b981; line-height: 1; text-align: center; white-space: nowrap; }
.fsn-calendar-cell.selected .fsn-calendar-spots { color: rgba(255,255,255,0.85); }
.fsn-calendar-spots.full { color: #ef4444; }

/* Date-selected confirmation strip */
.fsn-trial-date-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 8px;
    font-size: 13px;
    color: #15803d;
    margin-top: 8px;
}