/* ==========================================================================
   Vkard YouTube Video Widget — youtube.css
   ========================================================================== */

/* ── Outer wrapper (controls width + alignment) ─────────────────────────── */
.vkard-yt-wrapper {
    display:          flex;
    flex-wrap:        nowrap;
    justify-content:  center; /* default — overridden per breakpoint by Elementor */
    width:            100%;
    box-sizing:       border-box;
    background-color: transparent; /* overridden by Elementor background-color control */
}

.vkard-yt-outer {
    position:    relative;
    display:     block;
    width:       100%;
    flex-shrink: 0; /* prevents outer collapsing when width < 100% */
    box-sizing:  border-box;
    overflow:    hidden;
}

/* ── Ratio box — intrinsic-ratio container via padding-top trick ─────────── */
.vkard-yt-ratio-box {
    position:    relative;
    width:       100%;
    height:      0;
    padding-top: 56.25%; /* default 16:9, overridden inline */
    overflow:    hidden;
    /* background intentionally omitted — controlled entirely by Elementor */
}

/* When a custom fixed height is set, padding-top is overridden to 0 via Elementor selector */
.vkard-yt-ratio-box.is-custom-height {
    padding-top: 0;
}

/* ── iframe ──────────────────────────────────────────────────────────────── */
.vkard-yt-iframe {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;
    border:   0;
    display:  block;
}

/* ── Facade (thumbnail + play button) ───────────────────────────────────── */
.vkard-yt-facade {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
    cursor:              pointer;
    display:             flex;
    align-items:         center;
    justify-content:     center;
    outline:             none;
}

/* Overlay pseudo-element */
.vkard-yt-facade::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
    pointer-events: none;
}

.vkard-yt-facade:hover::after {
    background: rgba(0, 0, 0, 0.3);
}

/* ── Play button ─────────────────────────────────────────────────────────── */
.vkard-yt-play-btn {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate(-50%, -50%);
    z-index:         3;

    display:         flex;
    align-items:     center;
    justify-content: center;

    width:           72px;
    height:          72px;
    border-radius:   50%;

    background-color: rgba(255, 0, 0, 0.85);
    color:           #fff;

    transition:      background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    pointer-events:  none; /* click goes through to facade */
}

.vkard-yt-facade:hover .vkard-yt-play-btn {
    background-color: #ff0000;
    transform:        translate(-50%, -50%) scale(1.1);
}

/* Default YouTube-style SVG play icon */
.vkard-yt-play-default {
    width:       28px;
    height:      auto;
    fill:        #fff; /* background path */
    display:     block;
    flex-shrink: 0;
}

/* Custom icon (Font Awesome etc.) */
.vkard-yt-play-btn i {
    line-height: 1;
    display:     block;
}

/* ── Loading state — shown while iframe is replacing facade ─────────────── */
.vkard-yt-outer.is-loading .vkard-yt-facade {
    pointer-events: none;
}

.vkard-yt-outer.is-loading .vkard-yt-play-btn::after {
    content:  '';
    position: absolute;
    inset:    0;
    border-radius: inherit;
    border:   3px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    animation: vkard-yt-spin 0.7s linear infinite;
}

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

/* ── Fade-in iframe after load ───────────────────────────────────────────── */
.vkard-yt-iframe {
    opacity:    0;
    transition: opacity 0.4s ease;
}

.vkard-yt-iframe.is-loaded {
    opacity:    1;
}


/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .vkard-yt-play-btn {
        width:  56px;
        height: 56px;
    }
    .vkard-yt-play-default {
        width: 22px;
    }
}