/* desktop · desk.ui — самодостаточные desktop UI-примитивы (namespace desk-, без legacy). */
/* ==========================================================================
   desk · ui — desktop переиспользуемые примитивы.
   icon · list · row · toggle · seg · form · field · btn · note.
   Классы СИСТЕМНЫЕ (desk-*) — не переименовывать. Это НЕ секционный код:
   сюда попадает только то, что нужно 2+ разделам и оверлеям.
   Идеальная схема ТЗ .ui-* здесь сведена к уже существующим desk-* (constraint 2).
   Грузится на КАЖДОЙ странице после shell/shell.css, перед sections/*.css.
   ========================================================================== */

/* --- иконка (единый inline-SVG set, без юникод-глифов) --- */
.desk-icon{display:block;flex:0 0 auto}

/* --- список / строка (sheets, настройки, меню) --- */
.desk-list{background:var(--surface);border-radius:var(--radius-m);overflow:hidden}
.desk-list--content{background:var(--surface-raised);border:1px solid var(--hairline)}
.desk-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 14px;text-align:left;color:var(--text);background:none;border:none;border-bottom:1px solid var(--hairline);cursor:pointer;font-family:var(--font-ui)}
.desk-row:last-child{border-bottom:none}
.desk-row__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.desk-row__title{font-size:var(--text-row);font-weight:600;line-height:var(--lh-row)}
.desk-row__sub{font-size:13px;color:var(--muted);line-height:var(--lh-row)}
.desk-row__chev{color:var(--muted-2)}

/* --- тумблер --- */
.desk-toggle{width:46px;height:28px;flex:0 0 auto;border:none;border-radius:14px;background:var(--surface-hover);position:relative;cursor:pointer;transition:background .16s ease-out}
.desk-toggle[aria-checked="true"]{background:var(--accent)}
.desk-toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--surface-raised);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .16s ease-out}
.desk-toggle[aria-checked="true"]::after{left:21px}

/* --- сегмент-контрол (мелкие переключатели) --- */
.desk-seg{display:flex;gap:4px}
.desk-seg__btn{min-height:32px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text);font-family:var(--font-ui);font-size:12px;font-weight:600;cursor:pointer}
.desk-seg__btn.is-active{background:var(--cta-bg);color:var(--cta-text);border-color:transparent}

/* --- форма заявки --- */
.desk-form{display:flex;flex-direction:column;gap:12px}
.desk-field{display:flex;flex-direction:column;gap:6px}
.desk-field__label{font-size:13px;color:var(--muted)}
.desk-field__input{min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface-raised);color:var(--text);font-family:var(--font-ui);font-size:16px;outline:none}
.desk-field__input:focus{border-color:var(--accent)}

