/* =========================================================
   SHOPEEFOOD DEMO — STYLE.CSS
   Design tokens + base styles + components
   ========================================================= */

:root{
  /* ---------- Colors ---------- */
  --color-primary:#EE4D2D;
  --color-primary-dark:#D7401F;
  --color-primary-light:#FF7A50;
  --color-accent-yellow:#FFC400;
  --color-accent-red:#D0021B;
  --color-accent-green:#26B26A;

  --color-bg:#F5F5F7;
  --color-white:#FFFFFF;
  --color-gray-50:#FAFAFA;
  --color-gray-100:#F0F0F1;
  --color-gray-200:#E4E4E6;
  --color-gray-400:#9A9AA3;
  --color-gray-600:#6B6B76;
  --color-text:#222222;

  /* ---------- Radius / Shadow ---------- */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:18px;
  --shadow-sm:0 2px 8px rgba(20,20,30,.06);
  --shadow-md:0 6px 20px rgba(20,20,30,.10);
  --shadow-lg:0 14px 40px rgba(20,20,30,.16);

  /* ---------- Typography ---------- */
  --font-display:"Poppins","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --font-body:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;

  /* ---------- Layout ---------- */
  --container:1280px;
  --header-h:76px;
  --transition-fast:.18s ease;
  --transition-med:.32s cubic-bezier(.25,.8,.25,1);
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;}

a{text-decoration:none;color:inherit;}

ul{list-style:none;}

button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:none;
}

input,textarea,select{
  font-family:inherit;
  font-size:15px;
}

:focus-visible{
  outline:3px solid var(--color-accent-yellow);
  outline-offset:2px;
}

.container{
  width:92%;
  max-width:var(--container);
  margin:0 auto;
}

.section-title{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:700;
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:10px;
}

.section-title .eyebrow{
  font-size:13px;
  font-weight:600;
  color:var(--color-primary);
  background:rgba(238,77,45,.08);
  padding:4px 10px;
  border-radius:20px;
}

/* =========================================================
   LOADING SCREEN
   ========================================================= */
#loading-screen{
  position:fixed;
  inset:0;
  background:var(--color-white);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  z-index:9999;
  transition:opacity .5s ease,visibility .5s ease;
}

#loading-screen.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loader-logo{
  font-family:var(--font-display);
  font-size:34px;
  font-weight:800;
  color:var(--color-primary);
}

.loader-bag{
  font-size:46px;
}

.loader-bar{
  width:180px;
  height:6px;
  border-radius:10px;
  background:var(--color-gray-200);
  overflow:hidden;
}

.loader-bar::after{
  content:"";
  display:block;
  height:100%;
  width:40%;
  background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light));
  border-radius:10px;
  animation:loaderMove 1.1s ease-in-out infinite;
}

@keyframes loaderMove{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(350%);}
}

/* =========================================================
   HEADER
   ========================================================= */
header.site-header{
  background:linear-gradient(180deg,var(--color-primary),var(--color-primary-dark));
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:var(--shadow-md);
}

.header-top{
  display:flex;
  align-items:center;
  gap:24px;
  padding:14px 0;
  max-width:var(--container);
  width:92%;
  margin:0 auto;
}

.logo{
  font-family:var(--font-display);
  font-size:26px;
  font-weight:800;
  color:var(--color-white);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
}

.logo .logo-dot{color:var(--color-accent-yellow);}

.search-wrap{
  flex:1;
  position:relative;
  max-width:560px;
}

.search-wrap input{
  width:100%;
  padding:12px 48px 12px 18px;
  border-radius:24px;
  border:none;
  font-size:15px;
  background:var(--color-white);
}

.search-wrap button{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  background:var(--color-primary);
  color:var(--color-white);
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background var(--transition-fast);
}

.search-wrap button:hover{background:var(--color-primary-dark);}

.header-actions{
  display:flex;
  align-items:center;
  gap:22px;
  color:var(--color-white);
  white-space:nowrap;
}

.header-actions a,
.header-actions .action-item{
  color:var(--color-white);
  font-size:14px;
  display:flex;
  align-items:center;
  gap:6px;
  position:relative;
  transition:color var(--transition-fast);
}

