/* Coffee Craft – Customer World Map
   Change the colours here to match the rest of the site. */
:root {
  --ccwm-red: #D62828;      /* original People Map pins */
  --ccwm-green: #245D68;    /* Coffee Craft dot, accents */
  --ccwm-ink: #18241F;      /* text */
  --ccwm-muted: #53615A;    /* secondary text */
  --ccwm-sea: #F2ECDD;      /* map background */
  --ccwm-card: #FBF7EB;
  --ccwm-line: rgba(24,36,31,.28);
  --ccwm-field: rgba(24,36,31,.45);
}

/* Make sure hidden things stay hidden even with display:flex */
.ccwm-form[hidden], .ccwm-success[hidden], .ccwm-error[hidden], .ccwm-tip[hidden] { display: none !important; }

/* ---------- Map ---------- */
.ccwm {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 560;
  background: var(--ccwm-sea);
  border: 1px solid var(--ccwm-ink);
}
.ccwm-land { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.ccwm-pins { position: absolute; inset: 0; }

.ccwm-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 22px; height: 30px;
  padding: 0; margin: 0; border: 0; background: none;
  color: var(--ccwm-red);
  cursor: pointer; line-height: 0;
  transition: transform .15s ease;
  z-index: 2;
}
.ccwm-pin svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.ccwm-pin:hover, .ccwm-pin:focus-visible { transform: translate(-50%, -100%) scale(1.2); z-index: 4; }
.ccwm-pin:focus-visible { outline: 2px solid var(--ccwm-ink); outline-offset: 2px; border-radius: 4px; }
.ccwm-pin.is-pending { opacity: .6; }

.ccwm-home {
  position: absolute; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ccwm-green); border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(47, 93, 70, .25);
  z-index: 1;
}

.ccwm-tip {
  position: absolute; z-index: 5;
  transform: translate(-50%, calc(-100% - 38px));
  background: var(--ccwm-ink); color: #fff;
  padding: 10px 14px;
  font: 700 14px/1.35 var(--mono, monospace); white-space: nowrap;
  box-shadow: 0 8px 24px rgba(31, 42, 36, .25);
  pointer-events: none;
}
.ccwm-tip[data-edge="left"]  { transform: translate(-12%, calc(-100% - 38px)); }
.ccwm-tip[data-edge="right"] { transform: translate(-88%, calc(-100% - 38px)); }
.ccwm-tip strong { display: block; font-weight: 600; }
.ccwm-tip span { display: block; color: #E6DCC8; }
.ccwm-tip em { display: block; font-style: normal; font-size: 12px; color: #F4B9B9; margin-top: 2px; }

@media (max-width: 600px) {
  .ccwm { border-radius: 0; }
  .ccwm-pin { width: 16px; height: 22px; }
  .ccwm-home { width: 10px; height: 10px; border-width: 2px; box-shadow: 0 0 0 4px rgba(47,93,70,.25); }
  .ccwm-tip { font-size: 13px; transform: translate(-50%, calc(-100% - 28px)); }
  .ccwm-tip[data-edge="left"]  { transform: translate(-12%, calc(-100% - 28px)); }
  .ccwm-tip[data-edge="right"] { transform: translate(-88%, calc(-100% - 28px)); }
}

/* ---------- Form ---------- */
.ccwm-form { display: flex; flex-direction: column; gap: 16px; }
.ccwm-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ccwm-ink); }
.ccwm-form input[type="text"], .ccwm-form select {
  height: 48px; box-sizing: border-box; width: 100%;
  padding: 0 14px; border: 1px solid var(--ccwm-field); border-radius: 0;
  background: #fff; font: inherit; font-size: 16px; font-weight: 400; color: var(--ccwm-ink);
}
.ccwm-form input:focus, .ccwm-form select:focus { outline: 2px solid var(--ccwm-green); outline-offset: 1px; }
.ccwm-form .ccwm-consent { flex-direction: row; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--ccwm-muted); }
.ccwm-form .ccwm-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ccwm-green); flex-shrink: 0; }
.ccwm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ccwm-error { margin: 0; font-size: 14px; color: #B3261E; }

.ccwm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border: 1px solid var(--ccwm-ink); border-radius: 0;
  background: #D4A417; color: var(--ccwm-ink);
  font: 700 16px var(--mono, monospace); letter-spacing: .03em; text-decoration: none; cursor: pointer;
}
.ccwm-btn:hover { background: var(--ccwm-green); border-color: var(--ccwm-green); color: #fff; }
.ccwm-btn[disabled] { opacity: .7; cursor: wait; }
.ccwm-btn svg { width: 14px; height: 19px; color: #fff; }
.ccwm-btn--ghost { background: var(--ccwm-card); color: var(--ccwm-ink); border: 1px solid var(--ccwm-field); }
.ccwm-btn--ghost:hover { background: #F7F2E8; color: var(--ccwm-ink); }

.ccwm-success { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ccwm-success:focus { outline: none; }
.ccwm-success svg { width: 34px; height: 46px; color: var(--ccwm-red); }
.ccwm-success h3 { margin: 0; font-size: 28px; line-height: 1.1; }
.ccwm-success p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ccwm-muted); }

/* ---------- Latest pins ---------- */
.ccwm-latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ccwm-latest-item { display: flex; gap: 12px; align-items: center; background: var(--ccwm-card); border: 1px solid var(--ccwm-line); border-radius: 0; padding: 14px 16px; }
.ccwm-latest-pin { color: var(--ccwm-red); line-height: 0; }
.ccwm-latest-pin svg { width: 18px; height: 24px; }
.ccwm-latest-item strong { display: block; font-size: 15px; }
.ccwm-latest-item div span { display: block; font-size: 14px; color: var(--ccwm-muted); }