/* ============================================================
   SearchDentist Component Styles
   v0.1 — Warm Professional
   Requires: sd-tokens.css (enqueued as a dependency in functions.php)
   ============================================================ */

/* ============================================================
   BUTTONS — interaction-state system
   - Filled (dark) buttons:
       hover  → LIGHTEN (white overlay) + lift shadow      ("rising toward you")
       active → DARKEN  (black overlay) + inset shadow + 0.98 scale  ("pressed")
       focus  → 2px terracotta ring with 2px offset
   - Ghost (light) buttons:
       hover  → tint surface with brown overlay
       active → darker tint + 0.98 scale
   - Transitions: 180ms ease-out — fast enough to feel responsive,
                  slow enough to register the lift visually.
   ============================================================ */
.btn {
  position: relative;
  font-family: var(--sd-font-sans);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--sd-radius-sm);
  padding: 12px 20px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  isolation: isolate;        /* contain ::after overlays */
  outline: none;
  transition:
    background-color 180ms ease-out,
    box-shadow       180ms ease-out,
    transform        180ms ease-out;
}
.btn::after {
  /* Overlay layer — holds the lighten/darken tint. Cheap, reusable, doesn't
     fight with the underlying background-color animation. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  transition: background-color 180ms ease-out;
  z-index: 1;
}
.btn > * { position: relative; z-index: 2; }

/* ----- Filled / dark buttons ----- */
.btn--primary {
  background: var(--sd-color-accent);
  color: var(--sd-color-text-on-accent);
  box-shadow: var(--sd-shadow-sm);
}
.btn--primary:hover::after  { background: var(--sd-overlay-hover-dark); }
.btn--primary:hover         { box-shadow: var(--sd-shadow-lift); }
.btn--primary:active::after { background: var(--sd-overlay-active-dark); }
.btn--primary:active        { box-shadow: var(--sd-shadow-press); transform: scale(var(--sd-press-scale)); }

.btn--secondary {
  background: var(--sd-color-primary);
  color: var(--sd-color-text-on-primary);
  box-shadow: var(--sd-shadow-sm);
}
.btn--secondary:hover::after  { background: var(--sd-overlay-hover-dark); }
.btn--secondary:hover         { box-shadow: var(--sd-shadow-lift); }
.btn--secondary:active::after { background: var(--sd-overlay-active-dark); }
.btn--secondary:active        { box-shadow: var(--sd-shadow-press); transform: scale(var(--sd-press-scale)); }

/* ----- Ghost / light buttons ----- */
.btn--ghost {
  background: transparent;
  color: var(--sd-color-text-strong);
  border: 1px solid var(--sd-color-border);
}
.btn--ghost:hover::after   { background: var(--sd-overlay-hover); }
.btn--ghost:hover          { border-color: var(--sd-color-border-strong); }
.btn--ghost:active::after  { background: var(--sd-overlay-active); }
.btn--ghost:active         { transform: scale(var(--sd-press-scale)); }

/* ----- Focus ring (keyboard nav only) ----- */
.btn:focus-visible { box-shadow: var(--sd-focus-ring); }
.btn--primary:focus-visible:hover   { box-shadow: var(--sd-focus-ring), var(--sd-shadow-lift); }
.btn--secondary:focus-visible:hover { box-shadow: var(--sd-focus-ring), var(--sd-shadow-lift); }

/* ----- Sizes ----- */
.btn--sm { font-size: 13px; padding: 8px 14px; min-height: 36px; }
.btn--lg { font-size: 17px; padding: 14px 24px; min-height: 52px; }

/* ----- Disabled ----- */
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }