@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ===========================================================================
   Dexichef landing pages
   Styles for /for-restaurants, /for-drivers, /for-business, /how-it-works,
   /careers and /cities.

   Everything that could affect existing pages is scoped to the `.dx-lp`
   wrapper those views are rendered inside; the `dx-*` component classes only
   exist on those pages. Nothing here restyles the rest of the site.

   This theme bundles Bootstrap 4.3.1, so the Bootstrap 5 helpers the views use
   (row gutters, gap utilities, accordion chrome) are defined here too.
   =========================================================================== */

:root{
  /* Brand */
  --dx-primary:#F0502A;
  --dx-primary-dark:#C93E1D;
  --dx-primary-light:#FF7A54;
  --dx-primary-50:#FFF1EC;
  --dx-primary-100:#FFDFD3;

  /* Ink & surfaces */
  --dx-ink:#16181D;
  --dx-ink-700:#2A2D35;
  --dx-ink-500:#5B5F6B;
  --dx-ink-300:#9296A1;
  --dx-ink-100:#EDE7E0;
  --dx-bg:#FFFBF7;
  --dx-surface:#FFFFFF;
  --dx-surface-alt:#FBF4EE;

  /* Accents */
  --dx-gold:#F5A623;
  --dx-green:#1FAA59;

  /* Shape */
  --dx-radius-sm:8px;
  --dx-radius-md:14px;
  --dx-radius-lg:8px 22px 22px 22px;
  --dx-radius-pill:999px;

  /* Elevation */
  --dx-shadow-xs:0 1px 2px rgba(22,24,29,.06);
  --dx-shadow-sm:0 2px 8px rgba(22,24,29,.07);
  --dx-shadow-md:0 10px 28px rgba(22,24,29,.10);
  --dx-shadow-primary:0 10px 24px rgba(240,80,42,.28);
  --dx-shadow-sticker-hover:8px 8px 0 var(--dx-primary-100);

  /* Type */
  --dx-font-display:'Plus Jakarta Sans','Open Sans',sans-serif;
  --dx-font-body:'Inter','Open Sans',sans-serif;
}

[dir="rtl"] :root{
  --dx-radius-lg:22px 8px 22px 22px;
}

/* ---------- Page shell ---------- */
.dx-lp{
  background:var(--dx-bg);
  color:var(--dx-ink-700);
  font-family:var(--dx-font-body);
  padding-bottom:1px;              /* contains the children's margins */
}
.dx-lp h1,.dx-lp h2,.dx-lp h3,.dx-lp h4,.dx-lp h5,.dx-lp h6{
  font-family:var(--dx-font-display); color:var(--dx-ink); font-weight:800; letter-spacing:-0.01em;
}
.dx-lp p{ line-height:1.6; }
.dx-lp a{ color:var(--dx-primary); }
.dx-lp a:hover{ color:var(--dx-primary-dark); }
.dx-lp .text-muted{ color:var(--dx-ink-500) !important; }

/* ---------- Buttons (scoped: the rest of the site keeps its own) ---------- */
.dx-lp .btn{
  border-radius:var(--dx-radius-pill);
  font-weight:700;
  padding:.6rem 1.5rem;
}
.dx-lp .btn-lg{ padding:.8rem 1.9rem; font-size:1rem; }
.dx-lp .btn-primary{
  background:var(--dx-primary); border-color:var(--dx-primary); color:#fff;
  box-shadow:var(--dx-shadow-primary);
}
.dx-lp .btn-primary:hover,.dx-lp .btn-primary:focus{
  background:var(--dx-primary-dark); border-color:var(--dx-primary-dark); color:#fff;
}
.dx-lp .btn-outline-secondary{
  border:1.5px solid var(--dx-ink-100); background:var(--dx-surface); color:var(--dx-ink);
}
.dx-lp .btn-outline-secondary:hover{
  background:var(--dx-primary-50); border-color:var(--dx-primary); color:var(--dx-primary-dark);
}
.dx-lp .btn-light{ background:#fff; color:var(--dx-primary-dark); border:none; font-weight:800; }
.dx-lp .btn-link{ color:var(--dx-primary); font-weight:700; padding:0; box-shadow:none; }
.dx-lp .btn-link:hover{ color:var(--dx-primary-dark); text-decoration:underline; }
/* Outline button that stays legible on a photo hero */
.dx-lp .btn-ghost-light{
  background:transparent; color:#fff; font-weight:700;
  border:1.5px solid rgba(255,255,255,.4);
}
.dx-lp .btn-ghost-light:hover,.dx-lp .btn-ghost-light:focus{
  background:rgba(255,255,255,.14); border-color:#fff; color:#fff;
}

/* ---------- Bootstrap 5 helpers this theme's Bootstrap 4.3.1 lacks ---------- */
.dx-lp .gap-2{ gap:.5rem !important; }
.dx-lp .gap-3{ gap:1rem !important; }
.dx-lp .gap-4{ gap:1.5rem !important; }
.dx-lp .row.g-4{ margin-inline:-.75rem; }
.dx-lp .row.g-4 > [class*="col"]{ padding-inline:.75rem; margin-bottom:1.5rem; }

/* ---------- Shared bits ---------- */
.dx-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--dx-primary-50); color:var(--dx-primary-dark);
  border-radius:var(--dx-radius-pill); padding:.35rem .9rem; font-weight:700; font-size:.8rem;
}
.dx-sub{ color:var(--dx-ink-500); font-size:1.05rem; }
.dx-section-title{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.2rem; flex-wrap:wrap; gap:.5rem; }
.dx-section-title h2{ font-size:1.5rem; margin:0; }
.dx-stars{ color:var(--dx-gold); letter-spacing:1px; }

