/* ==========================================================================
   OYELAN — Google Maps Platform integration
   ----------------------------------------------------------------------------
   Premium map shell shared by the checkout location picker and the contact
   page. Loaded only where a map exists, so shop/product/admin pages never pay
   for these bytes.

   Everything is namespaced under .gm-picker / .gm-map so it cannot collide
   with the existing .map-wrap block in css/style.css, which is left alone for
   backwards compatibility.
   ========================================================================== */

/* --------------------------------------------------------------- container */

/* The picker owns its own premium container. The shared .map-wrap /
   .map-status / .coord-chip rules in css/style.css are deliberately left in
   place — other pages still reference them and removing them would be an
   unrelated change. Nothing below inherits from them. */
.gm-picker {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.gm-picker__frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--cream);
  /* Prevents a flex/grid child from refusing to shrink — the usual cause of
     horizontal scrolling once a map is inside. */
  min-width: 0;
}

.gm-picker__map {
  display: block;
  width: 100%;
  height: clamp(440px, 46vw, 560px);
  background: var(--cream);
}

/* ------------------------------------------------------------------ search */

.gm-picker__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--trans), box-shadow var(--trans);
}

/* Google's widget injects its own dropdown inside this container. */
.gm-picker__search.gmpa { position: relative; }

.gm-picker__search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(111, 125, 79, 0.16), var(--shadow-sm);
}

.gm-picker__search > .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--brand);
}

.gm-picker__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--dark);
  padding: 0.7rem 0;
  /* The Maps widget adds its own padding for the inline "x"; keep ours tidy. */
}

.gm-picker__input:focus { outline: none; }
.gm-picker__input::placeholder { color: #A99C93; }

/* Google renders an inline clear glyph inside the new widget; ours is only for
   the fallback path. */
.gm-picker__search-clear {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.25rem 0.35rem;
  border-radius: var(--radius-pill);
}
.gm-picker__search-clear:hover { background: var(--cream); }

/* Hide the browser's own search affordances — the widget owns this input. */
.gm-picker__input::-webkit-search-decoration,
.gm-picker__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* The Places (New) dropdown is appended to the .gmpa container. Let it span
   the field and sit above the map. */
.gm-picker__search .gm-sdv-b,
.gm-picker__search [role="listbox"] {
  z-index: 5;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* ---------------------------------------------------------------- toolbar */

.gm-picker__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  min-width: 0;
}

.gm-picker__toolbar .btn { flex: 0 0 auto; }

/* Push CONFIRM LOCATION to the trailing edge on wide screens so it reads as
   the primary, committing action. */
.gm-picker__toolbar [data-gm-confirm] { margin-inline-start: auto; }

/* ----------------------------------------------------------------- status */

.gm-picker__status {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.55;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-strong);
  background: var(--cream);
  min-width: 0;
}

.gm-picker__status .icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--brand);
}

.gm-picker__status-body { min-width: 0; }

/* A real address the customer can read and check. */
.gm-picker__addr {
  display: block;
  color: var(--dark);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.gm-picker__addr:empty { display: none; }

.gm-picker__coords {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.gm-picker__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  font-size: 0.84rem;
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gm-picker__link .icon { width: 14px; height: 14px; }

/* Error banner — plain, non-alarming, auto-dismisses. */
.gm-picker__status--error {
  border-style: solid;
  border-color: #D9B36A;
  background: #FDF6E6;
}
.gm-picker__status--error .icon { color: var(--gold-dark); }

/* ------------------------------------------------------- delivery verdict */

.gm-picker__delivery {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.85rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  min-width: 0;
}

.gm-picker__delivery[data-state="ok"] {
  background: #EEF4EC;
  border-color: #C9D8C4;
  color: #3F5639;
}
.gm-picker__delivery[data-state="no"] {
  background: #FBEFEF;
  border-color: #E8C9C9;
  color: #8A3B3B;
}

.gm-picker__delivery .icon { width: 15px; height: 15px; margin-top: 3px; flex: none; }
.gm-picker__delivery[data-state="ok"] .icon { color: var(--green); }
.gm-picker__delivery[data-state="no"] .icon { color: #A95050; }

/* ------------------------------------------------- loading + fallback */

.gm-picker__loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  text-align: center;
  background: var(--cream);
  color: var(--text);
  font-size: 0.9rem;
}

/* A soft pulse instead of a spinner glyph that may not exist in the sprite. */
.gm-picker__loading::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--brand-soft);
  border-top-color: var(--brand);
  animation: gm-spin 900ms linear infinite;
}

