/* PhotosbyB4 contact-form defense — shared across index/faq/gallery
 *
 * Brand pulled from soul.md:
 *   - Dark navy bg (#1a1a2e)
 *   - Pink accent (#ff71cb / #ff9ee0)
 *   - Rubik (headings), Karla (body), Clickerscript (script accent)
 *
 * Premium thank-you recipe (animated check + signed-by + while-you-wait
 * CTAs + stagger) lifted from feedback_premium_confirmation_state_recipe.md.
 */

/* ── Honeypots — visually + audibly hidden, but tabindex=-1 keeps them
   out of focus order ── */
.pb4-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Turnstile widget — managed challenge, mostly invisible ── */
.pb4-turnstile {
  margin: 12px 0 4px;
  min-height: 65px;
  display: flex;
  justify-content: center;
}
@media (max-width: 480px) {
  .pb4-turnstile { min-height: 70px; }
}

/* ── Consent card (A2P 10DLC) ──
 *
 * Selector specificity matters here: the host pages have a broad
 * `.cta-form input, .cta-form select, .cta-form textarea { … }` rule
 * (and `.inquiry-form input` on gallery.html) that sets the checkbox to
 * `width:100%; padding:16px 0 8px; background:transparent; border:none;
 *  border-bottom:1px solid …` — designed for text inputs but it nukes
 * our checkbox. We qualify each selector with `.pb4-consent` to win
 * specificity (0,2,1 beats 0,1,1) without resorting to !important.
 */
.pb4-consent {
  margin: 4px 0 4px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 113, 203, 0.18);
  border-left: 3px solid #ff71cb;
  border-radius: 0 8px 8px 0;
}
.pb4-consent .pb4-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
/* Defeat host-page broad `.cta-form input` / `.inquiry-form input` rules. */
.pb4-consent input.pb4-consent-check {
  width: 17px;
  height: 17px;
  min-width: 17px;
  max-width: 17px;
  flex: 0 0 17px;
  flex-shrink: 0;
  margin: 2px 0 0 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid rgba(255, 158, 224, 0.45);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.pb4-consent input.pb4-consent-check:focus,
.pb4-consent input.pb4-consent-check:focus-visible {
  outline: 2px solid rgba(255, 158, 224, 0.6);
  outline-offset: 2px;
  border-color: #ff71cb;
}
.pb4-consent input.pb4-consent-check:checked {
  background: #ff71cb;
  border-color: #ff71cb;
}
.pb4-consent input.pb4-consent-check:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 9px;
  border: 2px solid #1a1a2e;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.pb4-consent .pb4-consent-label {
  flex: 1 1 auto;
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  text-align: left;
}
.pb4-consent .pb4-consent-label strong { color: #fff; font-weight: 700; }
.pb4-consent .pb4-consent-fine {
  margin: 8px 0 0;
  padding-left: 27px;
  font-family: 'Karla', sans-serif;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
}
.pb4-consent .pb4-consent-fine a {
  color: rgba(255, 158, 224, 0.85);
  text-decoration: underline;
}
.pb4-consent .pb4-consent-fine a:hover { color: #ff71cb; }

/* ── Error display ── */
.pb4-form-error {
  margin: 12px 0 4px;
  padding: 10px 14px;
  background: rgba(255, 113, 203, 0.08);
  border: 1px solid rgba(255, 113, 203, 0.35);
  border-radius: 6px;
  font-family: 'Karla', sans-serif;
  font-size: 14px;
  color: #ff9ee0;
}
.pb4-form-error[hidden] { display: none; }

/* ── Submit button state ── */
.cta-form button[type="submit"]:disabled,
.inquiry-form button[type="submit"]:disabled,
button.pb4-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Form fade-out before swap to thanks ── */
form[data-fading] {
  animation: pb4-form-fade 220ms ease-out forwards;
  pointer-events: none;
}
@keyframes pb4-form-fade {
  to { opacity: 0; transform: translateY(-6px); }
}

/* ─────────────────────────────────────────────────────────────────
   THANK-YOU STATE — Premium confirmation recipe
   ───────────────────────────────────────────────────────────────── */
.pb4-thanks {
  position: relative;
  margin: 0 auto;
  max-width: 720px;
  padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 2.75rem);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 113, 203, 0.2);
  border-radius: 14px;
  box-shadow:
    0 24px 60px -28px rgba(0, 0, 0, 0.6),
    0 6px 18px -12px rgba(255, 113, 203, 0.18);
  overflow: hidden;
  text-align: left;
}
.pb4-thanks::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #ff71cb 0%, #ff9ee0 50%, rgba(255, 113, 203, 0.4) 100%);
  opacity: 0.9;
}
.pb4-thanks[hidden] { display: none; }

