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

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

.main-header{

    background:var(--glass-color);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border:1px solid var(--border-color);

    transition:all .35s ease;

}

.main-header:hover{

    background:var(--surface-hover);

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}

/* ==========================================================
   Logo
========================================================== */

.header-logo{

    object-fit:contain;

    transition:.35s;

}

.header-logo:hover{

    transform:rotate(-8deg) scale(1.08);

}

.header-title{

    font-weight:800;

    letter-spacing:.4px;

}

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

.header-button{

    color:var(--text-primary);

}

.header-button:hover{

    color:var(--primary-color);

}

.header-button .material-symbols-rounded{

    font-size:24px;

}

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

.hero-title{

    background:var(--gradient-primary);

    background-clip:text;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-subtitle{

    max-width:720px;

    margin-inline:auto;

}

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

#search-form{

    transition:.35s ease;

}

#search-form:hover{

    transform:translateY(-2px);

}

#search-form:focus-within{

    border-color:var(--primary-color);

    box-shadow:
        0 0 0 4px rgba(11,108,255,.15),
        var(--shadow-large);

}

#search-input{

    direction:rtl;

    font-family:var(--font-fa);

}

#search-button{

    overflow:hidden;

    position:relative;

}

#search-button::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.18);

    opacity:0;

    transition:.3s;

}

#search-button:hover::before{

    opacity:1;

}

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

/* ==========================================================
   Farbod AI Search
   Version : v0.1.0
   File    : components.css
   Part    : 2
========================================================== */

/* ==========================================================
   Buttons
========================================================== */

button{

    transition:
        transform .30s ease,
        background .30s ease,
        color .30s ease,
        box-shadow .30s ease;

}

button:hover{

    transform:translateY(-3px);

}

button:active{

    transform:scale(.96);

}

/* ==========================================================
   Popular Tags
========================================================== */

.popular-tag{

    padding:12px 22px;

    border-radius:999px;

    background:var(--glass-color);

    border:1px solid var(--border-color);

    backdrop-filter:blur(18px);

    color:var(--text-primary);

    font-size:.95rem;

    transition:all .30s ease;

}

.popular-tag:hover{

    background:var(--primary-color);

    border-color:var(--primary-color);

    color:#FFFFFF;

    box-shadow:0 10px 25px rgba(11,108,255,.30);

}

/* ==========================================================
   Category Cards
========================================================== */

.category-card{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:120px;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

}

.category-card:hover{

    background:rgba(11,108,255,.18);

    border-color:rgba(11,108,255,.35);

}

/* ==========================================================
   Feature Cards
========================================================== */

.feature-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}

.feature-card .material-symbols-rounded{

    font-size:52px;

    color:var(--primary-color);

}

.feature-card h3{

    font-size:1.3rem;

    font-weight:700;

}

.feature-card p{

    color:var(--text-secondary);

    text-align:center;

}

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

.stat-card h3{

    font-size:3rem;

    color:var(--primary-color);

    font-weight:800;

}

.stat-card p{

    margin-top:10px;

    color:var(--text-secondary);

}

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

/* ==========================================================
   AI Result Card
========================================================== */

.ai-card{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:28px;

    background:var(--glass-color);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

    border:1px solid var(--border-color);

    border-radius:28px;

    overflow:hidden;

    transition:all .35s ease;

}

.ai-card:hover{

    transform:translateY(-8px);

    border-color:rgba(11,108,255,.45);

    box-shadow:
        0 25px 55px rgba(0,0,0,.28);

}

/* ==========================================================
   Top
========================================================== */

.ai-card-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

}

.ai-logo{

    width:72px;

    height:72px;

    border-radius:20px;

    object-fit:cover;

}

.ai-info{

    flex:1;

}

.ai-name{

    font-size:1.5rem;

    font-weight:800;

}

.ai-company{

    margin-top:6px;

    color:var(--text-secondary);

}

/* ==========================================================
   Rating
========================================================== */

.ai-rating{

    display:flex;

    align-items:center;

    gap:8px;

    color:#FFD54A;

    font-weight:700;

}

.ai-rating .material-symbols-rounded{

    font-size:22px;

}

/* ==========================================================
   Description
========================================================== */

.ai-description{

    color:var(--text-secondary);

    line-height:1.9;

}

/* ==========================================================
   Tags
========================================================== */

.ai-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.ai-tag{

    padding:8px 16px;

    border-radius:999px;

    background:var(--glass-color);

    border:1px solid var(--border-color);

    font-size:.85rem;

}

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

/* ==========================================================
   AI Card Details
========================================================== */

.ai-meta{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:16px;

}

.ai-meta-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    border-radius:18px;

    background:var(--surface-color);

    border:1px solid var(--border-light);

}

.ai-meta-item
.material-symbols-rounded{

    color:var(--primary-color);

    font-size:24px;

}

.ai-meta-title{

    font-size:.82rem;

    color:var(--text-muted);

}

