/* =========================================================================
   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);
}

/* --- 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 Toggle Buttons --- */
.fsn-age-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* !important required — Bricks theme resets all <button> elements globally */
.fsn-classes-custom-options .fsn-age-toggle {
    padding: 8px 18px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 100px !important;
    background: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    white-space: nowrap !important;
}

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

.fsn-classes-custom-options .fsn-age-toggle:hover {
    border-color: #ec2027 !important;
    color: #ec2027 !important;
    background: #fff5f5 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(236, 32, 39, 0.15) !important;
}

.fsn-classes-custom-options .fsn-age-toggle:active {
    transform: translateY(0) !important;
}

.fsn-classes-custom-options .fsn-age-toggle.active {
    background: #ec2027 !important;
    border-color: #ec2027 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(236, 32, 39, 0.30) !important;
    transform: translateY(-1px) !important;
}

/* =========================================================================
   FSN Native HTML Athlete Registration Form
========================================================================= */

/* --- Mode Toggle (New / Existing) --- */
.fsn-classes-custom-options .fsn-reg-mode-toggle {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 4px !important;
    gap: 4px !important;
    overflow: hidden !important;
    margin-top: 10px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
}

.fsn-classes-custom-options .fsn-reg-mode-btn {
    padding: 10px 0 !important;
    border: none !important;
    border-radius: 7px !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    line-height: 1.4 !important;
    display: block !important;
    text-align: center !important;
    font-family: inherit !important;
    text-decoration: none !important;
}

.fsn-classes-custom-options .fsn-reg-mode-btn.active {
    background: #ffffff !important;
    color: #dc2626 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
}

.fsn-classes-custom-options .fsn-reg-mode-btn:hover:not(.active) {
    color: #0f172a !important;
    background: rgba(255,255,255,0.5) !important;
}

/* --- Self-Register Checkbox --- */
.fsn-self-reg-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px !important;
    font-weight: 600;
    color: #475569;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}

.fsn-self-reg-label:hover {
    border-color: #dc2626;
    background: #fff5f5;
    color: #dc2626;
}

.fsn-self-reg-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #dc2626;
    flex-shrink: 0;
    cursor: pointer;
}

/* --- Athlete Entry Card --- */
.fsn-athlete-entry {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s;
}

.fsn-athlete-entry:focus-within {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

/* Card header: "ATHLETE #1" + remove button */
.fsn-athlete-entry__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fsn-athlete-entry__label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #dc2626;
}

.fsn-athlete-entry__remove {
    width: 24px;
    height: 24px;
    border-radius: 50% !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: border-color 0.2s, background 0.2s, color 0.2s !important;
    box-shadow: none !important;
    outline: none !important;
}

.fsn-athlete-entry__remove:hover {
    border-color: #dc2626 !important;
    background: #fff1f2 !important;
    color: #dc2626 !important;
}

/* Name row: first + last side by side */
.fsn-athlete-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Detail row: DOB + Gender side by side */
.fsn-athlete-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Generic field wrapper */
.fsn-athlete-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fsn-athlete-field--full {
    grid-column: 1 / -1;
}

/* Field labels */
.fsn-athlete-field label {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #64748b !important;
}

/* Inputs inside athlete card */
.fsn-athlete-entry input[type="text"],
.fsn-athlete-entry input[type="date"],
.fsn-athlete-entry select,
.fsn-athlete-entry textarea {
    width: 100%;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: #0f172a;
    font-weight: 500;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
}

.fsn-athlete-entry select {
    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 10px center;
    background-size: 15px;
    padding-right: 34px;
    cursor: pointer;
}

.fsn-athlete-entry input:focus,
.fsn-athlete-entry select:focus,
.fsn-athlete-entry textarea:focus {
    border-color: #dc2626;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}

.fsn-athlete-entry textarea {
    min-height: 72px;
    resize: vertical;
}

/* --- Existing Athlete Select Panel --- */
#fsn_existing_athlete_panel .fsn-athlete-field label {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #64748b !important;
}

#fsn_existing_athlete_select {
    width: 100%;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 36px 12px 14px;
    font-size: 14px;
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    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 12px center;
    background-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#fsn_existing_athlete_select:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}

/* Mobile: stack name + detail rows to single column */
@media (max-width: 480px) {
    .fsn-athlete-name-row,
    .fsn-athlete-detail-row {
        grid-template-columns: 1fr;
    }
    .fsn-classes-custom-options .fsn-reg-mode-toggle {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* =========================================================================
   FSN Free Trial Product Page
========================================================================= */

/* --- Outer Wrapper --- */
.fsn-trial-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: inherit;
    color: #0f172a;
}

/* --- Section label (shared with classes page) --- */
.fsn-trial-form-wrap .fsn-section-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 6px;
}

