/* ---------- header ---------- */
.pm-header {
  position: sticky; top: 0; z-index: 50;
  background: oklch(0.99 0.006 220 / 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--pm-border-soft);
}
.pm-header-inner {
  max-width: var(--pm-max); margin: 0 auto; padding: 0 clamp(20px,5vw,32px);
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
@media (max-width: 860px) {
  .pm-header { position: static; }
}
.pm-logo { display: flex; align-items: center; gap: 9px; cursor: pointer; flex-shrink: 0; }
/* The wordmark is cropped from the official logo (assets/photomatch-logo-full-*.png)
   rather than typeset, so the header always matches the brand logotype exactly. */
.pm-logo .pm-logo-icon { width: 30px; height: 30px; object-fit: contain; }
.pm-logo .pm-logo-type { height: 22px; width: auto; display: block; }
.pm-nav-desktop { display: flex; align-items: center; gap: 32px; }
.pm-nav-desktop nav { display: flex; gap: 26px; }
.pm-nav-link { cursor: pointer; font: 500 14px var(--pm-font-body); color: var(--pm-text-2); white-space: nowrap; }
.pm-nav-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.pm-lang-toggle {
  cursor: pointer; font: 700 12px var(--pm-font-body); color: oklch(0.4 0.03 220);
  background: #fff; border: 1px solid var(--pm-border); border-radius: 100px; padding: 6px 14px; flex-shrink: 0;
}
.pm-lang-toggle:hover { border-color: oklch(0.66 0.13 236); color: oklch(0.45 0.14 210); }
/* Groups the mobile language toggle with the hamburger button so both sit at
   the header's first level (no need to open the menu to switch language). */
.pm-mobile-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pm-menu-btn {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--pm-border);
  background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; gap: 4px; flex-direction: column;
}
.pm-menu-btn span { width: 18px; height: 2px; background: oklch(0.3 0.02 240); border-radius: 2px; }
.pm-mobile-panel {
  border-top: 1px solid var(--pm-border-soft); padding: 8px clamp(20px,5vw,32px) 20px;
  display: flex; flex-direction: column; background: var(--pm-bg);
}
/* The display above outranks the UA stylesheet's [hidden] { display: none },
   so the closed state needs an explicit rule of its own. */
.pm-mobile-panel[hidden] { display: none; }
.pm-mobile-panel .pm-nav-link { padding: 14px 4px; font: 600 15px var(--pm-font-body); color: oklch(0.3 0.02 240); border-bottom: 1px solid var(--pm-border-faint); }
@media (min-width: 861px) { .pm-mobile-only { display: none !important; } }
@media (max-width: 860px) { .pm-desktop-only { display: none !important; } }

