html,
body {
    height: 100%;
}

:root {
    --yellow: #f3d315;
    --yellow-dark: #e0c010;
    --black: #000000;
    --text: #000000;
    --muted: #222222;
    /* default SALE!/banner colors; can be overridden per-request via inline style */
    --sale-text-color: #22c55e;
    --sale-glow-color: #22c55e;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--yellow);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--black);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

.top-bar {
    background: var(--black);
    color: var(--yellow);
    text-align: center;
    /* Taller banner for more breathing room around the SALE + animation text */
    padding: 0.7rem 1.25rem;
    font-size: 0.85rem;
}

.top-bar p {
    display: flex;
    align-items: center;
    /* keep SALE! and rotating text vertically aligned */
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
}

.site-header {
    background: var(--yellow);
    border-bottom: 1px solid var(--black);
}

.site-chrome {
    /* Default: non-sticky for smaller screens where vertical space is tight. */
    flex: 0 0 auto;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--black);
}

.logo-img {
    display: block;
    height: 120px;
    /* larger to better match original header logo */
    width: auto;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.main-nav-toggle-icon {
    display: block;
    height: 20px;
    width: auto;
    /* Default state: black icon on black button (button background handles yellow) */
    filter: brightness(0);
}

.main-nav-toggle:hover .main-nav-toggle-icon {
    /* On hover, switch to yellow icon on yellow background (still visible via glow) */
    filter: invert(83%) sepia(76%) saturate(600%) hue-rotate(360deg) brightness(100%) contrast(102%);
}

.main-nav-toggle {
    display: none;
    /* hidden on large screens; shown via media query on small screens */
    /* Default: yellow background with black icon */
    background: var(--yellow);
    color: var(--black);
}

.main-nav-toggle:hover {
    /* Hover: black background with yellow icon */
    background: var(--black);
    color: var(--yellow);
}

.main-nav-links {
    display: flex;
    align-items: center;
}

.main-nav a,
.main-nav-link,
.link-button {
    display: inline-flex;
    align-items: center;
    margin-left: 1rem;
    font-size: 0.95rem;
    text-transform: none;
    line-height: 1;
}

/* Header nav links styled as buttons */
.main-nav a,
.main-nav-link,
.main-nav .link-button,
.main-nav-toggle {
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    border: 1px solid var(--black);
    font-weight: 600;
}

.main-nav a:hover,
.main-nav .link-button:hover {
    background: var(--black);
    color: var(--yellow);
    text-decoration: none;
    /* override global a:hover underline */
}

/* Active header nav link: black background, yellow text, no hover change */
.main-nav-link--active,
.main-nav-link--active:hover {
    background: var(--black);
    color: var(--yellow);
    cursor: default;
}

.nav-login {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    /* base padding */
    border-radius: 4px;
    border: 1px solid var(--black);
    /* Default: yellow background with black text/icon */
    background: var(--yellow);
    color: var(--black);
    font-weight: 600;
}

.nav-user-icon {
    display: block;
    height: 18px;
    /* slightly smaller so the button height matches neighbors */
    width: auto;
    /* Default state: black icon on yellow button */
    filter: brightness(0);
    position: static;
    /* let flexbox center it vertically */
}

/* When on the login page, treat the login button as the active nav item:
   black background, yellow text/icon, and no hover color flip. */
.nav-login.main-nav-link--active,
.nav-login.main-nav-link--active:hover {
    background: var(--black);
    color: var(--yellow);
}

.nav-login.main-nav-link--active .nav-user-icon {
    filter: invert(83%) sepia(76%) saturate(600%) hue-rotate(360deg) brightness(100%) contrast(102%);
}

/* Login button uses same vertical alignment as other nav buttons */
.nav-login {
    position: static;
    top: 0;
}

/* Override shared nav button padding so login button is a bit smaller */
.main-nav a.nav-login {
    padding: 0.3rem 0.75rem;
}

/* On hover, swap to yellow icon on black background like other nav items */
.nav-login:hover .nav-user-icon {
    filter: invert(83%) sepia(76%) saturate(600%) hue-rotate(360deg) brightness(100%) contrast(102%);
}

.link-button {
    background: none;
    border: none;
    color: var(--black);
    cursor: pointer;
    padding: 0;
}

.page-main {
    /* Small bottom padding so content doesn't butt directly into the footer,
       but not enough to visually float the footer above the viewport edge. */
    padding: 0 0 1.25rem 0;
    flex: 1 0 auto;
}

.page-title {
    text-align: center;
    margin-bottom: 2rem;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    justify-items: center;
}

.plans-grid+.plans-grid {
    margin-top: 2rem;
}

.plan-card {
    background: var(--yellow);
    border: 2px solid var(--black);
    padding: 1.5rem;
    text-align: center;
    width: 320px;
    position: relative;
}

.plan-sale-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    border: 1px solid #16a34a;
    text-transform: uppercase;
    background: #16a34a;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 600;
}

