/**
 * GLightbox Gallery Module -- functional (always-on) CSS
 *
 * @package    GLightbox Gallery Module
 * @copyright  Copyright (C) 2026 Laszlo Blaho. All rights reserved.
 * @license    GNU General Public License version 2 or later
 *
 * Split out of mod_glightbox.php's addInlineStyle() calls. Unlike
 * mod_glightbox_skin.css, this file is registered regardless of the
 * "Load CSS" setting: every rule here is load-bearing for its feature
 * (opt-out box positioning, filter/pagination layout, album hide/show,
 * the arrow-hide fix, the bounce animation, caption layout) rather than
 * pure decoration -- without it the feature breaks, it does not just
 * look unstyled. Each section is still requested only when its own
 * feature is active on the page (see the registerAndUseStyle() calls in
 * mod_glightbox.php), so a gallery that uses none of these features
 * never fetches this file at all.
 */

/* --- Popup mode: hide prev/next arrows on a single-slide gallery --- */
        .glightbox-container .gprev.glightbox-button-hidden,
        .glightbox-container .gnext.glightbox-button-hidden {
            display: none;
        }

/* --- Opt-out ("don't show again") tick box --- */
        .mod-glightbox-optout {
            position: absolute;
            z-index: 99999;
            left: 50%;
            transform: translateX(-50%);
            bottom: 15px;
            max-width: calc(100% - 30px);
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.32);
            color: #fff;
            font-size: 0.875rem;
            line-height: 1.2;
            cursor: pointer;
        }
        .mod-glightbox-optout input {
            margin: 0;
            cursor: pointer;
            /* The tick box inherits nothing from the site: it is on a backdrop
               of its own, and a themed control here would be a surprise. */
            accent-color: #fff;
        }
        .glightbox-closing .mod-glightbox-optout {
            opacity: 0 !important;
        }
        @media (min-width: 769px) {
            .mod-glightbox-optout:hover {
                background-color: rgba(0, 0, 0, 0.7);
            }
        }
        .glightbox-container.mod-glightbox-optout-open .gslider {
            box-sizing: border-box;
            padding-bottom: 60px;
        }
        .glightbox-container.mod-glightbox-optout-open .gslide-media {
            max-height: calc(100vh - 60px) !important;
        }

/* --- Prev/next arrow bounce animation --- */
        @keyframes mod-glightbox-bounce-next {
            0% { transform: translateX(0); }
            30% { transform: translateX(14px); }
            55% { transform: translateX(-4px); }
            75% { transform: translateX(2px); }
            100% { transform: translateX(0); }
        }
        @keyframes mod-glightbox-bounce-prev {
            0% { transform: translateX(0); }
            30% { transform: translateX(-14px); }
            55% { transform: translateX(4px); }
            75% { transform: translateX(-2px); }
            100% { transform: translateX(0); }
        }
        .glightbox-container .gslide .ginner-container.mod-glightbox-bounce-next {
            animation: mod-glightbox-bounce-next 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .glightbox-container .gslide .ginner-container.mod-glightbox-bounce-prev {
            animation: mod-glightbox-bounce-prev 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }
        /*
         * A visitor who has asked for less motion gets none of this. The click
         * still does nothing, which is what it did before the effect existed.
         */
        @media (prefers-reduced-motion: reduce) {
            .glightbox-container .gslide .ginner-container.mod-glightbox-bounce-next,
            .glightbox-container .gslide .ginner-container.mod-glightbox-bounce-prev {
                animation: none;
            }
        }

/* --- Filter bar + pagination --- */
        .mod-glightbox-filterbar {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 0 0 12px 0;
        }
        /*
         * Album mode hides the bar by setting the hidden PROPERTY, and the
         * rule above would otherwise win: an author display:flex beats the
         * browser stylesheet [hidden] { display: none } whatever the
         * specificity, because author declarations outrank user-agent ones.
         * Without this the covers view shows the bar with every tag in it.
         * The paginator and the album bar carry the same rule for the same
         * reason.
         */
        .mod-glightbox-filterbar[hidden] {
            display: none;
        }
        .mod-glightbox-filterbar button {
            border: 1px solid rgba(0, 0, 0, 0.25);
            background: transparent;
            color: inherit;
            border-radius: 16px;
            padding: 4px 14px;
            font-size: 0.9em;
            cursor: pointer;
            line-height: 1.4;
        }
        .mod-glightbox-filterbar button[aria-pressed="true"] {
            background: rgba(0, 0, 0, 0.8);
            border-color: rgba(0, 0, 0, 0.8);
            color: #fff;
        }
        /*
         * Album mode hides the buttons for tags the open album does not use,
         * again by setting the hidden PROPERTY -- and again that needs backing
         * up. The rule above puts no display on a button, but a site template
         * very often does (display: inline-flex on every button is common), and
         * any of those beats the [hidden] rule the browser itself carries. Two
         * classes and an attribute here outrank both that and the rule above.
         */
        .mod-glightbox-filterbar button[hidden] {
            display: none;
        }
        .glightbox-filter-hidden,
        .glightbox-page-hidden {
            display: none !important;
        }
        .mod-glightbox-paginator[hidden] {
            display: none;
        }
        .mod-glightbox-paginator {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            margin: 12px 0 0 0;
            list-style: none;
            padding: 0;
        }
        .mod-glightbox-paginator button {
            border: 1px solid rgba(0, 0, 0, 0.25);
            background: transparent;
            color: inherit;
            border-radius: 4px;
            min-width: 34px;
            padding: 4px 8px;
            cursor: pointer;
        }
        .mod-glightbox-paginator button[aria-current="page"] {
            background: rgba(0, 0, 0, 0.8);
            border-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            cursor: default;
        }

/* --- Album sub-grid furniture --- */
        .glightbox-album-hidden {
            display: none !important;
        }
        .mod-glightbox-albumbar[hidden] {
            display: none;
        }
        .mod-glightbox-albumbar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin: 0 0 12px 0;
        }
        .mod-glightbox-albumbar button {
            border: 1px solid rgba(0, 0, 0, 0.25);
            background: transparent;
            color: inherit;
            border-radius: 16px;
            padding: 4px 14px;
            font-size: 0.9em;
            cursor: pointer;
            line-height: 1.4;
        }
        .mod-glightbox-album-title {
            font-weight: 600;
        }

/* --- Grid captions --- */
        .glightbox-caption {
            font-size: 0.9em;
            line-height: 1.4;
        }
        .glightbox-caption-below {
            display: block;
            margin-top: 6px;
        }
        .glightbox-thumbnail {
            position: relative;
            display: block;
        }
        .glightbox-caption-overlay {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            padding: 8px 10px;
            color: #fff;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
            pointer-events: none;
        }
        .glightbox-caption-hover {
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        .glightbox-thumbnail:hover .glightbox-caption-hover,
        .glightbox-thumbnail:focus-visible .glightbox-caption-hover {
            opacity: 1;
        }