/* --- кнопки --- */
.desk-btn{min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:var(--radius-pill);font-family:var(--font-ui);font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.desk-btn--primary{background:var(--cta-bg);color:var(--cta-text)}
.desk-btn--secondary{background:transparent;color:var(--text);border-color:var(--border)}
.desk-btn--block{width:100%}

/* --- сноска --- */
.desk-note{font-size:12px;color:var(--muted-2);line-height:1.5}

@media (prefers-reduced-motion:reduce){
  .desk-toggle,.desk-toggle::after{transition:none}
}

/* --- каркас внутренней страницы (общее для Section/Service/Article): крошки · заголовок · prose --- */
.desk-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--font-ui);font-size:13px;color:var(--muted)}
.desk-crumbs a{color:var(--link);text-decoration:none}
.desk-crumbs a:hover{color:var(--text)}
.desk-crumbs__sep{opacity:.6}
.desk-crumbs__here{color:var(--text)}
.desk-page{padding:16px var(--page-pad);display:flex;flex-direction:column;gap:16px}
.desk-page__title{margin:0;font-family:var(--font-display);font-size:26px;line-height:1.2;font-weight:600;color:var(--text)}
.desk-page__note{font-size:13px;line-height:1.5;color:var(--muted)}
.desk-prose{font-size:16px;line-height:1.6;color:var(--text-body);display:flex;flex-direction:column;gap:12px}
.desk-prose h2,.desk-prose h3{font-family:var(--font-display);font-weight:600;line-height:1.25;margin:6px 0 0;color:var(--text)}
.desk-prose h3{font-size:18px}
.desk-prose a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
.desk-prose strong{font-weight:700}
.desk-prose ul,.desk-prose ol{padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.desk-lead{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.desk-price{font-family:var(--font-mono);font-size:22px;font-weight:600;letter-spacing:-0.01em;color:var(--text)}
.desk-sechead{display:flex;flex-direction:column;gap:8px}
.desk-sechead__kicker{font-size:var(--text-kicker);letter-spacing:var(--track-kicker);text-transform:uppercase;color:var(--accent);font-weight:700}
.desk-sechead__title{margin:0;font-family:var(--font-display);font-size:var(--text-h2);line-height:var(--lh-tight);font-weight:600;color:var(--text)}
.desk-sechead__lead{margin:0;font-size:15px;line-height:var(--lh-body);color:var(--muted)}
.desk-eyebrow{font-size:12px;color:var(--muted)}
/* FAQ-аккордеон (общий, details/summary, шеврон — как FAQItem-эталон) */
.desk-faq{display:flex;flex-direction:column}
.desk-faq-item{border-bottom:1px solid var(--hairline)}
.desk-faq-item:last-child{border-bottom:none}
.desk-faq-item__q{width:100%;min-height:52px;display:flex;align-items:center;gap:10px;padding:12px 0;background:none;border:none;cursor:pointer;text-align:left;list-style:none;font-family:var(--font-ui)}
.desk-faq-item__q::-webkit-details-marker{display:none}
.desk-faq-item__q-text{flex:1;font-size:16px;font-weight:600;color:var(--text);line-height:1.35}
.desk-faq-item__chev{flex:0 0 auto;color:var(--muted);display:flex;transition:transform .16s ease-out}
.desk-faq-item[open] .desk-faq-item__chev{transform:rotate(180deg)}
.desk-faq-item__a{padding:0 0 16px;font-size:15px;line-height:var(--lh-body);color:var(--muted)}
@media (prefers-reduced-motion:reduce){.desk-faq-item__chev{transition:none}}


/* ---- desktop ui layer ---- */
/* ==========================================================================
   desktop · desk.ui — desktop UI-примитивы (page/grid/aside/prose, типографика).
   Перенесено из ui/ui.css (@media desktop-блок). BRIDGE: desk-* → desk-* при cleanup.
   ========================================================================== */
/* ===== DESKTOP layer (аддитивно, ТЗ §8/§9) ===== */
@media (min-width:1024px){
  .desk-page{padding:32px var(--gutter) 8px;gap:22px}
  .desk-page__title{font-size:clamp(34px,3.2vw,46px);line-height:1.12}
  .desk-sechead__title{font-size:30px}
  .desk-lead{font-size:19px;line-height:1.55}
  .desk-prose{font-size:17px;line-height:1.7}
  .desk-prose h2{font-size:26px} .desk-prose h3{font-size:21px}
  /* long-read + aside: prose не на всю ширину (ТЗ §1.8/§4.1) */
  .desk-page--doc{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start;max-width:var(--w-content)}
  .desk-page--doc .desk-page__title,.desk-page--doc>.desk-crumbs,.desk-page--doc>.desk-eyebrow{grid-column:1 / -1}
  .desk-page--doc .desk-prose,.desk-page--doc .desk-page__main{max-width:72ch}
  .desk-aside{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px;padding:20px;background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--radius-m);box-shadow:var(--shadow-card)}
  .desk-aside__price{font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--accent)}
  .desk-aside__label{font-size:12px;color:var(--muted)}
  /* сетка карточек раздела/hub */
  .desk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
}
@media (min-width:1440px){.desk-grid{grid-template-columns:repeat(3,1fr)}}
.social-float {
    position: fixed;
    /* --cp-cookie-h ставит скрипт подвала: пока висит плашка
       о cookie, кнопка стоит над ней, потом опускается в угол */
    bottom: calc(24px + var(--cp-cookie-h, 0px));
    right: 24px;
    z-index: 9998;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: bottom .3s ease;
}

/* Основная кнопка - ярче с градиентом */
.social-float-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #2AABEE;
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(27, 42, 74, 0.4);
    transition: all 0.3s ease;
    position: relative;
    z-index: 100;
    animation: pulse 2s infinite;
    opacity: 1;
    transform: scale(1);
}

.social-float-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 35px rgba(27, 42, 74, 0.8), inset 0 -3px 8px rgba(0, 0, 0, 0.2);
    animation: none;
    border-color: rgba(255, 255, 255, 0.4);
}

.social-float-btn:active {
    transform: scale(0.95);
}

/* Модальное окно */
.social-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 20px;
    box-sizing: border-box;
}

.social-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.social-modal {
    width: 480px;
    max-height: 90vh;
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-modal-overlay.active .social-modal {
    transform: scale(1);
}

/* Кнопка закрытия */
.social-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f0f0f0;
    color: #555;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
    z-index: 10;
    opacity: 0;
    transform: rotate(-90deg);
}

.social-modal-overlay.active .social-modal-close {
    opacity: 1;
    transform: rotate(0);
    transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
}

.social-modal-close:hover {
    background: #e0e0e0;
    transform: rotate(90deg);
    color: #333;
}

.social-modal-close:active {
    transform: rotate(90deg) scale(0.9);
}

/* Контент модального окна */
.social-modal-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.social-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #1b2a4a;
    text-align: center;
    margin: 0 0 30px 0;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    opacity: 0;
    transform: translateY(-20px);
}

.social-modal-overlay.active .social-modal-title {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}

/* Кнопки в модальном окне */
.social-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-modal-btn {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    opacity: 0;
    transform: translateY(20px);
}

