/* ================= GLOBAL ================= */
		html{
			max-width:100%;
			overflow-x:hidden;
		}

		body{
			margin:0;
			padding:0;
			font-family: Arial, sans-serif;
			background: #f2f2ff; 
			color: #030063; /* Dark Blue Text */
			max-width:100%;
			overflow-x:hidden;
		}

		*,
		*::before,
		*::after{
			box-sizing:border-box;
		}

/* ================= BACKGROUND ================= */
		.menu-page{
			background: #f2f2ff !important;
			color: #030063;
		}

		.home{
			background: #f2f2ff !important;
			color: #030063;
		}

/* ================= NAVBAR ================= */
		.logo-text{
			position: absolute;
			left: 20px; /* 👉 rapat kiri */
			color: #030063;
			font-weight: bold;
			font-size:19px;
		}

		.navbar{
			background: #ffffff;
			padding:12px 20px;
			text-align:center;
			position:sticky;
			top:0;
			z-index:1000;
			border-bottom: 2px solid #030063;
			box-shadow: 0 4px 6px -1px rgba(3, 0, 99, 0.1);
			display:flex;
			align-items:center;
			justify-content:center;
			flex-wrap:nowrap;
			gap:26px;
			width:100%;
			box-sizing:border-box;
		}

		.navbar a{
			color: #030063;
			text-decoration:none;
			margin:0;
			font-weight:500;
			padding:8px 10px;
			border-radius:8px;
			transition:0.3s;
			font-size:17px;
			white-space:nowrap;
			flex-shrink:0;
		}

		.navbar .nav-link,
		.navbar .nav-dropdown-toggle{
			display:inline-flex;
			align-items:center;
			justify-content:center;
			box-sizing:border-box;
		}

		.navbar .nav-link-home{
			width:116px;
		}

		.navbar .nav-link-menu{
			width:76px;
		}

		.navbar .nav-link-order{
			width:116px;
		}

		.navbar .nav-link-contact{
			width:130px;
		}

		.navbar .nav-link-feedback{
			width:124px;
		}

		.navbar .nav-link-gallery{
			width:82px;
		}

		.navbar .nav-link-cart{
			width:46px;
		}

		.navbar .nav-link-profile{
			width:82px;
		}

		.navbar .nav-link-auth{
			width:96px;
		}

		.navbar a:hover{
			color: #030063;
			background: rgba(3, 0, 99, 0.1);
		}

		.navbar a.active{
			color: #ffffff;
			background: #030063;
		}

		.navbar-dropdown{
			position:relative;
			flex-shrink:0;
		}

		.nav-dropdown-toggle{
			display:inline-flex;
			align-items:center;
			justify-content:center;
			gap:8px;
			margin:0;
			padding:8px 10px;
			border:0;
			border-radius:8px;
			background:transparent;
			color:#030063;
			font:inherit;
			font-size:17px;
			font-weight:500;
			line-height:1.2;
			white-space:nowrap;
			cursor:pointer;
			transition:0.3s;
		}

		.nav-dropdown-arrow{
			width:7px;
			height:7px;
			border-right:2px solid currentColor;
			border-bottom:2px solid currentColor;
			transform:translateY(-2px) rotate(45deg);
			transition:transform 0.22s ease;
		}

		.navbar-dropdown.open .nav-dropdown-arrow{
			transform:translateY(2px) rotate(225deg);
		}

		.nav-dropdown-toggle:hover,
		.navbar-dropdown.open .nav-dropdown-toggle{
			color:#030063;
			background:rgba(3, 0, 99, 0.1);
		}

		.nav-dropdown-toggle.active{
			color:#ffffff;
			background:#030063;
		}

		.nav-dropdown-menu{
			position:absolute;
			top:calc(100% + 8px);
			left:50%;
			z-index:1200;
			display:none;
			min-width:190px;
			padding:8px;
			border:1px solid #c8c7e6;
			border-radius:10px;
			background:#ffffff;
			box-shadow:0 16px 34px rgba(3, 0, 99, 0.16);
			transform:translateX(-50%);
		}

		.navbar-dropdown.open .nav-dropdown-menu{
			display:block;
		}

		.nav-dropdown-menu a,
		.nav-dropdown-menu button{
			display:block;
			width:100%;
			margin:0;
			padding:10px 12px;
			border:0;
			border-radius:8px;
			background:transparent;
			color:#030063;
			font:inherit;
			font-size:15px;
			font-weight:500;
			line-height:1.2;
			text-align:left;
			text-decoration:none;
			white-space:nowrap;
			cursor:pointer;
			box-sizing:border-box;
		}

		.nav-dropdown-menu a:hover,
		.nav-dropdown-menu button:hover{
			background:rgba(3, 0, 99, 0.1);
			color:#030063;
		}

		.nav-dropdown-menu a.active{
			background:#030063;
			color:#ffffff;
		}

		.navbar .cart-badge{
			display:inline-flex;
			align-items:center;
			justify-content:center;
			min-width:20px;
			height:20px;
			margin-left:6px;
			padding:0 6px;
			border-radius:999px;
			background:#dc2626;
			color:#ffffff;
			font-size:12px;
			font-weight:700;
		}

		.language-toggle{
			display:inline-flex;
			align-items:center;
			gap:3px;
			padding:3px;
			border:1px solid #c8c7e6;
			border-radius:999px;
			background:#f8fbff;
			flex-shrink:0;
		}

		.navbar .language-toggle a{
			display:inline-flex;
			align-items:center;
			justify-content:center;
			min-width:34px;
			height:26px;
			margin:0;
			padding:0 8px;
			border-radius:999px;
			color:#030063;
			font-size:12px;
			font-weight:800;
			text-decoration:none;
		}

		.navbar .language-toggle a.active{
			background:#030063;
			color:#ffffff;
		}

		.navbar .language-toggle a:hover{
			background:rgba(3, 0, 99, 0.1);
		}

		.navbar .language-toggle a.active:hover{
			background:#030063;
			color:#ffffff;
		}

		.navbar .navbar-theme-toggle{
			width:58px;
			height:30px;
			margin:0;
			padding:0;
			border:2px solid #1e3a8a;
			border-radius:999px;
			background:linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
			color:transparent !important;
			font-size:0 !important;
			line-height:0 !important;
			overflow:hidden;
			white-space:nowrap;
			cursor:pointer;
			position:relative;
			vertical-align:middle;
			transition:background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
			box-shadow:0 4px 10px rgba(30, 58, 138, 0.25);
			flex-shrink:0;
		}

		.navbar .navbar-theme-toggle::before{
			content:"";
			width:22px;
			height:22px;
			border-radius:50%;
			background:#ffffff;
			position:absolute;
			top:2px;
			left:3px;
			box-shadow:0 2px 6px rgba(0, 0, 0, 0.18);
			transition:transform 0.25s ease;
		}

		.navbar .navbar-theme-toggle::after{
			content:"";
			position:absolute;
			display:none;
		}

		.navbar .navbar-theme-toggle .toggle-icon{
			position:absolute;
			top:50%;
			transform:translateY(-50%);
			text-indent:0;
			font-size:11px;
			line-height:1;
			font-weight:700;
			pointer-events:none;
			transition:opacity 0.2s ease;
		}

		.navbar .navbar-theme-toggle .moon{
			right:8px;
			color:#1e3a8a;
			opacity:1;
		}

		.navbar .navbar-theme-toggle .sun{
			left:8px;
			color:#f8fafc;
			opacity:0;
		}

		.navbar .navbar-theme-toggle:hover{
			box-shadow:0 6px 14px rgba(30, 58, 138, 0.35);
		}

		.navbar-theme-toggle{
			width:74px;
			height:38px;
			margin:0 auto 18px;
			padding:0;
			border:2px solid #1e3a8a;
			border-radius:999px;
			background:linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
			color:transparent !important;
			font-size:0 !important;
			line-height:0 !important;
			overflow:hidden;
			white-space:nowrap;
			cursor:pointer;
			position:relative;
			vertical-align:middle;
			transition:background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
			box-shadow:0 8px 18px rgba(30, 58, 138, 0.35);
		}

		.navbar-theme-toggle::before{
			content:"";
			width:28px;
			height:28px;
			border-radius:50%;
			background:#ffffff;
			position:absolute;
			top:3px;
			left:4px;
			box-shadow:0 4px 10px rgba(0, 0, 0, 0.22);
			transition:transform 0.25s ease;
		}

		.navbar-theme-toggle::after{
			content:"";
			position:absolute;
			display:none;
		}

		.navbar-theme-toggle .toggle-icon{
			position:absolute;
			top:50%;
			transform:translateY(-50%);
			text-indent:0;
			font-size:13px;
			line-height:1;
			font-weight:700;
			pointer-events:none;
			transition:opacity 0.2s ease;
		}

		.navbar-theme-toggle .moon{
			right:10px;
			color:#1e3a8a;
			opacity:1;
		}

		.navbar-theme-toggle .sun{
			left:10px;
			color:#f8fafc;
			opacity:0;
		}

		.navbar-theme-toggle:hover{
			box-shadow:0 12px 24px rgba(30, 58, 138, 0.45);
		}

		body.dark-mode .navbar .navbar-theme-toggle::before{
			transform:translateX(28px);
		}

		body.dark-mode .navbar .navbar-theme-toggle .moon{
			opacity:0;
		}

		body.dark-mode .navbar .navbar-theme-toggle .sun{
			opacity:1;
		}

		@media (max-width:1024px){
			.navbar a .cart-badge{
				display:inline-flex;
				min-width:18px;
				height:18px;
				padding:0 5px;
				font-size:11px;
				line-height:1;
			}

			.navbar{
				display:flex;
				align-items:center;
				justify-content:center;
				flex-wrap:wrap;
				gap:6px 8px;
				padding:8px 10px;
				overflow:hidden;
				white-space:normal;
			}

			.navbar a{
				flex:0 0 auto;
				margin:0;
				padding:6px 7px;
				font-size:12px;
				line-height:1.2;
				border-radius:8px;
				white-space:nowrap;
			}

			.navbar .nav-link-home,
			.navbar .nav-link-menu,
			.navbar .nav-link-order,
			.navbar .nav-link-contact,
			.navbar .nav-link-feedback,
			.navbar .nav-link-gallery,
			.navbar .nav-link-cart,
			.navbar .nav-link-auth{
				width:auto;
				min-width:0;
			}

			.nav-dropdown-toggle{
				padding:6px 7px;
				font-size:12px;
				border-radius:8px;
			}

			.nav-dropdown-menu{
				position:fixed;
				top:52px;
				left:50%;
				min-width:190px;
				max-width:calc(100vw - 24px);
			}

			.nav-dropdown-menu a,
			.nav-dropdown-menu button{
				font-size:13px;
				padding:10px 12px;
			}

			.navbar .language-toggle a{
				min-width:30px;
				height:24px;
				font-size:11px;
				padding:0 7px;
			}

			.navbar .navbar-theme-toggle{
				position:fixed;
				left:14px;
				bottom:72px;
				z-index:1002;
				width:58px;
				height:32px;
				margin:0;
				border-width:2px;
				box-shadow:0 10px 24px rgba(30, 58, 138, 0.35);
			}

			.navbar .navbar-theme-toggle::before{
				width:24px;
				height:24px;
				top:2px;
				left:3px;
			}

			.navbar .navbar-theme-toggle .toggle-icon{
				font-size:12px;
			}

			.navbar .navbar-theme-toggle .moon{
				right:7px;
			}

			.navbar .navbar-theme-toggle .sun{
				left:7px;
			}

			body.dark-mode .navbar .navbar-theme-toggle::before{
				transform:translateX(27px);
			}
		}

		@media (max-width:380px){
			.navbar{
				gap:5px 6px;
				padding:7px 6px;
			}

			.navbar a{
				padding:5px 6px;
				font-size:11px;
			}

			.nav-dropdown-toggle{
				padding:5px 6px;
				font-size:11px;
			}

			.navbar .navbar-theme-toggle{
				width:54px;
				height:30px;
				left:10px;
				bottom:70px;
			}

			.navbar .navbar-theme-toggle::before{
				width:22px;
				height:22px;
			}

			body.dark-mode .navbar .navbar-theme-toggle::before{
				transform:translateX(25px);
			}
		}