/* ---------- Photo hero ---------- */
.dx-lp-hero{
  position:relative; overflow:hidden; color:#fff;
  background:var(--dx-ink); border-radius:12px 28px 28px 28px;
  min-height:460px; display:flex; align-items:center;
}
.dx-lp-hero-media{ position:absolute; inset:0; z-index:0; }
.dx-lp-hero-media img{ width:100%; height:100%; object-fit:cover; }
.dx-lp-hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(22,24,29,.95) 0%, rgba(22,24,29,.86) 42%, rgba(22,24,29,.28) 100%);
}
[dir="rtl"] .dx-lp-hero::before{
  background:linear-gradient(270deg, rgba(22,24,29,.95) 0%, rgba(22,24,29,.86) 42%, rgba(22,24,29,.28) 100%);
}
.dx-lp-hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(55% 85% at 88% 12%, rgba(240,80,42,.30), transparent 62%);
}
.dx-lp-hero-body{ position:relative; z-index:2; width:100%; padding:4rem 2.5rem; }
.dx-lp-hero h1{ color:#fff; font-size:clamp(2.1rem,5vw,3.5rem); letter-spacing:-0.02em; }
.dx-lp-hero .dx-sub{ color:rgba(255,255,255,.78); font-size:1.1rem; max-width:620px; }
.dx-lp-hero .dx-eyebrow{ background:rgba(255,255,255,.16); color:#fff; }

.dx-stat-row{ display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:2.2rem; }
.dx-stat{ display:flex; flex-direction:column; }
.dx-stat .dx-stat-num{
  font-family:var(--dx-font-display); font-size:2.1rem; font-weight:800; color:var(--dx-primary-light);
}
.dx-stat .dx-stat-label{ font-size:.85rem; color:rgba(255,255,255,.65); }

/* ---------- Fixed-ratio photo frame (3:2 default) ---------- */
.dx-photo{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--dx-radius-lg); box-shadow:var(--dx-shadow-md); background:var(--dx-surface-alt);
}
.dx-photo::before{ content:''; display:block; padding-top:66%; }
.dx-photo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.dx-photo.dx-ratio-1x1::before{ padding-top:100%; }
.dx-photo.dx-ratio-4x3::before{ padding-top:75%; }
.dx-photo.dx-ratio-16x9::before{ padding-top:56.25%; }
.dx-photo.dx-ratio-3x4::before{ padding-top:132%; }
.dx-photo-flat{ box-shadow:var(--dx-shadow-xs); }

/* ---------- Alternating photo / copy rows ---------- */
.dx-media-row + .dx-media-row{ margin-top:3.2rem; }
.dx-media-copy h3{ font-size:1.6rem; margin-bottom:.7rem; }
.dx-media-copy p{ color:var(--dx-ink-500); margin-bottom:0; }

/* ---------- Ticked benefit list ---------- */
.dx-check-list{ list-style:none; padding:0; margin:1.1rem 0 0; }
.dx-check-list li{ position:relative; padding-inline-start:1.9rem; margin-bottom:.6rem; color:var(--dx-ink-700); }
.dx-check-list li::before{
  content:"\f269"; font-family:"Material-Design-Iconic-Font";
  position:absolute; inset-inline-start:0; top:0; color:var(--dx-green); font-size:1.05rem; line-height:1.5;
}

/* ---------- Feature / value cards ---------- */
.dx-feature-card{
  background:var(--dx-surface); border:1px solid var(--dx-ink-100); border-radius:var(--dx-radius-lg);
  padding:1.8rem; height:100%; box-shadow:var(--dx-shadow-xs);
  transition:transform .18s ease, box-shadow .18s ease;
}
.dx-feature-card:hover{ transform:translate(-3px,-3px); box-shadow:var(--dx-shadow-sticker-hover); }
.dx-feature-card h5{ font-size:1.05rem; margin-bottom:.5rem; }
.dx-feature-card .dx-icon{
  width:52px; height:52px;
  border-radius:var(--dx-radius-sm) var(--dx-radius-md) var(--dx-radius-md) var(--dx-radius-md);
  background:var(--dx-primary-50); color:var(--dx-primary);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1rem;
}
.dx-value-card{ background:var(--dx-surface-alt); border-radius:var(--dx-radius-lg); padding:1.6rem; height:100%; }
.dx-value-card h5{ font-size:1.05rem; margin-bottom:.5rem; }
.dx-value-card .dx-icon{
  width:46px; height:46px; margin-bottom:.9rem; font-size:1.25rem;
  border-radius:var(--dx-radius-sm) var(--dx-radius-md) var(--dx-radius-md) var(--dx-radius-md);
  background:var(--dx-surface); color:var(--dx-primary);
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Numbered steps ---------- */
.dx-steps-row{ counter-reset:dx-step; }
.dx-step-card{ position:relative; padding-top:1.4rem; }
.dx-step-card h5{ font-size:1.05rem; margin-bottom:.5rem; }
.dx-steps-row .dx-step-card::before{
  counter-increment:dx-step; content:counter(dx-step);
  width:40px; height:40px; border-radius:50%; background:var(--dx-ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; margin-bottom:1rem;
}

/* ---------- Numbers band ---------- */
.dx-metric-band{ background:var(--dx-surface-alt); border-radius:var(--dx-radius-lg); padding:2.2rem 1.5rem; }
.dx-metric{ text-align:center; }
.dx-metric .dx-metric-num{
  display:block; font-family:var(--dx-font-display); font-weight:800;
  font-size:clamp(1.5rem,5.5vw,2.2rem); line-height:1.15; color:var(--dx-primary);
  overflow-wrap:anywhere;
}
.dx-metric .dx-metric-label{ color:var(--dx-ink-500); font-size:.9rem; }

/* ---------- Testimonials ---------- */
.dx-testimonial{
  background:var(--dx-surface-alt); border-radius:var(--dx-radius-lg); padding:1.8rem; height:100%;
}
.dx-testimonial .dx-quote{ font-size:1.02rem; color:var(--dx-ink-700); margin-bottom:1.2rem; }
.dx-testimonial .dx-who{ display:flex; align-items:center; gap:.7rem; }
.dx-testimonial .dx-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.dx-testimonial .dx-who strong{ display:block; color:var(--dx-ink); }
.dx-testimonial .dx-who span{ font-size:.8rem; color:var(--dx-ink-500); }

/* ---------- City tiles ---------- */
.dx-city-card{
  position:relative; display:block; overflow:hidden; color:#fff;
  border-radius:var(--dx-radius-lg); box-shadow:var(--dx-shadow-sm);
}
.dx-city-card::before{ content:''; display:block; padding-top:72%; }
.dx-city-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.dx-city-card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(22,24,29,0) 35%,rgba(22,24,29,.86) 100%);
}
.dx-city-card:hover{ color:#fff; text-decoration:none; }
.dx-city-card:hover img{ transform:scale(1.06); }
.dx-city-body{ position:absolute; inset-inline:0; bottom:0; z-index:2; padding:1rem 1.1rem; }
.dx-city-name{ display:block; font-family:var(--dx-font-display); font-weight:800; font-size:1.1rem; color:#fff; }
.dx-city-meta{ font-size:.8rem; color:rgba(255,255,255,.78); }

/* ---------- Open roles ---------- */
.dx-job-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1rem;
  background:var(--dx-surface); border:1px solid var(--dx-ink-100);
  border-radius:var(--dx-radius-md); padding:1.05rem 1.3rem; margin-bottom:.8rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dx-job-row:hover{ border-color:var(--dx-primary-light); box-shadow:var(--dx-shadow-sm); }
.dx-job-row h6{ margin:0; font-size:1.02rem; }
.dx-job-meta{ color:var(--dx-ink-500); font-size:.85rem; }
.dx-job-cta{ margin-inline-start:auto; }

/* ---------- Lead form ---------- */
.dx-form-card{
  background:var(--dx-surface); border:1px solid var(--dx-ink-100);
  border-radius:var(--dx-radius-lg); box-shadow:var(--dx-shadow-md); padding:1.8rem;
}
.dx-form-card h4{ font-size:1.3rem; }
.dx-form-card label{ display:block; font-weight:600; font-size:.85rem; color:var(--dx-ink-700); margin-bottom:.3rem; }
.dx-form-card .form-group{ margin-bottom:1rem; }
.dx-lp .form-control{
  border-radius:var(--dx-radius-md); border:1.5px solid var(--dx-ink-100);
  background:var(--dx-surface); color:var(--dx-ink); height:auto; padding:.6rem .9rem;
}
.dx-lp .form-control:focus{
  border-color:var(--dx-primary); box-shadow:0 0 0 4px var(--dx-primary-50);
}

/* ---------- CTA band ---------- */
.dx-cta-band{
  background:linear-gradient(120deg,var(--dx-primary-dark),var(--dx-primary));
  color:#fff; border-radius:12px 28px 28px 28px; padding:3rem 2rem; text-align:center;
}
.dx-cta-band h2{ color:#fff; }

/* ---------- FAQ accordion ----------
   The views use Bootstrap 5 markup (.accordion-item / .accordion-button); this
   theme ships Bootstrap 4.3.1, which styles neither, so the chrome lives here.
   The collapse behaviour itself is Bootstrap 4 (data-toggle / data-parent). */
.dx-faq .accordion-item{
  border:1px solid var(--dx-ink-100); border-radius:var(--dx-radius-md) !important;
  margin-bottom:.8rem; overflow:hidden; background:var(--dx-surface);
}
.dx-faq .accordion-header{ margin:0; }
.dx-faq .accordion-button{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; text-align:start; cursor:pointer;
  background:var(--dx-surface); border:none; box-shadow:none;
  padding:1rem 1.2rem; font-family:var(--dx-font-display); font-weight:700;
  font-size:1rem; line-height:1.4; color:var(--dx-ink);
}
.dx-faq .accordion-button::after{
  content:"\f2f9"; font-family:"Material-Design-Iconic-Font";
  font-size:1.15rem; color:var(--dx-ink-300); transition:transform .2s ease; flex:0 0 auto;
}
.dx-faq .accordion-button:not(.collapsed){ background:var(--dx-primary-50); color:var(--dx-primary-dark); }
.dx-faq .accordion-button:not(.collapsed)::after{ transform:rotate(180deg); color:var(--dx-primary); }
.dx-faq .accordion-button:focus{ outline:none; box-shadow:none; }
.dx-faq .accordion-body{ padding:0 1.2rem 1.1rem; }

/* ---------- Sticky in-page nav ---------- */
.dx-lp-subnav{
  position:sticky; top:0; z-index:20; margin-bottom:2rem;
  background:rgba(255,251,247,.94); border-bottom:1px solid var(--dx-ink-100);
  backdrop-filter:blur(8px);
}
.dx-lp-subnav .dx-lp-subnav-wrap{ display:flex; gap:1.5rem; overflow-x:auto; padding:.85rem 0; }
.dx-lp-subnav a{ white-space:nowrap; font-weight:700; font-size:.9rem; color:var(--dx-ink-700); }
.dx-lp-subnav a:hover{ color:var(--dx-primary); }
.dx-lp-anchor{ scroll-margin-top:90px; }

/* ---------- Footer links added for these pages ---------- */
.sub-footer .dx-footer-nav{ margin-top:2rem; }
.sub-footer .dx-footer-nav h6{ font-family:var(--dx-font-display); font-size:.95rem; margin-bottom:1rem; }
.sub-footer .dx-footer-nav ul{ list-style:none; padding:0; margin:0; }
.sub-footer .dx-footer-nav li{ margin-bottom:.55rem; }
.sub-footer .dx-footer-nav a{ font-size:.9rem; }

/* ---------- Mobile ---------- */
@media (max-width: 767.98px){
  .dx-lp-hero{ min-height:0; border-radius:10px 20px 20px 20px; }
  .dx-lp-hero::before{
    background:linear-gradient(180deg, rgba(22,24,29,.90) 0%, rgba(22,24,29,.78) 100%);
  }
  .dx-lp-hero-body{ padding:2.4rem 1.4rem; }
  .dx-lp-hero .dx-stat-row{ gap:1.4rem; }
  .dx-media-copy{ margin-top:1.2rem; }
  .dx-media-row + .dx-media-row{ margin-top:2.2rem; }
  .dx-job-cta{ margin-inline-start:0; width:100%; }
  .dx-metric-band{ padding:1.6rem 1rem; }
  .dx-metric{ margin-bottom:1.2rem; }
}

/* ===========================================================================
   HOME PAGE
   Hero, section rhythm and scroll reveal for views/store/index.php.
   Section visibility is driven by Themes > Settings > Layout, not by CSS.
   =========================================================================== */

/* Near full-height opening. Deliberately not 100%: the next section's heading
   peeks above the fold, which is what tells people there is more below.
   svh, not vh - on mobile vh is larger than the visible area and overflows. */
.dx-home-hero{
  position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:min(80svh,720px); color:#fff; background:var(--dx-ink);
  border-bottom:1px solid var(--dx-ink-100);
}
.dx-home-hero-media{ position:absolute; inset:0; z-index:0; }
.dx-home-hero-media img{ width:100%; height:100%; object-fit:cover; }
.dx-home-hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  /* Two layers: a band under the overlaid top bar, which sits over the bright
     right-hand side of the photo, and the reading scrim for the copy. */
  background:
    linear-gradient(180deg, rgba(22,24,29,.62) 0, rgba(22,24,29,0) 170px),
    linear-gradient(90deg, rgba(22,24,29,.94) 0%, rgba(22,24,29,.84) 45%, rgba(22,24,29,.30) 100%);
}
[dir="rtl"] .dx-home-hero::before{
  background:
    linear-gradient(180deg, rgba(22,24,29,.62) 0, rgba(22,24,29,0) 170px),
    linear-gradient(270deg, rgba(22,24,29,.94) 0%, rgba(22,24,29,.84) 45%, rgba(22,24,29,.30) 100%);
}
.dx-home-hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(55% 85% at 88% 12%, rgba(240,80,42,.28), transparent 62%);
}
.dx-home-hero-body{ position:relative; z-index:2; width:100%; padding:3rem 0; }
.dx-home-hero-title{
  color:#fff; font-family:var(--dx-font-display); font-weight:800;
  font-size:clamp(2rem,5vw,3.4rem); line-height:1.08; letter-spacing:-.02em;
  max-width:16ch; margin:0;
}
.dx-home-hero-sub{ color:rgba(255,255,255,.8); font-size:1.05rem; max-width:52ch; margin:1rem 0 0; }
.dx-eyebrow-onphoto{ background:rgba(255,255,255,.16); color:#fff; }

/* The address autocomplete keeps its own markup; this is the shell around it.
   .home-search-wrap is a fixed 500px centred block in style.css - the hero needs
   it flush with the copy, so both rules are overridden here. */
.dx-home-search.home-search-wrap{ width:100%; max-width:560px; margin:1.6rem 0 0; }
.dx-home-search .el-input__wrapper,
.dx-home-search input{ border-radius:var(--dx-radius-pill) !important; }

.dx-scrollcue{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  font-size:1.3rem; animation:dx-cue 2.4s ease-in-out infinite;
}
.dx-scrollcue:hover,.dx-scrollcue:focus{ color:#fff; background:rgba(255,255,255,.26); }
@keyframes dx-cue{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,5px); } }

/* Section rhythm */
.dx-home-section{ padding:3.2rem 0 .6rem; }

/* Reveal on scroll. Sections start visible and are only hidden once the script
   confirms IntersectionObserver support, so no-JS visitors still see everything. */
.dx-reveal.dx-reveal-armed{ opacity:0; transform:translateY(14px); }
.dx-reveal.dx-reveal-in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }

@media (prefers-reduced-motion:reduce){
  .dx-scrollcue{ animation:none; }
  .dx-reveal.dx-reveal-armed{ opacity:1; transform:none; }
  .dx-reveal.dx-reveal-in{ transition:none; }
}

@media (max-width:767.98px){
  .dx-home-hero{ min-height:min(86svh,640px); }
  .dx-home-hero::before{
    background:linear-gradient(180deg, rgba(22,24,29,.88) 0%, rgba(22,24,29,.76) 100%);
  }
  .dx-home-hero-body{ padding:2.2rem 0; }
  .dx-home-hero-title{ max-width:none; }
  .dx-home-section{ padding:2.2rem 0 .4rem; }
}

/* Compact address bar that appears once the hero is gone. It only scrolls back
   to the hero field, so there is no second autocomplete instance to keep in sync. */
.dx-stickysearch{
  position:fixed; left:50%; bottom:1.2rem; z-index:1030;
  transform:translate(-50%,140%); opacity:0; pointer-events:none;
  display:inline-flex; align-items:center; gap:.6rem;
  max-width:min(92vw,520px); padding:.7rem 1.4rem;
  border:none; border-radius:var(--dx-radius-pill);
  background:var(--dx-ink); color:#fff; font-weight:700; font-size:.95rem;
  box-shadow:var(--dx-shadow-md);
  transition:transform .28s ease, opacity .28s ease;
}
.dx-stickysearch span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-stickysearch.is-visible{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.dx-stickysearch:hover,.dx-stickysearch:focus{ background:var(--dx-primary); color:#fff; outline:none; }
@media (prefers-reduced-motion:reduce){ .dx-stickysearch{ transition:none; } }

/* ---------------------------------------------------------------------------
   Restaurant card (components/template_swiper_list.php)
   Used by the home page carousels and the feed.
   --------------------------------------------------------------------------- */

/* style.css frames every carousel slide in a bordered box and pins each image to
   a 9rem band (`.swiperResto .swiperSlide img`, specificity 0-2-1). The photo
   frame below replaces both, so those rules are turned off for this card and
   every rule that fights them carries an `img` type selector of its own - equal
   specificity, and custom.css is loaded last. */
.swiperResto .swiperSlide.dx-resto-slide{
  min-height:0 !important; border:none; border-radius:0;
}
.dx-resto-slide{ text-align:start; }

/* Fixed 16:10 frame so a wide logo banner can no longer set the card's height */
.dx-resto-media{
  overflow:hidden; border-radius:var(--dx-radius-md);
  background:var(--dx-surface-alt); margin-bottom:.7rem;
}
.dx-resto-media::before{ content:''; display:block; padding-top:62.5%; }
.dx-resto-media img.dx-resto-cover{
  position:absolute; inset:0; width:100%; height:100%;
  min-height:0; max-height:none; object-fit:cover; border-radius:0;
  transition:transform .35s ease;
}
/* No cover photo uploaded: show the logo whole, centred, never stretched */
.dx-resto-media img.dx-resto-cover-contain{ object-fit:contain; padding:12%; }
.dx-resto-slide:hover .dx-resto-media img.dx-resto-cover{ transform:scale(1.04); }

/* Promo / voucher tags. The frame's aspect-ratio spacer means an absolutely
   positioned box with no offsets would land below the photo and be clipped, so
   the corner is set explicitly. */
.dx-resto-tags{ position:absolute; top:0; inset-inline-start:0; z-index:9; }

/* Logo badge, only when there is a cover behind it.
   The selector carries the img tag because `.dx-resto-media .dx-resto-cover`
   above would otherwise win on specificity and blow the badge up to fill the card. */
.dx-resto-media img.dx-resto-logo{
  position:absolute; inset:auto auto 10px 10px; z-index:4;
  width:52px; height:52px; min-height:0; max-height:none; object-fit:cover;
  border-radius:var(--dx-radius-sm) var(--dx-radius-md) var(--dx-radius-md) var(--dx-radius-md);
  background:#fff; border:2px solid #fff; box-shadow:var(--dx-shadow-sm);
}
[dir="rtl"] .dx-resto-media img.dx-resto-logo{ inset:auto 10px 10px auto; }

.dx-resto-body{ padding:0 .15rem; }
.dx-resto-next{ font-size:.8rem; font-weight:600; margin-bottom:.2rem; }
.dx-resto-name{
  font-family:var(--dx-font-display); font-weight:700; color:var(--dx-ink);
  font-size:1rem; margin-bottom:.15rem;
}
.dx-resto-cuisines{ color:var(--dx-ink-500); font-size:.85rem; margin-bottom:.45rem; }

.dx-resto-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .9rem;
  font-size:.85rem; color:var(--dx-ink-700);
}
.dx-resto-rating{ display:inline-flex; align-items:center; gap:.3rem; font-weight:700; }
.dx-resto-rating .fa-star{ color:var(--dx-gold); }
.dx-resto-reviews{ font-weight:400; color:var(--dx-ink-300); }
.dx-resto-time{ display:inline-flex; align-items:center; gap:.35rem; color:var(--dx-ink-500); }

/* Status overlays keep working inside the new frame. Only the corners are
   adjusted - their own z-index (9 / 10 in style.css) has to stay on top. */
.dx-resto-media .layer-grey,
.dx-resto-media .layer-black,
.dx-resto-media .layer-content{ border-radius:var(--dx-radius-md); }

/* Carousel headings, so they match the section titles on the landing pages */
.swiperOutsideContainer .dx-section-title h2{
  font-family:var(--dx-font-display); font-weight:800; color:var(--dx-ink);
  font-size:1.5rem; letter-spacing:-.01em;
}

/* ---------------------------------------------------------------------------
   Coverage: the cities read from the live merchant records
   --------------------------------------------------------------------------- */

/* Home page strip */
.dx-city-chips{ display:flex; flex-wrap:wrap; gap:.7rem; }
.dx-city-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.1rem; border-radius:var(--dx-radius-pill);
  background:var(--dx-surface); border:1px solid var(--dx-ink-100);
  color:var(--dx-ink); text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dx-city-chip:hover,.dx-city-chip:focus{
  border-color:var(--dx-primary); color:var(--dx-primary-dark);
  box-shadow:var(--dx-shadow-sm); text-decoration:none;
}
.dx-city-chip .zmdi-pin{ color:var(--dx-primary); }
.dx-city-chip-name{ font-weight:700; }
.dx-city-chip-count{ color:var(--dx-ink-500); font-size:.85rem; }

/* /cities card for a city with no bundled photo: same frame, brand fill */
.dx-city-card-plain{
  background:linear-gradient(150deg,var(--dx-ink) 0%,var(--dx-ink-700) 55%,var(--dx-primary-dark) 100%);
}
.dx-city-card-plain::after{ background:none; }
.dx-city-card-plain .dx-city-body{ inset:auto 0 0 0; }

.dx-empty-note{
  background:var(--dx-surface); border:1px dashed var(--dx-ink-100);
  border-radius:var(--dx-radius-md); padding:2rem 1.5rem; text-align:center;
  color:var(--dx-ink-500);
}

/* ---------------------------------------------------------------------------
   Offers band: live vouchers and offers from the merchants themselves
   --------------------------------------------------------------------------- */
/* The whole card is a link, so the selectors carry `a` to outrank `.dx-lp a`,
   which would otherwise paint the promotion title in the link colour. */
.dx-lp a.dx-promo-card{
  display:flex; flex-direction:column; height:100%;
  padding:1.1rem 1.2rem; text-decoration:none;
  background:var(--dx-surface); border:1px solid var(--dx-ink-100);
  border-radius:var(--dx-radius-lg); color:var(--dx-ink);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dx-lp a.dx-promo-card:hover,.dx-lp a.dx-promo-card:focus{
  border-color:var(--dx-primary); box-shadow:var(--dx-shadow-md);
  transform:translateY(-2px); text-decoration:none; color:var(--dx-ink);
}
.dx-promo-top{ display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.dx-promo-card img.dx-promo-logo{
  width:40px; height:40px; min-height:0; max-height:none; object-fit:cover;
  border-radius:var(--dx-radius-sm); background:#fff; flex:0 0 auto;
}
.dx-promo-badge{
  margin-inline-start:auto; padding:.25rem .7rem;
  border-radius:var(--dx-radius-pill); background:var(--dx-primary-50);
  color:var(--dx-primary-dark); font-weight:800; font-size:.8rem; white-space:nowrap;
}
.dx-promo-title{
  font-family:var(--dx-font-display); font-weight:700; font-size:.98rem;
  line-height:1.35; margin-bottom:.35rem;
}
.dx-promo-resto{ color:var(--dx-ink-700); font-size:.88rem; font-weight:600; }
.dx-promo-meta{ color:var(--dx-ink-500); font-size:.8rem; margin-top:.15rem; }

/* ---------------------------------------------------------------------------
   Home carousels: cuisine strip and featured dishes
   Brought onto the same type scale and card shape as the rest of the page.
   Scoped to the widget root so the merchant menu pages keep their own look.
   --------------------------------------------------------------------------- */

/* Cuisines: bigger, squarer tiles instead of small circles */
#vue-home-widgets .swiperCuisine .swiperSlide{
  min-height:0 !important; border:none; border-radius:0;
}
#vue-home-widgets .swiperCuisine .el-links{
  display:block; text-align:center; color:var(--dx-ink);
}
#vue-home-widgets .swiperCuisine img{
  width:88px; height:88px; min-height:0; max-height:none;
  border-radius:var(--dx-radius-md) !important;   /* .rounded-circle is on the tag */
  object-fit:cover; margin:0 auto .55rem;
  box-shadow:var(--dx-shadow-xs);
  transition:transform .25s ease, box-shadow .25s ease;
}
#vue-home-widgets .swiperCuisine .swiperSlide:hover img{
  transform:translateY(-3px); box-shadow:var(--dx-shadow-sm);
}
#vue-home-widgets .swiperCuisine .el-links .truncate{
  font-family:var(--dx-font-display); font-weight:700; font-size:.86rem; color:var(--dx-ink);
}