.plan-logo {
    width: 220px;
    height: 220px;
    margin: 1.5rem auto 0.75rem auto;
    background-image: url("/static/images/gda_overlay.webp");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.plan-discount {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    background: var(--black);
    color: #ffffff;
    border-radius: 4px;
    font-weight: 600;
}

.plan-name {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.plan-button:hover {
    background: #111111;
}

.plan-button.plan-button-disabled {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fffbeb;
    cursor: default;
}

.btn-primary:hover {
    background: #111111;
}

.plan-price-row {
    margin-top: 1rem;
    font-size: 0.95rem;
}

.plan-price-old {
    text-decoration: line-through;
    margin-right: 0.5rem;
}

.plan-price-new {
    font-weight: 700;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    margin-bottom: 3rem;
}

.hero-text h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.top-bar-glow-text {
    font-weight: 600;
    color: var(--sale-text-color);
    /* neon-ish glow based on current sale color */
    text-shadow: 0 0 4px var(--sale-glow-color), 0 0 8px var(--sale-glow-color),
        0 0 16px var(--sale-glow-color);
    animation: top-bar-glow 1.6s ease-in-out infinite alternate;
}

.top-bar-extra {
    margin-left: 0.25rem;
    font-weight: 600;
    color: var(--sale-text-color);
    /* use currentColor so the glow follows the configured sale color */
    text-shadow: 0 0 4px var(--sale-glow-color), 0 0 8px var(--sale-glow-color),
        0 0 16px var(--sale-glow-color);
}

.top-bar-rotating-text {
    display: inline-block;
    width: 20em;
    /* ensure container has width */
    height: 1.2em;
    position: relative;
    top: 0px;
    overflow: hidden;
    margin-left: 0.35rem;
    vertical-align: baseline;
    text-align: center;
    /* if text wraps on tiny screens, keep it centered */
}

.top-bar-rotating-line {
    position: absolute;
    left: 0;
    top: 50%;
    /* vertically center within the rotating text container */
    display: block;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
    margin-left: -15px;
    font-weight: 500;
}

.top-bar-rotating-line-1 {
    animation: top-bar-roll 7s linear infinite;
}

.top-bar-rotating-line-2 {
    animation: top-bar-roll 7s linear infinite;
    animation-delay: 4s;
}

@keyframes top-bar-roll {
    0% {
        font-size: 0;
        opacity: 0;
        margin-left: -15px;
        transform: translateY(-50%) rotate(-12deg);
    }

    5% {
        font-size: inherit;
        opacity: 1;
        margin-left: 0;
        transform: translateY(-50%) rotate(0deg);
    }

    30% {
        font-size: inherit;
        opacity: 1;
        margin-left: 0;
        transform: translateY(-50%) rotate(0deg);
    }

    60% {
        font-size: 0;
        opacity: 0;
        margin-left: 10px;
        transform: translateY(-50%) rotate(8deg);
    }

    100% {
        font-size: 0;
        opacity: 0;
        margin-left: -15px;
        transform: translateY(-50%) rotate(-12deg);
    }
}

@keyframes top-bar-glow {
    from {
        text-shadow: 0 0 2px var(--sale-glow-color), 0 0 4px var(--sale-glow-color),
            0 0 8px var(--sale-glow-color);
    }

    to {
        text-shadow: 0 0 4px var(--sale-glow-color), 0 0 8px var(--sale-glow-color),
            0 0 18px var(--sale-glow-color);
    }
}

/* Base button style */
.button,
.hero-button,
.plan-button,
.btn-primary,
.admin-users-table .hero-button,
.admin-search-form .hero-button {
    display: inline-block;
    padding: 0.5rem 1.4rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--black);
}

/* Yellow background, black text */
.button--yellow-on-black,
.hero-button {
    background: var(--yellow);
    color: var(--black);
}

/* Black background, yellow text */
.button--black-on-yellow,
.plan-button,
.btn-primary,
.admin-users-table .hero-button,
.admin-search-form .hero-button {
    background: var(--black);
    color: var(--yellow);
}

.hero-button {
    margin-top: 1rem;
    text-decoration: none;
}

/* Ensure button-style links don't show underline on hover */
a.hero-button:hover,
.hero-button:hover {
    text-decoration: none;
}

.hero-button:disabled {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fffbeb;
    cursor: not-allowed;
}

.hero-graphic {
    border: 3px solid var(--black);
    height: 220px;
}

.admin-purge-button {
    background: var(--black);
    color: var(--yellow);
}

.feature-row {
    border: 2px solid var(--black);
    margin-bottom: 1.5rem;
    min-height: 450px;
    /* significantly taller for more visual impact */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    /* make the background span full viewport width even inside the container */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.feature-row:first-of-type {
    /* pull the first hero row up under the header and remove the top border line */
    margin-top: -1.5rem;
    border-top: 0;
}

.feature-row::before {
    /* blue glow in bottom-right corner */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(at bottom right,
            rgba(26, 71, 98, 0.55) 0%,
            transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.feature-row::after {
    /* subtle GDA overlay watermark bottom-right */
    content: "";
    position: absolute;
    bottom: -2%;
    right: -2%;
    width: 35%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    background-image: url("/static/images/gda_overlay.webp");
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    opacity: 0.8;
    pointer-events: none;
    z-index: 1;
}

.feature-row-inner {
    padding: 3.5rem 1.5rem;
}

.feature-row-text {
    max-width: 420px;
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    padding: 1.5rem;
    position: relative;
    z-index: 2;
    /* above gradient + overlay */
}

.feature-row-text h2 {
    margin: 0 0 0.75rem 0;
}

.feature-row-text p {
    margin: 0 0 0.75rem 0;
}

.feature-visualize {
    background-image: url("/static/images/visualize.png");
}

.feature-double-cloud {
    background-image: url("/static/images/double_cloud.png");
}

.feature-double-cloud-flags {
    background-image: url("/static/images/double_cloud_flags.png");
}

.feature-algo-painter {
    background-image: url("/static/images/algo_painter.png");
}

.feature-bottom-top-breaker {
    background-image: url("/static/images/bottom_top_trend_breakers.png");
}

.feature-dashboard {
    background-image: url("/static/images/dashboard.png");
}

/* Feature hero sections – zoomed out and slightly biased toward the top
   so more of each screenshot is visible while blending into the black theme. */
.feature-visualize,
.feature-double-cloud,
.feature-double-cloud-flags,
.feature-algo-painter,
.feature-bottom-top-breaker,
.feature-dashboard {
    background-position: center 25%;
    background-size: 40%;
    background-color: #000000;
}

.cta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 2px solid var(--black);
    border-bottom: 2px solid var(--black);
    padding: 0.75rem 1rem;
    margin-top: 1rem;
}

.cta-strip a {
    font-weight: 600;
}

.members-cta {
    margin-top: 2rem;
    text-align: center;
}

.home-cta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.home-cta-card {
    background: var(--black);
    color: var(--yellow);
    padding: 1.5rem;
    border-radius: 4px;
    text-align: center;
    border: 2px solid var(--black);
}

.home-cta-title {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.home-cta-sale {
    color: var(--sale-text-color);
    /* match neon glow used in top-bar */
    text-shadow: 0 0 4px var(--sale-glow-color), 0 0 8px var(--sale-glow-color),
        0 0 16px var(--sale-glow-color);
}

.home-cta-subtitle {
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
}

/* "All Together" section */
.all-together {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    margin-top: 3rem;
    padding: 2rem 2.5rem;
}

.all-together-text h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.all-together-text p {
    margin: 0 0 0.75rem 0;
}

.all-together-cta {
    margin-top: 1.5rem;
    background: var(--black);
    color: var(--yellow);
    border-color: var(--black);
}

.members-subscribe-button {
    background: var(--yellow);
    color: var(--black);
    border-color: var(--black);
}

.all-together-image img {
    display: block;
    width: 100%;
    max-width: 420px;
    border: 2px solid var(--black);
    cursor: pointer;
}

/* Video section */
.video-section {
    margin-top: 3rem;
}

.video-section h2 {
    margin: 0 0 0.5rem 0;
}

.video-subtitle {
    margin: 0 0 1.5rem 0;
    font-size: 0.95rem;
}

.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Modal for enlarged image */
.image-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 900;
}

.image-modal-inner img {
    max-width: 95vw;
    max-height: 95vh;
    border: 3px solid var(--yellow);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}

.image-modal.open {
    display: flex;
}

@media (max-width: 900px) {
    .container {
        padding: 1rem;
    }

    .header-inner {
        flex-direction: row;
        /* keep logo on left, menu icon on right */
        align-items: center;
        gap: 0.5rem;
    }

    .logo-img {
        height: 96px;
    }

    .main-nav {
        flex-direction: row;
        align-items: center;
    }

    .main-nav-toggle {
        display: inline-flex;
        margin-top: 0;
    }

    .main-nav-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-top: 0.5rem;
    }

    .main-nav-links.is-open {
        display: flex;
    }

    .main-nav-links a,
    .main-nav-links .link-button {
        margin: 0 0 0.4rem 0;
        justify-content: center;
        width: 100%;
    }

    .feature-row-inner {
        padding: 2.5rem 1.25rem;
    }

    .feature-row-text {
        max-width: 100%;
    }

    .home-cta-grid {
        grid-template-columns: 1fr;
    }

    .all-together {
        grid-template-columns: 1fr;
        padding: 1.75rem 1.5rem;
    }

    .all-together-image {
        justify-self: center;
    }

    .cookie-banner-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .top-bar {
        font-size: 0.75rem;
        padding: 0.55rem 1rem;
    }

    .logo-img {
        height: 80px;
    }

    .feature-row {
        min-height: 360px;
    }

    .page-main {
        padding-bottom: 1rem;
    }
}

/* Extra-tight layout tweaks for very small screens (e.g. iPhone Mini) */
@media (max-width: 430px) {

    /* Stack SALE! + rotating text vertically and center them so wrapped
       animation text is always centered on tiny screens. */
    .top-bar p {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    /* On very small screens, simplify the banner: show both messages
       as static, centered text instead of animating/overlapping. */
    .top-bar-rotating-text {
        width: 100%;
        margin-left: 0;
        height: auto;
        text-align: center;
        position: static;
        overflow: visible;
    }

    .top-bar-rotating-line {
        position: static;
        display: block;
        font-size: inherit;
        opacity: 1;
        margin-left: 0;
        animation: none;
        transform: none;
    }

    /* On very small screens, make sure tooltips fit fully within the viewport. */
    .help-icon::after,
    .footer-version::after {
        max-width: calc(100vw - 2rem);
        min-width: auto;
    }

    /* Account page TradingView help tooltip: open to the RIGHT of the icon
       on tiny screens so the left edge never gets clipped. */
    .account-page .help-icon::after {
        left: 0;
        right: auto;
        transform: none;
    }

    /* Header: keep logo + menu icon on one line, but have the menu links
       drop down in a vertical list *below* the menu button when opened. */
    .main-nav {
        flex-direction: column;
        align-items: flex-end;
    }

    .main-nav-links {
        align-items: stretch;
        width: 100%;
        margin-top: 0.5rem;
    }

    .admin-nav-link {
        padding: 0.3rem 0.7rem;
        font-size: 0.8rem;
    }

    .card {
        padding: 1.1rem;
    }

    .card h2,
    .card h3 {
        font-size: 1.2rem;
    }

    .admin-users-table tbody td::before {
        min-width: 90px;
    }

    /* Make sure admin tables and coupon tables never exceed the viewport width */
    .admin-users-table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    .admin-users-table th,
    .admin-users-table td {
        word-break: break-word;
        /* allow long values (like emails or coupon codes) to wrap instead of pushing out */
    }
}

/* Slightly wider breakpoint so narrow desktop windows behave like phones. */
@media (max-width: 600px) {
    .footer-version::after {
        position: fixed !important;
        bottom: 4rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 90vw !important;
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

.site-footer {
    border-top: 2px solid var(--black);
    padding-top: 2rem;
    /* Keep the main footer content tighter so it visually stops above the
       bottom banner strip instead of running all the way down. */
    padding-bottom: 1.2rem;
    /* footer sits at the bottom of the viewport on short pages via flex layout */
    margin-top: 0;
    background: var(--black);
    color: var(--yellow);
    flex-shrink: 0;
}

.site-footer a {
    color: var(--yellow);
}

.site-footer .link-button {
    color: var(--yellow);
    display: inline;
    margin-left: 0;
    font-size: inherit;
    line-height: inherit;
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
}

.footer-col h2,
.footer-col h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.footer-col p {
    margin: 0.15rem 0;
}

.footer-sale {
    color: var(--sale-text-color);
    font-weight: 600;
    text-shadow: 0 0 4px var(--sale-glow-color), 0 0 8px var(--sale-glow-color),
        0 0 16px var(--sale-glow-color);
}

.footer-bottom {
    border-top: 1px solid #333333;
    margin-top: 0;
    padding: 0;
    font-size: 0.75rem;
    /* Dark green bottom banner for contact / social links */
    background: #091a09;
    /* Float at the very bottom of the viewport on all pages */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
}

/* When Stripe test mode is enabled, highlight the bottom banner in red so it's
   obvious that the environment is non-production. */
.footer-bottom--test {
    background: #7f1d1d;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 26px;
}

.footer-version {
    margin-left: 0.75rem;
    font-size: 0.8rem;
    position: relative;
}

.footer-version-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.footer-version-link:hover {
    text-decoration: none;
}

.footer-version::after {
    content: attr(data-version-message);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #111111;
    color: var(--yellow);
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: normal;
    min-width: 180px;
    max-width: 320px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 60;
    display: none;
}

.footer-version.is-open::after {
    display: block;
}

.footer-version-icon {
    margin-right: 0.25rem;
    vertical-align: -1px;
    color: var(--yellow);
    filter: drop-shadow(0 0 2px rgba(234, 179, 8, 0.9)) drop-shadow(0 0 4px rgba(234, 179, 8, 0.6));
}

/* Always show the coupon duration months field, even if inline JS/styles disagree */
#duration_months_field {
    display: block !important;
}

.tv-username-set {
    color: #16a34a;
}

.tv-access-true {
    color: #16a34a;
    font-weight: 600;
}

.tv-access-false {
    color: #b91c1c;
    font-weight: 600;
}

.cancel-true {
    color: #b91c1c;
    font-weight: 600;
}

.cancel-false {
    color: #16a34a;
    font-weight: 600;
}

.sub-status {
    font-weight: 600;
}

.sub-status-none {
    color: #b91c1c;
    /* red */
}

.sub-status-trialing {
    color: #ea580c;
    /* orange-ish */
}

.sub-status-active {
    color: #16a34a;
    /* green */
}

.sub-status-problem {
    color: #b91c1c;
    /* red for problem states */
}

.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.35rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--black);
    background: var(--black);
    color: var(--yellow);
    font-size: 0.7rem;
    cursor: help;
    position: relative;
}

.help-icon--yellow {
    background: var(--yellow);
    color: var(--black);
}

.help-icon::after {
    content: attr(data-help);
    position: absolute;
    top: 130%;
    left: 50%;
    transform: translateX(-50%);
    background: #111111;
    color: var(--yellow);
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: normal;
    min-width: 160px;
    max-width: 280px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 50;
    display: none;
}

.help-icon.is-open::after {
    display: block;
}

.footer-bottom .container {
    padding-top: 0;
    padding-bottom: 0;
}

.footer-bottom-inner p {
    margin: 0;
    line-height: 1.1;
}

.footer-bottom a {
    color: var(--yellow);
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.footer-social-link svg {
    fill: var(--yellow);
    display: block;
    width: 16px;
    height: 16px;
}

.footer-social-link+.footer-social-link {
    margin-left: 1.25rem;
}

.inline {
    display: inline;
}

hr {
    border: none;
    border-top: 2px solid var(--black);
    margin: 2rem 0;
}

.card,
.home-cta-card {
    border-radius: 4px;
    border: 2px solid var(--black);
    padding: 1.5rem;
}

.card {
    background: var(--yellow);
    margin-bottom: 1.5rem;
}

.home-cta-card {
    background: var(--black);
    color: var(--yellow);
    text-align: center;
}

.card table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.card th,
.card td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #111111;
    vertical-align: middle;
}

.card thead th {
    background: #111111;
    color: var(--yellow);
    font-weight: 600;
}

.card tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.05);
}