.header-actions a:hover{color:var(--color-accent-yellow);}

.cart-icon{
  position:relative;
  font-size:20px;
}

.cart-badge{
  position:absolute;
  top:-8px;
  right:-12px;
  background:var(--color-accent-yellow);
  color:#222;
  font-size:11px;
  font-weight:700;
  min-width:18px;
  height:18px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
}

.avatar-chip{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.15);
  padding:6px 12px 6px 6px;
  border-radius:24px;
}

.avatar-chip .avatar-circle{
  width:26px;height:26px;border-radius:50%;
  background:var(--color-accent-yellow);
  color:var(--color-primary-dark);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;
}

.header-nav{
  background:rgba(0,0,0,.08);
}

.header-nav .container{
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:6px 0;
}

.header-nav a{
  color:var(--color-white);
  font-size:14.5px;
  font-weight:500;
  padding:8px 16px;
  border-radius:20px;
  white-space:nowrap;
  transition:background var(--transition-fast);
}

.header-nav a.active,
.header-nav a:hover{
  background:rgba(255,255,255,.18);
}

.burger-toggle{
  display:none;
  color:var(--color-white);
  font-size:24px;
  background:none;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 28px;
  border-radius:30px;
  font-weight:600;
  font-size:15px;
  transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);
}

.btn:active{transform:scale(.97);}

.btn-primary{
  background:var(--color-primary);
  color:var(--color-white);
  box-shadow:0 8px 20px rgba(238,77,45,.35);
}

.btn-primary:hover{
  background:var(--color-primary-dark);
  box-shadow:0 10px 26px rgba(238,77,45,.45);
}

.btn-outline{
  background:transparent;
  color:var(--color-white);
  border:2px solid var(--color-white);
}

.btn-outline:hover{
  background:var(--color-white);
  color:var(--color-primary);
}

.btn-ghost{
  background:var(--color-gray-100);
  color:var(--color-text);
}

.btn-ghost:hover{background:var(--color-gray-200);}

.btn-sm{padding:9px 16px;font-size:13.5px;}
.btn-block{width:100%;}

/* Ripple effect */
.ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  animation:rippleAnim .6s linear;
  background:rgba(255,255,255,.55);
  pointer-events:none;
}
@keyframes rippleAnim{
  to{transform:scale(2.6);opacity:0;}
}

/* =========================================================
   HERO / BANNER SLIDER
   ========================================================= */
.hero-slider{
  position:relative;
  height:440px;
  overflow:hidden;
  border-radius:0 0 28px 28px;
}

.slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  opacity:0;
  transition:opacity .8s ease;
  padding:0 8%;
}

.slide.active{opacity:1;z-index:2;}

.slide-1{background:linear-gradient(120deg,#EE4D2D,#FF8A5B);}
.slide-2{background:linear-gradient(120deg,#2D3EEE,#5B7CFF);}
.slide-3{background:linear-gradient(120deg,#1FAA59,#4FD48A);}

.slide-content{
  color:var(--color-white);
  max-width:560px;
}

.slide-content .tag{
  display:inline-block;
  background:rgba(255,255,255,.2);
  padding:6px 14px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  margin-bottom:16px;
}

.slide-content h1{
  font-family:var(--font-display);
  font-size:42px;
  font-weight:800;
  margin-bottom:14px;
  line-height:1.2;
}

.slide-content p{
  font-size:17px;
  opacity:.92;
  margin-bottom:26px;
}

.slide-actions{display:flex;gap:14px;flex-wrap:wrap;}

.slider-dots{
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:5;
}

.slider-dots button{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.5);
  transition:all var(--transition-fast);
}

.slider-dots button.active{
  background:var(--color-white);
  width:26px;border-radius:8px;
}

.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  color:var(--color-white);
  font-size:18px;
  display:flex;align-items:center;justify-content:center;
  z-index:5;
  transition:background var(--transition-fast);
}

.slider-arrow:hover{background:rgba(255,255,255,.45);}
.slider-arrow.prev{left:20px;}
.slider-arrow.next{right:20px;}

/* =========================================================
   FLASH SALE
   ========================================================= */
.flash-sale{
  margin:46px 0;
}

.flash-sale-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
  flex-wrap:wrap;
  gap:12px;
}

.flash-sale-head h2{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:800;
  color:var(--color-primary);
  display:flex;
  align-items:center;
  gap:10px;
}

.countdown{
  display:flex;
  gap:6px;
  align-items:center;
}

.countdown .box{
  background:var(--color-text);
  color:var(--color-white);
  font-weight:700;
  padding:6px 9px;
  border-radius:6px;
  font-size:14px;
  min-width:30px;
  text-align:center;
}

.flash-scroll{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding-bottom:10px;
  scroll-snap-type:x mandatory;
}

.flash-scroll::-webkit-scrollbar{height:6px;}
.flash-scroll::-webkit-scrollbar-thumb{background:var(--color-gray-200);border-radius:10px;}

/* =========================================================
   CATEGORY
   ========================================================= */
.category{margin:46px 0;}

.category-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:16px;
}

.category-item{
  background:var(--color-white);
  border-radius:var(--radius-md);
  padding:20px 10px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition-fast),box-shadow var(--transition-fast);
  cursor:pointer;
}

.category-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
}

