/* ═══════════════════════════════════════════════════════════════
   EvoBase — Enrollment Styles
   ═══════════════════════════════════════════════════════════════ */

/* ─── Enrollment header (replaces site-header on form page) ─── */
.enrollment-header {
    position:sticky; top:0; z-index:200;
    background:#fff; border-bottom:1px solid var(--border);
    box-shadow:0 2px 12px rgba(35,61,61,0.06);
}
.enrollment-header-inner {
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:0.85rem 2rem; max-width:1400px; margin:0 auto;
}
.enrollment-logo { display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.enrollment-logo:hover { text-decoration:none; }
.enrollment-logo img { height:30px; width:auto; }
.enrollment-header-actions { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }

/* Autosave status */
.autosave-status { font-size:0.8rem; color:var(--neutral); white-space:nowrap; }

/* Language selector */
.lang-selector { position:relative; }
.lang-btn {
    display:flex; align-items:center; gap:0.4rem;
    background:none; border:1px solid var(--border); border-radius:8px;
    padding:0.4rem 0.75rem; font-size:0.875rem; font-weight:500;
    color:var(--text-sub); cursor:pointer; transition:border-color 0.2s,color 0.2s;
}
.lang-btn:hover { border-color:var(--secondary); color:var(--secondary); }
.lang-dropdown {
    display:none; position:absolute; top:calc(100% + 6px); right:0;
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:8px; box-shadow:0 8px 24px rgba(35,61,61,0.12);
    min-width:190px; z-index:300; overflow:hidden;
}
.lang-dropdown.open { display:block; animation:fadeIn 0.15s ease; }
.lang-option {
    display:block; padding:0.6rem 1rem; font-size:0.9rem;
    color:var(--text); transition:background 0.15s;
}
.lang-option:hover { background:var(--hover-bg); text-decoration:none; }
.lang-option.active { color:var(--secondary); font-weight:600; }

/* Draft restore banner */
.draft-banner {
    display:none; background:rgba(41,142,142,0.08); border-bottom:1px solid rgba(41,142,142,0.2);
    padding:0.75rem 2rem; font-size:0.9rem; color:var(--primary);
    align-items:center; justify-content:space-between; gap:1rem;
}
.draft-banner.visible { display:flex; }
.draft-banner-error { background:rgba(200,40,40,0.08); border-bottom-color:rgba(200,40,40,0.3); color:var(--danger, #c82828); }
.draft-banner-dismiss {
    background:none; border:none; font-size:1.1rem; cursor:pointer;
    color:var(--neutral); padding:0 0.25rem; line-height:1;
}

/* Validation remarks — colorful chips docked to top */
.validation-remarks {
    position:sticky; top:60px; z-index:90;
    display:none; flex-wrap:wrap; gap:0.5rem;
    padding:1rem 2rem; background:rgba(200,40,40,0.06);
    border-bottom:1px solid rgba(200,40,40,0.2);
}
.validation-remarks.visible { display:flex; }
.validation-remark {
    display:inline-flex; align-items:center; gap:0.35rem;
    padding:0.3rem 0.75rem; border-radius:20px;
    font-size:0.8rem; font-weight:600; cursor:pointer;
    transition:opacity 0.15s;
}
.validation-remark:hover { opacity:0.8; }
.validation-remark.remark-missing {
    background:#fde8e8; color:#b91c1c; border:1px solid #fca5a5;
}
.validation-remark.remark-invalid {
    background:#fef3c7; color:#92400e; border:1px solid #fcd34d;
}
.validation-remark .remark-dot {
    width:6px; height:6px; border-radius:50%; flex-shrink:0;
}
.remark-missing .remark-dot { background:#b91c1c; }
.remark-invalid .remark-dot { background:#92400e; }

/* File warning modal — stacked buttons */
.modal-footer-stack { flex-direction:column; align-items:stretch; }
.modal-footer-stack .btn { text-align:center; }

/* ─── Welcome page (enrollment/index.php) ─────────────────────── */
.welcome-page {
    min-height:calc(100vh - 70px);
    display:flex; align-items:center; justify-content:center;
    padding:3rem 2rem; background:var(--bg);
}
.welcome-card {
    background:var(--card-bg); border-radius:20px; padding:3.5rem;
    max-width:680px; width:100%;
    box-shadow:0 8px 40px rgba(35,61,61,0.1);
    text-align:center;
}
.welcome-partner-tag {
    display:inline-flex; align-items:center; gap:0.5rem;
    background:rgba(49,235,181,0.12); border:1px solid rgba(49,235,181,0.3);
    border-radius:8px; padding:0.5rem 1rem;
    font-size:0.9rem; font-weight:600; color:#1a7a5a;
    margin-bottom:1.5rem;
}
.welcome-card h1 {
    font-size:2rem; font-weight:700; letter-spacing:-0.5px;
    color:var(--primary); margin-bottom:1.25rem; line-height:1.3;
}
.welcome-card .intro { font-size:1.05rem; color:var(--text-sub); line-height:1.75; margin-bottom:1.75rem; }
.welcome-list { list-style:none; text-align:left; margin:0 0 2rem; display:flex; flex-direction:column; gap:0.75rem; }
.welcome-list li {
    display:flex; align-items:flex-start; gap:0.75rem;
    font-size:0.95rem; color:var(--text-sub); line-height:1.5;
}
.welcome-list li::before {
    content:'✓'; color:var(--secondary); font-weight:700; font-size:1rem; flex-shrink:0; margin-top:0.1rem;
}

/* ─── Utility: spacing helpers ─────────────────────────────────── */
.mt-sm  { margin-top:0.5rem; }
.mt-md  { margin-top:0.75rem; }
.mt-lg  { margin-top:1.5rem; }

/* ─── Utility: layout helpers ─────────────────────────────────── */
.hidden { display:none !important; }

/* ─── Honeypot (anti-spam, hidden from humans) ────────────────── */
.honeypot { position:absolute; left:-9999px; height:0; width:0; overflow:hidden; opacity:0; }

/* ─── Form body & layout ───────────────────────────────────────── */
.form-body { background:var(--bg); }
.form-page { max-width:860px; margin:0 auto; padding:2rem 2rem 4rem; }

/* Form sections */
.form-section {
    background:var(--card-bg); border-radius:12px; padding:2rem;
    margin-bottom:1.5rem; border:1px solid var(--border);
}
.form-section-title {
    font-size:1.3rem; font-weight:700; color:var(--primary);
    padding-bottom:1rem; margin-bottom:1.5rem;
    border-bottom:2px solid var(--accent);
}

/* Form grid — 2 cols desktop, 1 col mobile */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-group.full-width { grid-column:1/-1; }

/* Labels */
.form-label {
    display:flex; align-items:center; gap:0.35rem;
    font-size:0.95rem; font-weight:600; color:var(--primary);
}

/* Inputs */
.form-control {
    width:100%; padding:0.75rem 1rem;
    border:1px solid #d0d0d0; border-radius:6px;
    font-family:inherit; font-size:1rem; color:var(--primary);
    background:#fff; transition:border-color 0.2s,box-shadow 0.2s;
}
.form-control:focus {
    outline:none; border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(41,142,142,0.1);
}
.form-control::placeholder { color:#b0b8b8; }
.form-control.error { border-color:#e74c3c; }

textarea.form-control { resize:vertical; min-height:120px; line-height:1.6; }

/* Checkbox rows */
.form-checkbox-row { display:flex; align-items:center; gap:0.6rem; }
.form-checkbox-row input[type=checkbox] { width:18px; height:18px; accent-color:var(--secondary); cursor:pointer; flex-shrink:0; }
.form-checkbox-row label { font-size:0.95rem; font-weight:500; color:var(--primary); cursor:pointer; }

/* Hints & errors */
.form-hint  { font-size:0.82rem; color:#666; margin-top:0.2rem; }
.field-error { font-size:0.82rem; color:#e74c3c; margin-top:0.2rem; display:none; }
.field-error.visible { display:block; }

/* Char counter */
.char-counter { font-size:0.82rem; color:#666; text-align:right; margin-top:0.25rem; }
.char-counter.warn   { color:#e67e22; font-weight:600; }
.char-counter.danger { color:#e74c3c; font-weight:600; }

/* Conditional blocks */
.conditional-block { border-left:3px solid var(--border); padding-left:1.25rem; margin-top:0.75rem; }

/* ─── Tooltip ──────────────────────────────────────────────────── */
.tooltip-trigger {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border-radius:50%; border:none;
    background:var(--secondary); color:#fff;
    font-size:0.7rem; font-weight:700; cursor:pointer; flex-shrink:0;
}
.tooltip-wrap { position:relative; display:inline-flex; }
.tooltip-box {
    display:none; position:absolute; bottom:calc(100% + 8px); left:50%;
    transform:translateX(-50%); width:280px; padding:0.75rem 1rem;
    background:#233d3d; color:#fff; font-size:0.825rem; line-height:1.5;
    border-radius:8px; z-index:100; pointer-events:none;
    box-shadow:0 4px 16px rgba(0,0,0,0.2);
}
.tooltip-box::after {
    content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:#233d3d;
}
.tooltip-trigger:hover + .tooltip-box,
.tooltip-trigger:focus + .tooltip-box { display:block; }

/* ─── Upload zones ─────────────────────────────────────────────── */
.upload-zone {
    border:2px dashed #d0d0d0; border-radius:8px;
    background:#fafafa; transition:border-color 0.2s,background 0.2s;
    min-height:120px; display:flex; align-items:center; justify-content:center;
}
.upload-zone:hover { border-color:var(--secondary); background:#f5f9ff; }
.upload-zone.drag-over { border-style:solid; border-color:var(--accent); background:#e8f9f5; }
.upload-idle { text-align:center; padding:1.5rem; width:100%; }
.upload-input { display:none; }
.btn-upload {
    display:inline-flex; align-items:center; justify-content:center;
    padding:0.6rem 1.25rem; border:none; border-radius:8px; cursor:pointer;
    background:linear-gradient(135deg,#298e8e 0%,#1f7070 100%);
    color:#fff; font-family:inherit; font-size:0.9rem; font-weight:600;
    transition:all 0.2s; margin-bottom:0.75rem;
}
.btn-upload:hover { background:linear-gradient(135deg,#31ebb5 0%,#298e8e 100%); transform:translateY(-1px); }
.upload-hint { font-size:0.82rem; color:#999; margin-top:0.25rem; }
.upload-preview {
    display:none; align-items:center; justify-content:space-between;
    gap:1rem; padding:1rem 1.5rem; width:100%;
}
.upload-preview.visible { display:flex; }
.preview-icon { font-size:1.5rem; }
.preview-name { font-size:0.9rem; font-weight:600; color:var(--primary); word-break:break-all; flex:1; }
.btn-remove-file {
    background:none; border:1px solid #e74c3c; color:#e74c3c;
    border-radius:6px; padding:0.3rem 0.6rem; font-size:0.8rem; cursor:pointer; white-space:nowrap;
}
.btn-remove-file:hover { background:#e74c3c; color:#fff; }

/* ─── Dynamic rows (key people, funding, news, products) ──────── */
.dynamic-row { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem; }
.dynamic-row .form-control { flex:1; }
.dynamic-row .btn-remove { flex-shrink:0; }

.key-people-row { display:grid; grid-template-columns:1fr 1fr auto; gap:0.75rem; align-items:center; margin-bottom:0.75rem; }
.funding-row    { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:0.75rem; align-items:center; margin-bottom:0.75rem; }
.news-row       { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:0.75rem; align-items:center; margin-bottom:0.75rem; }
.product-row    { display:grid; grid-template-columns:1fr auto; gap:0.75rem; align-items:center; margin-bottom:0.75rem; }

/* ─── Form submit bar ──────────────────────────────────────────── */
.form-submit-bar {
    display:flex; align-items:center; justify-content:space-between;
    gap:1rem; flex-wrap:wrap;
    background:var(--card-bg); border-radius:12px; padding:1.5rem 2rem;
    border:1px solid var(--border); margin-top:1.5rem;
    position:sticky; bottom:1.5rem; box-shadow:0 -4px 20px rgba(35,61,61,0.08);
}
.form-submit-left { display:flex; align-items:center; gap:0.75rem; }

/* ─── Success & Verify pages ───────────────────────────────────── */
.status-page {
    min-height:calc(100vh - 70px);
    display:flex; align-items:center; justify-content:center;
    padding:3rem 2rem; background:var(--bg);
}
.status-card {
    background:var(--card-bg); border-radius:20px; padding:3.5rem;
    max-width:560px; width:100%; text-align:center;
    box-shadow:0 8px 40px rgba(35,61,61,0.1);
}
.status-icon { font-size:3rem; margin-bottom:1.5rem; }
.status-card h1 { font-size:1.75rem; font-weight:700; color:var(--primary); margin-bottom:1rem; }
.status-card p  { font-size:1rem; color:var(--text-sub); line-height:1.7; margin-bottom:1rem; }
.status-card p:last-of-type { margin-bottom:2rem; }

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .enrollment-header-inner { flex-wrap:wrap; padding:0.75rem 1rem; }
    .enrollment-header-actions { gap:0.5rem; }
    .form-page { padding:1.5rem 1rem 3rem; }
    .form-grid { grid-template-columns:1fr; }
    .form-group.full-width { grid-column:1; }
    .form-section { padding:1.5rem; }
    .welcome-card { padding:2rem 1.5rem; }
    .key-people-row { grid-template-columns:1fr auto; }
    .key-people-row .form-control:nth-child(2) { grid-column:1; }
    .funding-row { grid-template-columns:1fr 1fr; }
    .funding-row .form-control:nth-child(3) { grid-column:1/-2; }
    .news-row { grid-template-columns:1fr 1fr; }
    .news-row .form-control:nth-child(3) { grid-column:1/-2; }
    .form-submit-bar { position:static; }
}
@media (max-width: 480px) {
    .enrollment-header-inner {
        flex-wrap:wrap;
    }
    .enrollment-header-actions {
        width:100%; justify-content:stretch; gap:0.5rem;
    }
    .enrollment-header-actions .btn {
        flex:1; text-align:center; font-size:0.85rem; padding:0.6rem 0.75rem;
    }
    .enrollment-header-actions .autosave-status { width:100%; text-align:center; }
}