/* =========================
   GLOBAL
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #fffaf5;
    color: #2d1b12;
}

a {
    text-decoration: none;
}


/* =========================
   HEADER
========================= */

header {
    background: #4b2416;
    color: white;

    display: flex;
    align-items: center;

    padding: 16px 5%;

    gap: 35px;

    position: sticky;
    top: 0;

    z-index: 1000;

    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}


/* LOGO */

.logo {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 200px;
}

.logo-icon {
    font-size: 35px;
}

.logo h1 {
    font-size: 27px;
}

.logo span {
    color: #f5a623;
    font-size: 20px;
    font-style: italic;
}


/* SEARCH */

.search-box {
    display: flex;
    flex: 1;

    max-width: 420px;
}

.search-box input {

    width: 100%;

    padding: 13px 15px;

    border: none;

    outline: none;

    font-size: 15px;

    border-radius: 8px 0 0 8px;
}

.search-box button {

    background: #f28c28;

    border: none;

    color: white;

    padding: 0 18px;

    font-size: 18px;

    cursor: pointer;

    border-radius: 0 8px 8px 0;
}

.search-box button:hover {
    background: #d96f0c;
}


/* NAVIGATION */

nav {
    display: flex;
    align-items: center;

    gap: 22px;

    white-space: nowrap;
}

nav a {

    color: white;

    font-size: 15px;

    transition: 0.3s;
}

nav a:hover {
    color: #f5a623;
}

.cart-link {
    background: #f28c28;

    padding: 10px 15px;

    border-radius: 7px;
}

.user-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 8px 12px;
    border-radius: 999px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5a623;
    color: #4b2416;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
}

.user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.user-meta span {
    font-size: 11px;
    opacity: 0.8;
}

.user-meta strong {
    font-size: 14px;
}

.login-btn,
.signout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.3s;
}

.login-btn {
    background: #f28c28;
    color: #fff;
}

.login-btn:hover {
    background: #d96f0c;
}

.signout-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
}

.signout-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.profile-section {
    padding: 40px 8% 20px;
    background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
}

.profile-card {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, #fffaf4, #fff);
    border: 1px solid #f3d9bd;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(75, 36, 22, 0.08);
    padding: 30px;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f39d3d, #d96f0c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 24px;
}

.profile-header p {
    color: #e56b00;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.profile-header h3 {
    font-size: 30px;
    color: #2d1b12;
}

.profile-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.profile-details div {
    background: #fff7f0;
    border: 1px solid #f1dcc1;
    border-radius: 14px;
    padding: 18px 16px;
}

.profile-details span {
    display: block;
    color: #7a5c4d;
    font-size: 12px;
    margin-bottom: 8px;
}

.profile-details strong {
    color: #2d1b12;
    font-size: 15px;
}

.profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.small-btn {
    padding: 12px 18px;
    font-size: 14px;
}


/* =========================
   HERO SECTION
========================= */

.hero {

    min-height: 560px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 70px 8%;

    gap: 60px;

    background:
    linear-gradient(
        120deg,
        #fff3e6,
        #fffaf5
    );
}


.hero-content {
    max-width: 600px;
}


.small-title {

    display: inline-block;

    background: #ffe0bd;

    color: #a84b00;

    padding: 9px 16px;

    border-radius: 30px;

    font-weight: bold;

    margin-bottom: 20px;
}


.hero h2 {

    font-size: 55px;

    line-height: 1.2;

    margin-bottom: 20px;

    animation: fadeUp 1s ease;
}

.hero h2 span {

    color: #e56b00;

    display: block;
}


.hero p {

    font-size: 18px;

    line-height: 1.7;

    color: #666;

    margin-bottom: 30px;
}


/* BUTTONS */

.hero-buttons {

    display: flex;

    gap: 15px;
}


.btn-primary {

    background: #e56b00;

    color: white;

    padding: 15px 25px;

    border-radius: 8px;

    font-weight: bold;

    transition: 0.3s;
}

.btn-primary:hover {

    background: #b94f00;

    transform: translateY(-3px);
}


.btn-secondary {

    border: 2px solid #e56b00;

    color: #e56b00;

    padding: 13px 25px;

    border-radius: 8px;

    font-weight: bold;

    transition: 0.3s;
}

.btn-secondary:hover {

    background: #e56b00;

    color: white;
}


