:root {
            --dmart-red: #000082;
            --dmart-dark: #333333;
            --dmart-light: #f8f9fa;
            --dmart-gray: #6c757d;
            --shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
            --header-height: 56px;
            --nav-height: 56px;
            --primary-color: #000082;
        }
        
        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background-color: #f5f5f5;
            padding-bottom: 70px;
        }
        
        /* Header */
        .dmart-header {
            background-color: var(--dmart-red);
            color: white;
            padding: 10px 0;
            position: fixed;
            top: 0;
            z-index: 1000;
            width: 100%;
        }
        
        .dmart-logo {
            font-weight: 700;
            font-size: 1.5rem;
            width: 120px;
        }
        .dmart-logo img {            
            width: 120px;
        }
        
        .header-icon {
           font-size: 1.25rem;
            color: #000082;
            margin-left: 0px;
            font-weight: bold;
        }
        
        /* Search Bar */
        .search-container {
            background-color: white;
            padding: 10px 15px;
            box-shadow: var(--shadow);          
        }       
        
        
        .search-icon {
            position: absolute;
            left: 30px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--dmart-gray);
        }        
        
        /* Categories */
        .category-slider {
            overflow-x: auto;
            white-space: nowrap;
            padding: 10px 0;
            background: white;
            margin-bottom: 10px;           
        }
        
        .category-item {
            display: inline-block;
            text-align: center;
            padding: 0 15px;
        }
        
        .category-icon {
            width: 50px;
            height: 50px;
            background-color: var(--dmart-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 5px;
            color: var(--dmart-red);
            font-size: 1.25rem;
        }
        
        .category-name {
            font-size: 0.75rem;
            color: var(--dmart-dark);
            white-space: normal;
            max-width: 60px;
            display: inline-block;
        }
        
        /* Offers Banner */
        .offers-banner {
            margin: 10px 0;
            border-radius: 8px;
            overflow: hidden;
        }
        
        /* Product Cards */
        .product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-bottom: 15px;
            transition: var(--transition);
        }
        
        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
        }
        
        .product-img {
            width: 100%;
            height: 150px;
            object-fit: contain;
            padding: 10px;
            background: #f9f9f9;
        }
        
        .product-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--dmart-red);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 500;
        }
        
        .product-title {
            font-size: 0.9rem;
            font-weight: 500;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 40px;
        }
        
        .product-price {
            font-weight: 700;
            color: var(--dmart-red);
            font-size: 1rem;
        }
        
        .product-old-price {
            text-decoration: line-through;
            color: var(--dmart-gray);
            font-size: 0.8rem;
            margin-left: 5px;
        }
        
        .add-to-cart {
            width: 100%;
            border-radius: 5px;
            font-weight: 500;
            font-size: 0.9rem;
            padding: 5px;
            background: #ff6500;
        }
        
        /* Bottom Navigation */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff;
            backdrop-filter: blur(20px); /* Frosted glass effect */
            -webkit-backdrop-filter: blur(20px); /* Safari support */
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;           
            padding-bottom: env(safe-area-inset-bottom); /* Accounts for home indicator */
            display: flex;
            justify-content: space-around;
            align-items: center;           
        }
        
        .nav-item {
            text-align: center;
            padding: 5px 0;
        }
        
        .nav-icon {
            font-size: 1.25rem;
            color: var(--dmart-gray);
        }
        
        .nav-text {
            font-size: 0.7rem;
            color: var(--dmart-gray);
            margin-top: 2px;
        }
        
        .nav-item.active .nav-icon,
        .nav-item.active .nav-text {
            color: var(--dmart-red);
            font-weight: 500;
        }
        
        /* Cart Badge */
        .cart-badge {
            position: absolute;
           font-size: 0.6rem;
            padding: 2px 5px;
            background: #000082;
            color: #fff;
            border-radius: 50%;
        }
        
        /* Section Headers */
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 15px 0 10px;
            padding: 0 10px;
        }
        
        .section-title {
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--dmart-dark);
        }
        
        .view-all {
            color: var(--dmart-red);
            font-size: 0.8rem;
            text-decoration: none;
        }

        /* Header */
        .dmart-header {
            background-color: var(--dmart-red);
            color: white;
            padding: 10px 0;
            position: fixed;
            top: 0;
            z-index: 1000;
            width: 100%;
        }
        
        .dmart-logo {
            font-weight: 700;
            font-size: 1.5rem;
        }
        
        /* Checkout Steps */
        .checkout-steps {
            display: flex;
            justify-content: space-between;
            padding: 15px;
            background: white;
            margin-bottom: 15px;
        }
        
        .step {
            text-align: center;
            flex: 1;
            position: relative;
        }
        
        .step-circle {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #e9ecef;
            color: var(--dmart-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 5px;
            font-weight: 600;
        }
        
        .step-label {
            font-size: 0.75rem;
            color: var(--dmart-gray);
        }
        
        .step.active .step-circle {
            background: var(--dmart-red);
            color: white;
        }
        
        .step.active .step-label {
            color: var(--dmart-red);
            font-weight: 500;
        }
        
        /* Checkout Sections */
        .checkout-section {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: var(--shadow);
        }
        
        .section-title {
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 8px;
            color: var(--dmart-red);
        }
        
        /* Form Elements */
        .form-label {
            font-weight: 500;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }
        
        .form-control {
            border-radius: 8px;
            padding: 10px 15px;
            margin-bottom: 1rem;
        }
        
        .is-invalid {
            border-color: #dc3545;
        }
        
        .invalid-feedback {
            color: #dc3545;
            font-size: 0.8rem;
            margin-top: -0.5rem;
            margin-bottom: 0.5rem;
        }
        
        /* Payment Methods */
        .payment-method {
            display: flex;
            align-items: center;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .payment-method:hover {
            border-color: var(--dmart-red);
        }
        
        .payment-method.active {
            border-color: var(--dmart-red);
            background-color: rgba(227, 25, 55, 0.05);
        }
        
        .payment-icon {
            width: 40px;
            height: 40px;
            object-fit: contain;
            margin-right: 10px;
        }
        
        .payment-details {
            flex: 1;
        }
        
        .payment-title {
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .payment-desc {
            font-size: 0.8rem;
            color: var(--dmart-gray);
        }
        
        /* Order Summary */
        .order-summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .order-summary-label {
            color: var(--dmart-gray);
        }
        
        .order-summary-value {
            font-weight: 500;
        }
        
        .order-total {
            font-weight: 700;
            color: var(--dmart-red);
            font-size: 1.1rem;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #eee;
        }
        
        /* Bottom Navigation */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 5px 0;
        }
        
        .nav-item {
            text-align: center;
            padding: 5px 0;
        }
        
        .nav-icon {
            font-size: 1.25rem;
            color: var(--dmart-gray);
        }
        
        .nav-text {
            font-size: 0.7rem;
            color: var(--dmart-gray);
            margin-top: 2px;
        }
        
        .nav-item.active .nav-icon,
        .nav-item.active .nav-text {
            color: var(--dmart-red);
            font-weight: 500;
        }
        
        /* Checkout Button */
        .checkout-btn {           
            bottom: 70px;
            left: 0;
            right: 0;
            background: var(--dmart-red);
            color: white;
            padding: 15px;
            text-align: center;
            font-weight: 600;
            z-index: 999;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* Responsive Adjustments */
        @media (max-width: 576px) {
            .step-label {
                display: none;
            }
        }

        /* Cart Items */
        .cart-container {
            padding: 15px;
        }
        
        .cart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .cart-title {
            font-weight: 600;
            font-size: 1.25rem;
            color: var(--dmart-dark);
        }
        
        .clear-cart {
            color: var(--dmart-red);
            font-size: 0.9rem;
            text-decoration: none;
        }
        
        /* Cart Item */
        .cart-item {
            background: white;
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 10px;
            box-shadow: var(--shadow);
            display: flex;
        }
        
        .cart-item-img {
            width: 80px;
            height: 80px;
            object-fit: contain;
            border-radius: 6px;
            margin-right: 10px;
        }
        
        .cart-item-details {
            flex: 1;
        }
        
        .cart-item-title {
            font-size: 0.95rem;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .cart-item-price {
            font-weight: 700;
            color: var(--dmart-red);
            font-size: 0.95rem;
        }
        
        .cart-item-old-price {
            text-decoration: line-through;
            color: var(--dmart-gray);
            font-size: 0.8rem;
            margin-left: 5px;
        }
        
        /* Quantity Controls */
        .quantity-control {
            display: flex;
            align-items: center;
            margin-top: 8px;
        }
        
        .quantity-btn {
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .quantity-input {
            width: 40px;
            height: 30px;
            text-align: center;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            border-left: none;
            border-right: none;
        }
        
        .remove-item {
            margin-left: 10px;
            color: var(--dmart-gray);
            font-size: 0.9rem;
            cursor: pointer;
        }
        
        /* Cart Summary */
        .cart-summary {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-top: 15px;
            box-shadow: var(--shadow);
        }
        
        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .summary-label {
            color: var(--dmart-gray);
        }
        
        .summary-value {
            font-weight: 500;
        }
        
        .summary-total {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--dmart-red);
            margin-top: 5px;
            padding-top: 10px;
            border-top: 1px solid #eee;
        }
        
        /* Empty Cart */
        .empty-cart {
            text-align: center;
            padding: 40px 20px;
        }
        
        .empty-cart-icon {
            font-size: 3rem;
            color: #ddd;
            margin-bottom: 15px;
        }
        
        .empty-cart-title {
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .empty-cart-text {
            color: var(--dmart-gray);
            margin-bottom: 20px;
        }
        
        /* Bottom Navigation - Same as index.html */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 5px 0;
        }
        
        .nav-item {
            text-align: center;
            padding: 5px 0;
        }
        
        .nav-icon {
            font-size: 1.25rem;
            color: var(--dmart-gray);
        }
        
        .nav-text {
            font-size: 0.7rem;
            color: var(--dmart-gray);
            margin-top: 2px;
        }        
       

        /* Account */
        .auth-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 2rem;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .auth-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        
        .auth-logo {
            color: var(--dmart-red);
            font-weight: 700;
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }
        
        .auth-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .auth-subtitle {
            color: var(--dmart-gray);
            font-size: 0.9rem;
        }
        
        .form-control {
            border-radius: 8px;
            padding: 12px 15px;
            margin-bottom: 1rem;
        }
        
        .form-label {
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        
        .input-group-text {
            background: transparent;
            border-right: none;
        }
        
        .password-toggle {
            background: transparent;
            border-left: none;
            cursor: pointer;
        }
        
        .btn-auth {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            font-weight: 500;
        }
        
        .divider {
            display: flex;
            align-items: center;
            margin: 1.5rem 0;
            color: var(--dmart-gray);
        }
        
        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #ddd;
        }
        
        .divider::before {
            margin-right: 1rem;
        }
        
        .divider::after {
            margin-left: 1rem;
        }
        
        .social-btn {
            width: 100%;
            padding: 10px;
            border-radius: 8px;
            font-weight: 500;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .social-btn i {
            margin-right: 8px;
            font-size: 1.1rem;
        }
        
        .auth-footer {
            text-align: center;
            margin-top: 1.5rem;
            color: var(--dmart-gray);
        }
        
        .auth-link {
            color: var(--dmart-red);
            font-weight: 500;
            text-decoration: none;
        }
        
        .is-invalid {
            border-color: #dc3545;
        }
        
        .invalid-feedback {
            color: #dc3545;
            font-size: 0.8rem;
            margin-top: -0.5rem;
            margin-bottom: 1rem;
        }
        
        .password-strength {
            margin-top: 0.5rem;
        }
        
        .strength-meter {
            height: 5px;
            background: #e9ecef;
            border-radius: 5px;
            margin-bottom: 3px;
            overflow: hidden;
        }
        
        .strength-bar {
            height: 100%;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .strength-text {
            font-size: 0.75rem;
            color: var(--dmart-gray);
        }
        
        .terms-check {
            margin-top: 1rem;
        }      
        
        /* Bottom Navigation */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 5px 0;
        }
        
        .nav-item {
            text-align: center;
            padding: 5px 0;
        }
        
        .nav-icon {
            font-size: 1.25rem;
            color: var(--dmart-gray);
        }
        
        .nav-text {
            font-size: 0.7rem;
            color: var(--dmart-gray);
            margin-top: 2px;
        }       
       
        
        /* Filter Modal */
        .filter-option {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .filter-option-title {
            font-weight: 500;
            margin-bottom: 5px;
        }

        /* Product View */
        /* Product Gallery */
        .product-gallery {
            background: white;
            padding: 15px;
            text-align: center;
            margin-bottom: 15px;
        }
        
        .main-image {
            width: 100%;
            max-height: 300px;
            object-fit: contain;
            margin-bottom: 10px;
        }
        
        .thumbnail-container {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 5px;
        }
        
        .thumbnail {
            width: 60px;
            height: 60px;
            border: 1px solid #ddd;
            border-radius: 5px;
            object-fit: cover;
            cursor: pointer;
        }
        
        .thumbnail.active {
            border-color: var(--dmart-red);
        }
        
        /* Product Info */
        .product-info {
            background: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }
        
        .product-title {
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        
        .product-brand {
            color: var(--dmart-gray);
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        
        .product-rating {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .rating-stars {
            color: #ffc107;
            margin-right: 5px;
        }
        
        .rating-count {
            color: var(--dmart-gray);
            font-size: 0.9rem;
        }
        
        .product-price {
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--dmart-red);
            margin-bottom: 5px;
        }
        
        .product-old-price {
            text-decoration: line-through;
            color: var(--dmart-gray);
            font-size: 1rem;
            margin-left: 5px;
        }
        
        .product-discount {
            color: var(--dmart-red);
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .product-badge {
            display: inline-block;
            background: var(--dmart-red);
            color: white;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-bottom: 15px;
        }
        
        /* Product Details */
        .product-details {
            background: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: var(--shadow);
        }
        
        .details-title {
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .details-content {
            font-size: 0.9rem;
            color: var(--dmart-dark);
        }
        
        /* Quantity Selector */
        .quantity-selector {
            display: flex;
            align-items: center;
            margin: 15px 0;
        }
        
        .quantity-btn {
            width: 40px;
            height: 40px;
            border: 1px solid #ddd;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
        }
        
        .quantity-input {
            width: 60px;
            height: 40px;
            text-align: center;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            border-left: none;
            border-right: none;
        }
        
        /* Action Buttons */
        .action-buttons {
            position: fixed;
            bottom: 70px;
            left: 0;
            right: 0;
            display: flex;
            background: white;
            padding: 10px 15px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 999;
        }
        
        .btn-wishlist {
            width: 50px;
            height: 50px;
            border: 1px solid #ddd;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            color: var(--dmart-red);
            font-size: 1.5rem;
            background: white;
        }
        
        .btn-add-to-cart {
            flex: 1;
            height: 50px;
            border-radius: 8px;
            font-weight: 600;
        }
        
        /* Bottom Navigation */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 5px 0;
        }
        
        .nav-item {
            text-align: center;
            padding: 5px 0;
        }
        
        .nav-icon {
            font-size: 1.25rem;
            color: var(--dmart-gray);
        }
        
        .nav-text {
            font-size: 0.7rem;
            color: var(--dmart-gray);
            margin-top: 2px;
        }        
       

        /* Add to your main CSS file */
        .install-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 10px 15px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 50px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 1000;
        cursor: pointer;
        }

        .install-button:hover {
        background: #388E3C;
        }

        .install-button svg {
            width: 16px;
            height: 16px;
        }

         @media (display-mode: fullscreen) {
            html, body { 
                overflow: hidden;
                height: 100vh;
                position: fixed;
                width: 100%;
            }
        }

        
        /* Add this to your stylesheet */
        /*
        @media screen and (orientation: landscape) {
        body {
            position: fixed;
            width: 100%;
            height: 100%;
            overflow: hidden;
            touch-action: none; 
        }
    
        body:after {
            content: "Please rotate your device to portrait mode";
            position: absolute;
            top: 50%;
            left: 0;
            background: #000082;
            z-index: 9999;
            width: 100%;
            text-align: center;
            color: #fff;
            padding: 50px;
            display:none;
        }
        } */


        /* Prevent horizontal scroll */
        html, body {
        overflow-x: hidden; /* Block horizontal scrollbar */
        width: 100%;
        position: relative;
        }

        /* Disable touch gestures for horizontal scroll */
        body {
        touch-action: pan-y; /* Only allow vertical scrolling */
        }      
        

       .bottom-nav .nav-icon {
            transition: transform 0.3s ease;
        }
        .bottom-nav .nav-link.active .nav-icon {
            transform: scale(1.1);
        }

        
/* Ripple Effect */
.nav-ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(13, 110, 253, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

header.fixed-top {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

header.fixed-top {
    background: rgba(13, 110, 253, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.search-bar {
    background: white;
    border-radius: 8px;
}
    
.search-input {
    border: none;
    outline: none;
}
.header-margin{
    margin-top: 110px;
}

.update-notification {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

.update-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(0);
  animation: slideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.update-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.update-icon {
  width: 40px;
  height: 40px;
  color: #4CAF50;
  margin-right: 15px;
}

.update-title {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.update-message {
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

.update-actions {
  display: flex;
  gap: 15px;
}

.update-button {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.update-now {
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
  color: white;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.update-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.update-later {
  background: transparent;
  color: #666;
  border: 1px solid #ddd;
}

.update-later:hover {
  background: #f5f5f5;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    transform: translateY(20px);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .update-card {
    padding: 20px;
  }
  
  .update-actions {
    flex-direction: column;
  }
}

/* Hide modal container on all pages by default */
#firstLaunchModal {
  display: none;
}

/* Only show on homepage */
body.homepage #firstLaunchModal {
  display: block;
}

}
.badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--dmart-accent);
    color: var(--text-dark);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex
;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.app-update-notification {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #007AFF;
  color: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  transition: opacity 0.3s ease;
}

.update-message {
  font-weight: 500;
}

.update-button, .update-later {
  background: white;
  color: #007AFF;
  border: none;
  padding: 6px 12px;
  margin-left: 10px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
}

.update-later {
  background: transparent;
  color: white;
  text-decoration: underline;
}
.back-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #000082;
    padding: 4px;
}
.header-actions {
    display: flex;
    gap: 12px;
}


.alert-icon {
    position: relative;
    background: none;
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* new layout */