* {
  box-sizing: border-box;
  font-family: 'Cairo', sans-serif;
}

body {
  margin: 0;
  background: #f4f6f8;
  padding-bottom: 90px; /* for bottom bar */
}

.top-bar {
  background: #0f8a44;
  color: white;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar h1{
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  display:flex;
  gap:10px;
  align-items:center;
}

.left{
  display:flex;
  gap:10px;
  align-items:center;
}

.icon-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.lang-switch{
  display:flex;
  gap:8px;
  align-items:center;
}

.lang-switch button{
  border:1px solid rgba(255,255,255,.55);
  background:transparent;
  color:white;
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
}

.search-box {
  display: none;
  padding: 10px 16px;
  background: #0f8a44;
}

.search-box input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  outline: none;
  font-size: 14px;
}

.banner {
  background: #e8f5ee;
  text-align: center;
  padding: 12px 10px;
  font-weight: 700;
  color: #0f8a44;
}

.banner p{ margin: 6px 0; }

.categories {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  overflow-x: auto;
  align-items:center;
}

.categories button {
  border: none;
  padding: 8px 14px;
  border-radius: 20px;
  background: #ddd;
  cursor: pointer;
  font-weight: 700;
  white-space: nowrap;
}

.categories .active {
  background: #0f8a44;
  color: white;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  padding: 16px;
}

.product {
  background: white;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.product:hover{
  transform: translateY(-3px);
  transition: 0.25s;
}

.img-box {
  position: relative;
  width: 100%;
  height: 140px;
  background: #f2f2f2;
  border-radius: 10px;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* يحافظ على الصورة بدون قص */
  object-position: center;
  background: #fff;          /* خلفية نظيفة لو فيه فراغ */
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e63946;
  color: white;
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 6px;
  z-index: 2;
}

/* Quantity indicator on product image */
.qty-pill{
  position: absolute;
  top: 8px;
  left: 8px;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.product h3 {
  margin: 10px 0 4px;
  font-size: 15px;
  line-height: 1.3;
  min-height: 38px;
}

.barcode{
  color:#777;
  font-size:12px;
  margin-top:4px;
}

.price {
  color: #0f8a44;
  font-weight: 900;
  margin-top: 6px;
}

.product button {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f8a44, #13b35b);
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.empty{
  padding:20px;
  text-align:center;
  color:#666;
  background:transparent;
}

/* Bottom bar */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  padding: 10px;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}

.bottom-bar button {
  width: 100%;
  background: linear-gradient(135deg, #25d366, #1ebe5d);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.bottom-bar i {
  margin-left: 8px;
}

#cartCount {
  background: red;
  color: white;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 999px;
  margin-right: 10px;
}

/* Cart modal */
.cart-modal, .profile-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  z-index: 2000;
}

.cart-box, .profile-box{
  background: white;
  width: 92%;
  max-width: 520px;
  margin: 70px auto;
  padding: 16px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

.cart-box h2, .profile-box h2{
  margin: 0 0 12px 0;
}

/* Checkout extras (V1) */
.checkout-extras{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  background: #fafafa;
}

.checkout-extras h3{
  margin: 0 0 10px 0;
  font-size: 16px;
}

.checkout-extras label{
  display: block;
  font-weight: 700;
  margin-top: 10px;
}

.checkout-extras select,
.checkout-extras input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  margin-top: 6px;
}

.fee-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e5e5e5;
}

.cart-actions{
  position: sticky;
  bottom: 0;
  background: white;
  padding-top: 10px;
  margin-top: 14px;
  border-top: 1px solid #eee;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 12px;
}

.cart-actions button{
  flex: 1 1 140px;
  padding: 10px 12px;
  border-radius: 10px;
  border:none;
  cursor:pointer;
  font-weight:900;
}

.primary{ background:#0f8a44; color:white; }
.danger{ background:#e63946; color:white; }
.muted{ background:#e9ecef; color:#111; }

.cart-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.cart-info { flex: 1; }
.cart-sub {
  display: flex;
  gap: 10px;
  color: #666;
  font-size: 13px;
  margin-top: 4px;
}
.cart-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qty-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #ddd;
  background: #f7f7f7;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
.qty-num {
  min-width: 18px;
  text-align: center;
  font-weight: 900;
}
.cart-line-total {
  min-width: 95px;
  text-align: left;
  color: #0f8a44;
}
.cart-total {
  padding-top: 12px;
  text-align: center;
  font-size: 16px;
  color: #0f8a44;
}

/* Profile form */
#profileForm label{
  display:block;
  margin:10px 0 6px;
  font-weight:800;
  color:#333;
}

#profileForm input{
  width:100%;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:10px;
  outline:none;
}

#profileForm button{
  width:100%;
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:900;
}

@media (max-width: 600px) {
  .top-bar h1 { font-size: 18px; }
}

/* Placeholder when no product image */
.img-box .ph{
  width:100%;
  height:140px;
  background:#eee;
  border-radius:10px;
}