/* HERO IMAGE */

.hero-image {

    width: 450px;

    height: 350px;

    overflow: hidden;

    border-radius: 25px;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.2);

    animation: floatImage 4s ease-in-out infinite;
}

.hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* =========================
   FEATURES
========================= */

.features {

    width: 85%;

    margin: -45px auto 70px;

    display: grid;

    grid-template-columns:
    repeat(4, 1fr);

    gap: 20px;
}


.feature-box {

    background: white;

    padding: 25px;

    display: flex;

    align-items: center;

    gap: 15px;

    border-radius: 12px;

    box-shadow:
        0 5px 20px rgba(0,0,0,0.08);

    transition: 0.3s;
}

.feature-box:hover {

    transform: translateY(-7px);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.15);
}


.feature-box i {

    font-size: 28px;

    color: #e56b00;
}


.feature-box h3 {

    margin-bottom: 5px;
}

.feature-box p {

    font-size: 13px;

    color: #777;

    line-height: 1.5;
}


/* =========================
   SECTION HEADING
========================= */

.section-heading {

    text-align: center;

    margin-bottom: 40px;
}

.section-heading span {

    color: #e56b00;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: 13px;
}

.section-heading h2 {

    font-size: 35px;

    margin: 10px 0;
}

.section-heading p {

    color: #777;

    font-size: 16px;
}


/* =========================
   STATES SECTION
========================= */

.states-section {

    padding: 70px 8%;

    background: #fff;
}


.states-grid {

    display: grid;

    grid-template-columns:
    repeat(3, 1fr);

    gap: 25px;
}


.state-card {

    background:
        linear-gradient(
            135deg,
            #fff8f0,
            #fff
        );

    padding: 0;

    border-radius: 15px;

    border: 1px solid #f2dfcc;

    transition: 0.4s;

    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;
}


.state-image {

    width: 100%;

    height: 200px;

    overflow: hidden;

    border-radius: 15px 15px 0 0;
}


.state-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.4s ease;
}


.state-card:hover .state-image img {

    transform: scale(1.1);
}


.state-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 15px 30px rgba(0,0,0,0.12);
}


.state-number {

    font-size: 45px;

    font-weight: bold;

    color: #f5d6ba;

    margin-bottom: 15px;

    margin-top: 20px;

    padding: 0 30px;
}


.state-card h3 {

    font-size: 23px;

    margin-bottom: 10px;

    padding: 0 30px;
}


.state-card p {

    color: #666;

    line-height: 1.6;

    margin-bottom: 20px;

    padding: 0 30px;

    flex: 1;
}


.state-card a {

    color: #e56b00;

    font-weight: bold;

    padding: 0 30px 30px 30px;
}


/* =========================
   POPULAR FOOD
========================= */

.popular-foods {

    padding: 80px 8%;

    background: #fff7ef;
}


.food-grid {

    display: grid;

    grid-template-columns:
    repeat(4, 1fr);

    gap: 25px;
}


.food-card {

    background: white;

    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 5px 20px rgba(0,0,0,0.08);

    transition: 0.4s;
}


.food-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 15px 35px rgba(0,0,0,0.15);
}


.food-card img {

    width: 100%;

    height: 200px;

    object-fit: cover;
}


.food-info {

    padding: 20px;
}


.food-info span {

    color: #e56b00;

    font-size: 13px;

    font-weight: bold;
}


.food-info h3 {

    font-size: 21px;

    margin: 8px 0;
}


.food-info p {

    color: #777;

    font-size: 14px;

    line-height: 1.5;

    margin-bottom: 18px;
}


.food-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.food-bottom strong {

    font-size: 20px;

    color: #4b2416;
}


.food-bottom a {

    background: #e56b00;

    color: white;

    padding: 8px 14px;

    border-radius: 6px;
}


/* =========================
   VIEW ALL BUTTON
========================= */

.view-all {

    text-align: center;

    margin-top: 40px;
}


.view-all a {

    background: #4b2416;

    color: white;

    padding: 15px 25px;

    border-radius: 8px;

    font-weight: bold;

    transition: 0.3s;
}


.view-all a:hover {

    background: #e56b00;
}


/* =========================
   FOOTER
========================= */

