:root{
  --cream:#fdf8f0;
  --cream-2:#f5ede0;
  --black:#171412;
  --charcoal:#27221e;
  --muted:#746b63;
  --line:rgba(26,26,26,.09);
  --gold:#d4a574;
  --gold-2:#c8956c;
  --whatsapp:#25d366;
  --red:#da291c;
  --yellow:#ffc72c;
  --white:#fff;
  --shadow:0 24px 70px rgba(42,27,14,.14);
  --soft-shadow:0 14px 40px rgba(42,27,14,.09);
  --radius:24px;
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:linear-gradient(180deg,var(--cream),#fffaf4);color:var(--charcoal);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.page-loading{overflow:auto}
a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{border:0;cursor:pointer}img{display:block;max-width:100%}.ordering-header,.site-footer,.seo-faq{display:none!important}
.site-loader{display:none!important}.page-shell{min-height:100vh}.webapp-back-button{position:fixed;left:18px;top:18px;z-index:2000;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;background:#151210;border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(0,0,0,.28);backdrop-filter:blur(14px);font-weight:900;color:#fff}
.restaurant-app-hero{position:relative;padding:0 18px 44px;isolation:isolate}.restaurant-cover{height:280px;margin:0 -18px;position:relative;overflow:hidden;background:linear-gradient(135deg,#332018,#8b4b2e)}.restaurant-cover img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04)}.restaurant-cover-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.20) 52%,rgba(253,248,240,.94) 100%)}.restaurant-info-card{position:relative;z-index:2;width:min(1040px,calc(100% - 16px));margin:-90px auto 0;background:linear-gradient(145deg,rgba(24,20,17,.96),rgba(16,14,13,.98));border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:24px 28px 26px 190px;box-shadow:0 34px 90px rgba(15,10,6,.28),0 0 0 1px rgba(212,165,116,.08) inset;color:#fff;min-height:182px}.restaurant-logo-large{position:absolute;left:28px;top:-84px;width:190px;height:190px;border-radius:50%;display:grid;place-items:center;background:#e30613;border:4px solid #15100d;box-shadow:0 24px 50px rgba(0,0,0,.35),0 0 0 2px rgba(255,199,44,.35) inset;overflow:hidden}.restaurant-logo-large img{width:100%;height:100%;object-fit:contain;padding:16px}.restaurant-status{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(37,211,102,.13);color:#8ff0b0;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}.restaurant-status i{width:9px;height:9px;border-radius:50%;background:var(--whatsapp);box-shadow:0 0 0 6px rgba(37,211,102,.12)}.restaurant-main-info h1{font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.05;color:#fff;margin-bottom:4px}.restaurant-address{color:rgba(255,255,255,.65);font-size:1rem}.restaurant-price{margin-top:8px;color:rgba(255,255,255,.65)}.restaurant-price strong{color:#ff9d45}.restaurant-meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:20px 0 18px}.restaurant-meta-item{border-radius:18px;padding:13px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);text-align:center}.restaurant-meta-item span{display:block;color:#ff8a24;font-size:1.15rem;margin-bottom:3px}.restaurant-meta-item strong{display:block;color:#fff;font-size:.95rem}.restaurant-meta-item small{color:rgba(255,255,255,.5)}.restaurant-actions{display:flex;gap:12px;flex-wrap:wrap}.primary-btn,.ghost-btn{min-height:48px;padding:0 20px;border-radius:16px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}.primary-btn{background:linear-gradient(135deg,var(--black),#2c241e);color:white;box-shadow:0 18px 36px rgba(0,0,0,.18)}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 22px 44px rgba(0,0,0,.24)}.ghost-btn{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14)}.ghost-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.13)}
.menu-area{max-width:1180px;margin:0 auto;padding:22px 20px 100px}.menu-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.eyebrow,.section-kicker{display:inline-flex;margin-bottom:8px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;font-size:.73rem;color:var(--gold-2)}.menu-heading h2,.most-ordered h3,.section-title{font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;color:var(--black)}.menu-heading p{max-width:470px;color:var(--muted)}.menu-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;padding:14px;border-radius:24px;background:rgba(255,255,255,.75);box-shadow:var(--soft-shadow);border:1px solid rgba(255,255,255,.8)}.menu-search-shell{position:relative;flex:1}.menu-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted);width:20px}.menu-search-icon svg{width:20px;height:20px;stroke:currentColor;stroke-width:2}.menu-search-shell input{width:100%;height:54px;border:1px solid var(--line);border-radius:18px;padding:0 82px 0 46px;background:#fff;color:var(--black);outline:0}.menu-search-shell input:focus{border-color:rgba(200,149,108,.55);box-shadow:0 0 0 4px rgba(200,149,108,.12)}.menu-search-clear{position:absolute;right:8px;top:8px;height:38px;padding:0 14px;border-radius:12px;background:var(--cream-2);color:var(--muted);font-weight:800;opacity:0;pointer-events:none}.menu-search-clear.visible{opacity:1;pointer-events:auto}.menu-search-meta{display:grid;gap:2px;min-width:160px;color:var(--muted);font-size:.84rem}.menu-search-meta strong{color:var(--black)}.most-ordered{margin-bottom:36px}.most-ordered-head,.section-header{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}.most-ordered-head p{color:var(--muted)}.most-ordered-grid,.food-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.menu-section{margin:38px 0}.section-count{font-weight:900;color:var(--muted);background:#fff;padding:8px 12px;border-radius:999px;border:1px solid var(--line)}.food-card{position:relative;background:rgba(255,255,255,.82);border:1px solid rgba(26,26,26,.06);border-radius:24px;overflow:hidden;box-shadow:0 14px 34px rgba(42,27,14,.08);transition:transform .42s ease,box-shadow .42s ease,border-color .42s ease;animation:cardIn .45s ease both;cursor:pointer}.food-card:hover{transform:translateY(-7px);box-shadow:0 28px 64px rgba(42,27,14,.15);border-color:rgba(200,149,108,.22)}@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.food-badge{position:absolute;left:12px;top:12px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.9);color:#7a3b00;font-weight:900;font-size:.72rem;box-shadow:0 8px 18px rgba(42,27,14,.12)}.card-media{height:170px;background:linear-gradient(135deg,#fff2d1,#f5d09e);display:grid;place-items:center;position:relative;overflow:hidden}.card-media img{width:100%;height:100%;object-fit:contain;padding:18px;transition:transform 1.4s ease}.food-card:hover .card-media img{transform:scale(1.06)}.card-media.image-missing::before{content:'M';font-size:4rem;font-weight:900;color:#ffc72c;background:#da291c;width:92px;height:92px;border-radius:24px;display:grid;place-items:center;box-shadow:0 16px 30px rgba(218,41,28,.18)}.card-content{padding:16px}.card-content h3{font-size:1.02rem;line-height:1.25;color:var(--black);margin-bottom:6px}.card-content p{font-size:.86rem;color:var(--muted);min-height:42px}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.price{font-weight:900;color:var(--black)}.quick-add{width:40px;height:40px;border-radius:14px;background:var(--black);color:#fff;font-size:1.2rem;font-weight:900;box-shadow:0 12px 24px rgba(0,0,0,.16)}.quick-add.is-added{background:var(--whatsapp)}.menu-empty-state{padding:36px;text-align:center;border-radius:24px;background:#fff;color:var(--muted);box-shadow:var(--soft-shadow)}
.cart-dock{position:fixed;right:18px;bottom:18px;z-index:1100;min-height:58px;padding:0 18px;border-radius:999px;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--black),#2f251e);color:#fff;box-shadow:0 24px 60px rgba(0,0,0,.24);font-weight:900}.floating-cart-icon-wrap{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1)}.floating-cart-icon{width:22px;height:22px;stroke:#fff;stroke-width:1.9}.floating-cart-count{display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:var(--whatsapp);color:#0b3d22;font-size:.8rem}.overlay{position:fixed;inset:0;background:rgba(17,13,10,.48);backdrop-filter:blur(6px);z-index:1200}.overlay[hidden]{display:none}.cart-panel{position:fixed;right:0;top:0;bottom:0;width:min(460px,100%);background:var(--cream);z-index:1300;box-shadow:-30px 0 80px rgba(0,0,0,.22);transform:translateX(105%);transition:transform .35s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column}.cart-panel.active,.cart-panel[aria-hidden="false"]{transform:translateX(0)}.cart-handle{display:none}.cart-header{display:flex;align-items:center;justify-content:space-between;padding:24px 22px 16px;border-bottom:1px solid var(--line)}.cart-header h2{font-size:1.55rem}.icon-btn{width:42px;height:42px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:1.6rem;color:var(--black)}.checkout-progress{display:flex;align-items:center;gap:10px;padding:16px 22px}.checkout-progress i{height:2px;background:var(--line);flex:1}.checkout-step{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:900}.checkout-step span{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:#fff;border:1px solid var(--line)}.checkout-step.active{color:var(--black)}.checkout-step.active span{background:var(--black);color:#fff}.checkout-page{display:flex;flex-direction:column;min-height:0;flex:1}.checkout-page[hidden]{display:none}.cart-body,.details-body{padding:18px 22px;overflow:auto;flex:1}.empty-cart{text-align:center;padding:44px 12px;color:var(--muted)}.empty-emoji{font-size:3rem}.empty-cart h3{color:var(--black);margin:8px 0}.cart-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:18px;background:#fff;margin-bottom:10px;border:1px solid var(--line)}.cart-item img{width:64px;height:64px;object-fit:contain;background:#fff3df;border-radius:14px}.cart-item-title{font-weight:900;color:var(--black)}.cart-item-meta{font-size:.82rem;color:var(--muted)}.cart-item-actions{display:flex;align-items:center;gap:6px}.cart-item-actions button{width:30px;height:30px;border-radius:10px;background:var(--cream-2);font-weight:900}.cart-footer{padding:16px 22px 22px;border-top:1px solid var(--line);background:rgba(255,255,255,.52)}.cart-total-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.cart-total-row strong{font-size:1.35rem;color:var(--black)}.checkout-notes{display:grid;gap:8px;color:var(--muted);font-size:.9rem;margin:12px 0}.checkout-actions{display:flex;gap:10px}.checkout-btn{width:100%}.customer-fields{display:grid;gap:16px}.customer-fields label{display:grid;gap:7px;font-weight:900;color:var(--black)}.customer-fields input,.customer-fields textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px 15px;outline:0}.customer-fields input:focus,.customer-fields textarea:focus{border-color:rgba(200,149,108,.58);box-shadow:0 0 0 4px rgba(200,149,108,.12)}.field-helper{font-weight:500;color:var(--muted)}.modal{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:22px;background:rgba(17,13,10,.5);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s ease}.modal.active,.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}.modal-card{width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--cream);border-radius:28px;box-shadow:0 36px 100px rgba(0,0,0,.28);position:relative}.modal-close{position:absolute;right:14px;top:14px;z-index:2}.modal-media{height:240px;background:linear-gradient(135deg,#fff0cd,#f7c984);display:grid;place-items:center}.modal-media img{height:100%;width:100%;object-fit:contain;padding:28px}.modal-media.image-missing::before{content:'M';font-size:5rem;font-weight:900;color:#ffc72c;background:#da291c;width:130px;height:130px;border-radius:34px;display:grid;place-items:center}.modal-content{padding:24px}.modal-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#fff1d6;color:#7a3b00;font-weight:900;font-size:.78rem;margin-bottom:10px}.modal-content h2{font-size:1.8rem;color:var(--black);line-height:1.12}.modal-content p{color:var(--muted);margin-top:6px}.option-block{margin-top:18px}.option-title{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.option-title strong{color:var(--black)}.option-title span{color:var(--muted)}.option-grid,.addons-list,.required-options{display:grid;gap:10px}.option-card,.addon-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);text-align:left}.option-card.active,.addon-row.active{border-color:rgba(37,211,102,.45);box-shadow:0 0 0 4px rgba(37,211,102,.1)}.sauce-qty-card{display:grid;gap:10px}.sauce-qty-actions{display:flex;align-items:center;gap:8px}.sauce-qty-actions button{width:32px;height:32px;border-radius:10px;background:var(--cream-2);font-weight:900}.item-note-input{width:100%;border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px;resize:vertical}.modal-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;position:sticky;bottom:0;margin:24px -24px -24px;padding:16px 24px;background:rgba(253,248,240,.88);backdrop-filter:blur(16px);border-top:1px solid var(--line)}.qty-selector{display:flex;align-items:center;gap:10px}.qty-selector button{width:42px;height:42px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:1.2rem;font-weight:900}.add-order-btn{flex:1}.toast-stack{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:999999;display:grid;gap:10px;pointer-events:none}.toast{padding:13px 16px;border-radius:16px;background:#15120f;color:#fff;box-shadow:0 18px 44px rgba(0,0,0,.25);font-weight:800}.toast.leaving{animation:toastOut .35s ease forwards}@keyframes toastOut{to{opacity:0;transform:translateY(-10px)}}.checkout-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.restaurant-info-card{padding:92px 18px 22px;margin-top:-82px}.restaurant-logo-large{width:140px;height:140px;left:50%;transform:translateX(-50%);top:-74px}.restaurant-main-info{text-align:center}.restaurant-meta-grid{grid-template-columns:1fr 1fr}.restaurant-actions{justify-content:center}.menu-heading,.most-ordered-head,.section-header,.menu-tools{display:grid}.most-ordered-grid,.food-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-search-meta{display:none}.webapp-back-button{left:12px;top:12px;height:40px;padding:0 13px}.restaurant-cover{height:245px}}
@media(max-width:560px){.restaurant-app-hero{padding-inline:12px}.restaurant-cover{margin:0 -12px;height:220px}.restaurant-info-card{width:100%;border-radius:24px;padding:78px 14px 18px}.restaurant-logo-large{width:118px;height:118px;top:-62px;left:34px;transform:none}.restaurant-meta-grid{gap:8px}.restaurant-meta-item{padding:10px 6px}.restaurant-meta-item strong{font-size:.82rem}.restaurant-meta-item small{font-size:.72rem}.restaurant-actions{display:grid}.menu-area{padding:18px 12px 90px}.most-ordered-grid,.food-grid{grid-template-columns:1fr;gap:14px}.card-media{height:160px}.cart-panel{width:100%}.cart-dock{left:12px;right:12px;justify-content:center}.floating-cart-hint{display:inline}.modal{padding:10px}.modal-card{border-radius:24px}.modal-media{height:200px}.modal-bottom{display:grid}.checkout-actions{display:grid}.primary-btn,.ghost-btn{width:100%}}


/* Morocco Delivery integration: only restaurant header/top area + compatibility controls */
.webapp-compat-controls{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;opacity:0!important;pointer-events:none!important}
.restaurant-header-premium{padding:0 18px 54px;background:linear-gradient(180deg,var(--cream),#fffaf4);}
.restaurant-header-premium .restaurant-cover{height:330px;border-bottom-left-radius:32px;border-bottom-right-radius:32px;box-shadow:0 26px 70px rgba(42,27,14,.12);}
.restaurant-header-premium .restaurant-cover img{filter:saturate(1.08) contrast(1.03);}
.restaurant-header-premium .restaurant-cover-overlay{background:linear-gradient(180deg,rgba(20,15,12,.10),rgba(20,15,12,.26) 55%,rgba(253,248,240,.96) 100%);}
.restaurant-info-premium{width:min(1040px,calc(100% - 22px));margin:-98px auto 0;background:linear-gradient(145deg,rgba(24,20,17,.97),rgba(15,13,12,.98));border:1px solid rgba(255,255,255,.10);box-shadow:0 34px 90px rgba(15,10,6,.30),0 0 0 1px rgba(212,165,116,.10) inset;border-radius:30px;}
.restaurant-info-premium:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 16% 18%,rgba(212,165,116,.18),transparent 28%),linear-gradient(90deg,rgba(255,255,255,.05),transparent 40%);}
.restaurant-info-premium .restaurant-logo-large{box-shadow:0 24px 54px rgba(0,0,0,.36),0 0 0 7px rgba(253,248,240,.10),0 0 0 2px rgba(212,165,116,.35) inset;}
.restaurant-info-premium .restaurant-main-info,.restaurant-info-premium .restaurant-meta-grid{position:relative;z-index:1;}
.restaurant-info-premium .restaurant-meta-item{transition:transform .35s ease,background .35s ease,border-color .35s ease;}
.restaurant-info-premium .restaurant-meta-item:hover{transform:translateY(-2px);background:rgba(255,255,255,.085);border-color:rgba(212,165,116,.18);}
@media(max-width:900px){.restaurant-header-premium .restaurant-cover{height:270px;border-radius:0 0 26px 26px}.restaurant-info-premium{margin-top:-82px}}
@media(max-width:560px){.restaurant-header-premium{padding-inline:12px}.restaurant-header-premium .restaurant-cover{height:230px;margin:0 -12px}.restaurant-info-premium{width:100%;margin-top:-72px}}

/* ------------------------------------------------
   Product image positioning fix
   - centers item images in menu cards
   - keeps modal product image locked inside the top media area
   ------------------------------------------------ */
.food-card .card-media{
  height: 178px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: linear-gradient(135deg,#fff0cd 0%,#f8d199 100%) !important;
}
.food-card .card-media img{
  width: 92% !important;
  height: 92% !important;
  max-width: 92% !important;
  max-height: 92% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: auto !important;
  display: block !important;
  transform: translateY(-4px) scale(1.02);
  transition: transform 1.35s ease !important;
}
.food-card:hover .card-media img{
  transform: translateY(-6px) scale(1.07) !important;
}

.modal-card{
  overflow: auto !important;
  overscroll-behavior: contain;
}
.modal-media{
  height: clamp(220px, 34vh, 300px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  background: linear-gradient(135deg,#fff0cd 0%,#f7c984 100%) !important;
}
.modal-media img{
  position: relative !important;
  z-index: 1 !important;
  width: 88% !important;
  height: 88% !important;
  max-width: 88% !important;
  max-height: 88% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 0 !important;
  margin: auto !important;
  display: block !important;
  transform: none !important;
}
.modal-content{
  position: relative !important;
  z-index: 2 !important;
  background: var(--cream) !important;
}

@media(max-width:560px){
  .food-card .card-media{
    height: 170px !important;
  }
  .food-card .card-media img{
    width: 90% !important;
    height: 90% !important;
    max-width: 90% !important;
    max-height: 90% !important;
  }
  .modal-media{
    height: 230px !important;
  }
  .modal-media img{
    width: 92% !important;
    height: 92% !important;
    max-width: 92% !important;
    max-height: 92% !important;
  }
}


/* ------------------------------------------------
   McDonald's Webapp Polish Update
   - premium fake restaurant cover
   - perfectly fitted circular restaurant logo
   - cleaner available badge
   - stronger selected option states
   - improved cart item controls
   ------------------------------------------------ */

/* Header / restaurant card */
.restaurant-header-premium{
  background:
    radial-gradient(circle at 50% 0%, rgba(212,165,116,.16), transparent 38%),
    linear-gradient(180deg, #fdf8f0 0%, #fffaf4 100%) !important;
}
.restaurant-header-premium .restaurant-cover{
  height: clamp(255px, 28vw, 390px) !important;
  border-bottom-left-radius: 34px !important;
  border-bottom-right-radius: 34px !important;
  box-shadow: 0 28px 85px rgba(42,27,14,.13) !important;
}
.restaurant-header-premium .restaurant-cover img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  filter: saturate(1.04) contrast(1.02) !important;
}
.restaurant-header-premium .restaurant-cover-overlay{
  background:
    linear-gradient(180deg, rgba(16,11,8,.22) 0%, rgba(16,11,8,.12) 38%, rgba(253,248,240,.92) 100%) !important;
}
.restaurant-info-premium{
  background:
    radial-gradient(circle at 18% 10%, rgba(200,149,108,.18), transparent 28%),
    linear-gradient(145deg, rgba(31,25,20,.97), rgba(17,14,12,.98)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    0 36px 95px rgba(42,27,14,.30),
    0 0 0 1px rgba(212,165,116,.12) inset !important;
}
.restaurant-info-premium .restaurant-logo-large{
  width: clamp(128px, 12vw, 178px) !important;
  height: clamp(128px, 12vw, 178px) !important;
  left: 28px !important;
  top: calc(-1 * clamp(62px, 5.8vw, 84px)) !important;
  padding: 0 !important;
  background: #e60012 !important;
  border: 5px solid #17110d !important;
  box-shadow:
    0 24px 54px rgba(0,0,0,.34),
    0 0 0 8px rgba(253,248,240,.16),
    0 0 0 2px rgba(255,199,44,.32) inset !important;
}
.restaurant-info-premium .restaurant-logo-large img,
.restaurant-logo-large img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 18% !important;
  border-radius: 50% !important;
  display:block !important;
}
.restaurant-price{
  display:none !important;
}
.restaurant-status{
  background: linear-gradient(135deg, rgba(37,211,102,.24), rgba(37,211,102,.10)) !important;
  border: 1px solid rgba(37,211,102,.28) !important;
  color: #aaffc5 !important;
  box-shadow: 0 10px 26px rgba(37,211,102,.10) !important;
}
.restaurant-status i{
  position: relative !important;
  width: 18px !important;
  height: 18px !important;
  display:inline-grid !important;
  place-items:center !important;
  background: var(--whatsapp) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 6px rgba(37,211,102,.14) !important;
}
.restaurant-status i::after{
  content:"✓";
  color:#073b1a;
  font-size:.72rem;
  line-height:1;
  font-weight:1000;
}
.restaurant-meta-item{
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.04)) !important;
  border-color: rgba(255,255,255,.11) !important;
}

/* Strong selected option state */
.option-card,
.addon-row{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease !important;
}
.option-card:hover,
.addon-row:hover{
  transform: translateY(-1px);
  border-color: rgba(200,149,108,.36) !important;
  box-shadow: 0 12px 26px rgba(42,27,14,.08) !important;
}
.option-card.active,
.addon-row.active{
  background: linear-gradient(135deg, #1f1a16 0%, #2d241d 55%, #3b2d20 100%) !important;
  color: #fff !important;
  border-color: rgba(212,165,116,.62) !important;
  box-shadow:
    0 14px 34px rgba(31,26,22,.22),
    0 0 0 4px rgba(212,165,116,.16) !important;
}
.option-card.active strong,
.option-card.active span,
.addon-row.active .addon-name,
.addon-row.active .addon-price{
  color:#fff !important;
}
.option-card.active::after,
.addon-row.active::after{
  content:"Selected";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background: var(--whatsapp);
  color:#073b1a;
  font-size:.72rem;
  font-weight:1000;
  margin-left:auto;
}
.sauce-qty-card.active::after{
  content:"";
  display:none;
}
.sauce-qty-card.active{
  background: linear-gradient(135deg, #fff5e6, #eafff1) !important;
  color: var(--black) !important;
  border-color: rgba(37,211,102,.45) !important;
  box-shadow: 0 0 0 4px rgba(37,211,102,.12), 0 14px 28px rgba(42,27,14,.08) !important;
}
.sauce-qty-card.active strong{
  color: var(--black) !important;
}
.sauce-qty-badge{
  background: var(--whatsapp) !important;
  color:#073b1a !important;
  border-radius:999px !important;
  padding: 2px 9px !important;
  font-weight:1000 !important;
}
.sauce-qty-btn{
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.sauce-qty-btn:not(:disabled):hover{
  transform: translateY(-1px);
  background:#1f1a16 !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(0,0,0,.15);
}

/* Improved cart items and controls */
.cart-item{
  grid-template-columns: 72px minmax(0,1fr) !important;
  align-items:start !important;
  gap:14px !important;
  padding:16px !important;
  border-radius:22px !important;
  background: linear-gradient(145deg, #fff, #fffaf4) !important;
  border:1px solid rgba(42,27,14,.08) !important;
  box-shadow:0 14px 34px rgba(42,27,14,.07) !important;
}
.cart-thumb,
.cart-item img.cart-thumb{
  width:72px !important;
  height:72px !important;
  border-radius:18px !important;
  object-fit:contain !important;
  background:linear-gradient(135deg,#fff1d1,#f9d89b) !important;
  padding:6px !important;
  border:1px solid rgba(200,149,108,.16) !important;
}
.cart-item-main{
  min-width:0 !important;
}
.cart-item-top{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:6px !important;
}
.cart-item-title{
  font-size:1.02rem !important;
  line-height:1.18 !important;
  color:var(--black) !important;
}
.cart-item-price{
  color:#1f1a16 !important;
  white-space:nowrap !important;
  font-size:.98rem !important;
}
.cart-meta{
  color: #6f6258 !important;
  line-height:1.45 !important;
  font-size:.92rem !important;
  margin:6px 0 12px !important;
}
.cart-meta strong{
  color:#2a211b !important;
}
.cart-controls{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
.mini-qty{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:5px !important;
  border-radius:16px !important;
  background:#f7efe4 !important;
  border:1px solid rgba(42,27,14,.08) !important;
}
.mini-qty button{
  width:34px !important;
  height:34px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
  background:#fff !important;
  border:1px solid rgba(42,27,14,.08) !important;
  color:var(--black) !important;
  font-size:1.05rem !important;
  font-weight:1000 !important;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease !important;
}
.mini-qty button:hover{
  transform:translateY(-1px);
  background:var(--black) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(0,0,0,.14) !important;
}
.mini-qty strong{
  min-width:22px !important;
  text-align:center !important;
  color:var(--black) !important;
  font-size:1rem !important;
}
.text-btn{
  min-height:38px !important;
  padding:0 13px !important;
  border-radius:13px !important;
  background:#fff !important;
  border:1px solid rgba(42,27,14,.10) !important;
  color:#3b3028 !important;
  font-weight:900 !important;
  box-shadow:0 8px 18px rgba(42,27,14,.05) !important;
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease !important;
}
.text-btn:hover{
  transform:translateY(-1px);
  background:#1f1a16 !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(42,27,14,.14) !important;
}
.text-btn.remove{
  color:#b3261e !important;
  background:#fff5f2 !important;
  border-color:rgba(179,38,30,.16) !important;
}
.text-btn.remove:hover{
  background:#b3261e !important;
  color:#fff !important;
}

/* Modal option section polish */
.option-section-card{
  border-radius:22px !important;
  padding:14px !important;
  background:rgba(255,255,255,.50) !important;
  border:1px solid rgba(42,27,14,.06) !important;
}
.add-order-btn,
.checkout-btn{
  background:linear-gradient(135deg, #1f1a16, #30261f) !important;
  box-shadow:0 18px 36px rgba(31,26,22,.18) !important;
}
.add-order-btn:hover,
.checkout-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 50px rgba(31,26,22,.24) !important;
}
.qty-selector button{
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease !important;
}
.qty-selector button:hover{
  transform:translateY(-1px);
  background:#1f1a16 !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(31,26,22,.14) !important;
}

@media(max-width:760px){
  .restaurant-info-card{
    padding:96px 18px 22px !important;
    text-align:left !important;
    min-height:auto !important;
  }
  .restaurant-info-premium .restaurant-logo-large{
    left:50% !important;
    top:-74px !important;
    transform:translateX(-50%) !important;
    width:142px !important;
    height:142px !important;
  }
  .restaurant-main-info h1{
    text-align:center;
  }
  .restaurant-address{
    text-align:center;
  }
  .restaurant-status{
    margin-inline:auto;
  }
  .restaurant-meta-grid{
    grid-template-columns:1fr !important;
  }
  .cart-item{
    grid-template-columns:60px 1fr !important;
    padding:14px !important;
  }
  .cart-thumb,
  .cart-item img.cart-thumb{
    width:60px !important;
    height:60px !important;
  }
  .cart-controls{
    gap:7px !important;
  }
}

/* ------------------------------------------------
   Fixed quick-add button position in every product card
   ------------------------------------------------ */
.most-ordered-grid,
.food-grid{
  align-items: stretch !important;
}
.food-card{
  height: 100% !important;
  min-height: 376px !important;
  display: flex !important;
  flex-direction: column !important;
}
.food-card .card-media{
  flex: 0 0 auto !important;
}
.food-card .card-content{
  position: relative !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px 18px 76px !important;
}
.food-card .card-content h3{
  margin-bottom: 8px !important;
}
.food-card .card-content p{
  min-height: 0 !important;
  margin-bottom: 0 !important;
}
.food-card .card-bottom{
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  height: 46px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  pointer-events: none;
}
.food-card .card-bottom .price{
  align-self: center !important;
}
.food-card .quick-add{
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: auto;
}

@media(max-width: 560px){
  .food-card{
    min-height: 348px !important;
  }
  .food-card .card-content{
    padding: 16px 16px 72px !important;
  }
  .food-card .card-bottom{
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
  }
}


/* ------------------------------------------------
   McDonald's header/logo/background polish update
   ------------------------------------------------ */
.restaurant-header-premium .restaurant-cover,
.restaurant-cover {
  background:
    linear-gradient(135deg, rgba(31,22,16,.55), rgba(200,149,108,.18)),
    url("assets/mcdonalds-cover.webp") center center / cover no-repeat !important;
}

.restaurant-header-premium .restaurant-cover img,
.restaurant-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  filter: saturate(1.12) contrast(1.05) brightness(.94) !important;
}

.restaurant-header-premium .restaurant-cover-overlay,
.restaurant-cover-overlay {
  background:
    linear-gradient(180deg, rgba(10,8,7,.18) 0%, rgba(10,8,7,.24) 45%, rgba(253,248,240,.92) 100%) !important;
}

.restaurant-info-card,
.restaurant-info-premium {
  padding-left: 250px !important;
}

.restaurant-logo-large {
  width: 168px !important;
  height: 168px !important;
  left: 34px !important;
  top: -78px !important;
  background: #da291c !important;
  border: 5px solid rgba(20,16,13,.92) !important;
  box-shadow:
    0 26px 52px rgba(0,0,0,.36),
    0 0 0 9px rgba(253,248,240,.12),
    inset 0 0 0 2px rgba(255,199,44,.22) !important;
}

.restaurant-logo-large img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 34px !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: block !important;
}

.restaurant-status {
  margin-left: 0 !important;
  margin-bottom: 12px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(37,211,102,.30) !important;
  background: rgba(37,211,102,.14) !important;
  color: #9cf5b7 !important;
  box-shadow: 0 12px 26px rgba(37,211,102,.12) !important;
}

.restaurant-status i {
  width: 18px !important;
  height: 18px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: var(--whatsapp) !important;
  box-shadow: 0 0 0 5px rgba(37,211,102,.15) !important;
}

.restaurant-status i::before {
  content: "✓";
  color: #063b1b;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
}

/* Product image zoom update */
.food-card .card-media {
  height: 188px !important;
}

.food-card .card-media img {
  width: 108% !important;
  height: 108% !important;
  max-width: 108% !important;
  max-height: 108% !important;
  transform: translateY(-4px) scale(1.16) !important;
}

.food-card:hover .card-media img {
  transform: translateY(-6px) scale(1.22) !important;
}

.modal-media img {
  width: 96% !important;
  height: 96% !important;
  max-width: 96% !important;
  max-height: 96% !important;
}

/* Stronger option selected state */
.option-card.active,
.addon-row.active {
  background: linear-gradient(135deg, rgba(37,211,102,.18), rgba(255,255,255,.98)) !important;
  border-color: rgba(37,211,102,.85) !important;
  box-shadow:
    0 0 0 4px rgba(37,211,102,.18),
    0 16px 28px rgba(37,211,102,.10) !important;
}

@media(max-width:900px){
  .restaurant-info-card,
  .restaurant-info-premium {
    padding-left: 18px !important;
    padding-top: 92px !important;
  }
  .restaurant-logo-large {
    width: 134px !important;
    height: 134px !important;
    left: 50% !important;
    top: -72px !important;
    transform: translateX(-50%) !important;
  }
  .restaurant-logo-large img {
    padding: 26px !important;
  }
  .restaurant-status {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media(max-width:560px){
  .restaurant-logo-large {
    width: 116px !important;
    height: 116px !important;
    top: -60px !important;
  }
  .restaurant-logo-large img {
    padding: 22px !important;
  }
  .food-card .card-media {
    height: 176px !important;
  }
  .food-card .card-media img {
    width: 104% !important;
    height: 104% !important;
    max-width: 104% !important;
    max-height: 104% !important;
    transform: translateY(-2px) scale(1.12) !important;
  }
}

/* ------------------------------------------------
   Final McDo header + options polish
   ------------------------------------------------ */
.restaurant-cover{
  height: 320px !important;
  background: #1c1713 !important;
}
.restaurant-cover img{
  opacity: 1 !important;
  filter: saturate(1.12) contrast(1.06) brightness(.92) !important;
  object-fit: cover !important;
  object-position: center 46% !important;
}
.restaurant-cover-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.20) 44%, rgba(253,248,240,.93) 100%),
    radial-gradient(circle at 50% 58%, rgba(212,165,116,.22), transparent 36%) !important;
}
.restaurant-info-card,
.restaurant-info-premium{
  padding-left: 235px !important;
  padding-top: 26px !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(212,165,116,.18), transparent 28%),
    linear-gradient(145deg, rgba(27,23,20,.97), rgba(13,12,11,.985)) !important;
}
.restaurant-logo-large{
  width: 172px !important;
  height: 172px !important;
  left: 42px !important;
  top: -74px !important;
  background: radial-gradient(circle at 45% 35%, #fffdf8, #f2eadf 72%) !important;
  border: 4px solid rgba(255,255,255,.9) !important;
  box-shadow:
    0 22px 50px rgba(0,0,0,.32),
    0 0 0 10px rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(42,27,14,.08) !important;
}
.restaurant-logo-large img{
  width: 78% !important;
  height: 78% !important;
  max-width: 78% !important;
  max-height: 78% !important;
  object-fit: contain !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.restaurant-status{
  margin-left: 0 !important;
  margin-bottom: 14px !important;
  transform: translateX(2px) !important;
  background: rgba(37,211,102,.12) !important;
  border: 1px solid rgba(37,211,102,.34) !important;
  color: #a6f6bf !important;
}
.restaurant-status i{
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: var(--whatsapp) !important;
  box-shadow: 0 0 0 5px rgba(37,211,102,.13) !important;
}
.restaurant-status i::before{
  content: "✓" !important;
  display: block !important;
  color: #073b1a !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}
.restaurant-status i::after{
  content: none !important;
  display: none !important;
}
.restaurant-price{display:none !important;}

/* Black selected option states + smaller cards */
.option-block{margin-top:14px !important;}
.option-title{margin-bottom:8px !important;}
.option-grid,
.addons-list,
.required-options{
  gap: 8px !important;
}
.option-section-card{
  padding: 10px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.56) !important;
}
.option-card,
.addon-row{
  min-height: 46px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-size: .94rem !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(42,27,14,.10) !important;
  box-shadow: 0 5px 14px rgba(42,27,14,.035) !important;
}
.option-card strong,
.addon-name{font-size: .94rem !important; line-height: 1.2 !important;}
.option-card span,
.addon-price{font-size: .88rem !important;}
.option-card:hover,
.addon-row:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(23,20,18,.28) !important;
  box-shadow: 0 10px 24px rgba(42,27,14,.08) !important;
}
.option-card.active,
.addon-row.active{
  background: linear-gradient(135deg, #15120f, #2a211b) !important;
  color: #fff !important;
  border-color: rgba(23,20,18,.88) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.18),
    0 0 0 4px rgba(23,20,18,.12) !important;
}
.option-card.active strong,
.option-card.active span,
.addon-row.active .addon-name,
.addon-row.active .addon-price{
  color:#fff !important;
}
.option-card.active::after,
.addon-row.active::after{
  content:"✓" !important;
  width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  flex: 0 0 24px !important;
  display: inline-grid !important;
  place-items:center !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #15120f !important;
  font-size: .82rem !important;
  font-weight: 1000 !important;
  margin-left: auto !important;
}
.sauce-qty-card.active{
  background: linear-gradient(135deg, #15120f, #2a211b) !important;
  color:#fff !important;
  border-color: rgba(23,20,18,.88) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.16), 0 0 0 4px rgba(23,20,18,.10) !important;
}
.sauce-qty-card.active strong,
.sauce-qty-card.active b{color:#fff !important;}
.sauce-qty-card.active .sauce-qty-badge{background:#fff !important;color:#15120f !important;}
.sauce-qty-card{gap: 8px !important;}
.sauce-qty-top strong{font-size:.92rem !important;}
.sauce-qty-controls{gap: 7px !important;}
.sauce-qty-btn{
  width: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
}

/* Slightly bigger product images, without breaking card layout */
.food-card .card-media img{
  width: 116% !important;
  height: 116% !important;
  max-width: 116% !important;
  max-height: 116% !important;
  transform: translateY(-3px) scale(1.12) !important;
}
.food-card:hover .card-media img{
  transform: translateY(-5px) scale(1.18) !important;
}

@media(max-width:900px){
  .restaurant-info-card,
  .restaurant-info-premium{
    padding-left: 18px !important;
    padding-top: 100px !important;
  }
  .restaurant-logo-large{
    left: 50% !important;
    top: -74px !important;
    width: 132px !important;
    height: 132px !important;
    transform: translateX(-50%) !important;
  }
  .restaurant-logo-large img{
    width: 74% !important;
    height: 74% !important;
    max-width: 74% !important;
    max-height: 74% !important;
  }
  .restaurant-status{
    margin-inline: auto !important;
  }
}
@media(max-width:560px){
  .restaurant-cover{height:230px !important;}
  .restaurant-info-card,
  .restaurant-info-premium{
    padding-top: 92px !important;
  }
  .restaurant-logo-large{
    width: 112px !important;
    height: 112px !important;
    top: -58px !important;
  }
  .option-card,
  .addon-row{
    min-height: 44px !important;
    padding: 9px 11px !important;
    font-size: .9rem !important;
  }
}


/* ------------------------------------------------
   FINAL REQUEST FIXES
   - normal cover background with no rounded cover corners
   - logo circle accepts any real uploaded image, no CSS/icon coloring
   - single-dot Available Now badge
   - smaller item popup and cleaner compact option cards
   ------------------------------------------------ */
.restaurant-app-hero.restaurant-header-premium{
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: linear-gradient(180deg, #fdf8f0 0%, #fffaf4 100%) !important;
}

.restaurant-header-premium .restaurant-cover,
.restaurant-cover{
  height: 315px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
  background: #1e1711 url("assets/mcdonalds-cover.webp") center center / cover no-repeat !important;
}

.restaurant-header-premium .restaurant-cover img,
.restaurant-cover img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: saturate(1.05) contrast(1.02) brightness(.96) !important;
  opacity: 1 !important;
}

.restaurant-header-premium .restaurant-cover-overlay,
.restaurant-cover-overlay{
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.14) 48%, rgba(253,248,240,.96) 100%) !important;
}

.restaurant-info-card,
.restaurant-info-premium{
  margin-top: -78px !important;
  width: min(1040px, calc(100% - 40px)) !important;
  padding-left: 220px !important;
  padding-top: 28px !important;
  border-radius: 28px !important;
}

.restaurant-logo-large{
  left: 34px !important;
  top: -92px !important;
  width: 170px !important;
  height: 170px !important;
  padding: 0 !important;
  background: #fff !important;
  border: 6px solid #f8efe4 !important;
  box-shadow:
    0 28px 56px rgba(0,0,0,.32),
    0 0 0 8px rgba(255,255,255,.12) !important;
  overflow: hidden !important;
}

.restaurant-logo-large img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: block !important;
}

.restaurant-status{
  margin-left: 0 !important;
  margin-bottom: 13px !important;
  transform: none !important;
  padding: 8px 14px !important;
  gap: 9px !important;
  background: rgba(37,211,102,.12) !important;
  border: 1px solid rgba(37,211,102,.32) !important;
  color: #9cf5b7 !important;
  box-shadow: none !important;
}

.restaurant-status i{
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  background: var(--whatsapp) !important;
  box-shadow: 0 0 0 5px rgba(37,211,102,.16) !important;
}

.restaurant-status i::before,
.restaurant-status i::after{
  content: none !important;
  display: none !important;
}

/* Smaller, more premium product popup */
.modal{
  padding: 18px !important;
}

.modal-card{
  width: min(620px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - 36px) !important;
  border-radius: 26px !important;
}

.modal-media{
  height: clamp(190px, 30vh, 245px) !important;
}

.modal-media img{
  width: 84% !important;
  height: 84% !important;
  max-width: 84% !important;
  max-height: 84% !important;
}

.modal-content{
  padding: 18px 20px 20px !important;
}

.modal-content h2{
  font-size: clamp(1.45rem, 3vw, 1.75rem) !important;
}

.modal-content p{
  font-size: .95rem !important;
}

.option-block{
  margin-top: 12px !important;
}

.option-title{
  margin-bottom: 7px !important;
}

.option-grid,
.addons-list,
.required-options{
  gap: 7px !important;
}

.option-section-card{
  padding: 8px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(42,27,14,.06) !important;
}

.option-card,
.addon-row{
  min-height: 40px !important;
  padding: 8px 11px !important;
  border-radius: 13px !important;
  gap: 10px !important;
  font-size: .9rem !important;
}

.option-card strong,
.addon-name{
  font-size: .9rem !important;
}

.option-card span,
.addon-price{
  font-size: .84rem !important;
}

.option-card.active,
.addon-row.active{
  background: linear-gradient(135deg, #15120f, #2b211a) !important;
  border-color: #15120f !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.16), 0 0 0 3px rgba(21,18,15,.12) !important;
}

.option-card.active::after,
.addon-row.active::after{
  width: 21px !important;
  height: 21px !important;
  min-height: 21px !important;
  flex-basis: 21px !important;
  font-size: .76rem !important;
}

.modal-bottom{
  padding: 13px 20px !important;
  margin: 18px -20px -20px !important;
}

.qty-selector button{
  width: 38px !important;
  height: 38px !important;
  border-radius: 13px !important;
}

@media(max-width:900px){
  .restaurant-info-card,
  .restaurant-info-premium{
    width: min(720px, calc(100% - 28px)) !important;
    padding-left: 18px !important;
    padding-top: 92px !important;
    text-align: center !important;
  }
  .restaurant-logo-large{
    left: 50% !important;
    top: -72px !important;
    width: 132px !important;
    height: 132px !important;
    transform: translateX(-50%) !important;
  }
  .restaurant-status{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media(max-width:560px){
  .restaurant-header-premium .restaurant-cover,
  .restaurant-cover{
    height: 220px !important;
  }
  .restaurant-info-card,
  .restaurant-info-premium{
    width: calc(100% - 24px) !important;
    margin-top: -64px !important;
    padding: 82px 14px 18px !important;
    border-radius: 22px !important;
  }
  .restaurant-logo-large{
    width: 108px !important;
    height: 108px !important;
    top: -56px !important;
  }
  .modal{
    padding: 9px !important;
  }
  .modal-card{
    width: min(430px, calc(100vw - 18px)) !important;
    border-radius: 22px !important;
  }
  .modal-media{
    height: 185px !important;
  }
  .modal-content{
    padding: 15px !important;
  }
  .modal-bottom{
    margin: 16px -15px -15px !important;
    padding: 12px 15px !important;
  }
}


/* ------------------------------------------------
   FINAL McDo header fit tweaks
   ------------------------------------------------ */
.restaurant-header-premium .restaurant-cover{
  height: clamp(320px, 34vw, 460px) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.restaurant-header-premium .restaurant-cover img{
  object-position: center 36% !important;
  transform: scale(1.02) !important;
}

.restaurant-header-premium .restaurant-cover-overlay{
  background:
    linear-gradient(180deg, rgba(12,9,7,.16) 0%, rgba(12,9,7,.08) 30%, rgba(253,248,240,.22) 64%, rgba(253,248,240,.94) 100%) !important;
}

.restaurant-info-premium{
  margin-top: -92px !important;
}

.restaurant-info-premium .restaurant-logo-large,
.restaurant-logo-large{
  overflow: hidden !important;
  background: #fff !important;
  border: 5px solid #17110d !important;
  box-shadow:
    0 24px 54px rgba(0,0,0,.30),
    0 0 0 8px rgba(253,248,240,.14) !important;
}

.restaurant-info-premium .restaurant-logo-large img,
.restaurant-logo-large img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  display: block !important;
  background: transparent !important;
}

.restaurant-status{
  margin-left: 10px !important;
  padding-left: 14px !important;
  padding-right: 18px !important;
}

@media (max-width: 900px){
  .restaurant-header-premium .restaurant-cover{
    height: 300px !important;
  }
  .restaurant-info-premium{
    margin-top: -80px !important;
  }
}

@media (max-width: 560px){
  .restaurant-header-premium .restaurant-cover{
    height: 260px !important;
  }
  .restaurant-info-premium{
    margin-top: -64px !important;
  }
  .restaurant-info-premium .restaurant-logo-large,
  .restaurant-logo-large{
    width: 118px !important;
    height: 118px !important;
    left: 22px !important;
    top: -54px !important;
  }
}


/* ------------------------------------------------
   FINAL polish: option cards + review/details cart
   ------------------------------------------------ */
.cart-panel{
  background: linear-gradient(180deg, #fffdf9 0%, #fbf6ef 100%) !important;
}

.cart-header,
.checkout-progress{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(251,246,239,.92)) !important;
}

.cart-header{
  border-bottom: 1px solid rgba(42,27,14,.08) !important;
  box-shadow: 0 10px 30px rgba(42,27,14,.04) !important;
}

.checkout-progress{
  border-bottom: 1px solid rgba(42,27,14,.06) !important;
}

#checkoutReview,
#checkoutDetails{
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(249,243,235,.95) 100%) !important;
}

.cart-body,
.details-body{
  background: transparent !important;
}

.review-footer,
.details-footer,
.cart-footer{
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,242,234,.96)) !important;
  border-top: 1px solid rgba(42,27,14,.08) !important;
  box-shadow: 0 -10px 30px rgba(42,27,14,.04) !important;
}

.checkout-step{
  padding: 8px 10px !important;
  border-radius: 999px !important;
  transition: background .22s ease, color .22s ease, border-color .22s ease !important;
}

.checkout-step.active{
  background: rgba(212,165,116,.12) !important;
}

.option-block{
  margin-top: 16px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,246,239,.96)) !important;
  border: 1px solid rgba(42,27,14,.08) !important;
  box-shadow: 0 10px 28px rgba(42,27,14,.05) !important;
}

.option-title{
  margin-bottom: 12px !important;
  align-items: center !important;
}

.option-title strong{
  font-size: 1rem !important;
}

.option-title span{
  font-size: .8rem !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: rgba(212,165,116,.12) !important;
  color: #8d6744 !important;
}

.option-grid,
.addons-list,
.required-options{
  gap: 8px !important;
}

.option-card,
.addon-row{
  min-height: 54px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  background: #fff !important;
  border: 1px solid rgba(42,27,14,.10) !important;
  box-shadow: 0 6px 18px rgba(42,27,14,.04) !important;
}

.option-card strong,
.addon-name{
  font-size: .95rem !important;
  line-height: 1.2 !important;
}

.option-card span,
.addon-price{
  font-size: .84rem !important;
}

.option-card.active,
.addon-row.active{
  background: linear-gradient(135deg, #171310 0%, #241d17 100%) !important;
  border-color: #2d241d !important;
  box-shadow: 0 14px 32px rgba(19,14,10,.18), 0 0 0 3px rgba(212,165,116,.14) !important;
}

.option-card.active::after,
.addon-row.active::after{
  min-height: 22px !important;
  padding: 0 8px !important;
  font-size: .68rem !important;
}

.item-note-block textarea,
.item-note-input{
  min-height: 94px !important;
  background: #fff !important;
}


/* ------------------------------------------------
   Premium floating cart / View order button
   ------------------------------------------------ */
.cart-dock.floating-cart{
  min-height: 64px !important;
  padding: 8px 16px 8px 12px !important;
  gap: 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #120f0d 0%, #1b1511 55%, #120f0d 100%) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.04) inset !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  justify-content: center !important;
}

.cart-dock.floating-cart::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:inherit;
  background: radial-gradient(circle at 50% 50%, rgba(212,165,116,.10), transparent 58%);
  filter: blur(22px);
  opacity:.28;
  z-index:-1;
  animation: floatingCartBacklight 7s ease-in-out infinite;
  pointer-events:none;
}

.cart-dock.floating-cart::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  pointer-events:none;
  z-index:0;
}

@keyframes floatingCartBacklight{
  0%,100%{ transform: translateX(-5px) scale(.98); opacity:.20; }
  50%{ transform: translateX(6px) scale(1.01); opacity:.34; }
}

.cart-dock.floating-cart:hover{
  transform: translateY(-2px) !important;
  border-color: rgba(212,165,116,.18) !important;
  box-shadow:
    0 20px 48px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,255,255,.05) inset !important;
}

.cart-dock.cart-pulse{
  animation: cartButtonPulse .38s ease;
}

@keyframes cartButtonPulse{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}

.floating-cart-icon-wrap{
  position:relative !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  z-index:2 !important;
  flex: 0 0 42px !important;
}

.floating-cart-icon{
  width: 22px !important;
  height: 22px !important;
  stroke: #fff7ec !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.floating-cart-icon-glow{
  position:absolute;
  inset:8px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(212,165,116,.10), transparent 72%);
  pointer-events:none;
}

