/*
 * Access Gate System front end styles.
 *
 * Mobile first. Every value comes from a token in tokens.css so a site can be
 * restyled without touching this file. No imports, no web fonts, no images.
 *
 * The overlay ships with the hidden attribute set. It is revealed by ags.js
 * after the readable ags_ok cookie has been checked, so the HTML that reaches
 * the page cache is the same for every visitor.
 */

/* Hidden means hidden, including for elements with a display rule below. */
.ags-overlay[hidden],
.ags-lock[hidden],
.ags-overlay [hidden],
.ags-lock [hidden],
.ags-capture [hidden] {
    display: none !important;
}

body.ags-scroll-locked { overflow: hidden; }

.ags-overlay,
.ags-lock,
.ags-capture {
    box-sizing: border-box;
    font-family: var(--ags-font-body);
    color: var(--ags-text);
    line-height: 1.5;
}

.ags-overlay *, .ags-lock *, .ags-capture * { box-sizing: inherit; }

.ags-title {
    margin: 0 0 12px;
    font-family: var(--ags-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ags-text);
}

.ags-body { margin: 0 0 18px; font-size: 0.9375rem; color: var(--ags-text-muted); }

.ags-body a, .ags-check__text a, .ags-foot a { color: var(--ags-accent-hi); }

.ags-badge {
    display: inline-block;
    margin: 0 0 14px;
    padding: 4px 10px;
    border: 1px solid var(--ags-border-accent);
    border-radius: var(--ags-radius-sm);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ags-accent-hi);
}

.ags-logo {
    display: block;
    max-width: 180px;
    max-height: 64px;
    margin: 0 0 18px;
    height: auto;
}

.ags-foot { margin: 18px 0 0; font-size: 0.75rem; color: var(--ags-text-faint); }

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

.ags-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Every control clears the 44px touch target on a phone. */
.ags-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--ags-radius-sm);
    font-family: var(--ags-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    color: var(--ags-btn-text);
    background: var(--ags-btn-grad);
    cursor: pointer;
}

.ags-btn:hover { filter: brightness(1.08); }

.ags-btn--ghost { background: transparent; border: 1px solid var(--ags-border); color: var(--ags-text-muted); }

.ags-btn--slim {
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 9px 16px;
    font-size: 0.8125rem;
}

.ags-leave {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--ags-text-faint);
    text-decoration: underline;
}

.ags-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--ags-radius-sm);
    font-size: 20px;
    line-height: 1;
    color: var(--ags-text-faint);
    background: transparent;
    cursor: pointer;
}

.ags-close:hover { color: var(--ags-text); }

.ags-btn:focus-visible, .ags-close:focus-visible, .ags-leave:focus-visible, .ags-input:focus-visible, .ags-select:focus-visible, .ags-check input:focus-visible { outline: 2px solid var(--ags-accent-hi); outline-offset: 2px; }

.ags-overlay--overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ags-overlay-z);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 14px;
    overflow-y: auto;
    background: rgba(3, 7, 18, 0.88);
}

.ags-overlay__card {
    position: relative;
    width: 100%;
    max-width: var(--ags-max-width);
    margin: auto;
    padding: 26px 20px;
    border: 1px solid var(--ags-border);
    border-radius: var(--ags-radius);
    background: var(--ags-surface);
    animation: ags-in 160ms ease-out both;
}

@keyframes ags-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/*
 * The markup is printed on wp_footer, so it is the last node in the body. A
 * sticky element is never pulled above its natural flow position, which left
 * the bar at the foot of the page. Fixed pins it to the top instead. The
 * script measures the bar and pushes the page down by that height.
 */
.ags-overlay--notice {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--ags-overlay-z);
    display: block;
    border-bottom: 1px solid var(--ags-border-accent);
    background: var(--ags-bg);
}

body.ags-notice-open { padding-top: var(--ags-notice-height, 0px); }

.ags-notice {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 56px 10px 16px;
    position: relative;
}

.ags-notice__body { margin: 0; font-size: 0.8125rem; color: var(--ags-text-muted); }

/* A refused dismissal takes the full width of the bar at every breakpoint. */
.ags-notice .ags-error { flex: 1 0 100%; margin: 0; }

.ags-field { margin: 0 0 14px; }

.ags-label {
    display: block;
    margin: 0 0 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ags-text-muted);
}

.ags-input,
.ags-select {
    width: 100%;
    min-height: 44px;
    padding: 12px;
    border: 1px solid var(--ags-border);
    border-radius: var(--ags-radius-sm);
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--ags-text);
    background: var(--ags-bg);
}

.ags-dob { margin: 0 0 14px; padding: 0; border: 0; }

.ags-dob__legend {
    padding: 0;
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ags-text-muted);
}

.ags-dob__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

/* The placeholder option carries the field name, so the three selects need
   room for it on a narrow phone. */
.ags-dob .ags-select { padding: 12px 4px 12px 8px; font-size: 0.8125rem; }

.ags-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: var(--ags-text-muted);
    cursor: pointer;
}

.ags-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--ags-accent);
}

.ags-disclosure { margin: -6px 0 14px 28px; font-size: 0.6875rem; color: var(--ags-text-faint); }

.ags-error {
    margin: 0 0 12px;
    padding: 9px 11px;
    border: 1px solid var(--ags-border-accent);
    border-radius: var(--ags-radius-sm);
    font-size: 0.8125rem;
    color: var(--ags-text);
    background: rgba(0, 0, 0, 0.25);
}

.ags-attest__actions { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }

.ags-attest.is-busy .ags-btn { opacity: 0.6; pointer-events: none; }

.ags-lock {
    position: fixed;
    inset: 0;
    z-index: var(--ags-overlay-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    background: rgba(3, 7, 18, 0.86);
}

.ags-lock__card {
    position: relative;
    width: 100%;
    max-width: 460px;
    padding: 24px 20px;
    border: 1px solid var(--ags-border);
    border-radius: var(--ags-radius);
    background: var(--ags-surface);
    animation: ags-in 160ms ease-out both;
}

.ags-lock__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.ags-price-hidden {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ags-text-faint);
}

.ags-capture {
    max-width: var(--ags-max-width);
    padding: 18px;
    border: 1px solid var(--ags-border);
    border-radius: var(--ags-radius);
    background: var(--ags-surface);
}

.ags-capture__title {
    margin: 0 0 12px;
    font-family: var(--ags-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ags-text);
}

.ags-capture__done { font-size: 0.875rem; color: var(--ags-text-muted); }

.ags-capture__done-title { margin: 0 0 6px; font-weight: 700; color: var(--ags-text); }

.ags-capture.is-busy .ags-btn { opacity: 0.6; pointer-events: none; }

@media (min-width: 600px) {
    .ags-overlay__card {
        padding: var(--ags-pad-y) var(--ags-pad-x);
    }

    .ags-title {
        font-size: 1.625rem;
    }

    .ags-notice {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .ags-attest .ags-btn,
    .ags-capture .ags-btn {
        width: auto;
        min-width: 220px;
    }

    .ags-lock__actions {
        flex-direction: row;
    }

    .ags-lock__actions .ags-btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ags-overlay__card,
    .ags-lock__card {
        animation: none;
    }

    .ags-btn {
        transition: none;
    }
}