/* Matbakh Al Youm — product design system v6
   Additive visual layer: public site, visitor assistant, forms and buttons. */
:root{
  --my-ink:#142b28;
  --my-brand:#153f39;
  --my-brand-2:#24584f;
  --my-brand-3:#d59a52;
  --my-sand:#f6f1e8;
  --my-sand-2:#ece3d4;
  --my-card:#fffdf9;
  --my-line:rgba(20,43,40,.13);
  --my-muted:#66736f;
  --my-success:#23765b;
  --my-danger:#a7443b;
  --my-radius-sm:14px;
  --my-radius:22px;
  --my-radius-lg:32px;
  --my-shadow-sm:0 10px 26px rgba(20,43,40,.08);
  --my-shadow:0 24px 64px rgba(20,43,40,.13);
}
html{background:var(--my-sand)}
body{
  background:
    radial-gradient(circle at 12% -8%,rgba(213,154,82,.14),transparent 28rem),
    radial-gradient(circle at 92% 18%,rgba(36,88,79,.08),transparent 30rem),
    var(--my-sand)!important;
  color:var(--my-ink)!important;
  font-family:"Noto Kufi Arabic","Noto Sans Arabic",Tahoma,Arial,sans-serif!important;
  line-height:1.75;
}
body:has(.site-header){padding-bottom:84px}
main{position:relative}
/* Header */
.site-header{
  width:min(1480px,calc(100% - 28px));
  min-height:76px;
  margin:14px auto 0!important;
  padding:10px 14px 10px 20px!important;
  border:1px solid rgba(255,255,255,.5)!important;
  border-radius:22px!important;
  background:rgba(21,63,57,.93)!important;
  box-shadow:0 18px 52px rgba(10,33,29,.2)!important;
}
.site-header .brand{gap:11px!important;min-width:max-content}
.site-header .brand img{width:52px!important;height:52px!important;border-radius:16px!important;box-shadow:0 8px 20px rgba(0,0,0,.16)}
.site-header .brand b{font-size:16px!important;font-weight:900!important;letter-spacing:-.3px}
.site-header .brand small{font-size:11px!important;color:rgba(255,255,255,.72)!important}
.site-header nav{gap:2px!important}
.site-header nav a{position:relative;border-radius:12px!important;color:rgba(255,255,255,.86)!important;font-size:14px!important;font-weight:800!important;padding-inline:11px!important}
.site-header nav a:hover,.site-header nav a:focus-visible{color:#fff!important;background:rgba(255,255,255,.12)!important;outline:none!important}
.site-header nav a::after{content:"";position:absolute;right:12px;left:12px;bottom:7px;height:2px;transform:scaleX(0);background:var(--my-brand-3);border-radius:99px;transition:transform .18s ease}
.site-header nav a:hover::after{transform:scaleX(1)}
.header-cta,.header-bot-trigger,.header-admin-entry{
  min-height:46px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:14px!important;
  border:1px solid transparent!important;
  padding:10px 15px!important;
  font:800 14px/1.2 inherit!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.header-cta{background:var(--my-brand-3)!important;color:#172e2a!important;box-shadow:0 10px 24px rgba(213,154,82,.24)!important}
.header-cta:hover{transform:translateY(-1px);filter:brightness(1.04)}
.header-bot-trigger{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.22)!important}
.header-bot-trigger:hover{background:rgba(255,255,255,.12)!important}
.header-admin-entry{gap:7px;background:rgba(255,255,255,.1)!important;color:#fff!important;border-color:rgba(255,255,255,.24)!important;white-space:nowrap}
.header-admin-entry:hover{background:rgba(255,255,255,.18)!important;transform:translateY(-1px)}
.header-admin-entry span:first-child{font-size:16px;line-height:1}
/* Main public areas */
.final-hero{
  width:min(1480px,calc(100% - 28px));
  margin:18px auto 0!important;
  border-radius:var(--my-radius-lg)!important;
  background:
    radial-gradient(circle at 83% 20%,rgba(213,154,82,.32),transparent 21rem),
    radial-gradient(circle at 28% 105%,rgba(108,176,155,.18),transparent 22rem),
    linear-gradient(135deg,#163e38 0%,#0d2925 100%)!important;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--my-shadow)!important;
}
.final-hero h1{max-width:16ch;font-weight:900!important;letter-spacing:-1.35px!important}
.final-hero p{max-width:62ch;color:rgba(255,255,255,.84)!important}
.final-card{border-radius:26px!important;border:1px solid rgba(255,255,255,.5)!important;background:rgba(255,253,249,.96)!important}
.final-card li{padding-block:3px}
.final-badge{background:rgba(255,255,255,.1)!important;color:#f9d7aa!important;border-color:rgba(255,255,255,.16)!important}
.final-btn,.btnx,.order-button,.choice-btn,.cms-btn{
  min-height:48px!important;
  border-radius:15px!important;
  font-weight:900!important;
  letter-spacing:0!important;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease!important;
}
.final-btn,.btnx:not(.secondary),.order-button,.cms-btn{
  background:linear-gradient(135deg,#dcaa65,#c8873c)!important;
  color:#1b302d!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 12px 28px rgba(177,112,42,.2)!important;
}
.final-btn:hover,.btnx:not(.secondary):hover,.order-button:hover,.cms-btn:hover{transform:translateY(-2px)!important;box-shadow:0 18px 36px rgba(177,112,42,.27)!important}
.final-btn.secondary,.btnx.secondary{
  color:inherit!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid var(--my-line)!important;
  box-shadow:none!important;
}
.final-hero .final-btn.secondary{color:#fff!important;background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.28)!important}
.final-bot-btn{font:inherit!important;cursor:pointer!important}
.section-final,.sectionx{background:transparent!important}
.section-final.alt{background:rgba(255,255,255,.38)!important;border-block:1px solid rgba(20,43,40,.07)}
.section-head-final h2,.titlex h2,.sectionx h1{color:var(--my-ink)!important;font-weight:900!important;letter-spacing:-.7px}
.section-head-final p,.titlex p{color:var(--my-muted)!important}
.sectionx{
  width:min(1480px,calc(100% - 28px))!important;
  margin:24px auto!important;
  padding:clamp(24px,4vw,46px)!important;
  border:1px solid var(--my-line)!important;
  border-radius:var(--my-radius-lg)!important;
  background:rgba(255,253,249,.78)!important;
  box-shadow:var(--my-shadow-sm)!important;
}
.sectionx.dark{background:linear-gradient(135deg,#163e38,#0d2925)!important;color:#fff!important;border-color:rgba(255,255,255,.11)!important}
.sectionx.dark .titlex h2{color:#fff!important}.sectionx.dark .titlex p{color:rgba(255,255,255,.75)!important}
.menu-search-panel{border-radius:16px!important;border-color:rgba(20,43,40,.16)!important;background:rgba(255,255,255,.84)!important;box-shadow:0 10px 25px rgba(20,43,40,.05)!important}
.menu-quick-filters button{background:rgba(255,255,255,.75)!important;border-color:var(--my-line)!important;color:var(--my-brand)!important}
.menu-quick-filters button.active,.menu-quick-filters button:hover{background:var(--my-brand)!important;color:#fff!important;border-color:var(--my-brand)!important}
.menu-grid{gap:18px!important}.dish-card{background:var(--my-card)!important;border:1px solid var(--my-line)!important;border-radius:22px!important;box-shadow:var(--my-shadow-sm)!important}
.dish-card:hover{transform:translateY(-5px)!important;box-shadow:var(--my-shadow)!important}.dish-card img{height:244px!important}.dish-body{padding:18px!important}.dish-body h3{font-size:22px!important;color:var(--my-ink)!important}.dish-body p{min-height:0!important;color:var(--my-muted)!important;font-size:14px!important}.tag{background:rgba(36,88,79,.1)!important;color:var(--my-brand)!important;border:1px solid rgba(36,88,79,.12)!important}.price{color:#835523!important;background:rgba(213,154,82,.13)!important;border:1px solid rgba(213,154,82,.24)!important}
.service-card,.trust-grid span,.point-card{border:1px solid rgba(255,255,255,.12)!important;border-radius:18px!important}.sectionx:not(.dark) .service-card,.sectionx:not(.dark) .trust-grid span,.sectionx:not(.dark) .point-card{background:#fff!important;border-color:var(--my-line)!important;box-shadow:0 8px 18px rgba(20,43,40,.05)!important}
.contact-rail,.final-cta-strip{width:min(1480px,calc(100% - 28px))!important}.contact-icon-card{background:var(--my-card)!important;border-color:var(--my-line)!important;box-shadow:var(--my-shadow-sm)!important}.contact-icon-card .ico{background:var(--my-brand)!important}
.final-cta-strip{border-radius:28px!important;background:linear-gradient(135deg,#183e38,#0e2824)!important;box-shadow:var(--my-shadow)!important}
.float-wa{left:18px!important;bottom:18px!important;border-radius:16px!important;background:var(--my-brand)!important;box-shadow:0 16px 32px rgba(20,63,57,.28)!important}
.admin-entry-btn{background:rgba(20,43,40,.94)!important;border-radius:14px!important}
/* Inputs and forms */
input:not([type=checkbox]):not([type=radio]),textarea,select{
  min-height:48px;border:1px solid rgba(20,43,40,.18)!important;background:#fffefb!important;border-radius:14px!important;color:var(--my-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)!important;
}
textarea{min-height:108px!important;padding-top:12px!important}
input:focus,textarea:focus,select:focus{outline:3px solid rgba(213,154,82,.22)!important;outline-offset:0!important;border-color:#c8873c!important}
/* Visitor assistant */
.visitor-bot-launcher{
  position:fixed;z-index:230;right:18px;bottom:18px;min-height:54px;padding:11px 16px;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.18);border-radius:17px;background:linear-gradient(135deg,#1a4b43,#123a34);color:#fff;font:900 14px/1.2 inherit;cursor:pointer;box-shadow:0 20px 46px rgba(20,43,40,.28);
}
.visitor-bot-launcher:hover{transform:translateY(-2px)}
.visitor-bot-launcher .bot-launcher-dot{width:9px;height:9px;border-radius:99px;background:#78d5a7;box-shadow:0 0 0 5px rgba(120,213,167,.14)}
.visitor-bot-dialog{position:fixed;z-index:240;right:18px;bottom:84px;width:min(410px,calc(100vw - 28px));display:none;border:1px solid rgba(20,43,40,.16);border-radius:24px;background:#fffdfa;box-shadow:0 30px 80px rgba(13,38,34,.27);overflow:hidden}
.visitor-bot-dialog.is-open{display:flex;flex-direction:column;animation:botSlideIn .2s ease both}.visitor-bot-dialog[hidden]{display:none!important}@keyframes botSlideIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.visitor-bot-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 17px;background:linear-gradient(135deg,#193f3a,#12332f);color:#fff}.visitor-bot-head-copy{display:flex;gap:10px;align-items:center}.visitor-bot-avatar{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:rgba(213,154,82,.95);color:#1a302c;font-size:17px;font-weight:900}.visitor-bot-head h2{font-size:15px;margin:0;font-weight:900}.visitor-bot-head p{font-size:11px;margin:2px 0 0;color:rgba(255,255,255,.72)}.visitor-bot-close{width:36px;height:36px;border:0;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;font-size:22px;cursor:pointer}
.visitor-bot-body{max-height:min(64vh,590px);overflow:auto;padding:14px;background:linear-gradient(180deg,#f9f5ee,#fffdfa)}.visitor-bot-log{display:grid;gap:10px}.visitor-bot-message{width:max-content;max-width:87%;border-radius:15px;padding:10px 12px;font-size:13px;line-height:1.7;box-shadow:0 6px 14px rgba(20,43,40,.05)}.visitor-bot-message.is-bot{background:#fff;border:1px solid var(--my-line);border-top-right-radius:5px}.visitor-bot-message.is-user{justify-self:end;background:#1d554c;color:#fff;border-top-left-radius:5px}.visitor-bot-message small{display:block;margin-top:4px;opacity:.72;font-size:10px}.visitor-bot-quick{display:flex;gap:8px;overflow:auto;padding:11px 1px 2px}.visitor-bot-quick button{flex:0 0 auto;min-height:36px;border:1px solid rgba(20,63,57,.16);border-radius:999px;background:#fff;color:#1a4b43;padding:7px 10px;font:800 12px/1.3 inherit;cursor:pointer}.visitor-bot-quick button:hover{background:#edf5f1}
.visitor-bot-form{display:grid;gap:9px;margin-top:12px;border-top:1px solid rgba(20,43,40,.1);padding-top:12px}.visitor-bot-form label{font-size:12px;font-weight:900;color:#244b44}.visitor-bot-form textarea,.visitor-bot-form input{width:100%;font-size:13px}.visitor-bot-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.visitor-bot-consent{display:flex;align-items:flex-start;gap:8px;padding:9px 10px;border:1px dashed rgba(20,63,57,.22);border-radius:13px;background:rgba(237,245,241,.65);font-size:11px;line-height:1.65;color:#405e58}.visitor-bot-consent input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--my-brand)}.visitor-bot-actions{display:grid;grid-template-columns:1fr auto;gap:8px}.visitor-bot-send{border:0;border-radius:14px;background:linear-gradient(135deg,#dcaa65,#c8873c);color:#1a302c;min-height:46px;font:900 13px/1.2 inherit;cursor:pointer}.visitor-bot-consent-action{display:none;border:1px solid rgba(20,63,57,.18);border-radius:14px;background:#fff;color:#17463e;padding:9px 11px;font:800 12px/1.2 inherit;cursor:pointer}.visitor-bot-consent-action.is-visible{display:block}.visitor-bot-privacy{margin:0;font-size:10px;line-height:1.6;color:#71807b}.visitor-bot-privacy a{color:#315f56;font-weight:800}
@media (max-width:820px){
  .site-header{width:calc(100% - 20px);margin-top:10px!important;border-radius:18px!important}.site-header .header-admin-entry{grid-column:1/2;grid-row:4;width:100%;padding-inline:10px!important}.site-header .header-bot-trigger{grid-column:2/-1;grid-row:4;width:100%;order:unset!important}.site-header .header-cta{grid-row:2!important}.final-hero{width:calc(100% - 20px);margin-top:10px!important;border-radius:24px!important}.final-hero h1{max-width:none}.sectionx{width:calc(100% - 20px)!important;border-radius:24px!important}.contact-rail,.final-cta-strip{width:calc(100% - 20px)!important}.dish-card img{height:220px!important}
}
@media (max-width:560px){
  body:has(.site-header){padding-bottom:82px}.site-header .header-admin-entry{grid-column:1/-1;grid-row:4}.site-header .header-bot-trigger{grid-column:1/-1;grid-row:5}.visitor-bot-launcher{right:12px;bottom:12px;min-height:50px;padding:10px 13px;border-radius:15px}.visitor-bot-dialog{right:10px;bottom:70px;width:calc(100vw - 20px);border-radius:20px}.visitor-bot-body{max-height:67vh}.visitor-bot-form-grid,.visitor-bot-actions{grid-template-columns:1fr}.visitor-bot-consent-action{min-height:40px}.header-bot-trigger{min-height:44px!important}.final-actions .final-btn,.final-actions .final-bot-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.visitor-bot-dialog.is-open{animation:none}.site-header nav a::after{transition:none}.final-btn,.btnx,.order-button,.visitor-bot-launcher{transition:none!important}}