/* =============================================================================
   MedicPro Admissions Form — v1.6.0
   Mobile-first. Brand colour: #75263B
   ============================================================================= */

:root {
    --mpa-brand:       #75263B;
    --mpa-brand-dark:  #5c1d2d;
    --mpa-brand-light: #f9f0f2;
    --mpa-border:      #dde1e7;
    --mpa-bg:          #f4f6f9;
    --mpa-white:       #ffffff;
    --mpa-text:        #1e2329;
    --mpa-muted:       #6b7280;
    --mpa-error:       #c0392b;
    --mpa-success:     #1a7f37;
    --mpa-radius:      8px;
    --mpa-shadow:      0 2px 12px rgba(0,0,0,.08);
    --mpa-transition:  .2s ease;
}

/* ── Page wrapper ──────────────────────────────────────────── */
.mpa-page {
    background: var(--mpa-bg);
    min-height: 60vh;
    padding: 40px 16px;
}

.mpa-page h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: var(--mpa-brand);
    text-align: center;
    margin: 0 0 8px;
}

.mpa-page-subtitle {
    text-align: center;
    color: var(--mpa-muted);
    margin: 0 0 36px;
    font-size: .95rem;
}

/* ── Form card ─────────────────────────────────────────────── */
.mpa-form-wrap {
    max-width: 780px;
    margin: 0 auto;
}

/* ── Section cards ─────────────────────────────────────────── */
.mpa-section {
    background: var(--mpa-white);
    border: 1px solid var(--mpa-border);
    border-radius: var(--mpa-radius);
    box-shadow: var(--mpa-shadow);
    margin-bottom: 24px;
    overflow: hidden;
}

.mpa-section-header {
    background: var(--mpa-brand);
    color: var(--mpa-white);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mpa-section-header .mpa-section-num {
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.mpa-section-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: inherit;
}

.mpa-section-body {
    padding: 24px;
}

/* ── Field grid ────────────────────────────────────────────── */
.mpa-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .mpa-grid-2 { grid-template-columns: 1fr 1fr; }
    .mpa-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.mpa-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mpa-field.mpa-col-span-2 { grid-column: span 2; }
.mpa-field.mpa-col-span-3 { grid-column: span 3; }

/* ── Labels ────────────────────────────────────────────────── */
.mpa-label {
    font-size: .84rem;
    font-weight: 600;
    color: var(--mpa-text);
    line-height: 1.3;
}

.mpa-label .mpa-req {
    color: var(--mpa-brand);
    margin-left: 2px;
}

/* ── Inputs ────────────────────────────────────────────────── */
.mpa-input,
.mpa-select,
.mpa-textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid var(--mpa-border);
    border-radius: 6px;
    font-size: .93rem;
    color: var(--mpa-text);
    background: var(--mpa-white);
    transition: border-color var(--mpa-transition), box-shadow var(--mpa-transition);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.mpa-input:focus,
.mpa-select:focus,
.mpa-textarea:focus {
    border-color: var(--mpa-brand);
    box-shadow: 0 0 0 3px rgba(117, 38, 59, .12);
    outline: none;
}

.mpa-select {
    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='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 36px;
    cursor: pointer;
}

.mpa-textarea {
    resize: vertical;
    min-height: 90px;
}

/* Error state */
.mpa-input.mpa-has-error,
.mpa-select.mpa-has-error,
.mpa-textarea.mpa-has-error {
    border-color: var(--mpa-error);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .1);
}

.mpa-field-error {
    font-size: .78rem;
    color: var(--mpa-error);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.mpa-field-error::before {
    content: "⚠";
    font-size: .85rem;
}

/* ── Checkbox group (Motivation) ───────────────────────────── */
.mpa-checkbox-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 480px) {
    .mpa-checkbox-group { grid-template-columns: 1fr; }
}

.mpa-check-item {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--mpa-brand-light);
    border: 1.5px solid transparent;
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color var(--mpa-transition), background var(--mpa-transition);
    font-size: .88rem;
    color: var(--mpa-text);
    user-select: none;
}

.mpa-check-item input[type="checkbox"] {
    accent-color: var(--mpa-brand);
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.mpa-check-item:has(input:checked) {
    border-color: var(--mpa-brand);
    background: #fce8ec;
}

/* ── File upload ───────────────────────────────────────────── */
.mpa-file-wrap {
    position: relative;
}

.mpa-file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1.5px dashed var(--mpa-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color var(--mpa-transition), background var(--mpa-transition);
    font-size: .88rem;
    color: var(--mpa-muted);
    background: var(--mpa-bg);
}

.mpa-file-label:hover {
    border-color: var(--mpa-brand);
    background: var(--mpa-brand-light);
    color: var(--mpa-brand);
}

.mpa-file-label svg {
    flex-shrink: 0;
    color: var(--mpa-brand);
}

.mpa-file-label .mpa-file-name {
    font-weight: 600;
    color: var(--mpa-brand);
    word-break: break-all;
}

.mpa-file-hint {
    font-size: .75rem;
    color: var(--mpa-muted);
    margin-top: 4px;
}

input[type="file"].mpa-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* ── Declaration / consent ─────────────────────────────────── */
.mpa-declaration-box {
    background: var(--mpa-brand-light);
    border: 1.5px solid #e8b4bf;
    border-radius: var(--mpa-radius);
    padding: 18px 20px;
}

.mpa-declaration-text {
    font-size: .85rem;
    color: #4a3038;
    margin: 0 0 14px;
    line-height: 1.65;
}

.mpa-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    color: var(--mpa-text);
    cursor: pointer;
}

