/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

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

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: 'Rubik', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #ffffff;
    min-height: 100vh;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #dc3545;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

.menu-card img {
    object-fit: cover;
    height: 200px;
}

.menu-card {
    border-radius: 1rem;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

    .menu-card:hover {
        box-shadow: 0 0 20px rgba(0,0,0,0.15);
    }

    /* ============ MODERN FOOTER ============ */
    .modern-footer {
        background: #1a1a2e;
        color: white;
        padding: 4rem 0 0;
        margin-top: 5rem;
    }

    .footer-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 3rem;
        max-width: 1400px;
        margin: 0 auto;
        padding: 3rem 2rem;
    }

    .footer-section {
        animation: slideInUp 0.6s ease-out backwards;
    }

        .footer-section:nth-child(2) {
            animation-delay: 0.1s;
        }

        .footer-section:nth-child(3) {
            animation-delay: 0.2s;
        }

        .footer-section:nth-child(4) {
            animation-delay: 0.3s;
        }

    .footer-logo {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

        .footer-logo img {
            height: 50px;
            width: auto;
        }

        .footer-logo h3 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: 900;
            color: #f39c12;
        }

    .footer-desc,
    .footer-desc-small {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .footer-desc-small {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    .social-links {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .social-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(243, 156, 18, 0.2);
        border-radius: 50%;
        color: #f39c12;
        transition: all 0.3s ease;
        text-decoration: none;
    }

        .social-icon:hover {
            background: #f39c12;
            color: white;
            transform: translateY(-4px) scale(1.1);
        }

    .footer-title {
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        color: white;
    }

    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .footer-links li {
            margin-bottom: 0.75rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

            .footer-links a:hover {
                color: #f39c12;
                transform: translateX(4px);
            }

    .contact-items {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .contact-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        color: rgba(255, 255, 255, 0.8);
    }

        .contact-item i {
            color: #f39c12;
            font-size: 1.25rem;
            flex-shrink: 0;
            margin-top: 0.25rem;
        }

    .newsletter-form {
        display: flex;
        gap: 0.5rem;
    }

    .newsletter-input {
        flex: 1;
        padding: 0.75rem 1rem;
        border: none;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }

        .newsletter-input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .newsletter-input:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.2);
            box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.3);
        }

    .btn-newsletter {
        background: #f39c12;
        color: white;
        border: none;
        padding: 0.75rem 1.25rem;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        .btn-newsletter:hover {
            background: #d87f0f;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
        }

    .footer-bottom {
        background: rgba(0, 0, 0, 0.3);
        padding: 2rem;
    }

    .footer-bottom-content {
        max-width: 1400px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .copyright {
        margin: 0;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
    }

    .footer-links-bottom {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

        .footer-links-bottom a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

            .footer-links-bottom a:hover {
                color: #f39c12;
            }

    .divider {
        color: rgba(255, 255, 255, 0.5);
    }

    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 768px) {
        .footer-content {
            gap: 2rem;
        }

        .footer-bottom-content {
            flex-direction: column;
            text-align: center;
        }

        .footer-links-bottom {
            justify-content: center;
        }
    }

    /* ============ MODERN NAVBAR ============ */
    .modern-navbar {
        background: #ffffff;
        border-bottom: 3px solid #f39c12;
        padding: 0.75rem 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .modern-brand {
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 1.5rem;
        font-weight: 900;
        color: #1a1a2e !important;
        text-decoration: none;
        transition: all 0.3s ease;
    }

        .modern-brand:hover {
            color: #f39c12 !important;
            transform: scale(1.05);
        }

    .navbar-logo {
        height: 45px;
        width: auto;
        transition: all 0.3s ease;
    }

    .modern-brand:hover .navbar-logo {
        transform: rotate(-5deg);
    }

    .modern-toggler {
        border: none;
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .toggler-icon {
        width: 25px;
        height: 3px;
        background: #f39c12;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    .modern-toggler:not(.collapsed) .toggler-icon:nth-child(1) {
        transform: rotate(45deg) translate(10px, 10px);
    }

    .modern-toggler:not(.collapsed) .toggler-icon:nth-child(2) {
        opacity: 0;
    }

    .modern-toggler:not(.collapsed) .toggler-icon:nth-child(3) {
        transform: rotate(-45deg) translate(10px, -10px);
    }

    .modern-nav-link {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        color: #1a1a2e !important;
        font-weight: 600;
        padding: 0.75rem 1.25rem !important;
        border-radius: 8px;
        transition: all 0.3s ease;
        position: relative;
        text-decoration: none;
    }

        .modern-nav-link:hover,
        .modern-nav-link.active {
            background: #f39c12;
            color: white !important;
            transform: translateY(-2px);
        }

    .navbar-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-left: 1rem;
        border-left: 2px solid #e0e0e0;
        padding-left: 1rem;
        flex-wrap: nowrap;
    }

    /*.cart-btn-modern {
        background: #f39c12;
        color: white;
        border: none;
        padding: 0.5rem 0.75rem !important;
      border-radius: 8px;
        cursor: pointer;
        font-size: 1rem;
        transition: all 0.3s ease;
        position: relative;
        box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
        min-width: 40px;
     height: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

     .cart-btn-modern:hover {
       background: #d87f0f;
 transform: scale(1.1);
        box-shadow: 0 8px 16px rgba(243, 156, 18, 0.4);
  }*/

    .cart-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #26d0ce;
        color: #ffffff;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 900;
        border: 2px solid white;
    }

    .btn-logout {
        color: #f39c12 !important;
    }

        .btn-logout:hover {
            background: #ffebee !important;
            color: #d87f0f !important;
        }

    @media (max-width: 768px) {
        .navbar-actions {
            margin-left: 0;
            border-left: none;
            padding-left: 0;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 2px solid #e0e0e0;
        }

        .modern-nav-link {
            padding: 0.75rem 1rem !important;
        }
    }

    .modern-menu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
        gap: 2rem;
    }

    .modern-menu-card {
        background: #fff;
        border-radius: 1.5rem;
        box-shadow: 0 2px 16px rgba(0,0,0,0.08);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: box-shadow 0.2s;
        position: relative;
    }

        .modern-menu-card:hover {
            box-shadow: 0 4px 24px rgba(0,0,0,0.16);
        }

    .modern-menu-img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        background: #eee;
    }

    .modern-menu-body {
        flex: 1 1 auto;
        padding: 1.2rem 1.2rem 1rem 1.2rem;
        display: flex;
        flex-direction: column;
    }

    .modern-menu-title {
        font-family: inherit;
        font-size: 1.2rem;
        font-weight: 700;
        color: #222;
        margin-bottom: 0.5rem;
    }

    .modern-menu-category {
        font-size: 0.9rem;
        color: #f39c12;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 0.5rem;
    }

    .modern-menu-desc {
        color: #666;
        font-size: 1rem;
        margin-bottom: 1rem;
        min-height: 48px;
    }

    .modern-menu-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .modern-menu-price {
        color: #f39c12;
        font-weight: 700;
        font-size: 1.1rem;
    }

    .modern-menu-add-btn {
        background: #222;
        color: #fff;
        border: none;
        border-radius: 2rem;
        padding: 0.5rem 1.5rem;
        font-weight: 600;
        font-size: 1rem;
        transition: background 0.2s;
    }

        .modern-menu-add-btn:hover {
            background: #f39c12;
            color: #fff;
        }

    /* Category Filter */
    .category-filter {
        text-align: center;
    }

    .category-btn {
        background: rgba(255, 255, 255, 0.9);
        border: 2px solid #e9ecef;
        color: #333;
        padding: 0.75rem 1.5rem;
        margin: 0.25rem;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        cursor: pointer;
        backdrop-filter: blur(10px);
    }

        .category-btn:hover {
            border-color: #f39c12;
            color: #f39c12;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(243, 156, 18, 0.2);
        }

        .category-btn.active {
            background: linear-gradient(135deg, #f39c12, #d87f0f);
            border-color: #f39c12;
            color: #fff;
            box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
        }

    .menu-item-link {
        color: inherit;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .menu-item-link:hover {
            color: #f39c12;
        }

    /* Animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animate-fadeInUp {
        animation: fadeInUp 0.8s ease-out;
    }

    .animate-fadeIn {
        animation: fadeIn 1s ease-out;
    }

    .animate-slideInLeft {
        animation: slideInLeft 0.8s ease-out;
    }

    .animate-slideInRight {
        animation: slideInRight 0.8s ease-out;
    }

    /* Floating Cart Drawer */
    .cart-drawer {
        position: fixed;
        top: 0;
        right: -400px;
        width: 350px;
        height: 100vh;
        background: white;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        z-index: 1500;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
        border-radius: 0;
        overflow: hidden;
        overscroll-behavior: contain;
    }

        .cart-drawer.open {
            right: 0;
            box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
        }

    /* Backdrop for cart drawer */
    body.cart-drawer-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1400;
        animation: fadeIn 0.3s ease;
    }

    .cart-drawer-header {
        padding: 1rem;
        background: #f39c12;
        color: white;
        font-size: 1.1rem;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 0;
        box-shadow: 0 2px 8px rgba(243, 156, 18, 0.2);
        flex-shrink: 0;
    }

        .cart-drawer-header .btn-close {
            filter: brightness(0) invert(1);
            opacity: 0.8;
            transition: opacity 0.3s ease;
            padding: 0.25rem;
        }

            .cart-drawer-header .btn-close:hover {
                opacity: 1;
            }

    .cart-drawer-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 0.75rem;
        scrollbar-color: #f39c12 transparent;
        scrollbar-width: thin;
        background: white;
    }

        .cart-drawer-body::-webkit-scrollbar {
            width: 6px;
        }

        .cart-drawer-body::-webkit-scrollbar-track {
            background: transparent;
        }

        .cart-drawer-body::-webkit-scrollbar-thumb {
            background: #f39c12;
            border-radius: 3px;
        }

            .cart-drawer-body::-webkit-scrollbar-thumb:hover {
                background: #d87f0f;
            }

    .cart-item {
        background: white;
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        transition: all 0.3s ease;
        animation: slideInLeft 0.4s ease-out;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

        .cart-item:hover {
            /* border-color: #f39c12;
        box-shadow: 0 4px 12px rgba(243, 156, 18, 0.15);*/
            transform: translateX(-4px);
        }

        .cart-item img {
            border-radius: 8px;
            border: 2px solid rgba(243, 156, 18, 0.1);
            transition: all 0.3s ease;
            height: 50px;
            width: 50px;
            object-fit: cover;
        }

    .cart-item-price {
        color: #f39c12;
        font-weight: 700;
        font-size: 0.85rem;
    }

    .cart-item-extras {
        background: rgba(243, 156, 18, 0.06);
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        margin-top: 0.4rem;
        border-left: 2px solid #f39c12;
        font-size: 0.8rem;
    }

        .cart-item-extras div {
            display: flex;
            justify-content: space-between;
            padding: 0.15rem 0;
            font-size: 0.8rem;
        }

    .remove-cart-item,
    .cart-increase,
    .cart-decrease {
        background: rgba(243, 156, 18, 0.1) !important;
        color: #f39c12 !important;
        border: 1px solid rgba(243, 156, 18, 0.2) !important;
        transition: all 0.3s ease !important;
        padding: 0.25rem 0.4rem !important;
        font-size: 0.75rem !important;
        display: inline-block;
        border-radius: 5px !important;
    }

        .remove-cart-item:hover,
        .cart-increase:hover,
        .cart-decrease:hover {
            background: #f39c12 !important;
            color: white !important;
            border-color: #f39c12 !important;
            transform: scale(1.05) !important;
        }

    .cart-qty {
        border: 1px solid rgba(243, 156, 18, 0.3) !important;
        transition: all 0.3s ease !important;
        padding: 0.25rem 0.4rem !important;
        font-size: 0.75rem !important;
        background: white !important;
        color: #333 !important;
    }

        .cart-qty:focus {
            border-color: #f39c12 !important;
            box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1) !important;
            outline: none !important;
        }

    .cart-drawer-footer {
        border-top: 2px solid rgba(243, 156, 18, 0.1);
        padding: 1rem;
        background: #f9f9f9;
        border-radius: 0;
        gap: 0.75rem;
        flex-shrink: 0;
    }

        .cart-drawer-footer .d-flex {
            margin-bottom: 0.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(243, 156, 18, 0.2);
        }

    #cartTotal {
        color: #f39c12;
        font-weight: 900;
        font-size: 1.1rem;
    }

    #viewCartPageBtn,
    #placeOrderBtn {
        background: #f39c12 !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(243, 156, 18, 0.2) !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        width: 100% !important;
    }

        #viewCartPageBtn:hover,
        #placeOrderBtn:hover {
            background: #d87f0f !important;
            box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3) !important;
            text-decoration: none !important;
            color: white !important;
        }

    #placeOrderBtn {
        background: #f39c12 !important;
    }

    .form-check-input:checked {
        background-color: #f39c12;
        border-color: #f39c12;
    }

    .form-check-input:focus {
        border-color: #f39c12;
        box-shadow: 0 0 0 0.25rem rgba(243, 156, 18, 0.25);
    }

    /* Cart Button Modern */
    /*.cart-btn-modern {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 1600;
        background: #f39c12;
        color: #fff;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        box-shadow: 0 8px 24px rgba(243, 156, 18, 0.3);
        border: 3px solid rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
        cursor: pointer;
        animation: bounce 2s ease-in-out infinite;
    }

        .cart-btn-modern:hover {
            background: #d87f0f;
            transform: scale(1.15);
            box-shadow: 0 12px 32px rgba(243, 156, 18, 0.4);
        }

        .cart-btn-modern i {
            animation: popIn 0.4s ease-out;
        }*/

    #cartCount {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #ff6b6b;
        color: white;
        border-radius: 50%;
        font-size: 0.8rem;
        padding: 4px 8px;
        min-width: 24px;
        text-align: center;
        font-weight: bold;
        border: 3px solid white;
        box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
        animation: scaleIn 0.3s ease-out;
    }

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    @keyframes popIn {
        0% {
            opacity: 0;
            transform: scale(0.5);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @media (max-width: 600px) {
        .cart-drawer {
            width: 85vw;
            right: -100vw;
        }

            .cart-drawer.open {
                right: 0;
            }

        /*    .cart-btn-modern {
            bottom: 20px;
            right: 20px;
width: 56px;
            height: 56px;
            font-size: 1.3rem;
        }*/

        .cart-drawer-header {
            font-size: 1.1rem;
            padding: 1.25rem;
        }

        .cart-drawer-body {
            /*padding: 1rem;*/
        }

        .cart-drawer-footer {
            padding: 1rem;
        }
    }

    /* Fix login buttons in cart sidebar */
    .cart-drawer-footer .btn-outline-primary {
        color: #f39c12 !important;
        border: 1px solid #f39c12 !important;
        background: transparent !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        padding: 0.5rem 0.75rem !important;
        width: 48% !important;
        display: inline-block;
        border-radius: 5px !important;
    }

        .cart-drawer-footer .btn-outline-primary:hover {
            background: #f39c12 !important;
            border-color: #f39c12 !important;
            color: white !important;
        }

    .cart-drawer-footer .btn-outline-secondary {
        color: #666 !important;
        border-color: #ddd !important;
        background: transparent !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        padding: 0.5rem 0.75rem !important;
        width: 48% !important;
        display: inline-block;
        border-radius: 5px !important;
    }

        .cart-drawer-footer .btn-outline-secondary:hover {
            background: #666 !important;
            border-color: #666 !important;
            color: white !important;
        }


    /* ============ MODERN AUTH STYLING ============ */
    .modern-auth-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: linear-gradient(135deg, rgba(243, 156, 18, 0.05) 0%, rgba(38, 208, 206, 0.05) 100%);
        padding: 2rem;
        position: relative;
        overflow: hidden;
    }

        /* Decorative Background Elements */
        .modern-auth-container::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(243, 156, 18, 0.1);
            border-radius: 50%;
            top: -100px;
            left: -100px;
            animation: float 6s ease-in-out infinite;
        }

        .modern-auth-container::after {
            content: '';
            position: absolute;
            width: 250px;
            height: 250px;
            background: rgba(38, 208, 206, 0.08);
            border-radius: 50%;
            bottom: -80px;
            right: -80px;
            animation: float 8s ease-in-out infinite 1s;
        }

    .modern-auth-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
        padding: 2.5rem;
        max-width: 420px;
        width: 100%;
        position: relative;
        z-index: 1;
        animation: slideInUp 0.6s ease-out;
    }

    .modern-auth-card-wide {
        max-width: 500px;
    }

    .modern-auth-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .modern-auth-logo {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, rgba(243, 156, 18, 0.2), rgba(38, 208, 206, 0.2));
        border-radius: 12px;
        margin: 0 auto 1rem;
    }

    .modern-auth-icon {
        font-size: 1.8rem;
        color: #f39c12;
    }

    .modern-auth-title {
        font-size: 1.8rem;
        font-weight: 900;
        color: #1a1a2e;
        margin: 0 0 0.5rem 0;
        line-height: 1.2;
    }

    .modern-auth-subtitle {
        font-size: 0.95rem;
        color: #757575;
        margin: 0;
        line-height: 1.6;
    }

    .modern-auth-decorations {
        position: relative;
        height: 40px;
        margin-bottom: 2rem;
    }

    .modern-deco {
        position: absolute;
        font-size: 1.8rem;
        opacity: 0.15;
        animation: float 4s ease-in-out infinite;
    }

    .modern-deco-1 {
        left: 10%;
        animation-delay: 0s;
    }

    .modern-deco-2 {
        left: 50%;
        transform: translateX(-50%);
        animation-delay: 0.5s;
    }

    .modern-deco-3 {
        right: 10%;
        animation-delay: 1s;
    }

    .modern-auth-form {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .modern-form-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modern-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .modern-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }

    .modern-input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.5rem;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background: white;
        font-family: inherit;
    }

        .modern-input:focus {
            outline: none;
            border-color: #f39c12;
            background: rgba(243, 156, 18, 0.02);
            box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1);
        }

    .modern-input-icon,
    .modern-input-icon-prefix {
        position: absolute;
        left: 0.75rem;
        color: #f39c12;
        pointer-events: none;
        font-size: 1rem;
    }

    .modern-password-toggle {
        position: absolute;
        right: 0.75rem;
        background: none;
        border: none;
        color: #f39c12;
        cursor: pointer;
        font-size: 1rem;
        transition: all 0.3s ease;
        padding: 0;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .modern-password-toggle:hover {
            color: #d87f0f;
            transform: scale(1.15);
        }

    .modern-form-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0.5rem 0;
    }

    .modern-checkbox {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        user-select: none;
    }

        .modern-checkbox input[type="checkbox"] {
            display: none;
        }

    .modern-checkbox-mark {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border: 2px solid #e0e0e0;
        border-radius: 6px;
        background: white;
        transition: all 0.3s ease;
    }

    .modern-checkbox input[type="checkbox"]:checked + .modern-checkbox-mark {
        background: #f39c12;
        border-color: #f39c12;
    }

        .modern-checkbox input[type="checkbox"]:checked + .modern-checkbox-mark::after {
            content: '✓';
            color: white;
            font-weight: bold;
            font-size: 0.8rem;
        }

    .modern-checkbox-text {
        font-size: 0.9rem;
        color: #1a1a2e;
        font-weight: 500;
    }

        .modern-checkbox-text a {
            color: #f39c12;
            text-decoration: none;
        }

            .modern-checkbox-text a:hover {
                text-decoration: underline;
            }

    .modern-forgot-link {
        color: #f39c12;
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        .modern-forgot-link:hover {
            color: #d87f0f;
            text-decoration: underline;
        }

    .modern-auth-btn {
        background: #f39c12;
        color: white;
        border: none;
        padding: 0.85rem 1.5rem;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
        margin-top: 0.5rem;
    }

        .modern-auth-btn:hover {
            background: #d87f0f;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4);
        }

        .modern-auth-btn:active {
            transform: translateY(0);
        }

    .modern-btn-text {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .modern-auth-footer {
        margin-top: 2rem;
        text-align: center;
        border-top: 1px solid #e0e0e0;
        padding-top: 1.5rem;
    }

    .modern-footer-text {
        font-size: 0.9rem;
        color: #757575;
        margin: 0 0 1rem 0;
    }

    .modern-link {
        color: #f39c12;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        .modern-link:hover {
            color: #d87f0f;
            text-decoration: underline;
        }

    .modern-back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: #757575;
        text-decoration: none;
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }

        .modern-back-link:hover {
            color: #f39c12;
            transform: translateX(-4px);
        }

    @keyframes float {
        0%, 100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-20px);
        }
    }

    @media (max-width: 600px) {
        .modern-auth-container {
            padding: 1rem;
        }

        .modern-auth-card {
            padding: 1.5rem;
        }

        .modern-auth-title {
            font-size: 1.5rem;
        }

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

        .modern-form-options {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
        }
    }

    /* ============ MODERN RESERVATION PAGE STYLING ============ */
    .modern-reservation-hero {
        background: linear-gradient(135deg, rgba(243, 156, 18, 0.08) 0%, rgba(38, 208, 206, 0.06) 100%);
        padding: 3rem 2rem 2rem;
        /*margin-top: 100px;*/
        border-bottom: 2px solid rgba(243, 156, 18, 0.15);
    }

    .modern-reservation-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .modern-reservation-title {
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 900;
        color: #1a1a2e;
        margin-bottom: 1rem;
        line-height: 1.1;
    }

    .modern-reservation-subtitle {
        font-size: 1.1rem;
        color: #757575;
        margin: 0;
        font-weight: 500;
    }

    /* Reservation Content */
    .modern-reservation-content {
        padding: 4rem 2rem;
        background: #ffffff;
    }

    .modern-reservation-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 3rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .modern-reservation-card {
        background: white;
        border-radius: 16px;
        padding: 2.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid #e0e0e0;
        transition: all 0.3s ease;
    }

        .modern-reservation-card:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            border-color: #f39c12;
        }

    .modern-card-header {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 2px solid rgba(243, 156, 18, 0.15);
    }

    .modern-card-title {
        font-size: 1.5rem;
        font-weight: 900;
        color: #1a1a2e;
        margin: 0;
    }

    .modern-reservation-form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .modern-form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .modern-form-group {
        display: flex;
        flex-direction: column;
    }

    .modern-form-group-full {
        grid-column: 1 / -1;
    }

    .modern-form-label {
        font-size: 0.95rem;
        font-weight: 700;
        color: #1a1a2e;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .modern-form-input,
    .modern-form-select,
    .modern-form-textarea {
        padding: 0.85rem 1rem;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        font-size: 0.95rem;
        font-family: inherit;
        transition: all 0.3s ease;
        background: white;
    }

        .modern-form-input:focus,
        .modern-form-select:focus,
        .modern-form-textarea:focus {
            outline: none;
            border-color: #f39c12;
            background: rgba(243, 156, 18, 0.02);
            box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1);
        }

    .modern-form-textarea {
        resize: vertical;
        min-height: 120px;
        font-family: inherit;
    }

    .modern-reservation-btn {
        background: #f39c12;
        color: white;
        border: none;
        padding: 1rem 2rem;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        justify-content: center;
        margin-top: 1rem;
    }

        .modern-reservation-btn:hover {
            background: #d87f0f;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4);
        }

    /* Info Section */
    .modern-info-card {
        background: linear-gradient(135deg, rgba(243, 156, 18, 0.05) 0%, rgba(38, 208, 206, 0.05) 100%);
    }

    .modern-contact-card {
        background: linear-gradient(135deg, rgba(26, 208, 206, 0.05) 0%, rgba(184, 233, 134, 0.05) 100%);
    }

    .modern-hours-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .modern-hours-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: white;
        border-radius: 10px;
        border-left: 3px solid #f39c12;
    }

    .modern-hours-label {
        font-weight: 700;
        color: #1a1a2e;
        font-size: 0.95rem;
    }

    .modern-hours-time {
        color: #757575;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .modern-contact-items {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .modern-contact-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
        background: white;
        border-radius: 10px;
        border-left: 3px solid #26d0ce;
    }

    .modern-contact-icon {
        color: #f39c12;
        font-size: 1.25rem;
        flex-shrink: 0;
        margin-top: 0.25rem;
    }

    /* Alerts */
    .alert {
        padding: 1rem 1.5rem;
        border-radius: 10px;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        border: 1px solid transparent;
    }

    .alert-success {
        background: rgba(76, 175, 80, 0.1);
        border-color: #4caf50;
        color: #2e7d32;
    }

    .alert-danger {
        background: rgba(244, 67, 54, 0.1);
        border-color: #f44336;
        color: #c62828;
    }

    .alert i {
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    /* ============================================================
       HOMEPAGE SPECIFIC STYLES
       ============================================================ */

    /* Hero Section */
    :root {
     --primary-color: #f39c12;
     --primary-dark: #d87f0f;
     --secondary-color: #1a1a2e;
     --accent-teal: #26d0ce;
     --text-dark: #1a1a2e;
     --text-light: #757575;
     --background-white: #ffffff;
     --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hero-modern { min-height:80vh; display:flex; align-items:center; background:linear-gradient(135deg,#fef9f3 0%,#ffffff 100%); padding:3rem 2rem; position:relative; overflow:hidden; }
    .hero-container-new { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; position:relative; z-index:2; }
    .hero-badge { display:inline-block; background:rgba(243,156,18,0.1); padding:0.5rem 1rem; border-radius:50px; font-size:0.9rem; font-weight:600; color:#f39c12; border:1px solid rgba(243,156,18,0.2); margin-bottom:1.5rem; }
    .hero-heading { font-size:clamp(2.5rem,7vw,4.5rem); font-weight:900; margin:0 0 1rem; line-height:1.1; color:var(--text-dark); letter-spacing:-0.02em; }
    .hero-subtext { font-size:clamp(1.1rem,2vw,1.35rem); color:var(--text-light); margin-bottom:2rem; max-width:540px; }
    .search-box-modern { display:flex; align-items:center; background:white; padding:0.5rem; border-radius:16px; box-shadow:0 12px 48px rgba(0,0,0,0.12); border:2px solid transparent; transition:var(--transition); }
    .search-box-modern:focus-within { border-color:var(--primary-color); box-shadow:0 16px 56px rgba(243,156,18,0.2); }
    .search-box-modern input { flex:1; border:none; padding:1rem; font-size:1.05rem; outline:none; }
    .search-box-modern input::placeholder { color:#9aa0a6; }
    .search-box-modern i { color:#f39c12; margin:0 1rem; font-size:1.25rem; }
    .search-box-modern button { background:#f39c12; color:white; border:none; padding:1rem 2rem; border-radius:12px; font-weight:700; cursor:pointer; transition:var(--transition); white-space:nowrap; }
    .search-box-modern button:hover { background:var(--primary-dark); transform:translateY(-2px); }
    #use-location { background:rgba(243,156,18,0.1); color:var(--primary-color); padding:0.75rem; }
    #use-location:hover { background:rgba(243,156,18,0.2); }
    .search-hint { font-size:0.85rem; color:var(--text-light); margin-top:0.75rem; padding-left:1rem; }
    .quick-links { display:flex; gap:0.75rem; margin-top:1.5rem; flex-wrap:wrap; align-items:center; }
    .quick-links span { font-size:0.9rem; color:var(--text-light); font-weight:600; }
    .quick-links button { background:white; border:1px solid #e0e0e0; padding:0.5rem 1rem; border-radius:50px; cursor:pointer; font-weight:600; transition:var(--transition); color:var(--text-dark); }
    .quick-links button:hover { border-color:var(--primary-color); background:rgba(243,156,18,0.05); transform:translateY(-2px); }
    .quick-tag i { margin-right:0.35rem; }
    .quick-tag.pizza i { color:#FF6B6B; }
    .quick-tag.burger i { color:#F7B731; }
    .quick-tag.sushi i { color:#26D0CE; }
    .quick-tag.indian i { color:#EE5A6F; }

    .hero-visual-new { position:relative; height:500px; }
    .food-card { position:absolute; border-radius:24px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.15); transition:var(--transition); }
    .food-card:hover { transform:scale(1.02) translateY(-8px); box-shadow:0 28px 80px rgba(0,0,0,0.2); }
    .card-main { width:400px; height:450px; top:0; right:0; z-index:3; animation:floatCard 6s ease-in-out infinite; }
    .card-secondary { width:240px; height:240px; bottom:100px; left:0; z-index:2; animation:floatCard 7s ease-in-out infinite 1s; }
    .card-tertiary { width:200px; height:200px; bottom:0; right:80px; z-index:1; animation:floatCard 8s ease-in-out infinite 2s; }
    .food-card img { width:100%; height:100%; object-fit:cover; display:block; }
    .card-badge { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); padding:0.5rem 1rem; border-radius:50px; font-size:0.85rem; font-weight:700; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:2; }
    .card-badge.hot { background:linear-gradient(135deg,#ff6b6b,#ff8e53); color:white; animation:pulse 2s ease-in-out infinite; }
    .card-badge.rating { background:linear-gradient(135deg,#ffd93d,#f39c12); color:white; }
    .card-badge.new { background:linear-gradient(135deg,#6c5ce7,#a29bfe); color:white; }

    .floating-info { position:absolute; background:white; border-radius:16px; padding:1rem 1.25rem; box-shadow:0 12px 32px rgba(0,0,0,0.12); display:flex; align-items:center; gap:0.75rem; z-index:4; transition:var(--transition); }
    .floating-info:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.15); }
    .badge-delivery { top:80px; left:40px; animation:floatBadge 5s ease-in-out infinite; }
    .badge-quality { bottom:200px; right:240px; animation:floatBadge 6s ease-in-out infinite 1.5s; }
    .info-icon { font-size:2rem; line-height:1; }
    .info-icon i { color:var(--primary-color); }
    .info-text { display:flex; flex-direction:column; gap:0.125rem; }
    .info-label { font-size:0.75rem; color:var(--text-light); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
    .info-value { font-size:1.1rem; font-weight:900; color:var(--text-dark); }

    .deco-circle { position:absolute; border-radius:50%; pointer-events:none; opacity:0.08; }
    .circle-1 { width:180px; height:180px; background:var(--primary-color); top:10%; left:10%; animation:rotate 20s linear infinite; }
    .circle-2 { width:120px; height:120px; background:var(--accent-teal); bottom:15%; right:15%; animation:rotate 15s linear infinite reverse; }

    @keyframes floatCard { 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-15px) rotate(1deg);} }
    @keyframes floatBadge { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
    @keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }
    @keyframes rotate { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

    /* Featured Section */
    .featured-section { padding:5rem 2rem; background:white; }
    .featured-container { max-width:1400px; margin:0 auto; }
    .featured-header { text-align:left; margin-bottom:3rem; }
    .featured-header h2 { font-size:2.5rem; font-weight:900; color:var(--text-dark); margin:0 0 0.5rem; }
    .featured-header p { color:var(--text-light); font-size:1rem; margin:0; }
    .featured-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; }
    .featured-item { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,0.08); transition:var(--transition); display:flex; flex-direction:column; cursor:pointer; border:1px solid #f0f0f0; }
    .featured-item:hover { transform:translateY(-8px); box-shadow:0 16px 32px rgba(0,0,0,0.15); }
    .featured-item-image { width:100%; height:200px; object-fit:cover; transition:var(--transition); }
    .featured-item:hover .featured-item-image { transform:scale(1.1); }
    .featured-item-content { padding:1.5rem; flex-grow:1; display:flex; flex-direction:column; }
    .featured-item-category { font-size:0.75rem; font-weight:800; text-transform:uppercase; color:var(--primary-color); margin-bottom:0.5rem; }
    .featured-item-name { font-size:1.25rem; font-weight:800; margin-bottom:0.5rem; color:var(--text-dark); }
    .featured-item-desc { font-size:0.9rem; color:var(--text-light); margin-bottom:1rem; flex-grow:1; }
    .featured-item-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #e0e0e0; padding-top:1rem; }
    .featured-item-price { font-size:1.5rem; font-weight:900; color:var(--primary-color); }
    .featured-item-btn { background:var(--primary-color); color:white; border:none; padding:0.5rem 1.25rem; border-radius:8px; cursor:pointer; transition:var(--transition); font-weight:700; font-size:0.9rem; }
    .featured-item-btn:hover { background:var(--primary-dark); transform:translateY(-2px); }

    /* Section Headers */
    .section-header-modern { text-align:left; margin-bottom:3rem; }
    .section-header-modern.centered { text-align:center; }
    .section-badge { display:inline-block; background:rgba(243,156,18,0.1); color:var(--primary-color); padding:0.5rem 1rem; border-radius:50px; font-size:0.85rem; font-weight:700; margin-bottom:1rem; border:1px solid rgba(243,156,18,0.2); }
    .section-header-modern h2 { font-size:2.5rem; font-weight:900; margin-bottom:0.75rem; color:var(--text-dark); }
    .section-header-modern p { font-size:1.1rem; color:var(--text-light); max-width:600px; }
    .section-header-modern.centered p { margin:0 auto; }

    /* Cuisines */
    .cuisines-modern-section { padding:5rem 2rem; background:#f8f9fa; }
    .cuisines-container { max-width:1400px; margin:0 auto; }
    .cuisines-grid-modern { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; }
    .cuisine-card-modern { position:relative; height:200px; border-radius:20px; overflow:hidden; cursor:pointer; transition:var(--transition); box-shadow:0 4px 12px rgba(0,0,0,0.1); }
    .cuisine-card-modern:hover { transform:translateY(-8px) scale(1.02); box-shadow:0 12px 32px rgba(0,0,0,0.15); }
    .cuisine-card-modern img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
    .cuisine-card-modern:hover img { transform:scale(1.1); }
    .cuisine-overlay-modern { position:absolute; inset:0; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.8) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; color:white; }
    .cuisine-name-modern { font-size:1.5rem; font-weight:900; margin-bottom:0.25rem; }
    .cuisine-count-modern { font-size:0.9rem; opacity:0.9; }

    /* How It Works */
    .how-it-works-section { padding:5rem 2rem; background:white; }
    .how-it-works-container { max-width:1400px; margin:0 auto; }
    .steps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:3rem; }
    .step-card { text-align:center; padding:2.5rem 2rem; background:linear-gradient(135deg,#fff 0%,#f8f9fa 100%); border-radius:20px; border:2px solid #e9ecef; transition:var(--transition); position:relative; }
    .step-card:hover { transform:translateY(-10px); border-color:var(--primary-color); box-shadow:0 12px 32px rgba(243,156,18,0.15); }
    .step-number { position:absolute; top:5px; right:20px; font-size:4rem; font-weight:900; color:rgba(243,156,18,0.1); line-height:1; }
    .step-icon { width:80px; height:80px; margin:0 auto 1.5rem; background:linear-gradient(135deg,var(--primary-color),var(--primary-dark)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; color:white; box-shadow:0 8px 24px rgba(243,156,18,0.3); }
    .step-card h3 { font-size:1.5rem; font-weight:800; margin-bottom:0.75rem; color:var(--text-dark); }
    .step-card p { color:var(--text-light); line-height:1.6; }

    /* Stats */
    .stats-section { padding:4rem 2rem; background:linear-gradient(135deg,var(--secondary-color) 0%,#2a2a45 100%); }
    .stats-container { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; }
    .stat-item-large { text-align:center; color:white; padding:2rem; }
    .stat-icon-large { font-size:3rem; margin-bottom:1rem; color:var(--primary-color); }
    .stat-number-large { font-size:3rem; font-weight:900; margin-bottom:0.5rem; }
    .stat-label-large { font-size:1.1rem; opacity:0.9; }

    /* App Download */
    .app-download-section { padding:5rem 2rem; background:linear-gradient(135deg,#fef9f3 0%,#ffffff 100%); }
    .app-download-container { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
    .app-content h2 { font-size:2.5rem; font-weight:900; margin-bottom:1rem; }
    .app-content p { font-size:1.1rem; color:var(--text-light); margin-bottom:2rem; line-height:1.8; }
    .app-buttons { display:flex; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
    .app-btn { display:flex; align-items:center; gap:0.75rem; padding:0.75rem 1.5rem; background:var(--secondary-color); color:white; border-radius:12px; text-decoration:none; transition:var(--transition); font-size:1rem; }
    .app-btn:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.2); color:white; }
    .app-btn i { font-size:2rem; }
    .app-btn div { text-align:left; }
    .app-btn small { display:block; font-size:0.75rem; opacity:0.8; }
    .app-btn strong { display:block; font-size:1.1rem; }
    .app-features { display:flex; gap:1.5rem; flex-wrap:wrap; }
    .app-feature { display:flex; align-items:center; gap:0.5rem; color:var(--text-dark); font-weight:600; }
    .app-feature i { color:var(--primary-color); }
    .phone-mockup { width:300px; height:500px; background:linear-gradient(135deg,var(--primary-color),var(--primary-dark)); border-radius:40px; display:flex; align-items:center; justify-content:center; font-size:8rem; color:white; box-shadow:0 20px 60px rgba(0,0,0,0.2); margin:0 auto; }

    /* Why Choose Us */
    .why-choose-section { padding:5rem 2rem; background:linear-gradient(135deg,#fef9f3 0%,#ffffff 100%); }
    .why-choose-container { max-width:1400px; margin:0 auto; }
    .features-grid-modern { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:3rem; }
    .feature-card-modern { background:white; padding:2.5rem 2rem; border-radius:16px; border:2px solid #e9ecef; transition:var(--transition); text-align:center; position:relative; overflow:hidden; }
    .feature-card-modern::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg,var(--primary-color),var(--accent-teal)); transform:scaleX(0); transition:transform 0.3s ease; }
    .feature-card-modern:hover::before { transform:scaleX(1); }
    .feature-card-modern:hover { transform:translateY(-8px); border-color:var(--primary-color); box-shadow:0 12px 32px rgba(243,156,18,0.15); }
    .feature-icon-modern { width:80px; height:80px; margin:0 auto 1.5rem; background:linear-gradient(135deg,rgba(243,156,18,0.1),rgba(38,208,206,0.1)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:var(--primary-color); transition:var(--transition); }
    .feature-card-modern:hover .feature-icon-modern { transform:scale(1.1) rotate(5deg); background:linear-gradient(135deg,var(--primary-color),var(--accent-teal)); color:white; }
    .feature-card-modern h3 { font-size:1.5rem; font-weight:800; margin-bottom:0.75rem; color:var(--text-dark); }
    .feature-card-modern p { color:var(--text-light); line-height:1.6; margin:0; }

    /* Testimonials */
    .testimonials-modern-section { padding:5rem 2rem; background:white; }
    .testimonials-container-modern { max-width:1400px; margin:0 auto; }
    .testimonials-grid-modern { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:2rem; margin-top:3rem; }
    .testimonial-card-modern { background:white; padding:2rem; border-radius:20px; border:2px solid #e9ecef; transition:var(--transition); }
    .testimonial-card-modern.featured { background:linear-gradient(135deg,var(--primary-color),var(--primary-dark)); color:white; border:none; }
    .testimonial-card-modern:hover { transform:translateY(-8px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
    .testimonial-rating { color:var(--primary-color); font-size:1.1rem; margin-bottom:1rem; display:flex; gap:0.25rem; }
    .testimonial-card-modern.featured .testimonial-rating { color:white; }
    .testimonial-rating i { color:inherit; }
    .testimonial-text { font-size:1.05rem; line-height:1.8; margin-bottom:1.5rem; font-style:italic; }
    .testimonial-author { display:flex; align-items:center; gap:1rem; }
    .author-avatar { width:50px; height:50px; border-radius:50%; background:#e9ecef; display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--primary-color); flex-shrink:0; }
    .testimonial-card-modern.featured .author-avatar { background:rgba(255,255,255,0.2); color:white; }
    .testimonial-author strong { display:block; font-weight:800; margin-bottom:0.25rem; }
    .testimonial-author span { font-size:0.85rem; opacity:0.8; }

    /* Newsletter */
    .newsletter-section { padding:4rem 2rem; background:linear-gradient(135deg,var(--primary-color),var(--primary-dark)); }
.newsletter-container { max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; align-items:center; }
    .newsletter-content { color:white; }
    .newsletter-icon { width:60px; height:60px; background:rgba(255,255,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:1.5rem; }
    .newsletter-content h2 { font-size:2rem; font-weight:900; margin-bottom:0.75rem; }
    .newsletter-content p { font-size:1.05rem; opacity:0.95; line-height:1.6; }
    .newsletter-form { display:flex; flex-direction:column; gap:0.5rem; }
    .newsletter-input-group { display:flex; align-items:center; background:white; padding:0.5rem; border-radius:12px; gap:0.5rem; box-shadow:0 8px 24px rgba(0,0,0,0.15); }
    .newsletter-input-group i { color:var(--primary-color); margin-left:0.75rem; font-size:1.2rem; }
    .newsletter-input-group input { flex:1; border:none; padding:0.75rem; font-size:1rem; outline:none; background:transparent; }
    .newsletter-input-group input::placeholder { color:#999; }
    .newsletter-input-group button { background:var(--primary-color); color:white; border:none; padding:0.85rem 1.75rem; border-radius:8px; font-weight:700; cursor:pointer; transition:var(--transition); white-space:nowrap; }
    .newsletter-input-group button:hover { background:var(--primary-dark); transform:translateY(-2px); }
    .newsletter-form small { color:rgba(255,255,255,0.85); font-size:0.85rem; text-align:center; margin-top:0.5rem; }
  @media (max-width: 768px) {
        .newsletter-container { grid-template-columns:1fr; text-align:center; gap:2rem; }
     .newsletter-icon { margin:0 auto 1.5rem; }
   .newsletter-input-group { flex-direction:column; padding:1rem; }
        .newsletter-input-group button { width:100%; }
    }

/* ====== Force registration/auth forms to single column on tablet/mobile ====== */
@media (max-width:1024px) {
 /* Make any two-column form rows stack vertically */
 .modern-form-row,
 .material-form-row,
 .modern-form-row.responsive-stack {
 display: grid !important;
 grid-template-columns:1fr !important;
 gap:0.75rem !important;
 }

 /* Ensure form groups span full width */
 .modern-form-row > .modern-form-group,
 .material-form-row > .material-form-group,
 .modern-form-row .modern-form-group {
 width:100% !important;
 max-width:100% !important;
 grid-column:1 / -1 !important;
 display: block !important;
 box-sizing: border-box !important;
 }

 /* Force common auth/register inputs to full width */
 #FirstName, #LastName, #Password, #ConfirmPassword,
 .modern-auth-card-wide .modern-input,
 .modern-form-group .modern-input,
 .material-input,
 .modern-input {
 width:100% !important;
 max-width:100% !important;
 box-sizing: border-box !important;
 display: block !important;
 }

 /* Ensure wrappers don't limit width - keep as flex so icons stay centered */
 .modern-input-wrapper,
 .material-input-wrapper {
 width:100% !important;
 max-width:100% !important;
 display: flex !important; /* restore flex so left icon and eye center vertically */
 align-items: center !important;
 position: relative !important;
 }
 
 /* Inputs should expand to fill remaining space inside wrapper */
 .modern-input-wrapper .modern-input,
 .material-input-wrapper .material-input,
 .modern-form-group .modern-input {
 flex:11 auto !important;
 width:100% !important;
 padding-left:2.5rem !important; /* leave room for left icon */
 }
 
 /* Left icons stay absolutely positioned inside wrapper */
 .modern-input-icon,
 .modern-input-icon-prefix,
 .material-input-icon {
 position: absolute !important;
 left:0.75rem !important;
 pointer-events: none !important;
 }
 
 /* Password toggle (eye) sits at the right inside the wrapper */
 .modern-password-toggle,
 .material-password-toggle {
 position: absolute !important;
 right:0.75rem !important;
 top:50% !important;
 transform: translateY(-50%) !important;
 z-index:5 !important;
 }
 
 /* Slightly reduce eye button size on small screens to avoid overlap */
 .modern-password-toggle i,
 .material-password-toggle i {
 font-size:0.95rem !important;
 }
 
 /* Registration page specific fixes */
 .modern-auth-card-wide .modern-form-group {
 margin-bottom:0.5rem !important;
 }

 /* Let the grid gap control spacing between stacked rows; avoid double margins */
 .modern-form-row > .modern-form-group {
 margin-bottom:0 !important;
 }

 /* Slightly tighten row gap so overall spacing feels consistent */
 .modern-form-row,
 .material-form-row,
 .modern-form-row.responsive-stack {
 display: grid !important;
 grid-template-columns:1fr !important;
 gap:0.75rem !important;
 }
}

/* ====== Auth form mobile/tablet overrides - final reset (<=1024px) ====== */
@media (max-width:1024px) {
 /* Stack form rows into a single column with consistent gap */
 .modern-auth-card-wide .modern-form-row,
 .modern-form-row.responsive-stack {
 display: grid !important;
 grid-template-columns:1fr !important;
 gap:0.6rem !important;
 }

 /* Let the grid gap control spacing; keep groups compact */
 .modern-auth-card-wide .modern-form-group,
 .modern-form-group {
 margin:0 !important;
 padding:0 !important;
 }

 /* Input wrapper: relative positioning (not flex) so absolute icons align predictably */
 .modern-auth-card-wide .modern-input-wrapper,
 .modern-form-group .modern-input-wrapper {
 display: block !important;
 position: relative !important;
 width:100% !important;
 }

 /* Inputs fill width and reserve space for icons via padding */
 .modern-auth-card-wide .modern-input,
 .modern-form-group .modern-input {
 width:100% !important;
 box-sizing: border-box !important;
 padding-left:2.8rem !important; /* space for left icon */
 padding-right:2.8rem !important; /* space for right toggle */
 min-height:44px !important;
 line-height:1.2 !important;
 margin:0 !important;
 }

 /* Left icons: absolute and vertically centered inside wrapper */
 .modern-auth-card-wide .modern-input-icon,
 .modern-auth-card-wide .modern-input-icon-prefix,
 .modern-form-group .modern-input-icon,
 .modern-form-group .modern-input-icon-prefix {
 position: absolute !important;
 left:0.9rem !important;
 top:50% !important;
 transform: translateY(-50%) !important;
 pointer-events: none !important;
 color: #f39c12 !important;
 }

 /* Password toggle (eye): absolute at right and vertically centered */
 .modern-auth-card-wide .modern-password-toggle,
 .modern-form-group .modern-password-toggle {
 position: absolute !important;
 right:0.6rem !important;
 top:50% !important;
 transform: translateY(-50%) !important;
 width:28px !important;
 height:28px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 padding:0 !important;
 background: transparent !important;
 border: none !important;
 color: #f39c12 !important;
 }
}
@media (min-width:1025px) {
 /* Ensure wrapper has explicit height so absolute icons center correctly */
 .modern-input-wrapper,
 .material-input-wrapper {
 position: relative !important;
 display: block !important;
 width:100% !important;
 height:48px !important; /* matches input height */
 }

 /* Inputs stretch to wrapper height and reserve space for icons */
 .modern-input,
 .material-input {
 height:100% !important;
 box-sizing: border-box !important;
 padding-left:44px !important; /* room for left icon */
 padding-right:44px !important; /* room for right toggle */
 line-height:1 !important;
 }

 /* Left icon positioned and vertically centered */
 .modern-input-icon,
 .modern-input-icon-prefix,
 .material-input-icon {
 position: absolute !important;
 left:12px !important;
 top:50% !important;
 transform: translateY(-50%) !important;
 font-size:18px !important;
 color: #f39c12 !important;
 pointer-events: none !important;
 }

 /* Password toggle positioned and vertically centered */
 .modern-password-toggle,
 .material-password-toggle {
 position: absolute !important;
 right:10px !important;
 top:50% !important;
 transform: translateY(-50%) !important;
 width:32px !important;
 height:32px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 padding:0 !important;
 background: transparent !important;
 border: none !important;
 color: #f39c12 !important;
 cursor: pointer !important;
 }

 /* Make sure the input border-radius remains visible and icons don't overflow */
 .modern-input {
 border-radius:10px !important;
 }
}