.category-item .emoji{font-size:30px;margin-bottom:8px;}
.category-item span{font-size:14px;font-weight:600;}

/* =========================================================
   FOOD CARD (shared: index / menu / flash sale)
   ========================================================= */
.food-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:24px;
}

.card{
  background:var(--color-white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition-med),box-shadow var(--transition-med);
  position:relative;
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateY(24px);
  animation:cardIn .6s ease forwards;
}

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

.card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
}

.card .img-wrap{
  position:relative;
  height:190px;
  overflow:hidden;
}

.card .img-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

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

.badge{
  position:absolute;
  top:12px;
  left:12px;
  font-size:11.5px;
  font-weight:700;
  padding:5px 10px;
  border-radius:20px;
  color:var(--color-white);
  text-transform:uppercase;
  letter-spacing:.3px;
}

.badge.hot{background:var(--color-accent-red);}
.badge.sale{background:var(--color-accent-green);}
.badge.best{background:#946200;background:linear-gradient(120deg,#FFB800,#FF7A00);}

.fav-btn{
  position:absolute;
  top:12px;
  right:12px;
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  color:var(--color-gray-400);
  transition:all var(--transition-fast);
}

.fav-btn.active{color:var(--color-accent-red);}
.fav-btn:hover{transform:scale(1.12);}

.card-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}

.card-body h3{
  font-size:16px;
  font-weight:600;
  min-height:22px;
}

.rating-row{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--color-gray-600);
}

.rating-row .stars{color:var(--color-accent-yellow);}

.price-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:2px;
}

.price-row .price-new{
  color:var(--color-primary);
  font-size:19px;
  font-weight:800;
}

.price-row .price-old{
  color:var(--color-gray-400);
  font-size:13px;
  text-decoration:line-through;
}

.card-actions{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.card-actions .btn{flex:1;padding:10px 12px;font-size:13.5px;}

/* =========================================================
   RESTAURANTS
   ========================================================= */
.restaurants{margin:46px 0;}

.restaurant-card{
  background:var(--color-white);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;
  gap:16px;
  padding:14px;
  transition:box-shadow var(--transition-fast),transform var(--transition-fast);
}

.restaurant-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}

.restaurant-card img{
  width:96px;height:96px;
  border-radius:var(--radius-md);
  object-fit:cover;
  flex-shrink:0;
}

.restaurant-info h4{font-size:15.5px;margin-bottom:4px;}
.restaurant-info p{font-size:13px;color:var(--color-gray-600);margin-bottom:4px;}

.restaurant-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}

/* =========================================================
   VOUCHER
   ========================================================= */
.voucher-section{margin:46px 0;}

.voucher-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}