/* ---------- buttons ---------- */
.pm-btn {
  position: relative; overflow: hidden; border: none; border-radius: var(--pm-radius-pill);
  cursor: pointer; font: 700 14px var(--pm-font-body); white-space: nowrap;
  padding: 12px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pm-btn-primary { background: var(--pm-brand-grad); color: #fff; padding: 12px 22px; box-shadow: var(--pm-shadow-cta); }
.pm-btn-primary::after {
  content: ''; position: absolute; top: 0; left: 0; width: 10%; height: 100%;
  background: linear-gradient(75deg, transparent, oklch(1 0 0 / 0.75), transparent);
  animation: pm-shine 3s linear infinite; pointer-events: none;
}
/* Size modifiers work on any .pm-btn variant, not just .pm-btn-primary.
   Declared after the variants above so they win at equal specificity. */
.pm-btn-lg { padding: 15px 30px; font-size: 15px; }
.pm-btn-block { display: flex; width: 100%; padding: 15px; font-size: 15px; }
.pm-btn-outline {
  background: #fff; border: 1px solid var(--pm-border); border-radius: var(--pm-radius-pill);
  padding: 10px 20px; font: 600 13px var(--pm-font-body); color: var(--pm-text-2); cursor: pointer;
}
.pm-btn-danger-outline {
  background: #fff; border: 1px solid oklch(0.85 0.06 30); border-radius: var(--pm-radius-pill);
  padding: 9px 18px; font: 600 12px var(--pm-font-body); color: var(--pm-warn-text); cursor: pointer;
}
.pm-btn-navy { background: var(--pm-pro-navy); color: #fff; padding: 15px; border-radius: var(--pm-radius-sm); font: 700 15px var(--pm-font-body); cursor: pointer; border: none; width: 100%; }
.pm-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- cards / chips ---------- */
.pm-card { background: #fff; border: 1px solid var(--pm-border); border-radius: var(--pm-radius-card); }
.pm-badge { font: 700 11px var(--pm-font-body); color: var(--pm-badge-text); background: var(--pm-badge-bg); padding: 3px 8px; border-radius: 100px; display: inline-block; }
.pm-chip {
  padding: 9px 16px; border-radius: 100px; border: 1px solid var(--pm-border);
  background: #fff; font: 600 13px var(--pm-font-body); cursor: pointer; color: oklch(0.32 0.02 240);
}
.pm-chip.is-active { border-color: transparent; background: var(--pm-brand-grad); color: #fff; font-weight: 700; }
.pm-tile {
  padding: 10px 4px; border-radius: 8px; border: 1px solid var(--pm-border); background: #fff;
  font: 600 13px var(--pm-font-body); cursor: pointer; color: oklch(0.32 0.02 240); text-align: center;
}
.pm-tile.is-active { border-color: transparent; background: var(--pm-brand-grad); color: #fff; font-weight: 700; }

/* ---------- forms ---------- */
.pm-field label { display: block; font: 600 13px var(--pm-font-body); margin-bottom: 8px; }
.pm-field .pm-req { color: var(--pm-warn-text); }
.pm-input, .pm-textarea, .pm-select {
  width: 100%; padding: 12px; border: 1px solid var(--pm-border); border-radius: var(--pm-radius-sm);
  font: 14px var(--pm-font-body); background: #fff;
}
.pm-textarea { resize: vertical; font-family: var(--pm-font-body); }
.pm-error-text { color: var(--pm-warn-text); font: 12px var(--pm-font-body); margin-top: 6px; }
.pm-note-box { background: oklch(0.97 0.012 210); border-radius: 12px; padding: 14px 16px; font: 12px/1.7 var(--pm-font-body); color: var(--pm-text-2); }
.pm-note-box b, .pm-note-box .pm-note-title { display: block; font: 700 12px var(--pm-font-body); color: oklch(0.4 0.03 220); margin-bottom: 6px; }

/* Same look as .pm-note-box, but collapsed by default via <details> — used where
   the content is good-to-know rather than decision-critical, so it doesn't add
   to the scroll length before the CTA. Native <details>/<summary> keeps keyboard
   and screen-reader support without extra JS. */
.pm-note-details { background: oklch(0.97 0.012 210); border-radius: 12px; padding: 4px 16px; font: 12px/1.7 var(--pm-font-body); color: var(--pm-text-2); }
.pm-note-details[open] { padding-bottom: 14px; }
.pm-note-details summary { cursor: pointer; list-style: none; font: 700 12px var(--pm-font-body); color: oklch(0.4 0.03 220); padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pm-note-details summary::-webkit-details-marker { display: none; }
.pm-note-details summary::after { content: '+'; font: 700 15px var(--pm-font-num); color: oklch(0.55 0.1 210); flex-shrink: 0; }
.pm-note-details[open] summary::after { content: '−'; }
.pm-note-details summary:focus-visible { outline: 2px solid oklch(0.62 0.14 210); outline-offset: 2px; border-radius: 4px; }

/* Strips native <button> chrome (border, background, font, alignment) so a
   button can carry the exact same inline styles a clickable <div> used to —
   used wherever a click target needs real keyboard/focus semantics. */
.pm-unbutton { appearance: none; -webkit-appearance: none; margin: 0; text-align: left; font: inherit; color: inherit; }
.pm-unbutton:focus-visible { outline: 2px solid oklch(0.62 0.14 210); outline-offset: 2px; }

/* ---------- FAQ (top page) ---------- */
.pm-faq-q {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px;
}
.pm-faq-q::-webkit-details-marker { display: none; }
.pm-faq-icon::after { content: '＋'; }
.pm-faq-item[open] .pm-faq-icon::after { content: '−'; }
.pm-faq-q:focus-visible { outline: 2px solid oklch(0.62 0.14 210); outline-offset: -2px; }

/* ---------- search: collapsible filter card ---------- */
/* Collapsed by default on mobile (the filter card would otherwise fill most of
   the first screen while only a couple of photographers are listed); always
   expanded on desktop, where a toggle would add a click for no reason. */
.pm-filter-summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 20px; font: 700 14px var(--pm-font-body); color: oklch(0.28 0.02 240);
}
.pm-filter-summary::-webkit-details-marker { display: none; }
.pm-filter-summary-hint { font: 600 12px var(--pm-font-body); color: oklch(0.5 0.14 210); flex-shrink: 0; }
.pm-filter-summary:focus-visible { outline: 2px solid oklch(0.62 0.14 210); outline-offset: -2px; border-radius: var(--pm-radius-card); }
.pm-filter-summary-note { font: 600 12px var(--pm-font-body); color: oklch(0.5 0.14 210); margin-right: auto; margin-left: 4px; }
.pm-filter-body { padding: 0 20px 18px; }
@media (min-width: 861px) {
  .pm-filter-summary { display: none; }
  .pm-filter-body { display: block !important; padding: 18px 20px; }
}

/* ---------- sticky bottom CTA (booking: contact step) ---------- */
.pm-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: oklch(1 0 0 / 0.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--pm-border-soft);
  box-shadow: 0 -8px 24px oklch(0 0 0 / 0.06);
  padding: 12px clamp(20px,5vw,32px) calc(12px + env(safe-area-inset-bottom));
}
.pm-sticky-cta-inner { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.pm-sticky-cta-total { display: flex; flex-direction: column; line-height: 1.3; flex-shrink: 0; }
.pm-sticky-cta-total-label { font: 600 11px var(--pm-font-body); color: var(--pm-text-3); }
.pm-sticky-cta-total-value { font: 800 19px var(--pm-font-num); color: oklch(0.3 0.03 240); white-space: nowrap; }
.pm-sticky-cta-inner .pm-btn { flex: 1; }

/* ---------- footer ---------- */
.pm-footer { border-top: 1px solid var(--pm-border-soft); padding: clamp(36px,8vw,56px) clamp(20px,5vw,32px); margin-top: 40px; }
.pm-footer-inner { max-width: var(--pm-max); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
.pm-footer-links { display: flex; flex-direction: column; gap: 10px; }
.pm-footer-links .pm-h { font: 700 12px var(--pm-font-body); color: var(--pm-text-2); letter-spacing: 0.04em; }
.pm-footer-links span { cursor: pointer; font: 13px var(--pm-font-body); color: var(--pm-text-3); }

/* ---------- modal (chat / sheet) ---------- */
.pm-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: flex-end; justify-content: center; }
.pm-modal-overlay.is-open { display: flex; }
.pm-modal-backdrop { position: absolute; inset: 0; background: oklch(0.2 0.02 250 / 0.42); }
.pm-modal-sheet {
  position: relative; width: 100%; background: var(--pm-bg); border-radius: 20px 20px 0 0;
  box-shadow: var(--pm-shadow-modal); display: flex; flex-direction: column; overflow: hidden;
}
.pm-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: #fff; border-bottom: 1px solid var(--pm-border-soft); }
.pm-modal-close { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--pm-border); background: #fff; color: var(--pm-text-2); font: 16px var(--pm-font-num); cursor: pointer; line-height: 1; }

/* chat */
.pm-chat-sheet { max-width: 440px; height: min(78vh,620px); }
.pm-chat-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.pm-chat-row { display: flex; }
.pm-chat-row.mine { justify-content: flex-end; }
.pm-chat-bubble { max-width: 78%; border-radius: 16px 16px 16px 4px; padding: 10px 14px; font: 13px/1.7 var(--pm-font-body); background: #fff; color: oklch(0.28 0.02 240); border: 1px solid var(--pm-border); }
.pm-chat-row.mine .pm-chat-bubble { border-radius: 16px 16px 4px 16px; background: var(--pm-brand-grad-soft); color: #fff; border: none; }
.pm-chat-meta { font: 10px var(--pm-font-num); color: var(--pm-text-muted); margin-top: 3px; }
.pm-chat-row.mine .pm-chat-meta { text-align: right; }
.pm-chat-input-row { padding: 12px 14px; background: #fff; border-top: 1px solid var(--pm-border-soft); display: flex; gap: 10px; align-items: flex-end; }
.pm-chat-input { flex: 1; resize: none; border: 1px solid var(--pm-border-soft); border-radius: 14px; padding: 11px 14px; font: 13px/1.5 var(--pm-font-body); background: var(--pm-bg); max-height: 100px; }
.pm-chat-send { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--pm-brand-grad-soft); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pm-unread-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 100px; background: var(--pm-warn); color: #fff; font: 700 11px var(--pm-font-num); display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }

/* sheet */
.pm-sheet-modal { max-width: 560px; height: min(88vh,760px); }
.pm-sheet-body { flex: 1; overflow-y: auto; padding: 20px 22px 24px; }
.pm-sheet-foot { padding: 14px 18px; background: #fff; border-top: 1px solid var(--pm-border-soft); display: flex; gap: 10px; }

/* ---------- booking calendar ---------- */
.pm-legend { display: flex; gap: 16px; flex-wrap: wrap; font: 12px var(--pm-font-body); color: var(--pm-text-3); margin-bottom: 14px; }
.pm-legend-item { display: flex; align-items: center; gap: 6px; }
.pm-legend-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.pm-cal-scroll { overflow-x: auto; }
.pm-cal-grid { display: grid; gap: 3px; }
.pm-cal-cell { height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.pm-cal-daylabel { text-align: center; font: 700 12px var(--pm-font-body); }
.pm-cal-time { font: 11px var(--pm-font-num); color: var(--pm-text-3); display: flex; align-items: center; }

/* ---------- misc ---------- */
.pm-loading { text-align: center; padding: 60px 20px; color: var(--pm-text-muted); font: 13px var(--pm-font-body); }
.pm-empty { text-align: center; padding: 40px 20px; color: var(--pm-text-muted); font: 13px/1.9 var(--pm-font-body); }
.pm-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid oklch(1 0 0 / 0.5); border-top-color: #fff; border-radius: 50%; animation: pm-spin .7s linear infinite; }
.pm-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: oklch(0.2 0.02 250); color: #fff; padding: 12px 20px; border-radius: 100px; font: 13px var(--pm-font-body); z-index: 2000; box-shadow: 0 10px 30px oklch(0 0 0 / 0.25); }