/*
 * Google Play promotion: the Android smart banner (.hipno-appbar) and the footer section
 * (.hipno-appfoot). Linked with ?v=<mtime> by template/hipnoonline/app-promo/boot.phtml.
 *
 * Colours come from the --hp-* tokens in hipno-theme.css, with literal fallbacks, so the
 * light and dark schemes both work. No slide or height animation: the banner is in normal
 * flow and revealed before first paint, and animating its size would be layout shift.
 */

/* ---- Guards: never visible unless boot.phtml said "browser" ---------------------------- */
.hipno-appbar[hidden],
.hipno-appfoot[hidden] { display: none !important; }
:root:not([data-hipno-promo="android"]) .hipno-appbar { display: none !important; }
:root:not([data-hipno-promo="android"]):not([data-hipno-promo="desktop"]) .hipno-appfoot { display: none !important; }
:root[data-hipno-promo="android"] .hipno-appfoot__qr { display: none; }

.hipno-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ---- Android smart banner -------------------------------------------------------------- */
.hipno-appbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 60;
    box-sizing: border-box;
    min-height: 68px;
    padding: 10px 12px 10px 4px;
    background: var(--hp-panel, #fff);
    color: var(--hp-text, #1a202c);
    border-bottom: 1px solid var(--hp-line, #e6ebf1);
    box-shadow: 0 1px 8px rgba(17, 19, 26, .06);
    font-family: inherit;
    line-height: 1.25;
    text-align: left;
}
.hipno-appbar__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin: 0 -8px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hp-dim, #5f6b7a);
    cursor: pointer;
}
.hipno-appbar__close:hover { color: var(--hp-text, #1a202c); }
.hipno-appbar__icon {
    flex: 0 0 auto;
    display: block;
    width: 48px; height: 48px;
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--hp-line, #e6ebf1);
}
.hipno-appbar__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hipno-appbar__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hp-text, #1a202c);
}
.hipno-appbar__sub {
    font-size: 13px;
    color: var(--hp-text, #1a202c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hipno-appbar__meta {
    font-size: 12px;
    color: var(--hp-dim, #5f6b7a);
}
.hipno-appbar__cta,
.hipno-appbar__cta:visited {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--hp-accent, #a8df00);
    color: var(--hp-on-accent, #11131a);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
}
.hipno-appbar__cta:hover,
.hipno-appbar__cta:focus { color: var(--hp-on-accent, #11131a); text-decoration: none; filter: brightness(.95); }

.hipno-appbar__close:focus-visible,
.hipno-appbar__cta:focus-visible,
.hipno-appfoot__badge:focus-visible {
    outline: 2px solid var(--hp-focus, #1a202c);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .hipno-appbar { animation: hipno-appbar-in .2s ease-out; }
}
@keyframes hipno-appbar-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Footer section -------------------------------------------------------------------- */
.hipno-appfoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    box-sizing: border-box;
    max-width: 960px;
    margin: 24px auto;
    padding: 24px 28px;
    border: 1px solid var(--hp-line, #e6ebf1);
    border-radius: 16px;
    background: var(--hp-bg-soft, #f2f5f8);
    color: var(--hp-text, #1a202c);
    text-align: left;
}
.hipno-appfoot__body { flex: 1 1 320px; min-width: 0; }
.hipno-appfoot .hipno-appfoot__title {
    margin: 0 0 6px;
    padding: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--hp-text, #1a202c);
}
.hipno-appfoot__lead {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--hp-text, #1a202c);
}
.hipno-appfoot__badge {
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
}
.hipno-appfoot__badge img {
    display: block;
    width: 155px; height: 60px;
    /* The official artwork carries its own transparent padding; pull it flush with the text. */
    margin-left: -10px;
}
.hipno-appfoot__legal {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--hp-dim, #5f6b7a);
}
.hipno-appfoot__qr {
    flex: 0 0 auto;
    margin: 0;
    text-align: center;
}
.hipno-appfoot__qr img {
    display: block;
    box-sizing: content-box;
    width: 132px; height: 132px;
    padding: 8px;
    border-radius: 12px;
    background: #fff; /* stays white in dark mode, so cameras can read it */
    box-shadow: 0 0 0 1px var(--hp-line, #e6ebf1);
}
.hipno-appfoot__qr figcaption {
    margin-top: 8px;
    font-size: 12px;
    color: var(--hp-dim, #5f6b7a);
}

@media (max-width: 640px) {
    .hipno-appfoot {
        flex-direction: column;
        justify-content: center;
        margin: 16px 12px;
        padding: 20px 16px;
        text-align: center;
    }
    .hipno-appfoot__body { flex-basis: auto; }
    .hipno-appfoot__badge img { margin-left: 0; }
}