@keyframes gm-spin { to { transform: rotate(360deg); } }

.gm-picker__fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--cream);
  color: var(--text);
  font-size: 0.9rem;
  min-width: 0;
}

.gm-picker__fallback[hidden] { display: none; }

/* ------------------------------------------------------------- the marker */

/* The pin is our own DOM so it matches the brand instead of the default red
   teardrop. AdvancedMarkerElement hosts it in its own positioned layer. */
.gm-pin {
  position: relative;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}

.gm-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(111, 125, 79, 0.22);
  transform: scale(1);
  animation: gm-pin-pulse 2.4s ease-out infinite;
}

.gm-pin__dot {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-dark);
  border: 3px solid var(--white);
  box-shadow: 0 4px 12px rgba(38, 34, 25, 0.32);
}

@keyframes gm-pin-pulse {
  0%   { transform: scale(0.55); opacity: 0.55; }
  70%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}

/* ------------------------------------------------------ Google map chrome */

/* Tone down Google's default controls so the map reads as part of OYELAN.
   Zoom control is the only control we keep, per the minimal-UI brief. */
.gm-picker__map .gm-style .gm-style-iw-c {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
}

.gm-picker__map button.gm-style-mzc,
.gm-picker__map .gm-style-mzo-button {
  border-radius: var(--radius-sm) !important;
  background: var(--white) !important;
  color: var(--dark) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background var(--trans) !important;
}

.gm-picker__map button.gm-style-mzc:hover { background: var(--cream) !important; }

/* The Google logo and "Terms" are required by the Maps Platform ToS — never
   hide them. Only make sure they are legible against our chrome. */
.gm-picker__map .gmnoprint,
.gm-picker__map .gm-style-cc { display: block !important; }

.gm-picker__map .gm-style-cc a,
.gm-picker__map .gm-style-cc button {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  text-shadow: none !important;
}

/* ============================================================== responsive */

/* Desktop first: the brief asks for roughly 500–600px. */
@media (max-width: 1023.98px) {
  .gm-picker__map { height: clamp(420px, 52vw, 500px); }
}

/* Tablet / large phone */
@media (max-width: 767.98px) {
  .gm-picker { gap: 0.75rem; }
  .gm-picker__map { height: clamp(400px, 58vw, 460px); }
  .gm-picker__toolbar .btn { flex: 1 1 auto; justify-content: center; }
  /* On narrow screens every button takes a full row's worth of width. */
  .gm-picker__toolbar [data-gm-confirm] { margin-inline-start: 0; }
}

/* Phones */
@media (max-width: 479.98px) {
  .gm-picker__map { height: clamp(360px, 64vw, 420px); }
  .gm-picker__status,
  .gm-picker__delivery { padding: 0.6rem 0.75rem; font-size: 0.84rem; }
  .gm-picker__fallback { padding: 0.9rem 1rem; }
}

/* Very small phones: keep the map usable without pushing the page wide. */
@media (max-width: 359.98px) {
  .gm-picker__map { height: 340px; }
  .gm-picker__toolbar { gap: 0.45rem; }
  .gm-picker__toolbar .btn { font-size: 0.85rem; padding: 0.55rem 0.7rem; }
}

/* ------------------------------------------------------------------- RTL */

/* The map canvas stays LTR — that is Google's own UI and it must not flip.
   Everything around it (search field, status cards, buttons) follows the
   document direction automatically because it uses logical properties. */
[dir="rtl"] .gm-picker__map { direction: ltr; }

[dir="rtl"] .gm-picker__search-clear { margin-inline: 0; }

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .gm-picker__loading::before { animation: none; }
  .gm-pin::before { animation: none; opacity: 0; }
  .gm-picker__search { transition: none; }
}

/* ------------------------------------------------------------------ print */

@media print {
  .gm-picker__toolbar,
  .gm-picker__loading,
  .gm-picker__search { display: none !important; }
  .gm-picker__map { height: 260px; }
  .gm-picker__frame { box-shadow: none; border-color: #999; }
}

/* ---------------------------------------------------------------- helpers */

/* Visually hidden but still announced — used for the search field's label so
   the Places widget keeps full control of the input's ARIA attributes. */
.gm-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}