/* Add custom CSS styles below */ 
/* ===== Alhazzaa theme tokens (from the approved mockup) ===== */
:root {
  --hz-navy: #0b1f3a;
  --hz-accent: #ff9a1f;      /* use as a FILL; put navy text on it */
  --hz-accent-text: #b34f00; /* orange that passes contrast as text on white */
  --hz-bg: #f6f8fb;
  --hz-muted: #4a5a72;
  --hz-card: #ffffff;
  --hz-radius: 16px;
}
 
/* Font: add this once in the theme <head> (or via the theme's font setting):
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800&display=swap"> */
body { font-family: 'Cairo', Arial, sans-serif; background: var(--hz-bg); color: var(--hz-navy); }
 
/* ===== Vehicle finder (safe: only touches our own classes) ===== */
.hz-finder {
  background: var(--hz-navy);
  color: #fff;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
  margin-inline: auto;
}
.hz-finder__title { font-size: 20px; font-weight: 800; }
.hz-finder__field {
  width: 100%;
  background: #fff;
  color: var(--hz-navy);
  border: 0;
  border-radius: 10px;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
}
.hz-finder__field:disabled { opacity: .6; }
.hz-finder__btn {
  background: var(--hz-accent);
  color: var(--hz-navy);
  border: 0;
  border-radius: 10px;
  padding: 14px;
  font: inherit;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
}
.hz-finder__btn:hover { filter: brightness(1.05); }
.hz-finder__field:focus-visible,
.hz-finder__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
 
/* ===== Theme overrides =====
   These selectors depend on the ANGEL theme's markup, which I haven't seen.
   Inspect the live elements in DevTools and map them, e.g.:
 
   header, .store-header   { background: var(--hz-navy); color: #fff; }
   .btn-primary, .s-button-primary { background: var(--hz-accent); color: var(--hz-navy); border-color: var(--hz-accent); }
   .product-card           { background: var(--hz-card); border-radius: var(--hz-radius); }
   footer                  { background: var(--hz-navy); color: #cfd8e6; }
 
   First try the theme's own color settings (primary color etc.) and use CSS only for what they can't do. */