/* Animated checkmark */
.pb4-thanks-check {
  width: 64px;
  height: 64px;
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb4-thanks-check svg { width: 100%; height: 100%; overflow: visible; }
.pb4-thanks-check-ring {
  fill: none;
  stroke: #ff71cb;
  stroke-width: 2;
  opacity: 0.4;
}
.pb4-thanks-check-tick {
  fill: none;
  stroke: #ff71cb;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.pb4-thanks[data-animating] .pb4-thanks-check-tick {
  animation: pb4-thanks-tick 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
}
.pb4-thanks[data-animating] .pb4-thanks-check-ring {
  animation: pb4-thanks-ring 600ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both;
  transform-origin: center;
}
@keyframes pb4-thanks-tick { to { stroke-dashoffset: 0; } }
@keyframes pb4-thanks-ring {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1);   opacity: 0.4; }
}

/* Eyebrow */
.pb4-thanks-eyebrow {
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ff9ee0;
  margin: 0 0 12px;
}

/* Headline — Rubik (PhotosbyB4's brand serif equivalent) */
.pb4-thanks-h {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 1rem;
}
.pb4-thanks-h em {
  font-family: 'Clickerscript', cursive;
  font-style: normal;
  font-weight: 400;
  color: #ff71cb;
  font-size: 1.05em;
  letter-spacing: 0.01em;
}

/* Signed by Betsy */
.pb4-thanks-sig {
  font-family: 'Karla', sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 1.25rem;
}
.pb4-thanks-sig em {
  font-family: 'Clickerscript', cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 1.55rem;
  color: #ff9ee0;
  letter-spacing: 0.01em;
}
.pb4-sig-dash {
  width: 32px;
  height: 1px;
  background: rgba(255, 158, 224, 0.5);
  display: inline-block;
}

/* Lead copy */
.pb4-thanks-lead {
  font-family: 'Karla', sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0 0 1.25rem;
}

/* Receipt chip */
.pb4-thanks-receipt {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0.65rem 1rem;
  font-family: 'Karla', sans-serif;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}
.pb4-thanks-receipt strong { color: rgba(255, 255, 255, 0.85); font-weight: 700; }
.pb4-thanks-receipt-dot { color: rgba(255, 158, 224, 0.4); }

/* While-you-wait section */
.pb4-thanks-while {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.75rem;
  margin-top: 0.5rem;
}
.pb4-thanks-while-eyebrow {
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 158, 224, 0.85);
  margin: 0 0 1.25rem;
}
.pb4-thanks-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.pb4-thanks-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.25rem 1.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 113, 203, 0.15);
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s,
              box-shadow 0.25s,
              background 0.25s;
}
.pb4-thanks-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 113, 203, 0.45);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 28px -16px rgba(255, 113, 203, 0.4);
  opacity: 1;
}
.pb4-thanks-card-num {
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ff71cb;
}
.pb4-thanks-card-h {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.pb4-thanks-card-p {
  font-family: 'Karla', sans-serif;
  font-size: 0.84rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  flex: 1;
}
.pb4-thanks-card-arrow {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  color: #ff71cb;
  font-size: 1.1rem;
  transition: transform 0.2s;
}
.pb4-thanks-card:hover .pb4-thanks-card-arrow { transform: translateX(3px); }

/* Stagger entrance */
.pb4-thanks[data-animating] [data-stagger] {
  opacity: 0;
  transform: translateY(8px);
  animation: pb4-thanks-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.pb4-thanks[data-animating] [data-stagger="1"] { animation-delay: 280ms; }
.pb4-thanks[data-animating] [data-stagger="2"] { animation-delay: 360ms; }
.pb4-thanks[data-animating] [data-stagger="3"] { animation-delay: 440ms; }
.pb4-thanks[data-animating] [data-stagger="4"] { animation-delay: 520ms; }
.pb4-thanks[data-animating] [data-stagger="5"] { animation-delay: 620ms; }
@keyframes pb4-thanks-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Container fade-in */
.pb4-thanks[data-animating] {
  animation: pb4-thanks-card-rise 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pb4-thanks-card-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
  .pb4-thanks-check-tick { stroke-dashoffset: 0; }
  .pb4-thanks[data-animating] .pb4-thanks-check-ring,
  .pb4-thanks[data-animating] .pb4-thanks-check-tick,
  .pb4-thanks[data-animating] [data-stagger],
  .pb4-thanks[data-animating],
  form[data-fading] {
    animation: none;
  }
  .pb4-thanks[data-animating] [data-stagger] { opacity: 1; transform: none; }
  form[data-fading] { opacity: 0; }
}

/* Mobile */
@media (max-width: 700px) {
  .pb4-thanks-cards { grid-template-columns: 1fr; }
  .pb4-thanks { padding: 2rem 1.25rem 2.5rem; }
}