.social-modal-overlay.active .social-modal-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Кнопка "Позвонить" - более яркая */
.social-modal-btn.phone {
    background: rgba(27, 42, 74, 0.12);
    border-color: rgba(27, 42, 74, 0.3);
    box-shadow: 0 2px 8px rgba(27, 42, 74, 0.1);
}

.social-modal-btn.phone:hover {
    background: rgba(27, 42, 74, 0.2);
    border-color: #1b2a4a;
    box-shadow: 0 4px 15px rgba(27, 42, 74, 0.3);
    transform: translateY(-2px);
}

.social-modal-btn.phone .social-modal-btn-icon {
    background: linear-gradient(135deg, #1b2a4a 0%, #2d4a7c 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(27, 42, 74, 0.4);
}

/* Telegram - более яркий */
.social-modal-btn.telegram {
    background: rgba(0, 136, 204, 0.15);
    border-color: rgba(0, 136, 204, 0.3);
    box-shadow: 0 2px 8px rgba(0, 136, 204, 0.1);
}

.social-modal-btn.telegram:hover {
    background: rgba(0, 136, 204, 0.25);
    border-color: #0088cc;
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
    transform: translateY(-2px);
}

.social-modal-btn.telegram .social-modal-btn-icon {
    background: linear-gradient(135deg, #0088cc 0%, #00a8e8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.5);
}

/* MAX - более яркий с цветным фоном */
.social-modal-btn.telegram1 {
    background: linear-gradient(135deg, rgba(76, 175, 255, 0.15) 0%, rgba(83, 238, 238, 0.15) 100%);
    border-color: rgba(76, 175, 255, 0.3);
    box-shadow: 0 2px 8px rgba(76, 175, 255, 0.1);
}

.social-modal-btn.telegram1:hover {
    background: linear-gradient(135deg, rgba(76, 175, 255, 0.25) 0%, rgba(83, 238, 238, 0.25) 100%);
    border-color: #4cafee;
    box-shadow: 0 4px 15px rgba(76, 175, 255, 0.4);
    transform: translateY(-2px);
}

.social-modal-btn.telegram1 .social-modal-btn-icon {
    background: linear-gradient(135deg, #4cafee 0%, #53eeee 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(76, 175, 255, 0.5);
}

/* WhatsApp - более яркий */
.social-modal-btn.whatsapp {
    background: rgba(37, 211, 102, 0.15);
    border-color: rgba(37, 211, 102, 0.3);
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.1);
}

.social-modal-btn.whatsapp:hover {
    background: rgba(37, 211, 102, 0.25);
    border-color: #25D366;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transform: translateY(-2px);
}

.social-modal-btn.whatsapp .social-modal-btn-icon {
    background: linear-gradient(135deg, #25D366 0%, #34e477 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.5);
}

.social-modal-btn-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.social-modal-btn:hover .social-modal-btn-icon {
    transform: scale(1.05);
}

.social-modal-btn-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.social-modal-btn-title {
    font-size: 17px;
    font-weight: 700;
    color: #1b2a4a;
    margin-bottom: 3px;
    transition: color 0.3s ease;
}

.social-modal-btn-subtitle {
    font-size: 13px;
    color: #555;
    opacity: 0.9;
    font-weight: 500;
}

/* Анимация пульсации - более яркая */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(27, 42, 74, 0.9), 0 4px 25px rgba(27, 42, 74, 0.6);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(27, 42, 74, 0), 0 4px 25px rgba(27, 42, 74, 0.6);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(27, 42, 74, 0), 0 4px 25px rgba(27, 42, 74, 0.6);
    }
}

.social-float-btn {
    animation: pulse 2s infinite 1.5s;
}

.social-float-btn:hover {
    animation: none !important;
}

/* Анимация появления кнопок (с учётом 4 кнопок) */
.social-modal-overlay.active .social-modal-btn.phone {
    transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
}

.social-modal-overlay.active .social-modal-btn.telegram {
    transition: opacity 0.4s ease 0.25s, transform 0.4s ease 0.25s;
}

.social-modal-overlay.active .social-modal-btn.whatsapp {
    transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s;
}

.social-modal-overlay.active .social-modal-btn.telegram1 {
    transition: opacity 0.4s ease 0.45s, transform 0.4s ease 0.45s;
}

body.modal-open {
    overflow: hidden;
}

/* Адаптивность для мобильных */
@media (max-width: 520px) {
    .social-modal {
        width: 100%;
        max-width: 400px;
    }
    
    .social-modal-content {
        padding: 30px 20px;
    }
    
    .social-modal-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .social-modal-btn {
        padding: 14px 16px;
    }
    
    .social-modal-btn-icon {
        width: 44px;
        height: 44px;
        margin-right: 12px;
    }
    
    .social-modal-btn-title {
        font-size: 15px;
    }
    
    .social-modal-btn-subtitle {
        font-size: 12px;
    }
}