/* --- Required / optional markers --- */
.fsn-required { color: #dc2626; margin-left: 2px; }
.fsn-optional  { color: #94a3b8; font-size: 11px; margin-left: 4px; }

/* --- Shared input / textarea / select --- */
.fsn-trial-form-wrap .fsn-input,
.fsn-trial-form-wrap .fsn-select {
    width: 100%;
    box-sizing: border-box;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
    color: #0f172a;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.fsn-trial-form-wrap .fsn-input:focus,
.fsn-trial-form-wrap .fsn-select:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
    background: #fff;
}
.fsn-trial-form-wrap textarea.fsn-input {
    resize: vertical;
    min-height: 70px;
}
.fsn-trial-form-wrap .fsn-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    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 12px center;
    background-size: 16px;
    padding-right: 36px;
}

/* --- Label above each input --- */
.fsn-trial-form-wrap label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}

/* --- Side-by-side first / last name --- */
.fsn-inline-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 500px) {
    .fsn-inline-fields-row { grid-template-columns: 1fr; }
}
.fsn-field-half,
.fsn-field-full { display: flex; flex-direction: column; }
.fsn-field-full { margin-top: 0; }

/* --- Program radio pills --- */
.fsn-radio-group.fsn-program-selector {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.fsn-radio-option {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 11px 14px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}
.fsn-radio-option input[type="radio"] { display: none; }
.fsn-radio-option:hover {
    border-color: #dc2626;
    background: #fff5f5;
}
.fsn-radio-option--selected {
    border-color: #dc2626 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
    color: #dc2626;
}
.fsn-radio-option small {
    font-size: 11px;
    font-weight: 400;
    color: #94a3b8;
    display: block;
    margin-top: 1px;
}

/* =========================================================================
   Free Trial Custom Calendar
========================================================================= */

.fsn-calendar {
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    user-select: none;
}

/* Header row: Prev | Month Year | Next */
.fsn-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0f172a;
    padding: 12px 16px;
}
.fsn-calendar-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
.fsn-calendar-header button {
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.fsn-calendar-header button:hover {
    background: rgba(255,255,255,0.22);
}

/* 7-column grid */
.fsn-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* Day-name headers (SUN, MON …) */
.fsn-calendar-day-name {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding: 8px 0 6px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

/* Each day cell */
.fsn-calendar-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    min-height: 52px;
    border-right: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.fsn-calendar-cell:nth-child(7n) { border-right: none; }
.fsn-calendar-cell.empty          { background: #fafafa; cursor: default; }
.fsn-calendar-cell.disabled       { opacity: 0.4; cursor: not-allowed; }

.fsn-calendar-cell:not(.empty):not(.disabled):hover {
    background: #fff5f5;
}
.fsn-calendar-cell.selected {
    background: #dc2626 !important;
}
.fsn-calendar-cell.selected .fsn-calendar-date { color: #fff; }
.fsn-calendar-cell.selected .fsn-calendar-spots { color: rgba(255,255,255,0.85); }

.fsn-calendar-date {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}
.fsn-calendar-cell.disabled .fsn-calendar-date { color: #94a3b8; }

/* Availability badge under the date number */
.fsn-calendar-spots {
    display: block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #16a34a;
    margin-top: 3px;
    line-height: 1;
}
.fsn-calendar-spots.full    { color: #dc2626; }
.fsn-calendar-spots.blocked { color: #b91c1c; font-weight: 700; }

/* Blocked-trial calendar day cell: greyed out, no-click */
.fsn-calendar-cell.blocked-trial {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f8d7da;
}

/* --- Slot pills below the calendar --- */
#fsn-trial-slot-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.fsn-trial-slot-btn {
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fsn-trial-slot-btn:hover {
    border-color: #dc2626;
    color: #dc2626;
    background: #fff5f5;
}
.fsn-trial-slot-btn.selected {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}

/* --- Date/slot summary chip --- */
.fsn-trial-date-summary {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #15803d;
    margin-top: 8px;
}

/* Mobile: tighten calendar cells */
@media (max-width: 480px) {
    .fsn-calendar-cell     { min-height: 44px; padding: 4px 1px; }
    .fsn-calendar-date     { font-size: 13px; }
    .fsn-calendar-spots    { font-size: 8px; }
    .fsn-calendar-title    { font-size: 13px; }
    .fsn-radio-group.fsn-program-selector { flex-direction: column; }
}