/* ==========================================================================
   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.
   ========================================================================== */

/* ==========================================================================
   [hidden] must actually hide things
   --------------------------------------------------------------------------
   The whole map component is driven by the `hidden` attribute: js/google-maps.js
   flips `el.hidden = true/false` on the loading overlay, the fallback panel, the
   map canvas, all three status cards, the delivery banner and the toolbar
   buttons.

   The browser's built-in rule is `[hidden] { display: none }`, which lives in the
   USER-AGENT stylesheet. Author styles beat user-agent styles, so ANY author rule
   that sets `display` — which almost every element here does, because they are
   flex rows — silently defeats it. The element then reports `hidden === true`
   while still being laid out and painted.

   The visible symptom was checkout sitting on "Loading the map..." forever with
   a live map underneath: the overlay is `position:absolute; inset:0`, so it
   covered the entire map canvas and swallowed every click on it. The three status
   cards, the delivery banner and the toolbar buttons were painted at the same
   time.

   One `!important` rule fixes all of them at once and keeps future elements in
   this component safe by default. It is scoped to this component's own class
   namespace, so it cannot affect the rest of the site.

   The descendant selectors are needed as well as the class-namespace one: the
   toolbar buttons carry only the shared `.btn` classes, so nothing in their own
   class name identifies them as part of this component.
   ========================================================================== */

.gm-picker [hidden],
.gm-picker__frame [hidden],
.gm-picker__toolbar [hidden],
[class*="gm-picker__"][hidden],
.gm-pin[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------- 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;
}