@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; }
}