.mpa-consent-row input[type="checkbox"] {
    accent-color: var(--mpa-brand);
    width: 17px;
    height: 17px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Submit button ─────────────────────────────────────────── */
.mpa-submit-wrap {
    text-align: center;
    margin-top: 8px;
}

.mpa-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--mpa-brand);
    color: var(--mpa-white);
    border: none;
    border-radius: 7px;
    padding: 14px 40px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--mpa-transition), opacity var(--mpa-transition), transform .1s;
    min-width: 220px;
    letter-spacing: .01em;
}

.mpa-submit-btn:hover:not(:disabled) {
    background: var(--mpa-brand-dark);
}

.mpa-submit-btn:active:not(:disabled) {
    transform: scale(.98);
}

.mpa-submit-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.mpa-submit-btn .mpa-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mpa-spin .7s linear infinite;
    display: none;
}

.mpa-submit-btn.mpa-loading .mpa-spinner { display: block; }
.mpa-submit-btn.mpa-loading .mpa-btn-text { opacity: .6; }

@keyframes mpa-spin { to { transform: rotate(360deg); } }

/* ── Global form error banner ──────────────────────────────── */
.mpa-form-errors {
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: var(--mpa-radius);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: .88rem;
    color: var(--mpa-error);
    display: none;
}

.mpa-form-errors.mpa-visible { display: block; }

.mpa-form-errors ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

/* ── Success card ──────────────────────────────────────────── */
.mpa-success-card {
    display: none;
    background: var(--mpa-white);
    border: 1.5px solid #86efac;
    border-radius: var(--mpa-radius);
    box-shadow: var(--mpa-shadow);
    padding: 48px 32px;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}

.mpa-success-card.mpa-visible { display: block; }

.mpa-success-icon {
    width: 64px;
    height: 64px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
}

.mpa-success-card h2 {
    color: var(--mpa-success);
    font-size: 1.4rem;
    margin: 0 0 10px;
}

.mpa-success-card p {
    color: var(--mpa-muted);
    font-size: .93rem;
    margin: 0 0 24px;
    line-height: 1.6;
}

.mpa-ref-badge {
    display: inline-block;
    background: var(--mpa-brand);
    color: var(--mpa-white);
    border-radius: 6px;
    padding: 10px 24px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .05em;
    margin-bottom: 8px;
}

.mpa-ref-label {
    font-size: .78rem;
    color: var(--mpa-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Honeypot — must be hidden ─────────────────────────────── */
.mpa-hp { display: none !important; visibility: hidden !important; }

/* ── Conditional hidden fields ─────────────────────────────── */
.mpa-conditional { display: none; }
.mpa-conditional.mpa-visible { display: flex; flex-direction: column; gap: 5px; }

/* ── Mobile tweaks ─────────────────────────────────────────── */
@media (max-width: 559px) {
    .mpa-section-body { padding: 16px; }
    .mpa-submit-btn { width: 100%; }
    .mpa-field.mpa-col-span-2,
    .mpa-field.mpa-col-span-3 { grid-column: span 1; }
}

/* ── Math Captcha ──────────────────────────────────────────── */
.mpa-captcha-wrap {
    border-top: 1px solid var(--mpa-border);
    padding-top: 20px;
}

.mpa-captcha-box {
    background: var(--mpa-bg);
    border: 1.5px solid var(--mpa-border);
    border-radius: var(--mpa-radius);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mpa-captcha-question {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mpa-captcha-label {
    font-size: .88rem;
    color: var(--mpa-muted);
    font-weight: 500;
}

.mpa-captcha-sum {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--mpa-brand);
    background: var(--mpa-brand-light);
    border: 1.5px solid #e8b4bf;
    border-radius: 6px;
    padding: 4px 16px;
    letter-spacing: .04em;
    min-width: 80px;
    text-align: center;
}

.mpa-captcha-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mpa-captcha-input {
    max-width: 130px;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: .05em;
}

/* hide browser spinner arrows on number input */
.mpa-captcha-input::-webkit-inner-spin-button,
.mpa-captcha-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mpa-captcha-input[type=number] { -moz-appearance: textfield; }

.mpa-captcha-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1.5px solid var(--mpa-border);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: .8rem;
    color: var(--mpa-muted);
    cursor: pointer;
    transition: border-color var(--mpa-transition), color var(--mpa-transition);
    white-space: nowrap;
}

.mpa-captcha-refresh-btn:hover {
    border-color: var(--mpa-brand);
    color: var(--mpa-brand);
}

.mpa-captcha-refresh-btn svg {
    flex-shrink: 0;
    transition: transform .35s ease;
}

.mpa-captcha-refresh-btn:hover svg {
    transform: rotate(180deg);
}

.mpa-captcha-refresh-btn.mpa-spinning svg {
    animation: mpa-spin .6s linear infinite;
}