/* ==========================================================
   Chatpata Club Smart Order
   File : reset.css
   Description : Base Reset & Global Styles
   ========================================================== */

/* ==========================================
   BOX MODEL
========================================== */

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

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

* {
    margin: 0;
    padding: 0;
}

/* ==========================================
   HTML
========================================== */

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

/* ==========================================
   BODY
========================================== */

body {

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

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

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

    color: var(--color-text);

    background: var(--color-bg);

    line-height: 1.5;

    min-height: 100vh;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}

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

img {

    display: block;

    max-width: 100%;

    height: auto;

}

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

a {

    text-decoration: none;

    color: inherit;

}

/* ==========================================
   LISTS
========================================== */

ul,
ol {
    list-style: none;
}

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

button {

    font: inherit;

    border: none;

    outline: none;

    cursor: pointer;

    background: transparent;

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

}

button:disabled {

    cursor: not-allowed;

    opacity: .5;

}

/* ==========================================
   INPUTS
========================================== */

input,
select,
textarea {

    width: 100%;

    font: inherit;

    border: var(--border);

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

    background: var(--color-white);

    color: var(--color-text);

    outline: none;

    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);

}

input,
select {

    height: var(--input-height);

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

}

textarea {

    padding: var(--space-12);

    resize: vertical;

    min-height: 100px;

}

input:focus,
select:focus,
textarea:focus {

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

    box-shadow: 0 0 0 3px rgba(255,107,0,.15);

}

/* ==========================================
   PLACEHOLDER
========================================== */

::placeholder {

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

    opacity: 1;

}

/* ==========================================
   HEADINGS
========================================== */

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

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

    line-height: 1.2;

}

h1 { font-size: 2rem; }

h2 { font-size: 1.75rem; }

h3 { font-size: 1.35rem; }

h4 { font-size: 1.15rem; }

h5 { font-size: 1rem; }

h6 { font-size: .9rem; }

/* ==========================================
   PARAGRAPHS
========================================== */

p {

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

}

/* ==========================================
   TABLE
========================================== */

table {

    width: 100%;

    border-collapse: collapse;

}

/* ==========================================
   HORIZONTAL RULE
========================================== */

hr {

    border: 0;

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

}

/* ==========================================
   SVG
========================================== */

svg {

    display: block;

}

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

::selection {

    background: var(--color-primary);

    color: white;

}

/* ==========================================
   SCROLLBAR (Chrome / Edge)
========================================== */

::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}

::-webkit-scrollbar-track {

    background: #eeeeee;

}

::-webkit-scrollbar-thumb {

    background: #c5c5c5;

    border-radius: 50px;

}

::-webkit-scrollbar-thumb:hover {

    background: #999999;

}

/* ==========================================
   FOCUS ACCESSIBILITY
========================================== */

:focus-visible {

    outline: 3px solid rgba(37,99,235,.35);

    outline-offset: 2px;

}

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

label {

    display: block;

    margin-bottom: var(--space-8);

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

}

/* ==========================================
   SMALL
========================================== */

small {

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

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

}