.img-box img{
  width:100%;
  height:140px;
  object-fit: contain;       /* نفس المنطق */
  object-position:center;
  border-radius:10px;
  background:#fff;
}


/* Order notice */
.order-notice{font-size:13px;margin:8px 0;padding:8px 10px;border-radius:10px;background:#fff3cd;color:#664d03;display:none;}
.order-notice.show{display:block;}


/* ====== Ad Slot (Image Only + Full Width) ====== */
.ad-slot{padding:0 16px 10px;margin-top:8px}
.ad-slot a{display:block;width:100%;text-decoration:none;color:inherit}
#adImage.ad-full{
  width:100%;
  height:auto;
  display:block;
  max-height:240px;
  object-fit:cover;
  border-radius:16px;
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
}
@media (max-width: 520px){
  .ad-inner{ flex-direction: column; }
 #adImage.ad-full{ width:100%; height:160px; flex: 0 0 auto; object-fit:cover; }
  .ad-content{ padding: 12px 12px 14px; }
}

/* Mobile tighten */
@media (max-width: 420px){
  .top-bar{ padding: 12px 12px; }
  .products{ padding: 12px; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product{ padding: 10px; }
  .product h3{ font-size: 14px; }
  .banner{ padding: 10px 12px; }
  .bottom-bar{ padding: 12px; }
}


/* ===== Dark Mode ===== */
body.dark{background:#0b1220;color:#e5e7eb;}
body.dark header{background:#0f1a30;}
body.dark .category-pill{background:#1f2a44;color:#e5e7eb;}
body.dark .category-pill.active{background:#16a34a;color:#fff;}
body.dark .product-card{background:#0f1a30;border-color:#20304f;}
body.dark .product-card .title{color:#e5e7eb;}
body.dark .product-card .price{color:#86efac;}
body.dark .cart-bar{background:#0f1a30;}
body.dark .modal-content{background:#0f1a30;color:#e5e7eb;}
body.dark input, body.dark select{background:#0b1220;color:#e5e7eb;border-color:#274066;}

/* ===== Categories as Cards Grid (Kimo) ===== */
.categories.cat-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 16px 6px;
  overflow: visible;
}

.cat-card{
  border: none;
  background: #ffffff;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  text-align: start;
}

.cat-card:hover{ transform: translateY(-2px); transition: .2s; }
.cat-card.active{ outline: 2px solid rgba(15,138,68,.35); }

.cat-img{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #e8f5ee;
  flex: 0 0 56px;
}

.cat-img-offers{
  background: linear-gradient(135deg, #ff4d4f, #ff7a45);
}

.cat-txt{ flex: 1; min-width: 0; }
.cat-title{
  font-weight: 900;
  font-size: 14px;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-sub{
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ===== InstaShop-like Category Cards ===== */
.categories.cat-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 16px;
  overflow: visible;
}

/* Card */
.cat-card{
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}

/* Image box */
.cat-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: #e9ecef;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
  position: relative;
}

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

/* Name */
.cat-name{
  font-weight: 900;
  font-size: 14px;
  text-align: center;
  color: #111;
  line-height: 1.2;
}

/* Offers special */
.offers-thumb{
  background: linear-gradient(135deg, #ff4d4f, #ff7a45);
}

.offer-badge{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 520px){
  .categories.cat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ===== Kimo: Live qty overlay (counter + minus) ===== */
.product{ position: relative; }

.product .img-box{ position: relative; }

.qty-minus{
  position:absolute;
  top:10px; left:10px;
  width:30px; height:30px;
  border-radius:999px;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  z-index:50;
  flex:none !important;
  max-width:30px !important;
  min-width:30px !important;
  padding:0 !important;
  border:0;
  background: rgba(0,0,0,.65);
  color:#fff;
}

.qty-badge{
  position:absolute;
  top:10px; right:10px;
  width:30px; height:30px;
  border-radius:999px;
  display:none;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  z-index:50;
  flex:none !important;
  max-width:30px !important;
  min-width:30px !important;
  background: rgba(22,163,74,.95);
  color:#fff;
}

/* card shake animation */
.product.shake{
  animation: kimoShake .28s ease-in-out;
}
@keyframes kimoShake{
  0%{ transform: translateX(0); }
  25%{ transform: translateX(-3px); }
  50%{ transform: translateX(3px); }
  75%{ transform: translateX(-2px); }
  100%{ transform: translateX(0); }
}



/* ===== Kimo: Category/Search bar (auto) ===== */
.category-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#ffffff;
  border-radius:14px;
  padding:14px 16px;
  margin:14px 0;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.category-bar.hidden{ display:none; }
.category-bar-title{
  font-weight:800;
  font-size:18px;
}
.category-bar-back{
  border:none;
  background:#f3f4f6;
  color:#111827;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
}


/* ===== Size chip (pack size) ===== */
.size-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  margin:6px 0 0;
  background: rgba(0,0,0,.06);
  color:#1f2937;
  width: fit-content;
}

/* ===== Kimo Clean Final Theme ===== */

:root{
  --main-blue:#3b82f6;
  --purple:#8b5cf6;
  --dark:#0b0f1a;
  --card:#151925;
  --card-2:#1b2130;
  --line:#2b3448;
  --text:#f8fafc;
  --muted:#9aa4b2;
}

body{
  background:var(--dark);
  color:var(--text);
  padding-bottom:90px;
}

/* Header */
.top-bar{
  position:sticky;
  top:0;
  z-index:100;
  background:linear-gradient(135deg,var(--main-blue),var(--purple));
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}

.top-bar h1{
  margin:0;
  font-size:22px;
  font-weight:900;
  color:#fff;
}

.lang-switch button{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  padding:7px 11px;
  border-radius:12px;
}

.lang-switch button.active-lang,
.lang-switch button:hover{
  background:#fff;
  color:#4f46e5;
}

/* Search */
.search-box{
  padding:12px 16px 8px;
  background:transparent;
}

.search-box input{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#151a24;
  color:#fff;
  outline:none;
}

.search-box input::placeholder{
  color:var(--muted);
}

/* Banner */
.banner{
  margin:0 16px 12px;
  background:#161b25;
  color:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 16px;
}

.banner p:last-child{
  color:var(--muted);
}

/* Section title */
.section-headline{
  padding:4px 16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.section-headline h3{
  margin:0;
  color:#fff;
  font-size:20px;
  font-weight:900;
}

.section-headline p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
}

/* Category grid */
.categories.cat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:12px 16px;
  overflow:visible;
}

.cat-card{
  background:linear-gradient(135deg,#4f7cff,#8b5cf6);
  border:none;
  border-radius:22px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.cat-thumb{
  width:100%;
  aspect-ratio:1/1;
  border-radius:18px;
  overflow:hidden;
  background:#171b24;
}

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

.cat-name{
  color:#fff;
  text-align:center;
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.empty-card{
  display:none !important;
}

/* Products */
.products{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  padding:14px 16px 20px;
}

.product{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:10px 10px 12px;
  box-shadow:0 6px 16px rgba(0,0,0,.16);
  position:relative;
  overflow:hidden;
  transition:transform .18s ease;
}

.product:hover{
  transform:translateY(-2px);
}

.img-box{
  position:relative;
  width:100%;
  height:150px;
  background:var(--card-2);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}

.product img,
.img-box img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:transparent;
  padding:10px;
}

.badge{
  position:absolute;
  top:10px;
  right:10px;
  background:linear-gradient(135deg,var(--main-blue),var(--purple));
  color:#fff;
  padding:4px 9px;
  font-size:11px;
  border-radius:999px;
  z-index:2;
  font-weight:800;
}

.qty-minus{
  position:absolute;
  top:10px;
  left:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  display:none;
  align-items:center;
  justify-content:center;
  font-size:18px;
  cursor:pointer;
  z-index:5;
  border:none;
  background:#fff;
  color:#111827;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}

.qty-badge{
  position:absolute;
  top:10px;
  right:10px;
  width:28px;
  height:28px;
  border-radius:999px;
  display:none;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  z-index:5;
  background:linear-gradient(135deg,var(--main-blue),var(--purple));
  color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}

.product h3{
  margin:0 0 4px;
  font-size:14px;
  color:#fff;
  min-height:38px;
  line-height:1.35;
}

.size-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  margin:6px 0 0;
  background:#2b3140;
  color:#dbe0ea;
  width:fit-content;
}

.barcode{
  color:var(--muted);
  font-size:11px;
  margin-top:6px;
}

.price{
  color:#fff;
  font-weight:900;
  margin-top:8px;
  font-size:15px;
}

.product button:not(.qty-minus){
  width:100%;
  margin-top:10px;
  padding:11px 10px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,var(--main-blue),var(--purple));
  color:#fff;
  cursor:pointer;
  font-size:13px;
  font-weight:800;
}

/* Empty */
.empty{
  background:#17191f;
  border:1px dashed #333949;
  border-radius:18px;
  color:var(--muted);
  padding:22px;
  text-align:center;
}

/* Bottom bar */
.bottom-bar{
  position:fixed;
  bottom:10px;
  left:14px;
  right:14px;
  width:auto;
  background:transparent;
  padding:0;
  box-shadow:none;
  z-index:1000;
}

.bottom-bar button{
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(135deg,var(--main-blue),var(--purple));
  color:#fff;
  border:none;
  padding:0 18px;
  border-radius:18px;
  font-size:15px;
  font-weight:900;
  box-shadow:0 10px 25px rgba(0,0,0,.28);
}

#cartCount{
  background:#fff;
  color:#4f46e5;
  font-size:12px;
  font-weight:900;
  min-width:30px;
  height:30px;
  padding:0 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:0;
}

/* Cart/Profile modal */
.cart-modal, .profile-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  z-index:2000;
}

.cart-box, .profile-box{
  background:#17191f;
  color:#fff;
  width:92%;
  max-width:520px;
  margin:70px auto;
  padding:16px;
  border-radius:20px;
  border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  max-height:calc(100vh - 140px);
  overflow-y:auto;
}

.cart-box h2, .profile-box h2{
  margin:0 0 12px 0;
}

/* Cart rows */
.cart-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

.cart-info{ flex:1; }

.cart-sub{
  display:flex;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  margin-top:4px;
}

.cart-controls{
  display:flex;
  align-items:center;
  gap:8px;
}

.qty-btn{
  width:34px;
  height:34px;
  border:1px solid var(--line);
  background:#232937;
  color:#fff;
  border-radius:10px;
  cursor:pointer;
  font-size:16px;
}

.qty-num{
  min-width:18px;
  text-align:center;
  font-weight:900;
}

.cart-line-total,
.cart-total{
  color:#34d399;
  font-weight:900;
}

/* Checkout */
.checkout-extras{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#1d212b;
}

.checkout-extras label{
  display:block;
  font-weight:700;
  margin-top:10px;
}

.checkout-extras select,
.checkout-extras input,
#profileForm input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  margin-top:6px;
  background:#111319;
  color:#fff;
}

.cart-actions{
  position:sticky;
  bottom:0;
  background:#17191f;
  padding-top:10px;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.cart-actions button{
  flex:1 1 140px;
  padding:10px 12px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  font-weight:900;
}

.primary{ background:linear-gradient(135deg,var(--main-blue),var(--purple)); color:#fff; }
.danger{ background:#c62828; color:#fff; }
.muted{ background:#2a2e38; color:#fff; }

#profileForm label{
  display:block;
  margin:10px 0 6px;
  font-weight:800;
  color:#fff;
}

#profileForm button{
  width:100%;
  margin-top:10px;
  padding:10px 12px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:900;
}

/* Responsive */
@media (max-width: 900px){
  .products{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 600px){
  .top-bar h1{ font-size:18px; }
  .categories.cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .products{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .img-box{ height:132px; }
  .cat-thumb{ aspect-ratio:1/1; }
}
/* ===== Fix current project classes ===== */

/* cards اللي عندك رجعت أبيض */
.cat-card,
.category-card,
.categories .cat-card,
.categories button.cat-card,
.categories > button,
.categories > div {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
  border-radius: 22px !important;
  padding: 10px !important;
}

/* الصورة جوه كارت القسم */
.cat-thumb,
.category-thumb,
.cat-card .cat-thumb,
.cat-card img,
.category-card img,
.categories img {
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* اسم القسم */
.cat-name,
.category-name,
.cat-card .cat-name,
.category-card .cat-name,
.cat-card h3,
.category-card h3,
.categories .cat-title,
.categories .cat-name {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

/* لو فيه كارت فاضي */
.empty-card,
.category-card:has(img[src=""]),
.cat-card:has(img[src=""]) {
  display: none !important;
}

/* شريط السلة السفلي */
.bottom-bar {
  position: fixed !important;
  bottom: 10px !important;
  left: 14px !important;
  right: 14px !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 1000 !important;
}

.bottom-bar button {
  width: 100% !important;
  min-height: 58px !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 0 18px !important;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.28) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

/* عداد السلة */
#cartCount {
  background: #fff !important;
  color: #4f46e5 !important;
  min-width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  margin-right: 0 !important;
}

/* شيل الأبيض القديم من أي كروت */
.product,
.cat-card,
.category-card,
.banner,
.search-box input,
.cart-box,
.profile-box {
  border-color: #2b3448 !important;
}
/* Fix back button */
.category-bar{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 10px 16px !important;
  padding: 0 !important;
}

.category-bar-back{
  background: #1f2937 !important;
  color: #fff !important;
  border: 1px solid #2b3448 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
.banner{
  margin-bottom: 6px !important;
}

.section-headline{
  padding-top: 6px !important;
}
/* smooth scroll */
html{
  scroll-behavior: smooth;
}

/* remove blue tap highlight */
*{
  -webkit-tap-highlight-color: transparent;
}
.img-box{
  height: 140px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-box img{
  max-height: 100%;
  max-width: 100%;
  object-fit: contain !important;
}
.empty{
  background: linear-gradient(135deg,#1f2937,#111827);
  border: 1px solid #2b3448;
  border-radius: 18px;
  color: #9aa4b2;
  padding: 18px;
  text-align: center;
  font-weight: 700;
}
.product{
  transition: all .2s ease;
}

.product:active{
  transform: scale(0.97);
}

/* ===== New Checkout Experience ===== */
body{padding-bottom:96px;}
.cart-modal{position:fixed;inset:0;background:rgba(4,10,24,.74);display:none;z-index:5000;backdrop-filter:blur(8px);padding:18px;justify-content:center;align-items:center;overflow:auto;}
.checkout-shell{width:min(1120px,calc(100vw - 36px));max-width:1120px;height:min(92vh,880px);margin:0;background:#0d1322;border:1px solid rgba(255,255,255,.08);border-radius:28px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.45);}
.checkout-topbar{background:linear-gradient(90deg,#4f7cff 0%, #d94bb8 100%);padding:18px 20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;color:#fff;}
.checkout-brand{text-align:center;}
.checkout-brand h2{margin:0;font-size:32px;font-weight:900;color:#fff;}
.checkout-brand p{margin:6px 0 0;font-size:13px;opacity:.95;color:#f6f7fb;}
.cart-min-note{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:900;font-size:14px;line-height:1.4;backdrop-filter:blur(8px);}
.cart-min-note.warn{background:rgba(255,211,102,.18);border-color:rgba(255,211,102,.34);color:#fff5cc;box-shadow:0 10px 24px rgba(87,59,0,.18);}

.checkout-close,.checkout-icon-btn{border:none;background:rgba(255,255,255,.18);color:#fff;border-radius:16px;padding:12px 16px;font-size:16px;font-weight:800;cursor:pointer;min-width:72px;}
.checkout-icon-btn{min-width:56px;width:56px;height:56px;display:grid;place-items:center;padding:0;font-size:20px;}
.checkout-stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 14px;background:#0d1322;border-bottom:1px solid rgba(255,255,255,.06);}
.checkout-step-chip{border:1px solid rgba(255,255,255,.08);background:#10182b;color:#98a6c0;border-radius:16px;padding:12px 14px;font-weight:800;cursor:pointer;}
.checkout-step-chip.active{background:linear-gradient(180deg,rgba(79,124,255,.18),rgba(217,75,184,.14));color:#fff;border-color:#6889ff;box-shadow:0 0 0 1px rgba(79,124,255,.25) inset;}
.checkout-stage-wrap{flex:1;overflow:auto;padding:18px 18px 10px;}
.checkout-stage{display:none;}
.checkout-stage.active{display:block;}
#checkoutStep3.active{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.95fr);gap:16px;align-items:start;}
#checkoutStep3 .checkout-card{margin-bottom:0;}
.summary-card{position:sticky;top:0;}
.checkout-card{background:#10182b;border:1px solid rgba(255,255,255,.07);border-radius:22px;padding:18px;margin-bottom:16px;}
.card-header-line h3{margin:0 0 6px;color:#fff;font-size:28px;font-weight:900;}
.card-header-line p{margin:0;color:#9fb0cd;font-size:13px;}
.checkout-form-grid{display:grid;gap:14px;}
.checkout-form-grid.two-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
.checkout-form-grid.location-row{grid-template-columns:220px 1fr;align-items:end;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group label{font-weight:800;color:#fff;font-size:15px;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:#0a1020;color:#fff;outline:none;font-size:15px;}
.form-group input::placeholder,.form-group textarea::placeholder{color:#7282a1;}
.form-help,.schedule-hint{font-size:12px;color:#8ea0c0;margin-top:4px;}
.location-btn{border:none;background:#1c2640;color:#fff;border-radius:16px;padding:14px 16px;font-weight:800;cursor:pointer;height:52px;}
.choice-card{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#0f1729;cursor:pointer;margin-top:14px;}
.choice-card input{margin-top:4px;accent-color:#d94bb8;}
.choice-card.selected{border-color:#6889ff;box-shadow:0 0 0 1px rgba(104,137,255,.35) inset;background:linear-gradient(180deg,rgba(79,124,255,.12),rgba(217,75,184,.06));}
.choice-copy{display:flex;flex-direction:column;gap:6px;}
.choice-copy strong{font-size:20px;color:#fff;}
.choice-copy span{color:#9fb0cd;font-size:13px;}
.hidden{display:none !important;}
.summary-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;color:#dfe7f5;border-bottom:1px solid rgba(255,255,255,.06);}
.summary-line.total{border-bottom:none;padding-top:16px;font-size:20px;font-weight:900;color:#fff;}
.instapay-info{margin-top:12px;padding:14px 16px;border-radius:18px;background:linear-gradient(90deg,rgba(79,124,255,.18),rgba(217,75,184,.18));border:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;color:#fff;}
.checkout-footer-bar{background:#0b101c;border-top:1px solid rgba(255,255,255,.06);padding:16px 18px;display:flex;justify-content:space-between;gap:16px;align-items:center;}
.footer-total-box{display:flex;flex-direction:column;gap:6px;color:#9fb0cd;min-width:140px;}
.footer-total-box strong{font-size:22px;color:#fff;}
.footer-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.footer-btn{border:none;border-radius:18px;padding:14px 22px;font-weight:900;cursor:pointer;min-width:160px;}
.footer-btn.primary{background:linear-gradient(90deg,#4f7cff,#d94bb8);color:#fff;}
.footer-btn.ghost{background:#1a2440;color:#fff;}
.footer-btn.danger{background:#4c1325;color:#ffd8e4;}
.footer-btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.18);}
.cart-row{display:grid;grid-template-columns:110px 1fr 140px;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.cart-controls{justify-content:flex-start;}
.cart-info b{display:block;color:#fff;font-size:18px;line-height:1.5;}
.cart-sub{margin-top:8px;color:#8da2c6;}
.cart-line-total{min-width:unset;text-align:end;color:#fff;font-size:18px;}
.cart-total{margin-top:16px;background:#131f39;border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:18px;text-align:center;color:#8ff5b2;font-size:20px;}
.order-notice{display:none;margin-top:14px;padding:12px 14px;border-radius:16px;background:#3b2d05;color:#ffe39a;font-size:13px;line-height:1.7;}
.order-notice.show{display:block;}
@media (max-width:860px){.checkout-shell{width:min(100%,calc(100vw - 20px));height:96vh;border-radius:22px;}.checkout-brand h2{font-size:26px;}#checkoutStep3.active{grid-template-columns:1fr;}.summary-card{position:static;}.checkout-form-grid.two-cols,.checkout-form-grid.location-row{grid-template-columns:1fr;}.cart-row{grid-template-columns:90px 1fr;}.cart-line-total{grid-column:1/-1;text-align:start;}.checkout-footer-bar{flex-direction:column;align-items:stretch;}.footer-actions{justify-content:stretch;}.footer-btn{flex:1;min-width:unset;}.checkout-close{min-width:unset;padding:10px 12px;}.checkout-icon-btn{width:48px;height:48px;}}
@media (max-width:520px){.cart-modal{padding:10px;}.checkout-topbar{padding:14px 12px;gap:10px;}.checkout-brand h2{font-size:22px;}.checkout-brand p{font-size:11px;}.checkout-step-chip{font-size:12px;padding:10px 8px;}.checkout-stage-wrap{padding:12px 12px 6px;}.checkout-card{padding:14px;border-radius:18px;}.card-header-line h3{font-size:24px;}.choice-copy strong{font-size:18px;}.location-btn{width:100%;}.footer-total-box strong{font-size:18px;}.footer-btn{padding:13px 14px;border-radius:14px;}.cart-row{grid-template-columns:1fr;gap:10px;}.cart-controls{order:2;justify-content:flex-start;}.cart-line-total{text-align:start;order:3;}.cart-info b{font-size:16px;}}
.brand-pill{
  display:flex;
  align-items:center;
  gap:10px;
}

.site-logo{
  width:44px;
  height:44px;
  object-fit:contain;
  border-radius:10px;
  background:#fff;
  padding:4px;
}.top-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  width: 55px;
  height: 55px;
  object-fit: contain;
  border-radius: 12px;
  background: white;
  padding: 5px;
}

.brand-name {
  font-size: 20px;
  font-weight: bold;
  color: white;
}.logo {
  width: 55px;
  height: 55px;
  object-fit: contain;
  border-radius: 12px;
  background: white;
  padding: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #4d7df0 0%, #7467f0 100%);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.topbar-left,
.topbar-right{
  display: flex;
  align-items: center;
}

.topbar-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-btn{
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
}

.brand-box{
  min-width: 220px;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.brand-logo{
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  flex-shrink: 0;
}

.brand-texts{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.brand-title{
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-subtitle{
  color: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}

.topbar-right{
  gap: 8px;
}

.lang-btn{
  min-width: 44px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.lang-btn.active{
  background: #fff;
  color: #5a62f2;
}

@media (max-width: 768px){
  .topbar{
    grid-template-columns: 46px 1fr auto;
    gap: 8px;
    padding: 8px 10px;
  }

  .icon-btn{
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 16px;
  }

  .brand-box{
    min-width: unset;
    width: 100%;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 14px;
  }

  .brand-logo{
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .brand-title{
    font-size: 18px;
  }

  .brand-subtitle{
    font-size: 11px;
  }

  .lang-btn{
    min-width: 38px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 12px;
  }
}.top-bar{
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, #4f7cff, #7c4dff);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.top-side{
  display:flex;
  align-items:center;
}

.left-side{
  justify-content:flex-start;
}

.right-side{
  justify-content:flex-end;
}

.top-center{
  display:flex;
  justify-content:center;
  align-items:center;
}

.brand-pill{
  display:flex;
  align-items:center;
  gap:10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 8px 12px;
  min-width: 0;
  max-width: 100%;
}

.site-logo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  padding: 4px;
  flex-shrink: 0;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.brand-copy h1{
  margin:0;
  font-size:20px;
  line-height:1.1;
  color:#fff;
  font-weight:800;
  white-space:nowrap;
}

.brand-subtitle{
  font-size:11px;
  color:rgba(255,255,255,.82);
  margin-top:3px;
  font-weight:700;
}

.icon-btn.ghost-btn{
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.lang-switch{
  display:flex;
  gap:8px;
  align-items:center;
}

.lang-switch button{
  min-width:42px;
  height:40px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);
  color:#fff;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}

.lang-switch button.active-lang,
.lang-switch button:hover{
  background:rgb(148, 182, 245);
  color:#000000;
}

.search-box{
  display:none;
  padding: 10px 14px;
  background: transparent;
}

.search-shell{
  display:flex;
  align-items:center;
  gap:10px;
  background:#151a24;
  border:1px solid #2b3448;
  border-radius:16px;
  padding:12px 14px;
}

.search-shell i{
  color:#9aa4b2;
}

.search-box input{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  color:#fff;
  font-size:14px;
}

.search-box input::placeholder{
  color:#94a3b8;
}

@media (max-width: 768px){
  .top-bar{
  padding: 8px 14px;
  min-height: 68px;
}

.brand-pill{
  padding: 8px 14px;
  border-radius: 16px;
  min-width: 260px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.site-logo{
  width: 50px;
  height: 50px;
  border-radius: 14px;
  padding: 4px;
}

.brand-copy h1{
  font-size: 24px;
  font-weight: 800;
}

.brand-subtitle{
  font-size: 11px;
  letter-spacing: .2px;
  opacity: .9;
}

  .lang-switch button{
    min-width:36px;
    height:36px;
    border-radius:10px;
    font-size:12px;
  }

  .icon-btn.ghost-btn{
    width:36px;
    height:36px;
    border-radius:10px;
  }
}
.brand-pill{
  padding: 10px 16px !important;
  border-radius: 18px !important;
}

.site-logo{
  width: 46px !important;
  height: 46px !important;
}

.brand-copy h1{
  font-size: 22px !important;
}

.brand-subtitle{
  font-size: 12px !important;
}

.icon-btn.ghost-btn,
.lang-switch button{
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
}

/* ===== Kimo UI Refresh v3 ===== */
:root{
  --checkout-bg:#0c1220;
  --checkout-card:#121a2b;
  --checkout-soft:#182236;
  --checkout-line:rgba(255,255,255,.08);
  --checkout-text:#f4f7fb;
  --checkout-muted:#9fb0cd;
  --checkout-accent:#5d7cff;
  --checkout-accent-2:#d656b7;
  --checkout-success:#79e2a6;
  --checkout-warning:#ffd98a;
}

.checkout-shell{
  width:min(1080px,calc(100vw - 28px));
  height:min(94vh,900px);
  background:linear-gradient(180deg,#0d1424 0%, #0a101b 100%);
}

.checkout-topbar{
  padding:20px 22px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);
}

.checkout-brand h2{
  font-size:34px;
  letter-spacing:-.02em;
}

.checkout-brand p{
  font-size:13px;
  max-width:560px;
  margin-inline:auto;
}

.checkout-stepper{
  gap:12px;
  padding:14px 18px 10px;
}

.checkout-step-chip{
  background:#10192c;
  color:#b7c2d7;
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  min-height:52px;
}

.checkout-step-chip.active{
  background:linear-gradient(180deg,rgba(93,124,255,.18),rgba(214,86,183,.10));
  border-color:rgba(117,142,255,.9);
}

.checkout-stage-wrap{
  padding:20px 20px 8px;
  background:radial-gradient(circle at top, rgba(93,124,255,.08), transparent 25%);
}

.checkout-card{
  background:linear-gradient(180deg, rgba(18,26,43,.96), rgba(14,21,34,.96));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 12px 34px rgba(0,0,0,.16);
}

.card-header-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.card-header-line h3{
  font-size:24px;
  line-height:1.2;
}

.card-header-line p{
  font-size:13px;
  line-height:1.65;
  max-width:620px;
}

.form-group label{
  font-size:14px;
}

.form-group input,
.form-group select,
.form-group textarea{
  min-height:54px;
  background:#0b1120;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.form-group textarea{
  min-height:110px;
  resize:vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.schedule-input:focus{
  border-color:rgba(117,142,255,.95);
  box-shadow:0 0 0 3px rgba(93,124,255,.14);
}

.choice-card{
  background:#0d1526;
  padding:18px;
  border-radius:20px;
}

.choice-card:hover{
  border-color:rgba(117,142,255,.45);
}

.choice-copy strong{
  font-size:18px;
}

.choice-copy span{
  line-height:1.6;
}

.schedule-grid{
  margin-top:14px;
  display:grid;
  gap:14px;
}

.schedule-panel{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.schedule-meta{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.schedule-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  max-width:100%;
  padding:11px 16px;
  border-radius:999px;
  background:rgba(93,124,255,.14);
  border:1px solid rgba(93,124,255,.24);
  color:#eef3ff;
  font-weight:800;
  font-size:13px;
  line-height:1.5;
}

.schedule-hint{
  margin:0;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.08);
}

.schedule-input{
  appearance:none;
}

.summary-card{
  position:sticky;
  top:0;
}

.summary-line{
  font-size:14px;
  padding:12px 0;
}

.summary-line.total{
  font-size:22px;
}

.checkout-footer-bar{
  padding:18px 20px;
  background:linear-gradient(180deg,rgba(11,16,28,.96),rgba(7,11,19,.98));
}

.footer-total-box span{
  font-size:13px;
}

.footer-total-box strong{
  font-size:28px;
}

.footer-actions{
  gap:10px;
}

.footer-btn{
  min-height:54px;
  border-radius:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}

.footer-btn.primary{
  background:linear-gradient(90deg,var(--checkout-accent),var(--checkout-accent-2));
}

.footer-btn.ghost{
  background:#1a2741;
}

.footer-btn.danger{
  background:#421429;
  color:#ffe2eb;
}

.cart-row{
  grid-template-columns:86px 1fr auto;
  gap:16px;
  padding:14px 0;
  align-items:center;
}

.cart-thumb{
  width:86px;
  height:86px;
  border-radius:18px;
  background:#0b1120;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.cart-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:10px;
}

.cart-thumb .ph{
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
}

.cart-info{
  min-width:0;
}

.cart-info b{
  font-size:17px;
  line-height:1.55;
  margin-bottom:4px;
}

.cart-sub{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-top:6px;
}

.cart-sub span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#9fb0cd;
  font-size:13px;
}

.cart-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:#dce6f7;
  font-size:12px;
  font-weight:700;
}

.cart-side{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
}

.cart-controls{
  background:#0d1526;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:6px;
  gap:6px;
}

.qty-btn{
  width:36px;
  height:36px;
  border:none;
  border-radius:999px;
  background:linear-gradient(180deg,#24314f,#172034);
  color:#fff;
  font-size:18px;
}

.qty-num{
  min-width:26px;
  font-size:16px;
  color:#fff;
}

.cart-line-total{
  font-size:16px;
  color:#fff;
}

.cart-total{
  margin-top:18px;
  background:linear-gradient(180deg,#111b32,#0d1526);
}

.cart-min-note{
  font-size:13px;
}

.cart-min-note.warn{
  color:#fff2c6;
}

.empty{
  border:1px dashed rgba(255,255,255,.08);
  background:#0e1526;
  color:#b8c5da;
}

.bottom-bar{
  left:16px;
  right:16px;
  bottom:16px;
  border-radius:20px;
  overflow:hidden;
}

.cart-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  border:none;
  border-radius:22px;
  background:linear-gradient(90deg,var(--checkout-accent),var(--checkout-accent-2));
  padding:16px 18px;
  color:#fff;
  box-shadow:0 16px 30px rgba(24,33,63,.38);
}

.cart-main{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:900;
}

.cart-side{
  display:flex;
  align-items:center;
  gap:10px;
}

#cartTotal{
  font-weight:900;
}

#cartCount{
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(4px);
  padding:4px 10px;
}

@media (max-width:860px){
  .schedule-panel{grid-template-columns:1fr;}
  .cart-row{grid-template-columns:72px 1fr;}
  .cart-side{grid-column:1/-1;align-items:flex-start;}
  .cart-thumb{width:72px;height:72px;border-radius:16px;}
  .footer-actions{width:100%;}
  .footer-btn{flex:1 1 calc(50% - 10px);}
}

@media (max-width:520px){
  .checkout-shell{
    width:min(100%,calc(100vw - 12px));
    height:98vh;
    border-radius:22px;
  }
  .checkout-topbar{
    grid-template-columns:52px 1fr 52px;
    padding:14px 12px;
  }
  .checkout-close{
    font-size:13px;
    padding:10px 8px;
  }
  .checkout-brand h2{
    font-size:24px;
  }
  .checkout-brand p{
    font-size:11px;
  }
  .checkout-stepper{
    gap:8px;
    padding:10px 12px;
  }
  .checkout-step-chip{
    padding:10px 8px;
    min-height:46px;
    font-size:12px;
  }
  .checkout-stage-wrap{
    padding:14px 12px 8px;
  }
  .checkout-card{
    padding:14px;
    border-radius:18px;
  }
  .card-header-line h3{
    font-size:20px;
  }
  .schedule-badge{
    width:100%;
    justify-content:flex-start;
    border-radius:16px;
  }
  .footer-total-box strong{
    font-size:22px;
  }
  .footer-actions{
    flex-direction:column;
  }
  .footer-btn{
    width:100%;
  }
  .cart-row{
    grid-template-columns:1fr;
    gap:12px;
  }
  .cart-thumb{
    width:100%;
    height:120px;
  }
  .cart-side{
    width:100%;
    align-items:stretch;
  }
  .cart-controls{
    width:fit-content;
  }
  .cart-line-total{
    text-align:start;
  }
}


/* account integration */
.account-btn{display:inline-flex;text-decoration:none}
.account-btn.logged-in{background:linear-gradient(135deg,#5c7cff,#d45ad3);color:#fff;border-color:transparent}
.account-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font-weight:700;text-decoration:none}
.account-chip small{display:block;font-size:11px;opacity:.8;font-weight:600}
.account-chip strong{display:block;font-size:13px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auth-required-note{margin-top:10px;padding:12px 14px;border-radius:14px;background:rgba(93,124,255,.12);border:1px solid rgba(93,124,255,.25);color:#dfe7ff;font-weight:700}