.ai-meta-value{

    font-size:1rem;

    font-weight:700;

    color:var(--text-primary);

}

/* ==========================================================
   Store Buttons
========================================================== */

.ai-actions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:10px;

}

.store-button{

    flex:1;

    min-width:180px;

    height:56px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    border-radius:18px;

    background:var(--glass-color);

    border:1px solid var(--border-color);

    color:var(--text-primary);

    transition:.30s;

}

.store-button:hover{

    background:var(--primary-color);

    color:#FFFFFF;

    transform:translateY(-4px);

}

.store-button
.material-symbols-rounded{

    font-size:24px;

}

/* ==========================================================
   Official Website Button
========================================================== */

.website-button{

    width:100%;

    height:58px;

    margin-top:16px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    border-radius:18px;

    background:var(--gradient-primary);

    color:#FFFFFF;

    font-weight:700;

    transition:.35s;

}

.website-button:hover{

    transform:scale(1.02);

    box-shadow:0 15px 35px rgba(11,108,255,.35);

}

/* ==========================================================
   AI Status Badge
========================================================== */

.ai-status{

    position:absolute;

    top:20px;

    left:20px;

    padding:8px 16px;

    border-radius:999px;

    background:#22C55E;

    color:#FFFFFF;

    font-size:.80rem;

    font-weight:700;

}

/* ==========================================================
   End Part 4
========================================================== */

/* ==========================================================
   Install App Card
========================================================== */

.install-card{

    position:relative;

    overflow:hidden;

}

.install-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:90px;

    height:90px;

    margin:0 auto 24px;

    border-radius:50%;

    background:rgba(11,108,255,.15);

    color:var(--primary-color);

    font-size:42px;

}

.install-card h2{

    margin-bottom:18px;

    font-size:2rem;

    font-weight:800;

}

.install-card p{

    max-width:650px;

    margin:auto;

    color:var(--text-secondary);

}

#install-button{

    margin-top:32px;

    min-width:260px;

    height:58px;

    border-radius:18px;

    background:var(--gradient-primary);

    color:#FFFFFF;

    font-size:1rem;

    font-weight:700;

}

#install-button:hover{

    transform:translateY(-4px);

}

/* ==========================================================
   Scroll To Top
========================================================== */

#scroll-top-button{

    width:58px;

    height:58px;

    border-radius:50%;

    background:var(--gradient-primary);

    color:#FFFFFF;

    box-shadow:var(--shadow-medium);

    opacity:0;

    visibility:hidden;

    transition:all .35s;

}

#scroll-top-button.show{

    opacity:1;

    visibility:visible;

}

#scroll-top-button:hover{

    transform:translateY(-6px);

}

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

.toast{

    min-width:320px;

    padding:18px 22px;

    border-radius:18px;

    background:rgba(30,30,30,.88);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    color:#FFFFFF;

    box-shadow:var(--shadow-medium);

}

.toast.success{

    border-right:5px solid #22C55E;

}

.toast.error{

    border-right:5px solid #EF4444;

}

.toast.warning{

    border-right:5px solid #F59E0B;

}

/* ==========================================================
   End Part 5
========================================================== */

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

#splash-screen{

    background:
        radial-gradient(
            circle at top,
            rgba(11,108,255,.28),
            transparent 55%
        ),
        var(--gradient-dark);

    transition:
        opacity .8s ease,
        visibility .8s ease;

}

#splash-screen.hide{

    opacity:0;

    visibility:hidden;

}

.logo-container{

    width:150px;

    height:150px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--glass-color);

    border:1px solid var(--border-color);

    backdrop-filter:blur(24px);

}

.main-logo{

    width:90px;

    animation:logoFloat 2.5s ease-in-out infinite;

}

.project-title{

    font-size:2.8rem;

    font-weight:800;

    text-align:center;

}

.project-description{

    color:var(--text-secondary);

    text-align:center;

}

/* ==========================================================
   Loading Bar
========================================================== */

.loading-container{

    width:320px;

    margin-top:18px;

}

.loading-bar{

    width:100%;

    height:8px;

    overflow:hidden;

    border-radius:999px;

    background:var(--glass-color);

}

.loading-progress{

    width:0;

    height:100%;

    border-radius:999px;

    background:var(--gradient-primary);

}

/* ==========================================================
   Global Loader
========================================================== */

.loading-spinner{

    width:72px;

    height:72px;

    border-radius:50%;

    border:6px solid var(--border-color);

    border-top-color:var(--primary-color);

    animation:spin 1s linear infinite;

}

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

.overlay-container{

    padding:48px;

    border-radius:28px;

    background:rgba(20,20,25,.90);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.08);

}

/* ==========================================================
   End Part 6
========================================================== */

/* ==========================================================
   Hover Effects
========================================================== */