footer {

    background: #3d1c10;

    color: white;

    padding: 60px 8%;

    display: grid;

    grid-template-columns:
    2fr 1fr 1fr 1fr;

    gap: 40px;
}


footer h2 {

    color: #f5a623;

    margin-bottom: 15px;
}


footer h3 {

    margin-bottom: 20px;

    color: #f5a623;
}


footer p {

    color: #ddd;

    line-height: 1.7;

    font-size: 14px;
}


footer a {

    display: block;

    color: #ddd;

    margin-bottom: 12px;

    font-size: 14px;
}


footer a:hover {

    color: #f5a623;
}


/* =========================
   COPYRIGHT
========================= */

.copyright {

    background: #291209;

    color: #bbb;

    text-align: center;

    padding: 18px;

    font-size: 14px;
}


/* =========================
   ANIMATIONS
========================= */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}


@keyframes floatImage {

    0% {

        transform: translateY(0);
    }

    50% {

        transform: translateY(-15px);
    }

    100% {

        transform: translateY(0);
    }
}


/* =========================
   RESPONSIVE DESIGN
========================= */

@media (max-width: 1100px) {

    header {

        flex-wrap: wrap;
    }

    nav {

        width: 100%;

        justify-content: center;
    }


    .food-grid {

        grid-template-columns:
        repeat(2, 1fr);
    }


    .features {

        grid-template-columns:
        repeat(2, 1fr);
    }
}


@media (max-width: 768px) {

    header {

        flex-direction: column;

        align-items: stretch;
    }


    .logo {

        justify-content: center;
    }


    .search-box {

        max-width: 100%;
    }


    nav {

        flex-wrap: wrap;

        gap: 15px;
    }


    .hero {

        flex-direction: column;

        text-align: center;

        padding: 60px 8%;
    }


    .hero h2 {

        font-size: 40px;
    }


    .hero-buttons {

        justify-content: center;
    }


    .hero-image {

        width: 100%;

        height: 280px;
    }


    .features {

        grid-template-columns: 1fr;

        margin-top: 30px;
    }


    .states-grid {

        grid-template-columns: 1fr;
    }


    .food-grid {

        grid-template-columns: 1fr;
    }


    footer {

        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 500px) {

    .hero h2 {

        font-size: 32px;
    }


    .hero-buttons {

        flex-direction: column;
    }


    footer {

        grid-template-columns: 1fr;
    }
}

/* ================================
   CART PAGE
================================ */

.cart-page {
    min-height: 100vh;
    background: #fff8f2;
    padding: 50px 7%;
}


.cart-title {
    text-align: center;
    margin-bottom: 40px;
}


.cart-title h1 {
    font-size: 38px;
    color: #3d1c10;
    margin-bottom: 10px;
}


.cart-title p {
    color: #777;
    font-size: 17px;
}


/* MAIN CART */

.cart-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    align-items: start;
}


/* CART ITEMS */

.cart-items {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
}


.cart-item {
    display: grid;

    grid-template-columns:
    130px
    1.5fr
    100px
    130px
    100px
    50px;

    align-items: center;

    gap: 20px;

    padding: 20px;

    border-bottom: 1px solid #eee;
}


.cart-item:last-child {
    border-bottom: none;
}


/* IMAGE */

.cart-item img {
    width: 120px;
    height: 100px;

    object-fit: cover;

    border-radius: 12px;
}


/* FOOD INFO */

.cart-food-info h2 {
    font-size: 20px;
    color: #3d1c10;
    margin-bottom: 7px;
}


.cart-food-info p {
    font-size: 14px;
    color: #777;
    margin-bottom: 5px;
}


.cart-food-info .state {
    color: #e56b00;
    font-weight: bold;
}


.stock {
    display: inline-block;

    margin-top: 8px;

    color: #2e9b4d;

    font-size: 13px;

    font-weight: bold;
}


/* PRICE */

.cart-price h3 {
    color: #e56b00;
    font-size: 20px;
}


/* QUANTITY */

.quantity {
    display: flex;
    align-items: center;
    gap: 12px;
}


.quantity button {
    width: 35px;
    height: 35px;

    border: none;

    background: #f6a45c;

    color: white;

    font-size: 20px;

    border-radius: 7px;

    cursor: pointer;
}


.quantity button:hover {
    background: #e56b00;
}


.quantity span {
    font-size: 17px;
    font-weight: bold;
}


