/* ==========================================================================
   KONKURS ZAYAVKI — ИЗОЛИРОВАННЫЕ СТИЛИ (v3.0, общие для форм «Дети» и «Педагоги»)
   Все правила с префиксом .dk- для изоляции от темы WordPress.
   ========================================================================== */

/* ── 1. ПЕРЕМЕННЫЕ И СБРОС ─────────────────────────────────────────── */
/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  ОСНОВНОЙ ЦВЕТ САЙТА настраивается в админке:                ║
 * ║  Настройки → Конкурс: заявки → Внешний вид                   ║
 * ║  (переопределяет --dk-primary, --dk-primary-light,           ║
 * ║  --dk-primary-dark, --dk-primary-bg через inline-стиль;      ║
 * ║  --dk-shadow-focus вычисляется из основного цвета).          ║
 * ║  Значения ниже — вид по умолчанию.                           ║
 * ║                                                              ║
 * ║  Для генерации оттенков используйте:                         ║
 * ║  https://uicolors.app/create или HSL калькулятор             ║
 * ╚══════════════════════════════════════════════════════════════╝
 */
.dk-container {
    --dk-primary:       #1E73BE;           /* ← Основной цвет кнопок и акцентов     */
    --dk-primary-light: #4A9DE6;           /* ← Светлее на ~15% (hover-состояния)    */
    --dk-primary-dark:  #15548C;           /* ← Темнее на ~20% (градиент, active)    */
    --dk-primary-bg:    #E8F2F9;           /* ← Очень светлый фон (бейджи, подсветка)*/
    --dk-danger:        #ef4444;
    --dk-danger-bg:     #fef2f2;
    --dk-success:       #10b981;
    --dk-success-bg:    #ecfdf5;
    --dk-warning:       #f59e0b;
    --dk-warning-bg:    #fffbeb;
    --dk-bg-page:       #f8fafc;
    --dk-bg-input:      #f9fafb;
    --dk-bg-card:       #ffffff;
    --dk-border:        #e2e8f0;
    --dk-border-hover:  #94a3b8;
    --dk-text-main:     #0f172a;
    --dk-text-secondary:#475569;
    --dk-text-muted:    #94a3b8;
    --dk-radius:        12px;
    --dk-radius-sm:     8px;
    --dk-radius-lg:     20px;
    --dk-shadow-xs:     0 1px 2px rgba(0,0,0,0.05);
    --dk-shadow-sm:     0 2px 8px rgba(0,0,0,0.06);
    --dk-shadow-md:     0 4px 16px rgba(0,0,0,0.08);
    --dk-shadow-lg:     0 8px 40px -8px rgba(0,0,0,0.12);
    --dk-shadow-focus:  0 0 0 3px rgba(30, 115, 190, 0.25); /* ← Свечение фокуса (rgb основного цвета + прозрачность) */
    --dk-transition:    0.2s cubic-bezier(0.4,0,0.2,1);

    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 48px);
    background: var(--dk-bg-card);
    border-radius: var(--dk-radius-lg);
    box-shadow: var(--dk-shadow-lg);
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    font-size: 17.6px;
    color: var(--dk-text-main);
    box-sizing: border-box !important;
    line-height: 1.65;
}

/* Жёсткий сброс — !important перебивает стили ЛЮБОЙ WP-темы */
.dk-container *,
.dk-container *::before,
.dk-container *::after {
    box-sizing: border-box !important;
    text-transform: none;
}

/* Защита от наследования font-size темы */
.dk-container input,
.dk-container textarea,
.dk-container button,
.dk-container select,
.dk-container label,
.dk-container span,
.dk-container p,
.dk-container a {
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

/* ── ВИДЖЕТЫ ПОДПИСКИ (VK, MAX) ────────────────────────────────────── */
/* Выводятся над формой, вне .dk-container — поэтому !important:
   правила темы не должны перебивать оформление кнопки MAX. */
.dk-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}
.dk-vk-widget { text-align: center; }

