/* PWA install modal.
   Follows the project's overlay conventions (see mobile_nav.js): shown/hidden
   via the [hidden] attribute, centered overlay + backdrop, design tokens from
   base.css. Only loaded on club pages. */

/* The install entry is a <button>, which picks up the base button's horizontal
   padding. Reset it so the pill stays square like the icon-only <a> pills (club
   manager / ticket) it sits next to. */
.pwa-install-btn {
    padding: 0;
}

/* The install + notifications pills start hidden and are only revealed by pwa.js
   when applicable. Their .header-pill-wrapper, however, stays in the DOM, so as
   an empty flex item it would still contribute the header row's `gap` on both
   sides -- leaving phantom spacing (up to 3x --pill-gap) after the last visible
   pill. Collapse the wrapper whenever its pill is hidden so it produces no gap;
   pwa.js clearing the button's [hidden] makes it reappear automatically.
   (:has() is supported by all evergreen browsers; older ones simply keep the
   previous, slightly-too-wide spacing -- a harmless fallback.) */
.header-pill-wrapper:has(> .js-pwa-install[hidden]),
.header-pill-wrapper:has(> .js-pwa-push[hidden]) {
    display: none;
}

.pwa-modal {
    position: fixed;
    inset: 0;
    z-index: 1200; /* above toast (1100) and the header (1020) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pill-gap);
}

.pwa-modal[hidden] {
    /* [hidden] would be overridden by display:flex above, so re-assert it. */
    display: none;
}

.pwa-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.pwa-modal__panel {
    position: relative; /* sits above the backdrop */
    background: var(--white-bg);
    border-radius: var(--input-border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: var(--large-gap) var(--medium-gap);
    width: min(92vw, 440px);
    max-height: 90dvh;
    overflow-y: auto;
}

.pwa-modal__panel:focus {
    outline: none; /* focused programmatically as a fallback; no focus ring */
}

.pwa-modal__close {
    position: absolute;
    top: var(--pill-gap);
    right: var(--pill-gap);
    height: var(--medium-gap);
    width: var(--medium-gap);
    min-width: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 50%;
}

.pwa-modal__close:hover {
    background: var(--gray-bg);
}

.pwa-modal__title {
    /* keep the heading clear of the close button */
    margin: 0 var(--large-gap) var(--pill-gap) 0;
    padding: 0;
}

.pwa-modal__intro {
    margin: 0 0 var(--medium-gap);
}

.pwa-branch {
    /*margin-bottom: var(--pill-gap);*/
}

#pwa-install-action {
    width: 100%;
}

/* Numbered instruction steps */
.pwa-steps {
    margin: 0 0 var(--medium-gap) 0;
    padding: 0;
    list-style: none;
    counter-reset: pwa-step;
    display: flex;
    flex-direction: column;
    gap: var(--pill-gap);
}

.pwa-steps > li {
    counter-increment: pwa-step;
    /* Normal text flow (NOT flex) so inline <strong>/<svg> and the text wrap as
       one paragraph; the number sits in a fixed left gutter. */
    position: relative;
    padding-left: calc(2.4rem + var(--pill-gap));
    line-height: 1.5;
}

    .pwa-steps > li::before {
        content: counter(pwa-step);
        position: absolute;
        left: 0;
        top: 0.1rem; /* align with the first line of text */
        width: 2.4rem;
        height: 2.4rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--primary-color-2);
        background: linear-gradient(135deg,var(--primary-color-2) 15%, var(--primary-color-1) 50%, var(--primary-color-3) 100%);
        color: #fff;
        font-weight: 700;
        font-size: 1.4rem;
    }

/* Inline platform glyphs (iOS share / add-to-home) shown within the step text */
.pwa-step-icon {
    width: 1.8rem;
    height: 1.8rem;
    vertical-align: -0.4rem;
    color: var(--text-color);
}

/* Desktop branch: QR code + explanation */
.pwa-qr {
    display: flex;
    justify-content: center;
    margin-bottom: var(--medium-gap);
}

.pwa-qr__img {
    width: 18rem;
    height: 18rem;
    padding: var(--small-gap);
    background: #fff;
    border: 1px solid var(--dark-gray-bg);
    border-radius: var(--input-border-radius);
}

.pwa-qr__text {
    margin: 0;
}

.pwa-desktop-install {
    width: 100%;
    margin-top: var(--medium-gap);
}

.pwa-modal__hint {
    font-size: 1.4rem;
    color: var(--text-color);
    opacity: 0.85;
    margin: var(--pill-gap) 0 0;
    line-height: 1.4;
}

.pwa-modal__note {
    font-size: 1.3rem;
    opacity: 0.7;
    margin: var(--medium-gap) 0 0;
    padding-top: var(--pill-gap);
    border-top: 1px solid var(--dark-gray-bg);
}

/* ------------------------------------------------------------------ */
/* Web Push opt-in (Phase 3): bottom card + settings dialog states.   */
/* Only ever revealed inside the INSTALLED app (pwa.js checks         */
/* standalone mode); in browser tabs everything below stays [hidden]. */

/* Bottom opt-in card, floating above the content like a toast. */
.pwa-push-card {
    position: fixed;
    left: var(--pill-gap);
    right: var(--pill-gap);
    bottom: var(--pill-gap);
    z-index: 1150; /* above header (1020), below the modals (1200) */
    margin: 0 auto;
    max-width: 440px;
    display: flex;
    align-items: flex-start;
    gap: var(--pill-gap);
    background: var(--white-bg);
    border-radius: var(--input-border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: var(--medium-gap);
}

.pwa-push-card[hidden] {
    /* re-assert: display:flex above would beat the [hidden] default */
    display: none;
}

.pwa-push-card__icon {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.pwa-push-card__text {
    flex: 1;
    line-height: 1.4;
}

    .pwa-push-card__text p {
        margin: 0.4rem 0 0;
        font-size: 1.4rem;
    }

.pwa-push-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--pill-gap);
    flex-shrink: 0;
}

/* Dialog state blocks (off / on / blocked) -- one visible at a time. */
.pwa-push-state p {
    margin: 0 0 var(--pill-gap);
}

.pwa-push-action {
    /*width: 100%;*/
}