/* SUBTOTAL */

.subtotal {
    font-size: 18px;
    font-weight: bold;
    color: #3d1c10;
}


/* REMOVE */

.remove-btn {
    border: none;
    background: transparent;

    color: #d9534f;

    font-size: 20px;

    cursor: pointer;
}


/* ORDER SUMMARY */

.order-summary {
    background: white;

    padding: 30px;

    border-radius: 15px;

    box-shadow: 0 5px 25px rgba(0,0,0,0.08);

    position: sticky;

    top: 110px;
}


.order-summary h2 {
    color: #3d1c10;
    margin-bottom: 25px;
}


/* SUMMARY ROW */

.summary-row {
    display: flex;

    justify-content: space-between;

    margin-bottom: 18px;

    color: #666;

    font-size: 16px;
}


.summary-row.total {
    border-top: 1px solid #ddd;

    padding-top: 20px;

    font-size: 20px;

    font-weight: bold;

    color: #3d1c10;
}


/* CHECKOUT BUTTON */

.checkout-btn {
    display: block;

    width: 100%;

    background: #e56b00;

    color: white;

    text-align: center;

    padding: 15px;

    border-radius: 8px;

    font-weight: bold;

    margin-top: 25px;

    transition: 0.3s;
}


.checkout-btn:hover {
    background: #b94f00;
}


/* CONTINUE SHOPPING */

.continue-shopping {
    display: block;

    text-align: center;

    margin-top: 20px;

    color: #e56b00;

    font-size: 14px;

    font-weight: bold;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .cart-container {
        grid-template-columns: 1fr;
    }


    .cart-item {
        grid-template-columns:
        120px 1fr;
    }


    .cart-price,
    .quantity,
    .subtotal,
    .remove-btn {
        margin-top: 10px;
    }


    .order-summary {
        position: static;
    }

}


@media (max-width: 600px) {

    .cart-page {
        padding: 30px 4%;
    }


    .cart-title h1 {
        font-size: 28px;
    }


    .cart-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    .cart-item img {
        width: 100%;
        height: 180px;
    }

}
/* ============================= */
/* FOOD / PRODUCT SECTION */
/* ============================= */

.food-section {
    padding: 50px 8%;
    background: #fff8f1;
}

.state-title {
    font-size: 30px;
    font-weight: 700;
    color: #4a2511;
    margin: 40px 0 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.state-title::before {
    content: "📍";
    font-size: 25px;
}

/* Product Grid */

.food-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 28px;
    margin-bottom: 40px;
}


/* ============================= */
/* FOOD CARD */
/* ============================= */

.food-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(78, 37, 17, 0.12);
    transition: 0.3s ease;
    position: relative;
    border: 1px solid #f1e2d5;
}

.food-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(78, 37, 17, 0.2);
}


/* ============================= */
/* FOOD IMAGE */
/* ============================= */

.food-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: 0.4s;
}

.food-card:hover img {
    transform: scale(1.08);
}


/* Image container */

.food-image {
    overflow: hidden;
    position: relative;
}


/* ============================= */
/* FOOD DETAILS */
/* ============================= */

/* ===================================
   FOOD PRODUCT SECTION
=================================== */

.food-section {
    padding: 50px 8%;
    background: #fff8f1;
    max-width: 1400px;
    margin: auto;
}


/* State Heading */

.state-title {
    font-size: 30px;
    font-weight: 700;
    color: #4b2615;
    margin: 45px 0 25px;
    padding-left: 15px;
    border-left: 5px solid #e67e22;
}

.state-title::before {
    content: "📍";
    margin-right: 8px;
}


/* Product Grid */

.food-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 50px;
}


/* ===================================
   FOOD CARD
=================================== */

.food-card {
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(75, 38, 21, 0.12);
    transition: all 0.3s ease;
    border: 1px solid #f0dfd2;
    position: relative;
}

.food-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(75, 38, 21, 0.2);
}


/* Image Section */

.food-image {
    height: 220px;
    overflow: hidden;
    position: relative;
    background: #f3f3f3;
}

.food-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.food-card:hover .food-image img {
    transform: scale(1.08);
}


/* Food Badge */

.food-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff;
    color: #d35400;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    z-index: 2;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}


/* ===================================
   FOOD DETAILS
=================================== */

