/* =========================================================
   وزير الحلو — Design tokens
   Indigo  #3D3A75  (from the wordmark)
   Red     #E4344A  (accent, hotline / CTA)
   Green   #2E9E5B  (checkmarks + eHotline mark)
   Gold    #F2B705  (diamonds / eHotline swirl)
   Cream   #FFF8EC  (base — warm custard, not the generic beige)
   Ink     #241F3A  (near-black with a plum cast)
========================================================= */
:root{
  --indigo:#3D3A75;
  --indigo-deep:#2A2853;
  --red:#E4344A;
  --green:#2E9E5B;
  --gold:#F2B705;
  --cream:#FFF8EC;
  --cream-2:#FFF1D9;
  --ink:#241F3A;
  --white:#FFFFFF;
  --shadow: 0 10px 30px rgba(36,31,58,.12);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --header-h: 128px;
  --bottomnav-h: 68px;
  --font-display: 'Lalezar', 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Cairo', 'Tajawal', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  direction:rtl;
  overflow-x:hidden;
  padding-top:var(--header-h);
  padding-bottom:calc(var(--bottomnav-h) + 10px);
}
html[lang="en"] body{direction:ltr;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
ul{list-style:none;margin:0;padding:0;}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px;}

@media (min-width:900px){
  body{padding-bottom:40px;}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

/* ================= HEADER ================= */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:60;
  background:var(--white);
  box-shadow:0 4px 18px rgba(36,31,58,.08);
}
.hotline-bar{
  background:var(--indigo);
  color:var(--white);
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:.5px;
  text-align:center;
  padding:6px 10px;
}
.hotline-bar a{ color:var(--gold); font-weight:700; }
.hotline-bar .mark{height:16px;vertical-align:middle;margin-inline-end:6px;}

