/* Mench Local Delivery — "Delivery areas" display. Scoped to .mld-areas; inherits the theme's fonts. */
.mld-areas {
	--mld-ink: #142b49; --mld-accent: #173b63; --mld-line: #dce3ee; --mld-soft: #edf3fb; --mld-muted: #52627a;
	--mld-card: #fff; --mld-ok: #146c43; --mld-radius: 14px; --mld-cols: 1;
	color: var(--mld-ink); font-variant-numeric: tabular-nums; container-type: inline-size;
	margin-block: 0 2.5rem;
}
.mld-areas *, .mld-areas *::before, .mld-areas *::after { box-sizing: border-box; }
.mld-areas__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 0 0 16px; }
.mld-areas__title { margin: 0; font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); line-height: 1.2; color: inherit; }
.mld-search { flex: 1 1 240px; max-inline-size: 360px; }
.mld-areas .mld-search input, .mld-areas .mld-check input { inline-size: 100%; min-block-size: 46px; padding: 10px 14px; border: 1px solid #b9c8dc; border-radius: 999px; background: #fff; color: var(--mld-ink); font: inherit; box-shadow: none; }
.mld-areas .mld-search input:focus, .mld-areas .mld-check input:focus { outline: 2px solid var(--mld-accent); outline-offset: 1px; border-color: var(--mld-accent); }
.mld-areas > .mld-zone { margin: 0; }
.mld-areas { display: grid; grid-template-columns: repeat(var(--mld-cols), minmax(0, 1fr)); gap: 14px; }
.mld-areas > .mld-areas__head, .mld-areas > .mld-check, .mld-areas > .mld-areas__empty, .mld-areas > .mld-areas__none { grid-column: 1 / -1; }
.mld-zone { background: var(--mld-card); border: 1px solid var(--mld-line); border-radius: var(--mld-radius); padding: 18px 18px 8px; }
.mld-zone[hidden] { display: none; }
.mld-zone__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-block-end: 10px; border-block-end: 2px solid var(--mld-ink); }
.mld-zone__name { margin: 0; font-size: 1.05rem; line-height: 1.3; color: inherit; }
.mld-zone__next { margin: 0; font-size: .88rem; color: var(--mld-muted); }
.mld-zone__next span { display: inline-block; padding: 1px 8px; margin-inline-end: 4px; border-radius: 999px; background: var(--mld-soft); color: var(--mld-accent); font-weight: 600; font-size: .78rem; }
.mld-zone__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); column-gap: 32px; }
.mld-area { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 11px 0; border-block-end: 1px solid var(--mld-line); margin: 0; }
.mld-area:last-child { border-block-end: 0; }
@container (min-width: 560px) { .mld-area:last-child { border-block-end: 1px solid var(--mld-line); } .mld-zone { padding-block-end: 14px; } }
.mld-area[hidden] { display: none; }
.mld-area__name { font-weight: 500; overflow-wrap: anywhere; }
.mld-area__fee { font-weight: 700; white-space: nowrap; }
.mld-area__free { grid-column: 1 / -1; font-size: .82rem; color: var(--mld-ok); }
.mld-dist { padding: 12px 0 10px; }
.mld-dist__rule { margin: 0 0 10px; color: var(--mld-muted); }
.mld-dist__out, .mld-check__out { margin: 10px 0 0; font-weight: 600; }
.mld-dist__out:empty, .mld-check__out:empty { display: none; }
.mld-check { background: var(--mld-card); border: 1px solid var(--mld-line); border-radius: var(--mld-radius); padding: 18px; }
.mld-check label { display: block; margin-block-end: 8px; font-weight: 600; }
.mld-check__row { display: flex; gap: 8px; }
.mld-check__row input { flex: 1 1 auto; min-inline-size: 0; }
.mld-areas__empty, .mld-areas__none { margin: 0; padding: 18px; border: 1px dashed #b9c8dc; border-radius: var(--mld-radius); color: var(--mld-muted); text-align: center; }
.mld-areas__none[hidden] { display: none; }
.mld-is-ok { color: var(--mld-ok); }
/* Theme guard: themes such as Hello Elementor style every button and its hover/focus (pink fills); keep ours. */
.mld-areas button.mld-btn, .mld-areas button.mld-btn:hover, .mld-areas button.mld-btn:focus, .mld-areas button.mld-btn:active { display: inline-flex; align-items: center; justify-content: center; min-block-size: 46px; padding: 0 20px; border: 1px solid var(--mld-accent); border-radius: 999px; background: var(--mld-accent); color: #fff; font: inherit; font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: normal; box-shadow: none; text-decoration: none; cursor: pointer; }
.mld-areas button.mld-btn--quiet, .mld-areas button.mld-btn--quiet:hover, .mld-areas button.mld-btn--quiet:focus, .mld-areas button.mld-btn--quiet:active { background: transparent; color: var(--mld-accent); }
.mld-areas button.mld-btn:hover { filter: brightness(1.1); }
.mld-areas button.mld-btn--quiet:hover { background: var(--mld-soft); filter: none; }
.mld-areas button.mld-btn:focus-visible { outline: 2px solid var(--mld-accent); outline-offset: 2px; }
.mld-areas button.mld-btn[disabled] { opacity: .6; cursor: wait; }
.elementor-widget-mench_ld_areas { inline-size: 100%; }
@container (max-width: 520px) { .mld-areas { grid-template-columns: minmax(0, 1fr); } .mld-search { max-inline-size: none; } }
@media (prefers-reduced-motion: reduce) { .mld-areas * { transition: none !important; } }
