/* Crowd Cow FBQ — Base Styles (Tailwind handles the rest) */
@font-face { font-family: 'Header'; src: url('fonts/header-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Header'; src: url('fonts/header-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Header'; src: url('fonts/header-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Body'; src: url('fonts/body-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Body'; src: url('fonts/body-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

html { overflow-y: scroll; }
body {
  font-family: 'Body', system-ui, sans-serif;
  color: #131313;
  line-height: 1.6;
  font-size: 16px;
}

/* ─── Component classes (shared across pages) ─── */
.btn-primary {
  background: #131313; color: #fff; border: none;
  padding: 10px 24px; font-size: 15px; font-weight: 700;
  border-radius: 8px; cursor: pointer; font-family: inherit;
  transition: background .15s, transform .1s;
}
@media (min-width: 768px) {
  .btn-primary { padding: 16px 40px; font-size: 17px; }
}
.btn-primary:hover { background: #2a2a2a; }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-back {
  background: none; border: none;
  font-size: 13px; font-weight: 600; color: #888;
  cursor: pointer; padding: 4px 0; font-family: inherit;
  display: flex; align-items: center; gap: 4px; margin-right: auto;
}
@media (min-width: 768px) {
  .btn-back { font-size: 15px; padding: 8px 0; }
}
.btn-back:hover { color: #131313; }

.input-field {
  padding: 14px 16px; border: 1.5px solid #e4e0d8;
  border-radius: 8px; font-size: 16px; font-family: 'Body', system-ui, sans-serif;
  background: #fff; transition: border-color .15s; outline: none; color: #131313;
}
.input-field:focus { border-color: #303b1e; }
.input-field::placeholder { color: #bbb; }

.cta-bar-shared {
  position: fixed; bottom: 0; right: 0;
  background: #fff; border-top: 1px solid #e4e0d8;
  padding: 16px 32px; display: flex; justify-content: flex-end;
  align-items: center; gap: 16px; z-index: 10;
}

/* Transition for mobile summary chevron */
.mobile-summary-toggle .left svg { transition: transform .2s; }

/* State-based selectors Tailwind can't handle */
.mobile-summary.open .mobile-summary-body { max-height: 600px; }
.mobile-summary.open .mobile-summary-toggle .left svg { transform: rotate(180deg); }
.progress-step.done + .progress-connector { background: #303b1e; }

/* Check mark default hidden */
.check-mark svg { opacity: 0; }

/* Selected states for cards */
.offer-card.selected, .bundle-card.selected, .freq-card.selected { border-color: #303b1e; box-shadow: 0 0 0 1px #303b1e; }
.offer-card.selected .check-mark, .bundle-card.selected .check-mark { border-color: #303b1e; background: #303b1e; }
.offer-card.selected .check-mark svg, .bundle-card.selected .check-mark svg { opacity: 1; }

/* Summary image: single-image wider aspect */
.summary-img-wrap.full { aspect-ratio: 4/3; }

/* ─── Flow page layout (shared across offer/box/frequency/checkout) ─── */
.flow-content { padding-top: 16px; padding-bottom: 120px; }
.flow-progress { margin-bottom: 16px; }
.flow-heading { font-size: 22px; margin-bottom: 4px; }
.flow-subtitle { font-size: 15px; margin-bottom: 16px; }
@media (min-width: 768px) {
  .flow-content { padding-top: 40px; }
  .flow-progress { margin-bottom: 40px; }
  .flow-heading { font-size: 32px; margin-bottom: 8px; }
  .flow-subtitle { font-size: 17px; margin-bottom: 32px; }
}

/* ─── Detail modal (shared across offer/box pages) ─── */
.modal-overlay.open { display: flex; }
.detail-modal {
  background: #fff; width: 100%; height: 100%;
  overflow-y: auto; position: relative;
}
.detail-modal-body { padding: 24px; padding-bottom: 96px; }
.detail-modal-sticky {
  position: sticky; bottom: 0; background: #fff;
  border-top: 1px solid #e4e0d8; padding: 16px 24px;
}
@media (min-width: 768px) {
  .detail-modal {
    border-radius: 16px; max-width: 500px; width: 90%;
    height: auto; max-height: 80vh;
  }
  .detail-modal-body { padding: 32px; padding-bottom: 32px; }
  .detail-modal-sticky { position: static; border-top: none; padding: 0 32px 32px; }
}