/* ==========================================================
   VIDEO GENERATOR
========================================================== */

#page-video .png-field{

    margin-bottom:22px;

}

#page-video .video-row .png-field{

    margin-bottom:0;

}

.video-section-title{

    margin:32px 0 8px;

    padding-top:8px;

    border-top:1px solid #E8EDF5;

    font-size:18px;

    font-weight:700;

    color:#1F2937;

}

.video-section-subtitle{

    margin:0 0 12px;

    font-size:14px;

    font-weight:600;

    color:#374151;

}

.video-row{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin-bottom:22px;

}

.video-btn-group{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}

.video-btn-option{

    padding:10px 16px;

    border:2px solid #E8EDF5;

    border-radius:10px;

    background:#fff;

    font-size:13px;

    font-weight:500;

    color:#374151;

    cursor:pointer;

    transition:.2s;

}

.video-btn-option:hover{

    border-color:#C7D0E0;

}

.video-btn-option.active{

    border-color:#6C5CE7;

    background:#F6F4FF;

    color:#6C5CE7;

}

/* ---- Logo upload ---- */

.video-logo-upload{

    position:relative;

    border:2px dashed #D7DEEA;

    border-radius:12px;

    padding:16px;

    cursor:pointer;

    text-align:center;

    transition:.2s;

}

.video-logo-upload:hover{

    border-color:#B9C4D6;

    background:#FAFBFF;

}

.video-logo-empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:4px;

}

#video-logo-preview{

    max-width:100%;

    max-height:100px;

    object-fit:contain;

}

/* ---- Logo position picker ---- */

.video-logo-position-group{

    display:flex;

    gap:8px;

}

.video-logo-pos-option{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #E8EDF5;

    border-radius:10px;

    background:#fff;

    cursor:pointer;

    transition:.2s;

}

.video-logo-pos-option:hover{

    border-color:#C7D0E0;

}

.video-logo-pos-option.active{

    border-color:#6C5CE7;

    background:#F6F4FF;

}

.video-corner-icon{

    position:relative;

    width:20px;

    height:20px;

}

.video-corner-icon::before,
.video-corner-icon::after{

    content:"";

    position:absolute;

    background:#6B7280;

}

.video-corner-tl::before{ top:0; left:0; width:10px; height:2px; }
.video-corner-tl::after{ top:0; left:0; width:2px; height:10px; }

.video-corner-tr::before{ top:0; right:0; width:10px; height:2px; }
.video-corner-tr::after{ top:0; right:0; width:2px; height:10px; }

.video-corner-bl::before{ bottom:0; left:0; width:10px; height:2px; }
.video-corner-bl::after{ bottom:0; left:0; width:2px; height:10px; }

.video-corner-br::before{ bottom:0; right:0; width:10px; height:2px; }
.video-corner-br::after{ bottom:0; right:0; width:2px; height:10px; }

/* ---- Result ---- */

.video-result{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

}

.video-result video{

    max-width:420px;

    width:100%;

    border-radius:14px;

    border:1px solid #E8EDF5;

    background:#000;

}

/* ---- History ---- */

.video-history-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));

    gap:14px;

}

.video-history-item{

    position:relative;

    border-radius:12px;

    overflow:hidden;

    border:1px solid #E8EDF5;

    background:#F3F5F9;

}

.video-history-item video{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    display:block;

    background:#000;

}

.video-history-item-caption{

    font-size:11px;

    color:#6B7280;

    padding:6px 8px;

    background:#fff;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.video-history-item-actions{

    display:flex;

    gap:4px;

    padding:0 8px 8px;

    background:#fff;

}

.video-history-aspect-badge{

    position:absolute;

    top:6px;

    left:6px;

    z-index:5;

    background:rgba(0,0,0,.65);

    color:#fff;

    font-size:11px;

    font-weight:600;

    padding:3px 8px;

    border-radius:999px;

    pointer-events:none;

}

.video-history-delete{

    position:absolute;

    top:6px;

    right:6px;

    width:24px;

    height:24px;

    border-radius:50%;

    border:none;

    background:rgba(15,23,42,.65);

    color:#fff;

    font-size:13px;

    line-height:1;

    cursor:pointer;

}

/* ---- Progress ---- */

.video-progress-wrap{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:12px;

}

.video-progress-bar{

    flex:1;

    height:8px;

    border-radius:4px;

    background:#E8EDF5;

    overflow:hidden;

}

.video-progress-fill{

    height:100%;

    width:0%;

    background:#6C5CE7;

    transition:width .2s;

}

.video-progress-label{

    font-size:12px;

    color:#6B7280;

    min-width:40px;

}

/* ==========================================================
   PREVIEW
========================================================== */

.video-preview-wrap{

    display:flex;

    flex-direction:column;

    align-items:center;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    border-radius:12px;

    padding:20px;

}

.video-player-frame{

    position:relative;

    width:100%;

    max-width:360px;

    border-radius:8px;

    overflow:hidden;

    background:#000;

}

.video-preview-canvas{

    width:100%;

    background:#000;

    display:block;

}

.video-player-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:10px 14px 12px;

    background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));

}

.video-player-row{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:10px;

}

.video-player-play-btn{

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:26px;

    height:26px;

    border-radius:50%;

    border:none;

    background:transparent;

    color:#fff;

    cursor:pointer;

    padding:0;

}

.video-player-play-btn:hover{

    color:#E5E7EB;

}

.video-player-play-btn:disabled{

    opacity:.6;

    cursor:default;

}

.video-player-time{

    color:#fff;

    font-size:13px;

    font-variant-numeric:tabular-nums;

}

.video-player-scrub{

    display:block;

    width:100%;

    -webkit-appearance:none;

    appearance:none;

    height:20px;

    background:transparent;

    outline:none;

    cursor:pointer;

    margin:0;

    --png-video-fill:0%;

}

.video-player-scrub::-webkit-slider-runnable-track{

    height:4px;

    border-radius:2px;

    background:linear-gradient(to right, #fff 0%, #fff var(--png-video-fill), rgba(255,255,255,.35) var(--png-video-fill), rgba(255,255,255,.35) 100%);

}

.video-player-scrub::-moz-range-track{

    height:4px;

    border-radius:2px;

    background:rgba(255,255,255,.35);

}

.video-player-scrub::-moz-range-progress{

    height:4px;

    border-radius:2px;

    background:#fff;

}

.video-player-scrub::-webkit-slider-thumb{

    -webkit-appearance:none;

    appearance:none;

    width:13px;

    height:13px;

    margin-top:-4.5px;

    border-radius:50%;

    background:#fff;

    cursor:pointer;

    box-shadow:0 1px 3px rgba(0,0,0,.4);

}

.video-player-scrub::-moz-range-thumb{

    width:13px;

    height:13px;

    border:none;

    border-radius:50%;

    background:#fff;

    cursor:pointer;

    box-shadow:0 1px 3px rgba(0,0,0,.4);

}

.video-preview-wrap .png-field-hint{

    margin-top:10px;

}