/*
 * Properkey shared UI components (pk-ui)
 * -------------------------------------
 * Extracted so the pk-* design language works OUTSIDE the dashboard layout —
 * e.g. the public property show page (application layout). Tokens live at :root
 * (not scoped to .pk-dashboard) so var() resolves anywhere this file is loaded.
 * Only pk-* / pk-sb-* prefixed selectors are defined, so nothing bleeds onto
 * un-classed public markup.
 */

:root {
  --pk-primary: #EE5A24;
  --pk-primary-dark: #d94d1b;
  --pk-navy: #1f2a44;
  --pk-muted: #7a828e;
  --pk-meta: #5b6472;
  --pk-border: #eceef1;
  --pk-blue: #2a49a8;
  --pk-blue-2: #1e357e;
  --pk-green: #16a34a;
}

/* ============================ sidebar card shell ============================ */
.pk-sb-card {
  background: #fff;
  border: 1px solid var(--pk-border);
  border-radius: 18px;
  box-shadow: 0 6px 22px rgba(16, 24, 40, .07);
  overflow: hidden;
}
.pk-sb-card + .pk-sb-card { margin-top: 16px; }
.pk-sb-body { padding: 16px 20px 18px; }

/* ============================ tour card header ============================ */
.pk-tour-head {
  background: linear-gradient(135deg, var(--pk-blue) 0%, var(--pk-blue-2) 100%);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pk-tour-head__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
  margin: 0 0 3px;
}
.pk-tour-head__title { font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.pk-tour-head__icon {
  width: 38px; height: 38px; flex: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, .16);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* ============================ calendar ============================ */
.pk-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pk-cal__month { font-size: 15px; font-weight: 700; color: var(--pk-navy); }
.pk-cal__arrow {
  width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer;
  border-radius: 8px; color: var(--pk-meta); font-size: 14px;
}
.pk-cal__arrow:hover { background: #f3f4f6; color: var(--pk-navy); }
.pk-cal__arrow:disabled { opacity: .35; cursor: default; background: transparent; }
.pk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pk-cal__dow { text-align: center; font-size: 11px; font-weight: 600; color: #a7aeb8; padding: 4px 0; }
.pk-cal__day {
  /* Fixed height (not 1:1 aspect) — square cells at sidebar width made the
     calendar alone ~360px tall and pushed the card past the fold. */
  height: 34px;
  border: 0; background: transparent; cursor: pointer;
  border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--pk-navy);
  display: flex; align-items: center; justify-content: center;
}
.pk-cal__day:hover:not(:disabled) { background: #eef1fb; }
.pk-cal__day--muted { color: #cbd0d8; }
.pk-cal__day:disabled { color: #d6dae0; cursor: default; }
.pk-cal__day--today { box-shadow: inset 0 0 0 1.5px #cfd6ea; }
.pk-cal__day--selected,
.pk-cal__day--selected:hover { background: var(--pk-blue); color: #fff; }
.pk-cal__blank { height: 34px; }

/* ============================ time pills ============================ */
.pk-sb-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9aa2ad; margin: 14px 0 6px; }
.pk-sb-note { font-size: 13.5px; color: var(--pk-meta); margin: 0 0 12px; line-height: 1.45; }
.pk-timepills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pk-timepill {
  position: relative;
  border: 1.5px solid #e4e7ec; background: #fff; border-radius: 12px;
  padding: 7px 6px; text-align: center; cursor: pointer; transition: border-color .12s, background .12s;
}
.pk-timepill:hover { border-color: #cfd4dc; }
.pk-timepill__t { display: block; font-size: 13.5px; font-weight: 700; color: var(--pk-navy); }
.pk-timepill__s { display: block; font-size: 11px; color: var(--pk-muted); margin-top: 1px; }
.pk-timepill input { position: absolute; opacity: 0; pointer-events: none; }
.pk-timepill:has(input:focus-visible) { border-color: var(--pk-blue); box-shadow: 0 0 0 3px rgba(42, 73, 168, .15); }
.pk-timepill:has(input:checked) { border-color: var(--pk-blue); background: var(--pk-blue); }
.pk-timepill:has(input:checked) .pk-timepill__t { color: #fff; }
.pk-timepill:has(input:checked) .pk-timepill__s { color: rgba(255, 255, 255, .82); }

/* ============================ fields ============================ */
.pk-input {
  width: 100%; padding: 10px 14px; font-size: 14px; color: var(--pk-navy);
  border: 1.5px solid #e4e7ec; border-radius: 12px; background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.pk-input::placeholder { color: #9aa2ad; }
.pk-input:focus { outline: 0; border-color: var(--pk-primary); box-shadow: 0 0 0 3px rgba(238, 90, 36, .12); }
.pk-stack > * + * { margin-top: 8px; }

/* ============================ buttons + callout ============================ */
.pk-cta-btn {
  width: 100%; border: 0; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--pk-primary); color: #fff; font-weight: 800; font-size: 15px;
  padding: 12px 18px; border-radius: 13px;
  box-shadow: 0 6px 16px rgba(238, 90, 36, .28); transition: background .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.pk-cta-btn:hover { background: var(--pk-primary-dark); color: #fff; }
.pk-cta-btn--mt { margin-top: 12px; }

.pk-callout {
  display: flex; align-items: center; gap: 10px;
  background: #f3f5f9; border-radius: 13px; padding: 10px 12px; margin-top: 12px;
}
.pk-callout__icon {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: #e5eafc; color: var(--pk-blue);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.pk-callout__label { font-size: 12.5px; color: var(--pk-meta); }
.pk-callout__phone { font-size: 15px; font-weight: 800; color: var(--pk-blue); text-decoration: none; }

/* ============================ list-for-free / feature card ============================ */
.pk-feature__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.pk-feature__icon {
  width: 56px; height: 56px; flex: none; border-radius: 999px;
  background: var(--pk-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.pk-feature__icon--blue { background: #e5eafc; color: var(--pk-blue); }
.pk-feature__title { font-size: 21px; font-weight: 800; color: var(--pk-navy); margin: 0; line-height: 1.15; letter-spacing: -.01em; }
.pk-feature__sub { color: var(--pk-meta); font-size: 15px; margin: 4px 0 0; }
.pk-feature__list { list-style: none; margin: 0 0 16px; padding: 0; }
.pk-feature__list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--pk-navy); padding: 5px 0; }
.pk-feature__list i { color: var(--pk-primary); font-size: 14px; }

/* ============================ compact CTA rows ============================ */
.pk-cta-rows { display: flex; flex-direction: column; }
.pk-cta-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: transparent; border: 0; cursor: pointer; text-align: left; text-decoration: none;
  padding: 16px 20px;
}
.pk-cta-rows > * + * { border-top: 1px solid var(--pk-border); }
.pk-cta-row:hover { background: #fafbfc; }
.pk-cta-row__icon {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.pk-cta-row__icon--offer { background: #fdece6; color: var(--pk-primary); }
.pk-cta-row__icon--insure { background: #e5eafc; color: var(--pk-blue); }
.pk-cta-row__body { flex: 1; min-width: 0; }
.pk-cta-row__title { display: block; font-size: 15px; font-weight: 700; color: var(--pk-navy); }
.pk-cta-row__sub { display: block; font-size: 13px; color: var(--pk-muted); }
.pk-cta-row__chev { color: #c2c8d0; font-size: 14px; }

/* ============================ post-submission success ============================ */
.pk-success { text-align: center; padding: 22px 8px; }
.pk-success__badge {
  width: 60px; height: 60px; border-radius: 999px; margin: 0 auto 14px;
  background: #dcfce7; color: var(--pk-green);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.pk-success__title { font-size: 18px; font-weight: 800; color: var(--pk-navy); margin: 0 0 4px; }
.pk-success__text { font-size: 14px; color: var(--pk-meta); margin: 0 0 16px; }
.pk-success__hint { font-size: 12px; color: var(--pk-muted); margin: 12px 0 0; line-height: 1.45; }

/* compact inline success — fills the offer row slot after an anonymous submit */
.pk-lead-inline { display: flex; gap: 12px; padding: 16px 20px; }
.pk-lead-inline__badge { width: 34px; height: 34px; flex: none; border-radius: 999px; background: #dcfce7; color: var(--pk-green); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.pk-lead-inline__body { display: flex; flex-direction: column; }
.pk-lead-inline__link { margin-top: 7px; font-size: 13px; font-weight: 700; color: var(--pk-primary); text-decoration: none; }
.pk-lead-inline__link:hover { text-decoration: underline; }

/* ---- Virtual tour tile (property gallery) --------------------------------
   Reproduces what the tour itself shows when it loads: the start frame with a
   translucent disc and a call to enter. We use the listing photo the tile
   displaces as that frame — the tour host (Zillow) 403s server-side fetches, so
   its real first frame is not obtainable, and a live third-party request per
   page render would be the wrong trade anyway.

   Reading as a video start frame is the point: people already know what a play
   surface does, so the affordance needs no explanation (Jakob). */
.pk-tour-tile {
  position: relative;
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
  text-decoration: none;
  background-color: #14306e;
}

/* Blurred on purpose. The source photos are ~640px and we render this cell
   larger, so a sharp backdrop is already soft — blurring turns that into a
   deliberate treatment, and it clears the detail behind the disc so the entry
   control is the only thing competing for attention (Von Restorff).
   The scale() hides the transparent edge blur() pulls in at the boundary. */
.pk-tour-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: blur(3px) saturate(1.04);
  transform: scale(1.05);
  transition: filter 0.25s ease;
}

/* Ease the blur back on hover — a hint of the room behind the doorway. */
.pk-tour-tile:hover .pk-tour-tile__img { filter: blur(1.5px) saturate(1.04); }

/* Scrim: enough to hold white text at AA over any photo, light enough that the
   room behind still reads as a real frame. */
.pk-tour-tile__scrim {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.28);
  transition: background 0.2s ease;
}

.pk-tour-tile:hover .pk-tour-tile__scrim { background: rgba(15, 23, 42, 0.46); }

.pk-tour-tile__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 22px;
  transition: transform 0.2s ease;
}

.pk-tour-tile:hover .pk-tour-tile__disc { transform: scale(1.06); }

/* Navy pill rather than orange: small white text fails contrast on #FF4F00,
   and navy is the brand's chip surface. */
.pk-tour-tile__cta {
  padding: 7px 12px;
  border-radius: 6px;
  background: rgba(20, 48, 110, 0.94);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .pk-tour-tile__disc { width: 44px; height: 44px; font-size: 18px; }
  .pk-tour-tile__cta { font-size: 10px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-tour-tile__scrim,
  .pk-tour-tile__img,
  .pk-tour-tile__disc { transition: none; }
  .pk-tour-tile:hover .pk-tour-tile__img { filter: blur(3px) saturate(1.04); }
  .pk-tour-tile:hover .pk-tour-tile__disc { transform: none; }
}