/* Обновлённый дизайн, мобильная версия (до 768px). Палитра «Шалфей»: фон, блоки, текст. */
html[data-palette] {
    --d-muted: color-mix(in oklab, var(--d-text) 62%, var(--d-bg));
    --d-border: color-mix(in oklab, var(--d-text) 12%, transparent);
    --d-surface-2: color-mix(in oklab, var(--d-text) 6%, var(--d-bg));
}
html[data-palette="b"] { --d-bg: #ebeee8; --d-surface: #f7f8f4; --d-text: #2c3a33; }

html[data-palette] body { background: var(--d-bg); color: var(--d-text); }

/* ---------- Шапка: матовая полоса с логотипом и названием в одну строку ---------- */
html[data-palette] #mobile-header-logo {
    flex-direction: row;
    justify-content: center;
    gap: 0.6rem;
    padding: calc(env(safe-area-inset-top) + 0.6rem) 1rem 0.6rem;
    background: color-mix(in oklab, var(--d-bg) 78%, transparent);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--d-border);
}
html[data-palette] #mobile-header-logo .logo-background {
    width: 40px; height: 40px; padding: 1px;
    background: var(--d-bg);
}
html[data-palette] #mobile-header-logo .mobile-logo { width: 100%; height: 100%; }
html[data-palette] #mobile-header-logo .mobile-org-name {
    margin: 0; padding: 0; z-index: 0;
    background: none;
    color: var(--d-text);
    font-size: 0.95rem;
    line-height: 1.15;
    text-align: left;
    letter-spacing: 0.02em;
}

/* На главной шапка лежит на фото — делаем её тёмным стеклом */
html[data-palette] .mobile-home-page-body #mobile-header-logo {
    background: color-mix(in oklab, var(--d-text) 35%, transparent);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
html[data-palette] .mobile-home-page-body #mobile-header-logo .mobile-org-name { color: var(--d-surface); }

/* ---------- Кнопка «Меню» внизу ---------- */
html[data-palette] .footer-menu-button {
    width: auto; height: auto;
    padding: 0.8rem 1.6rem;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: var(--d-surface);
    background: color-mix(in oklab, var(--d-text) 88%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 999px;
    box-shadow: 0 10px 28px color-mix(in oklab, var(--d-text) 30%, transparent);
}
html[data-palette] #mobile-footer-menu { bottom: calc(env(safe-area-inset-bottom) + 1.25rem); }

/* ---------- Главная: стеклянное меню поверх фото ---------- */
html[data-palette] .mobile-home-page-body .menu-item {
    color: rgba(255, 255, 255, 0.75);
    background: color-mix(in oklab, var(--d-text) 22%, transparent);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    letter-spacing: 0.08em;
}
html[data-palette] .mobile-home-page-body .menu-item.active {
    color: var(--d-text);
    background: color-mix(in oklab, var(--d-surface) 88%, transparent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}
html[data-palette] .mobile-home-page-body .header-button {
    width: 9.5rem;
    padding: 0.85rem 0.5rem;
    border-radius: 999px;
    letter-spacing: 0.1em;
    background: var(--d-surface);
    color: var(--d-text);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}
html[data-palette] .mobile-home-page-body .header-button.button {
    background: var(--d-text);
    border-color: var(--d-text);
    color: var(--d-surface);
}
/* Пара кнопок: светлая + тёмная, чтобы читались на любом фото */
html[data-palette] .mobile-home-page-body .header-buttons .header-button:first-child {
    background: var(--d-surface);
    border-color: var(--d-surface);
    color: var(--d-text);
}
html[data-palette] .mobile-home-page-body .header-button:hover { background: var(--d-surface); color: var(--d-text); }
html[data-palette] .mobile-home-page-body .close-btn { color: var(--d-surface); }

/* ---------- Отступ контента под новую шапку ---------- */
html[data-palette] body:not(.mobile-home-page-body) .main-content { margin-top: 4.5rem; }

/* ---------- Карточки: как на десктопе, но компактнее ---------- */
html[data-palette] .card {
    background: var(--d-surface);
    border: 1px solid var(--d-border);
    border-radius: 22px;
    padding: 5px;
    box-shadow: none;
    backdrop-filter: none;
}
html[data-palette] .card:hover { transform: none; box-shadow: none; }
html[data-palette] .card:active { transform: scale(0.985); }
html[data-palette] .card__image-container { border-radius: 17px; padding-bottom: 58%; }
html[data-palette] .card__content { padding: 0.9rem 0.85rem 1rem; gap: 0.45rem; }
html[data-palette] .card__title { font-size: 1.15rem; line-height: 1.3; color: var(--d-text); margin: 0; }
html[data-palette] .card__date {
    order: -1; align-self: flex-start; margin: 0;
    padding: 0.3rem 0.6rem; border-radius: 999px;
    background: var(--d-surface-2); color: var(--d-muted);
    font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
}
html[data-palette] .card__description { font-size: 0.95rem; color: var(--d-muted); margin: 0; }
html[data-palette] .campaign-card .card__description:first-of-type:not(:last-child) {
    align-self: flex-start;
    padding: 0.35rem 0.7rem; border-radius: 999px;
    background: var(--d-surface-2); color: var(--d-text); font-weight: 600;
}

/* ---------- Внутренние страницы: меньше вложенных отступов, текст на всю ширину ---------- */
html[data-palette] .about-container { padding: 0; }
html[data-palette] .about-section.about-info,
html[data-palette] .about-section { padding-left: 1.1rem; padding-right: 1.1rem; }
html[data-palette] .about-description { font-size: 1rem; line-height: 1.6; color: var(--d-text); }
html[data-palette] .employee-card { border: 1px solid var(--d-border); border-radius: 22px; box-shadow: none; }

/* Поля форм в цветах палитры */
html[data-palette] input:not([type="radio"]):not([type="checkbox"]),
html[data-palette] textarea,
html[data-palette] select {
    background-color: var(--d-surface);
    border: 1px solid var(--d-border);
    border-radius: 14px;
    color: var(--d-text);
}
html[data-palette] input:focus,
html[data-palette] textarea:focus,
html[data-palette] select:focus { outline: none; border-color: var(--d-text); }

/* ---------- Главная: плитки меню поверх фото (mobile-home-static) ---------- */
html[data-palette] .menu-grid-item {
    background: color-mix(in oklab, var(--d-text) 30%, transparent);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    color: var(--d-surface);
    letter-spacing: 0.08em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
html[data-palette] .menu-grid-item:active { transform: scale(0.98); background: color-mix(in oklab, var(--d-surface) 85%, transparent); color: var(--d-text); }
html[data-palette] .menu-grid-item.disabled { opacity: 0.55; }
html[data-palette] .menu-grid-item .menu-icon-text { color: inherit; }

/* ---------- Страница сбора/проекта: колонка с оплатой на всю ширину ---------- */
html[data-palette] .campaign-wrapper { padding: 0; margin: 1rem auto; }
html[data-palette] .fundraising-main,
html[data-palette] .fundraising-sidebar { flex: none; width: 100%; min-width: 0; }
html[data-palette] #yookassa-payment-widget { max-width: none; }
@media (max-width: 360px) {
    html[data-palette] .yookassa-method-option { padding: 0 8px; }
    html[data-palette] .yookassa-method-icon { margin-right: 6px; }
    html[data-palette] .yookassa-method-name { font-size: 12px; }
}