.card tbody tr:hover {
    background: rgba(0, 0, 0, 0.08);
}

.card td:last-child {
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-test {
    color: #f97316;
}

.admin-save-cell {
    text-align: left;
    vertical-align: middle;
}

.admin-save-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.admin-tv-access-label {
    white-space: nowrap;
}

.admin-users-table td {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8rem;
    line-height: 1;
}

.admin-users-table td.admin-save-cell {
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
}

.admin-users-mini-table tbody td {
    background: var(--yellow);
    color: var(--black);
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
}

@media (max-width: 900px) {

    /* Stack large admin tables vertically on small screens so no horizontal scrolling is needed.
       Keep the small two-column mini tables in their normal layout. */
    .admin-users-table:not(.admin-users-mini-table) {
        width: 100%;
    }

    .admin-users-table:not(.admin-users-mini-table) thead {
        display: none;
    }

    .admin-users-table:not(.admin-users-mini-table) tbody tr {
        display: block;
        border: 1px solid #111111;
        margin-bottom: 0.75rem;
        padding: 0.35rem 0.5rem;
        background: rgba(0, 0, 0, 0.02);
    }

    .admin-users-table:not(.admin-users-mini-table) tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.18rem 0;
        border-bottom: 0;
        white-space: normal;
        font-size: 0.8rem;
    }

    .admin-users-table:not(.admin-users-mini-table) tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 0.5rem;
        min-width: 110px;
    }

    .admin-users-table:not(.admin-users-mini-table) tbody td:last-child {
        padding-bottom: 0.1rem;
    }
}

