/* =========================
   Global Font Variables
   ========================= */
:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Rubik", sans-serif;
    --nav-font: "Kanit", sans-serif;
    --background-color: #ffffff;
    --default-color: #40372e;
    --heading-color: #281a0c;
    --accent-color: #72001F;
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
    --nav-color: #ffffff;
    --nav-hover-color: #72001F;
    --nav-mobile-background-color: #ffffff;
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color: #40372e;
    --nav-dropdown-hover-color: #72001F;
}

/* =========================
   Global Typography
   ========================= */
body {
    font-family: var(--default-font);
    color: var(--default-color);
    background-color: var(--background-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--heading-color);
}

.card {
    transition: transform .2s ease, box-shadow .2s ease;
}

    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 25px rgba(0,0,0,0.08);
    }

/* =========================
   Buttons
   ========================= */
.btn,
button {
    font-family: var(--default-font);
    background-color: var(--accent-color);
    color: var(--contrast-color);
    border: none;
}

    .btn:hover,
    button:hover {
        background-color: color-mix(in srgb, var(--accent-color), #000 10%);
        color: var(--contrast-color);
    }

/* Secondary buttons */
.btn-secondary {
    background-color: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

    .btn-secondary:hover {
        background-color: var(--accent-color);
        color: var(--contrast-color);
    }

/* =========================
   Forms & Labels
   ========================= */
label {
    font-family: var(--default-font);
    color: var(--heading-color);
}

input,
select,
textarea {
    font-family: var(--default-font);
    color: var(--default-color);
    border: 1px solid #ddd;
}

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--accent-color);
        box-shadow: 0 0 0 0.15rem rgba(114, 0, 31, 0.25);
    }

.btn-check:checked + .card {
    border: 2px solid #72001F;
    background-color: #f8faff;
}
/* ===============================
       Quantity Selector
    =============================== */

.product-quantity {
    display: flex;
    flex-direction: column;
}

.quantity-selector {
    display: block;
    align-items: center;
    max-width: 150px;
}

.quantity-btn {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    font-weight: 600;
    user-select: none;
}

    .quantity-btn:hover {
        background-color: color-mix(in srgb, var(--accent-color), transparent 30%);
    }

    .quantity-btn.decrease {
        border-radius: 4px 4px 0 0px;
    }

    .quantity-btn.increase {
        border-radius: 0 0px 4px 4px;
    }

.quantity-input {
    width: 45px;
    height: 75px;
    text-align: center;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    color: var(--default-color);
    background-color: var(--surface-color);
    font-size: 18px;
}

    .quantity-input:focus {
        outline: none;
        border-color: var(--accent-color);
    }

    /* Remove number spinners if ever changed to number */
    .quantity-input::-webkit-inner-spin-button,
    .quantity-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }