/*======================================
  Wx Design System v1.0
  Components
======================================*/


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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;

    padding:1rem 2rem;

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

    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);

    transition:var(--transition);

    cursor:pointer;

    white-space:nowrap;
}

.btn:hover{
    transform:translateY(-3px);
}

.btn:active{
    transform:translateY(0);
}


/* Primary */

.btn--primary{

    background:var(--color-accent);

    color:#fff;

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

.btn--primary:hover{

    background:var(--color-accent-dark);

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


/* Secondary */

.btn--secondary{

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

    color:var(--color-primary);

    background:transparent;
}

.btn--secondary:hover{

    background:var(--color-primary);

    color:#fff;
}


/* Dark */

.btn--dark{

    background:var(--color-primary);

    color:#fff;
}

.btn--dark:hover{

    background:var(--color-primary-light);
}



/*==============================
  SECTION HEADER
===============================*/

.section-header{

    max-width:720px;

    margin:0 auto 4rem;

    text-align:center;
}

.section-tag{

    display:inline-block;

    margin-bottom:1rem;

    padding:.5rem 1rem;

    border-radius:999px;

    background:rgba(198,144,46,.12);

    color:var(--color-accent);

    font-weight:var(--fw-semibold);

    font-size:var(--text-sm);
}

.section-title{

    margin-bottom:1rem;
}

.section-description{

    color:var(--text-body);

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



/*==============================
  CARDS
===============================*/

.card{

    background:var(--bg-light);

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

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

    padding:2rem;

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

    transition:var(--transition);
}

.card:hover{

    transform:translateY(-8px);

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



/* Glass */

.card--glass{

    background:var(--glass-bg);

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

    border:1px solid var(--glass-border);
}



/*==============================
  BADGES
===============================*/

.badge{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    padding:.5rem 1rem;

    border-radius:999px;

    background:rgba(15,45,82,.08);

    color:var(--color-primary);

    font-size:var(--text-sm);

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



/*==============================
  ICON BOX
===============================*/

.icon-box{

    width:64px;

    height:64px;

    display:grid;

    place-items:center;

    border-radius:18px;

    background:rgba(198,144,46,.10);

    color:var(--color-accent);

    font-size:1.5rem;
}



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

.stat-card{

    text-align:center;

    padding:2rem;

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

    background:var(--bg-light);

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

    transition:var(--transition);
}

.stat-card:hover{

    transform:translateY(-6px);

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

.stat-number{

    display:block;

    margin-bottom:.5rem;

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

    font-size:3rem;

    font-weight:var(--fw-extrabold);

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

.stat-label{

    color:var(--text-body);
}



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

.divider{

    width:80px;

    height:4px;

    margin:1.5rem auto;

    border-radius:999px;

    background:var(--color-accent);
}



/*==============================
  FORM
===============================*/

.form-control{

    width:100%;

    padding:1rem 1.25rem;

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

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

    background:#fff;

    transition:var(--transition);
}

.form-control:focus{

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

    box-shadow:0 0 0 4px rgba(198,144,46,.15);
}



/*==============================
  IMAGE
===============================*/

.image-cover{

    width:100%;

    height:100%;

    object-fit:cover;
}



/*==============================
  SHADOW HELPERS
===============================*/

.shadow-sm{

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

.shadow-md{

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

.shadow-lg{

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