/*!
 * `[booking_flow_inline]` - the HOST's half of an inline flow mount.
 *
 * The widget ships every rule it needs for the SHEET, where the sheet panel supplies the
 * padding (`.sb-sheet__panel`: 1.35rem 1.5rem) and sets `--sb-bleed`, the variable a few
 * elements use to escape that padding and run edge to edge. An INLINE mount has neither:
 * there is no sheet, so `--sb-bleed` resolves to its 0px fallback and nothing is padded at
 * all. The widget then sits flush against whatever box the page put it in, which reads as
 * broken rather than as full-bleed.
 *
 * That gap is the host's to fill, and this file is deliberately the smallest thing that
 * fills it. Every rule is scoped to `.svea-booking-inline` - the wrapper
 * InlineMountShortcode renders and nothing else on any site has - so the sheet, the
 * GratisKonsultation mount, the boka page and every other surface are byte-identical.
 *
 * SPECIFICITY, and why the `.svea-booking` in the middle is load-bearing. The widget's own
 * rules are single classes plus a scoped attribute (`.sb-landing__trust[data-v-f4312ca2]`),
 * so they score 0,2,0 - the same as a two-class selector here. The bundle INJECTS its
 * stylesheet at runtime, which puts it after this file in the cascade, so a tie goes to the
 * widget and the override would silently do nothing. Three classes wins on specificity
 * instead, which does not depend on load order at all. That is also why there is no
 * `!important` here: it would work for the wrong reason, and stop working just as silently
 * the day the widget's own specificity changes.
 */

/*
 * The widget ROOT as a section of the page rather than a sheet with its walls taken away.
 *
 *   WIDTH. By default the flow FILLS its container: `width: 100%` and no cap. The widget's
 *     own `.svea-booking` rule caps a mount at 640px and centres it; inside the sheet the flow
 *     modifier lifts that because the panel is the constraint, and here the page's block is
 *     the constraint, so the page decides the width. `[booking_flow_inline width="contained"]`
 *     opts into the sheet's reading width instead - see the rule below this one.
 *   GAP AFTER. The widget zeroes its margins, which left the next paragraph touching the
 *     last card while the paragraph above kept its own ~25px. 1.75rem matches that rhythm.
 *     No top margin: the paragraph above already spends one, and the wrapper div in between
 *     stops the two from collapsing.
 *   TYPE. The widget writes every font-size as `calc(<literal> * var(--sb-type, 1))` and
 *     ships the multiplier at 1. 1.1 is the smallest notch that puts the flow's body copy at
 *     15px or more beside a theme's 17px paragraphs. A bundle that predates the dial ignores
 *     it harmlessly, so this rule and the widget deploy in either order.
 *
 * NO PADDING HERE, deliberately - the panel below carries it, and the check asserts the root
 * rule never grows one. `.svea-booking--flow` is the third class that outranks the widget's
 * own `.svea-booking--flow[data-v-…]` without relying on load order.
 */
.svea-booking-inline .svea-booking.svea-booking--flow {
  width: 100%;
  max-width: none;
  margin: 0 0 1.75rem;
  --sb-type: 1.1;
}

/*
 * `width="contained"`: the sheet's reading width, centred in the container.
 *
 * The width is read from the token the widget declares on its root (`--sb-sheet-max`, 34rem),
 * so the inline flow and the sheet cannot disagree about it. `width: 100%` from the rule above
 * still applies, so a container narrower than the cap (every phone) is filled exactly as in
 * the default. Only the inline margins change; the gap after is kept.
 */
.svea-booking-inline[data-svea-width="contained"] .svea-booking.svea-booking--flow {
  max-width: var(--sb-sheet-max, 34rem);
  margin-inline: auto;
}

/*
 * The flow HEADER as the page's own section heading, not a title bar.
 *
 * In the sheet the header is a bar: centred between two 36px cells kept for the back and close
 * controls, with a hairline under it. Inline neither control renders, so the bar read as a
 * window title for a window that is not there, and its empty cells pushed the title 36px in.
 *
 *   The hairline and the bar's bottom padding go.
 *   The two end cells COLLAPSE (width auto, no min-height, no row gap) rather than being
 *   hidden: a hidden cell still holds its 36px. The medicinpaket support-phone control, which
 *   does render, gets the row gap back as its own margin so it keeps its spacing at the end.
 *   The title is left-aligned at 22px/700.
 *   `padding-inline: 1rem` puts the heading on the same left edge as the content inside the
 *   padded panel below - the header is the panel's sibling, not its child, so it does not
 *   inherit the panel's inset. It is the same 1rem, not a second number.
 *
 * Four classes on the title because the widget's compact variant scores three.
 */
.svea-booking-inline .svea-booking .sb-flowhead {
  gap: 0;
  padding: 0 1rem;
  border-bottom: 0;
}

.svea-booking-inline .svea-booking .sb-flowhead .sb-flowhead__end {
  width: auto;
  min-height: 0;
}

.svea-booking-inline .svea-booking .sb-flowhead__end--right .sb-flowhead__icon {
  margin-inline-start: 0.65rem;
}

.svea-booking-inline .svea-booking .sb-flowhead__end:not(.sb-flowhead__end--right) .sb-flowhead__icon {
  margin-inline-end: 0.65rem;
}

.svea-booking-inline .svea-booking .sb-flowhead .sb-flowhead__text {
  text-align: left;
}

.svea-booking-inline .svea-booking .sb-flowhead .sb-flowhead__title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

/*
 * The step PANEL - the box every step's content lives in - gets the padding and a radius, so
 * an inline mount reads as one card on the page rather than as text against an edge.
 *
 * ONE value on all four sides and no breakpoint. 1rem is the sheet's own mobile padding, it
 * is enough air at every width a host is likely to give this block, and a second number
 * would be a second thing to keep in step with a widget that owns everything inside the box.
 *
 * The panel carries `background: var(--sb-surface)` of its own, which is what makes the
 * radius visible against a page whose background is anything else.
 */
.svea-booking-inline .svea-booking .svea-booking__panel {
  padding: 1rem;
  border-radius: var(--sb-radius, 12px);
}

/*
 * The trust strip (99 kr / 45 min / Leg. psykolog), in both its placements: the hero's
 * `.sb-landing__trust` and the form step's `.sb-landing__trust--foot`, which carries both
 * classes.
 *
 * In the sheet it is a full-bleed band: negative bleed margins take it out to the panel's
 * edges and the top and bottom rules are what close it against the content above and below.
 * Inline there is no bleed to escape with, so those rules become two stray lines across a
 * sand box that already reads as its own object. Rounding the box and dropping the lines is
 * the same design decision the sheet made, expressed for a band that is not full-bleed.
 *
 * The background, the inner padding and the dividers between the three items are left
 * exactly as the widget draws them.
 */
.svea-booking-inline .svea-booking .sb-landing__trust {
  border-top: 0;
  border-bottom: 0;
  border-radius: var(--sb-radius, 12px);
}