.floating-cart-count{
  position:absolute !important;
  right:-5px !important;
  top:-5px !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 6px !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background: var(--whatsapp) !important;
  color:#073b1a !important;
  border: 2px solid #181310 !important;
  box-shadow: 0 6px 14px rgba(37,211,102,.24) !important;
  font-size: .74rem !important;
  font-weight: 1000 !important;
  line-height:1 !important;
}

.cart-dock.cart-pulse .floating-cart-count{
  animation: cartBadgePop .38s ease;
}

@keyframes cartBadgePop{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.15); }
  100%{ transform: scale(1); }
}

.floating-cart-text{
  display:grid !important;
  gap: 2px !important;
  min-width: 136px !important;
  text-align:center !important;
  justify-items:center !important;
  align-items:center !important;
  z-index:2 !important;
}

.floating-cart-hint{
  display:block !important;
  color:#fff !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
  line-height:1.05 !important;
}

.floating-cart-meta{
  display:block !important;
  color: rgba(255,247,236,.72) !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
  letter-spacing:.01em !important;
  line-height:1.1 !important;
}

.floating-cart-arrow{
  display:none !important;
}

.cart-orbit{
  display:none !important;
}

@media(max-width:560px){
  .cart-dock.floating-cart{
    min-height:60px !important;
    left:16px !important;
    right:16px !important;
    bottom:14px !important;
    padding:8px 14px 8px 10px !important;
    gap:10px !important;
  }
  .floating-cart-text{
    min-width: 0 !important;
    flex: 1 !important;
  }
  .floating-cart-hint{
    font-size: .94rem !important;
  }
  .floating-cart-meta{
    font-size: .72rem !important;
  }
}