/* ================= DARK MODE ================= */
		body.dark-mode{
			background:#0b1220 !important;
			color:#e5e7eb;
		}

		body.dark-mode .navbar{
			background:#111a2e;
			border-bottom-color:#4a5f80;
			box-shadow:0 4px 12px rgba(0, 0, 0, 0.35);
		}

		body.dark-mode .navbar a{
			color:#e5e7eb;
		}

		body.dark-mode .navbar a:hover,
		body.dark-mode .nav-dropdown-toggle:hover,
		body.dark-mode .navbar-dropdown.open .nav-dropdown-toggle{
			background:rgba(255, 255, 255, 0.1);
			color:#ffffff;
		}

		body.dark-mode .navbar a.active,
		body.dark-mode .nav-dropdown-toggle.active,
		body.dark-mode .navbar .cart-badge,
		body.dark-mode .order-btn,
		body.dark-mode .form-container button,
		body.dark-mode .payment-btn,
		body.dark-mode .edit-btn,
		body.dark-mode .ai-chat-header,
		body.dark-mode .ai-chat-toggle,
		body.dark-mode .ai-chat-form button{
			background:#1e3a8a;
			color:#ffffff;
		}

		body.dark-mode .nav-dropdown-toggle{
			color:#e5e7eb;
		}

		body.dark-mode .nav-dropdown-menu{
			background:#111a2e;
			border-color:#4a5f80;
			box-shadow:0 18px 40px rgba(0, 0, 0, 0.45);
		}

		body.dark-mode .nav-dropdown-menu a,
		body.dark-mode .nav-dropdown-menu button{
			color:#e5e7eb;
		}

		body.dark-mode .nav-dropdown-menu a:hover,
		body.dark-mode .nav-dropdown-menu button:hover{
			background:rgba(255, 255, 255, 0.1);
			color:#ffffff;
		}

		body.dark-mode .language-toggle{
			background:#15203c;
			border-color:#4a5f80;
		}

		body.dark-mode .navbar .language-toggle a{
			color:#e5e7eb;
		}

		body.dark-mode .navbar .language-toggle a.active{
			background:#1e3a8a;
			color:#ffffff;
		}

		body.dark-mode .navbar .navbar-theme-toggle{
			background:#1e293b;
			border-color:#60a5fa;
			box-shadow:0 10px 20px rgba(0, 0, 0, 0.45);
		}

		body.dark-mode .navbar .navbar-theme-toggle::before{
			transform:translateX(34px);
			background:#60a5fa;
		}

		body.dark-mode .navbar .navbar-theme-toggle::after{
			content:"";
		}

		body.dark-mode .navbar .navbar-theme-toggle:hover{
			box-shadow:0 14px 26px rgba(0, 0, 0, 0.55);
		}

		body.dark-mode .navbar .navbar-theme-toggle .moon{
			opacity:0;
		}

		body.dark-mode .navbar .navbar-theme-toggle .sun{
			opacity:1;
		}

		body.dark-mode .hero-overlay{
			background:rgba(11, 18, 32, 0.38);
		}

		body.dark-mode .hero,
		body.dark-mode .hero h1,
		body.dark-mode .hero p{
			color:#ffffff;
		}

		body.dark-mode .home-highlights,
		body.dark-mode .company-profile-section,
		body.dark-mode .home-cta,
		body.dark-mode.menu-page,
		body.dark-mode.signup-page,
		body.dark-mode.login-page,
		body.dark-mode.payment-page,
		body.dark-mode.contact-page,
		body.dark-mode.reset-page{
			background:#0b1220 !important;
			color:#e5e7eb;
		}

		body.dark-mode.login-page .login-box{
			background:#111a2e;
			border-color:#2a3b55;
			box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
		}

		body.dark-mode.login-page .login-box h2,
		body.dark-mode.login-page .login-box p,
		body.dark-mode.login-page .login-box .toggle-eye,
		body.dark-mode.login-page .login-box .error{
			color:#e5e7eb;
		}

		body.dark-mode.login-page .login-box input,
		body.dark-mode.login-page .password-box input{
			background:#15203c;
			border-color:#2a3b55;
			color:#e5e7eb;
		}

		body.dark-mode.login-page .login-box input::placeholder {
			color:#94a3b8;
		}

		body.dark-mode.login-page .login-box button{
			background:#1e3a8a;
			color:#ffffff;
		}

		body.dark-mode.login-page .login-box a{
			color:#93c5fd;
		}

		body.dark-mode .menu-title,
		body.dark-mode .home-section-title h2,
		body.dark-mode .home-section-title p,
		body.dark-mode .company-profile-header span,
		body.dark-mode .company-profile-header h2,
		body.dark-mode .company-profile-header p,
		body.dark-mode .home-cta h2,
		body.dark-mode .contact-hero h1,
		body.dark-mode .contact-hero p{
			color:#e5e7eb;
		}

		body.dark-mode .menu-card,
		body.dark-mode .company-profile-card,
		body.dark-mode .highlight-card,
		body.dark-mode .form-container,
		body.dark-mode .payment-container,
		body.dark-mode .contact-card,
		body.dark-mode .history-container,
		body.dark-mode .ai-chat-panel{
			background:#1a2740;
			color:#e5e7eb;
			border-color:#4a5f80;
			box-shadow:0 18px 38px rgba(0, 0, 0, 0.45);
		}

		body.dark-mode .menu-info,
		body.dark-mode .menu-info h3,
		body.dark-mode .menu-info p,
		body.dark-mode .menu-info a,
		body.dark-mode .company-profile-card h3,
		body.dark-mode .company-profile-card p,
		body.dark-mode .company-profile-card li,
		body.dark-mode .highlight-card h3,
		body.dark-mode .highlight-card p,
		body.dark-mode .form-container h2,
		body.dark-mode .form-container label,
		body.dark-mode .payment-container h2,
		body.dark-mode .payment-container h3,
		body.dark-mode .payment-container p,
		body.dark-mode .payment-container span{
			color:#e5e7eb !important;
		}

		body.dark-mode input,
		body.dark-mode textarea,
		body.dark-mode select,
		body.dark-mode .ai-chat-form input{
			background:#22324d !important;
			color:#e5e7eb !important;
			border-color:#60759a !important;
		}

		body.dark-mode table,
		body.dark-mode th,
		body.dark-mode td{
			background:#1a2740;
			color:#e5e7eb;
			border-color:#4a5f80;
		}

		body.dark-mode .history-time{
			color:#cbd5e1;
		}

		body.dark-mode .history-item-line + .history-item-line{
			border-top-color:#334155;
		}

		body.dark-mode .history-view-btn{
			background:#15203c;
			color:#e5e7eb;
			border-color:#60759a;
		}

		body.dark-mode .history-view-btn:hover,
		body.dark-mode .history-view-btn.open{
			background:#1e3a8a;
			color:#ffffff;
		}

		body.dark-mode .history-detail-row td{
			background:#111a2e;
		}

		body.dark-mode .history-detail-box,
		body.dark-mode .history-detail-table{
			background:#1a2740;
			border-color:#4a5f80;
		}

		body.dark-mode .history-detail-table th{
			background:#22324d;
			color:#e5e7eb;
		}

		body.dark-mode .history-modal-card,
		body.dark-mode .history-modal-items{
			background:#1a2740;
			color:#e5e7eb;
			border-color:#4a5f80;
		}

		body.dark-mode .history-modal-close{
			background:#22324d;
			color:#e5e7eb;
		}

		body.dark-mode .history-modal-close:hover{
			background:#1e3a8a;
		}

		body.dark-mode .history-modal-header h3,
		body.dark-mode .history-modal-header p,
		body.dark-mode .history-modal-section-title,
		body.dark-mode .history-modal-grid strong{
			color:#e5e7eb;
		}

		body.dark-mode .history-modal-section-title,
		body.dark-mode .history-modal-items th,
		body.dark-mode .history-modal-items td{
			border-color:#334155;
		}

		body.dark-mode .history-modal-items th{
			background:#22324d;
			color:#e5e7eb;
		}

		body.dark-mode .order-detail-back-link,
		body.dark-mode .order-detail-receipt-link{
			color:#93c5fd;
		}

		body.dark-mode .order-detail-invoice-head{
			background:#111a2e;
			border-color:#334155;
		}

		body.dark-mode .order-detail-invoice-head strong{
			color:#e5e7eb;
		}

		body.dark-mode .order-detail-invoice-head span{
			color:#cbd5e1;
		}

		body.dark-mode .order-detail-receipt-note{
			color:#cbd5e1;
		}

		body.dark-mode .select-btn span,
		body.dark-mode .ai-bot{
			background:#22324d;
			color:#e5e7eb;
			border-color:#60759a;
		}


