/* ── video-modal.css — PDP video bubble + modal ─────────────────────────── */

/* Floating bubble (bottom-left, fixed) */
.ms-vc-bubble {
    position: fixed;
    bottom: calc(var(--space-4, 1.5rem) + var(--cart-bar-height, 0px));
    left: var(--space-4, 1.5rem);
    z-index: 900;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--ms-vc-modal-accent, var(--brand-primary, #111));
    box-shadow: 0 2px 12px rgba(0,0,0,.30);
    background: var(--ms-vc-modal-surface, #111);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ms-vc-bubble:hover,
.ms-vc-bubble:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(0,0,0,.40);
    outline: none;
}
.ms-vc-bubble img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ms-vc-bubble__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ms-vc-modal-overlay-rgb, 0,0,0), .30);
}
.ms-vc-bubble__play::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent var(--ms-vc-modal-text, #fff);
    margin-left: 2px;
}

/* ── Full-screen modal overlay ─────────────────────────────────────────── */
.ms-vc-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(var(--ms-vc-modal-overlay-rgb, 0,0,0), .95);
    flex-direction: row;
    align-items: stretch;
}
.ms-vc-modal.is-open {
    display: flex;
}

/* ── Close button ────────────────────────────────────────────────────────── */
.ms-vc-modal__close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    z-index: 10;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(var(--ms-vc-modal-overlay-rgb, 0,0,0), .35);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ms-vc-modal-text, #fff);
    font-size: 1.25rem;
    line-height: 1;
    transition: background .15s;
}
.ms-vc-modal__close:hover { background: rgba(var(--ms-vc-modal-overlay-rgb, 0,0,0), .55); }

/* ── Vertical swipe stack (TikTok-style) ──────────────────────────────── */
.ms-vc-stack {
    flex: 1;
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}
.ms-vc-stack__items {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    transition: transform .35s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}
.ms-vc-stack__item {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
}
.ms-vc-stack__item iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    pointer-events: none; /* prevent click-through before activation */
}
.ms-vc-stack__item.is-active iframe {
    pointer-events: auto;
}

/* Navigation arrows (desktop) */
.ms-vc-nav {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 5;
}
.ms-vc-nav__btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(var(--ms-vc-modal-overlay-rgb, 0,0,0), .35);
    border: none;
    cursor: pointer;
    color: var(--ms-vc-modal-text, #fff);
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.ms-vc-nav__btn:hover { background: rgba(var(--ms-vc-modal-overlay-rgb, 0,0,0), .55); }
.ms-vc-nav__btn:disabled { opacity: .3; cursor: default; }

/* ── Product overlay card (right panel on wide, bottom overlay on mobile) */
.ms-vc-card {
    width: 22rem;
    max-width: 100%;
    background: rgba(var(--ms-vc-modal-surface-rgb, 17,17,17), .80);
    backdrop-filter: blur(8px);
    color: var(--ms-vc-modal-text, #fff);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem 1.25rem;
    gap: .75rem;
    overflow-y: auto;
}

/* Compact bottom overlay on narrow screens */
@media (max-width: 640px) {
    .ms-vc-modal.is-open { flex-direction: column; }
    .ms-vc-card {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5;
        max-height: 45%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        padding: .75rem 1rem;
    }
}

.ms-vc-card__name {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.3;
    flex: 1 1 100%;
}
.ms-vc-card__price {
    font-size: .9rem;
    color: var(--ms-vc-modal-accent, #ffd54f);
}
.ms-vc-card__atc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .55rem 1.25rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    background: var(--ms-vc-button-bg, var(--brand-primary, #111));
    color: var(--ms-vc-button-text, #fff);
    white-space: nowrap;
    transition: opacity .15s;
}
.ms-vc-card__atc:disabled { opacity: .5; cursor: default; }
.ms-vc-card__atc--loading { opacity: .6; cursor: wait; }
.ms-vc-card__atc--done { background: var(--color-success, #2c7a44); }

/* Variation picker */
.ms-vc-var-picker {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ms-vc-var-picker__row {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.ms-vc-var-picker__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .7;
}
.ms-vc-var-picker__select {
    background: rgba(var(--ms-vc-modal-overlay-rgb, 0,0,0), .30);
    border: 1px solid rgba(var(--ms-vc-modal-overlay-rgb, 0,0,0), .55);
    color: var(--ms-vc-modal-text, #fff);
    border-radius: 4px;
    padding: .35rem .5rem;
    font-size: .875rem;
    appearance: none;
    cursor: pointer;
}
.ms-vc-var-picker__select:focus { outline: 2px solid var(--ms-vc-modal-accent, var(--brand-primary, #111)); }