.header-main{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand img{height:76px;width:auto;border-radius:5px;}
.brand-name{
  font-family:var(--font-display);
  font-size:22px;
  color:var(--indigo);
  line-height:1.1;
}
.brand-name small{
  display:block;
  font-family:var(--font-body);
  font-size:11px;
  color:var(--red);
  font-weight:700;
}

.header-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{
  width:42px;height:42px;border-radius:50%;
  border:none;background:var(--cream-2);
  display:flex;align-items:center;justify-content:center;
  color:var(--indigo);
  transition:transform .25s ease, background .25s ease;
}
.icon-btn:hover{background:var(--gold);transform:translateY(-2px) rotate(-4deg);}
.icon-btn svg{width:20px;height:20px;}

.quick-row{
  display:flex;
  border-top:1px solid #F1E8D6;
}
.quick-row a{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 4px;
  font-size:12.5px; font-weight:700;
  color:var(--indigo-deep);
  border-inline-end:1px solid #F1E8D6;
  transition:background .2s ease, color .2s ease;
}
.quick-row a:last-child{border-inline-end:none;}
.quick-row a svg{width:17px;height:17px;flex-shrink:0;}
.quick-row a:hover{background:var(--cream-2);color:var(--red);}
.quick-row a.hotline svg{color:var(--red);}
.quick-row a.whatsapp svg{color:var(--green);}
.quick-row a.shop svg{color:var(--gold);}

/* ================ SIDE NAV (Menu icon) ================ */
.side-nav-backdrop{
  position:fixed;inset:0;background:rgba(36,31,58,.55);
  opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:90;
}
.side-nav-backdrop.open{opacity:1;pointer-events:all;}
.side-nav{
  position:fixed; top:0; bottom:0; inset-inline-end:0;
  width:min(320px,84vw);
  background:var(--indigo);
  color:var(--white);
  z-index:95;
  transform:translateX(105%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  padding:24px 22px;
  display:flex;flex-direction:column;gap:6px;
}
html[dir="rtl"] .side-nav{transform:translateX(-105%);}
.side-nav.open{transform:translateX(0);}
.side-nav-close{
  align-self:flex-start;
  background:rgba(255,255,255,.12);
  border:none;color:var(--white);
  width:36px;height:36px;border-radius:50%;
  margin-bottom:14px;
}
.side-nav a{
  padding:13px 10px;font-size:17px;font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;gap:10px;
}
.side-nav a svg{width:18px;height:18px;color:var(--gold);}
.side-nav a:hover{color:var(--gold);}

/* ================ HERO / FADE BANNER ================ */
.hero{
  position:relative;
  
}
@media (min-width:900px){
  .hero{ margin-top:26px; }
  .hero .fade-banner-wrap{
    width:100vw; position:relative; left:50%; right:50%;
    margin-left:-50vw; margin-right:-50vw;
  }
}
.fade-banner{
  position:relative;
  height:min(62vw,420px);
  min-height:260px;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
}
@media (min-width:900px){
  .fade-banner{ height:520px; border-radius:0; max-width:none; }
}
@media (min-width:1400px){
  .fade-banner{ height:600px; }
}
.fade-slide{
  position:absolute;inset:0;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.1s ease, transform 6s ease;
}
.fade-slide.active{opacity:1;transform:scale(1);z-index:2;}
.fade-slide img{width:100%;height:100%;object-fit:cover;}
.fade-slide .caption{
  position:absolute; inset-inline:0; bottom:0;
  padding:26px 22px 20px;
  background:linear-gradient(0deg, rgba(36,31,58,.86), rgba(36,31,58,0));
  color:var(--white);
}
.fade-slide .caption span{
  font-family:var(--font-display);
  font-size:clamp(22px,5vw,32px);
  color:var(--gold);
}
.fade-slide .caption small{display:block;font-size:13px;opacity:.85;margin-top:2px;}

.fade-dots{
  position:absolute; bottom:12px; inset-inline-end:16px; z-index:3;
  display:flex; gap:6px;
}
.fade-dots button{
  width:8px;height:8px;border-radius:50%;
  border:none;background:rgba(255,255,255,.55);
  transition:all .3s ease;
}
.fade-dots button.active{background:var(--gold);width:22px;border-radius:5px;}

.hero-tagline{
  text-align:center;
  padding:22px 16px 6px;
}
.hero-tagline h1{
  font-family:var(--font-display);
  font-size:clamp(26px,6vw,42px);
  color:var(--indigo);
  margin:0 0 6px;
}
.hero-tagline p{
  margin:0; color:#5b5678; font-size:15px;
  max-width:520px;margin-inline:auto;
}

/* ================ SECTION HEADINGS ================ */
.section{padding:34px 0;}
.section-head{text-align:center;margin-bottom:22px;}
.section-head h2{
  font-family:var(--font-display);
  color:var(--indigo);
  font-size:clamp(24px,4.5vw,34px);
  margin:0 0 6px;
}
.section-head p{margin:0;color:#6b6685;font-size:14px;}
.section.tinted{background:var(--cream-2);}

/* ================ ACTIONS GRID (branch/nearest/menu) ================ */
.actions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
}
.action-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:22px 14px;
  text-align:center;
  box-shadow:var(--shadow);
  border:1px solid #F1E8D6;
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative;
  overflow:hidden;
}
.action-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(36,31,58,.16);}
.action-card .ic{
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px;
  background:radial-gradient(circle at 30% 30%, var(--gold), #d99e00);
  color:var(--indigo-deep);
}
.action-card .ic svg{width:28px;height:28px;}
.action-card h3{margin:0 0 4px;font-size:16px;color:var(--indigo);}
.action-card p{margin:0;font-size:12.5px;color:#75708f;}

.action-card.nearest .ic{
  background:radial-gradient(circle at 30% 30%, var(--green), #1f7a44);
  color:var(--white);
  animation:pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 rgba(46,158,91,.45);}
  70%{box-shadow:0 0 0 16px rgba(46,158,91,0);}
  100%{box-shadow:0 0 0 0 rgba(46,158,91,0);}
}
.action-card.nearest .pin{
  position:absolute; inset-inline-start:14px; top:12px;
  color:var(--red); width:16px;height:16px;
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

/* ================ MENU / PRODUCT TEASER STRIP ================ */
.menu-strip{
  display:flex; gap:14px; overflow-x:auto; padding:6px 2px 14px;
  scroll-snap-type:x proximity;
}
.menu-strip::-webkit-scrollbar{height:6px;}
.menu-strip::-webkit-scrollbar-thumb{background:#e4d9bd;border-radius:6px;}
.menu-card{
  flex:0 0 150px; scroll-snap-align:start;
  background:var(--white); border-radius:var(--radius-sm);
  overflow:hidden; box-shadow:var(--shadow);
  border:1px solid #F1E8D6;
}
.menu-card img{height:110px;width:100%;object-fit:cover;}
.menu-card span{display:block;padding:9px 8px;font-size:12.5px;font-weight:700;color:var(--indigo-deep);text-align:center;}
.menu-cta{text-align:center;margin-top:10px;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:999px;
  background:var(--red);color:var(--white);
  font-weight:700; font-size:15px; border:none;
  box-shadow:0 10px 22px rgba(228,52,74,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(228,52,74,.4);}
.btn.ghost{
  background:transparent;color:var(--indigo);
  border:2px solid var(--indigo); box-shadow:none;
}
.btn.gold{background:var(--gold);color:var(--indigo-deep);box-shadow:0 10px 22px rgba(242,183,5,.4);}
.btn svg{width:18px;height:18px;}

/* ================ BRANCHES ================ */
.branch-search{
  max-width:420px;margin:0 auto 20px;position:relative;
}
.branch-search input{
  width:100%;padding:13px 44px 13px 16px;
  border-radius:999px;border:2px solid #E9DFC4;
  font-family:var(--font-body);font-size:14.5px;
  background:var(--white);
}
.branch-search svg{
  position:absolute; inset-inline-end:16px; top:50%; transform:translateY(-50%);
  width:18px;height:18px;color:#a49cc4;
}
.branches-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
}
.branch-card{
  background:var(--white); border-radius:var(--radius-md);
  padding:18px; box-shadow:var(--shadow); border:1px solid #F1E8D6;
  transition:transform .25s ease, border-color .25s ease;
  cursor:pointer;
}
.branch-card:hover{transform:translateY(-4px);border-color:var(--gold);}
.branch-card h3{
  margin:0 0 6px; font-size:16.5px; color:var(--indigo);
  display:flex;align-items:center;gap:8px;
}
.branch-card h3 svg{width:16px;height:16px;color:var(--red);flex-shrink:0;}
.branch-card p{margin:0 0 10px;font-size:13px;color:#6b6685;line-height:1.6;min-height:42px;}
.branch-card .row{display:flex;gap:8px;flex-wrap:wrap;}
.branch-card .chip{
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px;
  background:var(--cream-2); color:var(--indigo-deep);
  display:flex;align-items:center;gap:5px;
}
.branch-card .chip svg{width:13px;height:13px;}
.branch-card.distance-tag .badge{
  display:inline-block;margin-inline-start:8px;font-size:11px;
  background:var(--green);color:var(--white);padding:2px 9px;border-radius:999px;
}

/* ================ SOCIAL ================ */
.social-row{
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
}
.social-btn{
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--white); box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.social-btn:hover{transform:translateY(-6px) scale(1.08) rotate(-6deg);}
.social-btn svg{width:26px;height:26px;}
.social-btn.fb{background:#1877F2;}
.social-btn.ig{background:radial-gradient(circle at 30% 110%, #fdf497, #fd5949 45%, #d6249f 60%, #285AEB 90%);}
.social-btn.tt{background:#000;}

/* ================ FOOTER (desktop) ================ */
.site-footer{
  background:var(--indigo-deep); color:#cfccea;
  padding:36px 0 18px; margin-top:20px;
  display:none;
}
@media (min-width:900px){ .site-footer{display:block;} }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:26px;
}
.footer-grid h4{color:var(--white);font-family:var(--font-display);font-size:18px;margin:0 0 12px;}
.footer-grid a{display:block;padding:5px 0;font-size:13.5px;color:#cfccea;}
.footer-grid a:hover{color:var(--gold);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:24px;padding-top:16px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:12.5px;
}
.footer-bottom a{color:var(--gold);font-weight:700;}

/* ================ MOBILE BOTTOM NAV ================ */
.bottom-nav{
  position:fixed; inset-inline:0; bottom:0; z-index:70;
  height:var(--bottomnav-h);
  background:var(--white);
  box-shadow:0 -6px 20px rgba(36,31,58,.12);
  display:grid; grid-template-columns:repeat(6,1fr);
}
@media (min-width:900px){ .bottom-nav{display:none;} }
.bottom-nav button, .bottom-nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px; background:none;border:none; color:var(--indigo-deep);
  font-size:10.5px; font-weight:700;
}
.bottom-nav svg{width:20px;height:20px;}
.bottom-nav .active{color:var(--red);}

/* ================ BACK TO TOP ================ */
.back-top{
  position:fixed; inset-inline-end:16px; bottom:calc(var(--bottomnav-h) + 16px);
  width:46px;height:46px;border-radius:50%;
  background:var(--indigo); color:var(--white); border:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow); z-index:65;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:all .3s ease;
}
.back-top.show{opacity:1;pointer-events:all;transform:translateY(0);}
@media (min-width:900px){ .back-top{bottom:24px;} }
.back-top svg{width:20px;height:20px;}

/* ================ MODALS ================ */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(36,31,58,.6);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  z-index:120;
}
@media (min-width:700px){ .modal-backdrop{align-items:center;} }
.modal-backdrop.open{opacity:1;pointer-events:all;}
.modal{
  background:var(--white); width:100%; max-width:460px;
  border-radius:24px 24px 0 0; padding:24px 22px 28px;
  transform:translateY(30px); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  max-height:82vh; overflow-y:auto;
}
@media (min-width:700px){ .modal{border-radius:24px;transform:scale(.92);} }
.modal-backdrop.open .modal{transform:translateY(0) scale(1);}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.modal-head h3{margin:0;font-family:var(--font-display);color:var(--indigo);font-size:20px;}
.modal-close{
  width:34px;height:34px;border-radius:50%;border:none;background:var(--cream-2);color:var(--indigo);
}
.modal-sub{font-size:12.5px;color:#8a84a5;margin:-8px 0 14px;font-weight:700;}

.grid-icons{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
@media (min-width:420px){ .grid-icons{grid-template-columns:repeat(5,1fr);} }
.grid-icons a{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:11px;font-weight:700;color:var(--indigo-deep);
}
.grid-icons .circ{
  width:48px;height:48px;border-radius:50%;color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease;
}
.grid-icons a:hover .circ{transform:scale(1.1);}
.grid-icons svg{width:22px;height:22px;}

.install-tabs{display:flex;gap:8px;margin-bottom:16px;}
.install-tabs button{
  flex:1;padding:10px;border-radius:12px;border:2px solid #E9DFC4;
  background:var(--white);font-weight:700;color:var(--indigo-deep);font-size:13.5px;
}
.install-tabs button.active{background:var(--indigo);border-color:var(--indigo);color:var(--white);}
.install-panel{display:none;}
.install-panel.active{display:block;}
.install-panel ol{padding-inline-start:20px;margin:0 0 14px;font-size:13.5px;line-height:2;color:#4f4a6b;}
.install-panel ol[dir="ltr"]{padding-inline-start:0;padding-inline-end:20px;}

/* Branch detail modal (map) */
.branch-modal iframe{
  width:100%; height:220px; border:0; border-radius:14px; margin-bottom:14px;
}
.branch-modal .addr{font-size:13.5px;color:#57516f;line-height:1.7;margin-bottom:14px;}
.branch-modal .cta-row{display:flex;gap:10px;flex-wrap:wrap;}

/* nearest branch result toast */
.locate-status{
  position:fixed; top:calc(var(--header-h) + 10px); inset-inline:16px; z-index:80;
  background:var(--indigo); color:var(--white); padding:12px 16px; border-radius:14px;
  box-shadow:var(--shadow); font-size:13.5px; display:flex; gap:10px; align-items:center;
  transform:translateY(-16px); opacity:0; pointer-events:none; transition:all .3s ease;
}
.locate-status.show{transform:translateY(0);opacity:1;}
.locate-status svg{width:18px;height:18px;flex-shrink:0;color:var(--gold);}

/* ================ ABOUT / VALUES ================ */
.values-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;
}
.value-card{
  background:var(--white);border-radius:var(--radius-md);padding:20px 16px;text-align:center;
  border:1px solid #F1E8D6;
}
.value-card .n{font-family:var(--font-display);font-size:30px;color:var(--red);}
.value-card p{margin:2px 0 0;font-size:13px;color:#6b6685;}

/* language toggle small pill (desktop, in header) */
.lang-pill{
  display:inline-flex;align-items:center;gap:5px;
  border:2px solid var(--indigo); color:var(--indigo);
  border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:800;
}

/* utility reveal-on-scroll (single orchestrated entrance) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* skip link */
.skip-link{
  position:fixed; right:-999px; top:0; background:var(--indigo); color:#fff;
  padding:10px 16px; z-index:200; border-radius:0 0 10px 10px;
}
.skip-link:focus{right:10px;}

/* ================ BRANCHES DIRECTORY PAGE ================ */
.branches-hero{ padding:34px 0 6px; text-align:center; position:relative; }
.branches-hero-inner{ max-width:640px; margin:0 auto; position:relative; }
.branches-hero h1{
  font-family:var(--font-display); color:var(--indigo);
  font-size:clamp(26px,6vw,40px); margin:8px 0 8px;
}
.branches-hero p{ color:#6b6685; font-size:14.5px; margin:0 0 18px; }
.floaty-pin{
  display:inline-flex; width:56px;height:56px;border-radius:50%;
  align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 30%, var(--red), #a11e2f);
  color:var(--white); margin-bottom:6px;
  animation:floatPin 2.6s ease-in-out infinite;
  box-shadow:0 10px 24px rgba(228,52,74,.35);
}
.floaty-pin svg{width:26px;height:26px;}
@keyframes floatPin{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(-6deg); }
}

.gov-chips{
  display:flex; gap:10px; overflow-x:auto; padding:4px 2px 22px;
  justify-content:center; flex-wrap:wrap;
}
.chip-filter{
  border:2px solid #E9DFC4; background:var(--white); color:var(--indigo-deep);
  padding:9px 16px; border-radius:999px; font-weight:800; font-size:13.5px;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  transition:all .25s ease;
}
.chip-filter .count{
  background:var(--cream-2); color:var(--indigo); border-radius:999px;
  padding:1px 8px; font-size:11.5px;
}
.chip-filter.active{
  background:var(--indigo); border-color:var(--indigo); color:var(--white);
}
.chip-filter.active .count{ background:rgba(255,255,255,.2); color:var(--white); }
.chip-filter:hover{ transform:translateY(-2px); border-color:var(--gold); }

.gov-section{ margin-bottom:34px; }
.gov-title{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-display); color:var(--indigo);
  font-size:22px; margin:0 0 16px;
}
.gov-title span{ flex:1; height:2px; background:linear-gradient(90deg, transparent, #E9DFC4, transparent); }

/* ================ SITE-WIDE EXTRA MOTION ================ */
/* animated underline draw-in for section headings */
.section-head h2{ position:relative; display:inline-block; }
.section-head h2::after{
  content:""; position:absolute; right:0; left:0; bottom:-6px; height:3px;
  background:linear-gradient(90deg, var(--gold), var(--red));
  border-radius:3px; transform:scaleX(0); transform-origin:center;
  transition:transform .6s ease .1s;
}
.section-head.in h2::after{ transform:scaleX(1); }

/* logo intro pop */
.brand img{ animation:logoPop .7s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes logoPop{
  0%{ transform:scale(.4) rotate(-12deg); opacity:0; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
.brand-name{ animation:fadeSlideIn .7s ease .15s both; }
@keyframes fadeSlideIn{
  0%{ opacity:0; transform:translateX(8px); }
  100%{ opacity:1; transform:translateX(0); }
}
html[dir="ltr"] .brand-name{ animation-name:fadeSlideInLtr; }
@keyframes fadeSlideInLtr{
  0%{ opacity:0; transform:translateX(-8px); }
  100%{ opacity:1; transform:translateX(0); }
}

/* animated shimmer sweep on primary buttons */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
}
.btn:hover::before{ animation:shimmer 1.1s ease; }
@keyframes shimmer{ to{ transform:translateX(120%); } }

/* gentle icon float loop inside action cards */
.action-card .ic{ animation:iconFloat 3.4s ease-in-out infinite; }
.action-card:nth-child(2) .ic{ animation-delay:.3s; }
.action-card:nth-child(3) .ic{ animation-delay:.6s; }
.action-card:nth-child(4) .ic{ animation-delay:.9s; }
@keyframes iconFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
.action-card.nearest .ic{ animation:pulseRing 2.2s ease-out infinite; }

/* sprinkle decorations drifting behind the hero tagline */
.hero-tagline{ position:relative; }
.hero-tagline::before, .hero-tagline::after{
  content:"✦"; position:absolute; color:var(--gold); font-size:20px;
  animation:sprinkleDrift 5s ease-in-out infinite;
  opacity:.7;
}
.hero-tagline::before{ top:-6px; inset-inline-start:10%; animation-delay:.2s; }
.hero-tagline::after{ bottom:0; inset-inline-end:12%; color:var(--red); font-size:16px; animation-delay:1.4s; }
@keyframes sprinkleDrift{
  0%,100%{ transform:translateY(0) rotate(0deg); opacity:.6; }
  50%{ transform:translateY(-10px) rotate(25deg); opacity:1; }
}

/* social icons idle bounce */
.social-btn{ animation:socialIdle 3.6s ease-in-out infinite; }
.social-btn.ig{ animation-delay:.2s; }
.social-btn.tt{ animation-delay:.4s; }
@keyframes socialIdle{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

/* confetti sprinkles falling gently over the hero */
.confetti{
  position:absolute; inset-inline-start:var(--x,10%); top:-20px;
  width:10px;height:14px; border-radius:3px;
  background:var(--c, var(--gold));
  opacity:.85; pointer-events:none;
  animation:confettiFall var(--dur,7s) linear infinite;
  animation-delay:var(--delay,0s);
  transform:rotate(var(--rot,0deg));
}
@keyframes confettiFall{
  0%{ transform:translateY(-20px) rotate(0deg); opacity:0; }
  10%{ opacity:.9; }
  100%{ transform:translateY(420px) rotate(340deg); opacity:0; }
}

/* rank-colored nearest-branch badges */
.branch-card .badge.rank-1{ background:var(--gold); color:var(--indigo-deep); font-weight:900; }
.branch-card .badge.rank-2{ background:#c7cbe0; color:var(--indigo-deep); }
.branch-card .badge.rank-3{ background:#e2b98a; color:var(--indigo-deep); }
.branch-card.is-nearest{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(242,183,5,.25), var(--shadow); }

/* nearest summary strip */
.nearest-summary{
  display:flex; gap:12px; overflow-x:auto; padding:4px 2px 20px; margin-top:-6px;
}
.nearest-summary .ns-card{
  flex:0 0 auto; background:var(--white); border:2px solid var(--gold);
  border-radius:16px; padding:12px 16px; min-width:150px;
  box-shadow:var(--shadow);
}
.nearest-summary .ns-card .rank{
  font-family:var(--font-display); color:var(--red); font-size:13px;
}
.nearest-summary .ns-card h4{ margin:2px 0; font-size:14.5px; color:var(--indigo); }
.nearest-summary .ns-card .km{ font-size:12.5px; color:#6b6685; font-weight:700; }

/* subtle tilt on menu / product cards */
.menu-card, .branch-card{ transition:transform .3s ease, box-shadow .3s ease, border-color .25s ease; }
.menu-card:hover{ transform:translateY(-6px) rotate(-1deg); box-shadow:0 16px 30px rgba(36,31,58,.16); }

.branch-card .card-link{ display:block; color:inherit; }
.branch-card .chip-action{
  border:none; cursor:pointer; font-family:inherit;
}
.branch-card .chip-action:hover{ background:var(--gold); }

::selection{background:var(--gold);color:var(--ink);}