.food-details {
    padding: 20px;
}

.food-details h3 {
    font-size: 22px;
    color: #3b2215;
    margin: 0 0 10px;
}

.food-state {
    color: #777;
    font-size: 15px;
    margin-bottom: 12px;
}

.food-description {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    min-height: 48px;
    margin-bottom: 15px;
}


/* Rating */

.food-rating {
    display: inline-block;
    background: #1f8f4d;
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 15px;
}


/* ===================================
   PRICE + BUTTON
=================================== */

.food-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.food-price {
    font-size: 22px;
    font-weight: bold;
    color: #d35400;
}

.add-btn {
    background: #ff7a00;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.add-btn:hover {
    background: #4b2615;
    transform: scale(1.05);
}


/* ===================================
   RESPONSIVE DESIGN
=================================== */

@media (max-width: 1000px) {

    .food-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .food-section {
        padding: 30px 20px;
    }

    .food-grid {
        grid-template-columns: 1fr;
    }

    .state-title {
        font-size: 24px;
    }

}
/* =========================================
   EXTRA PRODUCT PAGE DESIGN
   ADD THIS AT THE BOTTOM OF style.css
========================================= */


/* PRODUCT HERO */

.food-hero {
    background: linear-gradient(135deg, #fff3e8, #ffe1c4);
    padding: 60px 8%;
    text-align: center;
    margin-bottom: 30px;
}

.food-hero .small-title {
    color: #d35400;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.food-hero h1 {
    font-size: 42px;
    color: #3b1d0f;
    margin: 12px 0;
}

.food-hero p {
    font-size: 18px;
    color: #6b5b53;
}


/* FOOD SECTION */

.state-food-section {
    padding: 40px 8%;
}


/* STATE TITLE */

.state-food-section h2 {
    font-size: 30px;
    color: #4a2418;
    margin-bottom: 30px;
    border-left: 6px solid #ff8c00;
    padding-left: 15px;
}


/* FOOD GRID */

.food-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}


/* FOOD CARD */

.food-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transition: 0.4s;
}


/* CARD HOVER */

.food-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
}


/* FOOD IMAGE */

.food-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: 0.5s;
}

.food-card:hover img {
    transform: scale(1.08);
}


/* FOOD INFORMATION */

.food-info {
    padding: 25px;
}


/* FOOD NAME */

.food-info h3 {
    font-size: 26px;
    color: #3b1d0f;
    margin-bottom: 12px;
}


/* STATE NAME */

.food-info p:first-of-type {
    color: #d35400;
    font-weight: bold;
}


/* DESCRIPTION */

.food-info p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}


/* PRICE SECTION */

.price {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 22px;
    font-weight: bold;
    color: #c2410c;
    margin-top: 18px;
}


/* ADD BUTTON */

.price button {
    background: linear-gradient(135deg, #ff8c00, #f4511e);
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: 0.3s;
}


/* BUTTON HOVER */

.price button:hover {
    background: #3b1d0f;
    transform: scale(1.08);
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .food-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .product-hero h1 {
        font-size: 30px;
    }

    .state-food-section {
        padding: 30px 20px;
    }

    .state-food-section h2 {
        font-size: 24px;
    }

    .food-card img {
        height: 220px;
    }

}

/* CART QUANTITY BUTTONS */

.quantity-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quantity-control button {
    width: 38px;
    height: 38px;
    border: none;
    background: #f28c28;
    color: white;
    font-size: 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.quantity-control button:hover {
    background: #5b2a1d;
    transform: scale(1.05);
}

.quantity {
    font-size: 18px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.subtotal {
    margin-top: 12px;
    font-weight: bold;
    color: #5b2a1d;
}
/* =====================================================
   CHECKOUT PAGE
===================================================== */

.checkout-container {
    width: 90%;
    max-width: 1200px;
    margin: 50px auto 80px;
}


/* ================= HEADING ================= */

.checkout-heading {
    text-align: center;
    margin-bottom: 40px;
}

.checkout-heading h1 {
    font-size: 38px;
    margin-bottom: 8px;
    color: #292929;
}

.checkout-heading h1 span {
    font-size: 32px;
}

.checkout-heading p {
    color: #777;
    font-size: 16px;
}


/* ================= LAYOUT ================= */

.checkout-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 35px;
    align-items: start;
}


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

.checkout-form {
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
}

.checkout-form h2 {
    font-size: 25px;
    margin-bottom: 5px;
    color: #292929;
}

.form-subtitle {
    color: #777;
    margin-bottom: 30px;
}


.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}


.form-group {
    margin-bottom: 22px;
}


.form-group label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}


