/* ============================================================
   WICKO • TEXT DIRECTIONS — v1.0
   Drop-in <wicko-text-directions> custom element.
   Tap → modal with phone field → SMS direction link sent.

   Inherits Wicko design tokens. Pairs with text-directions.js.
   ============================================================ */

.wtd {
  font-family: var(--w-font-body, 'DM Sans', system-ui, sans-serif);
  display: inline-block;
}

/* Trigger button — sits inline next to "Get Directions" */
.wtd__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1.5px solid var(--w-accent, #d9514b);
  color: var(--w-accent, #d9514b);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  padding: 10px 18px;
  border-radius: var(--w-radius-button, 100px);
  cursor: pointer;
  transition:
    background var(--w-dur, .35s) var(--w-ease, cubic-bezier(.16,1,.3,1)),
    color var(--w-dur, .35s) var(--w-ease, cubic-bezier(.16,1,.3,1)),
    transform var(--w-dur, .35s) var(--w-ease, cubic-bezier(.16,1,.3,1)),
    box-shadow var(--w-dur, .35s) var(--w-ease, cubic-bezier(.16,1,.3,1));
}
.wtd__trigger:hover {
  background: var(--w-accent, #d9514b);
  color: var(--w-on-accent, #fdf6ec);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--w-accent-soft, rgba(217,81,75,.3));
}
.wtd__trigger svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Backdrop */
.wtd__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 23, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--w-dur, .35s) var(--w-ease, cubic-bezier(.16,1,.3,1));
}
.wtd__backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Modal card */
.wtd__modal {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -42%) scale(.96);
  width: calc(100% - 32px);
  max-width: 420px;
  background: var(--w-cream, #fdf6ec);
  border-radius: var(--w-radius-card, 16px);
  box-shadow: 0 30px 80px var(--w-shadow-card, rgba(30,27,23,.18)), 0 6px 16px rgba(30,27,23,.08);
  padding: 28px 24px 20px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--w-dur, .35s) var(--w-ease, cubic-bezier(.16,1,.3,1)),
    transform var(--w-dur, .35s) var(--w-ease, cubic-bezier(.16,1,.3,1));
}
.wtd__modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.wtd__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--w-ink-soft, rgba(47,47,47,.6));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--w-dur-fast, .25s), color var(--w-dur-fast, .25s);
}
.wtd__close:hover {
  background: var(--w-divider, rgba(47,47,47,.06));
  color: var(--w-ink, #2f2f2f);
}
.wtd__close svg { width: 14px; height: 14px; }

.wtd__title {
  font-family: var(--w-font-display, 'cheap-pine-sans', Georgia, serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--w-ink, #2f2f2f);
  margin: 0 0 6px;
  letter-spacing: .2px;
  line-height: 1.2;
}
.wtd__address {
  font-size: 13px;
  color: var(--w-ink-soft, rgba(47,47,47,.6));
  margin: 0 0 20px;
  line-height: 1.5;
}

.wtd__field {
  position: relative;
  margin-bottom: 14px;
}
.wtd__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--w-ink-soft, rgba(47,47,47,.6));
  margin-bottom: 6px;
}
.wtd__input {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* 16px to suppress iOS zoom on focus */
  color: var(--w-ink, #2f2f2f);
  background: #fff;
  border: 1.5px solid var(--w-border, rgba(180,160,130,.3));
  border-radius: var(--w-radius-input, 12px);
  padding: 14px 14px;
  outline: none;
  transition: border-color var(--w-dur-fast, .25s), box-shadow var(--w-dur-fast, .25s);
  box-sizing: border-box;
}
.wtd__input:focus {
  border-color: var(--w-accent, #d9514b);
  box-shadow: 0 0 0 4px var(--w-accent-soft, rgba(217,81,75,.15));
}
.wtd__input::placeholder { color: var(--w-ink-faint, rgba(47,47,47,.45)); }

.wtd__submit {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--w-accent, #d9514b);
  color: var(--w-on-accent, #fdf6ec);
  border: none;
  border-radius: var(--w-radius-button, 100px);
  padding: 16px 24px;
  margin-top: 6px;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--w-accent-soft, rgba(217,81,75,.3));
  transition:
    background var(--w-dur-fast, .25s),
    transform var(--w-dur-fast, .25s),
    box-shadow var(--w-dur-fast, .25s);
}
.wtd__submit:hover:not(:disabled) {
  background: var(--w-accent-hover, #c4443f);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px var(--w-accent-soft, rgba(217,81,75,.4));
}
.wtd__submit:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.wtd__submit.is-loading {
  color: transparent;
  position: relative;
}
.wtd__submit.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  width: 16px;
  height: 16px;
  border: 2px solid var(--w-on-accent, #fdf6ec);
  border-right-color: transparent;
  border-radius: 50%;
  animation: wtd-spin .7s linear infinite;
}
@keyframes wtd-spin { to { transform: rotate(360deg); } }

.wtd__hint {
  font-size: 11px;
  color: var(--w-ink-faint, rgba(47,47,47,.45));
  margin: 14px 0 0;
  text-align: center;
  line-height: 1.5;
}

/* Success state */
.wtd__success {
  text-align: center;
  padding: 8px 0 4px;
}
.wtd__success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--w-accent-soft, rgba(217,81,75,.15));
  color: var(--w-accent, #d9514b);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wtd__success-icon svg { width: 28px; height: 28px; }
.wtd__success-title {
  font-family: var(--w-font-display, 'cheap-pine-sans', Georgia, serif);
  font-size: 22px;
  color: var(--w-ink, #2f2f2f);
  margin: 0 0 4px;
}
.wtd__success-msg {
  font-size: 13px;
  color: var(--w-ink-soft, rgba(47,47,47,.6));
  margin: 0 0 18px;
  line-height: 1.5;
}

/* Error message */
.wtd__error {
  font-size: 12px;
  color: var(--w-accent, #d9514b);
  margin: 8px 0 0;
  font-weight: 500;
}

/* Microbrand footer inside modal */
.wtd__brand {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--w-divider, rgba(47,47,47,.06));
  text-align: center;
}