/* ------------------------------------------------
   Final fix: solid black restaurant info card
   ------------------------------------------------ */
.restaurant-info-card,
.restaurant-info-premium{
  background: #0f0d0c !important;
  background-image: none !important;
}

.restaurant-info-card::before,
.restaurant-info-card:before,
.restaurant-info-premium::before,
.restaurant-info-premium:before,
.restaurant-info-card::after,
.restaurant-info-premium::after{
  display: none !important;
  content: none !important;
  background: none !important;
}


/* ------------------------------------------------
   FINAL REQUESTED PATCH — back button polish only
   ------------------------------------------------ */
.webapp-back-button {
  background: #151210 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

.webapp-back-button:hover {
  background: #211914 !important;
  color: #fff !important;
}


/* =========================================================
   Neutral marketplace orbit loader
   Burger / Pizza / Grocery / Pharmacy — 3s loop
   ========================================================= */
.delivery-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(212,165,116,.14), transparent 32%),
    linear-gradient(180deg, #fdf8f0 0%, #f7ede0 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .48s ease, visibility .48s ease;
  pointer-events: all;
}

.delivery-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.delivery-loader__stage {
  position: relative;
  width: 230px;
  height: 230px;
  display: grid;
  place-items: center;
}

.delivery-loader__stage::before {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  border: 1px solid rgba(42,27,14,.08);
  box-shadow:
    0 22px 70px rgba(42,27,14,.10),
    inset 0 0 0 1px rgba(255,255,255,.74);
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
}