.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 13px 15px;

    border: 1px solid #ddd;
    border-radius: 8px;

    font-size: 15px;

    outline: none;

    transition: 0.3s;

    box-sizing: border-box;
}


.form-group textarea {
    resize: vertical;
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: #d88924;

    box-shadow:
        0 0 0 3px rgba(216, 137, 36, 0.12);
}


/* ================= PAYMENT ================= */

.payment-section {
    margin-top: 15px;
    padding-top: 20px;

    border-top: 1px solid #eee;
}


.payment-section h2 {
    margin-bottom: 20px;
}


.payment-option {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid #ddd;

    border-radius: 10px;

    cursor: pointer;

    transition: 0.3s;
}


.payment-option:hover {
    border-color: #d88924;
    background: #fffaf3;
}


.payment-option input {
    width: 18px;
    height: 18px;
}


.payment-option strong {
    display: block;

    margin-bottom: 4px;
}


.payment-option small {
    color: #777;
}


/* ================= PLACE ORDER ================= */

.place-order-btn {
    width: 100%;

    margin-top: 20px;

    padding: 16px;

    border: none;

    border-radius: 8px;

    background: #d87918;

    color: white;

    font-size: 17px;

    font-weight: 600;

    cursor: pointer;

    transition: 0.3s;
}


.place-order-btn:hover {
    background: #b95f0e;

    transform: translateY(-1px);
}


/* ================= SUMMARY ================= */

.checkout-summary {
    background: #ffffff;

    padding: 30px;

    border-radius: 15px;

    box-shadow:
        0 5px 25px rgba(0, 0, 0, 0.08);

    position: sticky;

    top: 25px;
}


.checkout-summary h2 {
    font-size: 24px;

    margin-bottom: 25px;
}


/* ================= SUMMARY ITEMS ================= */

.summary-item {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 16px 0;

    border-bottom: 1px solid #eee;
}


.summary-item div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.summary-item span {
    font-size: 13px;

    color: #777;
}


.summary-item > strong {
    color: #d87918;
}


/* ================= SUMMARY LINES ================= */

.summary-line {
    display: flex;

    justify-content: space-between;

    padding: 12px 0;

    color: #666;
}


.summary-total {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 20px;

    margin-top: 10px;

    border-top: 2px solid #eee;

    font-size: 20px;
}


.summary-total strong {
    color: #d87918;

    font-size: 22px;
}


/* ================= SECURITY ================= */

.secure-message {
    margin-top: 25px;

    padding: 13px;

    text-align: center;

    background: #f5faf5;

    color: #4d7650;

    border-radius: 8px;

    font-size: 14px;
}


/* ================= BACK TO CART ================= */

.back-cart {
    display: block;

    text-align: center;

    margin-top: 22px;

    color: #d87918;

    text-decoration: none;

    font-weight: 600;
}


.back-cart:hover {
    text-decoration: underline;
}


/* ================= FOOTER ================= */

.footer {
    text-align: center;

    background: #25151e;

    color: white;

    padding: 40px 20px;

    margin-top: 60px;
}


.footer h3 {
    margin-bottom: 10px;

    font-size: 22px;
}


.footer p {
    color: #ddd;
}


.footer .copyright {
    margin-top: 20px;

    font-size: 13px;

    color: #aaa;
}


/* =====================================================
   RESPONSIVE DESIGN
===================================================== */

@media (max-width: 900px) {

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }

}


@media (max-width: 600px) {

    .checkout-container {
        width: 94%;
        margin-top: 30px;
    }


    .checkout-heading h1 {
        font-size: 30px;
    }


    .checkout-form {
        padding: 22px;
    }


    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }


    .checkout-summary {
        padding: 22px;
    }

}
/* =====================================================
   ORDER SUCCESS PAGE
===================================================== */

.order-success-container {

    min-height: 650px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 60px 20px;

    background: #fafafa;

}


/* ================= SUCCESS CARD ================= */

