/* ============================================================
   DELIVERY LOCATION — header chip, first-visit nudge, modal, toast
   Loaded last in _Layout, so it overrides the older .delivery-* rules
   in site.css / main.css (which hid the widget below 1200px).
   ============================================================ */

:root {
  --dl-green-900: #0f5c28;
  --dl-green-700: #1d8a43;
  --dl-green-100: #e9f7ee;
  --dl-green-50: #f5fcf7;
  --dl-amber-700: #a15c00;
  --dl-amber-100: #fff4e0;
  --dl-red-700: #b42318;
  --dl-red-50: #fef3f2;
  --dl-ink: #13241b;
  --dl-muted: #5f6d66;
  --dl-border: #dfe8e3;
  --dl-radius: 14px;
  --dl-focus: 0 0 0 3px rgba(29, 138, 67, 0.3);
}

/* ---------- Header layout ---------- */

.header-discovery-shell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.delivery-widget {
  position: relative;
  display: block !important;
  flex: 0 0 260px;
  width: auto;
  min-width: 0;
}

.header-search-column {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Chip ---------- */

.dl-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  padding: 0.45rem 0.75rem 0.45rem 0.5rem;
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius);
  background: #fff;
  color: var(--dl-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dl-chip:hover {
  border-color: #b8d9c3;
  background: var(--dl-green-50);
}

.dl-chip:focus-visible {
  outline: none;
  box-shadow: var(--dl-focus);
}

.dl-chip-icon {
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--dl-green-100);
  color: var(--dl-green-700);
  font-size: 1rem;
}

.dl-chip-icon .bi {
  display: none;
}

.dl-chip-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.2;
}

.dl-chip-heading {
  font-family: "Manrope", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-chip-summary {
  margin-top: 0.1rem;
  font-size: 0.76rem;
  color: var(--dl-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-chip-caret {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--dl-muted);
  transition: transform 0.15s ease;
}

.dl-chip:hover .dl-chip-caret {
  transform: translateY(1px);
}

/* State: no location yet — calls for attention */
.dl-chip[data-state="unset"] .dl-icon-unset,
.js-delivery-trigger[data-state="unset"] .dl-icon-unset { display: inline-block; }

.dl-chip[data-state="unset"] .dl-chip-heading {
  color: var(--dl-green-700);
}

/* State: serviceable */
.dl-chip[data-state="set"] .dl-icon-set { display: inline-block; }

.dl-chip[data-state="set"] .dl-chip-icon {
  background: var(--dl-green-700);
  color: #fff;
}

/* State: pincode saved earlier but no longer serviceable */
.dl-chip[data-state="unserviceable"] .dl-icon-unserviceable { display: inline-block; }

.dl-chip[data-state="unserviceable"] {
  border-color: #f3d9a4;
  background: var(--dl-amber-100);
}

.dl-chip[data-state="unserviceable"] .dl-chip-icon {
  background: #fde7bd;
  color: var(--dl-amber-700);
}

.dl-chip[data-state="unserviceable"] .dl-chip-heading {
  color: var(--dl-amber-700);
}

/* ---------- First-visit nudge ---------- */

.dl-nudge {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1031;
  width: 300px;
  padding: 0.9rem 1rem;
  border-radius: var(--dl-radius);
  background: var(--dl-ink);
  color: #fff;
  font-size: 0.84rem;
  line-height: 1.45;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
  animation: dl-pop 0.22s ease-out;
}

.dl-nudge::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: var(--dl-ink);
  transform: rotate(45deg);
}

.dl-nudge strong {
  display: block;
  margin-bottom: 0.15rem;
  font-family: "Manrope", sans-serif;
  font-size: 0.92rem;
}

.dl-nudge .btn-link {
  color: #cfd8d3 !important;
}

@keyframes dl-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Mobile menu entry ---------- */

.dl-offcanvas-trigger {
  width: 100%;
  margin-bottom: 0.9rem;
  text-align: left;
  font: inherit;
}

.dl-offcanvas-trigger strong {
  font-family: "Manrope", sans-serif;
  font-size: 0.9rem;
}

.dl-offcanvas-trigger[data-state="unserviceable"] {
  background: var(--dl-amber-100);
  border-color: #f3d9a4;
}

/* ---------- Modal ---------- */

.dl-modal-dialog {
  max-width: 560px;
}

.dl-modal-content {
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(18, 32, 25, 0.22);
}

.dl-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.25rem 1.35rem 0.75rem;
}

