/* =========================================
   Variables & Resets
   ========================================= */
:root {
    --dark-teal: #084c41;
    --bright-green: #10a342;
    --bright-green-hover: #0c8a36;
    --light-gray-bg: #f8f9fa;
    --summary-header-bg: #e6f4ea; /* Pale green from wireframe */
}

body.bg-light-gray {
    background-color: var(--light-gray-bg);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.bg-teal { background-color: var(--dark-teal) !important; }
.text-teal { color: var(--dark-teal) !important; }
.bg-green { background-color: var(--bright-green) !important; }
.btn-green { background-color: var(--bright-green); border-color: var(--bright-green); color: white; }
.btn-green:hover { background-color: var(--bright-green-hover); border-color: var(--bright-green-hover); color: white; }
.cursor-pointer { cursor: pointer; }

/* =========================================
   Cart Item Styling
   ========================================= */
.cart-item-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    background-color: #e9ecef;
}

.qty-input {
    width: 60px;
    text-align: center;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* =========================================
   Order Summary Styling (From Wireframe)
   ========================================= */
.summary-card {
    border: 1px solid var(--bright-green);
    border-radius: 8px;
    overflow: hidden;
}

.summary-header {
    background-color: var(--summary-header-bg);
    color: var(--dark-teal);
}