/* ================================================================
   inhaler-card-3d.css
   ================================================================ */

/* ── Link wrapper do card ─────────────────────────────────────── */
.inhaler-card--3d {
    display: block;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
}

/* ── Zona de imagem: fundo tint + proporção ───────────────────── */
.inhaler-card__image-zone--3d {
    aspect-ratio: 4 / 3;
    background: var(--ic-tint, #0096c714);
    position: relative;          /* âncora para .vp-3d e .badge */
    overflow: hidden;            /* corta o canvas nos cantos */
}

/* ── Viewport 3D: inset cria a margem visual ──────────────────── */
/* O canvas preenche este elemento a 100% — é aqui que se ajusta  */
/* o espaço em torno do modelo, sem tocar em JS.                  */
.inhaler-card__image-zone--3d .vp-3d {
    position: absolute;
    inset: 12px;                 /* margem visual — ajustar este valor */
}

/* ── Loader centrado no vp-3d ─────────────────────────────────── */
.vp-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Fallback SVG: posicionamento apenas                         */
/* display:none/'' é controlado pelo JS via inline style —       */
/* não colocar display aqui para evitar conflito com Materialize */
.vp-fallback {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

/* ── Spinner ──────────────────────────────────────────────────── */
.vp-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 0, 0, .10);
    border-top-color: var(--ic-accent, #0096c7);
    border-radius: 50%;
    animation: vp-spin .7s linear infinite;
}

@keyframes vp-spin {
    to { transform: rotate(360deg); }
}

/* ── Badge ────────────────────────────────────────────────────── */
.inhaler-card__image-zone--3d .inhaler-card__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--white, #fff);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    z-index: 2;
}

.inhaler-card__image-zone--3d .inhaler-card__badge .material-icons {
    font-size: 16px;
    color: var(--ic-accent, #0096c7);
}

/* ── Hover ────────────────────────────────────────────────────── */
.inhaler-card--3d:hover .inhaler-card__image-zone--3d {
    border-color: var(--ic-accent, #0096c7);
}

/* ── Botão vídeo com cor accent ───────────────────────────────── */
.inhaler-card--3d .inhaler-card__btn--video {
    background-color: var(--ic-accent, #0096c7);
}

.inhaler-card--3d .inhaler-card__btn--video:hover {
    filter: brightness(1.1);
}