.delivery-loader__orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: deliveryOrbitSpin 3s linear infinite;
}

.delivery-loader__icon {
  position: absolute;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #14110e;
  color: #fff;
  border: 1px solid rgba(212,165,116,.28);
  box-shadow:
    0 16px 34px rgba(42,27,14,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  font-size: 1.28rem;
}

.delivery-loader__icon span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  animation: deliveryOrbitReverse 3s linear infinite;
}

.delivery-loader__icon--burger { left: 50%; top: 0; transform: translate(-50%, 0); }
.delivery-loader__icon--pizza { right: 0; top: 50%; transform: translate(0, -50%); }
.delivery-loader__icon--grocery { left: 50%; bottom: 0; transform: translate(-50%, 0); }
.delivery-loader__icon--pharmacy { left: 0; top: 50%; transform: translate(0, -50%); color: #25d366; font-weight: 1000; }

.delivery-loader__center {
  position: relative;
  z-index: 2;
  width: 142px;
  height: 142px;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 18px;
  border-radius: 999px;
  background: rgba(253,248,240,.94);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow:
    0 24px 60px rgba(42,27,14,.12),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.delivery-loader__center strong {
  display: block;
  color: #14110e;
  font-size: .92rem;
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -.02em;
}

.delivery-loader__center small {
  display: block;
  margin-top: 6px;
  color: rgba(42,27,14,.58);
  font-size: .72rem;
  font-weight: 800;
}

.delivery-loader__line {
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(42,27,14,.10);
}

.delivery-loader__line i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14110e, #d4a574, #25d366);
  animation: deliveryLoaderLine 1.05s cubic-bezier(.22,1,.36,1) infinite;
}

@keyframes deliveryOrbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes deliveryOrbitReverse {
  to { transform: rotate(-360deg); }
}

@keyframes deliveryLoaderLine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(260%); }
}