.dl-modal-icon {
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--dl-green-100);
  color: var(--dl-green-700);
  font-size: 1.2rem;
}

.dl-modal-title {
  margin: 0 0 0.2rem;
  font-family: "Manrope", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dl-ink);
}

.dl-modal-subtitle {
  font-size: 0.86rem;
  color: var(--dl-muted);
}

.dl-modal-body {
  padding: 0.5rem 1.35rem 1.1rem;
}

.dl-modal-footer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.35rem;
  border-top: 1px solid #edf2ef;
  background: #fafcfb;
  font-size: 0.78rem;
  color: var(--dl-muted);
}

.dl-modal-footer .bi {
  color: var(--dl-green-700);
}

.dl-server-feedback {
  border-radius: 12px;
  font-size: 0.88rem;
}

/* Current location card */
.dl-current {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #cfe6d6;
  border-radius: var(--dl-radius);
  background: var(--dl-green-50);
}

.dl-current-icon {
  color: var(--dl-green-700);
  font-size: 1.25rem;
}

.dl-current-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.dl-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #678074;
}

.dl-current-copy strong {
  font-family: "Manrope", sans-serif;
  font-size: 0.95rem;
  color: var(--dl-ink);
  overflow-wrap: anywhere;
}

.dl-current-copy small {
  font-size: 0.78rem;
  color: var(--dl-green-900);
}

.dl-remove {
  padding: 0.25rem 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dl-red-700);
  text-decoration: none;
}

.dl-remove:hover {
  color: #8f1d14;
  text-decoration: underline;
}

/* Pincode field */
.dl-label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--dl-ink);
}

.dl-input-row {
  display: flex;
  gap: 0.5rem;
}

.dl-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.dl-input-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dl-muted);
  pointer-events: none;
}

.dl-input {
  height: 50px;
  padding: 0 2.6rem 0 2.5rem;
  border: 1.5px solid var(--dl-border);
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.dl-input::placeholder {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #9aa6a0;
}

.dl-input:focus {
  border-color: var(--dl-green-700);
  box-shadow: var(--dl-focus);
}

.dl-input-status {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
}

.dl-input-status > * {
  display: none;
}

.dl-input-wrap[data-status="checking"] .dl-status-checking { display: inline-block; color: var(--dl-green-700); }
.dl-input-wrap[data-status="ok"] .dl-status-ok { display: inline-block; color: var(--dl-green-700); }
.dl-input-wrap[data-status="error"] .dl-status-error { display: inline-block; color: var(--dl-red-700); }

.dl-input-wrap[data-status="ok"] .dl-input { border-color: var(--dl-green-700); }
.dl-input-wrap[data-status="error"] .dl-input { border-color: #f04438; }
.dl-input-wrap[data-status="error"] .dl-input:focus { box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.2); }

.dl-submit {
  flex: 0 0 auto;
  min-width: 112px;
  height: 50px;
  border-radius: 12px;
  font-weight: 800;
}

.dl-submit:disabled {
  opacity: 0.55;
}

.dl-status {
  min-height: 1.5em;
  margin-top: 0.45rem;
  font-size: 0.84rem;
  color: var(--dl-muted);
}

.dl-status[data-status="ok"] { color: var(--dl-green-900); }
.dl-status[data-status="error"] { color: var(--dl-red-700); }
.dl-status .bi { color: var(--dl-green-700); }

/* Sections */
.dl-section {
  margin-top: 1.25rem;
}

.dl-section-title {
  margin-bottom: 0.55rem;
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #678074;
}

/* When the typed pincode isn't served, draw the eye to the areas we do serve */
.dl-section.is-highlighted {
  padding: 0.85rem;
  margin-inline: -0.85rem;
  border-radius: var(--dl-radius);
  background: var(--dl-amber-100);
  transition: background-color 0.25s ease;
}

.dl-address-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dl-address {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--dl-border);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dl-address:not(:disabled):hover {
  border-color: var(--dl-green-700);
  background: var(--dl-green-50);
}

.dl-address:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.dl-address-icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
  color: var(--dl-green-700);
}

