:root {
    --primary: #D48B3A;
    --secondary: #7E992D;
    --light1: #ECDCD4;
    --light2: #ECCCC4;
    --light3: #DCDFED;
    --text-dark: #333;
    --text-light: #fff;
}

/* Global layout */
body {
    background-color: var(--light1);
    color: var(--text-dark);
    font-family: Arial, sans-serif;
}

/* Navbar */
.navbar {
    background-color: var(--primary);
}

.navbar a {
    color: var(--text-light);
    font-weight: bold;
}

/* Footer */
.footer {
    background-color: var(--secondary);
    color: var(--text-light);
    padding: 20px;
    text-align: center;
    margin-top: 40px;
}

/* -----------------------------------------
   RECIPE PAGE — CLEAN, MATCHES HOMEPAGE
   ----------------------------------------- */

/* Title (same as homepage h1) */
.recipe-title {
    color: var(--primary);
}

/* Section headers + labels (all identical) */
.recipe-section,
.recipe-label {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--secondary);
}

/* Image (never huge again) */
.recipe-image {
    max-width: 300px;
    border: 1px solid #ccc;
    padding: 5px;
}

/* Text blocks */
.recipe-text,
.recipe-meta,
.recipe-list {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

/* List spacing */
.recipe-list li {
    margin-bottom: 6px;
}

.text-secondary-custom { color: var(--secondary); }
.text-title-green { color: var(--secondary); }

/* CONTACT FORM PALETTE FIX */
.contact-form input.form-control,
.contact-form textarea.form-control {
    background-color: var(--light3);
    color: var(--dark);
    border: 1px solid var(--secondary);
}

.contact-form input.form-control:focus,
.contact-form textarea.form-control:focus {
    background-color: var(--light3);
    color: var(--dark);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.25);
    outline: none;
}

/* ADD RECIPE FORM PALETTE FIX */
.recipe-form input.form-control,
.recipe-form textarea.form-control,
.recipe-form select.form-select {
    background-color: var(--light3);
    color: var(--dark);
    border: 1px solid var(--secondary);
}

.recipe-form input.form-control:focus,
.recipe-form textarea.form-control:focus,
.recipe-form select.form-select:focus {
    background-color: var(--light3);
    color: var(--dark);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.25);
    outline: none;
}

/* PALETTE INFO BOX */
.palette-info-box {
    background-color: var(--light3);
    border: 1px solid var(--secondary);
    padding: 15px;
    border-radius: 4px;
    color: var(--dark);
}
.palette-info-box h4 {
    color: var(--secondary);
    margin-top: 0;
}

/* FULL RECIPE FORM PALETTE FIX */
.recipe-form input,
.recipe-form textarea,
.recipe-form select {
    background-color: var(--light3);
    color: var(--dark);
    border: 1px solid var(--secondary);
}

.recipe-form input:focus,
.recipe-form textarea:focus,
.recipe-form select:focus {
    background-color: var(--light3);
    color: var(--dark);
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.25);
    outline: none;
}

/* CHECKBOXES */
.recipe-form input[type="checkbox"] {
    accent-color: #0d6efd;
}

/* FILE UPLOAD */
.recipe-form input[type="file"] {
    padding: 6px;
    background-color: var(--light3);
    color: var(--dark);
    border: 1px solid var(--secondary);
}

/* -----------------------------------------
   GLOBAL BUTTON SYSTEM — SITE WIDE
   ----------------------------------------- */

.btn,
.btn-primary,
.btn-secondary,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    background-color: var(--primary);
    color: var(--text-light);
    border: 1px solid var(--primary);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

/* Hover — identical behaviour everywhere */
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-light);
    filter: brightness(0.9);
}

.recipe-box {
    background: var(--light3);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid var(--secondary);
    width: fit-content;
}

.recipe-box ul {
    margin: 0;
    padding-left: 20px;
}

.recipe-box .recipe-list {
    font-size: inherit;
}

/* -----------------------------------------
   BROWSE RECIPES — SCROLLABLE LIST VIEW
   ----------------------------------------- */
.recipe-list-container {
    height: 600px;
    overflow-y: auto;
    background: var(--light3);
    border: 1px solid var(--secondary);
    border-radius: 8px;
    padding: 0;
}

.recipe-list-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--secondary);
    cursor: pointer;
}

.recipe-list-item:hover {
    background: var(--light2);
}

.recipe-thumb {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.recipe-list-text {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.recipe-list-title {
    font-weight: bold;
    color: var(--primary);
}

.recipe-list-desc {
    color: var(--secondary);
}

/* SHOPPING LIST — FINAL CLEAN VERSION */

/* Make the table behave properly */
.shopping-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Header bar (title row) */
.shopping-table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.shopping-table thead th {
    background-color: var(--light3);
    color: var(--text-dark);
    padding: 10px 12px;
    border-bottom: 2px solid var(--secondary);
}

/* Scrollable ingredient list */
.shopping-table tbody {
    display: block;
    max-height: 350px;     /* scroll height */
    overflow-y: auto;
    width: 100%;
}

/* Keep rows aligned with header */
.shopping-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Row styling */
.shopping-table tbody td {
    background-color: var(--light3);
    color: var(--text-dark);
    padding: 10px 12px;
    border: none;
}

/* SHOPPING LIST — SMALL X BUTTON */
.shopping-table .btn-danger.btn-sm {
    padding: 0 6px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    height: 22px !important;
}

.shopping-table {
    width: auto;
    max-width: 500px;
}

.shopping-table {
    width: auto !important;
}

.shopping-list-wrapper {
    display: flex;
    justify-content: center;
}

.shopping-page {
    text-align: center;
}

.navbar .navbar-toggler {
border: none !important;
padding: 14px !important;
}

.navbar .navbar-toggler-icon {
width: 34px !important;
height: 34px !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

@media (max-width: 768px) {
.navbar-nav .nav-link {
font-size: 20px !important;
padding: 14px 0 !important;
}
}