/* ══ Components: Buttons, Cards, Forms, Page Headers, Badges ══ */

/* ── Buttons ── */
.btn-signin {
    background: var(--accent-blue);
    color: #fff !important;
    border: none;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.4rem 1.5rem;
    border-radius: 9999px;
    transition: background 0.2s;
}
.btn-signin:hover { background: #0c8ec5; color: #fff; }

.btn-get-started {
    background: var(--accent-blue);
    color: #fff;
    border: none;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.6rem 2rem;
    border-radius: 9999px;
    transition: background 0.2s;
}
.btn-get-started:hover { background: #0c8ec5; color: #fff; }

@media (min-width: 768px) {
    .btn-get-started { font-size: 1.1rem; padding: 0.75rem 3rem; }
}

.btn-cta-outline {
    border: 2px solid var(--accent-blue);
    color: var(--accent-blue);
    font-weight: 700;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s, color 0.2s;
}
.btn-cta-outline:hover {
    background: var(--accent-blue);
    color: #fff;
}

/* ── Bootstrap Card Override (dark) ── */
.card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-primary);
}

/* ── Content Card (reusable dark card) ── */
.content-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0.75rem;
    padding: 1.5rem;
    color: var(--text-primary);
}

.content-card--highlight {
    border-color: var(--accent-blue);
    box-shadow: 0 0 20px rgba(14, 167, 231, 0.08);
}

.content-card--interactive {
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.content-card--interactive:hover {
    transform: translateY(-2px);
    border-color: var(--accent-blue);
    box-shadow: 0 4px 20px rgba(14, 167, 231, 0.15);
    color: var(--text-primary);
}

.content-card h5,
.content-card .content-card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0.75rem;
}

.content-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.content-card .price-tag {
    color: var(--accent-yellow);
    font-weight: 700;
    font-size: 1rem;
}

/* ── Game Card (top games grid) ── */
.top-game-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    border: 2px solid transparent;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.top-game-card:hover {
    transform: scale(1.05);
    border-color: var(--accent-blue);
    box-shadow: 0 0 20px rgba(14, 167, 231, 0.2);
    z-index: 10;
    color: #fff;
}

.top-game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--bg-card);
}

.top-game-card .badge-new {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.75rem;
    border-radius: 9999px;
    backdrop-filter: blur(4px);
    z-index: 5;
}

/* ── "Coming soon" placeholder cards ──
   A game in the catalog that is advertised but not yet buyable (Game.IsComingSoon). The card keeps
   its layout so the grid stays even, but loses the hover affordance and renders without an href, so
   it is neither clickable nor focusable. Shared by all three /games variants. */
.badge-coming-soon {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid var(--text-muted);
    color: var(--text-primary);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding: 0.2rem 0.75rem;
    border-radius: 9999px;
    backdrop-filter: blur(4px);
    z-index: 5;
}

/* In the list-style variant the badge sits inline in the trailing column, not over the art. */
.badge-coming-soon--inline {
    position: static;
    display: inline-block;
    transform: none;
}

.top-game-card--coming-soon,
.tilt-card--coming-soon {
    cursor: default;
}

.top-game-card--coming-soon:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}

.top-game-card--coming-soon img,
.tilt-card--coming-soon img {
    filter: grayscale(0.65) brightness(0.72);
}

.top-game-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(to top, rgba(5, 8, 13, 0.9) 30%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.5rem;
    pointer-events: none;
}