.copy-text-button {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.copy-text-button:hover {
    text-decoration: underline;
}

.copy-hint {
    margin-left: 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.admin-users-mini-table th:first-child,
.admin-users-mini-table td:first-child {
    width: 65%;
}

.admin-users-table .hero-button {
    padding: 0.15rem 0.8rem;
    font-size: 0.78rem;
    margin-top: 0;
    background: var(--black);
    color: var(--yellow);
    border-color: var(--black);
}

.admin-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.admin-search-form input[type="text"] {
    flex: 1 1 220px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--black);
    background: #fffbe6;
}

.admin-search-form .hero-button {
    margin-top: 0;
    background: var(--black);
    color: var(--yellow);
    border-color: var(--black);
}

.admin-search-clear {
    margin-left: 0.25rem;
}

.admin-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.admin-pagination-buttons a {
    margin-left: 0.25rem;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.admin-stat-card {
    background: var(--black);
    color: var(--yellow);
    border-radius: 4px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--black);
}

.admin-stat-label {
    font-size: 0.8rem;
}

.admin-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

.admin-stat-action {
    margin-top: 0.5rem;
}

.signups-status {
    font-weight: 700;
}

.signups-enabled {
    color: #16a34a;
}

.signups-disabled {
    color: #b91c1c;
}

.account-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.account-action-card {
    background: #111111;
    color: var(--yellow);
    border-radius: 4px;
    padding: 0.8rem 1rem;
    border: 1px solid var(--black);
}

.account-action-card form {
    margin: 0;
}

.account-action-card input[type="text"] {
    width: 100%;
    max-width: 320px;
    margin-top: 0.4rem;
    margin-bottom: 0.5rem;
}

.account-username-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.account-username-row input[type="text"] {
    margin-bottom: 0;
    padding: 0.35rem 0.5rem;
}

.account-username-row .hero-button {
    margin-top: 0;
}

.account-action-card-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-note {
    color: #b91c1c;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    border: 1px solid var(--black);
    background: var(--yellow);
    color: var(--black);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
}

.admin-nav-link:hover {
    background: var(--black);
    color: var(--yellow);
    text-decoration: none;
    /* prevent underline on hover */
}

.admin-nav-link--active {
    background: var(--black);
    color: var(--yellow);
}

.admin-metrics-range-form {
    margin-bottom: 1rem;
}

.admin-pricing-form {
    margin-top: 0.5rem;
}

.admin-portal-subtitle {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.2rem;
    /* subtle yellow glow around black text */
    text-shadow: 0 0 2px rgba(234, 179, 8, 0.7), 0 0 4px rgba(234, 179, 8, 0.6),
        0 0 8px rgba(234, 179, 8, 0.5);
}

.admin-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 0.75rem 1.5rem;
    /* row gap, column gap */
    margin-bottom: 1rem;
    max-width: 640px;
}