.dl-address-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.dl-address-copy strong {
  font-size: 0.9rem;
  text-transform: capitalize;
}

.dl-address-copy small {
  font-size: 0.78rem;
  color: var(--dl-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-default {
  margin-left: 0.3rem;
  padding: 0.05rem 0.4rem;
  border-radius: 6px;
  background: #eef2f0;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dl-muted);
  vertical-align: middle;
}

.dl-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.dl-badge-ok { background: var(--dl-green-100); color: var(--dl-green-900); }
.dl-badge-muted { background: #f0f2f1; color: var(--dl-muted); }

.dl-area-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
}

.dl-area {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--dl-border);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  line-height: 1.3;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.dl-area:hover {
  border-color: var(--dl-green-700);
  background: var(--dl-green-50);
}

.dl-area:active {
  transform: scale(0.98);
}

.dl-area strong {
  font-size: 0.86rem;
  color: var(--dl-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-area small {
  font-size: 0.74rem;
  color: var(--dl-muted);
}

.dl-area:focus-visible,
.dl-address:focus-visible,
.dl-remove:focus-visible {
  outline: none;
  box-shadow: var(--dl-focus);
}

.dl-area-skeleton {
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(90deg, #eef4f0 25%, #f7faf8 50%, #eef4f0 75%);
  background-size: 200% 100%;
  animation: dl-shimmer 1.2s infinite linear;
}

@keyframes dl-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.dl-empty {
  font-size: 0.84rem;
  color: var(--dl-muted);
}

.dl-login-hint {
  margin-top: 1rem;
  font-size: 0.84rem;
  color: var(--dl-muted);
}

.dl-login-hint a {
  color: var(--dl-green-700);
  font-weight: 700;
}

/* ---------- Toast ---------- */

.dl-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1090;
  max-width: calc(100vw - 32px);
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
  background: var(--dl-ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dl-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

body.mobile-cart-strip-visible .dl-toast {
  bottom: 88px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
  .delivery-widget {
    flex-basis: 220px;
  }

  .dl-chip {
    min-height: 46px;
  }

  .dl-chip-icon {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
}

/* Phones & tablets: the chip becomes a slim full-width bar above the search box
   (side by side, the search field gets too narrow to type in below 992px) */
@media (max-width: 991px) {
  .header-discovery-shell {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .delivery-widget {
    flex-basis: auto;
    width: 100%;
  }

  .dl-chip {
    min-height: 0;
    padding: 0.15rem 0.1rem;
    border: 0;
    background: transparent;
    gap: 0.5rem;
  }

  .dl-chip:hover {
    background: transparent;
  }

  .dl-chip-icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 0.9rem;
  }

  .dl-chip-copy {
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
    flex: 0 1 auto;
  }

  .dl-chip-heading {
    flex: 0 0 auto;
    font-size: 0.9rem;
  }

  .dl-chip-summary {
    margin-top: 0;
    font-size: 0.8rem;
  }

  .dl-chip[data-state="unserviceable"] {
    background: transparent;
  }

  .dl-nudge {
    width: min(320px, calc(100vw - 32px));
  }
}

@media (max-width: 575px) {
  .dl-modal-content {
    border-radius: 0;
  }

  .dl-modal-header {
    padding: 1rem 1rem 0.5rem;
  }

  .dl-modal-body {
    padding: 0.5rem 1rem 1rem;
  }

  .dl-modal-footer {
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  }

  .dl-area-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dl-nudge,
  .dl-area-skeleton,
  .dl-toast,
  .dl-chip,
  .dl-area {
    animation: none;
    transition: none;
  }
}