/* Featured dishes: same frame language as the restaurant card */
.swiperResto .swiperSlide.dx-item-slide{
  min-height:0 !important; border:none; border-radius:0; text-align:start;
}
.dx-item-media{
  overflow:hidden; border-radius:var(--dx-radius-md);
  background:var(--dx-surface-alt); margin-bottom:.7rem;
}
.dx-item-media::before{ content:''; display:block; padding-top:70%; }
.dx-item-media img.dx-item-cover{
  position:absolute; inset:0; width:100%; height:100%;
  min-height:0; max-height:none; object-fit:cover; border-radius:0;
  transition:transform .35s ease;
}
.dx-item-slide:hover .dx-item-media img.dx-item-cover{ transform:scale(1.04); }

.dx-item-body{ padding:0 .15rem; }
.dx-item-name{
  font-family:var(--dx-font-display); font-weight:700; color:var(--dx-ink);
  font-size:1rem; margin-bottom:.2rem;
}
.dx-item-desc{ color:var(--dx-ink-500); font-size:.85rem; margin-bottom:.6rem; }
.dx-item-price{
  font-family:var(--dx-font-display); font-weight:800; font-size:1.05rem; color:var(--dx-ink);
}

/* Carousel arrows follow the brand instead of Element Plus grey */
#vue-home-widgets .swiper-button-next .el-button,
#vue-home-widgets .swiper-button-prev .el-button{
  border-color:var(--dx-ink-100); color:var(--dx-ink);
}
#vue-home-widgets .swiper-button-next .el-button:hover,
#vue-home-widgets .swiper-button-prev .el-button:hover{
  border-color:var(--dx-primary); color:var(--dx-primary);
}

