@charset "utf-8";
/* CSS Document */
/* ==========================================================
   LAYOUT
   ========================================================== */

.section{

    padding:0 0 16px 0;

}

.section-small{

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

}

.section-large{

    padding:calc(var(--space-xl) * 1.5) 0;

}

/* ==========================================================
   GRID
   ========================================================== */

.grid{

    display:grid;
    gap:24px;

}

.grid-2{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;

}

.grid-3{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;

}

.grid-4{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;

}

/* ==========================================================
   FLEX
   ========================================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;
    align-items:center;
    justify-content:center;

}

.flex-between{

    display:flex;
    align-items:center;
    justify-content:space-between;

}

.flex-column{

    display:flex;
    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.gap-sm{

    gap:var(--space-sm);

}

.gap-md{

    gap:var(--space-md);

}

.gap-lg{

    gap:var(--space-lg);

}

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

.btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:14px 24px;

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

    font-weight:600;

    transition:all var(--transition);

}

.btn-primary{

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

}

.btn-primary:hover{

    background:var(--primary-hover);

}

.btn-secondary{

    background:var(--surface);

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

    color:var(--text);

}

.btn-secondary:hover{

    background:var(--surface-alt);

}

/* ==========================================================
   SPACING HELPERS
   ========================================================== */

.mb-xs{margin-bottom:var(--space-xs);}
.mb-sm{margin-bottom:var(--space-sm);}
.mb-md{margin-bottom:var(--space-md);}
.mb-lg{margin-bottom:var(--space-lg);}
.mb-xl{margin-bottom:var(--space-xl);}

.mt-xs{margin-top:var(--space-xs);}
.mt-sm{margin-top:var(--space-sm);}
.mt-md{margin-top:var(--space-md);}
.mt-lg{margin-top:var(--space-lg);}
.mt-xl{margin-top:var(--space-xl);}

.default-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
}

.login-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(4, 18, 32, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-modal-overlay[hidden] {
    display: none;
}

.login-modal {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border-radius: 22px;
    padding: 24px 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.login-modal h2 {
    margin: 0 0 10px;
    text-align: center;
}

.login-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    border: 0;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    color: #52616b;
}