/* Figma layouts; type styles are exclusively shared t-* utilities. */
.sm-offer,.sm-service { --sm-header-offset: 118px; }
.sm-catalogue-card { background: var(--color-surface); padding: var(--space-32) var(--space-24); border-radius: var(--radius-sm); box-shadow: var(--shadow-blue); min-width: 0; }
.sm-catalogue-card :is(h1,h2,h3,p) { margin: 0; }
.sm-catalogue-prose :is(p,ul,ol) + :is(p,ul,ol) { margin-top: var(--space-16); }
.sm-catalogue-prose ul,.sm-catalogue-prose ol { margin-bottom: 0; padding-left: var(--space-24); }
.sm-catalogue-icon { display: block; flex-shrink: 0; max-width: none; }
.sm-catalogue-button { display: flex; justify-content: center; align-items: center; text-align: center; padding: var(--space-16) var(--space-24); border: 0; border-radius: var(--radius-sm); background: var(--color-brand); color: var(--c-white) !important; cursor: pointer; min-height: 48px; }
.sm-search .sm-catalogue-button:hover { text-decoration: none; filter: brightness(.94); }
.sm-catalogue-button--purple { background: var(--color-accent); }
.sm-catalogue-button--green { background: var(--color-success); }
.sm-catalogue-button--outline { background: transparent; border: 2px solid var(--c-white); }
/* Keep each variant's colour on hover/focus: Hello's reset paints a focused <button> #c36 (red). */
.sm-catalogue-button:is(:hover, :focus) { background: var(--color-brand); }
.sm-catalogue-button--purple:is(:hover, :focus) { background: var(--color-accent); }
.sm-catalogue-button--green:is(:hover, :focus) { background: var(--color-success); }
.sm-catalogue-button--outline:is(:hover, :focus) { background: transparent; }
.sm-catalogue-question { display: flex; align-items: center; justify-content: center; padding: var(--space-6); border-radius: var(--radius-pill); background: var(--color-brand); flex: 0 0 32px; height: 32px; }
.sm-catalogue-description { display: flex; align-items: start; gap: var(--space-16); }
.sm-catalogue-description > div { flex: 1; min-width: 0; }
.sm-catalogue-description h2 { margin-bottom: var(--space-12); color: var(--color-heading); }
.sm-catalogue-facts { display: flex; flex-direction: column; gap: var(--space-24); margin: 0; }
.sm-catalogue-facts > div { display: flex; align-items: start; gap: var(--space-16); min-width: 0; }
.sm-catalogue-facts dd { margin: 0; }
.sm-catalogue-facts dd a { display: block; }
.sm-offer-hero { display: grid; grid-template-columns: minmax(0,2.03fr) minmax(0,1fr); gap: var(--space-12); }
.sm-offer-information { display: grid; gap: var(--space-12); margin-top: var(--space-48); }
.sm-offer-information > p { margin: 0; }
.sm-offer-intro { grid-column: 1; grid-row: 1; }
.sm-offer-intro > * + *,.sm-service-intro > * + * { margin-top: var(--space-16); }
.sm-offer-help { grid-column: 1; grid-row: 2; }
.sm-offer-help .sm-catalogue-button { margin-top: var(--space-24); }
.sm-offer-availability .sm-catalogue-facts { gap: var(--space-32); }
.sm-offer-availability { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; }
.sm-offer-actions { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-24); margin-top: var(--space-24); border-top: 1px solid var(--color-border); }
.sm-offer-catalogue { margin-top: var(--space-48); }
.sm-offer-catalogue .sm-search-layout { display: block; margin-top: var(--space-32); }
.sm-offer-catalogue .sm-search-results-heading { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; padding: 0; }
.sm-offer-catalogue .sm-search-mobile-actions { grid-template-columns: 1fr; }
.sm-offer-specialists,.sm-offer-contact { margin-top: var(--space-48); }
.sm-offer-specialists > h2,.sm-offer-contact > h2 { margin: 0 0 var(--space-24); color: var(--color-heading); }
.sm-catalogue-doctors,.sm-offer-contact-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-12); }
.sm-catalogue-doctor { display: flex; align-items: end; justify-content: space-between; padding: 0; overflow: hidden; }
.sm-catalogue-doctor-copy { flex: 1; min-width: 0; padding: var(--space-24); }
.sm-catalogue-doctor-copy h3 { margin-bottom: var(--space-24); }
.sm-catalogue-doctor-fact { display: flex; align-items: start; gap: var(--space-8); margin-bottom: var(--space-16); }
.sm-catalogue-doctor-fact > div { min-width: 0; }
.sm-catalogue-doctor-fact :is(a,span) { display: block; }
.sm-design-system .sm-catalogue-doctor .sm-catalogue-doctor-fact a { color: var(--color-heading); }
.sm-catalogue-doctor figure { flex: 0 0 160px; margin: 0; }
.sm-catalogue-doctor figure img { display: block; width: 160px; height: 240px; object-fit: cover; object-position: top; border-radius: var(--radius-sm); }
.sm-offer-contact-list h3 { margin-bottom: var(--space-16); }
.sm-offer-contact > p { margin: 0 0 var(--space-16); }
.sm-service-layout { display: grid; grid-template-columns: minmax(0,2.03fr) minmax(0,1fr); grid-template-rows: auto auto 1fr; gap: var(--space-12); align-items: start; }
.sm-service-intro { grid-column: 1; grid-row: 1; }
.sm-service-facts { grid-column: 1; grid-row: 2; }
.sm-service-facts .sm-catalogue-facts { display: grid; grid-template-columns: auto auto auto auto; gap: var(--space-16); }
.sm-service-facts .sm-catalogue-facts > div { align-items: center; gap: var(--space-12); }
.sm-service-facts .sm-catalogue-facts > div + div { padding-left: var(--space-16); border-left: 1px solid var(--color-border); }
.sm-service-descriptions { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; gap: var(--space-12); }
.sm-service-booking-track { grid-column: 2; grid-row: 1 / 4; align-self: stretch; min-width: 0; }
.sm-service-booking { background: var(--c-copy); color: var(--c-white); display: flex; flex-direction: column; gap: var(--space-32); }
@media (min-width: 768px) {
    /* Avoid a non-scrolling body container created by legacy overflow-x:hidden. */
    body.single-sm_usluga { overflow-x: clip; }
    .sm-service-booking {
        position: sticky;
        /* Panel taller than the viewport sticks by its bottom edge (service.js sets the offset). */
        top: var(--sm-service-booking-top, calc(var(--sm-site-header-height, 118px) + var(--space-32)));
        align-self: start;
    }
}
.sm-service-booking header,.sm-service-selection { text-align: center; }
.sm-service-booking h2 { color: var(--c-white); }
.sm-service-booking header > p { margin-top: var(--space-4); }
.sm-service-options fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.sm-service-option { position: relative; display: block; background: var(--c-copy-25); border: 1px solid var(--c-white); border-radius: var(--radius-sm); padding: var(--space-16) var(--space-12); cursor: pointer; }
.sm-service-option:hover { border-color: var(--c-bg-navy); }
.sm-service-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sm-service-option:has(input:focus-visible) { outline: 3px solid var(--c-blue-light); outline-offset: 3px; }
.sm-service-option.is-selected,.sm-service-option:has(input:checked) { background: var(--c-bg-navy); border-color: var(--c-bg-navy); color: var(--c-copy); }
.sm-service-option-body { display: flex; justify-content: space-between; align-items: start; gap: var(--space-12); }
.sm-service-option-copy { display: flex; flex-direction: column; min-width: 0; }
.sm-service-option .sm-search-badges { margin-top: var(--space-16); }
.sm-service-option-price { text-align: right; flex: 0 0 auto; max-width: 45%; }
.sm-service-selection { display: flex; flex-direction: column; gap: var(--space-24); border-top: 1px solid var(--c-white-25); padding-top: var(--space-32); }
.sm-service-selection [hidden] { display: none; }
.sm-service-selection h3 { color: var(--c-white); margin-bottom: var(--space-4); }
.sm-service-selection section > p a { color: inherit; text-decoration: none; }
.sm-service-selection section > p a:hover { text-decoration: underline; }
.sm-service-selection .sm-service-external-notice a { font: inherit; color: inherit; text-decoration: underline; }
.sm-service-selection section > p + p { margin-top: var(--space-12); }
.sm-service-booking-actions { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-32); }
.sm-service-booking > .sm-service-booking-actions { margin-top: 0; }
.sm-service-selection .sm-service-external-notice { margin-top: var(--space-32); overflow-wrap: anywhere; }
.sm-service-unavailable { display: flex; flex-direction: column; gap: var(--space-16); }
.sm-service-selection-submit { margin-top: var(--space-16); width: 100%; }
.sm-service-back { display: flex; flex-direction: column; gap: var(--space-12); }
.sm-offer :is(#cennik,#specjalisci,#kontakt-poradni) { scroll-margin-top: calc(var(--sm-header-offset) + var(--space-24)); }
@media (max-width: 1199px) {
    .sm-service-facts .sm-catalogue-facts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-24); }
    .sm-service-facts .sm-catalogue-facts > div + div { padding-left: 0; border-left: 0; }
    .sm-catalogue-doctor figure { flex-basis: 110px; }
    .sm-catalogue-doctor figure img { width: 110px; height: 200px; }
}
@media (max-width: 767px) {
    .sm-catalogue-card { padding: var(--space-24) var(--space-16); }
    .sm-offer-hero,.sm-service-layout { display: flex; flex-direction: column; align-items: stretch; }
    .sm-offer-intro,.sm-service-intro { order: 1; }
    .sm-offer-help,.sm-service-facts { order: 2; }
    .sm-offer-availability,.sm-service-booking-track { order: 3; }
    .sm-service-descriptions { order: 4; }
    .sm-offer-catalogue { margin-top: var(--space-32); }
    .sm-offer-catalogue .sm-search-layout { margin-top: var(--space-12); }
    .sm-offer-specialists,.sm-offer-contact { margin-top: var(--space-32); }
    .sm-catalogue-doctors,.sm-offer-contact-list { grid-template-columns: 1fr; }
    .sm-catalogue-doctor { padding: 0; }
    .sm-catalogue-doctor-copy { padding: var(--space-16); }
    .sm-catalogue-doctor-copy .sm-catalogue-button { padding: var(--space-12) var(--space-8); }
    .sm-service-facts .sm-catalogue-facts { display: flex; gap: var(--space-32); }
    .sm-service-booking { padding: var(--space-24) var(--space-16); }
    .sm-service-option-price { max-width: 40%; }
    .sm-catalogue-description { gap: var(--space-16); }
}
@media (prefers-reduced-motion: reduce) { .sm-search-loading .sm-search-results { transition: none; } }