/*
 * Shared styles for the multi-step flows (Add a New Business, Claim, Edit,
 * Change Plan, Dispute, Report, Partner) - IP-Design-Principles.md.
 *
 * Structure/behavior/wording here follow IP-Add-Listing-Example.zip's
 * add-listing-example.html; colors/fonts/spacing/radius are the tokens
 * already defined in tokens.css (extracted from the live site), per
 * Design Principles §1 rule 1: "do not introduce new colors, fonts,
 * shadows or radii." Every selector below is prefixed `.ipflow-` so
 * nothing here can collide with or override an existing live-site rule -
 * additive only, per rule 2 ("existing pages keep their design").
 */

.ipflow-shell {
  max-width: var(--ip-form-width);
  margin: 0 auto;
  /* #header is `position: sticky` (web.css) - it reserves its own space
     in normal flow, so nothing here needs to compensate for it sitting
     "on top" of the page. What every other page actually gets is
     .page-heading's own padding: 40px 0, which every rebuilt flow step
     dropped along with the rest of that markup (no title band/breadcrumb
     needed for a single-column form) - without it the progress bar
     rendered flush against the header, reading as "hidden behind the
     nav" even though nothing was truly overlapping. */
  padding-top: 40px;
  padding-bottom: 90px; /* room for the sticky mobile Previous/Next bar */
}
@media (max-width: 767px) {
  .ipflow-shell {
    padding-top: 24px;
  }
}

/* Progress indicator - Design Principles §8: "Progress indicator exposes
   'Step 3 of 6: Business' as text." The segments are decorative (aria-
   hidden); the sr-text node carries the real accessible name. */
.ipflow-progress {
  margin: 0 0 var(--ip-space-lg);
}
.ipflow-progress-bar {
  display: flex;
  gap: 4px;
}
.ipflow-progress-seg {
  flex: 1 1 0;
  height: 6px;
  border-radius: var(--ip-radius-sm);
  background: var(--ip-color-border);
}
.ipflow-progress-seg.is-done,
.ipflow-progress-seg.is-current {
  background: var(--ip-color-primary);
}
.ipflow-progress-text {
  display: block;
  margin-top: var(--ip-space-xs);
  font-family: var(--ip-font-body);
  font-size: 13px;
  color: var(--ip-color-dark);
}

.ipflow-heading {
  margin: 0 0 var(--ip-space-xs);
}
.ipflow-explain {
  margin: 0 0 var(--ip-space-lg);
  color: var(--ip-color-dark);
}

/* Error summary - Design Principles §5: heading, count sentence, list of
   links to fields. Reserved position at the top of every step. */
.ipflow-error-summary {
  border: 1px solid var(--ip-color-error);
  background: var(--ip-color-error-bg);
  color: var(--ip-color-error);
  border-radius: var(--ip-radius-sm);
  padding: var(--ip-space-md) var(--ip-space-lg);
  margin-bottom: var(--ip-space-lg);
}
.ipflow-error-summary h2 {
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--ip-color-error);
}
.ipflow-error-summary p {
  margin: 0 0 var(--ip-space-xs);
}
.ipflow-error-summary ul {
  margin: 0;
  padding-left: 20px;
}
.ipflow-error-summary a {
  color: var(--ip-color-error);
  text-decoration: underline;
}

/* Fields */
.ipflow-field {
  margin-bottom: var(--ip-space-lg);
}
.ipflow-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  font-family: var(--ip-font-body);
}
.ipflow-field .ipflow-optional {
  font-weight: 400;
  color: var(--ip-color-dark);
}
.ipflow-help {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ip-color-dark);
}
.ipflow-field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ip-color-error);
  font-weight: 700;
}
.ipflow-field.has-error input,
.ipflow-field.has-error select,
.ipflow-field.has-error textarea {
  border-color: var(--ip-color-error);
}
.ipflow-counter {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ip-color-dark);
  text-align: right;
}
.ipflow-counter.is-over {
  color: var(--ip-color-error);
  font-weight: 700;
}