@media (max-width: 520px) {
  .delivery-loader__stage {
    width: 204px;
    height: 204px;
  }

  .delivery-loader__center {
    width: 128px;
    height: 128px;
  }

  .delivery-loader__icon {
    width: 43px;
    height: 43px;
    border-radius: 15px;
    font-size: 1.15rem;
  }

  .delivery-loader__center strong {
    font-size: .86rem;
  }

  .delivery-loader__center small {
    font-size: .68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-loader__orbit,
  .delivery-loader__icon span,
  .delivery-loader__line i {
    animation: none !important;
  }
}

.site-loader.delivery-loader{display:grid!important;}


/* =========================================================
   Premium 3-second service loader
   ========================================================= */
.delivery-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: grid !important;
  place-items: center !important;
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(212,165,116,.18), transparent 34%),
    radial-gradient(circle at 20% 20%, rgba(37,211,102,.055), transparent 30%),
    linear-gradient(180deg, #fffaf2 0%, #f4eadc 100%) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .55s ease, visibility .55s ease !important;
  overflow: hidden !important;
}

.delivery-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42,27,14,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,27,14,.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 68%);
  pointer-events: none;
}

.delivery-loader.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.delivery-loader__stage {
  position: relative !important;
  width: 248px !important;
  height: 248px !important;
  display: grid !important;
  place-items: center !important;
  isolation: isolate !important;
}

