/**
 * ====================================================================
 *  JoomFlix SafeVideo - Frontend Stylesheet
 *  ------------------------------------------------------
 *  Version:     1.0.0
 *  Author:      JoomFlix
 *  Website:     https://www.joomflix.com
 *  Support:     support@joomflix.com
 *  License:     GNU GPL v3 or later
 *
 *  Description:
 *  Clean & responsive CSS wrapper for embedded video players.
 *  Handles all aspect ratios, centering, spacing, vertical formats,
 *  and PageBuilder compatibility.
 *
 *  IMPORTANT:
 *  Do not modify unless you know what you are doing.
 *  This file is safe to override via template custom.css.
 * ====================================================================
 */

/* =====================================================
   JoomFlix SafeVideo – Core Wrapper
===================================================== */

.jf-safevideo {
    width: 100%;
    margin: 30px auto;
    text-align: center;
}

/* =====================================================
   Video Frame (Aspect Ratio Aware)
===================================================== */

.jf-safevideo-frame {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;

    aspect-ratio: 16 / 9; /* default fallback */
    overflow: hidden;

    border-radius: 10px;
    background: #000;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Video fill */
.jf-safevideo-frame iframe,
.jf-safevideo-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* =====================================================
   User-selected Aspect Ratios
===================================================== */

.jf-ratio-16-9 { aspect-ratio: 16 / 9; }
.jf-ratio-4-3  { aspect-ratio: 4 / 3; }
.jf-ratio-21-9 { aspect-ratio: 21 / 9; }
.jf-ratio-9-16 { aspect-ratio: 9 / 16; }
.jf-ratio-1-1  { aspect-ratio: 1 / 1; }

/* Vertical videos (TikTok / Reels / Shorts) */
.jf-ratio-9-16 iframe,
.jf-ratio-9-16 video {
    object-fit: cover;
    background: #000;
}

/* =====================================================
   Share Button
===================================================== */

.jf-safevideo-share {
    display: block;
    margin-top: -2px;     /* brings button closer to video */
    text-align: center;
    position: relative;
    z-index: 10;
    padding: 0;
}

.jf-share-btn {
    position: relative;
    background: #1877F2;
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px; /* pill style */
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.jf-share-btn:hover {
    background: #365899;
    color: #fff;
}

/* =====================================================
   Mobile Tweaks
===================================================== */

@media (max-width: 768px) {
    .jf-safevideo-frame {
        max-width: calc(100% - 30px);
        border-radius: 12px;
    }

    .jf-safevideo-share {
        margin-top: 4px;
    }
}