/* ===================================================================
   Bhairav One
   Components
   File : components.css
   Version : 1.0.0

   This file contains reusable UI components.

=================================================================== */

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{

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

    background:var(--color-background);

    color:var(--color-text);

    font-size:var(--font-size-md);

    line-height:var(--line-height-normal);

    overflow-x:hidden;

    min-height:100vh;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    text-decoration:none;

    color:inherit;

}

/* ==========================================================
   IMAGES
========================================================== */

img{

    display:block;

    max-width:100%;

}

/* ==========================================================
   BUTTON
========================================================== */

button{

    font-family:inherit;

    border:none;

    background:none;

    outline:none;

    cursor:pointer;

}

/* ==========================================================
   INPUT
========================================================== */

input,
textarea,
select{

    font:inherit;

    outline:none;

    border:none;

    background:none;

}

/* ==========================================================
   APP
========================================================== */

.app{

    width:100%;

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

    min-height:100vh;

    margin:auto;

    background:var(--color-background);

    position:relative;

}

/* ==========================================================
   PAGE
========================================================== */

.page{

    display:flex;

    flex-direction:column;

    min-height:100vh;

}

/* ==========================================================
   CONTAINER
========================================================== */

.container{

    width:100%;

    padding:var(--page-padding);

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:0;

    height:0;

}

/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:var(--color-primary);

    color:white;

}

/* ==========================================================
   UTILITIES
========================================================== */

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.w-100{

    width:100%;

}

.h-100{

    height:100%;

}

.flex{

    display:flex;

}

.flex-column{

    flex-direction:column;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

/* ===================================================================
   APP HEADER
=================================================================== */

.app-header{

    position:sticky;

    top:0;

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

    width:100%;

    height:calc(var(--header-height) + var(--safe-top));

    padding-top:var(--safe-top);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-left:var(--page-padding);

    padding-right:var(--page-padding);

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

    backdrop-filter:blur(18px);

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

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

}

.header-left{

    display:flex;

    flex-direction:column;

}

.header-title{

    font-size:20px;

    font-weight:700;

    color:var(--color-text);

    letter-spacing:-.4px;

}

.header-subtitle{

    margin-top:2px;

    font-size:13px;

    color:var(--color-text-soft);

}

.header-right{

    display:flex;

    align-items:center;

    gap:12px;

}

/* ===================================================================
   ICON BUTTON
=================================================================== */

.icon-btn{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--color-surface);

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

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

    transition:all var(--transition-normal);

}

.icon-btn:active{

    transform:scale(.94);

}

/* ===================================================================
   CARD
=================================================================== */

.card{

    width:100%;

    background:var(--card-background);

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

    border-radius:var(--radius-xl);

    padding:var(--card-padding);

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

    transition:all var(--transition-normal);

}

.card:hover{

    transform:translateY(-2px);

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

}

/* ===================================================================
   BADGE
=================================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    background:#F8FAFC;

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

    font-size:13px;

    font-weight:600;

}

.badge--success{

    color:var(--color-success);

}

.badge--danger{

    color:var(--color-danger);

}

.badge-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:currentColor;

}

/* ===================================================================
   DIVIDER
=================================================================== */

.divider{

    width:100%;

    height:1px;

    background:var(--color-border);

    margin:20px 0;

}

/* ===================================================================
   BUTTONS
=================================================================== */

.btn{

    width:100%;

    height:var(--button-height-lg);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    border-radius:var(--radius-xl);

    font-size:var(--font-size-md);

    font-weight:var(--font-weight-bold);

    transition:
        transform var(--transition-fast),
        background var(--transition-normal),
        box-shadow var(--transition-normal);

    user-select:none;

    -webkit-user-select:none;

}

.btn:active{

    transform:scale(.97);

}

.btn:disabled{

    opacity:var(--opacity-disabled);

    pointer-events:none;

}

/* ===================================================================
   PRIMARY BUTTON
=================================================================== */

.btn--primary{

    color:#ffffff;

    background:var(--button-primary);

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

}

.btn--primary:hover{

    background:var(--button-primary-hover);

}

/* ===================================================================
   SECONDARY BUTTON
=================================================================== */

.btn--secondary{

    background:var(--button-secondary);

    color:var(--color-text);

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

}

/* ===================================================================
   GHOST BUTTON
=================================================================== */

.btn--ghost{

    background:transparent;

    color:var(--color-text);

}

/* ===================================================================
   DANGER BUTTON
=================================================================== */

.btn--danger{

    background:var(--color-danger);

    color:#ffffff;

}

/* ===================================================================
   FLOATING ACTION BUTTON
=================================================================== */

.fab{

    position:fixed;

    right:24px;

    bottom:calc(var(--bottom-nav-height) + 18px);

    width:var(--fab-size);

    height:var(--fab-size);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--color-primary);

    color:#ffffff;

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

    z-index:var(--z-bottom-nav);

    transition:all var(--transition-normal);

}

.fab:active{

    transform:scale(.94);

}

/* ===================================================================
   INPUT
=================================================================== */

.input{

    width:100%;

    height:var(--input-height);

    padding:0 18px;

    border-radius:var(--radius-lg);

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

    background:var(--input-background);

    color:var(--color-text);

    font-size:var(--font-size-md);

    transition:all var(--transition-normal);

}

.input:focus{

    border-color:var(--input-focus);

    box-shadow:0 0 0 4px rgba(17,24,39,.08);

}

/* ===================================================================
   SEARCH INPUT
=================================================================== */

.search{

    width:100%;

    display:flex;

    align-items:center;

    gap:12px;

    height:58px;

    padding:0 18px;

    border-radius:var(--radius-full);

    background:var(--color-surface);

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

}

.search input{

    flex:1;

    border:none;

    background:none;

}