/* ---------------------------------------------------------------------------
   Hero, second pass: stronger type, a real search bar, a secondary route in
   for visitors who do not want to type an address yet.
   --------------------------------------------------------------------------- */
.dx-home-hero-title{ font-size:clamp(2.2rem,5.4vw,3.9rem); }
.dx-home-hero-sub{ font-size:1.15rem; color:rgba(255,255,255,.86); }

/* The autocomplete renders input + locate button side by side; this turns the
   pair into one raised bar rather than a field with a stray button next to it. */
.dx-home-search.home-search-wrap{ max-width:640px; }
.dx-home-search .el-input__wrapper{
  padding:.35rem 1.1rem; box-shadow:none; background:#fff;
  border-radius:var(--dx-radius-pill) !important;
}
.dx-home-search .el-input--large .el-input__inner{ height:52px; font-size:1rem; }
.dx-home-search .search-geocomplete{ box-shadow:var(--dx-shadow-md); border-radius:var(--dx-radius-pill); }
.dx-home-search .flex-enabled-locate button{
  height:56px; min-width:56px; padding:0 1.25rem;
  border-radius:var(--dx-radius-pill); border:none;
  background:var(--dx-primary); color:#fff;
  box-shadow:var(--dx-shadow-primary);
}
.dx-home-search .flex-enabled-locate button:hover{ background:var(--dx-primary-dark); }
.dx-home-search .flex-enabled-locate button i{ color:#fff !important; font-size:1.35rem; }

.dx-hero-alt{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  color:#fff; font-weight:700; font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:2px;
}
.dx-hero-alt:hover,.dx-hero-alt:focus{ color:#fff; border-bottom-color:#fff; text-decoration:none; }

.dx-hero-trust{
  list-style:none; padding:0; margin:2rem 0 0;
  display:flex; flex-wrap:wrap; gap:.6rem 1.8rem;
}
.dx-hero-trust li{
  display:inline-flex; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.9); font-size:.92rem; font-weight:600;
}
.dx-hero-trust i{ color:var(--dx-primary-light); font-size:1.1rem; }

@media (max-width:767.98px){
  .dx-home-hero-sub{ font-size:1rem; }
  .dx-hero-trust{ gap:.45rem 1.1rem; margin-top:1.4rem; }
  .dx-hero-trust li{ font-size:.84rem; }
  .dx-home-search .flex-enabled-locate button{ height:48px; min-width:48px; }
}

/* A carousel that cannot fill its row is laid out as a grid instead: the cards
   keep their size, the row reads as complete, and the dead arrows are hidden.
   Swiper is not initialised in this mode (see componentSwiperList.initSwiper),
   so its wrapper is free to be a grid. */
.swiper.dx-grid-mode{ overflow:visible; }
.swiper.dx-grid-mode .swiper-wrapper{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1.5rem 1rem; transform:none !important;
}
.swiper.dx-grid-mode .swiper-slide{ width:auto !important; margin:0 !important; }
.swiper.dx-grid-mode .swiper-button-next,
.swiper.dx-grid-mode .swiper-button-prev{ display:none !important; }

/* ---------------------------------------------------------------------------
   Element Plus action buttons

   The theme reaches for type="success" (17 places) and type="primary" whenever
   it wants a primary action - subscribe, select address, submit review, join -
   which paints them Element Plus green and blue. Re-pointing the component's
   own variables recolours every one of them at once, with no view to edit.

   el-tag is deliberately left alone: there green still means "good" (order
   status, address labels), and orange would destroy that meaning.
   --------------------------------------------------------------------------- */
.el-button--success,
.el-button--primary{
  --el-button-bg-color:var(--dx-primary);
  --el-button-border-color:var(--dx-primary);
  --el-button-text-color:#fff;
  --el-button-hover-bg-color:var(--dx-primary-light);
  --el-button-hover-border-color:var(--dx-primary-light);
  --el-button-hover-text-color:#fff;
  --el-button-active-bg-color:var(--dx-primary-dark);
  --el-button-active-border-color:var(--dx-primary-dark);
  --el-button-outline-color:var(--dx-primary-100);
}
/* link buttons carry the colour as text, not as a fill */
.el-button--primary.is-link,
.el-button--success.is-link,
.el-button--primary.is-text,
.el-button--success.is-text{
  --el-button-text-color:var(--dx-primary);
  --el-button-hover-text-color:var(--dx-primary-dark);
  --el-button-bg-color:transparent;
  --el-button-hover-bg-color:transparent;
}

/* ---------------------------------------------------------------------------
   Home page: the top bar sits on the hero photo instead of on a white strip.

   Scoped to body.controller-store.action-index, the classes the layout already
   puts on <body>, so only the home page is affected. Every other page keeps the
   bar in normal flow above white content. The :has() guard means the rules only
   apply when the hero is actually on the page: with home_search_mode set to
   "location" the home page renders a different template with no hero, and white
   text on white is worse than the plain bar. A browser without :has() drops the
   whole block and simply keeps the plain bar, which is a safe fallback.

   Every rule also requires .dx-topbar, the class top-nav.php adds. Without it
   nothing here applies at all - so deploying this stylesheet without the view,
   or the other way round, leaves the old bar intact instead of painting white
   text onto a white strip.

   The bar is absolute, not fixed: it scrolls away with the hero, which is what
   the rest of the site expects. The hero's own top scrim (see .dx-home-hero
   ::before) is what keeps this white text readable over a bright photo.
   --------------------------------------------------------------------------- */
body.controller-store.action-index:has(.dx-home-hero) .dx-topbar{
  position:absolute; inset-inline:0; top:0; z-index:20;
}
/* room for the bar above the centred hero copy */
body.controller-store.action-index:has(.dx-home-hero) .dx-home-hero{ padding-top:62px; }

body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation{ border-bottom:0; }

body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation .top-menu > li > a,
body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation .language-bar .dropdown-toggle,
body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation .top-menu > li > a:hover,
body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation .language-bar .dropdown-toggle:hover{
  color:#fff;
}
/* the bag is a dark SVG file, so it has to be flipped rather than recoloured */
body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation .cart-handle img{
  filter:brightness(0) invert(1);
}
body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation .badge-dark{
  background:var(--dx-primary); color:#fff;
}
body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation .line-left{
  border-inline-start-color:rgba(255,255,255,.32);
}
/* mobile menu bars are drawn with background-color */
body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation .hamburger-inner,
body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation .hamburger-inner::before,
body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation .hamburger-inner::after{
  background-color:#fff;
}
/* the language menu itself stays a normal light panel */
body.controller-store.action-index:has(.dx-home-hero) .dx-topbar #top-navigation .dropdown-menu a{ color:var(--dx-ink); }

@media (max-width:767.98px){
  body.controller-store.action-index:has(.dx-home-hero) .dx-home-hero{ padding-top:56px; }
}