/* otc-glass.css — DEV3-OVERLAYS-GLASS-V1
   Единое СВЕТЛОЕ премиум-стекло на ВСЕ всплывающие окна + шрифт Onest.
   Грузится ПОСЛЕДНИМ в H.astro → переопределяет хром контейнеров (включая inline).
   Эталоны: content/overlays_glass_mock.html, content/ai_fonts_compare.html. */

:root{
  /* Сайт ТЁМНЫЙ (#0a0a0a) — полупрозрачный белый над ним сереет (blur чёрного = чёрный).
     Поэтому почти ПЛОТНЫЙ белый → читается как чистое белое матовое стекло Apple, blur даёт frosted-край. */
  /* DEV1-PANELS-UNIFIED-GLASS-V1: единое матовое стекло как у гейта «Войдите» (.otc-gate) — на всех панелях
     (корзина/избранное/AI/язык-валюта-шторка/модалки), фон один рецепт. */
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 78%,rgba(255,255,255,.4) 100%),rgba(255,255,255,.74);
  --glass-blur:blur(30px) saturate(170%);
  --glass-border:1px solid rgba(255,255,255,.7);
  --glass-radius:24px;
  --glass-shadow:0 30px 80px rgba(20,20,30,.45),0 0 0 1px rgba(255,122,0,.12),inset 0 1px 0 rgba(255,255,255,.9);
  --glass-ease:cubic-bezier(.32,.72,0,1);
  --org:#ff7a00;--ink:#1a1a1f;--muted:#6b6b73;
  --glass-inner:#f5f5f8;
}

/* ── ШРИФТ ONEST на весь сайт (Windows/Android тоже), CN → Noto Sans SC ── */
body, body *:not(svg):not(svg *):not(path){
  font-family:'Onest',-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important;
}
html.lang-cn body, html.lang-cn body *:not(svg):not(svg *):not(path){
  font-family:'Noto Sans SC','Onest',-apple-system,'Segoe UI',Roboto,sans-serif !important;
}

/* ── Общий стеклянный слой (тонкая оранжевая полоска сверху) ── */
.dh-drawer::before,
.dh-modal__box::before,
.dh-prof-dd::before,
.otc-sheet::before,
.dh-mega::before{
  content:"";position:absolute;top:0;left:18px;right:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--org),transparent);opacity:.95;z-index:2;pointer-events:none;
}

/* ── Backdrop: затемнение + blur ── */
.dh-backdrop{background:rgba(20,22,30,.5) !important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}  /* DEV1-PANELS-UNIFIED-GLASS-V1: как gate-bd (.otc-gate-bd) — стекло читается на затемнённой странице */

/* ── DRAWER (корзина / избранное / AI / партнёр) — правое стекло ── */
.dh-drawer{
  background:var(--glass-bg) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-left:var(--glass-border);
  border-top-left-radius:var(--glass-radius);border-bottom-left-radius:var(--glass-radius);
  color:var(--ink);position:fixed;
}
/* DEV1-DRAWER-SHADOW-LEAK-FIX-V1: тень ТОЛЬКО у открытого ящика. У закрытого (стоит за правым краем экрана) тень 80px просачивалась обратно на видимые ~70px → серый градиент во всю высоту справа. Открытый ящик на экране — тень корректна. Переменную --glass-shadow не трогаем (её юзают модалки/проф-дд). */
.dh-drawer[data-open]{box-shadow:var(--glass-shadow) !important}
.dh-drawer__hdr{border-bottom:1px solid rgba(0,0,0,.06) !important;padding:22px 24px 16px}
.dh-drawer__title{color:var(--ink) !important;letter-spacing:-.3px}
.dh-drawer__sub{color:var(--muted) !important}
.dh-drawer__footer{border-top:1px solid rgba(0,0,0,.06) !important;background:rgba(255,255,255,.35)}
.dh-drawer__close,.dh-modal__close{
  background:rgba(0,0,0,.05) !important;border:1px solid rgba(0,0,0,.06) !important;color:var(--muted) !important;
  width:34px;height:34px;border-radius:50%;transition:background .15s
}
.dh-drawer__close:hover,.dh-modal__close:hover{background:rgba(0,0,0,.1) !important}