/* ================= HERO ================= */
		.hero{
			min-height: 560px;
			height: clamp(560px, 72vh, 720px);
			display:flex;
			flex-direction:column;
			justify-content:center;
			align-items:center;
			text-align:center;
			position:relative;
			overflow:hidden;
			border-bottom: 1px solid rgba(3, 0, 99, 0.3);
			color: #030063;
		}

		.hero-slide{
			position:absolute;
			inset:0;
			background-size:cover;
			background-position:center 46%;
			opacity:0;
			transform:scale(1.01);
			transition:opacity 900ms ease, transform 4500ms ease;
		}

		.hero-slide.active{
			opacity:1;
			transform:scale(1);
		}

		.hero-overlay{
			position:absolute;
			inset:0;
			background:
				linear-gradient(90deg, rgba(3, 0, 99, 0.72), rgba(3, 0, 99, 0.34), rgba(255, 255, 255, 0.18)),
				radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.32), transparent 34%);
		}

		.hero-arrow{
			position:absolute;
			top:50%;
			z-index:2;
			width:48px;
			height:48px;
			border:1px solid rgba(255, 255, 255, 0.78);
			border-radius:50%;
			background:rgba(255, 255, 255, 0.82);
			color:#030063;
			font-size:36px;
			line-height:1;
			cursor:pointer;
			display:flex;
			align-items:center;
			justify-content:center;
			box-shadow:0 14px 32px rgba(3, 0, 99, 0.18);
			transform:translateY(-50%);
			transition:transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
		}

		.hero-arrow:hover{
			background:#ffffff;
			transform:translateY(-50%) scale(1.06);
			box-shadow:0 18px 38px rgba(3, 0, 99, 0.26);
		}

		.hero-arrow-prev{
			left:28px;
		}

		.hero-arrow-next{
			right:28px;
		}

		.hero-inner{
			position:relative;
			z-index:1;
			width:min(760px, calc(100% - 36px));
			margin-right:auto;
			margin-left:clamp(18px, 8vw, 110px);
			padding:34px;
			text-align:left;
			border-radius:26px;
			background:rgba(255, 255, 255, 0.58);
			border:1px solid rgba(255, 255, 255, 0.72);
			box-shadow:0 28px 80px rgba(3, 0, 99, 0.22);
			backdrop-filter:blur(3px);
		}

		.hero-eyebrow{
			display:inline-flex;
			margin-bottom:12px;
			padding:7px 12px;
			border-radius:999px;
			background:#ecfdf5;
			color:#047857;
			font-size:13px;
			font-weight:800;
			letter-spacing:0.06em;
			text-transform:uppercase;
		}

		.hero h1{
			margin:0;
			font-size:clamp(38px, 5vw, 62px);
			line-height:1.02;
			color:#030063;
		}

		.hero p{
			max-width:620px;
			margin:18px 0 0;
			color:#1e293b;
			font-size:18px;
			line-height:1.55;
		}

		.hero-actions{
			display:flex;
			gap:12px;
			flex-wrap:wrap;
			margin-top:24px;
		}

		.hero-secondary-btn{
			display:inline-flex;
			align-items:center;
			justify-content:center;
			padding:12px 22px;
			border:1px solid #c8c7e6;
			border-radius:10px;
			background:#ffffff;
			color:#030063;
			font-weight:800;
			text-decoration:none;
			box-shadow:0 10px 20px rgba(15, 23, 42, 0.08);
			transition:transform 0.2s ease, box-shadow 0.2s ease;
		}

		.hero-secondary-btn:hover{
			transform:translateY(-2px);
			box-shadow:0 14px 26px rgba(15, 23, 42, 0.12);
		}

		.hero-trust{
			display:flex;
			gap:10px;
			flex-wrap:wrap;
			margin-top:20px;
		}

		.hero-trust span{
			padding:7px 11px;
			border-radius:999px;
			background:#f2f2ff;
			color:#030063;
			font-size:13px;
			font-weight:700;
		}

		.hero-dots{
			display:flex;
			justify-content:flex-start;
			gap:8px;
			margin-top:24px;
		}

		.hero-dots button{
			width:10px;
			height:10px;
			padding:0;
			border:1px solid #030063;
			border-radius:50%;
			background:#ffffff;
			cursor:pointer;
		}

		.hero-dots button.active{
			background:#030063;
		}

		body.dark-mode .hero-overlay{
			background:
				linear-gradient(90deg, rgba(2, 6, 23, 0.82), rgba(15, 23, 42, 0.52), rgba(15, 23, 42, 0.22)),
				radial-gradient(circle at 70% 20%, rgba(96, 165, 250, 0.2), transparent 34%);
		}

		body.dark-mode .hero-inner{
			background:rgba(17, 26, 46, 0.62);
			border-color:rgba(96, 165, 250, 0.28);
			box-shadow:0 30px 90px rgba(0, 0, 0, 0.52);
		}

		body.dark-mode .hero-arrow{
			background:rgba(17, 26, 46, 0.82);
			border-color:rgba(96, 165, 250, 0.38);
			color:#ffffff;
			box-shadow:0 18px 42px rgba(0, 0, 0, 0.48);
		}

		body.dark-mode .hero-arrow:hover{
			background:#1e293b;
		}

		body.dark-mode .hero h1,
		body.dark-mode .hero p{
			color:#ffffff;
		}

		body.dark-mode .hero-secondary-btn{
			background:#1e293b;
			color:#e5e7eb;
			border-color:#4a5f80;
		}

		body.dark-mode .hero-trust span{
			background:#22324d;
			color:#e5e7eb;
		}

		.home-highlights{
			padding:55px 24px 35px;
			background:#f2f2ff;
		}

		.company-profile-section{
			padding:60px 24px 30px;
			background:#f2f2ff;
		}

		.company-profile-header{
			max-width:900px;
			margin:0 auto 28px;
			text-align:center;
		}

		.company-profile-header span{
			display:inline-block;
			margin-bottom:10px;
			color:#1e3a8a;
			font-weight:800;
			text-transform:uppercase;
			letter-spacing:0.08em;
			font-size:13px;
		}

		.company-profile-header h2{
			margin:0 0 14px;
			color:#030063;
			font-size:34px;
		}

		.company-profile-header p{
			margin:0;
			color:#334155;
			line-height:1.75;
		}

		.company-profile-grid{
			max-width:1080px;
			margin:0 auto;
			display:grid;
			grid-template-columns:repeat(2, minmax(0, 1fr));
			gap:18px;
		}

		.company-profile-card{
			background:#ffffff;
			border:2px solid #c8c7e6;
			border-radius:14px;
			padding:22px;
			box-shadow:0 16px 36px rgba(3, 0, 99, 0.08);
			cursor:pointer;
			transition:transform 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s ease, border-color 0.28s ease;
		}

		.company-profile-card:hover{
			transform:translateY(-4px);
			border-color:#030063;
			box-shadow:0 20px 42px rgba(3, 0, 99, 0.12);
		}

		.company-profile-card.wide{
			grid-column:1 / -1;
		}

		.company-profile-card h3{
			margin:0 0 12px;
			color:#030063;
			font-size:20px;
		}

		.company-profile-card p{
			margin:0;
			color:#334155;
			line-height:1.65;
		}

		.company-profile-card ul{
			margin:0;
			padding-left:20px;
			color:#334155;
			line-height:1.7;
		}

		.company-profile-card li{
			margin-bottom:4px;
		}

		.company-profile-card.motto{
			display:flex;
			flex-direction:column;
			justify-content:center;
			background:#ffffff;
			color:#030063;
		}

		.company-profile-card.motto h3,
		.company-profile-card.motto p,
		.company-profile-card.motto strong{
			color:#030063;
		}

		.company-profile-card.motto p{
			font-size:20px;
			font-weight:800;
			margin-bottom:10px;
		}

		.company-profile-card.motto strong{
			font-size:15px;
		}

		body.dark-mode .company-profile-card{
			border-color:#4a5f80;
		}

		body.dark-mode .company-profile-card:hover{
			border-color:#93c5fd;
		}

		body.dark-mode .company-profile-header p,
		body.dark-mode .company-profile-card ul{
			color:#e5e7eb;
		}

		body.dark-mode .company-profile-card.motto{
			background:#1a2740;
		}

		.section-divider{
			max-width:1080px;
			height:1px;
			margin:52px auto 0;
			background:#c8c7e6;
		}

		body.dark-mode .section-divider{
			background:#4a5f80;
		}

		.home-section-title{
			max-width:760px;
			margin:0 auto 28px;
			text-align:center;
		}

		.home-section-title h2,
		.home-cta h2{
			margin:0 0 10px;
			color:#030063;
			font-size:30px;
		}

		.home-section-title p{
			margin:0;
			color:#030063;
			line-height:1.6;
		}

		.highlight-grid{
			max-width:1050px;
			margin:0 auto;
			display:grid;
			grid-template-columns:repeat(3, 1fr);
			gap:22px;
		}

		.highlight-card{
			background:#ffffff;
			border:1px solid #c8c7e6;
			border-top:4px solid #030063;
			border-radius:14px;
			padding:24px;
			box-shadow:0 10px 24px rgba(3, 0, 99, 0.08);
		}

		.highlight-card h3{
			margin:0 0 10px;
			color:#030063;
			font-size:20px;
		}

		.highlight-card p{
			margin:0;
			color:#030063;
			line-height:1.6;
		}

		.home-cta{
			padding:34px 24px 84px;
			text-align:center;
			background:#f2f2ff;
		}

		.home-cta .order-btn{
			display:inline-flex;
			margin-top:8px;
		}

		@media (max-width:800px){
			.hero{
				min-height:620px;
				height:auto;
				padding:54px 0;
			}

			.hero-inner{
				margin:0 auto;
				padding:26px 20px;
				text-align:center;
			}

			.hero-arrow{
				width:40px;
				height:40px;
				font-size:30px;
			}

			.hero-arrow-prev{
				left:10px;
			}

			.hero-arrow-next{
				right:10px;
			}

			.hero h1{
				font-size:34px;
			}

			.hero p{
				font-size:16px;
			}

			.hero-actions,
			.hero-trust,
			.hero-dots{
				justify-content:center;
			}

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

			.company-profile-grid{
				grid-template-columns:1fr;
			}
		}

/* ================= BUTTON ================= */
		.order-btn{
			display:inline-flex;
			align-items:center;
			justify-content:center;
			background: #030063;
			color: white;
			padding:12px 25px;
			text-decoration:none;
			border-radius:10px;
			font-weight:bold;
			line-height:1;
			
		}

		.order-btn:hover{
			background: #030063;
			box-shadow: 0 10px 15px -3px rgba(3, 0, 99, 0.4);
		}

/* ============================= SIGNUP PAGE ============================= */
		.signup-page{
			background: #f2f2ff;
			display:flex;
			justify-content:center;
			align-items:center;
			height:100vh;
		}

/* ============================= GLOBAL FIX ============================= */
		*{
			box-sizing: border-box;
		}

/* ============================= LOGIN PAGE ============================= */
		body.login-page{
			background: #f2f2ff;
			display:flex;
			justify-content:center;
			align-items:center;
			height:100vh;
			font-family: 'Inter', sans-serif;
		}

/* BOX */
		.login-box{
			background: #ffffff;
			padding:35px;
			border-radius:20px;
			width:340px;
			text-align:center;
			color: #030063;
			box-shadow: 0 20px 25px -5px rgba(3, 0, 99, 0.1);
			border: 1px solid #c8c7e6;
		}

/* TEXT */
		.login-box h2{
			margin-bottom:10px;
		}

		.login-box p{
			color: #030063;
			font-size:14px;
			margin-bottom:15px;
		}

/* FORM CENTER */
		.login-box form{
			display:flex;
			flex-direction:column;
			align-items:center;
		}

/* INPUT */
		.login-box input{
			width:100%;
			max-width:280px;
			padding:12px;
			margin:10px auto;
			border-radius:10px;
			border: 1px solid #c8c7e6;
			background: #f2f2ff;
			color: #030063;
			outline: none;
			transition: all 0.3s ease;
		}


