/* Общие (базовые) стили вьювера 3D-моделей.
   Используются компонентами model3d.viewer и model3d.gallery. */

.ar-model3d {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(17, 24, 39, 0.06);
}

.ar-model3d model-viewer {
    --poster-color: transparent;
    /* Плавный «прогрев» подсветки взаимодействия */
    --interaction-prompt-threshold: 1500ms;
    display: block;
    border-radius: 12px;
}

/* Курсор-«рука» подсказывает, что модель можно вращать */
.ar-model3d model-viewer[camera-controls] {
    cursor: grab;
}

.ar-model3d model-viewer[camera-controls]:active {
    cursor: grabbing;
}

/* Прогресс-бар загрузки модели */
.ar-model3d__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    transition: opacity 0.3s;
}

.ar-model3d__progress[hidden] {
    opacity: 0;
    pointer-events: none;
}

.ar-model3d__progress-bar {
    height: 100%;
    width: 0;
    background: #2f6fed;
    transition: width 0.2s ease-out;
}

/* Кнопка AR в тулбаре. По умолчанию скрыта (двойной класс — повышенная
   специфичность, чтобы перебить базовое .ar-model3d__control). Показываем
   только когда JS подтвердил доступность AR (класс .ar-model3d--ar-ready).
   На ПК её нет и она не мелькает. */
.ar-model3d__control.ar-model3d__control--ar {
    display: none;
}

.ar-model3d--ar-ready .ar-model3d__control.ar-model3d__control--ar {
    display: inline-flex;
}

/* Текстовая кнопка AR внизу (альтернатива иконке в тулбаре, опция модуля).
   Тот же «стеклянный» стиль и та же логика показа: только при доступном AR. */