.voucher-card{
  display:flex;
  background:var(--color-white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  border:1.5px dashed var(--color-primary);
}

.voucher-icon{
  background:linear-gradient(160deg,var(--color-primary),var(--color-primary-light));
  color:var(--color-white);
  width:80px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  flex-shrink:0;
}

.voucher-body{padding:14px;flex:1;}
.voucher-body h4{font-size:15px;margin-bottom:4px;}
.voucher-body p{font-size:12.5px;color:var(--color-gray-600);}
.voucher-body button{
  margin-top:8px;
  font-size:12.5px;
  font-weight:700;
  color:var(--color-primary);
}

/* =========================================================
   FEEDBACK
   ========================================================= */
.feedback-section{margin:46px 0;}

.feedback-scroll{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding-bottom:10px;
}

.feedback-card{
  min-width:280px;
  background:var(--color-white);
  border-radius:var(--radius-md);
  padding:20px;
  box-shadow:var(--shadow-sm);
}

.feedback-card .stars{color:var(--color-accent-yellow);margin-bottom:10px;}
.feedback-card p{font-size:14px;color:var(--color-gray-600);margin-bottom:14px;}

.feedback-user{display:flex;align-items:center;gap:10px;}
.feedback-user .avatar-circle{
  width:38px;height:38px;border-radius:50%;
  background:var(--color-primary);
  color:var(--color-white);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
}
.feedback-user h5{font-size:14px;}
.feedback-user span{font-size:12px;color:var(--color-gray-400);}

/* =========================================================
   PROMOTION (simple list — kept for content parity)
   ========================================================= */
.promotion{
  margin:46px 0;
  background:var(--color-white);
  padding:28px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}

.promotion ul{padding-left:6px;}
.promotion li{
  margin:12px 0;
  font-size:15px;
  padding-left:26px;
  position:relative;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer.site-footer{
  margin-top:60px;
  background:#1A1A1E;
  color:#C9C9D1;
  padding:50px 0 20px;
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:30px;
  padding-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-col h4{
  color:var(--color-white);
  font-size:15px;
  margin-bottom:16px;
}

.footer-col p, .footer-col a{
  display:block;
  font-size:13.5px;
  margin-bottom:10px;
  color:#B5B5C0;
  transition:color var(--transition-fast);
}

.footer-col a:hover{color:var(--color-accent-yellow);}

.footer-logo{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:800;
  color:var(--color-white);
  margin-bottom:12px;
}

.footer-social{display:flex;gap:10px;margin-top:14px;}
.footer-social a{
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:0;
}
.footer-social a:hover{background:var(--color-primary);}

.footer-bottom{
  text-align:center;
  padding-top:20px;
  font-size:13px;
  color:#8A8A96;
}

/* =========================================================
   TOAST NOTIFICATION
   ========================================================= */
#toast-container{
  position:fixed;
  bottom:26px;
  right:26px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:5000;
}

.toast{
  background:var(--color-text);
  color:var(--color-white);
  padding:14px 20px;
  border-radius:10px;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:var(--shadow-lg);
  min-width:240px;
  animation:toastIn .35s ease forwards;
}

.toast.success{background:var(--color-accent-green);}
.toast.error{background:var(--color-accent-red);}

.toast.hide{animation:toastOut .35s ease forwards;}

@keyframes toastIn{
  from{transform:translateX(120%);opacity:0;}
  to{transform:translateX(0);opacity:1;}
}
@keyframes toastOut{
  to{transform:translateX(120%);opacity:0;}
}

/* =========================================================
   SEARCH PAGE UTILS / MENU FILTER
   ========================================================= */
.menu-hero{
  padding:36px 0 10px;
}

.filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:20px 0 30px;
}

.filter-chip{
  padding:10px 20px;
  border-radius:24px;
  background:var(--color-white);
  font-size:14px;
  font-weight:600;
  box-shadow:var(--shadow-sm);
  transition:all var(--transition-fast);
}

.filter-chip.active,
.filter-chip:hover{
  background:var(--color-primary);
  color:var(--color-white);
}

.search-realtime{
  max-width:460px;
  margin-bottom:26px;
  position:relative;
}

.search-realtime input{
  width:100%;
  padding:13px 44px 13px 18px;
  border-radius:24px;
  border:1px solid var(--color-gray-200);
  background:var(--color-white);
}

.search-realtime i{
  position:absolute;
  right:16px;top:50%;transform:translateY(-50%);
  color:var(--color-gray-400);
}

.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--color-gray-400);
  grid-column:1/-1;
}