.top-game-card-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.top-game-card-price {
    margin-top: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.top-game-card-price strong {
    color: var(--accent-green);
    font-weight: 700;
}

/* ── Platform Badges ── */
.platform-icons {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.platform-icon {
    background: rgba(15, 25, 35, 0.8);
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* ── Top Games Section ── */
.top-games-section {
    background: linear-gradient(to bottom, #0a1520, var(--bg-primary));
    padding: 1.5rem 0;
}

.top-games-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0 1rem;
}

@media (min-width: 768px) {
    .top-games-header {
        flex-direction: row;
        justify-content: space-between;
    }
}

.top-games-header h3 {
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 0.05em;
    margin: 0;
}

.top-games-header .view-all {
    color: var(--accent-blue);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.top-games-header .view-all:hover { text-decoration: underline; }

.top-games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 0.5rem 0 1rem;
    grid-template-rows: repeat(2, auto);
    max-height: none;
    overflow: hidden;
}

/* Hide 5th and 6th cards on small screens (show only 4) */
.top-games-grid > :nth-child(n+5) {
    display: none;
}

@media (min-width: 768px) {
    .top-games-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
    /* Show up to 6 cards on medium screens */
    .top-games-grid > :nth-child(n+5) {
        display: block;
    }
    .top-games-grid > :nth-child(n+7) {
        display: none;
    }
}

@media (min-width: 1200px) {
    .top-games-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
    }
    /* Show all cards on large screens */
    .top-games-grid > :nth-child(n+7) {
        display: block;
    }
}

/* ── Page Header ── */
.page-header {
    background: linear-gradient(to bottom, var(--bg-darkest), var(--bg-primary));
    padding: 3rem 0 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.page-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .page-header h1 { font-size: 2.5rem; }
}

.page-header .lead {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* ── Page Content Area ── */
.page-content {
    padding: 2rem 0 3rem;
}

/* ── Dark Form Controls ── */
.form-control,
.form-select {
    background-color: var(--bg-dark);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-darkest);
    border-color: var(--accent-blue);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(14, 167, 231, 0.15);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--bg-card);
    color: var(--text-muted);
    opacity: 0.6;
}

.form-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

/* ── FAQ Definition List ── */
.faq-list dt {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1rem;
}

.faq-list dd {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* ── Section Heading (reusable) ── */
.section-heading {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent-blue);
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .section-heading { font-size: 2.5rem; }
}

.section-heading .sparkle {
    color: var(--accent-magenta);
    margin-right: 0.5rem;
}

/* ── Dark Modal (global) ── */
.modal-content {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-title {
    font-weight: 700;
    width: 100%;
    text-align: center;
}

.modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-body {
    color: #c9cdd3;
    scrollbar-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.05);
    scrollbar-width: thin;
}

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.modal-backdrop.show {
    opacity: 0.7;
}

/* ── Info Tooltip (Lucide info icon with click-to-show popup) ── */
.info-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue, #0ea5e9);
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    transition: color 0.2s;
    position: relative;
}
.info-tooltip-trigger svg {
    width: 16px;
    height: 16px;
    display: block;
}
.info-tooltip-trigger:hover {
    color: var(--text-primary, #fff);
}
.info-tooltip-popup {
    display: none;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);
    z-index: 1050;
    background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border-subtle, #333);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary, #b0b0b0);
    line-height: 1.5;
    min-width: 280px;
    max-width: 380px;
    white-space: normal;
    text-transform: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.info-tooltip-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--border-subtle, #333);
}
/* Flipped below variant */
.info-tooltip-popup.show-below {
    bottom: auto;
    top: calc(100% + 10px);
}
.info-tooltip-popup.show-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--border-subtle, #333);
}
.info-tooltip-popup.show { display: block; }
.info-tooltip-popup a {
    color: var(--accent-blue, #0ea5e9);
    text-decoration: underline;
    word-break: break-all;
}
.detail-item-label { position: relative; }

/* ── App Modal (reusable overlay dialog, app-wide) ──
   Replacement for native window.confirm / window.alert. Built dynamically by wwwroot/js/ui-modal.js
   (window.AppModal.confirm / window.AppModal.alert). ALL confirmations, warnings and errors must use
   this overlay instead of browser popups. */
.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.16s ease;
}
.app-modal-backdrop.is-open { opacity: 1; }

.app-modal {
    width: 100%;
    max-width: 30rem;
    background: var(--bg-card, #0f1923);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(8px);
    transition: transform 0.16s ease;
}
.app-modal-backdrop.is-open .app-modal { transform: translateY(0); }

.app-modal-title {
    margin: 0 0 0.75rem;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.15rem;
}

.app-modal-message {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-line;
}

.app-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.app-modal-btn {
    padding: 0.5rem 1.15rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

.app-modal-btn--secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-muted);
}
.app-modal-btn--secondary:hover {
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.4);
}

.app-modal-btn--primary {
    background: var(--accent-blue, #0ea7e7);
    color: #fff;
}
.app-modal-btn--primary:hover { filter: brightness(1.1); }

.app-modal-btn--danger {
    background: #e5484d;
    color: #fff;
}
.app-modal-btn--danger:hover { filter: brightness(1.1); }

/* ============================================================
   Notification bell rows — shared by every header variant and the
   dashboard topbar (markup: _NotificationBellItems.cshtml).
   The link fills the row so its themed hover covers the full width;
   the dismiss button is overlaid on the right, centred across both
   text lines. (A real second grid column instead leaves the button
   area outside the link's hover tint, which reads as a cut-off strip.)
   ============================================================ */
.notif-menu .notif-row {
    position: relative;
}

/* Reserve the button's width so a long message never runs underneath it. */
.notif-menu .notif-row .notif-item {
    padding-right: 2.35rem;
}

.notif-menu .notif-dismiss {
    position: absolute;
    top: 50%;
    right: 0.45rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.notif-menu .notif-row:hover .notif-dismiss {
    opacity: 1;
}

.notif-menu .notif-dismiss:hover {
    color: var(--text-primary);
    background: var(--surface-3);
    opacity: 1;
}

.notif-menu .notif-dismiss:focus-visible {
    opacity: 1;
    outline: 2px solid var(--accent-blue, #2ad4ff);
    outline-offset: -2px;
}

.notif-menu .notif-dismiss:disabled {
    opacity: 0.25;
    cursor: default;
}

/* ============================================================
   Language switcher (header) — shared across all header variants.
   ============================================================ */
.lang-switcher .lang-switcher-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.lang-switcher .lang-switcher-toggle::after {
    margin-left: 0.15rem;
    vertical-align: middle;
}

.lang-switcher-icon {
    opacity: 0.9;
}

.lang-switcher-label {
    font-weight: 600;
    letter-spacing: 0.03em;
}

.lang-switcher-menu {
    min-width: 12rem;
}

.lang-switcher-item.active {
    font-weight: 700;
}

.lang-switcher-item.active::after {
    content: "✓";
    float: right;
    opacity: 0.8;
}