/* ==========================================================================
   LSF Form — Override Hello Elementor theme
   All rules use .lsf-form-wrap prefix for high specificity
   ========================================================================== */

/* ── Override theme .site-main max-width + decorative background ── */
main.lsf-single-form.site-main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #F9F4ED !important;
    background-image: url('data:image/svg+xml,<svg width="1469" height="258" viewBox="0 0 1469 258" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="117.84" y="33.001" width="41.1983" height="41.1983" rx="5" transform="rotate(66.7038 117.84 33.001)" fill="%23FFB256" fill-opacity="0.3"/><circle cx="204.276" cy="147.276" r="22.2254" transform="rotate(101.715 204.276 147.276)" fill="%233395FF" fill-opacity="0.3"/><path d="M62.5129 202.315C66.3295 202.814 68.1751 207.257 65.835 210.313L42.8003 240.394C40.4602 243.45 35.6895 242.827 34.213 239.272L19.6792 204.283C18.2027 200.729 21.1278 196.909 24.9444 197.407L62.5129 202.315Z" fill="%23FF5E33" fill-opacity="0.3"/><path d="M393.491 90.8518C396.622 93.0894 396.157 97.8782 392.654 99.4716L358.165 115.156C354.661 116.749 350.747 113.952 351.119 110.121L354.78 72.4111C355.152 68.5801 359.531 66.5883 362.663 68.826L393.491 90.8518Z" fill="%2300C3D5" fill-opacity="0.3"/><circle cx="1151.49" cy="136.489" r="22.2254" transform="rotate(20.011 1151.49 136.489)" fill="%23FFB256" fill-opacity="0.3"/><rect x="1418" y="159.662" width="41.1983" height="41.1983" rx="5" transform="rotate(-15 1418 159.662)" fill="%23FF5E33" fill-opacity="0.3"/><circle cx="1331.49" cy="140.489" r="22.2254" transform="rotate(20.011 1331.49 140.489)" fill="%233395FF" fill-opacity="0.3"/><path d="M1221.54 16.1868C1222.59 12.4821 1227.25 11.297 1229.94 14.0535L1256.38 41.1875C1259.07 43.9441 1257.76 48.5749 1254.03 49.5231L1217.31 58.8562C1213.58 59.8044 1210.22 56.3587 1211.27 52.654L1221.54 16.1868Z" fill="%23FF5E33" fill-opacity="0.3"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: top 80px center !important;
    overflow-x: hidden !important;
}

/* ── Reset box-sizing ── */
.lsf-form-wrap,
.lsf-form-wrap *,
.lsf-form-wrap *::before,
.lsf-form-wrap *::after {
    box-sizing: border-box !important;
}

/* ── Page wrapper ── */
.lsf-form-wrap {
    max-width: 900px !important;
    margin: 40px auto !important;
    padding: 0 !important;
    font-family: 'Noto Sans TC', sans-serif !important;
    position: relative !important;
}

/* ── Page title (報名系統) ── */
.lsf-form-wrap .lsf-page-title {
    text-align: center !important;
    color: #40170C !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 145% !important;
    letter-spacing: 4.8px !important;
    border: none !important;
    background: none !important;
}

.lsf-form-wrap .lsf-page-title .lsf-flower-icon {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
}

/* ── School badges ── */
.lsf-form-wrap .lsf-school-badges {
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.lsf-form-wrap .lsf-badge {
    display: inline-block !important;
    color: #fff !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: 1.6px !important;
    border: none !important;
}

.lsf-form-wrap .lsf-badge-green {
    background: #75D069 !important;
}

.lsf-form-wrap .lsf-badge-blue {
    background: #00C3D5 !important;
}

/* ── Intro card ── */
.lsf-form-wrap .lsf-intro-card {
    background: #fff !important;
    border-radius: 18px !important;
    padding: 40px 5% !important;
    margin-bottom: 14px !important;
    border: none !important;
    box-shadow: none !important;
}

.lsf-form-wrap .lsf-intro-card h2 {
    font-size: 36px !important;
    margin: 0 0 7px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    color: #40170C !important;
    font-weight: 700 !important;
    letter-spacing: 3.6px !important;
    text-align: left !important;
    border: none !important;
    background: none !important;
}

.lsf-form-wrap .lsf-intro-sub {
    font-size: 16px !important;
    color: #333 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lsf-form-wrap .lsf-intro-sub .req-mark {
    color: #ED0131 !important;
}

/* ── Section card ── */
.lsf-form-wrap .lsf-card {
    background: #fff !important;
    border-radius: 18px !important;
    padding: 40px 5% !important;
    margin-bottom: 14px !important;
    border: none !important;
    box-shadow: none !important;
}

.lsf-form-wrap .lsf-section-header {
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    color: #40170C !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 145% !important;
    letter-spacing: 2.8px !important;
    border: none !important;
    background: none !important;
}

.lsf-form-wrap .lsf-card-divider {
    border: none !important;
    border-top: 1px solid #000 !important;
    margin: 30px 0 !important;
    padding: 0 !important;
}

/* ── Two-column grid ── */
.lsf-form-wrap .lsf-two-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 30px !important;
}

