/* ==========================================================
   JOEL MARKET
   Global Style
========================================================== */

/* Font */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ==========================================================
   Root
========================================================== */

:root{

    --primary:#2563eb;
    --primary-hover:#1d4ed8;

    --secondary:#64748b;

    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;
    --info:#06b6d4;

    --light:#f8fafc;
    --dark:#0f172a;

    --border:#e5e7eb;

    --radius:14px;

    --shadow:0 10px 25px rgba(0,0,0,.08);

    --transition:.25s ease;

}

/* ==========================================================
   Reset
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    font-size:15px;

    color:#1e293b;

    background:#f8fafc;

    line-height:1.6;

    overflow-x:hidden;

    position:relative;

    min-height:100vh;

}

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

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:url("../images/logo-bg.png") center center no-repeat;

    background-size:420px;

    opacity:.04;

    pointer-events:none;

    z-index:-1;

}

/* ==========================================================
   Typography
========================================================== */

h1,h2,h3,h4,h5,h6{

    font-weight:700;

    color:#0f172a;

}

a{

    color:var(--primary);

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--primary-hover);

}

/* ==========================================================
   Card
========================================================== */

.card{

    border:none;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-3px);

}

/* ==========================================================
   Button
========================================================== */

.btn{

    border-radius:10px;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

}

.btn-primary:hover{

    background:var(--primary-hover);

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

}

/* ==========================================================
   Form
========================================================== */

.form-control{

    border-radius:10px;

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

    box-shadow:none;

}

.form-control:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);

}

/* ==========================================================
   Table
========================================================== */

.table{

    vertical-align:middle;

}

/* ==========================================================
   Badge
========================================================== */

.badge{

    border-radius:30px;

    font-weight:500;

}

/* ==========================================================
   Alert
========================================================== */

.alert{

    border:none;

    border-radius:12px;

}

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

footer{

    margin-top:60px;

    background:#fff;

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

}

/* ==========================================================
   Scrollbar
========================================================== */

::-webkit-scrollbar{

    width:8px;

    height:8px;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

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

.loading{

    opacity:.6;

    pointer-events:none;

}

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

.shadow-soft{

    box-shadow:var(--shadow);

}

.rounded-xl{

    border-radius:var(--radius);

}

.text-primary{

    color:var(--primary)!important;

}

.bg-primary-soft{

    background:#eff6ff;

}

/* ==========================================================
   Dark Mode
========================================================== */

body.dark-mode{

    background:#0f172a;

    color:#f1f5f9;

}

body.dark-mode::before{

    opacity:.025;

    filter:grayscale(100%) brightness(1.3);

}

body.dark-mode .card{

    background:#1e293b;

    color:#fff;

}

body.dark-mode footer{

    background:#1e293b;

    border-color:#334155;

}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6{

    color:#fff;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:992px){

    body::before{

        background-size:260px;

        opacity:.03;

    }

}

@media(max-width:576px){

    body{

        font-size:14px;

    }

    body::before{

        background-size:180px;

    }

}