.delivery-loader__stage::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.76), rgba(255,255,255,.18) 58%, transparent 70%);
  box-shadow: 0 34px 90px rgba(42,27,14,.13);
  z-index: -2;
}

.delivery-loader__ring {
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  border: 1px solid rgba(42,27,14,.10);
  background:
    conic-gradient(from 0deg, rgba(20,17,14,.06), rgba(212,165,116,.38), rgba(37,211,102,.20), rgba(20,17,14,.06));
  mask: radial-gradient(circle, transparent 64%, #000 65%);
  animation: deliveryRingSpin 3s linear infinite;
  opacity: .9;
}

.delivery-loader__orbit {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  animation: deliveryOrbitSpin 3s linear infinite !important;
  transform-origin: center !important;
}

.delivery-loader__icon {
  position: absolute !important;
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 17px !important;
  color: #14110e !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(42,27,14,.10) !important;
  box-shadow: 0 16px 34px rgba(42,27,14,.13), inset 0 1px 0 rgba(255,255,255,.84) !important;
  backdrop-filter: blur(10px) !important;
}

.delivery-loader__icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: rotate(0deg) !important;
  animation: deliveryOrbitReverse 3s linear infinite !important;
}

.delivery-loader__icon--burger { left: 50% !important; top: 0 !important; transform: translate(-50%, 0) !important; }
.delivery-loader__icon--pizza { right: 0 !important; top: 50% !important; transform: translate(0, -50%) !important; }
.delivery-loader__icon--grocery { left: 50% !important; bottom: 0 !important; transform: translate(-50%, 0) !important; }
.delivery-loader__icon--pharmacy { left: 0 !important; top: 50% !important; transform: translate(0, -50%) !important; }