.success-card {

    width: 100%;

    max-width: 750px;

    background: white;

    padding: 50px 45px;

    text-align: center;

    border-radius: 18px;

    box-shadow:
        0 8px 35px rgba(0, 0, 0, 0.08);

}


/* ================= SUCCESS ICON ================= */

.success-icon {

    width: 85px;

    height: 85px;

    margin: 0 auto 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: #e8f7ec;

    color: #299447;

    font-size: 48px;

    font-weight: bold;

    border: 5px solid #ccebd4;

}


/* ================= TITLE ================= */

.success-card h1 {

    font-size: 38px;

    margin-bottom: 12px;

    color: #292929;

}


.success-message {

    font-size: 18px;

    color: #555;

    margin-bottom: 10px;

}


.success-message strong {

    color: #d87918;

}


.delivery-message {

    color: #777;

    font-size: 15px;

    margin-bottom: 30px;

}


/* ================= ORDER ID ================= */

.order-number {

    background: #fff8ef;

    border: 1px solid #f2d4ae;

    padding: 18px;

    border-radius: 10px;

    margin-bottom: 30px;

}


.order-number span {

    display: block;

    color: #777;

    font-size: 14px;

    margin-bottom: 5px;

}


.order-number strong {

    font-size: 22px;

    color: #d87918;

}


/* ================= DETAILS ================= */

.success-details {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin-bottom: 35px;

}


.detail-box {

    padding: 18px 10px;

    border: 1px solid #eee;

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

}


.detail-box > span {

    font-size: 27px;

}


.detail-box strong {

    display: block;

    font-size: 14px;

    color: #333;

}


.detail-box p {

    margin: 5px 0 0;

    font-size: 13px;

    color: #777;

}


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

.success-buttons {

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}


.explore-btn {

    display: inline-block;

    padding: 14px 25px;

    background: #d87918;

    color: white;

    text-decoration: none;

    border-radius: 8px;

    font-weight: 600;

    transition: 0.3s;

}


.explore-btn:hover {

    background: #b95f0e;

    transform: translateY(-2px);

}


.home-btn {

    display: inline-block;

    padding: 14px 25px;

    border: 1px solid #d87918;

    color: #d87918;

    text-decoration: none;

    border-radius: 8px;

    font-weight: 600;

    transition: 0.3s;

}


.home-btn:hover {

    background: #fff5e9;

}


/* ================= MOBILE ================= */

@media (max-width: 650px) {

    .order-success-container {

        padding: 35px 15px;

    }


    .success-card {

        padding: 35px 20px;

    }


    .success-card h1 {

        font-size: 30px;

    }


    .success-details {

        grid-template-columns: 1fr;

    }


    .success-buttons {

        flex-direction: column;

    }


    .explore-btn,
    .home-btn {

        width: 100%;

        box-sizing: border-box;

    }

}

.state-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 8px;
}

.state-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* =====================================
   SEARCH BAR - TASTETRAILS INDIA
===================================== */