.empty-state .icon{font-size:48px;margin-bottom:14px;}

/* =========================================================
   SKELETON LOADING
   ========================================================= */
.skeleton{
  background:linear-gradient(90deg,var(--color-gray-100) 25%,var(--color-gray-200) 37%,var(--color-gray-100) 63%);
  background-size:400% 100%;
  animation:skeletonShine 1.4s ease infinite;
  border-radius:var(--radius-lg);
}

@keyframes skeletonShine{
  0%{background-position:100% 50%;}
  100%{background-position:0 50%;}
}

.skeleton-card{height:340px;}

/* =========================================================
   CART PAGE
   ========================================================= */
.cart-page{
  margin:40px 0 70px;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:26px;
  align-items:flex-start;
}

.cart-table-wrap{
  background:var(--color-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.cart-header-row{
  display:grid;
  grid-template-columns:40px 3fr 1fr 1.4fr 1fr 50px;
  align-items:center;
  padding:16px 18px;
  background:var(--color-gray-50);
  font-size:13px;
  font-weight:700;
  color:var(--color-gray-600);
  text-transform:uppercase;
}

.cart-item{
  display:grid;
  grid-template-columns:40px 3fr 1fr 1.4fr 1fr 50px;
  align-items:center;
  padding:16px 18px;
  border-top:1px solid var(--color-gray-100);
  gap:10px;
}

.cart-item .product{
  display:flex;
  align-items:center;
  gap:14px;
}

.cart-item .product img{
  width:64px;height:64px;
  border-radius:var(--radius-sm);
  object-fit:cover;
}

.cart-item .product h4{font-size:14.5px;}

.qty-control{
  display:flex;
  align-items:center;
  gap:0;
  border:1px solid var(--color-gray-200);
  border-radius:8px;
  width:fit-content;
}

.qty-control button{
  width:30px;height:30px;
  font-size:16px;
  color:var(--color-gray-600);
}

.qty-control span{
  width:32px;
  text-align:center;
  font-size:14px;
  font-weight:600;
}

.remove-btn{
  color:var(--color-gray-400);
  font-size:18px;
  transition:color var(--transition-fast);
}

.remove-btn:hover{color:var(--color-accent-red);}

.cart-item-money{font-weight:700;color:var(--color-primary);font-size:14.5px;}

.cart-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
}

.cart-empty{
  text-align:center;
  padding:80px 20px;
}

.cart-empty .icon{font-size:60px;margin-bottom:20px;opacity:.4;}
.cart-empty p{color:var(--color-gray-600);margin-bottom:20px;}

.summary-box{
  background:var(--color-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:22px;
  position:sticky;
  top:100px;
}

.summary-box h3{margin-bottom:18px;font-size:17px;}

.voucher-input{
  display:flex;
  gap:8px;
  margin-bottom:18px;
}

.voucher-input input{
  flex:1;
  padding:11px 14px;
  border-radius:8px;
  border:1px solid var(--color-gray-200);
}

.summary-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  margin-bottom:12px;
  color:var(--color-gray-600);
}

.summary-row.discount span:last-child{color:var(--color-accent-green);}

.summary-total{
  display:flex;
  justify-content:space-between;
  font-size:17px;
  font-weight:800;
  padding-top:14px;
  border-top:1px dashed var(--color-gray-200);
  margin-bottom:20px;
}

.summary-total .amount{color:var(--color-primary);}

/* =========================================================
   LOGIN / CHECKOUT
   ========================================================= */
.auth-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:60px 20px;
  min-height:calc(100vh - var(--header-h) - 200px);
}

.auth-box{
  width:420px;
  background:var(--color-white);
  padding:38px 34px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
}

