/*
|--------------------------------------------------------------------------
| WeddingUI Components
|--------------------------------------------------------------------------
| Version : 1.0.0
|--------------------------------------------------------------------------
| Base reusable UI components
|--------------------------------------------------------------------------
*/


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:var(--space-2);

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

    padding:0 var(--space-6);

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

    border:none;

    cursor:pointer;

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

    font-size:1rem;

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

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

}

.btn:hover{

    transform:translateY(-2px);

}

.btn:active{

    transform:translateY(0);

}

.btn:disabled{

    opacity:.5;

    cursor:not-allowed;

}


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

.btn-primary{

    background:var(--color-primary);

    color:var(--color-white);

}

.btn-primary:hover{

    background:var(--color-secondary);

}

.btn-secondary{

    background:var(--color-accent);

    color:var(--color-white);

}

.btn-outline{

    border:2px solid var(--color-primary);

    color:var(--color-primary);

    background:transparent;

}

.btn-outline:hover{

    background:var(--color-primary);

    color:var(--color-white);

}


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

.card{

    background:var(--background-card);

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

    padding:var(--space-6);

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

    backdrop-filter:blur(10px);

}


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

.input{

    width:100%;

    min-height:54px;

    padding:0 var(--space-4);

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

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

    background:var(--color-white);

    transition:border var(--transition-fast);

}

.input:focus{

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

}


/* ==========================================================
   TEXTAREA
========================================================== */

.textarea{

    width:100%;

    min-height:160px;

    padding:var(--space-4);

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

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

    background:var(--color-white);

}


/* ==========================================================
   SELECT
========================================================== */

.select{

    width:100%;

    min-height:54px;

    padding:0 var(--space-4);

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

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

    background:var(--color-white);

}


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

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

    border-radius:999px;

    background:var(--color-accent);

    color:var(--color-white);

    font-size:.8rem;

}


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

.divider{

    width:100%;

    height:1px;

    background:rgba(0,0,0,.08);

    margin:var(--space-6) 0;

}


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

.icon-btn{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--color-primary);

    color:white;

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

}

.icon-btn:hover{

    transform:scale(1.08);

}


/* ==========================================================
   FAB
========================================================== */

.fab{

    position:fixed;

    bottom:30px;

    right:30px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--color-primary);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

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

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

}


/* ==========================================================
   MODAL
========================================================== */

.modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

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

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

}

.modal.active{

    opacity:1;

    visibility:visible;

}


/* ==========================================================
   MODAL CONTENT
========================================================== */

.modal-content{

    width:min(90%,600px);

    background:white;

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

    padding:var(--space-7);

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

}