/* ICON MATA */


		.password-box{
			width: 100%;
			max-width: 280px;
			margin: 10px auto;
			position:relative;
		}

		.password-box input{
			width: 100%;
			padding: 12px;
			padding-right: 40px; /* ruang untuk icon */
			border-radius: 10px;
			border: 1px solid #c8c7e6;
			background: #f2f2ff;
			color: #030063;
		}

		.toggle-eye{
			position: absolute;
			right: 12px;
			top: 50%;
			transform: translateY(-50%);
			width:30px;
			height:30px;
			display:inline-flex;
			align-items:center;
			justify-content:center;
			padding:0;
			border:0;
			background:transparent;
			cursor: pointer;
			color: #94a3b8;
			line-height:1;
		}

		.toggle-eye svg{
			width:20px;
			height:20px;
			fill:none;
			stroke:currentColor;
			stroke-width:2;
			stroke-linecap:round;
			stroke-linejoin:round;
		}

		.toggle-eye:hover{
			color: #030063;
		}

		/* TOGGLE EYE */
		.toggle-eye:hover{
			color: #030063;
			transform: translateY(-50%);
		}

		/* click effect */
		.toggle-eye:active{
			transform: translateY(-50%) scale(0.9);
		}

		/* FOCUS EFFECT */
		.login-box input:focus{
			border-color: #030063;
		}

		.login-box button {
			background: #030063;
			color: white;
			border: none;
			padding: 12px 20px;
			border-radius: 10px;
			cursor: pointer;
			width: 100%;
			font-weight: bold;
			transition: 0.3s;
		}

		/* BUTTON HOVER */
		.login-box button:hover{
			transform:translateY(-2px);
			box-shadow: 0 10px 15px -3px rgba(3, 0, 99, 0.5);
		}

		.login-box .password-box input{
			margin:0;
		}

		.login-box .password-box .toggle-eye{
			position:absolute;
			right:10px;
			top:50%;
			transform:translateY(-50%);
			width:30px;
			height:30px;
			padding:0;
			border:0;
			border-radius:8px;
			background:transparent;
			color:#64748b;
			box-shadow:none;
			display:inline-flex;
			align-items:center;
			justify-content:center;
		}

		.login-box .password-box .toggle-eye:hover{
			background:rgba(3, 0, 99, 0.08);
			color:#030063;
			box-shadow:none;
			transform:translateY(-50%);
		}

		/* LINK */
		.login-box a{
			color: #030063;
			font-size:14px;
			text-decoration: none;
		}

		.login-box a:hover{
			text-decoration:underline;
		}

		/* ERROR */
		.error{
			color:#f87171;
			margin-top:10px;
			font-size:14px;
		}


		/* ============================= CART PAGE ============================= */
		.cart-page{
			background:#f2f2ff !important;
			color:#030063;
			min-height:100vh;
		}

		.cart-container{
			max-width:900px;
			margin:40px auto 80px;
			padding:0 20px;
		}

		.empty-cart-state{
			display:flex;
			flex-direction:column;
			align-items:center;
			justify-content:center;
			min-height:420px;
			padding:40px 20px;
			background:#ffffff;
			border-radius:20px;
			box-shadow:0 8px 24px rgba(3, 0, 99, 0.1);
		}

		.empty-cart-icon{
			font-size:80px;
			margin-bottom:20px;
			display:block;
		}

		.empty-cart-title{
			margin:0 0 12px;
			font-size:28px;
			color:#030063;
			text-align:center;
		}

		.empty-cart-text{
			margin:0 0 24px;
			font-size:16px;
			color:#475569;
			text-align:center;
			max-width:320px;
			line-height:1.6;
		}

		.empty-cart-btn{
			display:inline-block;
			padding:12px 32px;
			background:linear-gradient(135deg, #030063, #1e3a8a);
			color:#ffffff;
			border:none;
			border-radius:12px;
			font-size:16px;
			font-weight:600;
			text-decoration:none;
			cursor:pointer;
			transition:all 0.3s ease;
			box-shadow:0 8px 18px rgba(3, 0, 99, 0.25);
		}

		.empty-cart-btn:hover{
			transform:translateY(-2px);
			box-shadow:0 12px 28px rgba(3, 0, 99, 0.35);
		}

		body.dark-mode .cart-page{
			background:#0b1220 !important;
			color:#e5e7eb;
		}

		body.dark-mode .empty-cart-state{
			background:#111a2e;
			box-shadow:0 8px 24px rgba(0, 0, 0, 0.4);
		}

		body.dark-mode .empty-cart-title{
			color:#e5e7eb;
		}

		.empty-cart-btn:hover{
			transform:translateY(-2px);
			box-shadow:0 12px 28px rgba(3, 0, 99, 0.35);
		}

		.cart-table-form{
			display:block;
			overflow-x:auto;
		}

		.cart-table-form table{
			width:100%;
			border-collapse:collapse;
			background:#ffffff;
			border-radius:10px;
			overflow:hidden;
			box-shadow:0 4px 12px rgba(3, 0, 99, 0.08);
		}

		.cart-table-form table th{
			background:#030063;
			color:#ffffff;
			padding:16px;
			text-align:left;
			font-weight:600;
		}

		.cart-table-form table td{
			padding:14px 16px;
			border-bottom:1px solid #e2e8f0;
		}

		.cart-table-form table tr:hover{
			background:#f8fafc;
		}

		.cart-table-form table tr:last-child td{
			border-bottom:none;
		}

		.cart-table-form h3{
			margin:24px 0 12px;
			color:#030063;
			font-size:18px;
		}

		body.dark-mode .empty-cart-btn:hover{
			transform:translateY(-2px);
			box-shadow:0 12px 28px rgba(3, 0, 99, 0.35);
		}

		body.dark-mode .cart-table-form table{
			background:#111a2e;
			box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);
		}

		body.dark-mode .cart-table-form table th{
			background:#1e293b;
			color:#e5e7eb;
		}

		body.dark-mode .cart-table-form table td{
			border-bottom-color:#334155;
			color:#e5e7eb;
		}

		body.dark-mode .cart-table-form table tr:hover{
			background:#1e2b3a;
		}

		body.dark-mode .cart-table-form h3{
			color:#e5e7eb;
		}

		.cart-notice{
			margin:0 0 18px;
			padding:13px 16px;
			border-radius:12px;
			font-size:14px;
			font-weight:700;
			text-align:center;
		}

		.cart-notice.success{
			background:#dcfce7;
			color:#166534;
			border:1px solid #86efac;
			box-shadow:0 10px 24px rgba(22, 101, 52, 0.1);
		}

		.cart-notice.floating{
			width:min(420px, calc(100% - 32px));
			margin:18px auto 0;
		}

		.cart-header{
			display:flex;
			align-items:flex-end;
			justify-content:center;
			gap:16px;
			margin-bottom:22px;
		}

		.cart-header h2{
			margin:0 0 6px;
			color:#030063;
			font-size:30px;
		}

		.cart-header p{
			margin:0;
			color:#64748b;
			line-height:1.5;
		}

		.cart-secondary-link{
			display:inline-flex;
			align-items:center;
			justify-content:center;
			min-height:42px;
			padding:0 16px;
			border-radius:10px;
			background:#ffffff;
			color:#030063;
			border:1px solid #c8c7e6;
			text-decoration:none;
			font-weight:700;
			white-space:nowrap;
		}

		.cart-secondary-link:hover{
			background:#eef2ff;
		}

		.cart-qty-input{
			width:78px;
			padding:9px 10px;
			border:1px solid #c8c7e6;
			border-radius:10px;
			text-align:center;
			color:#030063;
			font-weight:700;
		}

		.cart-remove-btn,
		.cart-action-btn{
			border:0;
			cursor:pointer;
			border-radius:10px;
			font-weight:800;
			text-decoration:none;
			transition:transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
		}

		.cart-remove-btn{
			padding:8px 10px;
			background:#dc2626;
			color:#ffffff;
		}

		.cart-remove-btn:hover,
		.cart-action-btn:hover{
			transform:translateY(-2px);
			filter:brightness(1.03);
		}

		.cart-summary{
			display:flex;
			justify-content:space-between;
			align-items:center;
			gap:16px;
			margin-top:18px;
			padding:18px 20px;
			border-radius:12px;
			background:#ffffff;
			border:1px solid #dbe2f0;
			box-shadow:0 4px 12px rgba(3, 0, 99, 0.08);
		}

		.cart-summary span{
			color:#475569;
			font-weight:700;
		}

		.cart-summary strong{
			color:#030063;
			font-size:22px;
		}

		.cart-actions{
			display:flex;
			gap:12px;
			flex-wrap:wrap;
			align-items:center;
			margin-top:18px;
		}

		.cart-action-btn{
			display:inline-flex;
			align-items:center;
			justify-content:center;
			min-height:44px;
			padding:0 18px;
			color:#ffffff;
		}

		.cart-action-btn.primary{
			background:#1e3a8a;
		}

		.cart-action-btn.muted{
			background:#64748b;
		}

		.cart-action-btn.checkout{
			background:#0f172a;
			margin-left:auto;
			min-width:130px;
		}

		body.dark-mode .cart-notice.success{
			background:#123524;
			color:#bbf7d0;
			border-color:#15803d;
		}

		body.dark-mode .cart-header h2,
		body.dark-mode .cart-summary strong{
			color:#e5e7eb;
		}

		body.dark-mode .cart-header p,
		body.dark-mode .cart-summary span{
			color:#cbd5e1;
		}

		body.dark-mode .cart-secondary-link,
		body.dark-mode .cart-summary{
			background:#111a2e;
			color:#e5e7eb;
			border-color:#334155;
		}

		body.dark-mode .cart-qty-input{
			background:#15203c;
			border-color:#334155;
			color:#e5e7eb;
		}

		.form-message.info{
			background:#dbeafe;
			color:#1e3a8a;
			border:1px solid #93c5fd;
		}

		body.dark-mode .form-message.info{
			background:#172554;
			color:#bfdbfe;
			border-color:#2563eb;
		}

		@media (max-width:700px){
			.cart-container{
				margin:24px auto 60px;
			}

			.cart-header,
			.cart-summary{
				align-items:stretch;
				flex-direction:column;
			}

			.cart-secondary-link,
			.cart-action-btn,
			.cart-action-btn.checkout{
				width:100%;
				margin-left:0;
			}

			.cart-table-form table{
				min-width:680px;
			}
		}

		/* ============================= MENU ============================= */
		.menu-title{
			text-align:center;
			margin-top:30px;
			font-size:30px;
			color:#030063;
		}

		.menu-container{
			display:flex;
			justify-content:center;
			gap:25px;
			flex-wrap:wrap;
			padding:40px 40px 70px;
		}

		.menu-card{
			background: #ffffff;
			border: 1px solid #c8c7e6;
			border-radius: 20px;
			width:300px;
			overflow:hidden;
			color: #030063;
			transition: all 0.3s ease;
			box-shadow: 0 24px 48px rgba(3, 0, 99, 0.32);
			display:flex;
			flex-direction:column;
			cursor:pointer;
		}

		.menu-card:hover{
			transform: translateY(-10px);
			box-shadow: 0 34px 68px rgba(3, 0, 99, 0.42);
			border-color: #030063;
		}

		.menu-img{
			width:100%;
			height:180px;
			object-fit: cover;
		}

		.menu-info{
			padding:15px;
			text-align:center;
			display:flex;
			flex-direction:column;
			flex:1;
		}

		.menu-info h3{
			margin:8px 0 12px;
		}

		.menu-info p{
			flex:1;
			margin:0 0 12px;
			line-height:1.35;
		}

		.price{
			color:#22c55e;
			font-weight:bold;
			margin:10px 0;
			text-align:center;
		}

		.menu-card-actions{
			display:flex;
			justify-content:center;
			align-items:center;
			gap:10px;
			flex-wrap:wrap;
			margin-top:12px;
		}

		.menu-quantity{
			display:flex;
			flex-direction:column;
			align-items:center;
			font-size:14px;
			color:#334155;
		}

		.menu-quantity input{
			width:72px;
			padding:8px;
			border:1px solid #c8c7e6;
			border-radius:10px;
			text-align:center;
			margin-top:6px;
		}

		.select-btn{
			display:inline-block;
			padding:8px 20px;
			background:#dadaee;
			color:#fff;
			border-radius:8px;
			cursor:pointer;
			margin-top:10px;
			transition:0.3s;
			border:1px solid #c8c7e6;
		}

		.select-btn input{
			display:none;
		}

		.select-btn{
			display:inline-block;
			border-radius:8px;
			overflow:hidden;
		}

		.select-btn span{
			display:block;
			padding:8px 20px;
			background: #ffffff;
			color:#030063;
			border-radius:8px;
			transition:0.3s;
			border: 1px solid #c8c7e6;
		}

		.select-btn:hover span {
			background: #f2f2ff;
			border-color: #030063;
		}

		/* hide checkbox */
		.select-btn input{
			display:none;
		}

		/* selected */
		.select-btn input:checked + span{
			background: #030063;
			color: white;
			border: 1px solid #030063;
		}

		/* hover */
		.select-btn span:hover{
			background: #f2f2ff;
			border-color: #030063;
		}

		
		.order-btn-container{
			text-align: center;
			margin-top: -15px; /* adjust sini nak naik */
			margin-bottom: 60px; /* 🔥 tambah jarak dengan footer */
		}

		.order-btn{
			display:inline-flex;
			align-items:center;
			justify-content:center;
			padding: 10px 25px;
			background: #030063;
			color: white;
			border: none;
			border-radius: 10px;
			cursor: pointer;
			line-height:1;
		}

		/* ============================= ORDER PAGE (PREMIUM) ============================= */
		/* ================= ORDER FORM FINAL (REPAIR + SAFE) ================= */

		/* CONTAINER */
		.order-container{
			max-width:650px;
			margin: 60px auto;
			padding: 40px;
			border-radius:24px;
			background: linear-gradient(145deg, #ffffff, #eef4ff);
			color: #030063;
			border: 1px solid #c8c7e6;
			box-shadow:
				0 24px 60px rgba(3, 0, 99, 0.16),
				0 8px 18px rgba(15, 23, 42, 0.08),
				inset 0 1px 0 rgba(255, 255, 255, 0.9);
			transition: transform 0.25s ease, box-shadow 0.25s ease;
		}

		.order-container:hover{
			transform: translateY(-2px);
			box-shadow:
				0 30px 72px rgba(3, 0, 99, 0.2),
				0 10px 22px rgba(15, 23, 42, 0.1),
				inset 0 1px 0 rgba(255, 255, 255, 0.95);
		}

		/* REMOVE GLOW BORDER RAINBOW */
		.order-container::before{
			display: none;
		}

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

		/* FULL WIDTH */
		.order-form .full{
			grid-column:1 / 3;
		}

		/* LABEL */
		.order-form label{
			font-size:13px;
			color:#030063;
			margin-bottom:5px;
			display:block;
			font-weight:500;
		}

		/* INPUT */
		.order-form input,
		.order-form textarea{
			width:100%;
			padding:12px;

			border-radius:12px;
			border: 2px solid #9fa3dc;

			background: #f2f2ff;
			color: #030063;
			font-size: 14px;
			outline:none;
			transition:border-color 0.2s ease, box-shadow 0.2s ease;
		}

		/* FOCUS (SATU SAHAJA - CLEAN) */
		.order-form input:focus,
		.order-form textarea:focus{
			border-color: #030063;
			box-shadow:0 0 0 3px rgba(3, 0, 99, 0.08);
		}

		/* TEXTAREA */
		.order-form textarea{
			height:60px;
			resize:none;
		}

		.order-menu-row{
			display:flex;
			gap:10px;
			margin-top:10px;
		}

		.order-menu-row input{
			flex:1;
			min-width:0;
		}

		.location-input-wrap{
			position:relative;
		}

		.location-input-wrap input{
			padding-right:92px;
		}

		.location-icon-actions{
			position:absolute;
			top:50%;
			right:9px;
			display:flex;
			gap:6px;
			transform:translateY(-50%);
		}

		.location-icon-actions button{
			display:grid;
			place-items:center;
			width:34px;
			height:34px;
			border:0;
			border-radius:9px;
			background:#ffffff;
			color:#030063;
			font-size:17px;
			cursor:pointer;
			transition:background 0.2s ease, transform 0.2s ease;
		}

		.location-icon-actions button:hover{
			background:#eef2ff;
			transform:translateY(-1px);
		}

		.location-helper{
			margin:10px 0 0;
			color:#475569;
			font-size:12px;
			line-height:1.45;
		}

		.location-map{
			display:none;
			width:100%;
			height:190px;
			margin-top:12px;
			border:2px solid #9fa3dc;
			border-radius:14px;
			background:#f2f2ff;
		}

		.location-map.show{
			display:block;
		}

		/* BUTTON */
		.submit-btn{
			grid-column:1 / 3;
			position:relative;
			overflow:hidden;

			padding:14px;
			border:none;
			border-radius:14px;

			background: #030063;
			color: white;

			font-weight: 600;
			font-size:15px;

			cursor:pointer;
			transition:0.3s;
		}

		/* BUTTON ANIMATION */
		.submit-btn::after{
			content:"";
			position:absolute;
			top:0;
			left:-100%;
			width:100%;
			height:100%;
			
			background: linear-gradient(120deg,transparent,rgba(255,255,255,0.4),transparent);
			transition:0.5s;
		}

		.submit-btn:hover::after{
			left:100%;
		}

		/* RESPONSIVE */
		@media (max-width:760px){
			.order-container{
				width:auto;
				max-width:none;
				margin:22px 16px 130px;
				padding:24px 18px;
				border-radius:18px;
			}

			.order-form{
				grid-template-columns:1fr !important;
				gap:16px;
			}

			.order-form .full{
				grid-column:1 / -1 !important;
			}

			.order-form h2.full{
				font-size:30px;
				line-height:1.15;
				margin-bottom:12px !important;
			}

			.order-form label{
				font-size:16px;
				margin-bottom:8px;
			}

			.order-form input,
			.order-form textarea{
				min-height:48px;
				padding:12px 14px;
				font-size:16px;
			}

			.order-form textarea{
				height:96px;
			}

			.order-menu-row{
				display:grid;
				grid-template-columns:1fr 1fr;
				gap:10px;
			}

			.location-input-wrap input{
				padding-right:92px;
			}

			.submit-btn{
				grid-column:1 / -1 !important;
				min-height:56px;
				font-size:17px;
			}
		}

		@media (max-width:420px){
			.order-container{
				margin:18px 12px 130px;
				padding:22px 14px;
			}

			.order-menu-row{
				grid-template-columns:1fr;
			}
		}

		body.dark-mode .order-container{
			background:linear-gradient(145deg, #1f2f4d, #17233a);
			color:#e5e7eb;
			border-color:#4a5f80;
			box-shadow:
				0 26px 68px rgba(0, 0, 0, 0.55),
				0 8px 18px rgba(15, 23, 42, 0.35),
				inset 0 1px 0 rgba(255, 255, 255, 0.08);
		}

		body.dark-mode .order-form label{
			color:#e5e7eb;
		}

		body.dark-mode .location-icon-actions button{
			background:#15203c;
			color:#e5e7eb;
		}

		body.dark-mode .location-icon-actions button:hover{
			background:#22324d;
		}

		body.dark-mode .location-helper{
			color:#cbd5e1;
		}







		/* ======================== PAYMENT PAGE ============================*/
		body.payment-page{
			background: #f2f2ff; /* Latar belakang halaman pembayaran */
			color: #030063;
		}

		.payment-container {
			max-width: 600px;
			margin: 50px auto;
			padding: 40px;
			border-radius: 20px;
			background: #eef2ff; /* Kotak pembayaran lembut */
			border: 1px solid #c8c7e6;
			color: #030063;
			box-shadow: 0 10px 15px -3px rgba(3, 0, 99, 0.1);
		}

		.payment-container h2, .payment-container h3, .payment-container label {
			color: #030063;
		}

		#bankBox {
			background: #f2f2ff;
			border: 1px solid #c8c7e6;
			color: #030063;
		}

		.payment-form-group{
			display:flex;
			gap:20px;
			margin-bottom:15px;
		}

		.payment-form-group div{
			flex:1;
		}

		.payment-container label{
			font-weight:bold;
		}

		.payment-container input,
		.payment-container textarea{
			width:100%;
			padding:10px;
			border-radius:8px;
			border: 1px solid #c8c7e6;
			background: #f2f2ff;
			color: #030063;
			margin-top:5px;
		}

		.payment-full{
			width:100%;
			margin-bottom:15px;
		}

		.payment-btn{
			background: #030063;
			color:white;
			padding:12px;
			border:none;
			border-radius:10px;
			width:100%;
			font-size:16px;
			cursor:pointer;
			transition: 0.3s;
		}

		.payment-btn:hover {
			background: #030063;
		}

		/* ===================== EDIT BAHAGIAN PAYMENT ADD TO CARD ===================== */
		.form-container{
			background: #ffffff;
			color: #030063;
			border-radius: 15px;
			padding: 20px;
			border: 1px solid #c8c7e6;
			box-shadow: 0 10px 15px -3px rgba(3, 0, 99, 0.05);
		}

		.form-container input,
		.form-container textarea,
		.form-container select{
			background: #f2f2ff;
			border: 1px solid #c8c7e6;
			color: #030063;
		}

		.form-container input:focus,
		.form-container textarea:focus,
		.form-container select:focus{
			border-color: #030063;
			outline: none;
		}

		.payment-container label{
			color: #030063;
			display: block;
			margin-bottom: 5px;
		}

		.payment-container h2,
		.payment-container h3{
			color: #030063;
			text-align: center;
		}

		.payment-container p,
		.payment-container span{
			color: #030063;
		}

		body.dark-mode.payment-page .payment-container{
			background:#1a2740;
			border-color:#4a5f80;
			color:#e5e7eb;
		}

		body.dark-mode.payment-page .payment-container h2,
		body.dark-mode.payment-page .payment-container h3,
		body.dark-mode.payment-page .payment-container label,
		body.dark-mode.payment-page .payment-container p,
		body.dark-mode.payment-page .payment-container span,
		html.dark-mode body.payment-page .payment-container h2,
		html.dark-mode body.payment-page .payment-container h3,
		html.dark-mode body.payment-page .payment-container label,
		html.dark-mode body.payment-page .payment-container p,
		html.dark-mode body.payment-page .payment-container span{
			color:#e5e7eb;
		}

		body.dark-mode.payment-page #bankBox{
			background:#22324d;
			border-color:#60759a;
			color:#e5e7eb;
		}

		/* ===================== RADIO BUTTON/QR PAYMENT ===================== */
		.payment-fix{
			display: block;
		}

		.payment-fix label{
			display: block;
			margin-bottom: 10px;
		}

		.payment-fix input[type="radio"]{
			margin-right: 8px;
		}

		.qr-container{
			display: flex;
			gap: 20px;
			margin-top: 10px;
			flex-wrap: wrap;
		}

		.qr-item img{
			width: 200px;   /* control size sini */
			max-width: 100%;
			border-radius: 10px;
		}
		/* ================= CONTACT PAGE (UPGRADE PREMIUM) ================= */

		body.contact-page{
			background: #f2f2ff !important; /* Latar belakang halaman Hubungi Kami */
			color: #030063;
			min-height:100vh;
			padding:0;
		}

		.contact-wrapper{
			padding:40px 20px 90px;   /* 🔥 pindah sini */
		}

		/* HERO */
		.contact-hero{
			text-align:center;
			max-width:800px;
			margin:0 auto 50px;
		}

		.contact-hero h1{
			font-size:42px;
			margin-bottom:15px;
		}

		.contact-hero p{
			color:#94a3b8;
			line-height:1.6;
		}

		/* GRID */
		.contact-container{
			max-width:1100px;
			margin:auto;
			display:grid;
			grid-template-columns: repeat(3, 1fr);
			gap:25px;
		}

		/* CARD */
		.contact-card{
			background: #ffffff;
			padding:25px;
			border-radius:15px;

			/* TEMA PINK */
			border: 1px solid #c8c7e6;

			box-shadow: 0 10px 15px -3px rgba(3, 0, 99, 0.1);

			/* 🔥 ANIMATION START */
			opacity:0;
			transform:translateY(30px);
			animation:fadeUp 0.6s ease forwards;
		}

		/* ANIMATION DELAY */
		.contact-card:nth-child(1){ animation-delay:0.1s; }
		.contact-card:nth-child(2){ animation-delay:0.2s; }
		.contact-card:nth-child(3){ animation-delay:0.3s; }
		.contact-card:nth-child(4){ animation-delay:0.4s; }
		.contact-card:nth-child(5){ animation-delay:0.5s; }

		/* HOVER */
		.contact-card:hover{
			transform:translateY(-8px) scale(1.02);
		}

		/* TITLE */
		.contact-card h3{
			margin-bottom:10px;
			font-size:18px;
			color: #030063;
		}

		/* TEXT */
		.contact-card p{
			margin:5px 0;
			color: #030063;
		}

		/* BUTTON */
		.contact-card .btn{
			display:inline-block;
			margin-top:10px;
			padding:10px 15px;
			background: #030063;
			color:white;
			border-radius:8px;
			text-decoration:none;
			font-weight:bold;
			transition:0.3s;
		}

		.contact-card .btn:hover{
			background: #030063;
		}

		body.dark-mode .contact-card h3,
		body.dark-mode .contact-card p,
		body.dark-mode .contact-card a:not(.btn){
			color:#e5e7eb;
		}

		body.dark-mode .contact-card .btn{
			background:#1e3a8a;
			color:#ffffff;
		}

		body.dark-mode .contact-card .btn:hover{
			background:#2563eb;
		}

		/* ANIMATION KEYFRAME */
		@keyframes fadeUp{
			to{
				opacity:1;
				transform:translateY(0);
			}
		}

		/* RESPONSIVE */
		@media (max-width:900px){
			.contact-container{
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width:600px){
			.contact-container{
				grid-template-columns: 1fr;
			}
		}
		/* ================= CONTACT FORM ================= */
		.contact-form{
			max-width:700px;
			margin:30px auto;
			background: #ffffff;
			padding:25px;
			border-radius:15px;
			border: 1px solid #c8c7e6;
			box-shadow: 0 10px 15px -3px rgba(3, 0, 99, 0.1);
		}

		.contact-form h2{
			margin:0 0 24px;
			color:#030063;
		}

		.login-required{
			background:#f2f2ff;
			border:1px solid #c8c7e6;
			border-radius:12px;
			padding:24px;
			text-align:center;
		}

		.login-required p{
			margin:0;
			color:#030063;
			font-size:16px;
		}

		.login-required a{
			display:inline-block;
			padding:12px 22px;
			background:#030063;
			color:#ffffff;
			border-radius:10px;
			text-decoration:none;
			font-weight:bold;
		}

		.login-required a:hover{
			background:#030063;
		}

		/* GRID FORM */
		.contact-form form{
			display:grid;
			grid-template-columns:1fr 1fr;
			gap:15px 20px;
		}

		/* FULL WIDTH */
		.contact-form .full{
			grid-column:1 / 3;
		}

		/* LABEL */
		.contact-form label{
			font-size:14px;
			color: #030063;
			display:block;
			margin-bottom:5px;
		}

		/* INPUT */
		.contact-form input,
		.contact-form select,
		.contact-form textarea{
			width:100%;
			padding:10px;
			border-radius:8px;
			border: 1px solid #c8c7e6;
			background: #f2f2ff;
			color: #030063;
			outline:none;
		}

		/* TEXTAREA */
		.contact-form textarea{
			height:80px;
		}

		/* FOCUS */
		.contact-form input:focus,
		.contact-form textarea:focus,
		.contact-form select:focus{
			border-color: #030063;
			box-shadow: 0 0 0 2px rgba(3, 0, 99, 0.2);
		}

		/* BUTTON */
		.contact-form button{
			grid-column:1 / 3;
			padding:12px;
			background: #030063;
			color:white;
			border:none;
			border-radius:10px;
			cursor:pointer;
			font-weight:bold;
			transition:0.3s;
		}

		.contact-form button:hover{
			transform:translateY(-2px);
			box-shadow: 0 10px 15px -3px rgba(3, 0, 99, 0.4);
		}

		body.dark-mode .contact-form{
			background:#1a2740;
			color:#e5e7eb;
			border-color:#4a5f80;
			box-shadow:0 18px 38px rgba(0, 0, 0, 0.45);
		}

		body.dark-mode .contact-form h2,
		body.dark-mode .contact-form label{
			color:#e5e7eb;
		}

		body.dark-mode .contact-form input,
		body.dark-mode .contact-form select,
		body.dark-mode .contact-form textarea{
			background:#22324d !important;
			color:#e5e7eb !important;
			border-color:#60759a !important;
		}

		body.dark-mode .contact-form input:focus,
		body.dark-mode .contact-form textarea:focus,
		body.dark-mode .contact-form select:focus{
			border-color:#93c5fd !important;
			box-shadow:0 0 0 2px rgba(147, 197, 253, 0.22);
		}

		body.dark-mode .contact-form select option{
			background:#22324d;
			color:#e5e7eb;
		}

		body.dark-mode .login-required{
			background:#22324d;
			border-color:#60759a;
		}

		body.dark-mode .login-required p{
			color:#e5e7eb;
		}

		.contact-feedback-cta{
			max-width:900px;
			margin:34px auto 0;
			padding:24px;
			display:flex;
			align-items:center;
			justify-content:space-between;
			gap:20px;
			background:#ffffff;
			border:1px solid #c8c7e6;
			border-radius:15px;
			box-shadow:0 10px 15px -3px rgba(3, 0, 99, 0.1);
		}

		.contact-feedback-cta h2{
			margin:0 0 8px;
			color:#030063;
		}

		.contact-feedback-cta p{
			margin:0;
			color:#475569;
			line-height:1.6;
		}

		.contact-feedback-cta a{
			flex:0 0 auto;
			padding:12px 18px;
			background:#030063;
			color:#ffffff;
			border-radius:10px;
			text-decoration:none;
			font-weight:bold;
			box-shadow:0 10px 15px -3px rgba(3, 0, 99, 0.2);
			transition:0.25s;
		}

		.contact-feedback-cta a:hover{
			transform:translateY(-2px);
			box-shadow:0 14px 22px -6px rgba(3, 0, 99, 0.38);
		}

		body.dark-mode .contact-feedback-cta{
			background:#1a2740;
			color:#e5e7eb;
			border-color:#4a5f80;
			box-shadow:0 18px 38px rgba(0, 0, 0, 0.45);
		}

		body.dark-mode .contact-feedback-cta h2,
		body.dark-mode .contact-feedback-cta p{
			color:#e5e7eb;
		}

		body.dark-mode .contact-feedback-cta a{
			background:#1e3a8a;
		}

		@media (max-width:700px){
			.contact-feedback-cta{
				align-items:stretch;
				flex-direction:column;
			}

			.contact-feedback-cta a{
				text-align:center;
			}
		}



		/* ================= CUSTOMER FEEDBACK PAGE ================= */

		.feedback-page{
			background: #f2f2ff !important;
			font-family: 'Inter', sans-serif;
			color: #030063;
			min-height: 100vh;   /* 👉 tambah ni */
		}

		/* Tajuk center */
		.feedback-page h2{
			text-align: center;
			margin-bottom: 20px;
		}

		/* Table center */
		.feedback-table{
			border-collapse: collapse;
			width: 90%;
			margin: auto; /* 👉 ini penting (center) */
			background: #ffffff;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 10px 15px -3px rgba(3, 0, 99, 0.1);
		}

		/* Header */
		.feedback-table th{
			background: #c8c7e6;
			color: #030063;
			padding: 14px;
			text-align: center;
		}

		/* Data */
		.feedback-table td{
			padding: 12px;
			text-align: center;
			border-bottom: 1px solid #f2f2ff;
		}

		/* Hover */
		.feedback-table tr:hover{
			background: #f2f2ff;
		}

		/* Zebra */
		.feedback-table tr:nth-child(even){
			background: #fff5f6;
		}

		/* Jenis */
		.cadangan{
			color: #10b981;
			font-weight: bold;
		}

		.aduan{
			color: #ff4d4d;
			font-weight: bold;
		}



		/* ================= ORDER HISTORY PAGE ================= */
		.history-page{
			background: #f2f2ff !important; /* Latar belakang halaman Sejarah */
			color: #030063;
			min-height:100vh;
		}

		/* TITLE */
		.history-title{
			text-align:center;
			margin:30px 0;
			font-size:32px;
		}

		/* TABLE CONTAINER */
		.history-container{
			width:90%;
			margin:0 auto;
			overflow-x:auto;
			padding-bottom:92px;
		}

		/* TABLE */
		.history-table{
			width:100%;
			border-collapse:collapse;
			background: #ffffff;
			border-radius:15px;
			overflow:hidden;
			box-shadow: 0 10px 15px -3px rgba(3, 0, 99, 0.1);
		}

		/* HEADER */
		.history-table th{
			background: #c8c7e6;
			color: #030063;
			padding:12px;
			text-align:center;
		}

		/* ROW */
		.history-table td{
			padding:12px;
			text-align:center;
			border-bottom: 1px solid #f2f2ff;
		}

		.history-time{
			display:inline-block;
			margin-top:4px;
			color:#475569;
			font-size:14px;
			font-weight:600;
		}

		.history-item-line{
			min-height:24px;
			line-height:1.45;
		}

		.history-item-line + .history-item-line{
			margin-top:4px;
			padding-top:4px;
			border-top:1px solid #eef2ff;
		}

		.history-view-btn{
			display:inline-grid;
			place-items:center;
			width:34px;
			height:34px;
			margin:0 auto;
			padding:0;
			border:1px solid #c8c7e6;
			border-radius:50%;
			background:#ffffff;
			color:#030063;
			cursor:pointer;
			text-decoration:none;
			transition:background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
		}

		.history-view-btn svg{
			width:18px;
			height:18px;
			fill:none;
			stroke:currentColor;
			stroke-width:2;
			stroke-linecap:round;
			stroke-linejoin:round;
		}

		.history-view-btn:hover,
		.history-view-btn.open{
			background:#030063;
			color:#ffffff;
			transform:translateY(-1px);
			box-shadow:0 8px 16px rgba(3, 0, 99, 0.18);
		}

		.history-pdf-link{
			display:inline-flex;
			align-items:center;
			justify-content:center;
			margin-left:8px;
			min-height:32px;
			padding:0 10px;
			border-radius:8px;
			background:#eef2ff;
			color:#030063;
			text-decoration:none;
			font-size:12px;
			font-weight:800;
			border:1px solid #c8c7e6;
		}

		@media (max-width:700px){
			.history-page{
				overflow-x:hidden;
			}

			.history-title{
				margin:26px 16px 22px;
				font-size:32px;
				line-height:1.15;
			}

			.history-container{
				width:100%;
				max-width:100%;
				margin:0;
				padding:0 14px 82px;
				overflow-x:hidden;
			}

			.history-table,
			.history-table tbody,
			.history-table tr,
			.history-table td{
				display:block;
				width:100%;
			}

			.history-table{
				border-collapse:separate;
				border-spacing:0;
				background:transparent;
				border-radius:0;
				box-shadow:none;
				overflow:visible;
			}

			.history-table tr:first-child{
				display:none;
			}

			.history-table tr{
				margin:0 0 14px;
				padding:14px;
				border:1px solid #dadaee;
				border-radius:12px;
				background:#ffffff;
				box-shadow:0 10px 22px rgba(3, 0, 99, 0.1);
			}

			.history-table td{
				display:grid;
				grid-template-columns:minmax(92px, 36%) minmax(0, 1fr);
				gap:10px;
				align-items:center;
				padding:10px 0;
				border-bottom:1px solid #eef2ff;
				text-align:left;
				overflow-wrap:anywhere;
			}

			.history-table td:last-child{
				border-bottom:0;
			}

			.history-table td::before{
				color:#64748b;
				font-size:12px;
				font-weight:800;
				text-transform:uppercase;
				letter-spacing:0;
			}

			.history-table td:nth-child(1)::before{
				content:"Menu";
			}

			.history-table td:nth-child(2)::before{
				content:"Kuantiti";
			}

			.history-table td:nth-child(3)::before{
				content:"Tarikh & Masa";
			}

			.history-table td:nth-child(4)::before{
				content:"Lokasi";
			}

			.history-table td:nth-child(5)::before{
				content:"Status";
			}

			.history-table td:nth-child(6)::before{
				content:"Butiran / PDF";
			}

			.history-table td[colspan]{
				display:block;
				text-align:center;
			}

			.history-table td[colspan]::before{
				content:"";
				display:none;
			}

			.history-view-btn{
				margin:0;
				width:38px;
				height:38px;
				grid-column:2;
			}

			.history-pdf-link{
				grid-column:2;
				margin:8px 0 0;
				width:max-content;
				max-width:100%;
				min-height:36px;
				padding:0 12px;
			}

			body.dark-mode .history-table tr{
				background:#1a2740;
				border-color:#4a5f80;
				box-shadow:0 12px 26px rgba(0, 0, 0, 0.35);
			}

			body.dark-mode .history-table td{
				border-bottom-color:#334155;
			}

			body.dark-mode .history-table td::before{
				color:#cbd5e1;
			}
		}

		.history-detail-row{
			display:none;
		}

		.history-detail-row.open{
			display:table-row;
		}

		.history-detail-row td{
			padding:0 18px 18px;
			background:#f8fbff;
		}

		.history-detail-box{
			max-width:620px;
			margin:0 auto;
			padding:12px;
			border:1px solid #dadaee;
			border-radius:12px;
			background:#ffffff;
		}

		.history-detail-table{
			width:100%;
			border-collapse:collapse;
			box-shadow:none;
			border-radius:8px;
			overflow:hidden;
		}

		.history-detail-table th,
		.history-detail-table td{
			padding:10px;
			border-bottom:1px solid #eef2ff;
			font-size:14px;
		}

		.history-detail-table th{
			background:#e0e7ff;
			color:#030063;
		}

		.history-modal-open{
			overflow:hidden;
		}

		.history-modal-overlay{
			position:fixed;
			inset:0;
			z-index:3000;
			display:none;
			align-items:flex-start;
			justify-content:center;
			padding:78px 18px 28px;
			background:rgba(15, 23, 42, 0.42);
			overflow-y:auto;
		}

		.history-modal-overlay.open{
			display:flex;
		}

		.history-modal-card{
			position:relative;
			width:min(800px, 100%);
			padding:30px;
			border:1px solid #c8c7e6;
			border-radius:14px;
			background:#ffffff;
			color:#030063;
			box-shadow:0 24px 70px rgba(3, 0, 99, 0.22);
		}

		.history-modal-close{
			position:absolute;
			top:14px;
			right:14px;
			width:34px;
			height:34px;
			border:0;
			border-radius:50%;
			background:#f2f2ff;
			color:#030063;
			font-size:22px;
			font-weight:700;
			line-height:1;
			cursor:pointer;
		}

		.history-modal-close:hover{
			background:#e0e7ff;
		}

		.history-modal-header{
			display:flex;
			align-items:flex-start;
			justify-content:space-between;
			gap:18px;
			padding-right:42px;
			margin-bottom:24px;
		}

		.history-modal-header h3{
			margin:0 0 16px;
			color:#030063;
			font-size:24px;
		}

		.history-modal-header p{
			margin:0;
			color:#030063;
			font-size:14px;
		}

		.history-modal-section{
			margin-top:22px;
		}

		.history-modal-section-title{
			margin-bottom:10px;
			padding-bottom:7px;
			border-bottom:1px solid #c8c7e6;
			color:#030063;
			font-size:15px;
		}

		.history-modal-grid{
			display:grid;
			grid-template-columns:150px 1fr;
			gap:9px 10px;
			align-items:start;
		}

		.history-modal-grid strong{
			color:#030063;
		}

		.history-modal-items{
			width:100%;
			margin-top:14px;
			border-collapse:collapse;
			background:#ffffff;
		}

		.history-modal-items th,
		.history-modal-items td{
			padding:10px;
			border-bottom:1px solid #eef2ff;
			text-align:left;
		}

		.history-modal-items th{
			background:#f2f2ff;
			color:#030063;
		}

		.history-modal-total{
			display:flex;
			align-items:center;
			justify-content:flex-end;
			gap:18px;
			margin-top:14px;
			font-size:17px;
		}

		.history-modal-total strong{
			color:#10b981;
		}

		.customer-order-detail-shell{
			width:min(880px, calc(100% - 36px));
			margin:34px auto 96px;
		}

		.customer-order-detail-card{
			width:auto;
			padding:30px;
			box-shadow:0 16px 34px rgba(3, 0, 99, 0.12);
		}

		.order-detail-actions{
			display:flex;
			align-items:center;
			justify-content:space-between;
			gap:14px;
			margin-bottom:14px;
		}

		.order-detail-print-actions{
			display:flex;
			gap:10px;
			flex-wrap:wrap;
			justify-content:flex-end;
		}

		.order-detail-back-link{
			display:inline-flex;
			color:#1e3a8a;
			font-weight:700;
			text-decoration:none;
		}

		.order-detail-print-btn{
			border:0;
			border-radius:10px;
			padding:11px 16px;
			background:#030063;
			color:#ffffff;
			font-weight:800;
			cursor:pointer;
			box-shadow:0 10px 20px rgba(3, 0, 99, 0.18);
		}

		.order-detail-print-btn.secondary{
			background:#1e3a8a;
		}

		.order-detail-print-btn:disabled{
			opacity:0.45;
			cursor:not-allowed;
			box-shadow:none;
		}

		.order-detail-print-btn:not(:disabled):hover{
			filter:brightness(1.08);
		}

		.order-detail-invoice-head{
			display:flex;
			justify-content:space-between;
			gap:18px;
			margin:0 0 22px;
			padding:16px 18px;
			border:1px solid #dadaee;
			border-radius:12px;
			background:#f8fbff;
		}

		.order-detail-invoice-head strong,
		.order-detail-invoice-head span{
			display:block;
		}

		.order-detail-invoice-head strong{
			margin-bottom:4px;
			color:#030063;
		}

		.order-detail-invoice-head span{
			color:#475569;
			font-size:14px;
		}

		.order-detail-back-link:hover,
		.order-detail-receipt-link:hover{
			text-decoration:underline;
		}

		.order-detail-receipt-link{
			color:#1e3a8a;
			font-weight:700;
			text-decoration:none;
		}

		.payment-receipt-print-area{
			display:none;
			margin-top:18px;
		}

		.order-detail-paid-amount{
			color:#10b981;
			font-weight:900;
		}

		.order-detail-receipt-image{
			display:block;
			max-width:420px;
			width:100%;
			max-height:520px;
			object-fit:contain;
			margin:12px auto 0;
			border:1px solid #dadaee;
			border-radius:10px;
			background:#ffffff;
		}

		.order-detail-receipt-note{
			margin:0;
			color:#475569;
			line-height:1.5;
		}

		@media print{
			@page{
				size:auto;
				margin:12mm;
			}

			.navbar,
			footer,
			.ai-chat-widget,
			.order-detail-actions{
				display:none !important;
			}

			body,
			body.history-page{
				background:#ffffff !important;
				color:#000000 !important;
			}

			.customer-order-detail-shell{
				width:100%;
				margin:0;
			}

			.customer-order-detail-card{
				padding:0;
				border:0;
				box-shadow:none;
			}

			.invoice-print-area,
			.payment-receipt-print-area{
				display:none !important;
			}

			body:not(.print-receipt) .invoice-print-area{
				display:block !important;
			}

			body:not(.print-receipt) .payment-receipt-print-area{
				display:none !important;
			}

			body.print-invoice .invoice-print-area{
				display:block !important;
			}

			body.print-invoice .payment-receipt-print-area{
				display:none !important;
			}

			body.print-receipt .invoice-print-area{
				display:none !important;
			}

			body.print-receipt .payment-receipt-print-area{
				display:block !important;
			}

			.history-modal-header h3,
			.history-modal-section-title,
			.history-modal-grid strong,
			.order-detail-invoice-head strong{
				color:#000000 !important;
			}

			.history-modal-items th{
				background:#eeeeee !important;
				color:#000000 !important;
			}

			.status{
				color:#ffffff !important;
				-webkit-print-color-adjust:exact;
				print-color-adjust:exact;
			}

			.customer-order-detail-card > .history-modal-header .status{
				display:none !important;
			}

			a{
				color:#000000 !important;
				text-decoration:none !important;
			}

			.order-detail-receipt-image{
				max-height:620px;
				page-break-inside:avoid;
			}
		}

		.sr-only{
			position:absolute;
			width:1px;
			height:1px;
			padding:0;
			margin:-1px;
			overflow:hidden;
			clip:rect(0, 0, 0, 0);
			white-space:nowrap;
			border:0;
		}

		/* HOVER EFFECT */
		.history-table tr:hover{
			background: #f2f2ff;
		}

		/* STATUS */
		.status{
			padding:6px 12px;
			border-radius:8px;
			font-size:13px;
			font-weight:bold;
		}

		.status.pending{
			background:#ef4444;
			color:white;
		}

		.status.paid{
			background:#22c55e;
			color:white;
		}

		.status.rejected{
			background:#64748b;
			color:white;
		}



		/* ================= RESET PASSWORD ================= */

		body.reset-page{
			margin:0;
			padding:0;
			font-family: 'Inter', sans-serif;
			background: #f2f2ff;
			height:100vh;
			display:flex;
			justify-content:center;
			align-items:center;
		}

		.form-container{
			background: #ffffff;
			padding:40px;
			border-radius:20px;
			width:350px;
			border: 1px solid #c8c7e6;
			box-shadow: 0 10px 25px rgba(3, 0, 99, 0.1);
			color: #030063;
		}

		.form-container h2{
			text-align: center;
			margin-bottom:25px;
		}

		.form-container label{
			font-size:14px;
			margin-bottom:5px;
			display:block;
		}

		.form-container input{
			width:100%;
			padding:10px;
			border-radius:10px;
			border: 1px solid #c8c7e6;
			margin-bottom:15px;

			background: #f2f2ff;
			color: #030063;
		}

		.form-container input:focus{
			outline:none;
			border-color: #030063;
		}

		.form-container button{
			width:100%;
			padding:10px;
			border:none;
			border-radius:10px;

			background: #030063;
			color: white;
			font-weight:bold;
			cursor:pointer;
		}

		.form-container button:hover{
			background: #030063;
		}

		.form-message{
			margin:14px 0;
			padding:11px 12px;
			border-radius:10px;
			text-align:center;
			font-size:13px;
			line-height:1.4;
		}

		.form-message.success{
			background:#dcfce7;
			color:#166534;
			border:1px solid #86efac;
		}

		.history-alert{
			max-width:760px;
			margin:0 auto 18px;
		}

		.auto-hide-alert{
			overflow:hidden;
			transition:opacity 0.45s ease, transform 0.45s ease, max-height 0.45s ease, margin 0.45s ease, padding 0.45s ease;
		}

		.auto-hide-alert.hide{
			opacity:0;
			transform:translateY(-8px);
			max-height:0;
			margin-top:0 !important;
			margin-bottom:0 !important;
			padding-top:0 !important;
			padding-bottom:0 !important;
		}

		.form-message.error{
			background:#fee2e2;
			color:#991b1b;
			border:1px solid #fca5a5;
		}

		.reset-fallback-link{
			display:block;
			margin:0 0 16px;
			padding:10px 12px;
			border-radius:10px;
			text-align:center;
			background:#1e3a8a;
			color:#ffffff;
			text-decoration:none;
			font-weight:bold;
			font-size:14px;
		}

		.reset-fallback-link:hover{
			background:#030063;
		}

		body.dark-mode .form-message.success{
			background:#123524;
			color:#bbf7d0;
			border-color:#15803d;
		}

		body.dark-mode .form-message.error{
			background:#3b1518;
			color:#fecaca;
			border-color:#b91c1c;
		}

		body.dark-mode .reset-fallback-link{
			background:#2563eb;
			color:#ffffff;
		}

		.reset-page .form-container{
			width:min(380px, calc(100% - 32px));
			padding:42px 40px;
			background:
				linear-gradient(#ffffff, #ffffff) padding-box,
				linear-gradient(135deg, #bfdbfe, #c8c7e6) border-box;
			border:1px solid transparent;
			box-shadow:0 24px 60px rgba(3, 0, 99, 0.12);
		}

		.reset-page .form-container h2{
			margin-bottom:12px;
			color:#030063;
		}

		.reset-helper,
		.reset-note,
		.reset-links{
			text-align:center;
		}

		.reset-helper{
			margin:-2px 0 18px;
			color:#475569;
			font-size:13px;
			line-height:1.4;
		}

		.reset-note{
			margin:2px 0 18px;
			color:#64748b;
			font-size:12px;
			line-height:1.45;
		}

		.reset-links{
			margin-top:15px;
		}

		.reset-links a{
			color:#030063;
			font-weight:600;
		}

		.password-input-wrap{
			position:relative;
		}

		.password-input-wrap input{
			padding-right:44px;
		}

		.password-toggle-btn{
			position:absolute;
			right:8px;
			top:8px;
			width:30px !important;
			height:28px;
			padding:0 !important;
			border:1px solid #c8c7e6 !important;
			background:#ffffff !important;
			color:#030063 !important;
			border-radius:999px !important;
			font-size:12px;
			font-weight:700;
			box-shadow:none !important;
			display:inline-flex;
			align-items:center;
			justify-content:center;
		}

		.password-toggle-btn svg{
			width:18px;
			height:18px;
			fill:none;
			stroke:currentColor;
			stroke-width:2;
			stroke-linecap:round;
			stroke-linejoin:round;
		}

		.password-toggle-btn:hover{
			transform:none !important;
			background:#f2f2ff !important;
		}

		body.dark-mode.reset-page .form-container{
			background:
				linear-gradient(#1a2740, #1a2740) padding-box,
				linear-gradient(135deg, #60a5fa, #4a5f80) border-box;
			border-color:transparent;
		}

		body.dark-mode .reset-helper,
		body.dark-mode .reset-note{
			color:#cbd5e1;
		}

		body.dark-mode .reset-links a{
			color:#bfdbfe;
		}

		body.dark-mode .password-toggle-btn{
			background:#22324d !important;
			color:#e5e7eb !important;
			border-color:#60759a !important;
		}

		/* ================= FIX SELECT BUTTON SAHAJA ================= */

		/* reset semua style lama */
		.select-btn{
			all: unset;
			display:inline-block;
			cursor:pointer;
			margin-top:10px;
		}

		/* hide checkbox */
		.select-btn input{
			display:none;
		}

		/* button */
		.select-btn span{
			display:inline-block;
			padding:8px 20px;
			border-radius:8px;
			border: 1px solid #c8c7e6;
			color: #030063;
			background: #ffffff;
			transition:0.3s;
		}

		/* hover */
		.select-btn span:hover{
			background: #f2f2ff;
			border-color: #030063;
		}

		/* selected */
		.select-btn input:checked + span{
			background: #030063;
			color: white;
			border-color: #030063;
		}

/* ================= AI CHAT ASSISTANT ================= */
		.ai-chat-widget{
			position:fixed;
			right:28px;
			bottom:64px;
			z-index:2000;
			font-family:Arial, sans-serif;
		}

		.ai-chat-toggle{
			width:58px;
			height:58px;
			border:none;
			border-radius:50%;
			background:#030063;
			color:#ffffff;
			font-weight:800;
			font-size:18px;
			cursor:pointer;
			box-shadow:0 14px 28px rgba(3, 0, 99, 0.35);
		}

		.ai-chat-panel{
			position:absolute;
			right:0;
			bottom:76px;
			width:340px;
			max-width:calc(100vw - 32px);
			height:440px;
			background:#ffffff;
			border:1px solid #c8c7e6;
			border-radius:16px;
			box-shadow:0 18px 40px rgba(136, 19, 55, 0.18);
			display:none;
			overflow:hidden;
		}

		.ai-chat-panel.open{
			display:flex;
			flex-direction:column;
		}

		.ai-chat-header{
			background:#030063;
			color:#ffffff;
			padding:9px 14px;
			display:flex;
			align-items:center;
			justify-content:space-between;
			gap:12px;
			flex:0 0 auto;
		}

		.ai-chat-header strong,
		.ai-chat-header span{
			display:block;
		}

		.ai-chat-header span{
			margin-top:2px;
			font-size:12px;
			opacity:0.9;
		}

		.ai-chat-header button{
			width:30px;
			height:30px;
			flex:0 0 30px;
			border:none;
			border-radius:50%;
			background:rgba(255,255,255,0.18);
			color:#ffffff;
			cursor:pointer;
			font-weight:700;
		}

		.ai-chat-messages{
			flex:1;
			padding:14px;
			overflow-y:auto;
			background:#f8f8ff;
			scrollbar-width:thin;
			scrollbar-color:#030063 #dadaee;
		}

		.ai-message{
			max-width:84%;
			width:max-content;
			margin-bottom:12px;
			padding:10px 12px;
			border-radius:12px;
			font-size:13px;
			line-height:1.42;
			white-space:pre-wrap;
			overflow-wrap:anywhere;
		}

		.ai-bot{
			background:#ffffff;
			color:#030063;
			border:1px solid #c8c7e6;
			border-top-left-radius:4px;
			width:fit-content;
		}

		.ai-user{
			background:#030063;
			color:#ffffff;
			margin-left:auto;
			border-top-right-radius:4px;
		}

		.ai-loading{
			color:#030063;
		}

		.ai-chat-form{
			display:flex;
			gap:8px;
			padding:12px 14px 14px;
			background:#ffffff;
			border-top:1px solid #c8c7e6;
			flex:0 0 auto;
		}

		.ai-chat-form input{
			flex:1;
			min-width:0;
			height:44px;
			padding:0 12px;
			border:1px solid #c8c7e6;
			border-radius:10px;
			background:#f2f2ff;
			color:#030063;
			outline:none;
		}

		.ai-chat-form input:focus{
			border-color:#030063;
		}

		.ai-chat-form button{
			border:none;
			border-radius:10px;
			background:#030063;
			color:#ffffff;
			width:82px;
			font-weight:700;
			cursor:pointer;
		}

		@media (max-width:600px){
			.ai-chat-widget{
				right:16px;
				bottom:92px;
			}

			.ai-chat-panel{
				height:390px;
			}
		}

		
/* ================= FIX SIDEBAR DARK MODE BUTTON ================= */
.sidebar .theme-toggle{
    display: inline-block !important;
    background: linear-gradient(135deg, #030063, #1e3a8a) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin: 15px auto !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 14px rgba(3, 0, 99, 0.25) !important;
}

.sidebar .theme-toggle:hover{
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px rgba(3, 0, 99, 0.4) !important;
}

body.dark-mode .sidebar .theme-toggle{
    background: linear-gradient(135deg, #1e3a8a, #172554) !important;
}


/* ================= DETAIL PAGE ================= */
body.detail-page{
    background:#f2f2ff;
    color:#030063;
    min-height:100vh;
}

.detail-container{
    max-width:1180px;
    margin:42px auto 86px;
    padding:0 24px;
}

.detail-card{
    display:grid;
    grid-template-columns:minmax(320px, 1fr) minmax(320px, 0.95fr);
    gap:34px;
    align-items:stretch;
    background:#ffffff;
    border:1px solid #d7d8f0;
    border-radius:18px;
    padding:28px;
    box-shadow:0 22px 54px rgba(3, 0, 99, 0.12);
}

.detail-media{
    height:460px;
    border-radius:14px;
    overflow:hidden;
    background:#eef2ff;
}

.detail-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.detail-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8px 8px 8px 4px;
}

.detail-back-link{
    width:max-content;
    margin-top:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 22px;
    border:1px solid #c8c7e6;
    border-radius:12px;
    background:#eef2ff;
    color:#1e3a8a;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.detail-back-link:hover{
    background:#e0e7ff;
    box-shadow:0 10px 22px rgba(3, 0, 99, 0.12);
    transform:translateY(-2px);
}

.detail-info h1{
    margin:0 0 16px;
    color:#030063;
    font-size:clamp(28px, 4vw, 42px);
    line-height:1.12;
    letter-spacing:0;
}

.detail-description{
    margin:0 0 22px;
    color:#334155;
    font-size:16px;
    line-height:1.75;
}

.detail-price{
    width:max-content;
    margin:0 0 26px;
    padding:12px 18px;
    border-radius:12px;
    background:#ecfdf5;
    color:#166534;
    font-size:26px;
    font-weight:900;
}

.detail-form{
    margin-top:2px;
}

.detail-qty-label{
    display:block;
    margin-bottom:10px;
    color:#475569;
    font-size:14px;
    font-weight:800;
}

.detail-qty-box{
    display:inline-flex;
    align-items:center;
    overflow:hidden;
    margin:0 0 24px;
    border:1px solid #c8c7e6;
    border-radius:12px;
    background:#ffffff;
}

.detail-qty-box button{
    width:44px;
    height:44px;
    border:0;
    background:#f8fafc;
    color:#030063;
    font-size:20px;
    font-weight:900;
    cursor:pointer;
}

.detail-qty-box button:hover{
    background:#eef2ff;
}

.detail-qty-box input{
    width:68px;
    height:44px;
    border:0;
    border-left:1px solid #c8c7e6;
    border-right:1px solid #c8c7e6;
    text-align:center;
    color:#030063;
    font-weight:800;
    font-size:15px;
}

.detail-btn-group{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.detail-add-cart-btn,
.detail-buy-btn{
    min-width:180px;
    min-height:50px;
    padding:0 22px;
    border-radius:12px;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    transition:transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.detail-add-cart-btn{
    border:1px solid #030063;
    background:#ffffff;
    color:#030063;
}

.detail-buy-btn{
    border:1px solid #030063;
    background:#030063;
    color:#ffffff;
    box-shadow:0 12px 24px rgba(3, 0, 99, 0.22);
}

.detail-add-cart-btn:hover,
.detail-buy-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.04);
}

body.dark-mode.detail-page{
    background:#0b1220;
    color:#e5e7eb;
}

body.dark-mode .detail-card{
    background:#111a2e;
    border-color:#334155;
    box-shadow:0 24px 64px rgba(0, 0, 0, 0.45);
}

body.dark-mode .detail-media{
    background:#15203c;
}

body.dark-mode .detail-info h1,
body.dark-mode .detail-qty-box button,
body.dark-mode .detail-qty-box input{
    color:#e5e7eb;
}

body.dark-mode .detail-description,
body.dark-mode .detail-qty-label{
    color:#cbd5e1;
}

body.dark-mode .detail-back-link{
    background:#22324d;
    border-color:#4a5f80;
    color:#93c5fd;
}

body.dark-mode .detail-price{
    background:#123524;
    color:#bbf7d0;
}

body.dark-mode .detail-qty-box,
body.dark-mode .detail-qty-box input{
    background:#15203c;
    border-color:#334155;
}

body.dark-mode .detail-qty-box button{
    background:#1e293b;
}

body.dark-mode .detail-add-cart-btn{
    background:#15203c;
    color:#e5e7eb;
    border-color:#64748b;
}

@media (max-width:840px){
    .detail-container{
        margin:24px auto 64px;
        padding:0 16px;
    }

    .detail-card{
        grid-template-columns:1fr;
        padding:18px;
        gap:22px;
    }

    .detail-media{
        height:300px;
    }

    .detail-info{
        padding:0;
    }

    .detail-btn-group{
        flex-direction:column;
    }

    .detail-add-cart-btn,
    .detail-buy-btn{
        width:100%;
    }
}