/* ─────────────────────────────────────────────────────────────────────────────
   3D badge
   ─────────────────────────────────────────────────────────────────────────────
   Marks a film as a 3D screening. It exists so the format no longer has to be
   spelled into the title: the film cards clip the title at two lines, so a name
   like "Avatar: Fire and Ash (3D)" lost the part that mattered most.

   Kept in its own file, and linked from header.php, because css/style.css is
   compiled from scss/style.scss -- anything appended there is lost the next time
   the sass is built.

   .film-3d-badge          overlays the top-left of a poster; needs a positioned
                           parent, which .film-poster-wrap provides where the
                           existing markup has none.
   .film-3d-badge-inline   sits beside a title in ordinary text flow, for the
                           places that show no artwork to draw on.
   ────────────────────────────────────────────────────────────────────────── */

.film-3d-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;

    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;

    background: #055ec2;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);

    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;

    pointer-events: none;
}

/* Beside a title: no overlay, so it follows the text instead of the poster. */
.film-3d-badge-inline {
    position: static;
    top: auto;
    left: auto;
    vertical-align: middle;
    margin-left: 8px;
    padding: 4px 9px;
    box-shadow: none;
    pointer-events: auto;
}

/* Something for the overlaid badge to be measured against. The schedule listings
   wrap their poster in a bare <a>, which is inline and so gives absolute
   positioning nothing to work with; .FilmImageMain on the single film page has
   an empty rule in footer.php and no position of its own. */
.film-poster-wrap {
    position: relative;
    display: block;
}

@media (max-width: 575px) {
    .film-3d-badge {
        top: 6px;
        left: 6px;
        padding: 2px 6px;
        font-size: .58rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   "Glasses required" notice
   ─────────────────────────────────────────────────────────────────────────────
   Lifted out of paymentb.php's inline <style> when the seat page and the
   e-ticket started showing the same panel. The markup comes from one function,
   film_3d_glasses_notice(), so this is the only place its look is defined.
   ────────────────────────────────────────────────────────────────────────── */

.v3d-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    border: 1.5px solid #ffc107;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.v3d-notice .v3d-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.v3d-notice .v3d-text {
    font-size: .82rem;
    color: #795500;
    line-height: 1.55;
}

.v3d-notice .v3d-text strong {
    color: #5c3d00;
}