/* ── MODAL (фото / авторизация) — центральная стеклянная карточка ── */
.dh-modal__box{
  background:var(--glass-bg) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:var(--glass-border);border-radius:26px !important;
  box-shadow:var(--glass-shadow) !important;
  color:var(--ink);position:relative;overflow:hidden;padding:24px 24px 26px
}
.dh-modal__title{color:var(--ink) !important;display:flex;align-items:center;gap:8px}
.dh-modal__title svg{color:var(--org)}
.dh-modal__drop{
  border:1.5px dashed rgba(0,0,0,.18) !important;background:var(--glass-inner) !important;
  border-radius:18px;padding:30px 20px
}
.dh-modal__drop:hover,.dh-modal__drop.is-drag-over,.dh-modal__drop.drag-over{
  border-color:var(--org) !important;background:#fff7ed !important
}
.dh-modal__drop-icon{color:#a6a6ad}
.dh-modal__drop-text{color:var(--muted) !important;line-height:1.55}
.dh-modal__drop-btn{
  background:var(--org) !important;border-radius:12px;box-shadow:0 10px 22px rgba(255,122,0,.30);
  padding:11px 20px;font-weight:600
}
.dh-modal__steps{margin-top:18px;color:var(--muted)}
.dh-modal__step-num{background:rgba(255,122,0,.16) !important;color:#c66a00 !important}

/* ── PROFILE dropdown — DEV1-PROFILE-DROPDOWN-PREMIUM-V1: дорогое матовое стекло, своё (НЕ общие --glass-*,
   чтобы не трогать гейт/дроверы). Фон полупрозрачнее (блюр читается) + лёгкий верх-блик, тонкий бренд-бордюр,
   мягкая тень, радиус 18. ── */
/* DEV1-PROFILE-DROPDOWN-PREMIUM-V1: стекло 1:1 как у гейта «Войдите» (.otc-gate) — единый фирменный фон;
   оранжевая обводка 1.5px (просьба Бека), мягкая тень, радиус 18. */
.dh-prof-dd{
  background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 78%,rgba(255,255,255,.4) 100%),rgba(255,255,255,.74) !important;
  -webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);
  border:1.5px solid rgba(232,123,0,.5) !important;border-radius:18px !important;
  box-shadow:0 16px 44px rgba(20,20,30,.18) !important;color:var(--ink);overflow:hidden
}
/* десктоп — чистый ТРЕУГОЛЬНИК-пик вверх-справа (НЕ ромб): внешний=обводка, внутренний=заливка (перекрывает
   верх.обводку панели → без горизонт.шва). ::before переопределяет общий orange-line только у дропдауна.
   overflow:visible чтобы пик торчал. Мобильный грабер (::after @media max-width:760) не задет. */