/* Кнопка «Подписаться на МАКС» — узкая, по размеру VK-виджета */
.dk-max-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 18px !important;
    background: linear-gradient(90deg, #00A3FF 0%, #9F00FF 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(159, 0, 255, 0.35) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important;
}
.dk-max-btn:hover,
.dk-max-btn:focus {
    transform: scale(1.04) !important;
    box-shadow: 0 6px 22px rgba(159, 0, 255, 0.55) !important;
    filter: brightness(1.08) !important;
    text-decoration: none !important;
}
.dk-max-btn__icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: block !important;
    filter: brightness(0) invert(1) !important; /* иконка в белый */
}
.dk-max-btn__text {
    color: #ffffff !important;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
}

/* ── 2. УТИЛИТЫ ────────────────────────────────────────────────────── */
.dk-hidden        { display: none !important; }
.dk-block         { display: block !important; }
.dk-mb-1          { margin-bottom: .5em !important; }
.dk-mb-3          { margin-bottom: 1em !important; }
.dk-mb-4          { margin-bottom: 1.5em !important; }
.dk-pb-3          { padding-bottom: 1em !important; }
.dk-text-center   { text-align: center !important; }
.dk-border-bottom { border-bottom: 1px solid var(--dk-border) !important; }

/* Fade-in animation */
@keyframes dk-fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dk-animate-in {
    animation: dk-fadeInUp 0.4s ease-out both;
}

/* ── 3. ТИПОГРАФИКА ────────────────────────────────────────────────── */
.dk-container h1 {
    font-size: clamp(1.7em, 4.5vw, 2.3em);
    font-weight: 800;
    color: var(--dk-text-main);
    margin-bottom: 1.5em;
    text-align: center;
    border: none;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.dk-section-heading {
    font-size: 1.25em;
    font-weight: 700;
    color: var(--dk-primary);
    margin-top: 2em;
    margin-bottom: 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--dk-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.dk-section-heading::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.3em;
    background: linear-gradient(180deg, var(--dk-primary), var(--dk-primary-light));
    border-radius: 2px;
    flex-shrink: 0;
}

.dk-section-heading .dk-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    background: var(--dk-primary-bg);
    border-radius: 8px;
    color: var(--dk-primary);
    font-size: 1em;
    flex-shrink: 0;
}

.dk-container h4 {
    font-size: 1em;
    font-weight: 600;
    color: var(--dk-text-secondary);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 1em;
}

/* ── 4. ПРОГРЕСС-СТЕППЕР (Шаги формы) ─────────────────────────────── */
.dk-stepper {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 2em;
    padding: 0;
    list-style: none;
    counter-reset: dk-step;
}

.dk-stepper-item {
    display: flex;
    align-items: center;
    gap: 8px;
    counter-increment: dk-step;
    font-size: .92em;
    font-weight: 500;
    color: var(--dk-text-muted);
    transition: color var(--dk-transition);
}

.dk-stepper-item::before {
    content: counter(dk-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--dk-bg-input);
    border: 2px solid var(--dk-border);
    font-weight: 700;
    font-size: .85em;
    color: var(--dk-text-muted);
    transition: all var(--dk-transition);
    flex-shrink: 0;
}

.dk-stepper-item.active {
    color: var(--dk-primary);
}
.dk-stepper-item.active::before {
    background: var(--dk-primary);
    border-color: var(--dk-primary);
    color: #fff;
}

/* Visited = пройден (подсвечен), но НЕ завершён — номер виден, без галочки */
.dk-stepper-item.visited {
    color: var(--dk-primary);
}
.dk-stepper-item.visited::before {
    background: var(--dk-primary-bg);
    border-color: var(--dk-primary);
    color: var(--dk-primary);
}

/* Completed = галочка (только при успешной отправке) */
.dk-stepper-item.completed::before {
    background: var(--dk-success);
    border-color: var(--dk-success);
    color: #fff;
    content: '✓';
}

.dk-stepper-connector {
    width: 32px;
    height: 2px;
    background: var(--dk-border);
    margin: 0 6px;
    flex-shrink: 0;
    align-self: center;
    border-radius: 1px;
    transition: background var(--dk-transition);
}
.dk-stepper-connector.active {
    background: var(--dk-primary);
}

@media (max-width: 600px) {
    .dk-stepper-item span { display: none; }
    .dk-stepper-connector { width: 20px; }
}

/* ── 5. ТАБЫ (ВКЛАДКИ) ─────────────────────────────────────────────── */
.dk-tabs {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 4px;
    margin: 0 0 2em 0;
    background: var(--dk-bg-input);
    border-radius: var(--dk-radius);
    gap: 4px;
}

