/**
 * SCYC Form 36 Mobile Optimizations
 * Ensures proper touch target sizes for mobile usability
 * MUST load after Fluent Forms default CSS to win cascade battles.
 */

/* Hide internal/debug fields from public display */
#fluentform_36 input[name="base_price_raw"],
#fluentform_36 input[name="requires_payment"],
#fluentform_36 input[name="moorings_total"],
#fluentform_36 input[name="moor_days"],
#fluentform_36 input[name="payment_total_matrix"],
#fluentform_36 input[name="paypal_amount"],
#fluentform_36 input[name="event_sig"],
#fluentform_36 input[name="event_id"],
#fluentform_36 input[name="payment_item_name"] {
    display: none !important;
}

/* ============================================================================
 * VIEWPORT SAFETY - prevent form from exceeding screen width.
 * These rules apply at ALL breakpoints to stop horizontal scroll.
 * ============================================================================ */

#fluentform_36,
.fluent_form_36,
.frm-fluent-form:has(#fluentform_36),
.fluentform:has(#fluentform_36) {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

#fluentform_36 *,
.fluent_form_36 * {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

#fluentform_36 input,
#fluentform_36 select,
#fluentform_36 textarea,
.fluent_form_36 input,
.fluent_form_36 select,
.fluent_form_36 textarea {
    max-width: 100% !important;
}

/* ============================================================================
 * MOBILE RESPONSIVE - Force single-column stack and sane sizing.
 * Uses !important to beat Fluent Forms defaults that may force row layout.
 * ============================================================================ */

@media (max-width: 767px) {
    /* Force every multi-column container to stack vertically */
    #fluentform_36 .ff-t-container,
    .fluent_form_36 .ff-t-container,
    .frm-fluent-form .ff-t-container,
    .fluentform .ff-t-container {
        display: block !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 1rem !important;
    }

    /* Each cell takes full width */
    #fluentform_36 .ff-t-cell,
    .fluent_form_36 .ff-t-cell,
    .frm-fluent-form .ff-t-cell,
    .fluentform .ff-t-cell {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        max-width: 100% !important;
    }

    /* Reduce outer form padding so content fits the screen */
    #fluentform_36,
    .fluent_form_36 {
        padding: 0.5rem !important;
        margin: 0 !important;
    }

    /* Inputs fill width with minimum touch target */
    #fluentform_36 input[type="text"],
    #fluentform_36 input[type="email"],
    #fluentform_36 input[type="tel"],
    #fluentform_36 input[type="number"],
    #fluentform_36 input[type="url"],
    #fluentform_36 input[type="date"],
    #fluentform_36 select,
    #fluentform_36 textarea,
    .fluent_form_36 input[type="text"],
    .fluent_form_36 input[type="email"],
    .fluent_form_36 input[type="tel"],
    .fluent_form_36 input[type="number"],
    .fluent_form_36 input[type="url"],
    .fluent_form_36 input[type="date"],
    .fluent_form_36 select,
    .fluent_form_36 textarea {
        width: 100% !important;
        min-height: 44px;
        font-size: 16px;
    }

    /* Touch-friendly checkboxes/radios */
    #fluentform_36 input[type="checkbox"],
    #fluentform_36 input[type="radio"],
    .fluent_form_36 input[type="checkbox"],
    .fluent_form_36 input[type="radio"] {
        min-width: 44px;
        min-height: 44px;
    }

    /* Full-width submit button */
    #fluentform_36 button[type="submit"],
    #fluentform_36 .ff-btn-submit,
    .fluent_form_36 button[type="submit"],
    .fluent_form_36 .ff-btn-submit {
        min-height: 44px;
        padding: 12px 24px;
        font-size: 16px;
    }

    /* Readable labels */
    #fluentform_36 label,
    .fluent_form_36 label {
        font-size: 16px;
        line-height: 1.4;
    }

    /* Spacing between stacked groups */
    #fluentform_36 .ff-el-group,
    .fluent_form_36 .ff-el-group {
        margin-bottom: 1.5rem;
    }
}

/* ============================================================================
 * FEE SECTIONS MOBILE - Stack the pricing card so the price is never pushed
 * off-screen. Targets the container directly so it works regardless of which
 * Fluent Forms wrapper is (or isn't) present.
 * ============================================================================ */

@media (max-width: 767px) {
    /* Row: stack label (radio + title) above details (band + price) */
    .form36-fee-sections .form36-fee-section-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
    }

    /* Label takes full width, centered */
    .form36-fee-sections .form36-fee-section-label {
        width: 100% !important;
        flex: none !important;
        justify-content: center !important;
    }

    /* Details row: stack band and price vertically, centered */
    .form36-fee-sections .form36-fee-section-details {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.25rem !important;
        width: 100% !important;
        padding-left: 0 !important;
    }

    /* Price centered */
    .form36-fee-sections .form36-fee-price {
        font-size: 1rem !important;
        text-align: center !important;
        min-width: 0 !important;
    }

    .form36-fee-sections .form36-fee-section-active .form36-fee-price {
        font-size: 1.05rem !important;
    }

    /* Title and section title centered */
    .form36-fee-sections .form36-fee-section-title,
    .form36-fee-sections .form36-fee-sections-title {
        text-align: center !important;
    }

    /* Band centered */
    .form36-fee-sections .form36-fee-band {
        text-align: center !important;
    }

    /* Make the outer fee sections container scroll-safe */
    .form36-fee-sections,
    #form36-fee-sections-container {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    .form36-fee-sections *,
    #form36-fee-sections-container * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================================
 * ENTRIES TICKER / TABLE MOBILE - Keep table contained and centred on small
 * screens. Allows horizontal scroll inside the wrapper instead of pushing
 * the layout wide.
 * ============================================================================ */

@media (max-width: 767px) {
    .scyc-event-entries-ticker,
    .scyc-entries-table-container {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Wrapper scrolls horizontally rather than forcing page width */
    .scyc-table-wrapper {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Table fits within the scroll wrapper */
    .scyc-entries-table {
        max-width: 100% !important;
    }

    /* Card-mode cells centred and readable */
    .scyc-entries-table td {
        justify-content: space-between !important;
        align-items: center !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .scyc-entries-table td::before {
        flex-shrink: 0 !important;
        margin-right: 0.75rem !important;
    }
}