.delivery-loader__center {
  width: 148px !important;
  height: 148px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  text-align: center !important;
  padding: 18px !important;
  color: #14110e !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,242,.86)) !important;
  border: 1px solid rgba(42,27,14,.08) !important;
  box-shadow: 0 26px 70px rgba(42,27,14,.16), inset 0 1px 0 rgba(255,255,255,.9) !important;
  z-index: 2 !important;
}

.delivery-loader__kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  margin-bottom: 7px !important;
  background: #14110e !important;
  color: #fffaf2 !important;
  font-size: .63rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.delivery-loader__center strong {
  display: block !important;
  color: #14110e !important;
  font-size: .9rem !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
}

.delivery-loader__center small {
  display: block !important;
  margin-top: 6px !important;
  color: rgba(42,27,14,.58) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
}

.delivery-loader__line {
  display: block !important;
  width: 78px !important;
  height: 4px !important;
  margin-top: 12px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: rgba(42,27,14,.10) !important;
}

.delivery-loader__line i {
  display: block !important;
  width: 52% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #14110e, #d4a574, #25d366) !important;
  animation: deliveryLoaderLine 3s cubic-bezier(.22,1,.36,1) infinite !important;
}

@keyframes deliveryOrbitSpin { to { transform: rotate(360deg); } }
@keyframes deliveryOrbitReverse { to { transform: rotate(-360deg); } }
@keyframes deliveryRingSpin { to { transform: rotate(360deg); } }
@keyframes deliveryLoaderLine {
  0% { transform: translateX(-130%); }
  52% { transform: translateX(40%); }
  100% { transform: translateX(210%); }
}

@media (max-width: 520px) {
  .delivery-loader__stage { width: 218px !important; height: 218px !important; }
  .delivery-loader__center { width: 134px !important; height: 134px !important; }
  .delivery-loader__icon { width: 43px !important; height: 43px !important; border-radius: 15px !important; }
  .delivery-loader__icon svg { width: 22px !important; height: 22px !important; }
  .delivery-loader__center strong { font-size: .82rem !important; }
  .delivery-loader__center small { font-size: .68rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-loader__orbit,
  .delivery-loader__icon svg,
  .delivery-loader__ring,
  .delivery-loader__line i {
    animation: none !important;
  }
}


/* =========================================================
   Premium loader: static icons + 0% to 100% progress bar
   ========================================================= */
.premium-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(212,165,116,.15), transparent 34%),
    linear-gradient(180deg, #fdf8f0 0%, #f6efe6 100%);
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity .42s ease, visibility .42s ease;
}

.premium-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.premium-loader__panel {
  width: min(360px, calc(100vw - 44px));
  min-height: 250px;
  border-radius: 32px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  padding: 34px 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,250,244,.72));
  border: 1px solid rgba(42,27,14,.08);
  box-shadow:
    0 34px 90px rgba(42,27,14,.16),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.premium-loader__icons {
  display: grid;
  grid-template-columns: repeat(4, 48px);
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.premium-loader__icon {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #111;
  color: #fff;
  box-shadow:
    0 14px 30px rgba(17,17,17,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.premium-loader__icon svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.premium-loader__text {
  display: grid;
  gap: 7px;
  text-align: center;
}

.premium-loader__text strong {
  color: #111;
  font-size: 1.18rem;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.premium-loader__text span {
  color: rgba(17,17,17,.58);
  font-size: .88rem;
  font-weight: 750;
}

.premium-loader__bar {
  width: min(230px, 70vw);
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(17,17,17,.10);
}

.premium-loader__bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #111;
  animation: premiumLoaderProgress 1.4s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes premiumLoaderProgress {
  from { width: 0%; }
  to { width: 100%; }
}

body.loader-active {
  overflow: hidden;
}

body.loader-complete {
  overflow: auto;
}

@media (max-width: 560px) {
  .premium-loader__panel {
    width: min(320px, calc(100vw - 32px));
    min-height: 230px;
    border-radius: 28px;
    padding: 30px 22px;
  }

  .premium-loader__icons {
    grid-template-columns: repeat(4, 42px);
    gap: 9px;
  }

  .premium-loader__icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
  }

  .premium-loader__icon svg {
    width: 22px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .premium-loader__bar span {
    animation: none;
    width: 100%;
  }

  .premium-loader,
  .premium-loader.is-hidden {
    transition: opacity .2s ease, visibility .2s ease;
  }
}


/* Final loader dedupe: only premiumLoader is allowed */
#deliveryLoader, #siteLoader, .delivery-loader, .site-loader:not(.premium-loader), .page-loader:not(.premium-loader), .orbit-loader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

#premiumLoader.premium-loader {
  display: grid !important;
}


/* Final progress fix: real 0% to 100% fill controlled by JS */
#premiumLoader .premium-loader__bar{
  background: rgba(17,17,17,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.05) !important;
}
#premiumLoader .premium-loader__bar span{
  width: 0% !important;
  height: 100% !important;
  display: block !important;
  background: #111 !important;
  border-radius: inherit !important;
  animation: none !important;
  transition: width 3s linear !important;
  transform: none !important;
}
#premiumLoader.loader-progress-start .premium-loader__bar span{
  width: 100% !important;
}


/* =========================================================
   Premium loader icon upgrade
   ========================================================= */
.premium-loader__icons--pro {
  grid-template-columns: repeat(4, 54px) !important;
  gap: 13px !important;
  margin-bottom: 2px !important;
}

.premium-loader__icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.13), transparent 34%),
    linear-gradient(145deg, #181411 0%, #0d0b0a 100%) !important;
  border: 1px solid rgba(212,165,116,.28) !important;
  box-shadow:
    0 18px 35px rgba(17,12,8,.22),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 22px rgba(0,0,0,.20) !important;
}

.premium-loader__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 36px;
  height: 36px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(212,165,116,.18);
  filter: blur(12px);
  pointer-events: none;
}

.premium-loader__icon svg {
  width: 30px !important;
  height: 30px !important;
  position: relative !important;
  z-index: 2 !important;
  stroke: #fff8ee !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.premium-loader__icon--burger svg,
.premium-loader__icon--pizza svg {
  transform: translateY(.5px);
}

.premium-loader__icon--grocery svg {
  transform: translateY(-.5px);
}

.premium-loader__icon--pharmacy svg {
  transform: translateY(.2px);
}

@media (max-width: 560px) {
  .premium-loader__icons--pro {
    grid-template-columns: repeat(4, 46px) !important;
    gap: 10px !important;
  }

  .premium-loader__icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
  }

  .premium-loader__icon svg {
    width: 26px !important;
    height: 26px !important;
  }
}


/* =========================================================
   Fix: no check mark inside multi-quantity sauce options
   Applies to Chicken Box sauce cards only.
   ========================================================= */
.sauce-qty-card.active::after,
.sauce-qty-card::after,
.sauce-qty-card .selected-check,
.sauce-qty-card .option-selected-check {
  content: none !important;
  display: none !important;
}

.sauce-qty-card.active {
  padding-bottom: 10px !important;
}