.search-form {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 650px;
    margin: 25px auto;
    background: white;
    border-radius: 50px;
    padding: 6px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.search-form input {
    flex: 1;
    border: none;
    outline: none;
    padding: 16px 20px;
    font-size: 16px;
    border-radius: 50px;
}

.search-form button {
    border: none;
    background: #7b2d26;
    color: white;
    padding: 14px 25px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}

.search-form button:hover {
    background: #f4a261;
}


/* Mobile */

@media (max-width: 600px) {

    .search-form {
        margin: 20px;
    }

    .search-form input {
        width: 100%;
    }

    .search-form button {
        padding: 13px 18px;
    }

}

/* =====================================
   SEARCH RESULT PAGE
===================================== */

.search-page {
    text-align: center;
    padding: 60px 20px 30px;
    background: #fff3e8;
}

.search-page h1 {
    color: #7b2d26;
    font-size: 38px;
    margin-bottom: 20px;
}

.search-results {
    padding: 50px 8%;
}

.search-results h2 {
    color: #7b2d26;
    margin-bottom: 30px;
}


/* ADD TO CART BUTTON */

.add-cart-btn {
    background: #7b2d26;
    color: white;
    padding: 10px 16px;
    text-decoration: none;
    border-radius: 25px;
    font-size: 14px;
    margin-left: 15px;
    transition: 0.3s;
}

.add-cart-btn:hover {
    background: #f4a261;
}


/* NO RESULT */

.no-result {
    text-align: center;
    padding: 50px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.no-result h3 {
    font-size: 25px;
    color: #7b2d26;
}

.no-result p {
    color: #777;
    margin-top: 10px;
}
/* ================================
   EMPTY CART DESIGN
================================ */

.cart-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 35px;
    align-items: start;
}


/* Empty cart box */

.empty-cart {
    background: #ffffff;
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    min-height: 280px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.empty-cart i {
    font-size: 50px;
    color: #e67e22;
    margin-bottom: 15px;
}


.empty-cart h2 {
    font-size: 30px;
    color: #3d2b1f;
    margin-bottom: 10px;
}


.empty-cart p {
    font-size: 18px;
    color: #777;
    margin-bottom: 20px;
}


.empty-cart a {
    display: inline-block;
    text-decoration: none;
    background: #f57c00;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: bold;
    transition: 0.3s;
}


.empty-cart a:hover {
    background: #d96500;
    transform: translateY(-2px);
}


/* ================================
   ORDER SUMMARY
================================ */

.order-summary {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    min-height: 280px;
}


.order-summary h2 {
    font-size: 28px;
    color: #3d2b1f;
    margin-bottom: 25px;
}


.summary-row {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    font-size: 18px;
    color: #666;
}


.summary-total {
    border-top: 1px solid #ddd;
    margin-top: 20px;
    padding-top: 20px;

    display: flex;
    justify-content: space-between;

    font-size: 22px;
    font-weight: bold;
    color: #3d2b1f;
}


/* Checkout button */

.checkout-btn {
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 25px;

    background: #f57c00;
    color: white;

    padding: 15px;
    border-radius: 10px;

    text-decoration: none;
    font-size: 17px;
    font-weight: bold;

    transition: 0.3s;
}


.checkout-btn:hover {
    background: #d96500;
}


/* ================================
   MOBILE RESPONSIVE
================================ */

@media (max-width: 900px) {

    .cart-container {
        grid-template-columns: 1fr;
    }

    .empty-cart {
        min-height: 250px;
    }

}

/* ===============================
   LOGIN / SIGNUP LINKS
================================ */

.auth-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-links a {
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 20px;
    font-weight: 600;
    transition: 0.3s;
}

.login-link {
    color: #5b2c06;
    background: #fff4e6;
}

.signup-link {
    background: #e67e22;
    color: white;
}

.signup-link:hover {
    background: #c85f0c;
    transform: translateY(-2px);
}


/* ===============================
   MY ACCOUNT DROPDOWN
================================ */

.account-menu {
    position: relative;
    display: inline-block;
}

.account-btn {
    border: none;
    background: #fff4e6;
    color: #5b2c06;
    padding: 10px 18px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.account-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 48px;
    width: 210px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    overflow: hidden;
    z-index: 999;
}

.account-menu:hover .account-dropdown {
    display: block;
}

.account-dropdown a {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: #333;
    transition: 0.3s;
}

.account-dropdown a:hover {
    background: #fff4e6;
    padding-left: 20px;
}

.user-welcome {
    padding: 15px;
    background: #fff4e6;
    color: #5b2c06;
    border-bottom: 1px solid #eee;
}

.logout {
    color: #d63031 !important;
}


/* ===============================
   LOGIN / SIGNUP PAGE
================================ */

.auth-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff8f0;
}

.auth-box {
    width: 380px;
    background: white;
    padding: 35px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}

.auth-box h1 {
    color: #e67e22;
    margin-bottom: 10px;
}

.auth-box h2 {
    color: #333;
    margin-bottom: 25px;
}

.auth-box form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.auth-box input {
    padding: 13px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
}

.auth-box input:focus {
    outline: none;
    border-color: #e67e22;
}

.auth-box button {
    background: #e67e22;
    color: white;
    border: none;
    padding: 13px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.auth-box button:hover {
    background: #c85f0c;
}

.auth-box p {
    margin-top: 20px;
}

.auth-box a {
    color: #e67e22;
    font-weight: bold;
    text-decoration: none;
}

.message {
    color: #d63031;
    margin-bottom: 15px;
}


.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.logo h1 {
    margin: 0;
    font-size: 24px;
}

.logo span {
    color: #f4a340;
    font-size: 16px;
    font-style: italic;
}