.ar-model3d__ar-pill {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 5;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 24px;
    background: var(--ar-control-bg, rgba(15, 23, 42, 0.72));
    color: var(--ar-control-color, #fff);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px) saturate(135%);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* Иконка ровно в размер текста (1em) и с микросдвигом вверх -
   оптическое выравнивание по центру заглавных букв. */
.ar-model3d__ar-pill svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    margin-top: -0.08em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Своя иконка (картинка) вместо стандартного кубика */
.ar-model3d__ar-pill .ar-model3d__ar-ico {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    margin-top: -0.08em;
    object-fit: contain;
    display: block;
}

.ar-model3d__control .ar-model3d__ar-ico {
    width: 52%;
    height: 52%;
    object-fit: contain;
    display: block;
}

.ar-model3d__ar-pill:active {
    transform: translateX(-50%) scale(0.97);
}

/* Вариант формы: прямоугольная, скругление как у квадратных кнопок тулбара */
.ar-model3d__ar-pill--rect {
    border-radius: 12px;
}

.ar-model3d--ar-ready .ar-model3d__ar-pill {
    display: inline-flex;
}

/* Скрытый launcher <a rel="ar"> для iOS Quick Look (ловим нажатие Custom Action). */
.ar-model3d__ar-launch {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Заглушка для slot="ar-button": подавляет встроенную нижнюю кнопку AR
   у model-viewer (мы используем свою в тулбаре). */
.ar-model3d__ar-suppress {
    display: none !important;
}

.ar-model3d:fullscreen,
.ar-model3d:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    background: #000;
}

.ar-model3d:fullscreen model-viewer {
    border-radius: 0;
}

/* Сообщение об ошибке загрузки */
.ar-model3d__error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    color: #b91c1c;
    background: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

/* Режим заглушки: картинка вместо 3D + AR на iOS */
.ar-model3d--poster {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ar-model3d--poster img,
.ar-model3d__poster-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ar-model3d__poster-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Бейдж «Смотреть в AR» показываем только на iOS (класс ставит script.js) */
.ar-model3d__ar-badge {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 10px 18px;
    border-radius: 24px;
    background: #2f6fed;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(47, 111, 237, 0.35);
    pointer-events: none;
}

.ar-model3d--ar-ok .ar-model3d__ar-badge {
    display: inline-flex;
}

/* Хотспоты (аннотации на модели) */
.ar-model3d__hotspot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #2f6fed;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    padding: 0;
    cursor: pointer;
    position: relative;
}

.ar-model3d__hotspot[data-visible="false"] {
    opacity: 0.35;
}

.ar-model3d__hotspot-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    padding: 5px 9px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.ar-model3d__hotspot:hover .ar-model3d__hotspot-label,
.ar-model3d__hotspot:focus-visible .ar-model3d__hotspot-label {
    opacity: 1;
}

/* Фолбэк при отсутствии WebGL */
.ar-model3d__nowebgl {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    color: #374151;
    background: #f3f4f6;
    font-size: 14px;
}

/* Modern control panel */
.ar-model3d__controls { position:absolute; z-index:5; display:flex; align-items:center; gap:8px; pointer-events:none; }
.ar-model3d__controls--top-right { top:12px; right:12px; }
.ar-model3d__controls--top-left { top:12px; left:12px; }
.ar-model3d__controls--bottom-right { right:12px; bottom:12px; }
.ar-model3d__controls--bottom-left { bottom:12px; left:12px; }
.ar-model3d__control {
    position:static; top:auto; right:auto; bottom:auto; left:auto; width:var(--ar-control-size,42px); height:var(--ar-control-size,42px);
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; padding:0;
    border:1px solid rgba(255,255,255,.22); border-radius:12px;
    background:var(--ar-control-bg,rgba(15,23,42,.72)); color:var(--ar-control-color,#fff);
    box-shadow:0 3px 10px rgba(15,23,42,.12),inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter:blur(12px) saturate(135%); -webkit-backdrop-filter:blur(12px) saturate(135%);
    cursor:pointer; pointer-events:auto; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.ar-model3d__control svg { width:52%; height:52%; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ar-model3d__control:hover { background:color-mix(in srgb,var(--ar-control-bg,rgba(15,23,42,.72)),white 10%); border-color:rgba(255,255,255,.34); box-shadow:0 5px 16px rgba(15,23,42,.16),inset 0 1px 0 rgba(255,255,255,.2); transform:translateY(-1px) scale(1.02); }
.ar-model3d__control:active { transform:translateY(0) scale(.97); }
.ar-model3d__control:focus-visible { outline:3px solid rgba(96,165,250,.75); outline-offset:2px; }
/* Кнопка полноэкранного режима — тот же стиль, что у остальных (.ar-model3d__control). */
.ar-model3d__fs-button { position: relative; }
.ar-model3d__fs-icon--exit { display:none; }
.ar-model3d:fullscreen .ar-model3d__fs-icon--enter,.ar-model3d:-webkit-full-screen .ar-model3d__fs-icon--enter { display:none; }
.ar-model3d:fullscreen .ar-model3d__fs-icon--exit,.ar-model3d:-webkit-full-screen .ar-model3d__fs-icon--exit { display:block; }
/* Mobile CSS fullscreen fallback */
html.ar-model3d-page--locked,
body.ar-model3d-page--locked {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.ar-model3d.ar-model3d--fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #000;
}

.ar-model3d.ar-model3d--fullscreen model-viewer {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
}

.ar-model3d--fullscreen .ar-model3d__fs-icon--enter {
    display: none;
}

.ar-model3d--fullscreen .ar-model3d__fs-icon--exit {
    display: block;
}

.ar-model3d--fullscreen .ar-model3d__controls--top-right {
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
}

.ar-model3d--fullscreen .ar-model3d__controls--top-left {
    top: calc(12px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
}

.ar-model3d--fullscreen .ar-model3d__controls--bottom-right {
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
}

.ar-model3d--fullscreen .ar-model3d__controls--bottom-left {
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: calc(12px + env(safe-area-inset-left));
}