.admin-pricing-grid--banner {
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    /* single full-width column inside card */
}

.admin-pricing-grid--coupon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    max-width: none;
}

.admin-pricing-grid--coupon-row .admin-pricing-field {
    flex: 0 1 220px;
}

.admin-pricing-field label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}

.admin-pricing-field input[type="text"] {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--black);
}

.admin-pricing-hint {
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.admin-color-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-color-text {
    max-width: 9rem;
}

.admin-color-picker {
    width: 40px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--black);
    background: transparent;
    cursor: pointer;
}

/* Align preset button nicely with the color text input on Banner page */
.admin-color-row .hero-button {
    margin-top: 0;
    padding: 0.35rem 0.9rem;
}

.admin-banner-preset-select {
    max-width: 16rem;
}

.admin-pricing-field--disabled label,
.admin-pricing-field--disabled .admin-pricing-hint {
    color: #9ca3af;
    /* light gray when disabled */
}

.admin-pricing-actions {
    margin-top: 0.75rem;
}

/* On very small screens (e.g. iPhone mini), stack plan pricing fields vertically */
@media (max-width: 480px) {
    .admin-pricing-grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
    }
}

.stripe-admin-logo {
    display: inline-block;
    height: 40px;
    width: auto;
    margin-top: 0.25rem;
}