.auth-box h2{
  font-family:var(--font-display);
  text-align:center;
  color:var(--color-primary);
  margin-bottom:6px;
  font-size:24px;
}

.auth-box .subtitle{
  text-align:center;
  color:var(--color-gray-600);
  font-size:13.5px;
  margin-bottom:26px;
}

.field{margin-bottom:16px;position:relative;}

.field label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:6px;
}

.field input{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--color-gray-200);
  border-radius:10px;
  transition:border-color var(--transition-fast);
}

.field input:focus{border-color:var(--color-primary);}

.field input.invalid{border-color:var(--color-accent-red);}

.field .error-msg{
  color:var(--color-accent-red);
  font-size:12px;
  margin-top:5px;
  display:none;
}

.field.has-error .error-msg{display:block;}
.field.has-error input{border-color:var(--color-accent-red);}

.toggle-pass{
  position:absolute;
  right:14px;
  top:38px;
  color:var(--color-gray-400);
  font-size:14px;
}

.form-row-between{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  margin-bottom:20px;
}

.checkbox-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.checkbox-row input{width:16px;height:16px;}

.forgot-link{color:var(--color-primary);font-weight:600;}

.divider-text{
  display:flex;
  align-items:center;
  gap:10px;
  margin:22px 0;
  color:var(--color-gray-400);
  font-size:12.5px;
}

.divider-text::before,
.divider-text::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--color-gray-200);
}

.social-row{
  display:flex;
  gap:12px;
}

.btn-social{
  flex:1;
  padding:11px;
  border-radius:10px;
  border:1.5px solid var(--color-gray-200);
  font-size:13.5px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:background var(--transition-fast);
}

.btn-social:hover{background:var(--color-gray-50);}

.auth-footer-text{
  text-align:center;
  margin-top:22px;
  font-size:13.5px;
  color:var(--color-gray-600);
}

.auth-footer-text a{color:var(--color-primary);font-weight:700;}

/* Checkout */
.checkout-page{
  margin:40px 0 70px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:26px;
  align-items:flex-start;
}

.checkout-box{
  background:var(--color-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:28px;
}

.checkout-box h2{
  font-family:var(--font-display);
  color:var(--color-primary);
  margin-bottom:22px;
  font-size:21px;
}

.payment-options{display:flex;flex-direction:column;gap:10px;margin-top:8px;}

.payment-option{
  display:flex;
  align-items:center;
  gap:12px;
  border:1.5px solid var(--color-gray-200);
  padding:13px 16px;
  border-radius:10px;
  cursor:pointer;
  transition:border-color var(--transition-fast),background var(--transition-fast);
}

.payment-option:hover{background:var(--color-gray-50);}
.payment-option.selected{border-color:var(--color-primary);background:rgba(238,77,45,.05);}

.payment-option img,
.payment-option .pay-icon{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}

.order-items{
  max-height:220px;
  overflow-y:auto;
  margin-bottom:16px;
}

.order-item-row{
  display:flex;
  justify-content:space-between;
  font-size:13.5px;
  padding:8px 0;
  border-bottom:1px solid var(--color-gray-100);
}

/* Success animation overlay */
#success-overlay{
  position:fixed;
  inset:0;
  background:rgba(20,20,25,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:6000;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}

#success-overlay.show{opacity:1;pointer-events:auto;}

.success-box{
  background:var(--color-white);
  border-radius:var(--radius-lg);
  padding:44px 40px;
  text-align:center;
  max-width:360px;
  transform:scale(.85);
  transition:transform .35s cubic-bezier(.25,.8,.25,1.4);
}

#success-overlay.show .success-box{transform:scale(1);}

.success-check{
  width:80px;height:80px;
  border-radius:50%;
  background:var(--color-accent-green);
  color:var(--color-white);
  font-size:40px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  animation:popIn .5s ease;
}

@keyframes popIn{
  0%{transform:scale(0);}
  70%{transform:scale(1.15);}
  100%{transform:scale(1);}
}

.success-box h3{margin-bottom:8px;font-size:19px;}
.success-box p{color:var(--color-gray-600);font-size:14px;margin-bottom:22px;}