.dk-tab-item { list-style: none; margin: 0; flex: 1; }

.dk-tab-btn {
    display: block;
    width: 100%;
    padding: 10px 24px;
    background: transparent;
    color: var(--dk-text-secondary);
    font-weight: 500;
    font-size: 1em;
    border: none;
    border-radius: var(--dk-radius-sm);
    cursor: pointer;
    transition: all var(--dk-transition);
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
}
.dk-tab-btn:hover { color: var(--dk-primary); background: color-mix(in srgb, var(--dk-primary) 7%, transparent); }
.dk-tab-btn.active {
    color: var(--dk-primary);
    font-weight: 600;
    background: var(--dk-bg-card);
    box-shadow: var(--dk-shadow-sm);
}

.dk-tab-pane { display: none; }
.dk-tab-pane.active {
    display: block;
    animation: dk-fadeInUp .35s ease-out;
}

/* ── 6. ПОЛЯ ВВОДА (FORM LAYOUT) ───────────────────────────────────── */
.dk-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 1.15em;
    width: 100% !important;
    max-width: 100% !important;
}

.dk-container form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
}

.dk-col-label {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: .35em;
    font-weight: 500;
    font-size: 1.05em;
    color: var(--dk-text-secondary);
    padding-top: 0;
    transition: color var(--dk-transition);
}

.dk-col-input { flex: 0 0 100%; max-width: 100% !important; min-width: 0; overflow: hidden; }

.dk-col-label.is-required::after {
    content: ' *';
    color: var(--dk-danger);
    font-weight: 700;
}

@media (min-width: 768px) {
    .dk-col-label {
        flex: 0 0 32%;
        max-width: 32%;
        margin-bottom: 0;
        padding-right: 16px;
        padding-top: 13px;
    }
    .dk-col-input { flex: 0 0 68%; max-width: 68% !important; min-width: 0; overflow: hidden; }
    .dk-offset-25 { margin-left: 32%; }
}

/* ── 7. СТИЛИ ПОЛЕЙ ────────────────────────────────────────────────── */
.dk-container input[type="text"],
.dk-container input[type="email"],
.dk-container input[type="number"],
.dk-container textarea,
.dk-form-control {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    padding: 13px 16px;
    font-size: 1.1em;
    line-height: 1.5;
    color: var(--dk-text-main);
    background-color: var(--dk-bg-input);
    border: 1.5px solid var(--dk-border);
    border-radius: var(--dk-radius);
    box-shadow: none;
    transition: border-color var(--dk-transition), box-shadow var(--dk-transition), background-color var(--dk-transition);
    outline: none;
    font-family: inherit;
}

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

/* select с классом .dk-form-control: свой шеврон вместо нативной стрелки,
   которую браузер рисует поверх padding по-разному */
.dk-container select.dk-form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px;
    padding-right: 44px;
    cursor: pointer;
}

.dk-container input[type="text"]:hover,
.dk-container input[type="email"]:hover,
.dk-container input[type="number"]:hover,
.dk-container textarea:hover,
.dk-form-control:hover {
    border-color: var(--dk-border-hover);
}

.dk-container input:focus,
.dk-container textarea:focus,
.dk-form-control:focus {
    background-color: #fff;
    border-color: var(--dk-primary);
    box-shadow: var(--dk-shadow-focus);
}

.dk-container input:disabled,
.dk-container textarea:disabled {
    background-color: #f1f5f9;
    color: var(--dk-text-muted);
    cursor: not-allowed;
    border-color: var(--dk-border);
}

/* Ошибка валидации */
.dk-was-validated .dk-form-control:invalid,
.dk-form-control.is-invalid {
    border-color: var(--dk-danger);
    background-color: var(--dk-danger-bg);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.dk-invalid-feedback {
    display: none;
    color: var(--dk-danger);
    font-size: .82em;
    margin-top: 5px;
}
.dk-was-validated .dk-form-control:invalid ~ .dk-invalid-feedback,
.dk-form-control.is-invalid ~ .dk-invalid-feedback {
    display: block;
}

/* ── 8. ЧЕКБОКСЫ — НАДЁЖНАЯ РЕАЛИЗАЦИЯ через ::before на label ──── */
.dk-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 8px 12px;
    border-radius: var(--dk-radius-sm);
    transition: background var(--dk-transition);
}
.dk-checkbox-wrapper:hover {
    background: var(--dk-bg-input);
}

