* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        

        :root {

            --bg-primary: #0a0a0f;

            --bg-secondary: #12121a;

            --bg-tertiary: #1a1a24;

            --accent-primary: #6366f1;

            --accent-secondary: #8b5cf6;

            --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

            --text-primary: #ffffff;

            --text-secondary: #a1a1aa;

            --text-muted: #71717a;

            --border-color: #27272a;

            --success: #10b981;

            --warning: #f59e0b;

            --danger: #ef4444;

            --glass-bg: rgba(26, 26, 36, 0.8);

            --glass-border: rgba(255, 255, 255, 0.1);

        }

        

        body {

            font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            background-color: var(--bg-primary);

            color: var(--text-primary);

            line-height: 1.6;

            min-height: 100vh;

        }

        

        .container {

            max-width: 1400px;

            margin: 0 auto;

            padding: 0;

        }

        

        .loading {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            min-height: 100vh;

            background: var(--bg-primary);

            position: relative;

            overflow: hidden;

        }

        

        .loading-animation {

            position: relative;

            width: 120px;

            height: 120px;

            margin-bottom: 30px;

        }

        

        .loading-animation::before,

        .loading-animation::after {

            content: '';

            position: absolute;

            border-radius: 50%;

            animation: pulse 2s ease-in-out infinite;

        }

        

        .loading-animation::before {

            width: 100%;

            height: 100%;

            background: var(--accent-gradient);

            opacity: 0.3;

            animation-delay: 0s;

        }

        

        .loading-animation::after {

            width: 60%;

            height: 60%;

            top: 20%;

            left: 20%;

            background: var(--accent-gradient);

            opacity: 0.6;

            animation-delay: 0.5s;

        }

        

        .loading-icon {

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            font-size: 3em;

            animation: float 2s ease-in-out infinite;

        }

        

        @keyframes pulse {

            0%, 100% {

                transform: scale(1);

                opacity: 0.3;

            }

            50% {

                transform: scale(1.2);

                opacity: 0.6;

            }

        }

        

        @keyframes float {

            0%, 100% {

                transform: translate(-50%, -50%) translateY(0);

            }

            50% {

                transform: translate(-50%, -50%) translateY(-10px);

            }

        }

        

        .loading-text {

            font-size: 1.5em;

            color: var(--text-secondary);

            font-weight: 600;

            animation: fadeInOut 2s ease-in-out infinite;

        }

        

        @keyframes fadeInOut {

            0%, 100% {

                opacity: 0.5;

            }

            50% {

                opacity: 1;

            }

        }

        

        .error {

            display: flex;

            align-items: center;

            justify-content: center;

            min-height: 100vh;

            font-size: 1.2em;

            color: var(--danger);

            background: var(--bg-primary);

            padding: 20px;

            text-align: center;

        }

        

        /* Categories Navigation Bar */

        .categories-nav {

            position: sticky;

            top: 0;

            background: var(--glass-bg);

            backdrop-filter: blur(20px);

            border-bottom: 1px solid var(--glass-border);

            padding: 16px 20px;

            z-index: 100;

            margin-bottom: 30px;

            overflow-x: auto;

            white-space: nowrap;

            -webkit-overflow-scrolling: touch;

        }

        

        .categories-nav::-webkit-scrollbar {

            height: 4px;

        }

        

        .categories-nav::-webkit-scrollbar-track {

            background: var(--bg-tertiary);

            border-radius: 2px;

        }

        

        .categories-nav::-webkit-scrollbar-thumb {

            background: var(--accent-primary);

            border-radius: 2px;

        }

        

        .categories-nav-inner {

            display: flex;

            gap: 12px;

            padding: 0 4px;

        }

        

        .category-nav-item {

            padding: 10px 20px;

            background: var(--bg-tertiary);

            border: 1px solid var(--border-color);

            border-radius: 50px;

            color: var(--text-secondary);

            font-size: 0.9em;

            font-weight: 500;

            cursor: pointer;

            transition: all 0.3s ease;

            white-space: nowrap;

            display: flex;

            align-items: center;

            gap: 8px;

        }

        

        .category-nav-item:hover {

            border-color: var(--accent-primary);

            color: var(--accent-primary);

            transform: translateY(-2px);

        }

        

        .category-nav-item.active {

            background: var(--accent-gradient);

            border-color: var(--accent-primary);

            color: white;

            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);

        }

        

        .category-nav-item img {

            width: 24px;

            height: 24px;

            border-radius: 50%;

            object-fit: cover;

        }

        

        /* Search Bar */

        .search-section {

            padding: 20px;

            margin-bottom: 30px;

        }

        

        .search-container {

            position: relative;

            max-width: 600px;

            margin: 0 auto;

        }

        

        .search-input {

            width: 100%;

            padding: 16px 50px 16px 20px;

            background: var(--bg-secondary);

            border: 1px solid var(--border-color);

            border-radius: 50px;

            font-size: 1em;

            color: var(--text-primary);

            transition: all 0.3s ease;

        }

        

        .search-input:focus {

            outline: none;

            border-color: var(--accent-primary);

            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

        }

        

        .search-input::placeholder {

            color: var(--text-muted);

        }

        

        .search-icon {

            position: absolute;

            right: 20px;

            top: 50%;

            transform: translateY(-50%);

            color: var(--text-muted);

            font-size: 1.2em;

            pointer-events: none;

        }

        

        .search-results {

            position: absolute;

            top: 100%;

            left: 0;

            right: 0;

            background: var(--bg-secondary);

            border: 1px solid var(--border-color);

            border-radius: 16px;

            margin-top: 8px;

            max-height: 400px;

            overflow-y: auto;

            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

            display: none;

            z-index: 200;

        }

        

        .search-results.show {

            display: block;

        }

        

        .search-result-item {

            padding: 16px;

            border-bottom: 1px solid var(--border-color);

            cursor: pointer;

            transition: all 0.2s ease;

            display: flex;

            align-items: center;

            gap: 12px;

        }

        

        .search-result-item:last-child {

            border-bottom: none;

        }

        

        .search-result-item:hover {

            background: var(--bg-tertiary);

        }

        

        .search-result-image {

            width: 50px;

            height: 50px;

            border-radius: 10px;

            object-fit: cover;

            border: 1px solid var(--border-color);

        }

        

        .search-result-info {

            flex: 1;

        }

        

        .search-result-name {

            font-weight: 600;

            color: var(--text-primary);

            margin-bottom: 4px;

        }

        

        .search-result-category {

            font-size: 0.85em;

            color: var(--text-secondary);

        }

        

        .search-result-price {

            font-weight: 700;

            color: var(--accent-primary);

        }

        

        .no-results {

            padding: 30px;

            text-align: center;

            color: var(--text-muted);

        }

        

        .all-categories-btn {

            padding: 10px 20px;

            background: var(--accent-gradient);

            border: none;

            border-radius: 50px;

            color: white;

            font-size: 0.9em;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s ease;

            margin-left: 12px;

        }

        

        .all-categories-btn:hover {

            transform: translateY(-2px);

            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);

        }

        

        /* Branches Selection Section */

        .branches-section {

            padding: 40px 20px;

            min-height: 100vh;

        }

        

        .branches-header {

            text-align: center;

            margin-bottom: 50px;

        }

        

        .branches-header h1 {

            font-size: 3em;

            font-weight: 700;

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            margin-bottom: 16px;

        }

        

        .branches-header p {

            color: var(--text-secondary);

            font-size: 1.2em;

        }

        

        .branches-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

            gap: 30px;

            max-width: 1400px;

            margin: 0 auto;

        }

        

        .branch-card {

            background: var(--bg-secondary);

            border: 1px solid var(--border-color);

            border-radius: 24px;

            overflow: hidden;

            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            cursor: pointer;

            position: relative;

        }

        

        .branch-card:hover {

            transform: translateY(-12px);

            border-color: var(--accent-primary);

            box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.4);

        }

        

        .branch-card-header {

            position: relative;

            height: 180px;

            background: var(--accent-gradient);

            display: flex;

            align-items: center;

            justify-content: center;

            overflow: hidden;

        }

        

        .branch-card-header::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);

        }

        

        .branch-logo {

            width: 100px;

            height: 100px;

            border-radius: 20px;

            background: var(--bg-tertiary);

            border: 3px solid var(--accent-primary);

            object-fit: cover;

            position: relative;

            z-index: 1;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 3em;

        }

        

        .branch-card-body {

            padding: 28px;

        }

        

        .branch-name {

            font-size: 1.6em;

            font-weight: 700;

            color: var(--text-primary);

            margin-bottom: 12px;

        }

        

        .branch-address {

            color: var(--text-secondary);

            font-size: 0.95em;

            margin-bottom: 20px;

            display: flex;

            align-items: center;

            gap: 8px;

        }

        

        .branch-address-icon {

            color: var(--accent-primary);

        }

        

        .branch-services {

            display: flex;

            gap: 10px;

            flex-wrap: wrap;

            margin-bottom: 20px;

        }

        

        .service-badge {

            padding: 8px 16px;

            background: var(--bg-tertiary);

            border: 1px solid var(--border-color);

            border-radius: 20px;

            font-size: 0.8em;

            color: var(--text-secondary);

            display: flex;

            align-items: center;

            gap: 6px;

            transition: all 0.2s ease;

        }

        

        .service-badge.active {

            border-color: var(--success);

            color: var(--success);

        }

        

        .branch-card-footer {

            padding: 20px 28px;

            border-top: 1px solid var(--border-color);

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        

        .branch-phone {

            color: var(--text-secondary);

            font-size: 0.9em;

            display: flex;

            align-items: center;

            gap: 8px;

        }

        

        .select-branch-btn {

            background: var(--accent-gradient);

            color: white;

            border: none;

            padding: 12px 24px;

            border-radius: 12px;

            font-size: 0.9em;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s ease;

            display: flex;

            align-items: center;

            gap: 8px;

        }

        

        .select-branch-btn:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);

        }

        

        .working-hours {

            margin-top: 16px;

            padding: 12px;

            background: var(--bg-tertiary);

            border-radius: 12px;

            font-size: 0.85em;

            color: var(--text-secondary);

        }

        

        .working-hours-title {

            font-weight: 600;

            margin-bottom: 6px;

            color: var(--text-primary);

        }

        

        .no-branches {

            text-align: center;

            padding: 60px 20px;

            color: var(--text-muted);

            font-size: 1.2em;

        }

        

        .covers-section {

            margin-bottom: 40px;

        }

        

        .slider-container {

            position: relative;

            width: 100%;

            height: 500px;

            border-radius: 24px;

            overflow: hidden;

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

        }

        

        .slide {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            opacity: 0;

            transition: opacity 0.8s ease-in-out;

            cursor: pointer;

        }

        

        .slide.active {

            opacity: 1;

        }

        

        .slide img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }

        

        .slide-content {

            position: absolute;

            bottom: 0;

            left: 0;

            right: 0;

            background: linear-gradient(transparent, rgba(10, 10, 15, 0.95));

            padding: 40px;

            color: white;

        }

        

        .slide-title {

            font-size: 2.5em;

            font-weight: 700;

            margin-bottom: 12px;

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        

        .slide-description {

            font-size: 1.1em;

            opacity: 0.9;

            color: var(--text-secondary);

            max-width: 600px;

        }

        

        .add-to-cart-btn {

            background: var(--accent-gradient);

            color: white;

            border: none;

            padding: 12px 24px;

            border-radius: 12px;

            font-size: 1em;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s ease;

            display: inline-flex;

            align-items: center;

            gap: 8px;

            margin-top: 20px;

        }

        

        .add-to-cart-btn:hover {

            transform: translateY(-2px);

            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);

        }

        

        .slider-dots {

            position: absolute;

            bottom: 25px;

            left: 50%;

            transform: translateX(-50%);

            display: flex;

            gap: 12px;

            z-index: 10;

        }

        

        .dot {

            width: 12px;

            height: 12px;

            border-radius: 50%;

            background: rgba(255, 255, 255, 0.3);

            cursor: pointer;

            transition: all 0.3s ease;

        }

        

        .dot.active {

            background: var(--accent-primary);

            width: 36px;

            border-radius: 6px;

        }

        

        .dot:hover {

            background: rgba(255, 255, 255, 0.6);

        }

        

        .categories-section {

            padding: 0 15px 60px;

        }

        

        .categories-section h2 {

            font-size: 2.5em;

            font-weight: 700;

            margin-bottom: 40px;

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        

        .category {

            background: var(--bg-secondary);

            border: 1px solid var(--border-color);

            border-radius: 24px;

            padding: 15px;

            margin-bottom: 32px;

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

            transition: all 0.3s ease;

        }

        

        .category:hover {

            border-color: var(--accent-primary);

            box-shadow: 0 20px 40px -12px rgba(99, 102, 241, 0.3);

        }

        

        .category-header {

            display: flex;

            align-items: center;

            margin-bottom: 28px;

            padding-bottom: 20px;

            border-bottom: 1px solid var(--border-color);

        }

        

        .category-icon {

            width: 70px;

            height: 70px;

            border-radius: 16px;

            object-fit: cover;

            margin-left: 20px;

            border: 2px solid var(--border-color);

        }

        

        .category-title {

            font-size: 1.8em;

            font-weight: 700;

            color: var(--text-primary);

            flex: 1;

        }

        

        .category-description {

            color: var(--text-secondary);

            font-size: 0.95em;

            margin-top: 6px;

        }

        

        .items-grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

            gap: 24px;

        }

        

        .item {

            background: var(--bg-tertiary);

            border: 1px solid var(--border-color);

            border-radius: 20px;

            overflow: hidden;

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

            transition: all 0.3s ease;

            cursor: pointer;

            position: relative;

        }

        

        .item:hover {

            transform: translateY(-8px);

            border-color: var(--accent-primary);

            box-shadow: 0 20px 40px -12px rgba(99, 102, 241, 0.3);

        }

        

        .item.unavailable {

            opacity: 0.6;

            cursor: not-allowed;

        }

        

        .item.unavailable:hover {

            transform: none;

            border-color: var(--border-color);

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

        }

        

        .unavailable-badge {

            position: absolute;

            top: 12px;

            right: 12px;

            background: var(--danger);

            color: white;

            padding: 6px 12px;

            border-radius: 20px;

            font-size: 0.75em;

            font-weight: 600;

            z-index: 10;

        }

        

        .item-image {

            width: 100%;

            height: 220px;

            object-fit: cover;

        }

        

        .item-content {

            padding: 24px;

        }

        

        .item-name {

            font-size: 1.3em;

            font-weight: 600;

            color: var(--text-primary);

            margin-bottom: 12px;

            line-height: 1.4;

        }

        

        .item-description {

            color: var(--text-secondary);

            font-size: 0.9em;

            margin-bottom: 16px;

            line-height: 1.6;

            display: -webkit-box;

            -webkit-line-clamp: 2;

            -webkit-box-orient: vertical;

            overflow: hidden;

        }

        

        .item-price {

            font-size: 1.5em;

            font-weight: 700;

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        

        .item-meta {

            display: flex;

            gap: 8px;

            margin-top: 16px;

            flex-wrap: wrap;

        }

        

        .meta-tag {

            background: var(--bg-secondary);

            border: 1px solid var(--border-color);

            padding: 6px 12px;

            border-radius: 20px;

            font-size: 0.75em;

            color: var(--text-secondary);

            transition: all 0.2s ease;

        }

        

        .meta-tag:hover {

            border-color: var(--accent-primary);

            color: var(--accent-primary);

        }

        

        .add-to-cart-btn {

            background: var(--accent-gradient);

            color: white;

            border: none;

            padding: 12px 24px;

            border-radius: 12px;

            font-size: 0.9em;

            font-weight: 600;

            cursor: pointer;

            display: flex;

            align-items: center;

            gap: 8px;

            margin-top: 20px;

            transition: all 0.3s ease;

            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);

            width: 100%;

            justify-content: center;

        }

        

        .add-to-cart-btn:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);

        }

        

        .add-to-cart-btn span:first-child {

            font-size: 1.3em;

            font-weight: bold;

        }

        

        .contact-section {

            background: var(--bg-secondary);

            border: 1px solid var(--border-color);

            color: var(--text-primary);

            padding: 32px;

            border-radius: 24px;

            margin-bottom: 32px;

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

        }

        

        .contact-section h2 {

            margin-bottom: 24px;

            font-size: 1.8em;

            font-weight: 700;

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        

        .contact-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

            gap: 16px;

        }

        

        .contact-item {

            display: flex;

            align-items: center;

            gap: 12px;

            padding: 16px;

            background: var(--bg-tertiary);

            border: 1px solid var(--border-color);

            border-radius: 12px;

            transition: all 0.3s ease;

        }

        

        .contact-item:hover {

            border-color: var(--accent-primary);

            transform: translateY(-2px);

        }

        

        .contact-icon {

            font-size: 1.5em;

            width: 44px;

            height: 44px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: var(--accent-gradient);

            border-radius: 12px;

            flex-shrink: 0;

        }

        

        .contact-link {

            color: var(--text-primary);

            text-decoration: none;

            transition: color 0.2s ease;

        }

        

        .contact-link:hover {

            color: var(--accent-primary);

        }

        

        .contact-text {

            color: var(--text-secondary);

        }

        

        .map-section {

            background: var(--bg-secondary);

            border: 1px solid var(--border-color);

            padding: 32px;

            border-radius: 24px;

            margin-bottom: 32px;

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

        }

        

        .map-section h2 {

            margin-bottom: 24px;

            font-size: 1.8em;

            font-weight: 700;

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        

        .map-container {

            width: 100%;

            height: 400px;

            border-radius: 16px;

            overflow: hidden;

            border: 1px solid var(--border-color);

        }

        

        .map-actions {

            margin-top: 20px;

        }

        

        .map-button {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            background: var(--accent-gradient);

            color: white;

            text-decoration: none;

            padding: 12px 24px;

            border-radius: 12px;

            font-weight: 600;

            transition: all 0.3s ease;

        }

        

        .map-button:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);

        }

        

        .map-button-icon {

            font-size: 1.2em;

        }

        

        

        /* Modal Styles */

        .modal {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.8);

            backdrop-filter: blur(8px);

            display: flex;

            align-items: center;

            justify-content: center;

            z-index: 1000;

        }

        

        .modal-content {

            background: var(--bg-secondary);

            border: 1px solid var(--border-color);

            border-radius: 24px;

            width: 90%;

            max-width: 550px;

            max-height: 90vh;

            overflow-y: auto;

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

        }

        

        .modal-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 24px;

            border-bottom: 1px solid var(--border-color);

        }

        

        .modal-header h2 {

            margin: 0;

            color: var(--text-primary);

            font-size: 1.5em;

            font-weight: 700;

        }

        

        .close-btn {

            background: var(--bg-tertiary);

            border: 1px solid var(--border-color);

            font-size: 1.5em;

            cursor: pointer;

            color: var(--text-secondary);

            padding: 0;

            width: 36px;

            height: 36px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 10px;

            transition: all 0.2s ease;

        }

        

        .close-btn:hover {

            color: var(--text-primary);

            border-color: var(--accent-primary);

            background: var(--accent-primary);

        }

        

        .modal-body {

            padding: 24px;

        }

        

        .modal-footer {

            display: flex;

            gap: 12px;

            padding: 24px;

            border-top: 1px solid var(--border-color);

        }

        

        .btn-primary {

            flex: 1;

            background: var(--accent-gradient);

            color: white;

            border: none;

            padding: 14px 24px;

            border-radius: 12px;

            font-size: 1em;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s ease;

        }

        

        .btn-primary:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);

        }

        

        .btn-secondary {

            flex: 1;

            background: var(--bg-tertiary);

            color: var(--text-primary);

            border: 1px solid var(--border-color);

            padding: 14px 24px;

            border-radius: 12px;

            font-size: 1em;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s ease;

        }

        

        .btn-secondary:hover {

            border-color: var(--accent-primary);

            background: var(--accent-primary);

        }

        

        /* Cart Sidebar */

        .cart-sidebar {

            position: fixed;

            top: 0;

            right: -420px;

            width: 420px;

            height: 100%;

            background: var(--bg-secondary);

            border-left: 1px solid var(--border-color);

            box-shadow: -25px 0 50px -12px rgba(0, 0, 0, 0.5);

            z-index: 1001;

            transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            display: flex;

            flex-direction: column;

        }

        

        .cart-sidebar.open {

            right: 0;

        }

        

        .cart-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 24px;

            border-bottom: 1px solid var(--border-color);

            background: var(--accent-gradient);

            color: white;

        }

        

        .cart-header h2 {

            margin: 0;

            color: white;

            font-size: 1.5em;

            font-weight: 700;

        }

        

        .cart-items {

            flex: 1;

            overflow-y: auto;

            padding: 20px;

        }

        

        .cart-item {

            display: flex;

            gap: 16px;

            padding: 16px;

            background: var(--bg-tertiary);

            border: 1px solid var(--border-color);

            border-radius: 16px;

            margin-bottom: 12px;

            transition: all 0.3s ease;

        }

        

        .cart-item:hover {

            border-color: var(--accent-primary);

            transform: translateY(-2px);

        }

        

        .cart-item-image {

            width: 70px;

            height: 70px;

            border-radius: 12px;

            object-fit: cover;

            border: 1px solid var(--border-color);

        }

        

        .cart-item-details {

            flex: 1;

        }

        

        .cart-item-name {

            font-weight: 600;

            color: var(--text-primary);

            margin-bottom: 6px;

            font-size: 1em;

        }

        

        .cart-item-price {

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            font-weight: 700;

        }

        

        .cart-item-quantity {

            display: flex;

            align-items: center;

            gap: 10px;

            margin-top: 8px;

        }

        

        .quantity-btn {

            width: 32px;

            height: 32px;

            border: 1px solid var(--border-color);

            background: var(--bg-secondary);

            color: var(--text-primary);

            border-radius: 8px;

            cursor: pointer;

            font-size: 1.2em;

            display: flex;

            align-items: center;

            justify-content: center;

            transition: all 0.2s ease;

        }

        

        .quantity-btn:hover {

            border-color: var(--accent-primary);

            background: var(--accent-primary);

            color: white;

        }

        

        .cart-footer {

            padding: 24px;

            border-top: 1px solid var(--border-color);

            background: var(--bg-tertiary);

        }

        

        .cart-total {

            display: flex;

            justify-content: space-between;

            align-items: center;

            margin-bottom: 20px;

            font-size: 1.3em;

            font-weight: 700;

            color: var(--text-primary);

        }

        

        .cart-total span:last-child {

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        

        .btn-checkout {

            width: 100%;

            background: var(--accent-gradient);

            color: white;

            border: none;

            padding: 16px;

            border-radius: 12px;

            font-size: 1.1em;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s ease;

        }

        

        .btn-checkout:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);

        }

        

        .cart-toggle {

            position: fixed;

            bottom: 30px;

            right: 30px;

            width: 70px;

            height: 70px;

            border-radius: 12px;

            background: var(--accent-gradient);

            color: white;

            border: none;

            font-size: 1.6em;

            cursor: pointer;

            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.5);

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            transition: all 0.3s ease;

            z-index: 999;

        }

        

        .cart-toggle:hover {

            transform: scale(1.1);

            box-shadow: 0 15px 40px rgba(99, 102, 241, 0.6);

        }

        

        .cart-toggle #cartCount {

            font-size: 0.95em;

            font-weight: bold;

        }

        

        /* Form Elements in Modal */

        .form-group {

            margin-bottom: 20px;

        }

        

        .form-group label {

            display: block;

            margin-bottom: 8px;

            font-weight: 600;

            color: var(--text-primary);

            font-size: 0.95em;

        }

        

        .form-group input,

        .form-group select,

        .form-group textarea {

            width: 100%;

            padding: 12px 16px;

            background: var(--bg-tertiary);

            border: 1px solid var(--border-color);

            border-radius: 12px;

            font-size: 1em;

            color: var(--text-primary);

            transition: all 0.2s ease;

        }

        

        .form-group input:focus,

        .form-group select:focus,

        .form-group textarea:focus {

            outline: none;

            border-color: var(--accent-primary);

            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

        }

        

        .form-group textarea {

            resize: vertical;

            min-height: 100px;

        }

        

        .variant-option {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 12px;

            padding: 16px 20px;

            background: var(--bg-tertiary);

            border: 2px solid var(--border-color);

            border-radius: 16px;

            margin-bottom: 12px;

            cursor: pointer;

            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            position: relative;

            overflow: hidden;

        }

        

        .variant-option::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            background: var(--accent-gradient);

            opacity: 0;

            transition: opacity 0.3s ease;

        }

        

        .variant-option:hover {

            border-color: var(--accent-primary);

            transform: translateY(-2px);

            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2);

        }

        

        .variant-option.selected {

            border-color: var(--accent-primary);

            background: var(--accent-gradient);

            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);

        }

        

        .variant-option.selected::before {

            opacity: 0.1;

        }

        

        .variant-option-content {

            display: flex;

            align-items: center;

            gap: 12px;

            position: relative;

            z-index: 1;

            flex: 1;

        }

        

        .variant-option-radio {

            width: 24px;

            height: 24px;

            border: 2px solid var(--border-color);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            transition: all 0.3s ease;

            flex-shrink: 0;

        }

        

        .variant-option.selected .variant-option-radio {

            border-color: white;

            background: white;

        }

        

        .variant-option-radio::after {

            content: '';

            width: 12px;

            height: 12px;

            border-radius: 50%;

            background: var(--accent-primary);

            opacity: 0;

            transition: opacity 0.3s ease;

        }

        

        .variant-option.selected .variant-option-radio::after {

            opacity: 1;

        }

        

        .variant-option-name {

            font-weight: 600;

            color: var(--text-primary);

            font-size: 1em;

            position: relative;

            z-index: 1;

        }

        

        .variant-option.selected .variant-option-name {

            color: white;

        }

        

        .variant-option-price {

            font-weight: 700;

            font-size: 1.1em;

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

            position: relative;

            z-index: 1;

        }

        

        .variant-option.selected .variant-option-price {

            color: white;

            background: none;

            -webkit-text-fill-color: white;

        }

        

        .addon-item {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 16px 20px;

            background: var(--bg-tertiary);

            border: 2px solid var(--border-color);

            border-radius: 16px;

            margin-bottom: 12px;

            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            position: relative;

            overflow: hidden;

        }

        

        .addon-item:hover {

            border-color: var(--accent-primary);

            transform: translateY(-2px);

            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2);

        }

        

        .addon-item.checked {

            border-color: var(--accent-primary);

            background: var(--bg-secondary);

            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);

        }

        

        .addon-item-left {

            display: flex;

            align-items: center;

            gap: 14px;

            flex: 1;

        }

        

        .addon-checkbox {

            width: 24px;

            height: 24px;

            border: 2px solid var(--border-color);

            border-radius: 8px;

            display: flex;

            align-items: center;

            justify-content: center;

            cursor: pointer;

            transition: all 0.3s ease;

            background: var(--bg-secondary);

            flex-shrink: 0;

        }

        

        .addon-checkbox::after {

            content: '✓';

            color: white;

            font-size: 14px;

            font-weight: bold;

            opacity: 0;

            transition: opacity 0.3s ease;

        }

        

        .addon-item.checked .addon-checkbox {

            background: var(--accent-gradient);

            border-color: var(--accent-primary);

        }

        

        .addon-item.checked .addon-checkbox::after {

            opacity: 1;

        }

        

        .addon-item input[type="checkbox"] {

            display: none;

        }

        

        .addon-item label {

            color: var(--text-primary);

            cursor: pointer;

            flex: 1;

            font-weight: 500;

            font-size: 0.95em;

        }

        

        .addon-item-right {

            display: flex;

            align-items: center;

            gap: 12px;

        }

        

        .addon-price {

            font-weight: 700;

            font-size: 1em;

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        

        .addon-quantity {

            width: 70px;

            padding: 8px 12px;

            background: var(--bg-secondary);

            border: 2px solid var(--border-color);

            border-radius: 10px;

            color: var(--text-primary);

            text-align: center;

            font-weight: 600;

            transition: all 0.2s ease;

        }

        

        .addon-quantity:focus {

            outline: none;

            border-color: var(--accent-primary);

            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

        }

        

        .addon-quantity:disabled {

            opacity: 0.5;

            cursor: not-allowed;

        }

        

        /* Checkout Modal Styles */

        .checkout-modal {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.8);

            backdrop-filter: blur(8px);

            display: none;

            align-items: center;

            justify-content: center;

            z-index: 2000;

        }

        

        .checkout-modal.show {

            display: flex;

        }

        

        .checkout-modal-content {

            background: var(--bg-secondary);

            border: 1px solid var(--border-color);

            border-radius: 24px;

            width: 90%;

            max-width: 600px;

            max-height: 90vh;

            overflow-y: auto;

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

        }

        

        .checkout-modal-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 24px;

            border-bottom: 1px solid var(--border-color);

        }

        

        .checkout-modal-header h2 {

            margin: 0;

            color: var(--text-primary);

            font-size: 1.5em;

            font-weight: 700;

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        

        .checkout-modal-body {

            padding: 24px;

        }

        

        .delivery-methods {

            display: grid;

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

            gap: 12px;

            margin-bottom: 24px;

        }

        

        .delivery-method {

            padding: 16px;

            background: var(--bg-tertiary);

            border: 2px solid var(--border-color);

            border-radius: 16px;

            cursor: pointer;

            transition: all 0.3s ease;

            text-align: center;

        }

        

        .delivery-method:hover {

            border-color: var(--accent-primary);

            transform: translateY(-2px);

        }

        

        .delivery-method.selected {

            border-color: var(--accent-primary);

            background: var(--accent-gradient);

        }

        

        .delivery-method-icon {

            font-size: 2em;

            margin-bottom: 8px;

        }

        

        .delivery-method-name {

            font-weight: 600;

            color: var(--text-primary);

        }

        

        .delivery-method.selected .delivery-method-name {

            color: white;

        }

        

        .form-section {

            margin-bottom: 20px;

        }

        

        .form-section-title {

            font-weight: 600;

            color: var(--text-primary);

            margin-bottom: 12px;

            font-size: 1.1em;

        }

        

        .form-row {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 16px;

        }

        

        .checkout-modal-footer {

            padding: 24px;

            border-top: 1px solid var(--border-color);

            display: flex;

            gap: 12px;

            justify-content: flex-end;

        }

        

        .btn-cancel {

            background: var(--bg-tertiary);

            color: var(--text-primary);

            border: 1px solid var(--border-color);

            padding: 12px 24px;

            border-radius: 12px;

            font-size: 1em;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s ease;

        }

        

        .btn-cancel:hover {

            background: var(--border-color);

        }

        

        .btn-confirm {

            background: var(--accent-gradient);

            color: white;

            border: none;

            padding: 12px 24px;

            border-radius: 12px;

            font-size: 1em;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s ease;

        }

        

        .btn-confirm:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);

        }

        

        /* Responsive Design */

        @media (max-width: 768px) {

            .container {

                padding: 0 16px;

            }

            

            .slider-container {

                height: 300px;

            }

            

            .slide-title {

                font-size: 1.8em;

            }

            

            .slide-description {

                font-size: 1em;

            }

            

            .categories-section h2 {

                font-size: 2em;

            }

            

            .items-grid {

                grid-template-columns: 1fr;

            }

            

            .cart-sidebar {

                width: 100%;

                right: -100%;

            }

            

            .cart-toggle {

                width: 60px;

                height: 60px;

                bottom: 20px;

                right: 20px;

            }

            

            .contact-grid {

                grid-template-columns: 1fr;

            }

        }

        

        /* Checkout Modal Styles */

        .checkout-modal {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(0, 0, 0, 0.8);

            backdrop-filter: blur(8px);

            display: none;

            align-items: center;

            justify-content: center;

            z-index: 2000;

        }

        

        .checkout-modal.show {

            display: flex;

        }

        

        .checkout-modal-content {

            background: var(--bg-secondary);

            border: 1px solid var(--border-color);

            border-radius: 24px;

            width: 90%;

            max-width: 600px;

            max-height: 90vh;

            overflow-y: auto;

            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

        }

        

        .checkout-modal-header {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 24px;

            border-bottom: 1px solid var(--border-color);

        }

        

        .checkout-modal-header h2 {

            margin: 0;

            color: var(--text-primary);

            font-size: 1.5em;

            font-weight: 700;

            background: var(--accent-gradient);

            -webkit-background-clip: text;

            -webkit-text-fill-color: transparent;

            background-clip: text;

        }

        

        .checkout-modal-body {

            padding: 24px;

        }

        

        .delivery-methods {

            display: grid;

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

            gap: 12px;

            margin-bottom: 24px;

        }

        

        .delivery-method {

            padding: 16px;

            background: var(--bg-tertiary);

            border: 2px solid var(--border-color);

            border-radius: 16px;

            cursor: pointer;

            transition: all 0.3s ease;

            text-align: center;

        }

        

        .delivery-method:hover {

            border-color: var(--accent-primary);

            transform: translateY(-2px);

        }

        

        .delivery-method.selected {

            border-color: var(--accent-primary);

            background: var(--accent-gradient);

        }

        

        .delivery-method-icon {

            font-size: 2em;

            margin-bottom: 8px;

        }

        

        .delivery-method-name {

            font-weight: 600;

            color: var(--text-primary);

        }

        

        .delivery-method.selected .delivery-method-name {

            color: white;

        }

        

        .form-section {

            margin-bottom: 20px;

        }

        

        .form-section-title {

            font-weight: 600;

            color: var(--text-primary);

            margin-bottom: 12px;

            font-size: 1.1em;

        }

        

        .form-row {

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 16px;

        }

        

        .checkout-modal-footer {

            padding: 24px;

            border-top: 1px solid var(--border-color);

            display: flex;

            gap: 12px;

            justify-content: flex-end;

        }

        

        .btn-cancel {

            background: var(--bg-tertiary);

            color: var(--text-primary);

            border: 1px solid var(--border-color);

            padding: 12px 24px;

            border-radius: 12px;

            font-size: 1em;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s ease;

        }

        

        .btn-cancel:hover {

            background: var(--border-color);

        }

        

        .btn-confirm {

            background: var(--accent-gradient);

            color: white;

            border: none;

            padding: 12px 24px;

            border-radius: 12px;

            font-size: 1em;

            font-weight: 600;

            cursor: pointer;

            transition: all 0.3s ease;

        }

        

        .btn-confirm:hover {

            transform: translateY(-2px);

            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);

        }

        

        .form-group {

            margin-bottom: 16px;

        }

        

        .form-group label {

            display: block;

            margin-bottom: 8px;

            font-weight: 500;

            color: var(--text-primary);

            font-size: 0.95em;

        }

        

        .form-input {

            width: 100%;

            padding: 12px 16px;

            background: var(--bg-tertiary);

            border: 2px solid var(--border-color);

            border-radius: 12px;

            color: var(--text-primary);

            font-size: 1em;

            font-family: inherit;

            transition: all 0.3s ease;

        }

        

        .form-input:focus {

            outline: none;

            border-color: var(--accent-primary);

            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);

        }

        

        .form-input::placeholder {

            color: var(--text-muted);

        }

        

        .form-input:disabled {

            opacity: 0.5;

            cursor: not-allowed;

        }

        

        .item-image-wrapper {

            position: relative;

            overflow: hidden;

            border-radius: 16px;

        }

        

        .item-features-overlay {

            position: absolute;

            bottom: 0;

            left: 0;

            right: 0;

            background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));

            padding: 12px 0;

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

            justify-content: center;

        }

        

        .feature-badge {

            background: rgba(99, 102, 241, 0.9);

            color: white;

            padding: 4px 10px;

            border-radius: 20px;

            font-size: 0.75em;

            font-weight: 600;

            white-space: nowrap;

            backdrop-filter: blur(4px);

            border: 1px solid rgba(255, 255, 255, 0.2);

            transition: all 0.3s ease;

        }

        

        .feature-badge.spicy {

            background: rgba(239, 68, 68, 0.9);

            border-color: rgba(255, 100, 100, 0.3);

        }

        

        .feature-badge.vegetarian {

            background: rgba(16, 185, 129, 0.9);

            border-color: rgba(50, 200, 150, 0.3);

        }

        

        .feature-badge.featured {

            background: rgba(245, 158, 11, 0.9);

            border-color: rgba(255, 200, 50, 0.3);

        }

        

        .feature-badge:hover {

            transform: translateY(-2px);

            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

        }



        /* Floating Order Status */

        .order-status-floating {

            position: fixed !important;

            top: 20px !important;

            left: 20px !important;

            right: 20px !important;

            z-index: 1000 !important;

            background: rgba(26, 26, 36, 0.95) !important;

            backdrop-filter: blur(10px) !important;

            border: 1px solid rgba(255, 255, 255, 0.1) !important;

            border-radius: 16px !important;

            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;

            animation: slideDown 0.3s ease-out !important;

            font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;

        }



        @keyframes slideDown {

            from {

                opacity: 0;

                transform: translateY(-20px);

            }

            to {

                opacity: 1;

                transform: translateY(0);

            }

        }



        .order-status-content {

            padding: 16px !important;

        }



        .order-status-header {

            display: flex !important;

            align-items: center !important;

            justify-content: space-between !important;

            margin-bottom: 12px !important;

        }



        .order-status-icon {

            font-size: 1.5em !important;

            margin-right: 8px !important;

        }



        .order-status-title {

            font-size: 1.1em !important;

            font-weight: 600 !important;

            color: #ffffff !important;

            flex: 1 !important;

        }



        .order-status-close {

            background: none !important;

            border: none !important;

            color: #71717a !important;

            font-size: 1.5em !important;

            cursor: pointer !important;

            padding: 0 !important;

            width: 32px !important;

            height: 32px !important;

            display: flex !important;

            align-items: center !important;

            justify-content: center !important;

            border-radius: 8px !important;

            transition: all 0.2s ease !important;

        }



        .order-status-close:hover {

            background: rgba(255, 255, 255, 0.1) !important;

            color: #ffffff !important;

        }



        .order-status-body {

            display: flex !important;

            flex-direction: column !important;

            gap: 12px !important;

        }



        .order-status-info {

            display: flex !important;

            align-items: center !important;

            justify-content: space-between !important;

            gap: 12px !important;

        }



        .order-number {

            font-size: 1.2em !important;

            font-weight: 700 !important;

            color: #6366f1 !important;

        }



        .order-type {

            font-size: 0.9em !important;

            color: #a1a1aa !important;

            background: rgba(99, 102, 241, 0.2) !important;

            padding: 4px 12px !important;

            border-radius: 20px !important;

        }



        .order-status-text {

            font-size: 1.1em !important;

            font-weight: 600 !important;

            color: #ffffff !important;

            text-align: center !important;

        }



        .order-progress-bar {

            height: 8px !important;

            background: #1a1a24 !important;

            border-radius: 4px !important;

            overflow: hidden !important;

        }



        .order-progress-fill {

            height: 100% !important;

            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;

            border-radius: 4px !important;

            transition: width 0.5s ease !important;

        }



        .order-status-details {

            text-align: center !important;

            font-size: 0.85em !important;

            color: #71717a !important;

        }



        /* Progress Steps */

        .order-progress-steps {

            display: flex !important;

            align-items: center !important;

            justify-content: space-between !important;

            padding: 16px 0 !important;

            gap: 8px !important;

        }



        .progress-step {

            display: flex !important;

            flex-direction: column !important;

            align-items: center !important;

            gap: 8px !important;

            flex: 1 !important;

            position: relative !important;

        }



        .step-dot {

            width: 32px !important;

            height: 32px !important;

            border-radius: 50% !important;

            background: #1a1a24 !important;

            border: 2px solid #27272a !important;

            display: flex !important;

            align-items: center !important;

            justify-content: center !important;

            font-size: 14px !important;

            color: #71717a !important;

            transition: all 0.3s ease !important;

            z-index: 2 !important;

        }



        .step-dot.active {

            background: #6366f1 !important;

            border-color: #6366f1 !important;

            color: #ffffff !important;

            box-shadow: 0 0 12px rgba(99, 102, 241, 0.5) !important;

        }



        .step-dot.completed {

            background: #10b981 !important;

            border-color: #10b981 !important;

            color: #ffffff !important;

        }



        .step-label {

            font-size: 0.75em !important;

            color: #71717a !important;

            text-align: center !important;

            transition: all 0.3s ease !important;

        }



        .step-label.active {

            color: #ffffff !important;

            font-weight: 600 !important;

        }



        .step-label.completed {

            color: #10b981 !important;

        }



        .progress-line {

            flex: 1 !important;

            height: 2px !important;

            background: #27272a !important;

            min-width: 20px !important;

            transition: all 0.3s ease !important;

        }



        .progress-line.active {

            background: #6366f1 !important;

        }



        .progress-line.completed {

            background: #10b981 !important;

        }



        @media (min-width: 768px) {

            .order-status-floating {

                left: auto !important;

                right: 20px !important;

                max-width: 350px !important;

            }

        }