/* Base & Global Styles */
@import 'base.css';

/* Component Styles */
@import 'components/header.css';
@import 'components/footer.css';
@import 'components/cards.css';
@import 'components/widgets.css';
@import 'components/navigation.css';

/* View Styles */
@import 'views/home.css';
@import 'views/search.css';
@import 'views/region.css';
@import 'views/detail.css';
@import 'views/404.css';
@import 'views/info.css';

/* Several overlays (lightbox, game win screen) set `display: flex`, which
   overrides the [hidden] attribute's UA `display: none`. Enforce that any
   element carrying [hidden] stays hidden until JS toggles it. */
[hidden] {
    display: none !important;
}

/* Autosuggest "no results" message (not selectable) */
.suggestions-list li.suggestion-empty {
    cursor: default;
    color: var(--text-muted);
    justify-content: center;
    font-size: 0.9rem;
}

.suggestions-list li.suggestion-empty:hover {
    background: transparent;
    color: var(--text-muted);
}

/* Disabled pagination links (rendered as anchors server-side) */
.pag-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Responsive visibility helpers (used by the markup, implicit in the SPA).
   Only toggle visibility — never force a `display` value on desktop, or
   elements like the gallery items would lose their natural layout. */
.mobile-only {
    display: none;
}

@media (max-width: 991px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: revert;
    }
}


:root {
    --primary-color: #2d7888;
    --primary-hover: #225a66;
    --primary-light: #ffe8bb5e;
    --primary-gradient: linear-gradient(135deg, #2d7888 0%, #225a66 100%);
    --rating-color: #ffc556;
    --shadow-primary: 0 8px 24px -6px #909090;
}


.res-mini-location .material-icons {
    color: #ff575a;
}

.page-detail {
    .info-item span:last-child {
        color: #2d7888;
    }
}

.badge-success {
    background-color: #315882;
    color: #ffffff;
}

.badge-info {
    background-color: #2d7888;
    color: #ffffff;
}

a.logo img {
    max-width: 150px;
}