@media (min-width: 900px) {
    .admin-stats-grid .stat-wide {
        grid-column: span 2;
    }
}

.stripe-mode {
    font-weight: 700;
}

.stripe-mode-test {
    color: #b91c1c;
}

.stripe-mode-live {
    color: #16a34a;
}

.stripe-toggle-live {
    background: #16a34a;
    border-color: #16a34a;
    color: #f0fdf4;
    margin-top: 0;
}

.stripe-toggle-test {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fffbeb;
    margin-top: 0;
}

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black);
    color: var(--yellow);
    padding: 0.75rem 1rem;
    z-index: 1000;
    font-size: 0.85rem;
}

.cookie-banner a {
    color: var(--yellow);
    text-decoration: underline;
}

.cookie-banner-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cookie-actions button {
    padding: 0.3rem 1.2rem;
    border: 1px solid var(--yellow);
    background: transparent;
    color: var(--yellow);
    cursor: pointer;
    min-width: 110px;
}

.cookie-actions button.primary {
    background: var(--yellow);
    color: var(--black);
}

.cookie-actions button:hover {
    opacity: 0.9;
}

.test-mode-banner {
    background: #b91c1c;
    color: #fffbeb;
    text-align: center;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}

@media (min-width: 900px) {
    .footer-inner {
        grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(160px, 1fr));
    }

    .site-chrome {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .footer-bottom {
        /* For desktop, footer sits at the bottom of the document; body flex
           layout ensures it reaches the bottom of the viewport on short pages. */
    }
}

@media (max-width: 768px) {
    .site-chrome {
        position: static;
    }
}