/* Import TraLenso design system */
@import url('variables.css');
@import url('utilities.css');

@import url('layout/alertMessages.css');
@import url('layout/animations.css');
@import url('layout/scrollbar.css');
@import url('layout/searchbar.css');

@import url('pages/admin/adminDashboardComponents/AdminApplicants.css');
@import url('pages/admin/adminDashboardComponents/AdminOverview.css');
@import url('pages/admin/adminDashboardComponents/AdminTools.css');
@import url('pages/admin/adminDashboardComponents/AdminUserDetail.css');
@import url('pages/admin/adminDashboardComponents/AdminUsers.css');

@import url('pages/admin/adminDashboard.css');
@import url('pages/admin/orderOverview.css');
@import url('pages/admin/inviteCreator.css');

@import url('pages/auth/accountStatus.css');
@import url('pages/auth/creatorInviteAccept.css');

@import url('pages/creator/CreateDashboardComponents/CreatorAnalytics.css');
@import url('pages/creator/CreateDashboardComponents/CreatorDashboardOverview.css');
@import url('pages/creator/CreateDashboardComponents/CreatorEarnings.css');

@import url('pages/creator/CreateGuideContentComponents/CreateExplorationMapComponent.css');
@import url('pages/creator/CreateGuideContentComponents/CreateGuideCardComponent.css');

@import url('pages/creator/CreatorSettingsComponents/SubCategories.css');
@import url('pages/creator/CreatorSettingsComponents/UpsellDiscountSettings.css');

@import url('pages/creator/creatorDashboard.css');
@import url('pages/creator/guideCreate.css');

@import url('pages/guides/GuideContentComponents/AboutGuideComponent.css');
@import url('pages/guides/GuideContentComponents/EventsComponent.css');
@import url('pages/guides/GuideContentComponents/ExplorationMapComponent.css');
@import url('pages/guides/GuideContentComponents/TravelTipsComponent.css');

@import url('pages/guides/GuideReviews.css');
@import url('pages/guides/GuideVersions.css');
@import url('pages/guides/GuideViewer.css');

@import url('pages/public/About.css');
@import url('pages/public/creatorProfile.css');
@import url('pages/public/creators.css');
@import url('pages/public/creatorsMap.css');
@import url('pages/public/discover.css');
@import url('pages/public/home.css');
@import url('pages/public/Support.css');
@import url('pages/public/Legal.css');

@import url('pages/user/accountSettings.css');
@import url('pages/user/becomeCreator.css');
@import url('pages/user/Map.css');
@import url('pages/user/myFavorites.css');
@import url('pages/user/myLibrary.css');
@import url('pages/user/purchaseHistory.css');
@import url('pages/user/myReviews.css');
@import url('pages/user/notifications.css');
@import url('pages/user/profile.css');

@import url('shared/Components/ActiveFiltersDisplay.css');
@import url('shared/Components/ActivityCardComponent.css');
@import url('shared/Components/ActivityCardComponentSmall.css');
@import url('shared/Components/AdvancedFiltering.css');
@import url('shared/Components/Dropdown.css');
@import url('shared/Components/errorState.css');
@import url('shared/Components/CategoryFilter.css');
@import url('shared/Components/confirmationModal.css');
@import url('shared/Components/ExplorationMapDisplay.css');
@import url('shared/Components/FullActivityCardModal.css');
@import url('shared/Components/GuideBannerComponent.css');
@import url('shared/Components/GuideCardComponent.css');
@import url('shared/Components/HighlightsModal.css');
@import url('shared/Components/LoadingSpinner.css');
@import url('shared/Components/ProfileImageComponent.css');
@import url('shared/Components/ReviewCommentModal.css');
@import url('shared/Components/ReviewDisplayComponent.css');
@import url('shared/Components/ReviewModal.css');
@import url('shared/Components/SortDropdown.css');
@import url('shared/Components/StripeConnectBanner.css');
@import url('shared/Components/TimeSeriesChart.css');
@import url('shared/Components/ToggleSwitch.css');
@import url('shared/Components/VerifyEmailCard.css');

@import url('shared/CreatorProfileComponents/ProfileBox.css');

@import url('shared/LayoutComponents/ProfileSidebar.css');
@import url('shared/LayoutComponents/TabNavigationComponent.css');
@import url('shared/LayoutComponents/TopNavigationBar.css');
@import url('shared/LayoutComponents/UpsellSidebarModal.css');

@import url('shared/MapComponents/CreateMapComponentModal.css');
@import url('shared/MapComponents/WideStaticMapComponent.css');

@import url('shared/TravelTipComponents/ChecklistCard.css');
@import url('shared/TravelTipComponents/TipCard.css');

@import url('shared/EventComponents/EventCard.css');
@import url('shared/EventComponents/EventDetailModal.css');
@import url('shared/EventComponents/EventEditModal.css');

@import url('shared/GuideUpdateBanner.css');
@import url('shared/imageCropModal.css');
@import url('shared/toastContainer.css');
@import url('shared/LayoutComponents/Footer.css');

html {
    overflow-x: hidden;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

#app {
    min-height: 100vh;
}

    #app > main {
        min-height: 100vh;
    }

/* Email Verification Banner */

.site-banner {
    padding: 0.5rem 2rem;
}

.site-banner--primary {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.site-banner__content {
    max-width: 120rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: white;
}

    .site-banner__content > i {
        font-size: 3.8rem;
        opacity: 0.9;
    }

.site-banner__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 2rem;
}

    .site-banner__text strong {
        font-size: 1.5rem;
        font-weight: 500;
    }

    .site-banner__text span {
        font-size: 1.35rem;
        font-weight: 300;
    }

.site-banner .tralenso-primary-btn {
    background: var(--color-background-light);
    color: var(--color-dark-text);
    white-space: nowrap;
}

    .site-banner .tralenso-primary-btn:hover {
        background: var(--color-background-light);
        color: var(--color-primary);
    }

@media (max-width: 767px) {
    .site-banner {
        padding: 1rem;
    }

    .site-banner__content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

@media (max-width: 575px) {
    .site-banner__text strong {
        font-size: 1.35rem;
    }

    .site-banner__text span {
        font-size: 1.2rem;
    }
}