.glass-hover{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.glass-hover:hover{

    transform:translateY(-6px);

    border-color:rgba(11,108,255,.35);

    box-shadow:
        0 18px 45px rgba(0,0,0,.25);

}

/* ==========================================================
   Focus Effect
========================================================== */

input:focus,
button:focus,
a:focus{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(11,108,255,.20);

}

/* ==========================================================
   Skeleton Loader
========================================================== */

.skeleton{

    position:relative;

    overflow:hidden;

    background:
        var(--glass-color);

}

.skeleton::before{

    content:"";

    position:absolute;

    inset:0;

    transform:translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    animation:skeletonLoading 1.5s infinite;

}

/* ==========================================================
   Ripple Effect
========================================================== */

.ripple{

    position:relative;

    overflow:hidden;

}

.ripple::after{

    content:"";

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:
        rgba(255,255,255,.35);

    transform:scale(0);

    opacity:0;

}

.ripple:active::after{

    animation:ripple .55s ease;

}

/* ==========================================================
   Glass Border
========================================================== */

.glass-border{

    border:1px solid
        var(--border-color);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

}

/* ==========================================================
   Glow
========================================================== */

.primary-glow{

    box-shadow:

        0 0 18px rgba(11,108,255,.20),

        0 0 45px rgba(11,108,255,.10);

}

/* ==========================================================
   AI Card Animation
========================================================== */

.ai-card{

    animation:
        fadeInUp .6s ease both;

}

/* ==========================================================
   End Part 7
========================================================== */

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

.footer-brand h2{

    font-size:1.8rem;

    font-weight:800;

    margin-bottom:12px;

}

.footer-brand p{

    color:var(--text-secondary);

}

.footer-links h3{

    margin-bottom:18px;

    font-size:1.15rem;

    font-weight:700;

}

.footer-links a{

    display:inline-block;

    color:var(--text-secondary);

    transition:.30s ease;

}

.footer-links a:hover{

    color:var(--primary-color);

    transform:translateX(-4px);

}

.footer-bottom{

    padding-top:32px;

    border-top:1px solid var(--border-light);

    color:var(--text-muted);

}

/* ==========================================================
   No Script
========================================================== */

.noscript-message{

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    width:min(90%,600px);

    padding:18px 22px;

    border-radius:18px;

    background:#EF4444;

    color:#FFFFFF;

    text-align:center;

    font-weight:700;

    z-index:99999;

}

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

.visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    margin:-1px;

    padding:0;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

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

.text-center{

    text-align:center;

}

.w-full{

    width:100%;

}

.hidden{

    display:none !important;

}

.opacity-0{

    opacity:0;

}

.opacity-100{

    opacity:1;

}

.pointer{

    cursor:pointer;

}

.rounded-full{

    border-radius:999px;

}

/* ==========================================================
   Quick Navigation Overlay
========================================================== */

.quick-nav-overlay{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    padding:24px;

    background:rgba(5,7,13,.55);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    opacity:0;

    visibility:hidden;

    transition:

        opacity .35s ease,

        visibility .35s ease;

}

.quick-nav-overlay.visible{

    opacity:1;

    visibility:visible;

}

.quick-nav-panel{

    width:100%;

    max-width:640px;

    max-height:85vh;

    overflow-y:auto;

    padding:32px;

    background:var(--glass-color);

    backdrop-filter:blur(var(--glass-blur));

    -webkit-backdrop-filter:blur(var(--glass-blur));

    border:var(--glass-border);

    border-radius:32px;

    box-shadow:var(--shadow-large);

    transform:translateY(24px) scale(.96);

    opacity:0;

    transition:

        transform .40s cubic-bezier(.16,1,.3,1),

        opacity .35s ease;
}

.quick-nav-overlay.visible .quick-nav-panel{

    transform:translateY(0) scale(1);

    opacity:1;

}

.quick-nav-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

}

.quick-nav-header h2{

    font-size:1.35rem;

    font-weight:800;

    color:var(--text-primary);

}

.quick-nav-close{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--surface-color);

    border:1px solid var(--border-color);

    color:var(--text-primary);

    cursor:pointer;

    transition:.25s;

}

.quick-nav-close:hover{

    background:var(--danger-color);

    color:#FFFFFF;

    transform:rotate(90deg);

}

.quick-nav-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fill,minmax(140px,1fr));

    gap:14px;

}

.quick-nav-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:20px 14px;

    background:var(--surface-color);

    border:1px solid var(--border-light);

    border-radius:20px;

    color:var(--text-primary);

    font-size:.88rem;

    font-weight:600;

    text-align:center;

    cursor:pointer;

    transition:

        transform .25s ease,

        background .25s ease,

        border-color .25s ease;
}

.quick-nav-item .material-symbols-rounded{

    font-size:26px;

    color:var(--primary-color);

    transition:transform .25s ease;

}

.quick-nav-item:hover{

    transform:translateY(-4px);

    background:var(--surface-hover);

    border-color:var(--primary-color);

}

.quick-nav-item:hover .material-symbols-rounded{

    transform:scale(1.15);

}

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