.lsf-form-wrap .lsf-two-col > .lsf-full {
    grid-column: 1 / -1 !important;
}

/* ── Form group ── */
.lsf-form-wrap .lsf-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Labels — override theme label ── */
.lsf-form-wrap .lsf-field-label {
    display: block !important;
    font-size: 16px !important;
    color: #666 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    vertical-align: baseline !important;
}

.lsf-form-wrap .lsf-field .required {
    color: #e05c3a !important;
    margin-left: 1px !important;
}

/* ── Text inputs — override theme ── */
.lsf-form-wrap .lsf-form input[type="text"],
.lsf-form-wrap .lsf-form input[type="tel"],
.lsf-form-wrap .lsf-form input[type="email"],
.lsf-form-wrap .lsf-form input[type="date"],
.lsf-form-wrap .lsf-form input[type="number"] {
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    border: 2px solid #40170C !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-family: 'Noto Sans TC', sans-serif !important;
    color: #333 !important;
    background: #fff !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.15s !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: normal !important;
}

.lsf-form-wrap .lsf-form input[type="text"]:focus,
.lsf-form-wrap .lsf-form input[type="tel"]:focus,
.lsf-form-wrap .lsf-form input[type="email"]:focus,
.lsf-form-wrap .lsf-form input[type="date"]:focus,
.lsf-form-wrap .lsf-form input[type="number"]:focus {
    border-color: #aaa !important;
}

/* ── Textarea ── */
.lsf-form-wrap .lsf-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    border: 2px solid #40170C !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-family: 'Noto Sans TC', sans-serif !important;
    color: #333 !important;
    background: #fff !important;
    outline: none !important;
    resize: vertical !important;
    min-height: 110px !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.lsf-form-wrap .lsf-form textarea:focus {
    border-color: #aaa !important;
}

/* ── Select — override theme ── */
.lsf-form-wrap .lsf-form select {
    height: 42px !important;
    padding: 0 36px 0 12px !important;
    border: 2px solid #40170C !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-family: 'Noto Sans TC', sans-serif !important;
    color: #333 !important;
    background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%2340170C"/></svg>') no-repeat right 13px center !important;
    background-size: 10px 6px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    outline: none !important;
    transition: border-color 0.15s !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: normal !important;
}

.lsf-form-wrap .lsf-form select:focus {
    border-color: #aaa !important;
}