/* Нативный input скрыт, но доступен для клавиатуры и screen readers */
.dk-checkbox-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Визуальный чекбокс рисуется через ::before на label */
.dk-checkbox-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1.02em;
    color: var(--dk-text-main);
    line-height: 1.4;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.dk-checkbox-label::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 1.4em;
    height: 1.4em; /* Обе стороны в em: rem зависел от корневого шрифта темы и делал бокс прямоугольным */
    margin-top: 1px;
    background-color: #fff;
    border: 2px solid var(--dk-border);
    border-radius: 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Checked — галочка SVG */
.dk-checkbox-input:checked + .dk-checkbox-label::before {
    background-color: var(--dk-primary);
    border-color: var(--dk-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

/* Focus — обводка для клавиатурной навигации */
.dk-checkbox-input:focus + .dk-checkbox-label::before {
    box-shadow: var(--dk-shadow-focus);
}

.dk-checkbox-label u {
    text-decoration: none;
    border-bottom: 1px dashed var(--dk-text-muted);
}

/* ── 9. ТУЛТИПЫ ───────────────────────────────────────────────────── */
/* У .dk-col-input стоит overflow:hidden (защита от распирания темы) —
   он обрезал тултип, всплывающий над строкой. Строкам с тултипом
   шаблон ставит dk-has-tooltip: контент там короткий, распирать нечему. */
.dk-col-input.dk-has-tooltip {
    overflow: visible;
}

.dk-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    cursor: help;
    vertical-align: middle;
}

.dk-tooltip-content {
    visibility: hidden;
    width: 250px;
    background-color: var(--dk-text-main);
    color: #fff;
    text-align: left;
    border-radius: var(--dk-radius-sm);
    padding: 10px 14px;
    position: absolute;
    z-index: 200;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    transition: opacity var(--dk-transition), transform var(--dk-transition);
    font-size: .9em;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    pointer-events: none;
}

.dk-tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: var(--dk-text-main);
}

.dk-tooltip-wrap:hover .dk-tooltip-content,
.dk-tooltip-wrap:focus .dk-tooltip-content {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── 10. КНОПКИ ───────────────────────────────────────────────────── */
.dk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    padding: 11px 22px;
    font-size: 1em;
    border-radius: var(--dk-radius);
    transition: all var(--dk-transition);
    background: transparent;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

/* Ripple effect */
.dk-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10%);
    transform: scale(10);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}
.dk-btn:active::after {
    transform: scale(0);
    opacity: 1;
    transition: 0s;
}

.dk-btn-primary {
    color: var(--dk-primary);
    background-color: var(--dk-primary-bg);
    border-color: transparent;
}
.dk-btn-primary:hover {
    background-color: var(--dk-primary);
    color: #fff;
}

.dk-btn-danger {
    color: var(--dk-danger);
    background-color: var(--dk-danger-bg);
    border-color: transparent;
}
.dk-btn-danger:hover {
    background-color: var(--dk-danger);
    color: #fff;
}

/* Главная кнопка отправки */
.dk-btn-submit {
    width: 100%;
    padding: 16px;
    font-size: 1.15em;
    font-weight: 700;
    letter-spacing: .5px;
    border-radius: var(--dk-radius);
    background: linear-gradient(135deg, var(--dk-primary) 0%, var(--dk-primary-dark) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--dk-primary) 40%, transparent);
    transition: transform var(--dk-transition), box-shadow var(--dk-transition);
    position: relative;
    overflow: hidden;
}
.dk-btn-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -4px color-mix(in srgb, var(--dk-primary) 50%, transparent);
}
.dk-btn-submit:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--dk-primary) 30%, transparent);
}
.dk-btn-submit:disabled {
    background: var(--dk-text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

.dk-btn-lg {
    padding: 12px 32px;
    font-size: 1em;
}

/* ── 11. ЗОНА ЗАГРУЗКИ ФАЙЛОВ ──────────────────────────────────────── */
.dk-drop-zone {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    border: 2px dashed var(--dk-border);
    border-radius: var(--dk-radius-lg);
    background-color: var(--dk-bg-input);
    color: var(--dk-text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
}

.dk-drop-zone:hover {
    border-color: var(--dk-primary-light);
    background-color: var(--dk-primary-bg);
    color: var(--dk-primary);
}

.dk-drop-zone.drag-over {
    border-color: var(--dk-primary);
    background-color: var(--dk-primary-bg);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dk-primary) 15%, transparent);
    transform: scale(1.01);
}

.dk-drop-zone.dk-invalid {
    border-color: var(--dk-danger);
    background-color: var(--dk-danger-bg);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

.dk-drop-zone-icon {
    font-size: 2.5em;
    color: var(--dk-primary-light);
    margin-bottom: 8px;
    transition: transform 0.3s ease;
}
.dk-drop-zone:hover .dk-drop-zone-icon {
    transform: translateY(-4px) scale(1.1);
}

.dk-drop-zone-text {
    font-size: 1em;
    margin-bottom: 4px;
}
.dk-drop-zone-hint {
    font-size: .88em;
    color: var(--dk-text-muted);
}

.dk-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); border: 0;
}

