/* ==========================================================================
   Public-facing theme for participant pages (app_no_auth layout).
   Design tokens derived from the live brand site https://promoit.club/ (Tilda).
   Loaded LAST, after soft-ui-dashboard.css and app.css, to override them.
   See project_docs/design_kit.md.
   ========================================================================== */

:root{
    --violet:#5131DA;      /* primary accent — CTA, links */
    --violet-deep:#3f27ac; /* hover */
    --coral:#FF8562;       /* secondary accent — highlights, chips */
    --coral-deep:#F95D51;
    --yellow:#FFE100;
    --green:#62C584;
    --ink:#0B0331;         /* deep indigo — dark surfaces, primary text */
    --muted:#6B6786;
    --surface:#ffffff;
    --app-bg:#F6F5FB;
    --success:#2e9e5b;
    --danger:#e11d48;
    --warning:#d97706;
    --border:#ECEAF4;
    --border-strong:#e2def0;
    /* aliases kept so existing markup that used --acc1/--acc2 still themes */
    --acc1:var(--violet);
    --acc2:var(--coral);
    --radius-lg:16px;
    --radius-md:12px;
    --radius-btn:14px;
    --shadow-soft:0 6px 28px rgba(11,3,49,.08);
    --shadow-hover:0 18px 44px rgba(11,3,49,.14);
    /* гарантируем sans-serif (Manrope) для всех, кто читает эту bootstrap-переменную —
       иначе при её отсутствии font-family становится невалидным и браузер даёт serif (Times) */
    --bs-font-sans-serif:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* формы и кнопки не наследуют шрифт по умолчанию — задаём явно, чтобы не было serif-фолбэка */
.btn, button, input, select, textarea,
.form-control, .form-select, .form-check-label, label, .badge, .mp-chip, .mp-navchip{
    font-family:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* soft-ui принудительно ставит .card .card-body в "Open Sans" — возвращаем Manrope.
   Переопределяем только сам .card-body: p/li наследуют Manrope, а заголовки
   (h1-6 / .mp-section-title) сохраняют Jost через свои собственные правила. */
.card .card-body{
    font-family:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- base ---------- */
html, body{
    background:var(--app-bg);
    color:var(--ink);
}
body{
    font-family:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,
.mp-hero h1,.mp-hero h2,.mp-section-title{
    font-family:"Jost", "Manrope", sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
    color:var(--ink);
}
a{ color:var(--violet); }
a:hover{ color:var(--violet-deep); }

#app.bg-dots-darker{
    background-color:var(--app-bg) !important;
    background-image:radial-gradient(rgba(81,49,218,.05) 1px, transparent 1px) !important;
    background-size:22px 22px !important;
    min-height:100vh;
}

main.py-4{
    padding-top:3rem !important;
    padding-bottom:4rem !important;
}
.container{ max-width:1140px; }

/* ---------- eyebrow / kicker + hero heading pattern ---------- */
.mp-kicker{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-size:.78rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--coral-deep);
    background:rgba(255,133,98,.14);
    padding:.35rem .85rem;
    border-radius:999px;
    margin-bottom:.9rem;
}
.mp-hero{
    text-align:center;
    max-width:760px;
    margin:0 auto 2.5rem;
}
.mp-hero h1,
.mp-hero h2{
    font-size:clamp(1.9rem, 1.2rem + 2.2vw, 2.7rem);
    font-weight:700;
    background:linear-gradient(115deg, var(--ink) 20%, var(--violet) 70%, var(--coral) 115%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:.75rem;
}
.mp-hero p{
    color:var(--muted);
    font-size:1.05rem;
}
.mp-section-title{
    font-size:1.5rem;
    font-weight:700;
    margin:2.5rem 0 1.25rem;
    position:relative;
    padding-left:.9rem;
}
.mp-section-title::before{
    content:"";
    position:absolute;left:0;top:.15em;bottom:.15em;
    width:4px;border-radius:4px;
    background:linear-gradient(var(--violet), var(--coral));
}

/* ---------- cards ---------- */
.card{
    border:1px solid var(--border) !important;
    border-radius:var(--radius-lg) !important;
    box-shadow:var(--shadow-soft) !important;
    background:var(--surface);
    transition:transform .18s ease, box-shadow .18s ease;
}
.card .card-body{ padding:2rem; }
.row .card.h-100{ transition:transform .18s ease, box-shadow .18s ease; }
.row .card.h-100:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-hover) !important;
}
.card-header{
    background:transparent;
    border-bottom:1px solid var(--border);
    font-weight:700;
    border-top-left-radius:var(--radius-lg) !important;
    border-top-right-radius:var(--radius-lg) !important;
}

/* ---------- buttons ---------- */
.btn{
    border-radius:var(--radius-btn);
    font-weight:600;
    padding:.7rem 1.5rem;
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary,
.btn.bg-gradient-primary{
    background:var(--violet) !important;
    border:none;
    color:#fff;
    box-shadow:0 8px 20px rgba(81,49,218,.28);
}
.btn-primary:hover,
.btn-primary:focus,
.btn.bg-gradient-primary:hover{
    background:var(--violet-deep) !important;
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 12px 26px rgba(81,49,218,.34);
}
.btn-primary:active{ transform:translateY(0); }
.btn-primary:disabled{ opacity:.5; transform:none; box-shadow:none; }
.btn-coral{
    background:var(--coral) !important;color:#2a0f0a !important;border:none;
    box-shadow:0 8px 20px rgba(249,93,81,.28);
}
.btn-coral:hover{ background:var(--coral-deep) !important;transform:translateY(-1px); }
.btn-outline-secondary,.btn-outline-primary{
    border:1px solid var(--border-strong);
    color:var(--ink);
    background:var(--surface);
}
.btn-outline-secondary:hover,.btn-outline-primary:hover{
    background:#faf9ff;
    border-color:var(--violet);
    color:var(--violet);
    transform:translateY(-1px);
}
.btn-sm{ padding:.45rem 1rem;font-size:.85rem; }

/* ---------- forms ---------- */
.form-control,
.form-select{
    border:1px solid var(--border-strong);
    border-radius:var(--radius-md);
    padding:.65rem .9rem;
    min-height:calc(1.6em + 1.3rem + 2px);
    transition:border-color .15s ease, box-shadow .15s ease;
    background:var(--surface);
}
textarea.form-control{ min-height:auto; }
.form-control:focus,
.form-select:focus{
    border-color:var(--violet);
    box-shadow:0 0 0 3px rgba(81,49,218,.15);
}
label,.form-label,.col-form-label{
    font-weight:600;color:var(--ink);margin-bottom:.4rem;
}
small,.form-text{ color:var(--muted); }
.form-check-input:checked{ background-color:var(--violet);border-color:var(--violet); }
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(81,49,218,.15); }
.invalid-feedback strong{ font-weight:600; }
.is-invalid{ border-color:var(--danger) !important; }

/* ---------- badges / chips ---------- */
.badge{
    border-radius:999px;font-weight:600;padding:.4em .85em;letter-spacing:.01em;
}
.badge.bg-warning{ background:rgba(255,133,98,.18) !important;color:var(--coral-deep) !important; }
.badge.bg-success{ background:rgba(98,197,132,.20) !important;color:#1f7a49 !important; }
.badge.bg-danger{ background:rgba(225,29,72,.14) !important;color:var(--danger) !important; }
.badge.bg-gradient-primary,
.badge.bg-gradient-info{ background:var(--violet) !important;color:#fff !important; }
.badge.bg-gradient-success{ background:rgba(98,197,132,.20) !important;color:#1f7a49 !important; }

/* ---------- alerts ---------- */
.alert{ border:none;border-radius:var(--radius-md);padding:1rem 1.25rem; }
.alert-success{ background:rgba(98,197,132,.16);color:#1f7a49; }
.alert-danger{ background:rgba(225,29,72,.1);color:#7a0b26; }
.alert-warning{ background:rgba(255,133,98,.16);color:#8a3a22; }
.alert-info{ background:rgba(81,49,218,.09);color:var(--violet-deep); }

/* ---------- tables (expert vote grid) ---------- */
.table{ --bs-table-bg:transparent; }
.table > :not(caption) > * > *{ border-color:var(--border);padding:.85rem .75rem; }
.table thead th{
    font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
    color:var(--muted);font-weight:700;border-bottom-width:1px;
}
.table-secondary{ --bs-table-bg:rgba(107,103,134,.08);opacity:.75; }

/* ---------- expert / project card grid helpers ---------- */
.mp-expert-photo{ width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px; }
.mp-chip-row{ display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.6rem; }
.mp-chip{
    display:inline-block;font-size:.72rem;font-weight:600;padding:.3em .75em;
    border-radius:999px;background:rgba(81,49,218,.1);color:var(--violet);
}
.mp-kpi-block{
    background:#faf9ff;border:1px solid var(--border);border-radius:var(--radius-md);
    padding:.85rem 1rem;margin-top:.75rem;
}
.mp-kpi-block strong{
    display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;
    color:var(--muted);margin-bottom:.25rem;
}

/* ---------- confirmation / centered pages ---------- */
.mp-confirm-icon{
    width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    margin:0 auto 1.25rem;font-size:1.7rem;
    background:rgba(81,49,218,.12);color:var(--violet);
}
.mp-confirm-icon.mp-icon-success{ background:rgba(98,197,132,.18);color:#1f7a49; }
.mp-confirm-icon.mp-icon-muted{ background:rgba(107,103,134,.12);color:var(--muted); }

/* ---------- misc ---------- */
.login_logo{ text-align:center; margin-bottom:1.5rem; }
.login_logo img{ max-width:230px; width:100%; height:auto; }
.mp-banner{
    border-radius:var(--radius-md);
    background:linear-gradient(135deg, rgba(81,49,218,.1), rgba(255,133,98,.08));
    border:1px solid rgba(81,49,218,.16);
    padding:1.1rem 1.4rem;
}

@media (max-width:576px){
    .card .card-body{ padding:1.4rem; }
    .container{ padding-left:1rem;padding-right:1rem; }
}

/* ---------- category nav + collapsible panels ---------- */
.mp-catnav{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    gap:.5rem;
    overflow-x:auto;
    padding:.6rem 0;
    margin-bottom:1rem;
    background:var(--app-bg);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--border);
}
.mp-catnav::-webkit-scrollbar{ height:6px; }
.mp-catnav::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:4px; }

.mp-navchip{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    white-space:nowrap;
    padding:.45rem .9rem;
    border-radius:var(--radius-btn);
    border:1px solid var(--border-strong);
    background:#fff;
    color:var(--ink);
    font-size:.88rem;
    text-decoration:none;
    transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.mp-navchip:hover{
    border-color:var(--violet);
    color:var(--violet);
    text-decoration:none;
    transform:translateY(-1px);
}
.mp-navchip.active{
    background:var(--violet);
    border-color:var(--violet);
    color:#fff;
}

.mp-cat-panel{
    scroll-margin-top:70px;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
    background:#fff;
    margin-top:1.25rem;
    overflow:hidden;
}
.mp-cat-head{
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1.25rem;
    text-decoration:none;
    color:var(--ink);
}
.mp-cat-head:hover{ color:var(--violet); }
.mp-cat-head .mp-section-title{ margin:0; }
.mp-cat-head .fa-chevron-down{
    transition:transform .2s ease;
    color:var(--violet);
}
.mp-cat-head.collapsed .fa-chevron-down{ transform:rotate(-90deg); }
.mp-cat-head[aria-expanded="true"] .fa-chevron-down{ transform:rotate(0deg); }
.mp-cat-body{ padding:0 1.25rem 1.25rem; }

/* левое выравнивание чекбоксов номинаций (эксперт) — 2 колонки, на мобиле 1 */
.mp-cat-checks{ display:grid; grid-template-columns:1fr 1fr; gap:.35rem 1.5rem; text-align:left; }
.mp-cat-checks .form-check{ margin:0; padding-left:1.6em; }
@media (max-width:576px){ .mp-cat-checks{ grid-template-columns:1fr; } }