/* EasyPick shared UI (buttons, chips, cards, inputs, zone banner, location modal).
   Values come from the design source. The theme defines the --ep-* tokens on :root; the fallbacks make
   this file work on its own. */
.ep-checkout, .ep-track, .ep-track-lookup, .ep-modal, .ep-thankyou {
  --_orange: var(--ep-orange, #FF4B26);
  --_orange-deep: var(--ep-orange-deep, #C2371A);
  --_ink: var(--ep-ink, #0E1116);
  --_paper: var(--ep-paper, #F5F4F1);
  --_card: var(--ep-card, #fff);
  --_line: var(--ep-line, #E4E1DA);
  --_line-strong: var(--ep-line-strong, #DCD8D0);
  --_muted: var(--ep-muted, #5A5F67);
  --_radius: var(--ep-radius, 14px);
  --_head: var(--ep-font-head, 'Bricolage Grotesque', Archivo, system-ui, sans-serif);
  --_body: var(--ep-font-body, Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-family: var(--_body);
  color: var(--_ink);
  box-sizing: border-box;
}
.ep-checkout *, .ep-track *, .ep-track-lookup *, .ep-modal *, .ep-thankyou * { box-sizing: border-box; }
.ep-checkout h1, .ep-checkout h2, .ep-checkout h3, .ep-track h1, .ep-track h2, .ep-track-lookup h2, .ep-modal h2, .ep-thankyou h2 {
  font-family: var(--_head); font-weight: 800; letter-spacing: -0.03em; margin: 0; color: inherit;
}
.ep-muted { color: var(--_muted); font-size: 14px; line-height: 1.5; margin: 0; }
.ep-label { font-size: 13px; font-weight: 700; color: #4A4F57; }
.ep-link { color: var(--_orange-deep); font-weight: 600; font-size: 14px; text-decoration: none; }
.ep-link:hover { color: var(--_orange); }
.ep-linkbtn { background: none; border: 0; padding: 0; color: var(--_orange-deep); font: 700 13px var(--_body); text-decoration: underline; cursor: pointer; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ep-card { background: var(--_card); border: 1px solid var(--_line); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }

/* buttons */
.ep-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 14px 26px; font: 700 15px var(--_body); cursor: pointer; text-decoration: none; line-height: 1.2; transition: background .15s, border-color .15s, color .15s; }
.ep-btn:focus-visible, .ep-chip:focus-visible, .ep-step-pill:focus-visible, .ep-linkbtn:focus-visible, .ep-input:focus-visible { outline: 3px solid var(--_orange); outline-offset: 2px; }
.ep-btn--primary { background: var(--_orange); color: #fff; }
.ep-btn--primary:hover { background: #E13D1B; color: #fff; }
.ep-btn--ink { background: var(--_ink); color: var(--_paper); padding: 12px 18px; font-size: 14px; border-radius: 11px; }
.ep-btn--ink:hover { background: #262C33; color: var(--_paper); }
.ep-btn--ghost { background: #fff; color: var(--_ink); border: 1.5px solid var(--_line-strong); padding: 12px 18px; font-size: 14px; border-radius: 11px; }
.ep-btn--ghost:hover { border-color: var(--_orange); color: var(--_orange-deep); }
.ep-btn--block { width: 100%; }
.ep-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ep-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* inputs */
.ep-input, .ep-checkout .input-text, .ep-checkout select, .ep-checkout textarea, .ep-track-lookup .ep-input {
  width: 100%; border: 1.5px solid var(--_line-strong); border-radius: 11px; padding: 12px 14px; font: 500 14px var(--_body); color: var(--_ink); background: #fff; outline: none; min-width: 0;
}
.ep-input:focus, .ep-checkout .input-text:focus, .ep-checkout textarea:focus { border-color: var(--_orange); }
.ep-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #4A4F57; }

/* chips */
.ep-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ep-chip { background: #fff; color: var(--_ink); border: 1px solid var(--_line-strong); border-radius: 99px; padding: 9px 15px; font: 600 13px var(--_body); cursor: pointer; white-space: nowrap; }
.ep-chip.is-on { background: var(--_ink); color: var(--_paper); border-color: var(--_ink); }

/* search row + map
   Scoped to the plugin's own roots: the theme styles a header component that
   also answers to .ep-search, and its `order` + column-axis flex-basis would
   otherwise drop this row to the bottom of the modal at 300px tall. */
.ep-modal .ep-search, .ep-checkout .ep-search, .ep-track-lookup .ep-search {
	display: flex; gap: 8px; flex-wrap: wrap;
	position: static; order: 0; flex: 0 0 auto; min-width: 0; width: 100%;
}
.ep-modal .ep-search .ep-input, .ep-checkout .ep-search .ep-input, .ep-track-lookup .ep-search .ep-input { flex: 1 1 260px; width: auto; min-width: 0; }
.ep-modal .ep-search .ep-btn, .ep-checkout .ep-search .ep-btn, .ep-track-lookup .ep-search .ep-btn { flex: 0 0 auto; }
.ep-search__pac { flex: 1 1 260px; min-width: 0; }
.ep-search__pac gmp-place-autocomplete { width: 100%; }
.ep-map { height: 360px; border-radius: 14px; overflow: hidden; border: 1px solid var(--_line); background: repeating-linear-gradient(135deg, #E8E5DE 0 10px, #F2F0EA 10px 20px); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #8A8F97; position: relative; z-index: 0; }
.ep-map--modal { height: 300px; }

/* zone banner */
.ep-zone { display: flex; flex-direction: column; gap: 6px; border-radius: 14px; padding: 14px 16px; background: #F3F3F0; border: 1.5px solid #DFDBD3; }
.ep-zone__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.ep-zone__tag { background: var(--_ink); color: #fff; border-radius: 6px; padding: 4px 9px; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.ep-zone__body { font-size: 14px; color: #3A3F47; line-height: 1.5; }
.ep-zone__pin { font-size: 13px; color: #6A6F77; }
.ep-zone[data-zone="express"] { background: #FFF3EF; border-color: var(--_orange); }
.ep-zone[data-zone="express"] .ep-zone__tag { background: var(--_orange); }
.ep-zone[data-zone="out"] { background: #FDF0EC; border-color: #E8A48E; }
.ep-zone[data-zone="out"] .ep-zone__tag { background: #8C2E14; }
.ep-zone.is-alert { box-shadow: 0 0 0 3px rgba(255, 75, 38, .35); }

.ep-notice { border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.ep-notice--error { background: #FDF0EC; border: 1px solid #E8A48E; color: #8C2E14; }
.ep-demo { background: #FFEDE8; border: 1px dashed var(--_orange); color: #8C2E14; border-radius: 12px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }

/* location modal */
.ep-modal { border: 0; padding: 0; border-radius: 20px; width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; background: #fff; box-shadow: 0 30px 80px rgba(14, 17, 22, .35); }
.ep-modal::backdrop { background: rgba(14, 17, 22, .5); }
.ep-modal__panel { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.ep-modal__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ep-modal__head h2 { font-size: 21px; }
.ep-modal__x { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--_line); background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--_ink); }

/* On a phone the panel is taller than the dialog, so keep the confirm button
   reachable instead of stranding it below the scroll. */
@media (max-width: 560px) {
	.ep-modal__panel { padding: 16px; }
	.ep-modal .ep-map--modal { height: 220px; }
	.ep-modal .ep-actions {
		position: sticky; bottom: 0; z-index: 2;
		background: #fff; padding-block: 12px; margin-block: -6px -10px;
		border-top: 1px solid var(--_line);
	}
	.ep-modal .ep-actions .ep-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) { .ep-btn { transition: none; } }