/* ── 12. СПИСОК ФАЙЛОВ ─────────────────────────────────────────────── */
#file-list {
    width: 100%;
    max-width: 100% !important;
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.dk-file-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto auto; /* icon | body | status | remove */
    align-items: center;
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    background: var(--dk-bg-card);
    border: 1px solid var(--dk-border);
    border-radius: var(--dk-radius);
    padding: 10px 14px;
    box-shadow: var(--dk-shadow-xs);
    transition: box-shadow var(--dk-transition);
    animation: dk-fadeInUp 0.3s ease-out;
}
.dk-file-item:hover { box-shadow: var(--dk-shadow-sm); }

.dk-file-icon {
    width: 32px; height: 32px;
    border-radius: var(--dk-radius-sm);
    background: var(--dk-primary-bg);
    color: var(--dk-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: .9em;
    flex-shrink: 0;
}

.dk-file-body {
    min-width: 0; /* Grid minmax(0, 1fr) + min-width:0 = полное ограничение */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dk-file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: .95em;
    font-weight: 600;
    color: var(--dk-text-main);
    line-height: 1.2;
}

.dk-progress-track {
    width: 100%;
    height: 6px;
    background-color: #e9ecef;
    border-radius: 99px;
    overflow: hidden;
}

.dk-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa); /* Синий — идёт загрузка */
    border-radius: 99px;
    transition: width .35s ease;
}

