/* ==========================================================================
   dvm-modal.css  –  Divi Video Modal
   ========================================================================== */

/* -----------------------------------------------------------------------
   Triggers – shared base
   ---------------------------------------------------------------------- */
.dvm-trigger {
    display:         inline-flex;
    align-items:     center;
    gap:             0.45em;
    position:        relative;
    cursor:          pointer;
    border:          none;
    background:      none;
    padding:         0;
    font-family:     inherit;
    font-size:       inherit;
    line-height:     1.4;
    text-decoration: none;
    transition:      opacity .2s ease, transform .15s ease;
    vertical-align:  middle;
}
.dvm-trigger:hover  { opacity: .82; }
.dvm-trigger:active { transform: scale(.97); }
.dvm-trigger:focus-visible {
    outline:        3px solid #0073aa;
    outline-offset: 3px;
    border-radius:  3px;
}

/* Button variant */
.dvm-trigger--button {
    font-weight:    600;
    letter-spacing: .02em;
    white-space:    nowrap;
    box-shadow:     0 2px 10px rgba(0,0,0,.2);
    transition:     opacity .2s ease, transform .15s ease, box-shadow .2s ease;
}
.dvm-trigger--button:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
    opacity: 1;
    transform: translateY(-1px);
}

/* Image variant */
.dvm-trigger--image {
    display:       block;
    overflow:      hidden;
    border-radius: 4px;
    box-shadow:    0 4px 18px rgba(0,0,0,.25);
    line-height:   0;
}
.dvm-trigger__img {
    display: block;
    width:   100%;
    height:  auto;
    transition: transform .35s ease;
}
.dvm-trigger--image:hover .dvm-trigger__img {
    transform: scale(1.03);
}

/* Text / link variant */
.dvm-trigger--text {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Play icon */
.dvm-play-icon {
    display:        block;
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%,-50%);
    width:          68px;
    height:         68px;
    pointer-events: none;
    filter:         drop-shadow(0 2px 8px rgba(0,0,0,.45));
    transition:     transform .2s ease;
}
/* Inline play icon for button/text triggers */
.dvm-trigger--button .dvm-play-icon,
.dvm-trigger--text   .dvm-play-icon {
    position:  static;
    transform: none;
    width:     1em;
    height:    1em;
}
.dvm-trigger--image:hover .dvm-play-icon {
    transform: translate(-50%,-50%) scale(1.1);
}

/* -----------------------------------------------------------------------
   <dialog> overlay
   ---------------------------------------------------------------------- */
#dvm-dialog {
    position:   fixed;
    inset:      0;
    width:      100%;
    height:     100%;
    max-width:  100%;
    max-height: 100%;
    margin:     0;
    padding:    1rem;
    border:     none;
    background: transparent;
    overflow:   auto;
    box-sizing: border-box;

    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         999999;

    --dvm-overlay: rgba(0,0,0,.85);

    /* Hidden until .dvm--open is added */
    opacity:        0;
    pointer-events: none;
    transition:     opacity .25s ease;
}
#dvm-dialog[open] { display: flex; }

/* Browser ::backdrop */
#dvm-dialog::backdrop { background: var(--dvm-overlay); }

/* Fallback overlay for Safari / older browsers */
#dvm-dialog::before {
    content:    '';
    position:   fixed;
    inset:      0;
    background: var(--dvm-overlay);
    z-index:    -1;
}

/* Blur modifier */
#dvm-dialog.dvm--blur::before,
#dvm-dialog.dvm--blur::backdrop {
    backdrop-filter:         blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* Open state */
#dvm-dialog.dvm--open {
    opacity:        1;
    pointer-events: all;
}

/* -----------------------------------------------------------------------
   Modal inner container + animations
   ---------------------------------------------------------------------- */
.dvm-dialog__inner {
    position:      relative;
    width:         100%;
    /* max-width set inline per instance */
    background:    #000;
    border-radius: 8px;
    overflow:      visible; /* close button sits outside */
    box-shadow:    0 28px 80px rgba(0,0,0,.7);

    /* Default: scale animation */
    transform:  scale(.88);
    transition: transform .28s cubic-bezier(.34,1.3,.64,1);
}
#dvm-dialog.dvm--open .dvm-dialog__inner {
    transform: scale(1);
}

/* Fade only */
#dvm-dialog[data-animation="fade"] .dvm-dialog__inner {
    transform: none;
    transition: none;
}

/* Slide-up */
#dvm-dialog[data-animation="slide-up"] .dvm-dialog__inner {
    transform: translateY(40px);
    transition: transform .3s cubic-bezier(.25,.46,.45,.94);
}
#dvm-dialog[data-animation="slide-up"].dvm--open .dvm-dialog__inner {
    transform: translateY(0);
}

/* -----------------------------------------------------------------------
   16:9 media wrapper
   ---------------------------------------------------------------------- */
.dvm-dialog__media {
    position:    relative;
    padding-top: 56.25%;
    background:  #000;
    border-radius: 6px;
    overflow:    hidden;
}
.dvm-iframe,
.dvm-video {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
    display:  block;
}

/* -----------------------------------------------------------------------
   Close button
   ---------------------------------------------------------------------- */
.dvm-dialog__close {
    position:        absolute;
    top:             -2.8rem;
    right:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2.2rem;
    height:          2.2rem;
    padding:         0;
    background:      rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    border:          1px solid rgba(255,255,255,.2);
    border-radius:   50%;
    cursor:          pointer;
    color:           #fff;
    transition:      background .2s ease, transform .15s ease;
    z-index:         10;
}
.dvm-dialog__close:hover  { background: rgba(255,255,255,.3); }
.dvm-dialog__close:active { transform: scale(.9); }
.dvm-dialog__close:focus-visible {
    outline:        3px solid #fff;
    outline-offset: 3px;
}
.dvm-dialog__close svg {
    width:  1rem;
    height: 1rem;
}

/* -----------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media ( max-width: 600px ) {
    #dvm-dialog { padding: .5rem; }
    .dvm-dialog__close { top: -2.4rem; width: 2rem; height: 2rem; }
    .dvm-play-icon { width: 52px; height: 52px; }
}