/* Touch targets - Design Principles §4: at least 44x44px. */
.ipflow-shell input[type="checkbox"],
.ipflow-shell input[type="radio"] {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.ipflow-checkbox-row,
.ipflow-radio-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sponsored-subcategory pill picker */
.ipflow-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
}
.ipflow-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--ip-color-border);
  border-radius: 22px;
  background: var(--ip-color-white);
  color: var(--ip-color-dark);
  font-family: var(--ip-font-body);
  font-size: 14px;
  cursor: pointer;
}
.ipflow-pill[aria-pressed="true"] {
  background: var(--ip-color-primary);
  border-color: var(--ip-color-primary);
  color: var(--ip-color-white);
}
.ipflow-pill[aria-pressed="true"]::before {
  content: "\2713 ";
}
.ipflow-pill:disabled,
.ipflow-pill[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
}

/* Previous / Next bar - sticky on mobile per Design Principles §3. */
.ipflow-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--ip-space-md);
  margin-top: var(--ip-space-xl);
}
@media (max-width: 767px) {
  .ipflow-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--ip-color-white);
    border-top: 1px solid var(--ip-color-border);
    padding: var(--ip-space-md) var(--ip-space-lg);
    margin-top: 0;
    z-index: 500;
  }
}
.ipflow-nav .ipflow-btn-next {
  flex: 1 1 auto;
  max-width: 260px;
}

.ipflow-btn-next[disabled] .ipflow-spinner {
  display: inline-block;
}
.ipflow-spinner {
  display: none;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: ipflow-spin .6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ipflow-spinner { animation: none; }
}
@keyframes ipflow-spin {
  to { transform: rotate(360deg); }
}

/* Info / warning notes */
.ipflow-note {
  border-radius: var(--ip-radius-sm);
  padding: var(--ip-space-md) var(--ip-space-lg);
  margin-bottom: var(--ip-space-lg);
  font-size: 14px;
}
.ipflow-note-info {
  background: var(--ip-color-info-bg);
  color: var(--ip-color-info);
}
.ipflow-note-warning {
  background: var(--ip-color-warning-bg);
  color: var(--ip-color-warning-text);
}

/* Dialogs - native <dialog>, Design Principles §5: heading, exact
   numbers, at most two buttons, safe action primary, focus trapped by
   the browser's own showModal(). */
.ipflow-shell dialog,
.ipflow-dialog {
  border: none;
  border-radius: var(--ip-radius-sm);
  padding: var(--ip-space-xl);
  max-width: 480px;
  width: 92vw;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.ipflow-dialog::backdrop {
  background: rgba(0,0,0,.5);
}
.ipflow-dialog h2 {
  margin-top: 0;
}
.ipflow-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ip-space-sm);
  margin-top: var(--ip-space-lg);
}

/* Business hours dialog rows */
.ipflow-hours-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--ip-space-sm);
  flex-wrap: wrap;
}
.ipflow-hours-row .ipflow-hours-day {
  width: 92px;
  font-weight: 700;
}
.ipflow-hours-row select {
  min-height: 44px;
}
.ipflow-hours-summary {
  font-size: 13px;
  color: var(--ip-color-dark);
  margin-top: 4px;
}

/* Selectable plan tiles (web.partials.plan-tiles, $selectable=true) - the
   flow's own Plan step (newListing/plan-select.blade.php) reuses the live
   /plans page's four-tile layout instead of a plain radio list, per
   IP-Add-Listing-Example.zip and the flowchart. The native radio is kept
   for real keyboard/form semantics but visually replaced by the tile
   itself lighting up via .is-selected, driven by the plan-tiles partial's
   own script. */
.ipflow-shell .pricing-plan-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ipflow-shell .pricing-plan-radio-label {
  cursor: pointer;
}
.ipflow-shell .pricing-plan-radio:focus-visible + * ,
.ipflow-shell .pricing-plan-radio:focus-visible {
  outline: 3px solid var(--ip-color-primary);
  outline-offset: 2px;
}
.ipflow-shell .pricing-plan.pricing-plan-selectable {
  border: 2px solid transparent;
  border-radius: var(--ip-radius-sm);
  transition: border-color .15s ease;
}
.ipflow-shell .pricing-plan.pricing-plan-selectable.is-selected {
  border-color: var(--ip-color-primary);
}

/* Focus visibility - Design Principles §8. */
.ipflow-shell a:focus-visible,
.ipflow-shell button:focus-visible,
.ipflow-shell input:focus-visible,
.ipflow-shell select:focus-visible,
.ipflow-shell textarea:focus-visible,
.ipflow-pill:focus-visible {
  outline: 3px solid var(--ip-color-primary);
  outline-offset: 2px;
}
.ipflow-heading[tabindex="-1"]:focus {
  outline: none;
}