/* ==========================================================
   Farbod AI Search
   Version : v0.1.0
   File    : layout.css
   Part    : 1
========================================================== */

/* ==========================================================
   Main Container
========================================================== */

.container{

    width:100%;

    max-width:var(--container-width);

    margin-inline:auto;

    padding-inline:24px;

}

/* ==========================================================
   Sections
========================================================== */

section{

    position:relative;

    width:100%;

}

section:not(:first-child){

    margin-top:var(--section-spacing);

}

/* ==========================================================
   Header
========================================================== */

.main-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ==========================================================
   Hero
========================================================== */

.hero-section{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:100%;

}

/* ==========================================================
   Search
========================================================== */

.search-container{

    width:100%;

    display:flex;

    justify-content:center;

}

#search-form{

    display:flex;

    align-items:center;

    width:100%;

    max-width:850px;

}

#search-input{

    flex:1;

}

/* ==========================================================
   End Part 1
========================================================== */

/* ==========================================================
   Popular Searches
========================================================== */

.popular-searches{

    width:100%;

}

.popular-tags{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:16px;

}

/* ==========================================================
   Cards Grid
========================================================== */

.cards-container{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px,1fr)
        );

    gap:32px;

    width:100%;

}

/* ==========================================================
   Categories
========================================================== */

.category-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px,1fr)
        );

    gap:24px;

}

/* ==========================================================
   Features
========================================================== */

.features-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(260px,1fr)
        );

    gap:28px;

}

/* ==========================================================
   Statistics
========================================================== */

.statistics-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap:24px;

}

/* ==========================================================
   End Part 2
========================================================== */

/* ==========================================================
   Install Section
========================================================== */

.install-app{

    display:flex;

    justify-content:center;

    align-items:center;

}

.install-card{

    width:100%;

    max-width:900px;

}

/* ==========================================================
   About Project
========================================================== */

.about-project{

    display:flex;

    justify-content:center;

}

.about-text{

    max-width:900px;

    margin:auto;

    text-align:center;

}

/* ==========================================================
   Footer
========================================================== */

.main-footer{

    display:flex;

    flex-direction:column;

    gap:48px;

}

.footer-top{

    display:grid;

    grid-template-columns:
        2fr
        1fr
        1fr;

    gap:48px;

    align-items:flex-start;

}

.footer-brand{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-links ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footer-bottom{

    display:flex;

    justify-content:center;

    align-items:center;

}

/* ==========================================================
   Floating Button
========================================================== */

#scroll-top-button{

    position:fixed;

    bottom:30px;

    right:30px;

    z-index:var(--z-overlay);

}

/* ==========================================================
   Splash Screen
========================================================== */

#splash-screen{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:var(--z-loading);

}

.splash-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:24px;

}

/* ==========================================================
   End Part 3
========================================================== */

/* ==========================================================
   Farbod AI Search
   Version : v0.1.0
   File    : layout.css
   Part    : 4
========================================================== */

/* ==========================================================
   Search Overlay
========================================================== */

#search-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:var(--z-overlay);

}

.overlay-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:24px;

}

/* ==========================================================
   Global Loading
========================================================== */

#global-loading{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:var(--z-loading);

}

/* ==========================================================
   Toast
========================================================== */

#toast-container{

    position:fixed;

    top:110px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    gap:16px;

    z-index:var(--z-modal);

}

/* ==========================================================
   Accessibility
========================================================== */

#sr-announcer{

    position:absolute;

    width:1px;

    height:1px;

    overflow:hidden;

}

/* ==========================================================
   Utility
========================================================== */

.hidden{

    display:none !important;

}

.center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex{

    display:flex;

}

.grid{

    display:grid;

}

.w-100{

    width:100%;

}

/* ==========================================================
   End Of File
========================================================== */