@media(min-width:761px){
  .dh-prof-dd{overflow:visible !important}
  .dh-prof-dd::before{content:"";position:absolute;top:-9px;right:24px;left:auto;width:0;height:0;background:none;opacity:1;
    border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid rgba(232,123,0,.55);border-radius:0;z-index:1;pointer-events:none}
  .dh-prof-dd::after{content:"";position:absolute;top:-7px;right:26px;left:auto;width:0;height:0;background:none;
    border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid rgba(255,255,255,.92);border-radius:0;transform:none;z-index:2;pointer-events:none}
}
.dh-prof-dd__hdr{border-bottom:1px solid rgba(0,0,0,.06) !important}
.dh-prof-dd__name{color:var(--ink) !important}
.dh-prof-dd__role{color:var(--muted) !important}
.dh-prof-dd__item{color:#33333a !important}
.dh-prof-dd__item:hover{background:rgba(255,122,0,.08) !important;color:#c66a00 !important}
.dh-prof-dd__divider{background:rgba(0,0,0,.06) !important}
.dh-prof-dd__item--out{color:#e84040 !important}

/* ── DESKTOP MEGA-MENU (Все категории, дропдаун) ── */
.dh-mega{
  background:var(--glass-bg) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:var(--glass-border);border-top:0;
  border-bottom-left-radius:var(--glass-radius);border-bottom-right-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow) !important;position:fixed
}

/* ── LANGUAGE menu (только фон/стекло+цвет текста; механику DEV1 не трогаем) ── */
.otc-lang-menu{
  background:var(--glass-bg) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:var(--glass-border) !important;border-radius:16px !important;
  box-shadow:var(--glass-shadow) !important
}
.otc-lang-menu .otc-lang-opt{color:#33333a !important}
.otc-lang-menu .otc-lang-opt:hover{background:rgba(255,122,0,.08) !important;color:#c66a00 !important}
.otc-lang-menu .otc-lang-opt.cur{color:#ff7a00 !important}
.otc-lang-menu .otc-lang-opt__code{color:#9a9aa2 !important}
.otc-lang-menu .otc-lang-opt.cur .otc-lang-opt__code{color:#ff7a00 !important}
.otc-lang-menu .otc-lang-opt.cur::before{background:#ff7a00 !important}

/* ── MOBILE bottom-sheets (otc-sheet) — стекло, скруглён верх ── */
.otc-sheet{
  background:var(--glass-bg) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-top:var(--glass-border);
  border-top-left-radius:26px !important;border-top-right-radius:26px !important;
  box-shadow:0 -20px 60px rgba(40,40,60,.2) !important;color:var(--ink)
}
.otc-sheet__backdrop{background:rgba(30,28,34,.42) !important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ── AI ДРОВЕР: тёмный → светлое стекло (бьём inline-стили) ── */
#h-ai-drawer .dh-drawer__hdr{background:transparent !important;border-color:rgba(0,0,0,.06) !important}
#h-ai-drawer .dh-drawer__title{color:var(--ink) !important}
#h-ai-drawer .dh-drawer__title .spark,#h-ai-drawer .dh-drawer__title{}
#h-ai-drawer .dh-drawer__sub{color:var(--muted) !important}
#h-ai-drawer .dh-drawer__close{background:rgba(0,0,0,.05) !important;color:var(--muted) !important}
.dh-ai-messages{background:transparent !important;padding:14px 18px}
/* Стартовые подсказки ВВЕРХУ области помощника (как у Claude) */
.dh-ai-starter{padding:14px 18px 2px}
.dh-ai-starter__hint{font-size:12.5px;color:var(--muted);margin:0 0 10px;font-weight:500}
.dh-ai-qr{background:transparent !important;display:flex;gap:8px;flex-wrap:wrap;padding:0}
.dh-ai-qr__btn{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.72) !important;border:1px solid rgba(0,0,0,.07) !important;color:#33333a !important;
  border-radius:13px;padding:8px 13px;font-size:13px;font-weight:500;cursor:pointer;
  transition:border-color .12s,color .12s,background .12s
}
.dh-ai-qr__btn svg{width:16px;height:16px;color:#ff7a00;flex-shrink:0}
.dh-ai-qr__btn:hover{border-color:rgba(255,122,0,.5) !important;color:#c66a00 !important;background:rgba(255,247,237,.7) !important}

/* Поле ввода — копия чат-инпута Claude (textarea, авто-рост вниз) */
.dh-ai-input-row{background:transparent !important;border-color:rgba(0,0,0,.06) !important;padding:14px 18px;align-items:flex-end}
textarea.dh-ai-input{
  background:rgba(255,255,255,.85) !important;border:1px solid rgba(0,0,0,.1) !important;color:var(--ink) !important;
  border-radius:18px;resize:none;overflow-y:auto;max-height:132px;min-height:42px;line-height:1.4;
  padding:11px 14px;font-size:14px;font-family:inherit
}
.dh-ai-input::placeholder{color:#9a9aa2 !important}
textarea.dh-ai-input:focus{border-color:rgba(255,122,0,.45) !important;box-shadow:0 0 0 3px rgba(255,122,0,.15)}
.dh-ai-send{background:var(--org) !important;box-shadow:0 7px 18px rgba(255,122,0,.32);align-self:flex-end;margin-bottom:2px}
.dh-ai-send:disabled{background:#c9c9cf !important;opacity:.55;cursor:default;box-shadow:none}

/* AI message bubbles (выравниваем под макет) */
.h-ai-msg,.dh-ai-msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.55}
.h-ai-msg--user,.dh-ai-msg--user{background:var(--org);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;margin-left:auto}
.h-ai-msg--bot,.h-ai-msg--ai,.dh-ai-msg--ai{
  background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.06);color:#2c2c32;
  align-self:flex-start;border-bottom-left-radius:4px
}

/* AI товарные карточки в ответе */
.dh-ai-prod{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(0,0,0,.06)}
.dh-ai-prod:first-child{border-top:0}
.dh-ai-prod__img{width:42px;height:42px;border-radius:10px;object-fit:cover;background:rgba(0,0,0,.05);flex-shrink:0}
.dh-ai-prod__main{min-width:0;flex:1}
.dh-ai-prod__nm{font-size:12.5px;font-weight:600;color:#1a1a1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-ai-prod__meta{font-size:11.5px;color:var(--muted);margin-top:1px}
.dh-ai-prod__pr{font-size:12.5px;font-weight:700;color:#1a1a1f;margin-left:auto;white-space:nowrap}
.dh-ai-prod__add{border:0;background:rgba(255,122,0,.14);color:#c66a00;border-radius:9px;padding:6px 9px;font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0}
.dh-ai-prod__add:hover{background:rgba(255,122,0,.24)}
.dh-ai-more{display:inline-block;margin-top:9px;color:#c66a00;font-size:12.5px;font-weight:600;cursor:pointer}

/* ── ФОТО-РЕЗУЛЬТАТЫ (сетка похожих игрушек прямо в окне) ── */
.dh-photo-results{display:none;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;max-height:300px;overflow-y:auto}
.dh-photo-results.is-on{display:grid}
.dh-photo-card{background:#f5f5f8;border:1px solid rgba(0,0,0,.06);border-radius:12px;overflow:hidden}
.dh-photo-card__img{width:100%;aspect-ratio:1;object-fit:cover;background:rgba(0,0,0,.05);display:block}
.dh-photo-card__b{padding:7px 8px}
.dh-photo-card__nm{font-size:11px;color:#33333a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dh-photo-card__m{font-size:11px;font-weight:700;color:var(--org);margin-top:2px}
.dh-photo-note{margin-top:14px;font-size:12px;color:var(--muted);text-align:center;line-height:1.5}
.dh-photo-preview{margin-top:14px;text-align:center}
.dh-photo-preview img{max-width:160px;border-radius:14px;border:1px solid rgba(0,0,0,.08)}

/* ── АВТОРИЗАЦИЯ: тёмная карточка → светлое стекло (вход/регистрация) ── */
.dh-auth-modal__card{
  background:var(--glass-bg) !important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:var(--glass-border);border-radius:26px !important;
  box-shadow:var(--glass-shadow) !important;color:var(--ink);overflow:hidden;position:relative
}
.dh-auth-modal__card::before{content:"";position:absolute;top:0;left:18px;right:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--org),transparent);z-index:3;pointer-events:none}
.dh-auth-modal__card .auth-tabs{background:transparent !important;border-bottom:1px solid rgba(0,0,0,.07) !important}
.dh-auth-modal__card .auth-tab{color:rgba(26,26,31,.45) !important}
.dh-auth-modal__card .auth-tab.is-active{color:var(--ink) !important}
.dh-auth-modal__close{color:var(--muted) !important}
.dh-auth-modal__close:hover{background:rgba(0,0,0,.06) !important}
.dh-auth-modal__close svg path{stroke:rgba(26,26,31,.55) !important}
.dh-auth-modal__card .auth-title{color:var(--ink) !important}
.dh-auth-modal__card .auth-sub{color:var(--muted) !important}
.dh-auth-modal__card .auth-label{color:rgba(26,26,31,.5) !important}
.dh-auth-modal__card .auth-sw__divider{color:#8a8a90 !important}
.dh-auth-modal__card .auth-sw__divider::before,.dh-auth-modal__card .auth-sw__divider::after{background:rgba(0,0,0,.1) !important}
.dh-auth-modal__card .auth-input{
  background:rgba(255,255,255,.82) !important;border:1px solid rgba(0,0,0,.12) !important;color:var(--ink) !important
}
.dh-auth-modal__card .auth-input::placeholder{color:#9a9aa2 !important}
.dh-auth-modal__card .auth-input:focus{border-color:rgba(255,122,0,.5) !important;box-shadow:0 0 0 3px rgba(255,122,0,.15) !important}
.dh-auth-modal__card .auth-submit-btn{background:linear-gradient(180deg,#ff9333,#ff7a00) !important;color:#fff !important}
.dh-auth-modal__card .auth-sw__oauth-btn{background:rgba(255,255,255,.9) !important;border:1px solid rgba(0,0,0,.14) !important;color:#1a1a1f !important}
.dh-auth-modal__card .auth-pw-eye{color:var(--muted) !important}
.dh-auth-modal__card .auth-forgot{color:#c66a00 !important}
/* role-cards (тип аккаунта при регистрации) */
.dh-auth-modal__card .role-card{background:rgba(255,255,255,.6) !important;border:1px solid rgba(0,0,0,.1) !important}
.dh-auth-modal__card .role-card.is-active{border:1.5px solid var(--org) !important;background:rgba(255,122,0,.1) !important}
.dh-auth-modal__card .role-card__icon{color:rgba(26,26,31,.45) !important}
.dh-auth-modal__card .role-card.is-active .role-card__icon{color:var(--org) !important}
.dh-auth-modal__card .role-card__name{color:#3a3a40 !important}
.dh-auth-modal__card .role-card.is-active .role-card__name{color:var(--ink) !important}
.dh-auth-modal__card .role-card__sub{color:rgba(26,26,31,.4) !important}

/* Открытие — мягкая премиум-кривая */
.dh-drawer,.dh-modal__box,.dh-prof-dd,.otc-sheet{transition-timing-function:var(--glass-ease) !important}

@media(prefers-reduced-motion:reduce){
  .dh-backdrop,.otc-sheet__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* DEV1-AUTH-MODAL-TEXT-CONTRAST-V1: glass-тема пропустила footer-текст и чекбокс оферты — были белые/бледные (тёмная тема) → на светлой glass невидимы. Делаем тёмными (AA), ссылки оранжевые. */
.dh-auth-modal__card .auth-footer-text{color:rgba(26,26,31,.62) !important;font-size:12px !important}
.dh-auth-modal__card .auth-footer-link{color:#c66a00 !important}
.dh-auth-modal__card .auth-offer{color:#3a3a40 !important}
.dh-auth-modal__card .auth-offer a{color:var(--org,#e87b00) !important}

/* DEV1-PROFILE-DROPDOWN-BY-ROLE-V1: партнёр (агент/мастер) — НЕ покупатель. Скрыть покупательские пункты выпадашки + buy-кнопки. */
body.otc-nobuy #dd-orders, body.otc-nobuy #dd-cart, body.otc-nobuy #dd-wish, body.otc-nobuy #h-partner-btn,
body.otc-nobuy #h-cart-btn, body.otc-nobuy #h-wish-btn,
body.otc-nobuy #toRfq, body.otc-nobuy #toCart, body.otc-nobuy #smpReq, body.otc-nobuy #smpCart,
body.otc-nobuy #pmRfq, body.otc-nobuy #pmCart, body.otc-nobuy #pmSmpReq, body.otc-nobuy #pmSmpCart,
body.otc-nobuy #crt-checkout, body.otc-nobuy .otc-product-card__cta, body.otc-nobuy [data-cart],
body.otc-nobuy .pm-ctabar { display: none !important; }