/* ── Hint text ── */
.lsf-form-wrap .lsf-hint {
    font-size: 12px !important;
    color: #666 !important;
    margin: 1px 0 0 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

/* ── Radio group — override theme label inline-block ── */
.lsf-form-wrap .lsf-radio-group {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 18px !important;
    padding: 3px 0 !important;
    margin: 0 !important;
}

.lsf-form-wrap .lsf-radio-group label {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 20px !important;
    color: #333 !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.lsf-form-wrap .lsf-radio-group input[type="radio"] {
    accent-color: #555 !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-appearance: radio !important;
    appearance: radio !important;
    flex-shrink: 0 !important;
}

.lsf-form-wrap .lsf-radio-hint {
    font-size: 13px !important;
    color: #999 !important;
    margin-left: 2px !important;
}

/* ── Enrollment radio — horizontal wrap (like mockup) ── */
.lsf-form-wrap .lsf-enrollment-options {
    gap: 6px 24px !important;
    align-items: center !important;
}

.lsf-form-wrap .lsf-enrollment-options label {
    font-size: 16px !important;
    white-space: nowrap !important;
}

/* ── Checkbox group ── */
.lsf-form-wrap .lsf-checkbox-group {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px 18px !important;
    padding: 3px 0 !important;
    margin: 0 !important;
}

.lsf-form-wrap .lsf-checkbox-group label {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 16px !important;
    color: #333 !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.lsf-form-wrap .lsf-checkbox-group input[type="checkbox"] {
    accent-color: #555 !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
    flex-shrink: 0 !important;
}

/* ── Date dropdowns — INLINE ── */
.lsf-form-wrap .lsf-date-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

.lsf-form-wrap .lsf-date-group select {
    width: auto !important;
    min-width: 85px !important;
    flex: 0 0 auto !important;
}

.lsf-form-wrap .lsf-date-group span {
    font-size: 14px !important;
    color: #666 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* ── Conditional block ── */
.lsf-form-wrap .lsf-conditional-group {
    display: none !important;
}

.lsf-form-wrap .lsf-conditional-group.visible {
    display: block !important;
}

/* ── Bottom bar (confirm) ── */
.lsf-form-wrap .lsf-bottom-bar {
    background: #fff !important;
    border-radius: 14px !important;
    padding: 20px 5% !important;
    margin-bottom: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Confirm checkbox row ── */
.lsf-form-wrap .lsf-confirm-row {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: #40170C !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 140% !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lsf-form-wrap .lsf-confirm-row input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #40170C !important;
    margin: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
}

/* ── Submit button — override theme button styles ── */
.lsf-form-wrap button.lsf-submit-btn,
.lsf-form-wrap button[type="submit"].lsf-submit-btn,
.lsf-form-wrap a.lsf-submit-btn {
    width: 100% !important;
    max-width: 300px !important;
    height: 70px !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    background: #FFB256 !important;
    box-shadow: 0 8px 0 0 #DC8333 !important;
    font-family: 'Noto Sans TC', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    transition: background 0.15s !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.lsf-form-wrap button.lsf-submit-btn:hover,
.lsf-form-wrap a.lsf-submit-btn:hover {
    background: #e8943a !important;
    color: #fff !important;
    border: none !important;
}

.lsf-form-wrap button.lsf-submit-btn:active,
.lsf-form-wrap a.lsf-submit-btn:active {
    background: #d8842c !important;
}

.lsf-form-wrap button.lsf-submit-btn:disabled {
    background: #ccc !important;
    box-shadow: 0 8px 0 0 #999 !important;
    cursor: not-allowed !important;
}

/* ── Messages ── */
.lsf-form-wrap .lsf-message {
    margin-top: 20px !important;
    padding: 16px 20px !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-size: 15px !important;
    background: #fff !important;
}

.lsf-form-wrap .lsf-message.success {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    border: 1px solid #a5d6a7 !important;
}

.lsf-form-wrap .lsf-message.error {
    background: #fdecea !important;
    color: #c62828 !important;
    border: 1px solid #ef9a9a !important;
}

/* ── Notice (form closed) ── */
main.lsf-single-form .lsf-notice {
    max-width: 900px !important;
    margin: 60px auto !important;
    padding: 40px !important;
    text-align: center !important;
    border-radius: 18px !important;
    font-size: 16px !important;
    background: #fff !important;
    color: #40170C !important;
    font-family: 'Noto Sans TC', sans-serif !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .lsf-form-wrap .lsf-two-col {
        grid-template-columns: 1fr !important;
    }

    .lsf-form-wrap .lsf-two-col > .lsf-full {
        grid-column: 1 !important;
    }

    .lsf-form-wrap .lsf-page-title {
        font-size: 32px !important;
        gap: 10px !important;
    }

    .lsf-form-wrap .lsf-page-title .lsf-flower-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .lsf-form-wrap .lsf-intro-card h2 {
        font-size: 24px !important;
        letter-spacing: 2px !important;
    }

    .lsf-form-wrap .lsf-section-header {
        font-size: 22px !important;
    }

    .lsf-form-wrap {
        padding: 0 !important;
    }

    .lsf-form-wrap button.lsf-submit-btn,
    .lsf-form-wrap a.lsf-submit-btn {
        max-width: 100% !important;
        font-size: 20px !important;
        height: 60px !important;
    }

    .lsf-form-wrap .lsf-bottom-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .lsf-form-wrap .lsf-date-group {
        flex-wrap: wrap !important;
    }

    .lsf-form-wrap .lsf-enrollment-options label {
        white-space: normal !important;
    }

    .lsf-form-wrap .lsf-success-actions {
        align-items: stretch !important;
    }

    .lsf-form-wrap .lsf-success-links {
        justify-content: center !important;
    }
}

/* ── Success page ── */
.lsf-form-wrap .lsf-success-card {
    text-align: left !important;
    line-height: 180% !important;
    font-size: 16px !important;
    color: #000 !important;
    letter-spacing: 0.8px !important;
}

.lsf-form-wrap .lsf-success-card h2 {
    margin-bottom: 30px !important;
}

.lsf-form-wrap .lsf-success-card p {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.lsf-form-wrap .lsf-success-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-top: 20px !important;
    margin-bottom: 40px !important;
}

.lsf-form-wrap .lsf-success-links {
    display: flex !important;
    gap: 32px !important;
    margin-bottom: 20px !important;
    align-self: flex-start !important;
}

.lsf-form-wrap .lsf-success-link {
    color: #FF5E33 !important;
    font-size: 16px !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.lsf-form-wrap.lsf-success-wrap a.lsf-submit-btn {
    margin: 0 0 0 auto !important;
}

/* ---------- Print ---------- */
@media print {
    a[href]:after {
        content: none !important;
    }
    .lsf-form-wrap .lsf-success-actions,
    .elementor-location-header .elementor-nav-menu--main,
    .elementor-location-header .elementor-nav-menu--dropdown {
        display: none !important;
    }
}