/* Shared look of the application forms (Fluent Forms): LGS form embedded on lgs.sc.ke and each school's own form on lis.sc.ke.
   Scope: any element with class "lgs-ap" around the [fluentform]. Behaviour: apply-form.js. */
.lgs-ap { padding: 2px 2px 30px; }
/* Let the button's shadow show fully (no clipped square behind it) */
.lgs-ap .fluentform, .lgs-ap .fluentform form, .lgs-ap .fluentform .ff-el-group, .lgs-ap .fluentform .ff_submit_btn_wrapper { overflow: visible !important; }
.lgs-ap .fluentform .ff_submit_btn_wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; background: none !important; }
.lgs-ap *, .lgs-ap *::before, .lgs-ap *::after { box-sizing: border-box; }
.lgs-ap .fluentform .ff-el-section-break { margin: 26px 0 14px; }
.lgs-ap .fluentform .ff-el-section-break:first-child, .lgs-ap form > .ff-el-section-break:first-of-type { margin-top: 0; }
.lgs-ap .fluentform .ff-el-section-title { display: flex; align-items: center; gap: 10px; margin: 0 !important; color: #004a98; font: 700 13px/1.3 'Inter', sans-serif !important; letter-spacing: .06em; text-transform: uppercase; }
.lgs-ap .fluentform .ff-el-section-title::after { flex: 1; height: 1px; background: #e2e8f0; content: ''; }
.lgs-ap .fluentform .ff-el-section-break hr { display: none; }
.lgs-ap .fluentform .ff-el-group { margin-bottom: 20px; }
/* Columns side by side (Fluent Forms stacks them below 768px – the iframe is narrower than that on a laptop) */
.lgs-ap .fluentform .ff-t-container { display: flex !important; gap: 16px; margin: 0 !important; }
.lgs-ap .fluentform .ff-t-cell { flex: 1 1 0 !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; }
.lgs-ap .fluentform .ff-t-cell .ff-el-group { margin-bottom: 20px; }
.lgs-ap .fluentform .ff-el-input--label label { margin-bottom: 7px; color: #334155; font-size: 12.5px; font-weight: 600; }
.lgs-ap .fluentform .ff-el-is-required.asterisk-right label::after { color: #ef4444; }
.lgs-ap .fluentform .ff-el-form-control { width: 100% !important; height: 50px !important; min-height: 50px; margin: 0 !important; padding: 0 16px !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; background-color: #fbfcfe !important; color: #0B1E36 !important; font: 400 15px/48px 'Inter', sans-serif !important; box-shadow: none !important; transition: border-color .2s, box-shadow .2s, background .2s; }
.lgs-ap .fluentform .ff-el-form-control::placeholder { color: #94a3b8; }
.lgs-ap .fluentform select.ff-el-form-control { padding-right: 42px !important; text-overflow: ellipsis; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E56A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-position: right 16px center; background-repeat: no-repeat; cursor: pointer; }
.lgs-ap .fluentform select.ff-el-form-control:disabled { background-color: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.lgs-ap .fluentform textarea.ff-el-form-control { height: auto !important; min-height: 130px; padding: 14px 16px !important; border-radius: 14px !important; line-height: 1.55 !important; }
.lgs-ap .fluentform .ff-el-form-control:focus { border-color: #1C6CBC !important; background-color: #fff !important; box-shadow: 0 0 0 4px rgba(28, 108, 188, .15) !important; outline: 0; }
.lgs-ap .fluentform .ff_upload_btn.ff-btn { padding: 12px 16px; border: 1.5px dashed #b9cde6; border-radius: 14px; background: #E8F1FC; color: #0B1E36; font-weight: 700; }
.lgs-ap .fluentform .ff-el-help-message { margin-top: 6px; color: #64748b; font-size: 12.5px; font-style: normal; }
.lgs-ap .fluentform .error, .lgs-ap .fluentform .text-danger { margin-top: 6px; color: #CE2626; font-size: 13px; }
.lgs-ap .fluentform .ff-el-is-error .ff-el-form-control { border-color: #fca5a5; }
.lgs-ap .lgs-ap-note { display: none; margin-top: 6px; padding: 5px 14px; border: 1px solid #fde68a; border-radius: 999px; background: #fffbeb; color: #b45309; font-size: 12px; }
.lgs-ap .lgs-ap-note.is-on { display: inline-block; }
.lgs-ap .fluentform .ff_submit_btn_wrapper { margin-top: 8px; padding-top: 22px; border-top: 1px solid #e2e8f0; }
.lgs-ap .lgs-ap-confirm { margin: 0 0 14px; color: #64748b; font-size: 12px; }
/* "Please fill in the fields marked *" – shown above the confirmation line when required fields are empty */
.lgs-ap .lgs-ap-alert { display: none; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid #fecaca; border-radius: 12px; background: #fef2f2; color: #b91c1c; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.lgs-ap .lgs-ap-alert.is-on { display: flex; animation: lgs-ap-shake .4s ease; }
.lgs-ap .lgs-ap-alert svg { flex: none; width: 18px; height: 18px; }
@keyframes lgs-ap-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
/* Submit button: red → blue on hover, spinner while sending, green when sent */
.lgs-ap .fluentform .ff-btn-submit { position: relative; display: inline-flex !important; min-width: 240px; height: 58px; align-items: center; justify-content: center; gap: 10px; overflow: hidden; padding: 0 34px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg, #e03a3a, #CE2626 45%, #a91e1e) !important; color: #fff !important; font: 800 16px/1 'Plus Jakarta Sans', sans-serif !important; letter-spacing: .01em; opacity: 1 !important; box-shadow: 0 14px 28px -12px rgba(206, 38, 38, .75), inset 0 1px 0 rgba(255, 255, 255, .25) !important; cursor: pointer; isolation: isolate; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, color .2s ease !important; }
.lgs-ap .fluentform .ff-btn-submit::before { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, #2a86d9, #1C6CBC 45%, #0B5494); content: ''; opacity: 0; transition: opacity .3s ease; }
.lgs-ap .fluentform .ff-btn-submit::after { position: absolute; top: 0; left: -75%; z-index: -1; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); content: ''; transform: skewX(-20deg); transition: left .7s ease; }
.lgs-ap .fluentform .ff-btn-submit:hover, .lgs-ap .fluentform .ff-btn-submit:focus-visible { opacity: 1 !important; transform: translateY(-3px); box-shadow: 0 20px 34px -14px rgba(28, 108, 188, .8), inset 0 1px 0 rgba(255, 255, 255, .25) !important; }
.lgs-ap .fluentform .ff-btn-submit:hover::before, .lgs-ap .fluentform .ff-btn-submit:focus-visible::before { opacity: 1; }
.lgs-ap .fluentform .ff-btn-submit:hover::after { left: 130%; }
.lgs-ap .fluentform .ff-btn-submit:focus-visible { outline: 3px solid rgba(28, 108, 188, .35); outline-offset: 3px; }
.lgs-ap .fluentform .ff-btn-submit:active { transform: translateY(0) scale(.97); transition-duration: .08s !important; }
.lgs-ap .lgs-ap-btn__label, .lgs-ap .lgs-ap-btn__busy, .lgs-ap .lgs-ap-btn__done { display: inline-flex; align-items: center; gap: 10px; transition: opacity .2s ease, transform .3s ease; }
.lgs-ap .lgs-ap-btn__arrow { display: inline-block; transition: transform .25s ease; }
.lgs-ap .fluentform .ff-btn-submit:hover .lgs-ap-btn__arrow { transform: translate(3px, -3px); }
.lgs-ap .lgs-ap-btn__busy, .lgs-ap .lgs-ap-btn__done { position: absolute; inset: 0; justify-content: center; opacity: 0; transform: translateY(12px); pointer-events: none; }
.lgs-ap .lgs-ap-spin { width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: lgs-ap-spin .7s linear infinite; }
@keyframes lgs-ap-spin { to { transform: rotate(360deg); } }
/* Sending (our class, plus Fluent's own while it works) */
.lgs-ap .fluentform .ff-btn-submit.is-sending, .lgs-ap .fluentform .ff-btn-submit.ff-working, .lgs-ap .fluentform .ff-btn-submit.disabled { cursor: progress; transform: none; pointer-events: none; }
.lgs-ap .fluentform .ff-btn-submit.is-sending::before, .lgs-ap .fluentform .ff-btn-submit.ff-working::before { opacity: 1; background: linear-gradient(90deg, #0B5494, #1C6CBC, #2a86d9, #1C6CBC, #0B5494); background-size: 300% 100%; animation: lgs-ap-flow 1.6s linear infinite; }
@keyframes lgs-ap-flow { to { background-position: -300% 0; } }
.lgs-ap .fluentform .ff-btn-submit.is-sending .lgs-ap-btn__label, .lgs-ap .fluentform .ff-btn-submit.ff-working .lgs-ap-btn__label { opacity: 0; transform: translateY(-12px); }
.lgs-ap .fluentform .ff-btn-submit.is-sending .lgs-ap-btn__busy, .lgs-ap .fluentform .ff-btn-submit.ff-working .lgs-ap-btn__busy { opacity: 1; transform: none; }
.lgs-ap .fluentform .ff-btn-submit .ff-el-spinner, .lgs-ap .fluentform .ff-btn-submit .ff_btn_loading { display: none !important; }
/* Sent */
.lgs-ap .fluentform .ff-btn-submit.is-done::before { opacity: 1; background: linear-gradient(135deg, #22c55e, #16a34a); animation: none; }
.lgs-ap .fluentform .ff-btn-submit.is-done .lgs-ap-btn__label, .lgs-ap .fluentform .ff-btn-submit.is-done .lgs-ap-btn__busy { opacity: 0; }
.lgs-ap .fluentform .ff-btn-submit.is-done .lgs-ap-btn__done { opacity: 1; transform: none; }
@media (max-width: 560px) {
    .lgs-ap .fluentform .ff_submit_btn_wrapper .ff-btn-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .lgs-ap .fluentform .ff-btn-submit, .lgs-ap .fluentform .ff-btn-submit * , .lgs-ap .fluentform .ff-btn-submit::before, .lgs-ap .fluentform .ff-btn-submit::after { transition: none !important; animation-duration: 2s !important; }
}
.lgs-ap .ff-message-success { padding: 22px 24px; border: 1px solid #86efac; border-radius: 16px; background: #f0fdf4; color: #14532d; box-shadow: none; }
.lgs-ap .ff-message-success h3 { margin: 0 0 8px; color: #14532d; font: 800 20px/1.3 'Plus Jakarta Sans', sans-serif; }
.lgs-ap .ff-errors-in-stack { border-radius: 14px; }
/* Phone: one column */
@media (max-width: 560px) {
    .lgs-ap .fluentform .ff-t-container { display: block !important; }
    .lgs-ap .fluentform .ff-t-cell { width: 100% !important; }
    .lgs-ap .fluentform .ff-el-group, .lgs-ap .fluentform .ff-t-cell .ff-el-group { margin-bottom: 16px; }
}

/* Fluent's hidden file input (the "Choose files" button opens it): keep it hidden – the 100% width / 50px height
   given to every field above made it stick out past the screen on phones */
.lgs-ap .fluentform input[type="file"], .lgs-ap .fluentform .ff-screen-reader-element { position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; min-height: 0 !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; white-space: nowrap; }
.lgs-ap .fluentform .ff-el-input--content { position: relative; max-width: 100%; }
.lgs-ap, .lgs-ap .fluentform, .lgs-ap .fluentform form { max-width: 100%; }