/**
 * DeliveryTimePro Frontend Styles
 * Using BEM methodology for CSS
 */

/* Import Phosphor Icons */
@import url('https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css');

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Calculator component */
.dtp-calculator {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
  color: var(--dtp-text-color, inherit);
  --dtp-text-s: var(--text-s, 0.875rem);
  /* Fulfilment results (cards, controls, strips): prefer ACSS extra-small, then ACSS small, then rem fallback. */
  --dtp-fulfilment-text-size: var(--text-xs, var(--text-s, 0.8125rem));
  --dtp-card-padding: var(--space-xs, 1.25rem);
  --dtp-surface-bg: var(--dtp-method-bg-color, #ffffff);
  --dtp-surface-border: var(--dtp-method-border-color, #e2e8f0);
  --dtp-on-surface: var(--dtp-text-color, inherit);
  --dtp-on-surface-muted: var(--dtp-muted-text-color, color-mix(in srgb, currentColor 70%, transparent));
  --dtp-link-color: var(--dtp-primary-color, currentColor);
  --dtp-input-bg-color: var(--dtp-surface-bg, #ffffff);
  --dtp-input-text-color: var(--dtp-on-surface, currentColor);
  --dtp-input-placeholder-color: var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent));
  --dtp-skeleton-bg: #e5e7eb;
  --dtp-skeleton-shimmer: rgba(255, 255, 255, 0.6);
  --dtp-skeleton-card-bg: #f8fafc;
  --dtp-skeleton-strip-bg: #e2e8f0;
  --dtp-method-selected-border-color: var(--dtp-method-name-color, var(--dtp-on-surface, #111827));
  --dtp-method-selected-ring-color: color-mix(in srgb, var(--dtp-method-selected-border-color, #111827) 12%, transparent);
  --dtp-method-selected-bg: color-mix(in srgb, var(--dtp-method-selected-border-color, #111827) 4%, #ffffff);
  --dtp-method-selected-pill-bg: color-mix(in srgb, var(--dtp-link-color, #111827) 9%, #ffffff);
  --dtp-method-selected-shadow:
    0 0 0 1px var(--dtp-method-selected-border-color, #111827),
    0 0 0 4px var(--dtp-method-selected-ring-color, rgba(15, 23, 42, 0.08)),
    0 1px 2px rgba(0, 0, 0, 0.05);
  --dtp-calculator-initial-gap: var(
    --acss-space-m,
    var(--acss-space-3, var(--space-m, 1rem))
  );
  --dtp-fulfilment-bottom-gap: var(
    --acss-space-m,
    var(--acss-space-3, var(--space-m, 1rem))
  );
  container-type: inline-size;
  container-name: dtp-calculator;
}

.dtp-calculator__results {
  font-size: var(--dtp-fulfilment-text-size, 0.8125rem);
}

.dtp-calculator__results .dtp-pickup-info,
.dtp-calculator__results .dtp-pickup-info__name,
.dtp-calculator__results .dtp-pickup-info__address {
  font-size: inherit;
}

.dtp-calculator[data-theme="light"],
.dtp-calculator--theme-light,
.dtp-hero-postcode[data-theme="light"],
.dtp-hero-postcode--theme-light {
  --dtp-text-color: var(--text-dark, #111827);
  --dtp-muted-text-color: var(--text-muted, #4b5563);
  --dtp-method-bg-color: var(--bg-light, #ffffff);
  --dtp-method-selected-border-color: var(
    --acss-color-heading,
    var(--text-dark, var(--dtp-method-name-color, #111827))
  );
  --dtp-method-selected-ring-color: color-mix(
    in srgb,
    var(--dtp-method-selected-border-color, #111827) 12%,
    transparent
  );
  --dtp-method-selected-bg: var(
    --bg-ultra-light,
    var(
      --dtp-method-selected-surface-color,
      color-mix(in srgb, var(--dtp-method-selected-border-color, #111827) 4%, #ffffff)
    )
  );
  --dtp-surface-bg: var(--bg-light, #ffffff);
  --dtp-method-border-color: var(--dtp-color-border-subtle, #e2e8f0);
  --dtp-tabs-group-bg: var(--bg-ultra-light, #f3f4f6);
  --dtp-tabs-group-text: var(--text-dark, #111827);
  --dtp-tabs-active-bg-color: var(--text-dark, #111827);
  --dtp-tabs-active-text-color: var(--text-light, #f8fafc);
  --dtp-tabs-focus-ring: rgba(15, 23, 42, 0.35);
  --dtp-tabs-active-focus-ring: rgba(248, 250, 252, 0.55);
}

.dtp-calculator[data-theme="dark"],
.dtp-calculator--theme-dark,
.dtp-hero-postcode[data-theme="dark"],
.dtp-hero-postcode--theme-dark {
  --dtp-text-color: var(--text-light, #f8fafc);
  --dtp-muted-text-color: color-mix(in srgb, var(--text-light, #f8fafc) 70%, transparent);
  --dtp-method-bg-color: var(--dtp-card-dark-bg, var(--bg-dark, #111111));
  --dtp-method-selected-border-color: var(
    --acss-color-text,
    var(--text-light, var(--dtp-method-name-color, #f8fafc))
  );
  --dtp-method-selected-ring-color: color-mix(
    in srgb,
    var(--dtp-method-selected-border-color, #f8fafc) 18%,
    transparent
  );
  --dtp-method-selected-bg: var(
    --bg-base,
    var(
      --dtp-method-selected-surface-color,
      color-mix(in srgb, var(--dtp-method-selected-border-color, #f8fafc) 10%, transparent)
    )
  );
  --dtp-surface-bg: var(--dtp-card-dark-bg, var(--bg-dark, #111111));
  --dtp-method-border-color: color-mix(in srgb, var(--text-light, #f8fafc) 24%, transparent);
  --dtp-link-color: var(--link-light, var(--text-light, #f8fafc));
  --dtp-tabs-group-bg: var(--bg-base, var(--bg-dark, #1f2937));
  --dtp-tabs-group-text: var(--text-light, #f8fafc);
  --dtp-tabs-active-bg-color: var(--text-light, #f8fafc);
  --dtp-tabs-active-text-color: var(--text-dark, #111827);
  --dtp-tabs-focus-ring: rgba(248, 250, 252, 0.45);
  --dtp-tabs-active-focus-ring: rgba(15, 23, 42, 0.45);
  --dtp-input-bg-color: var(--dtp-input-dark-bg, var(--bg-dark, #111111));
  --dtp-input-text-color: var(--text-light, #f8fafc);
  --dtp-input-placeholder-color: color-mix(in srgb, var(--text-light, #f8fafc) 64%, transparent);
  --dtp-input-border-color: color-mix(in srgb, var(--text-light, #f8fafc) 30%, transparent);
  --dtp-skeleton-bg: color-mix(in srgb, var(--text-light, #f8fafc) 14%, transparent);
  --dtp-skeleton-shimmer: color-mix(in srgb, var(--text-light, #f8fafc) 24%, transparent);
  --dtp-skeleton-card-bg: color-mix(in srgb, var(--text-light, #f8fafc) 8%, transparent);
  --dtp-skeleton-strip-bg: color-mix(in srgb, var(--text-light, #f8fafc) 16%, transparent);
}

.dtp-hero-postcode[data-theme="dark"] .dtp-hero-postcode__results-host,
.dtp-hero-postcode--theme-dark .dtp-hero-postcode__results-host {
  --dtp-hero-results-heading-color: var(--text-light, #f8fafc);
  --dtp-hero-results-text-color: var(--text-light, #f8fafc);
  --dtp-hero-results-muted-color: color-mix(in srgb, var(--text-light, #f8fafc) 70%, transparent);
  /* Tab chrome must not inherit parent currentColor / brand hues */
  --dtp-tabs-border-color: var(--dtp-hero-results-border-color, rgba(248, 250, 252, 0.22));
  --dtp-tabs-active-bg-color: var(--text-light, #f8fafc);
  --dtp-tabs-active-text-color: var(--text-dark, #111827);
  --dtp-tabs-focus-ring: rgba(248, 250, 252, 0.45);
  --dtp-tabs-active-focus-ring: rgba(15, 23, 42, 0.45);
}

.dtp-hero-postcode[data-theme="light"] .dtp-hero-postcode__results-host,
.dtp-hero-postcode--theme-light .dtp-hero-postcode__results-host {
  --dtp-hero-results-heading-color: var(--text-dark, #111827);
  --dtp-hero-results-text-color: var(--text-dark, #111827);
  --dtp-hero-results-muted-color: var(--text-muted, #4b5563);
  --dtp-tabs-border-color: var(--dtp-hero-results-border-color, rgba(15, 23, 42, 0.14));
  --dtp-tabs-active-bg-color: var(--text-dark, #111827);
  --dtp-tabs-active-text-color: var(--text-light, #f8fafc);
  --dtp-tabs-focus-ring: rgba(15, 23, 42, 0.35);
  --dtp-tabs-active-focus-ring: rgba(248, 250, 252, 0.55);
}

/* Bricks Builder editor mode compatibility */
body.bricks-is-frontend .dtp-calculator,
body[class*="bricks"] .dtp-calculator {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

/* Hide results container when aria-hidden is true (initial state and after clear) */
.dtp-calculator__results[aria-hidden="true"] {
  display: none;
}

/* Calculator header - groups title and form together */
.dtp-calculator__header {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
}

.dtp-calculator--has-results:not([data-mode="form_only"]) .dtp-calculator__header {
  display: none;
}

.dtp-calculator[data-mode="full"]:not(.dtp-calculator--has-results) .dtp-calculator__header {
  margin-bottom: var(--dtp-calculator-initial-gap, 1rem);
}

/* Calculator title */
.dtp-calculator__title {
  margin: 0;
  color: var(--dtp-title-color, #1e293b);
  font-weight: 600;
}

.dtp-calculator__lede {
  margin: 0;
  color: var(--dtp-muted-text-color, #4b5563);
  font-size: 0.95rem;
}

.dtp-calculator__copy {
  display: grid;
  gap: var(
    --dtp-copy-gap,
    var(
      --acss-paragraph-spacing,
      var(--acss-space-xs, var(--space-xs, 0.5rem))
    )
  );
}

.dtp-calculator__form {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
  margin: 0;
}

.dtp-calculator__form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap, 0.75rem);
  align-items: center;
}

.dtp-calculator__form-row > .dtp-calculator__input {
  flex: 1 1 14rem;
  min-width: 0;
}

.dtp-calculator__form-row > .dtp-calculator__button,
.dtp-calculator__form-row > .dtp-calculator__reset {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 6.75rem;
  white-space: nowrap;
}

/* Provide resilient button styling in off-canvas/isolated containers where theme button styles may be absent. */
.dtp-calculator .dtp-calculator__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.625rem;
  padding: 0.625rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: var(--button-color, var(--dtp-primary-color, #111827));
  color: var(--button-text, var(--dtp-button-text-color, #ffffff));
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 600;
  line-height: 1.2;
  text-transform: var(--btn-text-transform, var(--button-text-transform, uppercase));
  letter-spacing: var(--btn-letter-spacing, normal);
  text-decoration: var(--btn-text-decoration, none);
  cursor: pointer;
  transition: filter 0.18s ease, box-shadow 0.18s ease;
}

.dtp-calculator .dtp-calculator__button:hover,
.dtp-calculator .dtp-calculator__button:focus-visible {
  filter: brightness(0.95);
}

.dtp-calculator .dtp-calculator__button:focus-visible {
  outline: 2px solid var(--dtp-primary-color, #111827);
  outline-offset: 2px;
}

.dtp-calculator .dtp-calculator__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.625rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--dtp-color-border-subtle, #d1d5db);
  border-radius: 0.375rem;
  background: transparent;
  color: var(--dtp-text-color, #111827);
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 500;
  line-height: 1.2;
  text-transform: var(--btn-text-transform, var(--button-text-transform, uppercase));
  letter-spacing: var(--btn-letter-spacing, normal);
  text-decoration: var(--btn-text-decoration, none);
  cursor: pointer;
}

/* Form-only reset/clear should read as a secondary text action, not a primary button. */
.dtp-calculator[data-mode="form_only"] .dtp-calculator__form-row > .dtp-calculator__reset {
  flex: 1 0 100%;
  width: 100% !important;
  min-width: 0;
  justify-content: flex-start;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--button-color, var(--dtp-primary-color, #2563eb));
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dtp-calculator[data-mode="form_only"] .dtp-calculator__form-row > .dtp-calculator__reset:hover,
.dtp-calculator[data-mode="form_only"] .dtp-calculator__form-row > .dtp-calculator__reset:focus-visible {
  color: var(--dtp-primary-hover-color, #1d4ed8);
  background: transparent;
  border: 0;
}

.dtp-calculator__feedback {
  margin-top: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid rgba(34, 197, 94, 0.3);
  background: var(--dtp-success-bg, #ecfdf5);
  border: 1px solid color-mix(in srgb, var(--dtp-success-color, #16a34a) 26%, transparent);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--dtp-success-bg, #ecfdf5) 82%, #ffffff);
  color: var(--dtp-success-color, #166534);
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.dtp-calculator__feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Bricks Builder editor mode - ensure form row displays properly */
body.bricks-is-frontend .dtp-calculator__form-row,
body[class*="bricks"] .dtp-calculator__form-row {
  display: flex !important;
  width: 100% !important;
}

.dtp-calculator__input {
  flex: 1;
  min-width: 150px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--dtp-input-border-color, #cbd5e1);
  border-radius: 0.375rem;
  background-color: var(--dtp-input-bg-color, #ffffff);
  color: var(--dtp-input-text-color, var(--dtp-text-color, #111827));
  font-size: var(--text, 1rem);
  text-transform: uppercase;
  transition: border-color 0.2s ease;
}

.dtp-calculator__input::placeholder {
  color: var(--dtp-input-placeholder-color, color-mix(in srgb, currentColor 65%, transparent));
}

/* Bricks Builder editor mode - ensure input displays properly */
body.bricks-is-frontend .dtp-calculator__input,
body[class*="bricks"] .dtp-calculator__input {
  flex: 1 1 auto !important;
  min-width: 150px !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--dtp-input-border-color, #cbd5e1) !important;
  border-radius: 0.375rem !important;
  background-color: var(--dtp-input-bg-color, #ffffff) !important;
  color: var(--dtp-input-text-color, var(--dtp-text-color, #111827)) !important;
  font-size: 1rem !important;
  display: block !important;
  width: auto !important;
  box-sizing: border-box !important;
}

.dtp-calculator__input:focus {
  border-color: var(--dtp-primary-color, #3b82f6);
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Check/Clear button group layout */
.dtp-calculator__buttons {
  display: flex;
  gap: var(--grid-gap, 0.5rem);
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.75rem;
}

.dtp-calculator__buttons button {
  flex: 1 1 auto;
  min-width: 100px;
}

/* Shipping methods */
.dtp-shipping-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap, 1rem);
  margin-bottom: var(--dtp-fulfilment-bottom-gap, 1rem);
}

/* Tabbed interface removed - using simple headings instead */

/* Section headings - inherit spacing from theme/framework */
.dtp-section-heading:first-child {
  margin-top: 0;
}

.dtp-section-title {
  margin: 0;
  padding: 0.5rem 0;
  color: var(--dtp-section-title-color, var(--dtp-on-surface, currentColor));
  font-size: 1.125rem;
  font-weight: 600;
}

.dtp-calculator__results .dtp-section-title {
  font-size: 1em;
}

.dtp-shipping-method {
  padding: var(--dtp-card-padding, 1.25rem) !important;
  border: 1px solid var(--dtp-method-border-color, #e2e8f0);
  border-radius: 0.5rem;
  background-color: var(--dtp-method-bg-color, #ffffff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.dtp-shipping-method:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dtp-shipping-method:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--dtp-primary-color, currentColor);
}

.dtp-shipping-method__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-xs, 0.75rem);
  row-gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.dtp-shipping-method__name {
  min-width: 0;
  font-weight: 600;
  color: var(--dtp-method-name-color, var(--dtp-on-surface, currentColor));
  overflow-wrap: anywhere;
}

.dtp-shipping-method__cost {
  color: var(--dtp-method-name-color, var(--dtp-on-surface, currentColor));
  font-weight: 600;
  display: inline;
  line-height: 1.35;
  white-space: nowrap;
  justify-self: end;
  align-self: start;
  max-width: max-content;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.dtp-shipping-method__cost-free {
  color: var(--dtp-method-name-color, var(--dtp-on-surface, currentColor));
  font-weight: 600;
  display: inline;
  line-height: 1.35;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.dtp-shipping-method__cost-unavailable {
  color: var(--dtp-method-price-muted-color, var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent)));
  font-weight: 600;
  font-style: italic;
  display: inline;
  line-height: 1.35;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.dtp-shipping-method__threshold {
  margin-bottom: 0.75rem;
  padding: 0.625rem;
  border-radius: 0.375rem;
  background-color: var(--dtp-info-bg-color, #eff6ff);
  color: var(--dtp-info-text-color, #1e40af);
  border-left: 3px solid var(--dtp-info-border-color, #3b82f6);
}

.dtp-free-shipping-progress {
  margin-top: 0.75rem;
  border: 1px solid var(--dtp-progress-border-color, var(--dtp-color-border-subtle, #e5e7eb));
  border-radius: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: var(--dtp-progress-bg-color, var(--dtp-method-bg-color, #ffffff));
}

.dtp-free-shipping-progress__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  font-weight: 400;
  color: var(--dtp-progress-heading-color, var(--dtp-text-color, #111827));
  margin-bottom: 0.625rem;
}

.dtp-free-shipping-progress__heading i {
  font-size: 1.125em;
  flex: 0 0 auto;
}

.dtp-free-shipping-progress__copy {
  min-width: 0;
  line-height: 1.35;
}

.dtp-free-shipping-progress__amount {
  font-weight: 700;
  white-space: nowrap;
}

.dtp-free-shipping-progress__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--dtp-progress-bar-track-color, #e5e7eb);
  overflow: hidden;
}

.dtp-free-shipping-progress__bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--dtp-progress-bar-fill-color, var(--dtp-text-color, #111827));
  transition: width 0.2s ease;
}

.dtp-free-shipping-progress__switch {
  margin-top: 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid var(--dtp-progress-switch-border-color, var(--dtp-color-border-subtle, #d1d5db));
  background: var(--dtp-progress-switch-bg-color, var(--dtp-method-bg-color, #ffffff));
  color: var(--dtp-progress-switch-text-color, var(--dtp-text-color, #111827));
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.dtp-free-shipping-progress--success {
  background: var(--dtp-progress-success-bg-color, #f7fffb);
  border-color: var(--dtp-progress-success-border-color, #bfe9d2);
}

.dtp-free-shipping-progress--success .dtp-free-shipping-progress__heading {
  color: var(--dtp-progress-success-heading-color, #166534);
}

.dtp-free-shipping-progress--success .dtp-free-shipping-progress__bar span {
  background: var(--dtp-progress-success-fill-color, #16a34a);
}

.dtp-free-shipping-widget .dtp-free-shipping-progress {
  margin-top: 0;
}

.dtp-free-shipping-widget__empty {
  color: var(--dtp-description-color, #64748b);
}

/* In-card progress should read as an integrated footer strip, not a nested card. */
.dtp-delivery-method .dtp-free-shipping-progress {
  margin: auto calc(var(--dtp-card-padding, 1.25rem) * -1) calc(var(--dtp-card-padding, 1.25rem) * -1);
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 0;
  padding: 0.875rem var(--dtp-card-padding, 1.25rem) 0.8125rem;
  background: var(--bg-dark, var(--dtp-free-shipping-strip-bg, #0f172a));
  color: var(--text-light, var(--dtp-free-shipping-strip-text, #f8fafc));
}

.dtp-delivery-method .dtp-free-shipping-progress__heading {
  color: inherit;
  margin-bottom: 0.5rem;
}

.dtp-delivery-method .dtp-free-shipping-progress__heading i {
  color: var(--text-light, var(--dtp-free-shipping-strip-icon, #cbd5e1));
}

.dtp-delivery-method .dtp-free-shipping-progress__copy,
.dtp-delivery-method .dtp-free-shipping-progress__amount {
  color: inherit;
}

.dtp-delivery-method .dtp-free-shipping-progress__bar {
  background: rgba(148, 163, 184, 0.35);
}

.dtp-delivery-method .dtp-free-shipping-progress__bar span {
  background: var(--text-light, var(--dtp-free-shipping-strip-text, #f8fafc));
}

.dtp-delivery-method .dtp-free-shipping-progress__switch {
  border-color: rgba(226, 232, 240, 0.5);
  background: var(--bg-dark, var(--dtp-free-shipping-strip-bg, #0f172a));
  color: var(--text-light, var(--dtp-free-shipping-strip-text, #f8fafc));
}

.dtp-delivery-method .dtp-free-shipping-progress__switch:hover,
.dtp-delivery-method .dtp-free-shipping-progress__switch:focus-visible {
  border-color: rgba(248, 250, 252, 0.76);
  background: rgba(15, 23, 42, 0.42);
}

.dtp-delivery-method .dtp-free-shipping-progress--success {
  background: #065f46;
  border-top-color: rgba(110, 231, 183, 0.45);
}

.dtp-delivery-method .dtp-free-shipping-progress--success .dtp-free-shipping-progress__heading i {
  color: #bbf7d0;
}

.dtp-delivery-method .dtp-free-shipping-progress--success .dtp-free-shipping-progress__bar {
  background: rgba(187, 247, 208, 0.35);
}

.dtp-delivery-method .dtp-free-shipping-progress--success .dtp-free-shipping-progress__bar span {
  background: #ecfdf5;
}

.dtp-shipping-method__description {
  margin-bottom: 0.75rem;
  color: var(--dtp-description-color, #64748b);
}

.dtp-shipping-method__delivery-info {
  margin-top: 0.75rem;
  margin-bottom: var(--dtp-delivery-info-bottom-gap, 0.625rem);
  padding: 0.875rem 0.9375rem;
  border-radius: 0.5rem;
  border: 1px solid
    var(
      --dtp-success-panel-border-color,
      color-mix(in srgb, var(--dtp-success-color, #16a34a) 22%, transparent)
    );
  background-color: var(
    --dtp-success-panel-bg,
    color-mix(in srgb, var(--success-ultra-light, var(--dtp-success-bg-color, #ecfdf5)) 88%, #ffffff)
  );
  box-shadow:
    inset 0 0 0 1px
      var(
        --dtp-success-panel-inner-ring,
        color-mix(in srgb, #ffffff 55%, transparent)
      ),
    0 1px 2px rgba(15, 23, 42, 0.04);
  color: var(--success-dark, var(--dtp-success-text-color, #065f46));
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  row-gap: 4px;
}

.dtp-loading-skeleton {
  margin-top: 8px;
  margin-bottom: var(--dtp-fulfilment-bottom-gap, 1rem);
}

.dtp-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dtp-skeleton-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 272px;
}

.dtp-skeleton-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dtp-skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--dtp-skeleton-bg, #e5e7eb);
  border-radius: 8px;
}

.dtp-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--dtp-skeleton-shimmer, rgba(255, 255, 255, 0.6)), transparent);
  animation: dtp-shimmer 1.2s infinite;
}

.dtp-skeleton--label {
  height: 12px;
  width: 120px;
}

.dtp-skeleton--link {
  height: 10px;
  width: 90px;
}

.dtp-skeleton--card {
  height: 228px;
  min-height: 228px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--dtp-method-border-color, #e2e8f0);
  background-color: var(--dtp-skeleton-card-bg, #f8fafc);
  position: relative;
  overflow: hidden;
}

/* Reserve space for in-card status/threshold strips to reduce CLS. */
.dtp-skeleton--card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  background: var(--dtp-skeleton-strip-bg, #e2e8f0);
}

@keyframes dtp-shimmer {
  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 860px) {
  .dtp-skeleton-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dtp-skeleton-panel {
    min-height: 248px;
  }

  .dtp-skeleton--card {
    height: 212px;
    min-height: 212px;
  }
}

.dtp-availability-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--dtp-success-panel-icon-bg, var(--dtp-success-color, #15803d));
  flex-shrink: 0;
  margin-right: 0.5rem;
  box-shadow: 0 0 0 2px color-mix(in srgb, #ffffff 78%, transparent);
}

.dtp-shipping-method__delivery-info .dtp-delivery-date,
.dtp-shipping-method__delivery-info strong {
  margin-left: 0;
}

.dtp-delivery-phrase {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: 4px;
}

.dtp-pickup-availability-phrase {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: 4px;
}

.dtp-delivery-label,
.dtp-delivery-date,
.dtp-pickup-availability-label,
.dtp-pickup-availability-value {
  white-space: nowrap;
}

.dtp-pickup-availability-label {
  margin-left: 0.25rem;
}

.dtp-pickup-availability-value {
  margin-left: 0.25rem;
}

.dtp-delivery-time-window,
.dtp-pickup-time-window {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875em;
  font-weight: 400;
  color: var(--dtp-color-text-muted, #6b7280);
  line-height: 1.35;
}

.dtp-delivery-time-window__range,
.dtp-pickup-time-window__range {
  display: inline;
}

.dtp-fulfilment-context-line {
  display: block;
  flex-basis: 100%;
  margin-top: 0.15rem;
  margin-left: calc(16px + 0.5rem);
  font-size: inherit;
  font-weight: 400;
  line-height: 1.35;
  color: var(--dtp-color-text-muted, #6b7280);
}

.dtp-fulfilment-hours-link {
  display: inline-flex;
  align-items: center;
  flex-basis: 100%;
  margin-top: 0.25rem;
  margin-left: calc(16px + 0.5rem);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.dtp-availability-badge::after {
  content: "";
  width: 5px;
  height: 9px;
  border: 2px solid #ffffff;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}

.dtp-fulfilment-single--delivery {
  margin-bottom: var(--content-gap, 1rem);
}

.dtp-pickup-location-controls,
.dtp-fulfilment-controls {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  margin-bottom: 0.5rem;
  color: var(--dtp-muted-text-color, #4b5563);
}

.dtp-fulfilment-controls__label,
.dtp-pickup-location-controls__label {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0.75rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dtp-pickup-location-controls--single {
  justify-content: flex-start;
}

.dtp-pickup-location-controls__actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  max-width: 100%;
  margin-left: auto;
}

.dtp-fulfilment-controls__actions {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  max-width: 100%;
  margin-left: auto;
}

.dtp-pickup-location-controls__toggle,
.dtp-fulfilment-controls__toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto !important;
  max-width: max-content;
  background: none;
  border: 0;
  margin-left: auto;
  padding: 0;
  color: var(--dtp-muted-text-color, #4b5563);
  font-weight: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  gap: 0.35rem;
  line-height: 1.35;
}

.dtp-fulfilment-controls__actions .dtp-fulfilment-controls__toggle,
.dtp-pickup-location-controls__actions .dtp-pickup-location-controls__toggle {
  margin-left: 0;
}

.dtp-fulfilment-controls__toggle,
.dtp-pickup-location-controls__toggle {
  align-self: center;
}

.dtp-fulfilment-controls__toggle i,
.dtp-pickup-location-controls__toggle i {
  font-size: 1.125em;
  line-height: 1;
}

.dtp-fulfilment-controls__toggle span,
.dtp-pickup-location-controls__toggle span {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dtp-pickup-location-controls__toggle:hover,
.dtp-pickup-location-controls__toggle:focus-visible,
.dtp-fulfilment-controls__toggle:hover,
.dtp-fulfilment-controls__toggle:focus-visible {
  color: var(--dtp-text-color, #111827);
}

.dtp-delivery-methods {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap, 1rem);
}

.dtp-delivery-method {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}

.dtp-delivery-methods--modal .dtp-delivery-method:not(.dtp-delivery-method--active) {
  display: none;
}

.dtp-pickup-locations:not(.dtp-pickup-locations--expanded) .dtp-pickup-location:not(.dtp-pickup-location--active) {
  display: none;
}

.dtp-pickup-locations.dtp-pickup-locations--unselected:not(.dtp-pickup-locations--expanded) .dtp-pickup-location--preview {
  display: flex;
}

.dtp-tabs__panel--collection .dtp-pickup-location--preview,
.dtp-fulfilment-grid__panel--collection .dtp-pickup-location--preview,
.dtp-fulfilment-grid .dtp-pickup-location--preview {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  height: auto;
}

.dtp-pickup-locations--expanded .dtp-pickup-location {
  display: block;
}

.dtp-delivery-modal,
.dtp-pickup-modal,
.dtp-schedule-modal,
.dtp-address-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.dtp-delivery-modal--open,
.dtp-pickup-modal--open,
.dtp-schedule-modal--open,
.dtp-address-modal--open {
  display: block;
}

.dtp-delivery-modal__backdrop,
.dtp-pickup-modal__backdrop,
.dtp-schedule-modal__backdrop,
.dtp-address-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.dtp-delivery-modal__panel,
.dtp-pickup-modal__panel,
.dtp-schedule-modal__panel,
.dtp-address-modal__panel {
  position: relative;
  width: min(520px, 92vw);
  max-height: 80vh;
  overflow: auto;
  margin: 10vh auto 0;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
}

.dtp-delivery-modal__close,
.dtp-pickup-modal__close,
.dtp-schedule-modal__close,
.dtp-address-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.dtp-delivery-modal__title,
.dtp-pickup-modal__title,
.dtp-schedule-modal__title,
.dtp-address-modal__title {
  margin: 0 0 12px;
  font-size: var(--text, 1rem);
  font-weight: 600;
}

.dtp-address-modal__help {
  margin: -4px 0 12px;
  font-size: var(--dtp-text-s, 0.875rem);
  line-height: 1.5;
  color: var(--dtp-muted-text-color, #4b5563);
}

.dtp-address-modal__label {
  display: block;
  font-size: var(--dtp-text-s, 0.875rem);
  margin-bottom: 6px;
  color: var(--dtp-muted-text-color, #4b5563);
}

.dtp-address-modal__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--dtp-input-border-color, #cbd5e1);
  border-radius: 0.375rem;
  background-color: #ffffff;
  font-size: var(--text, 1rem);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.dtp-address-modal__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

/* Outline secondary for Clear when theme does not differentiate .button.alt in modals */
.dtp-address-modal__actions .dtp-address-modal__clear.button.alt {
  background: transparent;
  color: var(--dtp-text-color, #111827);
  border: 1px solid var(--dtp-color-border-subtle, #d1d5db);
  box-shadow: none;
}

.dtp-address-modal__actions .dtp-address-modal__clear.button.alt:hover,
.dtp-address-modal__actions .dtp-address-modal__clear.button.alt:focus-visible {
  background: rgba(15, 23, 42, 0.06);
  border-color: var(--dtp-text-color, #374151);
}

.dtp-delivery-modal__list,
.dtp-pickup-modal__list {
  display: grid;
  gap: 12px;
}

.dtp-schedule-modal__list {
  display: grid;
  gap: 8px;
}

.dtp-schedule-modal__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eef2f7;
}

.dtp-schedule-modal__row:last-child {
  border-bottom: 0;
}

.dtp-schedule-modal__day {
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 600;
  color: #0f172a;
}

.dtp-schedule-modal__hours {
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 500;
  color: #111827;
  text-align: right;
  white-space: nowrap;
}

.dtp-schedule-modal__row.is-closed .dtp-schedule-modal__hours {
  color: #64748b;
  font-style: italic;
}

.dtp-schedule-modal__note {
  margin: 12px 0 0;
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.4;
  color: #667085;
}

.dtp-delivery-modal__item,
.dtp-pickup-modal__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.875rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
}

.dtp-delivery-modal__item-main,
.dtp-pickup-modal__item-main {
  min-width: 0;
}

.dtp-delivery-modal__item-meta,
.dtp-pickup-modal__item-meta {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 0.625rem;
  min-width: max-content;
}

.dtp-delivery-modal__item-name,
.dtp-pickup-modal__item-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.dtp-delivery-modal__item-cost {
  font-size: var(--dtp-text-s, 0.875rem);
  color: #374151;
  margin-bottom: 0;
  text-align: right;
  white-space: nowrap;
}

.dtp-delivery-modal__item-note {
  font-size: var(--text-xs, 0.8125rem);
  color: #6b7280;
  margin-bottom: 8px;
}

.dtp-delivery-modal__item.is-disabled {
  background: var(
    --btn-disabled-bg,
    var(
      --dtp-disabled-surface-bg,
      color-mix(in srgb, var(--dtp-surface-bg, #ffffff) 88%, var(--dtp-text-color, #111827) 12%)
    )
  );
}

.dtp-pickup-modal__item-address,
.dtp-pickup-modal__item-details {
  font-size: var(--dtp-text-s, 0.875rem);
  color: #4b5563;
  margin-bottom: 6px;
}

/* Pickup distance (cards + modal) — muted secondary line */
.dtp-pickup-distance {
  font-size: inherit;
  line-height: 1.35;
  color: var(--dtp-description-color, #64748b);
  margin-top: 0.25rem;
  margin-bottom: 0.375rem;
}

.dtp-pickup-modal__item-distance {
  font-size: var(--text-xs, 0.8125rem);
  line-height: 1.35;
  color: var(--dtp-description-color, #64748b);
  margin-bottom: 6px;
}

.dtp-calculator .dtp-delivery-modal__item-select.button.wp-element-button,
.dtp-calculator .dtp-pickup-modal__item-select.button.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.625rem 1rem;
  border: var(--btn-border-size, 0) solid var(--button-color, var(--dtp-primary-color, #111827));
  border-radius: var(--btn-radius, 0.375rem);
  background: var(--button-color, var(--dtp-primary-color, #111827));
  color: var(--button-text, var(--dtp-button-text-color, #ffffff));
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: var(--btn-weight, 600);
  line-height: var(--btn-line-height, 1.2);
  text-transform: var(--btn-text-transform, var(--button-text-transform, uppercase));
  letter-spacing: var(--btn-letter-spacing, normal);
  text-decoration: var(--btn-text-decoration, none);
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.18s ease, box-shadow 0.18s ease;
}

.dtp-calculator .dtp-delivery-modal__item-select.button.wp-element-button:hover,
.dtp-calculator .dtp-delivery-modal__item-select.button.wp-element-button:focus-visible,
.dtp-calculator .dtp-pickup-modal__item-select.button.wp-element-button:hover,
.dtp-calculator .dtp-pickup-modal__item-select.button.wp-element-button:focus-visible {
  filter: brightness(0.95);
}

.dtp-calculator .dtp-delivery-modal__item-select.button.wp-element-button:focus-visible,
.dtp-calculator .dtp-pickup-modal__item-select.button.wp-element-button:focus-visible {
  outline: 2px solid var(--dtp-primary-color, #111827);
  outline-offset: 2px;
}

.dtp-calculator .dtp-delivery-modal__item-select.button.wp-element-button:disabled,
.dtp-calculator .dtp-pickup-modal__item-select.button.wp-element-button:disabled {
  border-color: var(
    --btn-disabled-border,
    var(--dtp-disabled-button-border-color, var(--dtp-color-border-subtle, #cbd5e1))
  );
  background: var(
    --btn-disabled-bg,
    var(
      --dtp-disabled-button-bg,
      color-mix(in srgb, var(--dtp-surface-bg, #ffffff) 82%, var(--dtp-text-color, #111827) 18%)
    )
  );
  color: var(
    --btn-disabled-color,
    var(--dtp-disabled-button-text-color, var(--dtp-muted-text-color, #334155))
  );
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
  opacity: 1;
}

@media (max-width: 640px) {
  .dtp-delivery-modal__item,
  .dtp-pickup-modal__item {
    grid-template-columns: 1fr;
  }

  .dtp-delivery-modal__item-meta,
  .dtp-pickup-modal__item-meta {
    justify-items: start;
    min-width: 0;
  }

  .dtp-delivery-modal__item-cost {
    text-align: left;
  }

  .dtp-calculator .dtp-delivery-modal__item-select.button.wp-element-button,
  .dtp-calculator .dtp-pickup-modal__item-select.button.wp-element-button {
    width: 100%;
  }
}

/* Icons added via HTML <i> tags for reliability */

/* Pickup method specific styling */
.dtp-pickup-method {
  /* Enhanced styling for pickup methods */
  padding: var(--dtp-card-padding, 1.25rem) !important;
  background-color: var(--dtp-method-bg-color, #ffffff);
  border: 1px solid var(--dtp-method-border-color, #e2e8f0);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--dtp-primary-color, currentColor);
  }
}

.dtp-shipping-method--selected {
  border-color: var(--dtp-method-selected-border-color, currentColor) !important;
  background-color: var(--dtp-method-selected-bg) !important;
  box-shadow: var(--dtp-method-selected-shadow) !important;
  outline: none !important;
  transform: none !important;
}

.dtp-shipping-method--selected:hover,
.dtp-shipping-method--selected:active,
.dtp-shipping-method--selected:focus,
.dtp-shipping-method--selected:focus-visible {
  border-color: var(--dtp-method-selected-border-color, currentColor) !important;
  background-color: var(--dtp-method-selected-bg) !important;
  box-shadow: var(--dtp-method-selected-shadow) !important;
  outline: none !important;
  transform: none !important;
}

.dtp-shipping-method--selection-flash {
  animation: dtp-selection-flash 650ms ease-out;
}

@keyframes dtp-selection-flash {
  0% {
    background-color: color-mix(in srgb, var(--dtp-method-selected-border-color, #111827) 8%, #ffffff);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--dtp-method-selected-border-color, #111827) 88%, #ffffff),
      0 0 0 0 color-mix(in srgb, var(--dtp-method-selected-border-color, #111827) 0%, transparent);
  }

  45% {
    background-color: color-mix(in srgb, var(--dtp-method-selected-border-color, #111827) 6%, #ffffff);
    box-shadow:
      0 0 0 1px var(--dtp-method-selected-border-color, currentColor),
      0 0 0 7px color-mix(in srgb, var(--dtp-method-selected-border-color, currentColor) 12%, transparent);
  }

  100% {
    background-color: var(--dtp-method-selected-bg);
    box-shadow: var(--dtp-method-selected-shadow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dtp-shipping-method--selection-flash {
    animation: none;
  }
}

.dtp-delivery-date {
  font-weight: 600;
}

/* Empty message */
.dtp-shipping-methods__empty {
  padding: 1rem;
  border-radius: 0.375rem;
  background-color: var(--dtp-warning-bg-color, #fff7ed);
  color: var(--dtp-warning-text-color, #9a3412);
}

/* Additional homepage layout fixes */
.dtp-calculator *,
.dtp-calculator *::before,
.dtp-calculator *::after {
  box-sizing: border-box !important;
}

/* Ensure form works in constrained containers */
.dtp-calculator__form-row {
  min-width: 0 !important;
  flex-shrink: 1 !important;
}

.dtp-calculator__input {
  min-width: 120px !important;
  flex-shrink: 1 !important;
}

/* Ensure form works in constrained containers */

/* Responsive adjustments */
@media (max-width: 480px) {
  .dtp-calculator__buttons {
    flex-direction: column;
    margin-top: 0.5rem;
  }
  
  .dtp-calculator__buttons button {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .dtp-calculator__buttons button:last-child {
    margin-bottom: 0;
  }
  
  .dtp-shipping-method__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* Homepage and container-specific fixes for form_only mode */
.dtp-calculator {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.dtp-calculator__form {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.dtp-calculator__form-row {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure form inputs work in any container */
.dtp-calculator__input,
#dtp-calculator-form-input,
#dtp-calculator-input {
  max-width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

.dtp-tabs__tab {
  font-family: inherit !important;
}

/* Override homepage theme styles that might interfere */
.dtp-calculator input[type="text"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  background-color: var(--dtp-input-bg-color, #ffffff) !important;
  color: var(--dtp-input-text-color, var(--dtp-text-color, #111827)) !important;
}

/* Accessibility enhancements */
.dtp-calculator__input:focus-visible {
  outline: 2px solid var(--dtp-primary-color, #3b82f6);
  outline-offset: 2px;
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  .dtp-shipping-method {
    border: 2px solid black;
  }
}

/* Shortcode postcode link styling */
.dtp-postcode-link {
  color: var(--dtp-primary-color, #3b82f6);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}

.dtp-postcode-link:hover,
.dtp-postcode-link:focus {
  color: var(--dtp-primary-hover-color, #1d4ed8);
  text-decoration: none;
}

.dtp-postcode-link:focus-visible {
  outline: 2px solid var(--dtp-primary-color, #3b82f6);
  outline-offset: 2px;
}

/* Specific styling for "enter postcode" links in dynamic tags */
/* .dtp-enter-postcode-link inherits from .dtp-postcode-link above */
/* Users can override with more specific selectors if needed */

/* Modern stepper styles for number inputs */
input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Wrapper for inputs with steppers */
.dtp-stepper-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--dtp-border-color, #e2e8f0);
  border-radius: 0.375rem;
  background: white;
  overflow: hidden;
}

.dtp-stepper-wrapper input[type="number"] {
  border: 0;
  text-align: center;
  width: 60px;
  padding: 0.5rem 0.75rem;
  margin: 0;
  box-shadow: none;
  font-size: var(--text, 1rem);
}

.dtp-stepper-button {
  background: var(--dtp-bg-color, #f8fafc);
  border: 0;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dtp-secondary-color, #64748b);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.dtp-stepper-button:hover {
  background: var(--dtp-primary-color, #3b82f6);
  color: white;
}

.dtp-stepper-button:active {
  background: var(--dtp-primary-hover-color, #2563eb);
  color: white;
}

.dtp-stepper-button:first-child {
  border-right: 1px solid var(--dtp-border-color, #e2e8f0);
}

.dtp-stepper-button:last-child {
  border-left: 1px solid var(--dtp-border-color, #e2e8f0);
}

.dtp-stepper-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--dtp-bg-color, #f8fafc);
  color: var(--dtp-secondary-color, #64748b);
}

.dtp-stepper-button:disabled:hover {
  background: var(--dtp-bg-color, #f8fafc);
  color: var(--dtp-secondary-color, #64748b);
}

.dtp-stepper-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Accessibility enhancements for steppers */
.dtp-stepper-button:focus-visible {
  outline: 2px solid var(--dtp-primary-color, #3b82f6);
  outline-offset: -2px;
}

/* Dynamic content loading states - simplified for server-side rendering */
.dtp-dynamic-delivery-cutoff,
.dtp-dynamic-pickup-cutoff,
.dtp-dynamic-pickup-cutoff-store {
    display: inline-block;
    min-width: 100px;
    text-align: left;
}

/* Only keep loading states for cutoff times and pickup (still dynamic) */
.dtp-dynamic-delivery-cutoff:not(.dtp-loaded),
.dtp-dynamic-pickup-cutoff:not(.dtp-loaded),
.dtp-dynamic-pickup-cutoff-store:not(.dtp-loaded) {
    color: #666;
    font-style: italic;
    opacity: 0.8;
    position: relative;
}

.dtp-dynamic-delivery-cutoff:not(.dtp-loaded)::after,
.dtp-dynamic-pickup-cutoff:not(.dtp-loaded)::after,
.dtp-dynamic-pickup-cutoff-store:not(.dtp-loaded)::after {
    content: "...";
    animation: dtp-loading-dots 1.5s infinite;
}

@keyframes dtp-loading-dots {
    0%, 20% { content: ""; }
    40% { content: "."; }
    60% { content: ".."; }
    80%, 100% { content: "..."; }
}

.dtp-dynamic-delivery-cutoff.dtp-loaded,
.dtp-dynamic-pickup-cutoff.dtp-loaded,
.dtp-dynamic-pickup-cutoff-store.dtp-loaded {
    opacity: 1;
    font-style: normal;
    color: inherit;
}

.dtp-dynamic-delivery-cutoff.dtp-error,
.dtp-dynamic-pickup-cutoff.dtp-error,
.dtp-dynamic-pickup-cutoff-store.dtp-error {
    color: #d63384;
    font-style: italic;
}

/* Improved delivery information styling */
.dtp-delivery-info {
    background: var(--dtp-info-bg-color, #eff6ff);
    border: 1px solid var(--dtp-border-color, #e2e8f0);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.5;
}

.dtp-delivery-info .dtp-delivery-date {
    font-weight: 600;
    color: var(--dtp-info-text-color, #1e40af);
}

.dtp-delivery-info .dtp-cutoff-info {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}

/* Enhanced pickup information */
.dtp-pickup-info {
    background: var(--dtp-success-bg-color, #ecfdf5);
    border: 1px solid var(--dtp-success-color, #10b981);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.5;
}

.dtp-pickup-info .dtp-pickup-availability {
    font-weight: 600;
    color: var(--dtp-success-text-color, #065f46);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .dtp-dynamic-delivery-date,
    .dtp-dynamic-delivery-cutoff,
    .dtp-dynamic-pickup-cutoff,
    .dtp-dynamic-pickup-cutoff-store {
        min-width: 80px;
        font-size: 14px;
    }
    
    .dtp-delivery-info,
    .dtp-pickup-info {
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* Pickup info */
.dtp-pickup-info {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--dtp-info-bg-color, color-mix(in srgb, currentColor 8%, transparent));
  color: var(--dtp-info-text-color, var(--dtp-on-surface, currentColor));
  font-size: var(--dtp-text-s, 0.875rem);
}

.dtp-pickup-info__name {
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: var(--text, 1rem);
  color: var(--dtp-info-title-color, var(--dtp-on-surface, currentColor));
}

.dtp-pickup-info__address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: var(--dtp-text-s, 0.875rem);
  line-height: 1.4;
  color: var(
    --dtp-pickup-address-color,
    var(--dtp-description-color, #64748b)
  );
}

.dtp-pickup-info__address a {
  color: inherit;
}

.dtp-pickup-info__address a:hover,
.dtp-pickup-info__address a:focus-visible {
  color: inherit;
}

.dtp-pickup-info__address-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.125rem;
  min-width: 0;
  width: 100%;
}

.dtp-pickup-info__address-text {
  min-width: 0;
}

.dtp-pickup-info__distance {
  display: inline-flex;
  align-items: baseline;
  font-size: var(--dtp-text-s, 0.875rem);
  line-height: 1.4;
  color: var(--dtp-description-color, #64748b);
  white-space: nowrap;
  justify-self: end;
  text-align: right;
}

.dtp-pickup-info__icon,
.dtp-pickup-method .dtp-pickup-info__icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  /* Pin follows address line; optional override only when explicitly themed */
  color: var(--dtp-pickup-pin-color, inherit);
  fill: currentColor;
}

.dtp-pickup-info__icon svg,
.dtp-pickup-info__icon svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.dtp-pickup-info__details {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--dtp-color-border-subtle, color-mix(in srgb, currentColor 20%, transparent));
  color: var(--dtp-info-details-color, var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent)));
  font-size: var(--text-xs, 0.8125rem);
}

.dtp-pickup-info__details em {
  font-style: italic;
}

/* Separate pickup availability section (moved out from nested position) */
.dtp-pickup-availability {
  margin-top: 0.75rem;
  padding: 0.625rem;
  border-radius: 0.25rem;
  background-color: var(--dtp-success-bg-color, #ecfdf5);
  color: var(--dtp-success-text-color, #065f46);
  font-size: var(--dtp-text-s, 0.875rem);
  border: 1px solid var(--dtp-success-text-color, #065f46);
}

.dtp-pickup-availability strong {
  font-weight: 600;
  color: var(--dtp-success-text-color, #065f46);
}

/* More locations link */
.dtp-pickup-info__more-locations {
  margin-top: 0.75rem;
  text-align: center;
}

.dtp-pickup-info__more-locations a {
  color: var(--dtp-link-color, var(--dtp-primary-color, currentColor));
  text-decoration: none;
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 500;
}

.dtp-pickup-info__more-locations a:hover {
  text-decoration: underline;
}

/* Additional pickup locations */
.dtp-additional-locations {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: var(--dtp-additional-surface-bg, color-mix(in srgb, currentColor 6%, transparent));
  border-radius: 0.25rem;
}

.dtp-additional-locations .dtp-pickup-location {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--dtp-color-border-subtle, color-mix(in srgb, currentColor 14%, transparent));
}

.dtp-additional-locations .dtp-pickup-location:last-child {
  border-bottom: none;
}

.dtp-pickup-location h5 {
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 600;
  color: var(--dtp-info-title-color, var(--dtp-on-surface, currentColor));
  margin: 0 0 0.25rem 0;
}

.dtp-pickup-location p {
  margin: 0;
  color: var(--dtp-info-text-color, var(--dtp-on-surface, currentColor));
  font-size: var(--text-xs, 0.8125rem);
}

.dtp-pickup-location__details {
  margin-top: 0.25rem !important;
  font-style: italic;
  color: var(--dtp-info-details-color, var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent)));
}

/* Checkout delivery info */
.dtp-checkout-delivery-info {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--dtp-success-bg-color, #ecfdf5);
  color: var(--dtp-success-text-color, #065f46);
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 500;
}

.dtp-delivery-date {
  font-weight: 600;
}

/* Empty message */
.dtp-shipping-methods__empty {
  padding: 1rem;
  border-radius: 0.375rem;
  background-color: var(--dtp-warning-bg-color, #fff7ed);
  color: var(--dtp-warning-text-color, #9a3412);
}

/* Pickup method specific styling */
.dtp-pickup-method .dtp-pickup-info__address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.75rem 0 0.5rem 0;
  line-height: 1.4;
}

.dtp-pickup-method .dtp-pickup-info__details {
  margin: 0.5rem 0 0.75rem 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--dtp-color-border-subtle, rgba(226, 232, 240, 0.5));
  color: var(
    --dtp-info-details-color,
    var(--dtp-on-surface-muted, color-mix(in srgb, currentColor 70%, transparent))
  );
}

.dtp-pickup-method .dtp-pickup-info__details em {
  font-style: italic;
}

/* Enhanced pickup availability button styling */
/* Pickup availability inherits delivery-info styling for consistency */
.dtp-pickup-availability-integrated {
  /* No custom styling - matches .dtp-shipping-method__delivery-info */
}

/* Loading state for auto-triggered calculator results */
.dtp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: var(--dtp-secondary-color, #64748b);
  background-color: var(--dtp-loading-bg, #f8fafc);
  border-radius: 0.375rem;
  border: 1px solid var(--dtp-border-color, #e2e8f0);
}

/* Temporary results container for form-only calculators */
.dtp-temporary-results {
  margin-top: 1rem;
  animation: dtp-fade-in 0.2s ease-in-out;
}

@keyframes dtp-fade-in {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.dtp-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 0.5rem;
  border: 2px solid transparent;
  border-top: 2px solid var(--dtp-primary-color, #3b82f6);
  border-radius: 50%;
  animation: dtp-spin 1s linear infinite;
}

/* Enhanced loading states for cache compatibility */
.dtp-enhanced-loading {
  background: linear-gradient(135deg, var(--dtp-loading-bg, #f8fafc) 0%, #ffffff 100%);
  border-color: var(--dtp-primary-color, #3b82f6);
  color: var(--dtp-primary-color, #3b82f6);
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.dtp-enhanced-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  animation: dtp-shimmer 1.5s infinite;
}

.dtp-enhanced-loading::after {
  border-width: 3px;
  border-top-color: var(--dtp-primary-color, #3b82f6);
  border-right-color: transparent;
  border-bottom-color: var(--dtp-primary-color, #3b82f6);
  border-left-color: transparent;
  animation: dtp-enhanced-spin 0.8s ease-in-out infinite;
}

/* Enhanced error states */
.dtp-enhanced-error {
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  border-color: #ef4444;
  color: #dc2626;
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.dtp-enhanced-error p {
  margin: 0 0 0.5rem 0;
}

.dtp-enhanced-error small {
  color: #6b7280;
  font-size: var(--text-xs, 0.75rem);
}

.dtp-retry-btn {
  background: var(--dtp-primary-color, #3b82f6);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: var(--dtp-text-s, 0.875rem);
  cursor: pointer;
  margin-top: 0.75rem;
  transition: background-color 0.2s ease;
}

.dtp-retry-btn:hover {
  background: var(--dtp-primary-hover, #2563eb);
}

.dtp-retry-btn:active {
  transform: translateY(1px);
}

@keyframes dtp-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes dtp-enhanced-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes dtp-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}
/* Privacy-Safe Skeleton Loading */
.dtp-skeleton-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
  background-size: 200% 100% !important;
  animation: dtp-skeleton-shimmer 1.5s infinite !important;
  color: transparent !important;
}

@keyframes dtp-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Privacy protection - ensure no personal data visible during loading */
.dtp-calculator__input[data-server-postcode]:not(.dtp-skeleton-loading) {
  transition: all 0.3s ease;
}

/* ============================================
   HERO POSTCODE COMPONENT
   Homepage hero section postcode capture
   Uses container queries for modern responsive design
   ============================================ */

.dtp-hero-postcode {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap, 1rem);
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  container-type: inline-size;
  container-name: hero-postcode;
}

.dtp-hero-postcode__copy {
  display: grid;
  gap: var(
    --dtp-hero-copy-gap,
    var(
      --acss-paragraph-spacing,
      var(--acss-space-xs, var(--space-xs, 0.5rem))
    )
  );
}

/* Form Container */
.dtp-hero-postcode__form-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.dtp-hero-postcode__title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(
    --dtp-hero-title-color,
    var(
      --acss-color-heading,
      var(--acss-heading, var(--acss-h2, var(--dtp-title-color, inherit)))
    )
  );
}

.dtp-hero-postcode__subtitle {
  margin: 0;
  font-size: var(--text, 1rem);
  line-height: 1.6;
  color: var(
    --dtp-hero-subtitle-color,
    var(--acss-color-text, var(--acss-text, inherit))
  );
}

/* Form */
.dtp-hero-postcode__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
}

.dtp-hero-postcode__form-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  align-items: stretch;
}

.dtp-hero-postcode__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.875rem 1.25rem;
  border: 2px solid var(--dtp-input-border-color, #cbd5e1);
  border-radius: 0.5rem;
  background-color: var(--dtp-input-bg-color, #ffffff);
  color: var(--dtp-input-text-color, var(--dtp-text-color, #111827));
  font-size: 1.125rem;
  text-transform: uppercase;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dtp-hero-postcode__input:focus {
  border-color: var(--dtp-primary-color, #3b82f6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dtp-hero-postcode__button {
  flex: 0 0 auto;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--btn-pad-y, 0.875rem) var(--btn-pad-x, 2rem);
  border: var(--btn-border-size, 0) solid var(--button-color, var(--dtp-primary-color, #3b82f6));
  border-radius: var(--btn-radius, 0.375rem);
  background: var(--button-color, var(--dtp-primary-color, #3b82f6));
  color: var(--button-text, var(--dtp-button-text-color, #ffffff));
  font-weight: var(--btn-weight, 600);
  text-transform: var(--btn-text-transform, none);
  letter-spacing: var(--btn-letter-spacing, normal);
  text-decoration: var(--btn-text-decoration, none);
  line-height: var(--btn-line-height, 1.2);
  white-space: nowrap;
  min-width: clamp(6.75rem, 18%, 8.75rem);
  max-width: 40%;
  text-align: center;
}

/* Error and Loading States */
.dtp-hero-postcode__error {
  padding: 0.75rem 1rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  color: #dc2626;
  font-size: var(--dtp-text-s, 0.875rem);
  text-align: center;
}

.dtp-hero-postcode__loading {
  width: 100%;
  margin-top: 0.25rem;
}

.dtp-hero-postcode__loading .dtp-loading-skeleton {
  margin-top: 0;
  margin-bottom: 0;
}

.dtp-hero-postcode__loading .dtp-skeleton-panel {
  min-height: 236px;
}

.dtp-loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--dtp-primary-color, #3b82f6);
  border-right-color: transparent;
  border-radius: 50%;
  animation: dtpSpin 0.6s linear infinite;
}

@keyframes dtpSpin {
  to { transform: rotate(360deg); }
}

/* Notice Banner - shown BELOW form with card styling */
.dtp-hero-postcode__notice {
  --dtp-hero-notice-pad-y: 1rem;
  --dtp-hero-notice-pad-x: 1.125rem;
  padding: var(--dtp-hero-notice-pad-y) var(--dtp-hero-notice-pad-x);
  border-radius: 0.875rem;
  margin-top: 1.5rem;
  border: 1px solid var(--dtp-color-border-subtle, rgba(148, 163, 184, 0.35));
  background: var(--dtp-color-bg-card, #f8fafc);
  color: var(--dtp-color-text-primary, #0f172a);
  opacity: 0;
  transform: translateY(10px);
  overflow: hidden;
  box-shadow: 0 12px 26px -20px rgba(2, 6, 23, 0.6), 0 4px 12px -10px rgba(2, 6, 23, 0.45);
}

/* Status-based styling */
.dtp-hero-postcode__notice[data-status="both"],
.dtp-hero-postcode__notice[data-status="delivery_only"] {
  border-color: rgba(34, 197, 94, 0.34);
  background: var(--dtp-success-bg, #ecfdf5);
  border-color: color-mix(in srgb, var(--dtp-success-color, #16a34a) 32%, transparent);
  background: color-mix(in srgb, var(--dtp-success-bg, #ecfdf5) 85%, #ffffff);
  color: var(--dtp-color-text-primary, #0f172a);
}

.dtp-hero-postcode__notice[data-status="collection_only"] {
  border-color: rgba(217, 119, 6, 0.34);
  background: #fffbeb;
  color: var(--dtp-color-text-primary, #0f172a);
}

.dtp-hero-postcode__notice[data-status="none"] {
  border-color: rgba(234, 88, 12, 0.3);
  background: #fff7ed;
  color: var(--dtp-color-text-primary, #0f172a);
}

.dtp-hero-postcode__notice[data-status="results"] {
  padding: 0;
  margin-top: 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* Fixed modals inside injected HTML must not be trapped: transform/overflow on an ancestor breaks position:fixed */
  overflow: visible;
  transform: none;
}

.dtp-hero-postcode__notice-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.25rem;
}

/* Legacy/orphan close controls from older hero notice markup can render as a floating "X". */
.dtp-hero-postcode__notice > .dtp-hero-postcode__notice-close,
.dtp-hero-postcode__notice-header {
  display: none !important;
}

.dtp-hero-postcode__notice-close {
  padding: 0.375rem;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  border-radius: 0.25rem;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dtp-hero-postcode__notice-close:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.08);
}

/* Status List - separate items for delivery and collection */
.dtp-hero-postcode__status-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.dtp-hero-postcode__status-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  padding: 0.625rem 0.75rem;
}

.dtp-hero-postcode__status-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.dtp-hero-postcode__status-text {
  flex: 1;
  font-weight: 580;
  line-height: 1.35;
  color: var(--dtp-color-text-primary, #0f172a);
}

.dtp-hero-postcode__methods {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.dtp-hero-postcode__method-group {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  padding: 0.625rem 0.75rem;
}

.dtp-hero-postcode__method-heading {
  margin: 0 0 0.5rem;
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 640;
  color: var(--dtp-color-text-tertiary, #64748b);
}

.dtp-hero-postcode__method-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.375rem;
}

.dtp-hero-postcode__method-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
  font-size: var(--dtp-text-s, 0.875rem);
}

.dtp-hero-postcode__method-name {
  font-weight: 560;
  color: var(--dtp-color-text-primary, #0f172a);
}

.dtp-hero-postcode__method-meta {
  font-size: var(--text-xs, 0.75rem);
  color: var(--dtp-color-text-tertiary, #64748b);
}

.dtp-hero-postcode__method-item.is-unavailable .dtp-hero-postcode__method-name {
  opacity: 0.72;
}

.dtp-hero-postcode__cta-buttons {
  margin-top: 0.875rem;
}

.dtp-hero-postcode__continue {
  margin-top: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--dtp-text-s, 0.875rem);
  font-weight: 560;
  color: var(--dtp-link-color, currentColor);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dtp-hero-postcode__continue:hover,
.dtp-hero-postcode__continue:focus-visible {
  color: var(--dtp-link-hover-color, var(--dtp-link-color, currentColor));
}

.dtp-hero-postcode__results-host {
  container-type: inline-size;
  container-name: dtp-calculator;
  --dtp-method-bg-color: var(--dtp-hero-results-card-bg, var(--dtp-surface-bg, #ffffff));
  --dtp-method-border-color: var(--dtp-hero-results-border-color, color-mix(in srgb, currentColor 24%, transparent));
  --dtp-method-name-color: var(--dtp-hero-results-heading-color, currentColor);
  --dtp-text-color: var(--dtp-hero-results-text-color, currentColor);
  --dtp-muted-text-color: var(--dtp-hero-results-muted-color, color-mix(in srgb, currentColor 70%, transparent));
  --dtp-description-color: var(--dtp-hero-results-muted-color, color-mix(in srgb, currentColor 70%, transparent));
  --dtp-color-border-subtle: var(--dtp-hero-results-border-color, color-mix(in srgb, currentColor 24%, transparent));
  --dtp-progress-border-color: var(--dtp-hero-results-border-color, color-mix(in srgb, currentColor 24%, transparent));
  --dtp-progress-bg-color: transparent;
  --dtp-progress-heading-color: var(--dtp-hero-results-heading-color, currentColor);
  --dtp-progress-bar-track-color: color-mix(in srgb, currentColor 24%, transparent);
  --dtp-progress-bar-fill-color: var(--dtp-hero-results-heading-color, currentColor);
  --dtp-progress-switch-border-color: var(--dtp-hero-results-border-color, color-mix(in srgb, currentColor 24%, transparent));
  --dtp-progress-switch-bg-color: transparent;
  --dtp-progress-switch-text-color: var(--dtp-hero-results-text-color, currentColor);
  /* Avoid color-mix(..., currentColor): parent/hero brand color would tint tab borders */
  --dtp-tabs-border-color: var(--dtp-hero-results-border-color, rgba(15, 23, 42, 0.14));
  --dtp-tabs-bg-color: transparent;
  --dtp-tabs-text-color: var(--dtp-hero-results-text-color, currentColor);
  --dtp-info-bg-color: transparent;
  --dtp-info-text-color: var(--dtp-hero-results-text-color, currentColor);
  --dtp-info-title-color: var(--dtp-hero-results-heading-color, currentColor);
  --dtp-info-details-color: var(--dtp-hero-results-muted-color, color-mix(in srgb, currentColor 70%, transparent));
  --dtp-link-color: var(--dtp-hero-results-link-color, currentColor);
  --dtp-link-hover-color: var(--dtp-hero-results-link-hover-color, var(--dtp-link-color, currentColor));
}

.dtp-hero-postcode__results-host .dtp-shipping-methods {
  margin-top: 0;
  margin-bottom: 0;
}

.dtp-hero-postcode__results-host .dtp-pickup-locations {
  margin-bottom: 0;
}

.dtp-hero-postcode__progress {
  margin-top: 0.875rem;
}

/* Hero in-card threshold strip: ACSS token -> DTP token -> fallback */
.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress {
  margin: 0 calc(var(--dtp-hero-notice-pad-x) * -1) calc(var(--dtp-hero-notice-pad-y) * -1);
  border: 0;
  border-top: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 0 0 0.875rem 0.875rem;
  padding: 0.875rem var(--dtp-hero-notice-pad-x) 0.8125rem;
  background: var(--bg-dark, var(--dtp-free-shipping-strip-bg, #0f172a));
  color: var(--text-light, var(--dtp-free-shipping-strip-text, #f8fafc));
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__heading {
  color: inherit;
  margin-bottom: 0.5rem;
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__heading i {
  color: var(--text-light, var(--dtp-free-shipping-strip-icon, #cbd5e1));
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__copy,
.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__amount {
  color: inherit;
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__bar {
  background: rgba(148, 163, 184, 0.35);
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress__bar span {
  background: var(--text-light, var(--dtp-free-shipping-strip-text, #f8fafc));
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress--success {
  background: #065f46;
  border-top-color: rgba(110, 231, 183, 0.45);
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress--success .dtp-free-shipping-progress__heading i {
  color: #bbf7d0;
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress--success .dtp-free-shipping-progress__bar {
  background: rgba(187, 247, 208, 0.35);
}

.dtp-hero-postcode__notice:not([data-status="results"]) .dtp-free-shipping-progress--success .dtp-free-shipping-progress__bar span {
  background: #ecfdf5;
}

/* CTA Buttons Container (inside notice) */
.dtp-hero-postcode__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
}

.dtp-hero-postcode__cta-primary {
  display: inline-block;
  padding: var(--btn-pad-y, 0.75rem) var(--btn-pad-x, 1.5rem);
  border: var(--btn-border-size, 0) solid var(--button-color, var(--dtp-primary-color, #3b82f6));
  border-radius: var(--btn-radius, 0.5rem);
  background-color: var(--button-color, var(--dtp-primary-color, #3b82f6));
  color: var(--button-text, var(--dtp-button-text-color, #ffffff));
  font-weight: var(--btn-weight, 600);
  text-transform: var(--btn-text-transform, none);
  letter-spacing: var(--btn-letter-spacing, normal);
  text-decoration: var(--btn-text-decoration, none);
  line-height: var(--btn-line-height, 1.2);
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 150px;
}

.dtp-hero-postcode__cta-primary:hover {
  background-color: var(--dtp-primary-hover-color, #2563eb);
  transform: translateY(-1px);
}

.dtp-hero-postcode__cta-primary:active {
  transform: translateY(0);
}

.dtp-hero-postcode__cta-secondary {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--dtp-primary-color, #3b82f6);
  border-radius: 0.5rem;
  background-color: white;
  color: var(--dtp-primary-color, #3b82f6);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 150px;
}

.dtp-hero-postcode__cta-secondary:hover {
  background-color: var(--dtp-primary-color, #3b82f6);
  color: white;
  transform: translateY(-1px);
}

/* Modern Container Queries for Responsive Design */
/* Prevents overflow issues regardless of parent container width */
@container hero-postcode (min-width: 500px) {
  .dtp-hero-postcode__form-row {
    flex-direction: row;
  }
  
  .dtp-hero-postcode__cta-buttons {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  
  .dtp-hero-postcode__cta-primary,
  .dtp-hero-postcode__cta-secondary {
    flex: 0 1 auto;
  }
}

@container hero-postcode (max-width: 499px) {
  .dtp-hero-postcode__title {
    font-size: 1.5rem;
  }
  
  .dtp-hero-postcode__form-row {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  
  .dtp-hero-postcode__form-row .dtp-hero-postcode__input,
  .dtp-hero-postcode__form-row .dtp-hero-postcode__button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Full-width row: themes often use flex + justify-content:start on buttons; keep label centred */
  .dtp-hero-postcode__form-row .dtp-hero-postcode__button {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .dtp-hero-postcode__notice-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .dtp-hero-postcode__notice-message {
    width: 100%;
  }
  
  .dtp-hero-postcode__notice-change {
    width: 100%;
  }
  
  .dtp-hero-postcode__cta-buttons {
    flex-direction: column;
  }
  
  .dtp-hero-postcode__cta-primary,
  .dtp-hero-postcode__cta-secondary {
    width: 100%;
  }
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
  @media (min-width: 640px) {
    .dtp-hero-postcode__form-row {
      flex-direction: row;
    }
    
    .dtp-hero-postcode__cta-buttons {
      flex-direction: row;
      flex-wrap: nowrap;
    }
    
    .dtp-hero-postcode__cta-primary,
    .dtp-hero-postcode__cta-secondary {
      flex: 0 1 auto;
    }
  }
  
  @media (max-width: 639px) {
    .dtp-hero-postcode__form-row {
      flex-direction: column;
      flex-wrap: nowrap;
    }
    
    .dtp-hero-postcode__form-row .dtp-hero-postcode__input,
    .dtp-hero-postcode__form-row .dtp-hero-postcode__button {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .dtp-hero-postcode__form-row .dtp-hero-postcode__button {
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    
    .dtp-hero-postcode__notice-header {
      flex-direction: column;
    }
    
    .dtp-hero-postcode__notice-change {
      width: 100%;
    }
    
    .dtp-hero-postcode__cta-buttons {
      flex-direction: column;
    }
  }
}

/* Bricks Builder Compatibility */
body.bricks-is-frontend .dtp-hero-postcode,
body[class*="bricks"] .dtp-hero-postcode {
  display: flex !important;
  flex-direction: column !important;
}

body.bricks-is-frontend .dtp-hero-postcode__form-row,
body[class*="bricks"] .dtp-hero-postcode__form-row {
  display: flex !important;
  gap: 0.75rem !important;
}

body.bricks-is-frontend .dtp-hero-postcode__button,
body[class*="bricks"] .dtp-hero-postcode__button {
  background: var(--button-color, var(--dtp-primary-color, #3b82f6)) !important;
  color: var(--button-text, var(--dtp-button-text-color, #ffffff)) !important;
  border-radius: var(--btn-radius, 0.375rem) !important;
  text-transform: var(--btn-text-transform, none) !important;
  letter-spacing: var(--btn-letter-spacing, normal) !important;
  text-decoration: var(--btn-text-decoration, none) !important;
}

body.bricks-is-frontend .dtp-hero-postcode__cta-primary,
body[class*="bricks"] .dtp-hero-postcode__cta-primary {
  background-color: var(--dtp-primary-color, #3b82f6) !important;
  color: var(--dtp-button-text-color, white) !important;
}

/* Override Bricks Builder's width: 100% on close button */
body.bricks-is-frontend .dtp-hero-postcode__notice-close,
body[class*="bricks"] .dtp-hero-postcode__notice-close,
.dtp-hero-postcode__notice-close {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  display: inline-flex !important;
}

/* Enhanced loading state for privacy-safe initialization */
.dtp-calculator.dtp-privacy-loading .dtp-calculator__input {
  background: linear-gradient(90deg, #f8fafc 25%, #f1f5f9 50%, #f8fafc 75%);
  background-size: 200% 100%;
  animation: dtp-skeleton-shimmer 1.2s infinite;
}


/* Fulfilment tabs (desktop = 2-col panels, narrow = Shipping/Pickup tabs) */
.dtp-tabs {
  margin-top: 8px;
  margin-bottom: var(--dtp-fulfilment-bottom-gap, 1rem);
}

.dtp-tabs__list {
  display: none;
}

.dtp-tabs--single-panel .dtp-tabs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
  width: 100%;
  padding: 0.375rem;
  border-radius: 0.625rem;
  background: var(
    --dtp-tabs-group-bg,
    color-mix(in srgb, currentColor 8%, transparent)
  );
  margin-bottom: 12px;
}

.dtp-tabs__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.dtp-tabs__panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.dtp-tabs--single-panel .dtp-tabs__panels {
  display: block;
}

.dtp-tabs--single-panel .dtp-tabs__panel {
  display: none;
  min-height: 0;
}

.dtp-tabs--single-panel .dtp-tabs__panel--active {
  display: block;
}

.dtp-tabs__panel .dtp-delivery-methods,
.dtp-tabs__panel .dtp-shipping-methods,
.dtp-tabs__panel .dtp-pickup-locations {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.dtp-tabs__panel--delivery .dtp-shipping-method,
.dtp-tabs__panel--collection .dtp-pickup-location--active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  height: auto;
}

.dtp-tabs .dtp-pickup-location--active {
  display: flex;
}

.dtp-tabs--single-panel .dtp-tabs__tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid var(
    --dtp-tabs-border-color,
    rgba(15, 23, 42, 0.14)
  );
  background: var(--dtp-tabs-bg-color, transparent);
  color: var(
    --dtp-tabs-text-color,
    var(--dtp-tabs-group-text, currentColor)
  );
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.dtp-tabs--single-panel .dtp-tabs__tab--active,
.dtp-tabs--single-panel .dtp-tabs__tab--active:hover,
.dtp-tabs--single-panel .dtp-tabs__tab--active:active {
  background: var(
    --dtp-tabs-active-bg-color,
    #111827
  );
  color: var(
    --dtp-tabs-active-text-color,
    #f8fafc
  );
  border-color: transparent;
  box-shadow: none;
}

.dtp-tabs--single-panel .dtp-tabs__tab--active:focus:not(:focus-visible) {
  outline: none;
}

.dtp-tabs--single-panel .dtp-tabs__tab:focus-visible {
  outline: 2px solid var(--dtp-tabs-focus-ring, rgba(15, 23, 42, 0.35));
  outline-offset: 2px;
  border-color: var(
    --dtp-tabs-border-color,
    rgba(15, 23, 42, 0.14)
  );
  box-shadow: none;
}

.dtp-tabs--single-panel .dtp-tabs__tab--active:focus-visible {
  outline: 2px solid var(--dtp-tabs-active-focus-ring, rgba(248, 250, 252, 0.55));
  outline-offset: 2px;
  box-shadow: none;
}

.dtp-fulfilment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
  margin-bottom: var(--dtp-fulfilment-bottom-gap, 1rem);
}

.dtp-fulfilment-grid__panel {
  display: flex;
  flex-direction: column;
}

.dtp-fulfilment-grid__panel--delivery .dtp-shipping-method,
.dtp-fulfilment-grid__panel--collection .dtp-pickup-location--active {
  height: 100%;
}

.dtp-fulfilment-grid__panel .dtp-section-heading {
  margin-top: 0;
}

@media (max-width: 860px) {
  .dtp-fulfilment-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container dtp-calculator (max-width: 560px) {
  .dtp-skeleton-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* In tab mode, loaded UI shows one active panel; mirror that in loading state. */
  .dtp-skeleton-grid .dtp-skeleton-panel:nth-child(n + 2) {
    display: none;
  }

  .dtp-calculator__form-row {
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0.625rem;
  }

  .dtp-calculator__input {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin-bottom: 0;
  }

  .dtp-calculator__form-row > .dtp-calculator__button,
  .dtp-calculator__form-row > .dtp-calculator__reset {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem;
    width: 100%;
    padding: 0.375rem;
    border-radius: 0.625rem;
    background: var(
      --dtp-tabs-group-bg,
      color-mix(in srgb, currentColor 8%, transparent)
    );
    margin-bottom: 12px;
  }

  .dtp-tabs__tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px solid var(
      --dtp-tabs-border-color,
      rgba(15, 23, 42, 0.14)
    );
    background: var(--dtp-tabs-bg-color, transparent);
    color: var(
      --dtp-tabs-text-color,
      var(--dtp-tabs-group-text, currentColor)
    );
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  }

  .dtp-tabs__tab--active,
  .dtp-tabs__tab--active:hover,
  .dtp-tabs__tab--active:active {
    /* Do not fall back to --dtp-text-color (hero/brand can set it to primary red) */
    background: var(
      --dtp-tabs-active-bg-color,
      #111827
    );
    color: var(
      --dtp-tabs-active-text-color,
      #f8fafc
    );
    border-color: transparent;
    box-shadow: none;
  }

  .dtp-tabs__tab--active:focus:not(:focus-visible) {
    outline: none;
  }

  .dtp-tabs__tab:focus-visible {
    outline: 2px solid var(--dtp-tabs-focus-ring, rgba(15, 23, 42, 0.35));
    outline-offset: 2px;
    border-color: var(
      --dtp-tabs-border-color,
      rgba(15, 23, 42, 0.14)
    );
    box-shadow: none;
  }

  .dtp-tabs__tab--active:focus-visible {
    outline: 2px solid var(--dtp-tabs-active-focus-ring, rgba(248, 250, 252, 0.55));
    outline-offset: 2px;
    box-shadow: none;
  }

  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panels {
    display: block;
  }

  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel {
    display: none;
    min-height: 0;
  }

  .dtp-tabs:not(.dtp-tabs--single-panel) .dtp-tabs__panel--active {
    display: block;
  }
}

@container hero-postcode (max-width: 560px) {
  .dtp-hero-postcode__loading .dtp-skeleton-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dtp-hero-postcode__loading .dtp-skeleton-grid .dtp-skeleton-panel:nth-child(n + 2) {
    display: none;
  }
}

@container dtp-calculator (max-width: 430px) {
  .dtp-calculator__form-row {
    flex-wrap: wrap !important;
  }

  .dtp-calculator__input {
    flex: 1 0 100% !important;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .dtp-calculator__form-row > .dtp-calculator__button,
  .dtp-calculator__form-row > .dtp-calculator__reset {
    flex: 1 0 100%;
    width: 100% !important;
    max-width: 100%;
  }
}

.dtp-pickup-location-select {
  margin-bottom: 12px;
}

.dtp-pickup-location-select label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.dtp-pickup-location-select select {
  width: 100%;
  max-width: 100%;
}

.dtp-pickup-location {
  display: none;
}

.dtp-pickup-location--active {
  display: block;
}

.dtp-delivery-prefix {
  font-weight: 600;
  margin-right: 4px;
}

/* Final fulfilment equal-height enforcement (must stay last) */
.dtp-fulfilment-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.dtp-fulfilment-grid__panel {
  min-height: 100%;
}

.dtp-fulfilment-grid__panel .dtp-shipping-methods,
.dtp-fulfilment-grid__panel .dtp-delivery-methods,
.dtp-fulfilment-grid__panel .dtp-pickup-locations {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.dtp-fulfilment-grid__panel--delivery .dtp-shipping-method,
.dtp-fulfilment-grid__panel--collection .dtp-pickup-location--active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  height: auto;
}

.dtp-fulfilment-grid .dtp-pickup-location--active {
  display: flex;
}

/* Use theme/default button styling for Check/Clear */