/* KINTO MOBILE COMMERCE DESIGN SYSTEM V178
   Presentation only. Existing product/cart/order/invoice engines remain authoritative. */
:root{--kinto-app-bg:#062d25;--kinto-app-surface:#0a3a30;--kinto-app-gold:#e8bf55;--kinto-app-text:#f8f5e8;--kinto-app-muted:#b9ccc6;--kinto-app-radius:20px;--kinto-app-touch:48px}
.kinto-mobile-customer-summary,.kinto-drawer-account-summary{display:none}
@media(max-width:1024px){
  html{scroll-padding-bottom:88px}
  body{overflow-x:hidden}
  /* Mobile compositor: keep the premium glass look without repainting large live blur layers while scrolling. */
  .dashboard-header.kinto-customer-header,.info-card,.tabs-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .dashboard-header.kinto-customer-header{background:#063b32!important}
  .info-card{background:linear-gradient(145deg,#0b3b32,#082f29)!important}
  .tabs-nav{background:#062d27!important}
  .address-section{scroll-margin-bottom:110px;padding:9px 10px!important;margin-top:8px!important;border-radius:14px!important}
  .address-section .panel-head{min-height:26px!important;margin-bottom:6px!important;align-items:center!important}
  .address-section .panel-head h2{margin:0!important;font-size:12px!important;line-height:1.25!important}
  .address-section .panel-head .chip{font-size:8px!important;padding:3px 6px!important}
  .address-section .address-input,.address-section .profile-input{max-width:none!important;min-height:36px!important;padding:5px 8px!important;border-radius:9px!important;font-size:11px!important}
  .address-section:has(#userAddress){display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)!important;gap:5px!important}
  .address-section:has(#userAddress) .panel-head,.address-section:has(#userAddress)>div:last-child{grid-column:1/-1!important}
  .address-section #userAddress,.address-section #userGovernorate{width:100%!important;margin:0!important;min-height:34px!important;padding-block:5px!important;opacity:.88}
  .address-section>div:last-child{margin-top:2px!important;font-size:8px!important;line-height:1.3!important}
  .address-section:has(#userSecondaryPhone){display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;align-items:center!important}
  .address-section:has(#userSecondaryPhone) .panel-head,.address-section:has(#userSecondaryPhone)>div:last-child{grid-column:1/-1!important}
  #userSecondaryPhone{width:100%!important;margin:0!important;min-height:38px!important}
  #userSecondaryPhone + .btn-action{width:auto!important;min-width:92px!important;min-height:38px!important;margin:0!important;padding:6px 10px!important;border-radius:9px!important;font-size:9px!important;white-space:nowrap!important}
  .address-section:last-of-type{margin-bottom:calc(92px + env(safe-area-inset-bottom))!important}
  button,a,input,select{touch-action:manipulation}
  .mw-v55-portal-shell{margin-inline:10px!important;padding:16px!important;border-radius:24px!important}
  .mw-v55-portal-head h2{font-size:clamp(20px,5vw,28px)!important}
  .mw-v55-portals{gap:10px!important}
  .mw-v55-portal{min-height:150px!important;border-radius:20px!important}
  #localStoreProductsGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .local-v3-card{border-radius:18px!important}
  .local-v3-img-wrap{height:clamp(140px,31vw,210px)!important;padding:6px!important}
  .local-v3-body{padding:11px!important;min-height:0!important}
  .local-v3-name{font-size:14px!important;line-height:1.45!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .local-v3-desc{font-size:11px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .local-v3-local{font-size:17px!important}
  .local-v3-order{min-height:var(--kinto-app-touch)!important;margin-top:10px!important;border-radius:14px!important;font-size:12px!important}
  .mw-detail-modal{padding:0!important;align-items:flex-end!important}
  .mw-detail-panel{width:100%!important;max-width:none!important;max-height:94dvh!important;border-radius:26px 26px 0 0!important;padding:12px 12px calc(16px + env(safe-area-inset-bottom))!important}
  .mw-detail-head{position:sticky;top:0;z-index:5;margin:-12px -12px 8px!important;padding:10px 12px!important;background:rgba(6,45,37,.94)!important;color:#fff;border-bottom:1px solid rgba(232,191,85,.2);backdrop-filter:blur(14px)}
  .mw-detail-close{min-width:44px!important;height:44px!important;color:#fff!important}
  .mw-detail-grid{grid-template-columns:1fr!important;gap:10px!important}
  .mw-gallery-main{height:min(43dvh,380px)!important;border-radius:18px!important}
  .mw-gallery-thumbs{scroll-snap-type:x proximity}
  .mw-gallery-thumb{width:60px!important;height:54px!important;scroll-snap-align:start}
  .mw-detail-title{font-size:19px!important}
  .mw-detail-price{font-size:21px!important;margin:7px 0!important}
  .mw-detail-description-box{margin:8px 0 10px!important}
  .mw-option-btn{min-height:42px!important;padding:8px 14px!important}
  .mw-modal-qty button{min-width:42px!important;height:42px!important}
  .mw-modal-confirm{position:sticky!important;bottom:0!important;z-index:4;min-height:54px!important;border-radius:15px!important;box-shadow:0 12px 28px rgba(0,0,0,.28)!important}
  .kinto-product-modal{align-items:flex-end!important;padding:0!important}
  .kinto-product-dialog{width:100%!important;max-width:none!important;max-height:94dvh!important;border-radius:26px 26px 0 0!important}
  .kinto-product-layout{grid-template-columns:1fr!important}
  .kinto-product-media{min-height:260px!important;max-height:43dvh!important}
  .kinto-detail-add{min-height:54px!important}
  .kinto-local-cart-drawer{max-width:100vw!important}
  .kinto-local-cart-head{position:sticky;top:0;z-index:3}
  .kinto-local-cart-checkout{min-height:54px!important;border-radius:15px!important}

  .kinto-drawer-account-summary{display:grid!important;grid-column:1/-1!important;width:100%!important;grid-template-columns:1fr!important;gap:9px!important;margin-top:10px!important}
  .kinto-drawer-account-card{padding:12px!important;border:1px solid rgba(232,191,85,.20)!important;border-radius:15px!important;background:#08372f!important;color:#f8f5e8!important}
  .kinto-drawer-account-title{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:#e8bf55;font-size:12px}
  .kinto-drawer-reward-status{font-size:10px;line-height:1.55;color:#d8e4e0}
  .kinto-drawer-reward-status div{max-width:100%}
  .kinto-drawer-warehouse-address{font-size:10px;line-height:1.65;color:#d8e4e0}
  .kinto-drawer-account-action{width:100%;min-height:38px;margin-top:9px;border:1px solid rgba(232,191,85,.28);border-radius:11px;background:rgba(232,191,85,.12);color:#f4d778;font-size:10px;font-weight:900}
  .kinto-drawer-warehouse-trigger{width:100%!important;min-height:52px!important;display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:10px!important;text-align:right!important;color:#f4d778!important;font:inherit!important;cursor:pointer!important}
  .kinto-warehouse-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;background:rgba(1,18,14,.72)}
  .kinto-warehouse-dialog{position:relative;width:min(92vw,420px);padding:20px;border:1px solid rgba(232,191,85,.34);border-radius:18px;background:#08372f;color:#f8f5e8;box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:right}
  .kinto-warehouse-dialog h3{margin:0 0 12px;color:#e8bf55;font-size:16px}
  .kinto-warehouse-dialog p{margin:0;white-space:pre-wrap;line-height:1.8;font-size:13px}
  .kinto-warehouse-close{position:absolute;left:10px;top:8px;width:34px;height:34px;border:0;background:transparent;color:#f8f5e8;font-size:24px}
  #activeOrders tbody tr,#orderHistory tbody tr{cursor:pointer}


  /* Customer home: keep primary orders high on screen; secondary account information lives in Account drawer. */
  .summary-grid{display:none!important}
  .kinto-mobile-customer-summary{display:flex!important;align-items:center!important;gap:10px!important;margin:8px 0 12px!important;padding:10px 12px!important;border:1px solid rgba(232,191,85,.22)!important;border-radius:16px!important;background:#08372f!important;box-shadow:0 6px 16px rgba(0,0,0,.12)!important}
  .kinto-mobile-summary-logo{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border:1px solid rgba(246,220,131,.42);border-radius:12px;overflow:hidden;background:#074437;box-shadow:0 5px 14px rgba(0,0,0,.18)}
  .kinto-mobile-summary-logo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
  .kinto-mobile-customer-summary-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(232,191,85,.12);color:#e8bf55;font-size:18px}
  .kinto-mobile-customer-summary-copy{min-width:0;display:grid;gap:1px;flex:1;text-align:right}
  .kinto-mobile-customer-summary-copy span,.kinto-mobile-customer-summary-copy small{font-size:9px;color:#b9ccc6}
  .kinto-mobile-customer-summary-copy strong{font-size:13px;color:#f8f5e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kinto-mobile-customer-summary-copy small b{color:#e8bf55}
  .kinto-mobile-customer-summary>button{min-height:36px!important;padding:0 10px!important;border:1px solid rgba(232,191,85,.28)!important;border-radius:11px!important;background:rgba(232,191,85,.10)!important;color:#f4d778!important;font-size:9px!important;font-weight:900!important;white-space:nowrap!important}

  /* Compact customer orders: existing data/actions, refined Mobile/Tablet presentation only. */
  #activeOrders .table-wrap,#orderHistory .table-wrap{border:0!important;background:transparent!important}
  #activeOrders tbody,#orderHistory tbody{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;padding:4px!important}
  #activeOrders tbody tr[hidden],#orderHistory tbody tr[hidden]{display:none!important}
  #activeOrders tbody tr,#orderHistory tbody tr{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"code" "image" "status" "decision" "details"!important;gap:8px!important;align-items:center!important;padding:12px!important;border:1px solid rgba(232,191,85,.20)!important;border-radius:18px!important;background:#08372f!important;box-shadow:0 7px 18px rgba(0,0,0,.14)!important;overflow:hidden!important;contain:layout paint}
  #activeOrders tbody td,#orderHistory tbody td{display:none!important}
  #activeOrders tbody td::before,#orderHistory tbody td::before{content:none!important}
  #activeOrders tbody td:nth-child(1),#orderHistory tbody td:nth-child(1){display:block!important;grid-area:code!important;padding:0!important;border:0!important;background:transparent!important;text-align:center!important;font-size:14px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  #activeOrders tbody td:nth-child(1) b,#orderHistory tbody td:nth-child(1) b{display:block!important;white-space:nowrap!important;font-size:15px!important;letter-spacing:.2px!important}
  #activeOrders tbody td:nth-child(1) .siparis-no,#activeOrders tbody td:nth-child(1) .barcode-svg,#orderHistory tbody td:nth-child(1) .siparis-no{display:none!important}
  #activeOrders tbody td:nth-child(2),#orderHistory tbody td:nth-child(2){display:flex!important;grid-area:image!important;padding:0!important;border:0!important;background:transparent!important;align-items:center!important;justify-content:center!important}
  #activeOrders .order-thumb,#orderHistory .order-thumb{width:88px!important;height:88px!important;border-radius:15px!important;padding:3px!important}
  #activeOrders tbody td:nth-child(5),#orderHistory tbody td:nth-child(5){display:block!important;grid-area:status!important;padding:0!important;border:0!important;background:transparent!important;text-align:center!important}
  #activeOrders .status-pill,#orderHistory .status-pill{display:inline-flex!important;max-width:100%!important;min-height:32px!important;align-items:center!important;justify-content:center!important;font-size:10px!important;line-height:1.35!important;padding:6px 10px!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}
  #activeOrders tbody td:nth-child(9){display:none!important;grid-area:decision!important;padding:0!important;border:0!important;background:transparent!important}
  #activeOrders tbody td:nth-child(9).kinto-has-customer-decision{display:block!important}
  #activeOrders tbody td:nth-child(9) .decision-box{display:flex!important;gap:6px!important;justify-content:center!important;flex-wrap:wrap!important}
  #activeOrders tbody td:nth-child(9) .decision-box .btn-approve,#activeOrders tbody td:nth-child(9) .decision-box .btn-cancel{min-height:38px!important;flex:1 1 100px!important;font-size:10px!important;padding:7px!important}
  #activeOrders tbody td:nth-child(7){display:block!important;grid-area:details!important;padding:0!important;border:0!important;background:transparent!important}
  #orderHistory tbody td:nth-child(8){display:block!important;grid-area:details!important;padding:0!important;border:0!important;background:transparent!important}
  #activeOrders .btn-details,#orderHistory .btn-details{width:100%!important;min-height:40px!important;font-size:11px!important}
  #activeOrders td.empty-state,#orderHistory td.empty-state{display:block!important;grid-column:1/-1!important;padding:24px!important}
  @media(max-width:390px){
    #activeOrders tbody,#orderHistory tbody{grid-template-columns:1fr!important}
    #activeOrders tbody tr,#orderHistory tbody tr{grid-template-columns:92px minmax(0,1fr)!important;grid-template-areas:"image code" "image status" "decision decision" "details details"!important}
  }

}
@media(max-width:560px){
  #localStoreProductsGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .local-v3-img-wrap{height:138px!important}
  .local-v3-body{padding:9px!important}
  .local-v3-price{padding:8px!important;margin-top:8px!important}
  .local-v3-note{display:none!important}
  .local-v3-order{font-size:11px!important}
}
@media(max-width:360px){#localStoreProductsGrid{grid-template-columns:1fr!important}.local-v3-img-wrap{height:210px!important}}