/* TARGETED MCDONALDS MOBILE FIX PATCH — 2026-06-02
   - keeps back button dark/premium, not full white
   - moves mobile Add to Order control to the right side of the modal action row
*/
.webapp-back-button {
  background: linear-gradient(135deg, #14110e 0%, #2b211b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 16px 36px rgba(20,17,14,0.24), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
}

.webapp-back-button:hover {
  background: linear-gradient(135deg, #201914 0%, #34281f 100%) !important;
  color: #ffffff !important;
}

.webapp-back-button span {
  color: #ffffff !important;
}

@media (max-width: 560px) {
  .modal-bottom {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    position: sticky !important;
    bottom: 0 !important;
  }

  .qty-selector {
    order: 1 !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }

  .add-order-btn {
    order: 2 !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 170px !important;
    max-width: calc(100% - 118px) !important;
    min-height: 48px !important;
    padding: 0 13px !important;
    margin-left: auto !important;
    align-self: flex-start !important;
    justify-self: end !important;
    border-radius: 16px !important;
    font-size: 0.86rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  .modal-content .primary-btn.add-order-btn {
    width: auto !important;
  }
}


/* SAFE RECOVERY PATCH — requested McDonald's webapp fixes */
.webapp-back-button,
.webapp-back-button:visited {
  background: #151210 !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.14) !important;
}
.webapp-back-button span { color: #fff !important; }
.restaurant-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.back-checkout-btn,
.checkout-actions .back-checkout-btn {
  background: #151210 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.back-checkout-btn:hover,
.back-checkout-btn:focus-visible {
  background: #211914 !important;
  color: #fff !important;
}
@media (max-width: 560px) {
  .restaurant-info-premium .restaurant-logo-large,
  .restaurant-logo-large {
    left: 34px !important;
    transform: none !important;
  }
}

/* Hide main webapp back button while a product/item modal is open */
body.product-modal-open .webapp-back-button,
body:has(#productModal.open) .webapp-back-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) scale(.98) !important;
}


/* Hide main webapp back button while the cart/bag checkout panel is open */
body.cart-panel-open .webapp-back-button,
body:has(#cartPanel.open) .webapp-back-button {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) scale(.98) !important;
}

/* =========================================================
   TARGETED FIX — empty cart browse button + premium option cards
   ========================================================= */
.cart-panel .empty-cart-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 14px !important;
}

.cart-panel .empty-cart-btn,
.cart-panel .empty-cart .ghost-btn.empty-cart-btn,
#emptyCartBrowseBtn {
  width: auto !important;
  min-width: 154px !important;
  max-width: 100% !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #15110f 0%, #2b211b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 38px rgba(17,13,10,.18), inset 0 1px 0 rgba(255,255,255,.10) !important;
  font-size: .94rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}

.cart-panel .empty-cart-btn:hover,
.cart-panel .empty-cart-btn:focus-visible,
#emptyCartBrowseBtn:hover,
#emptyCartBrowseBtn:focus-visible {
  background: linear-gradient(135deg, #231a15 0%, #372a21 100%) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 20px 46px rgba(17,13,10,.24), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.modal .option-block {
  margin-top: 18px !important;
}

.modal .option-section-card,
.modal .option-block:not(.item-note-block) {
  border-radius: 22px !important;
}

.modal .option-section-card {
  padding: 16px !important;
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(34,28,23,.08) !important;
  box-shadow: 0 16px 44px rgba(30,20,12,.06) !important;
}

.modal .option-title,
.modal .compact-title {
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

.modal .option-title strong {
  color: #17120f !important;
  font-size: .98rem !important;
  letter-spacing: -.01em !important;
}

.modal .option-title span,
.modal .option-helper {
  color: #8a7d72 !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
}

.modal .option-helper {
  display: inline-flex !important;
  width: fit-content !important;
  margin: -4px 0 12px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: #fff1dc !important;
  color: #7a4a18 !important;
}

.modal .option-grid,
.modal .addons-list,
.modal .required-options,
.modal .required-choice-grid {
  gap: 11px !important;
}

.modal .option-card,
.modal .addon-row {
  position: relative !important;
  min-height: 58px !important;
  padding: 15px 16px !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,244,225,.78), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffaf2 100%) !important;
  border: 1px solid rgba(29,23,18,.09) !important;
  box-shadow: 0 10px 24px rgba(25,18,12,.045), inset 0 1px 0 rgba(255,255,255,.90) !important;
  color: #17120f !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
  overflow: hidden !important;
}

.modal .option-card:hover,
.modal .addon-row:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(200,149,108,.38) !important;
  box-shadow: 0 16px 34px rgba(25,18,12,.09), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.modal .option-card strong,
.modal .addon-name {
  color: #17120f !important;
  font-weight: 950 !important;
  letter-spacing: -.015em !important;
}

.modal .option-card span,
.modal .addon-price {
  color: #4c4038 !important;
  font-weight: 850 !important;
}

.modal .option-card.active,
.modal .addon-row.active {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.10), transparent 30%),
    linear-gradient(135deg, #15110f 0%, #2a201a 100%) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(17,13,10,.22), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.modal .option-card.active strong,
.modal .option-card.active span,
.modal .addon-row.active .addon-name,
.modal .addon-row.active .addon-price {
  color: #ffffff !important;
}

.modal .option-card.active::after,
.modal .addon-row.active::after {
  content: "✓" !important;
  position: static !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 24px !important;
  margin-left: 8px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #15110f !important;
  font-size: .82rem !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

.modal .addon-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.modal .fake-check {
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #f4eadc !important;
  color: #9c7b58 !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
}

.modal .addon-row.active .fake-check {
  background: #ffffff !important;
  color: #15110f !important;
}

.modal .sauce-qty-card,
.modal .sauce-qty-card.active {
  display: grid !important;
  gap: 12px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,244,225,.82), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffaf2 100%) !important;
  border: 1px solid rgba(29,23,18,.10) !important;
  color: #17120f !important;
  box-shadow: 0 10px 24px rgba(25,18,12,.05), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.modal .sauce-qty-card.active {
  border-color: rgba(200,149,108,.58) !important;
  box-shadow: 0 16px 38px rgba(112,73,34,.12), 0 0 0 3px rgba(200,149,108,.12), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.modal .sauce-qty-card::after,
.modal .sauce-qty-card.active::after {
  content: none !important;
  display: none !important;
}

.modal .sauce-qty-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.modal .sauce-qty-card strong,
.modal .sauce-qty-card.active strong,
.modal .sauce-qty-card b,
.modal .sauce-qty-card.active b {
  color: #17120f !important;
}

.modal .sauce-qty-badge {
  display: grid !important;
  place-items: center !important;
  min-width: 28px !important;
  height: 26px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: #15110f !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  font-size: .78rem !important;
}

.modal .sauce-qty-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: fit-content !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: #f6efe6 !important;
  border: 1px solid rgba(29,23,18,.08) !important;
}

.modal .sauce-qty-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: #15110f !important;
  color: #ffffff !important;
  border: 0 !important;
  font-weight: 950 !important;
}

.modal .sauce-qty-btn:disabled {
  background: #e8ded2 !important;
  color: #a39488 !important;
  opacity: 1 !important;
}

@media (max-width: 560px) {
  .cart-panel .empty-cart-btn,
  #emptyCartBrowseBtn {
    width: auto !important;
    min-width: 150px !important;
  }

  .modal .option-section-card {
    padding: 13px !important;
    border-radius: 19px !important;
  }

  .modal .option-card,
  .modal .addon-row {
    min-height: 54px !important;
    padding: 13px 13px !important;
    border-radius: 15px !important;
  }

  .modal .option-card.active::after,
  .modal .addon-row.active::after {
    width: 28px !important;
    height: 22px !important;
    margin-left: 6px !important;
  }
}

/* =========================================================
   TARGETED FIX — remove duplicated option section cards
   Keep only the option rows/cards themselves styled.
   ========================================================= */
.modal .option-block:not(.item-note-block),
.modal .option-section-card,
.modal .required-choice-group {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.modal .option-block:not(.item-note-block) {
  margin-top: 22px !important;
}

.modal .required-options {
  gap: 22px !important;
}

.modal .option-title,
.modal .compact-title {
  margin-bottom: 10px !important;
  padding: 0 !important;
}

.modal .option-grid,
.modal .addons-list,
.modal .required-options,
.modal .required-choice-grid {
  gap: 10px !important;
}

.modal .option-card,
.modal .addon-row {
  min-height: 58px !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  background: #fffdf8 !important;
  border: 1px solid rgba(29, 23, 18, .09) !important;
  box-shadow: 0 8px 20px rgba(25, 18, 12, .04) !important;
}

.modal .option-card.active,
.modal .addon-row.active {
  background: linear-gradient(135deg, #15110f 0%, #2a201a 100%) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 14px 30px rgba(17, 13, 10, .18), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

.modal .sauce-qty-card,
.modal .sauce-qty-card.active {
  background: #fffdf8 !important;
  border: 1px solid rgba(29, 23, 18, .09) !important;
  box-shadow: 0 8px 20px rgba(25, 18, 12, .04) !important;
}

.modal .sauce-qty-card.active {
  border-color: rgba(200,149,108,.58) !important;
  box-shadow: 0 12px 28px rgba(112,73,34,.10), 0 0 0 3px rgba(200,149,108,.10) !important;
}

@media (max-width: 560px) {
  .modal .option-block:not(.item-note-block) {
    margin-top: 18px !important;
  }

  .modal .required-options {
    gap: 18px !important;
  }

  .modal .option-card,
  .modal .addon-row {
    min-height: 54px !important;
    border-radius: 15px !important;
    padding: 13px 14px !important;
  }
}