.dk-progress-bar.dk-bg-success {
    background: linear-gradient(90deg, #22c55e, #4ade80); /* Зелёный — успешно */
}
.dk-progress-bar.dk-bg-danger {
    background: linear-gradient(90deg, #ef4444, #f87171); /* Красный — ошибка */
}

.dk-file-status {
    flex: 0 0 auto;
    font-size: .85em;
    font-weight: 600;
    white-space: nowrap;
}

.dk-file-remove {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border: none; background: transparent;
    color: var(--dk-text-muted);
    cursor: pointer;
    font-size: .8em;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: background var(--dk-transition), color var(--dk-transition);
    padding: 0;
    line-height: 1;
}
.dk-file-remove:hover {
    background: #fee2e2;
    color: var(--dk-danger);
}

/* ── 13. УВЕДОМЛЕНИЯ И СПИННЕРЫ ────────────────────────────────────── */
.dk-submit-wrapper {
    text-align: center;
    padding: 20px 0;
    max-width: 500px;
    margin: 0 auto;
}

.dk-alert-box {
    display: none;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: var(--dk-radius);
    font-size: 1em;
    font-weight: 500;
    animation: dk-slideDown .35s ease;
}

.dk-alert-red    { background: var(--dk-danger-bg);  color: #991b1b; border: 1px solid #fecaca; border-left: 4px solid var(--dk-danger); }
.dk-alert-yellow { background: var(--dk-warning-bg); color: #92400e; border: 1px solid #fef3c7; border-left: 4px solid var(--dk-warning); }
.dk-alert-green  { background: var(--dk-success-bg); color: #065f46; border: 1px solid #d1fae5; border-left: 4px solid var(--dk-success); }
.dk-alert-box i  { font-size: 1.2em; flex-shrink: 0; }

@keyframes dk-slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dk-spinner {
    display: inline-block;
    width: 1em; height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dk-spin .7s linear infinite;
}
.dk-spinner-small {
    flex-shrink: 0;
    width: 1.1em; height: 1.1em;
    border: 2.5px solid var(--dk-warning);
    border-top-color: transparent;
    border-radius: 50%;
    animation: dk-spin .9s linear infinite;
}
@keyframes dk-spin { 100% { transform: rotate(360deg); } }

/* Skeleton loader для iframe */
.dk-skeleton-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 20px;
    color: var(--dk-text-muted);
}
.dk-skeleton-bar {
    height: 12px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: dk-shimmer 1.5s infinite;
}
@keyframes dk-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── 14. ЭКРАН УСПЕХА ──────────────────────────────────────────────── */
#success {
    text-align: center;
    padding: 40px 20px;
}
#success .dk-success-icon {
    font-size: 4.5em;
    color: var(--dk-success);
    animation: dk-successPop .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dk-successPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* CSS-only confetti */
.dk-confetti {
    position: relative;
    display: inline-block;
}
.dk-confetti::before,
.dk-confetti::after {
    content: '🎉';
    position: absolute;
    top: 0;
    font-size: 2em;
    animation: dk-confettiFly 1s ease-out forwards;
    opacity: 0;
}
.dk-confetti::before { left: -40px; animation-delay: .2s; }
.dk-confetti::after  { right: -40px; animation-delay: .4s; }
@keyframes dk-confettiFly {
    0%   { transform: translateY(0) scale(0); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateY(-30px) scale(1); opacity: 0; }
}

/* ── 15. CONSENT-БЛОК ──────────────────────────────────────────────── */
.dk-consent {
    font-size: .7em;
    color: var(--dk-text-muted);
    text-align: center;
    margin-top: 8px;
}
.dk-consent a {
    color: var(--dk-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dk-consent a:hover {
    color: var(--dk-primary-dark);
}

/* ── 16. Анимация для динамических секций ───────────────────────────── */
.dk-dynamic-row {
    animation: dk-fadeInUp 0.3s ease-out;
}

/* ── 16а. ФОРМАТ ЗАЯВКИ: коллективная / пакет (только форма «Дети») ── */
#formatChooser {
    margin: 0 0 1.5em;
    padding: 14px 16px;
    background: var(--dk-primary-bg);
    border: 1.5px solid color-mix(in srgb, var(--dk-primary) 35%, transparent);
    border-radius: var(--dk-radius);
    animation: dk-fadeInUp 0.3s ease-out;
}

.dk-format-title {
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--dk-primary-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.dk-format-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dk-format-card {
    flex: 1 1 240px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    background: var(--dk-bg-card);
    border: 2px solid var(--dk-border);
    border-radius: var(--dk-radius);
    cursor: pointer;
    transition: border-color var(--dk-transition), box-shadow var(--dk-transition);
    margin: 0;
}
.dk-format-card:hover { border-color: var(--dk-border-hover); }
.dk-format-card.is-selected {
    border-color: var(--dk-primary);
    box-shadow: var(--dk-shadow-focus);
}
.dk-format-card input[type="radio"] {
    margin-top: 4px;
    accent-color: var(--dk-primary);
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
}
.dk-format-card-body b { display: block; margin-bottom: 2px; }
.dk-format-card-body small {
    display: block;
    color: var(--dk-text-secondary);
    line-height: 1.35;
    font-size: .85em;
}

/* Работа и файлы отдельного участника в пакетном режиме */
.dk-batch-extras .dk-drop-zone {
    min-height: 120px;
    padding: 18px 16px;
}

/* Пояснение под кнопкой «Добавить ещё одну работу» */
.dk-work-adder-hint {
    font-size: .85em;
    color: var(--dk-text-muted);
    margin-top: 6px;
}

/* ── 17. АДАПТИВНОСТЬ (MOBILE) ─────────────────────────────────────── */
@media (max-width: 600px) {
    .dk-container {
        border-radius: var(--dk-radius);
        padding: 20px 16px;
    }
    .dk-tab-btn {
        font-size: .82em;
        padding: 8px 12px;
    }
    .dk-file-item { padding: 8px 10px; gap: 8px; }
    .dk-file-icon { width: 28px; height: 28px; font-size: .85em; }
    .dk-btn-submit { padding: 14px; font-size: .95em; }
}

.dk-form-row:last-of-type { margin-bottom: 0; }