/* Yogarazuma Booking UI (cleaned, deduplicated) */
[x-cloak] { display: none !important; }

/* Палитра, размеры и отступы наследуются от темы (theme.json presets).
 * Если препресет не определён — используется fallback близкий к теме Koji.
 * Один и тот же набор токенов — для всех 4-х shortcode-страниц плагина. */
.yr-booking-form,
.yr-cabinet,
.yr-schedule,
.yr-auth-landing,
.yr-cert-checkout {
    --yr-text:    var(--wp--preset--color--darkest-gray, #4B555F);
    --yr-muted:   var(--wp--preset--color--darker-gray, #69737D);
    --yr-border:  var(--wp--preset--color--light-gray, #DCDFE2);
    --yr-bg-soft: var(--wp--preset--color--lightest-gray, #E6E9EC);
    --yr-btn:     var(--wp--preset--color--black, #000);
    --yr-white:   var(--wp--preset--color--white, #fff);

    --yr-fs-sm:   var(--wp--preset--font-size--small, 13px);
    --yr-fs-base: inherit; /* body — Roboto 18px (тема Koji) */
    --yr-fs-md:   var(--wp--preset--font-size--medium, 20px);
    --yr-fs-lg:   var(--wp--preset--font-size--larger, 32px);

    --yr-sp-1: var(--wp--preset--spacing--20, 0.44rem);
    --yr-sp-2: var(--wp--preset--spacing--30, 0.67rem);
    --yr-sp-3: var(--wp--preset--spacing--40, 1rem);
    --yr-sp-4: var(--wp--preset--spacing--50, 1.5rem);
    --yr-sp-5: var(--wp--preset--spacing--60, 2.25rem);

    /* Радиусы скругления */
    --yr-btn-radius: 0.4rem;
    --yr-btn-padding: 10px 16px;
    --yr-card-radius: 0.4rem;
    --yr-input-padding: 10px;
    --yr-accent: #32373c;
    --yr-name-color: #232D37;

    max-width: var(--wp--style--global--content-size, 800px);
    margin: 0 auto;
    padding: 0 0 var(--yr-sp-3);
    color: var(--yr-text);
    font-family: inherit;
    line-height: inherit;
    background: transparent;
}

.yr-step {
    --yr-step-pad: var(--yr-sp-3);
    background: var(--yr-white);
    border-radius: var(--yr-card-radius);
    padding: 0 var(--yr-step-pad) var(--yr-sp-3);
    margin-bottom: var(--yr-sp-2);
}

/* Вертикальные отступы между секциями внутри активного шага — без линии. */
.yr-step > * + *:not(.yr-step-header) {
    padding-top: var(--yr-sp-3);
    margin-top: var(--yr-sp-3);
}

/* Заголовок шага: фон #E6E9EC, во всю ширину .yr-step. */
.yr-step-header {
    background: var(--yr-bg-soft);
    margin: 0 0 18px;
    padding: 20px;
    text-align: center;
    position: relative;
    border-radius: var(--yr-card-radius);
}

/* Заголовок верхней «серой плашки» шага — единый размер для всех страниц.
 * Это только заголовок-плашка наверху страницы (.yr-step-header), где
 * фон #E6E9EC. Внутренние подзаголовки (.yr-section-title и т.п.) —
 * с обычным размером ниже. */
.yr-booking-form .yr-step-header .yr-step-title,
.yr-cabinet .yr-step-header .yr-step-title,
.yr-cert-checkout .yr-step-header .yr-step-title,
.yr-step-header h2 {
    margin: 0;
    padding: 0;
    font-size: 26px !important;
    line-height: 24px;
    font-weight: 300;
}

/* Внутренние подзаголовки (внутри карточек/секций) — стандартный размер
 * темы. Сбрасываем только агрессивные padding/margin от .hentry h2. */
.yr-booking-form .yr-section-title,
.yr-booking-form .yr-step h2:not(.yr-step-title),
.yr-booking-form .yr-step h3,
.yr-cabinet .yr-section-title,
.yr-cabinet h2.yr-section-title,
.yr-cabinet h3.yr-section-title,
.yr-cabinet h4.yr-notif-title,
.yr-cabinet h4.yr-referral-title,
.yr-auth-landing h2,
.yr-cert-checkout h2:not(.yr-step-title),
.yr-cert-checkout h3 {
    margin: 0;
    padding: 0;
    font-size: var(--yr-fs-md) !important;
    font-weight: inherit;
    line-height: 1.2;
}

.yr-booking-form .yr-section-title,
.yr-cabinet .yr-section-title,
.yr-cabinet .yr-notif-title,
.yr-cabinet .yr-referral-title {
    margin: 30px 0 1px;
}

/* Тап-зона расширена — кнопка покрывает всю левую часть шапки до 44px высоты */
.yr-back {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 44px;
    padding: 0 12px 0 20px;
    border: none;
    background: none;
    color: inherit;
    margin: 0;
    font: inherit;
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
}

.yr-back-placeholder {
    visibility: hidden;
    pointer-events: none;
}

.yr-step-services .yr-step-header {
    margin-bottom: var(--yr-sp-4);
}

.yr-cert-link-row {
  margin-top: var(--yr-sp-4);
  text-align: center;
}

.yr-booking-form .yr-cert-link-title {
  margin: 0 0 var(--yr-sp-2);
  padding: 0;
  font-size: var(--yr-fs-md) !important;
  font-weight: 400;
  font-family: var(--wp--preset--font-family--georgia-local);
  font-style: italic;
}

.yr-cert-link-btn {
  display: inline-block;
  text-align: center;
  margin: 20px;
  padding-top: 20px;
}

/* Step 0: services */
.yr-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--yr-sp-2);
}

.yr-subscriptions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--yr-sp-2);
}

.yr-sub-choice-card {
    display: flex;
    flex-direction: column;
    gap: var(--yr-sp-1);
    align-items: flex-start;
    width: 100%;
    padding: var(--yr-sp-2) var(--yr-sp-3);
    border: 1px solid var(--yr-border);
    border-radius: var(--yr-card-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.yr-sub-choice-card:hover {
    border-color: var(--yr-accent);
}

.yr-sub-choice-name {
    color: var(--yr-name-color);
    font-weight: 400;
}

.yr-sub-choice-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--yr-sp-2);
    color: var(--yr-text-muted, #666);
    font-size: 0.95em;
}

.yr-sub-choice-price {
    color: var(--yr-name-color);
    font-weight: 500;
}

.yr-sub-choice-desc {
    color: var(--yr-text-muted, #666);
    font-size: 0.9em;
    margin-top: var(--yr-sp-1);
}

.yr-service-card {
    display: flex;
    flex-direction: column;
    gap: var(--yr-sp-1);
    align-items: flex-start;
    width: 100%;
    padding: var(--yr-sp-2) var(--yr-sp-3);
    border: 1px solid var(--yr-border);
    border-radius: var(--yr-card-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.yr-service-card.yr-active {
    border-color: var(--yr-accent);
    background: transparent;
}

.yr-service-name {
    color: var(--yr-name-color);
    font-size: inherit;
    font-weight: 400;
}

.yr-service-meta {
    display: flex;
    gap: var(--yr-sp-3);
    font-size: 12pt;
    font-weight: 500;
    color: var(--yr-muted);
}

/* Step 1: calendar */
.yr-calendar-card {
    border: 1px solid var(--yr-border);
    border-radius: var(--yr-card-radius);
    padding: var(--yr-sp-2);
    margin-bottom: var(--yr-sp-2);
    background: var(--yr-white);
}

.yr-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--yr-sp-2);
}

.yr-calendar-head strong {
    font-size: var(--yr-fs-md);
    font-weight: inherit;
    text-transform: capitalize;
}

.yr-calendar-nav {
    display: flex;
    align-items: center;
    gap: var(--yr-sp-1);
}

.yr-calendar-nav button {
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--yr-border);
    border-radius: var(--yr-btn-radius);
    background: var(--yr-white);
    color: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.yr-calendar-nav button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.yr-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--yr-sp-1);
    margin-bottom: var(--yr-sp-1);
    text-align: center;
    font-size: var(--yr-fs-sm);
    color: var(--yr-muted);
    text-transform: lowercase;
}

.yr-calendar-weekdays > span {
    min-width: 0;
    overflow: hidden;
}

.yr-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--yr-sp-1);
}

.yr-calendar-card .yr-cal-day,
.yr-calendar-card .yr-cal-empty {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    min-width: 0;
}

.yr-calendar-card .yr-cal-day {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    writing-mode: horizontal-tb;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.yr-calendar-card .yr-cal-day:hover:not(:disabled) {
    background: var(--yr-bg-soft);
}

/* Сегодняшняя дата — подсветка тем же светло-серым, что и hover */
.yr-calendar-card .yr-cal-day.yr-cal-today:not(.yr-active) {
    background: var(--yr-bg-soft);
}

/* День с событием в [yr_events] — та же подсветка, что у today */
.yr-calendar-card .yr-cal-day.yr-cal-has-event:not(.yr-active) {
    background: var(--yr-bg-soft);
}

.yr-calendar-card .yr-cal-day.yr-active,
.yr-calendar-card .yr-cal-day.yr-active:hover {
    background: var(--yr-accent);
    color: var(--yr-white);
    border-color: var(--yr-accent);
    font-weight: 500;
}

.yr-calendar-card .yr-cal-day.yr-disabled,
.yr-calendar-card .yr-cal-day:disabled {
    background: transparent;
    color: var(--wp--preset--color--gray, #9BA5AF);
    border-color: transparent;
    cursor: not-allowed;
    opacity: 1;
}

.yr-calendar-card .yr-cal-day.yr-cal-adjacent {
    color: var(--wp--preset--color--cyan-bluish-gray, #abb8c3);
}

.yr-calendar-card .yr-cal-day:focus {
    outline: none;
    box-shadow: none;
}

.yr-calendar-card .yr-cal-day:focus-visible {
    outline: 2px solid var(--yr-btn);
    outline-offset: 2px;
}

.yr-cal-empty {
    display: block;
}

/* Slots */
.yr-slots { margin-top: var(--yr-sp-1); }

.yr-slot-group {
    margin-bottom: var(--yr-sp-3);
}

.yr-slot-group-label {
    margin: 0 0 var(--yr-sp-1);
    padding: 10px;
    font-family: var(--wp--preset--font-family--georgia-local);
    font-size: var(--yr-fs-md);
    font-weight: 600;
    font-style: italic;
    color: inherit;
}

.yr-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: var(--yr-sp-1);
}

.yr-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: none;
    border-radius: 0.4rem;
    background: var(--yr-bg-soft);
    color: inherit;
    font: inherit;
    font-weight: 400;
    text-align: center;
    cursor: pointer;
    padding: 10px;
}

.yr-slot.yr-active {
    background: var(--yr-accent);
    color: var(--yr-white);
    font-weight: 500;
}

.yr-spots-left {
    margin-top: 2px;
    font-size: var(--yr-fs-sm);
    color: var(--wp--preset--color--vivid-red, #cf2e2e);
}

.yr-loading,
.yr-empty {
    padding: var(--yr-sp-3);
    text-align: center;
    color: var(--yr-muted);
}

/* Кнопка «Далее» — sticky к нижнему краю экрана, с белым фоном и тенью
 * сверху, чтобы под ней не просвечивал текст. */
.yr-sticky-action {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    margin: var(--yr-sp-3) calc(-1 * var(--yr-step-pad)) calc(-1 * var(--yr-sp-3));
    padding: 12px var(--yr-step-pad);
    background: var(--yr-white);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    z-index: 10;
}

/* Step 2: details + form */
.yr-details-card {
    border: 1px solid var(--yr-border);
    border-radius: var(--yr-card-radius);
    padding: var(--yr-sp-2) var(--yr-sp-3);
    margin-bottom: var(--yr-sp-3);
}

.yr-details-row {
    display: flex;
    justify-content: space-between;
    gap: var(--yr-sp-2);
    padding: var(--yr-sp-1) 0;
    border-bottom: 1px solid var(--yr-border);
}

.yr-details-row:last-child { border-bottom: none; }

.yr-details-label {
    color: var(--yr-muted);
    font-family: var(--wp--preset--font-family--roboto-condensed);
    font-size: 11pt;
    font-weight: 400;
}

.yr-details-value {
    max-width: 70%;
    color: inherit;
    font-family: var(--wp--preset--font-family--roboto-condensed);
    font-size: inherit;
    font-weight: 400;
    text-align: right;
    line-height: 1.28;
    /* "с 11:00 до 13:00" не должно ломаться по середине */
    overflow-wrap: break-word;
    word-break: normal;
}

.yr-details-time-range {
    white-space: nowrap;
}

.yr-details-total .yr-details-label { color: var(--yr-muted); }
.yr-details-total .yr-details-value { color: inherit; }

.yr-client-form {
    display: flex;
    flex-direction: column;
    gap: var(--yr-sp-3);
}

.yr-section-title {
    margin: 30px 0 1px;
    font-size: var(--yr-fs-md);
    font-weight: inherit;
}

.yr-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.yr-field {
    display: flex;
    flex-direction: column;
    gap: var(--yr-sp-1);
}

.yr-field label,
.yr-field-label {
    font-size: 11pt;
    color: var(--yr-muted);
    font-weight: 400;
    padding: 10px 0 0 5px;
}

.yr-field input[type="text"],
.yr-field input[type="tel"],
.yr-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--yr-border);
    border-radius: 0.4rem;
    background: var(--yr-white);
    color: inherit;
    font: inherit;
}

.yr-field textarea { min-height: 88px; resize: vertical; }

.yr-gender-field { margin: var(--yr-sp-3) 0; }

/* Жёсткий ресет — тема может ставить label/p с разными отступами */
.yr-booking-form .yr-radio-group,
.yr-cert-checkout .yr-radio-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--yr-sp-3);
    line-height: 1;
    margin: 0;
    padding: 0;
}

.yr-booking-form .yr-radio-group label,
.yr-cert-checkout .yr-radio-group label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font: inherit;
    color: inherit;
    vertical-align: middle;
}

.yr-booking-form .yr-radio-group input[type="radio"],
.yr-cert-checkout .yr-radio-group input[type="radio"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.yr-express-hint,
.description.yr-express-hint {
    font-size: 11pt;
    color: var(--yr-muted);
}

.yr-consent-block {
    border: 1px solid var(--yr-border);
    border-radius: var(--yr-card-radius);
    padding: var(--yr-sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--yr-sp-2);
}

.yr-consent-title,
.yr-consent-row,
.yr-consent-row a {
    margin: 0;
    font-family: var(--wp--preset--font-family--roboto-condensed);
    font-size: 10pt;
    font-weight: 400;
    color: inherit;
    line-height: 1.35;
}

.yr-consent-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: var(--yr-sp-2);
}

.yr-consent-row input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
}

.yr-consent-row a {
    text-decoration: underline;
}

/* Подсветка строки «Списать с абонемента» — выделяем абонемент-бенефит
   нейтрально-серым фоном, чтобы клиент видел его как отдельный блок.
   font-family принудительно гасим до системного: иначе тема (Astra и др.)
   подменяет на Roboto Mono из общего правила для .yr-step / .yr-field. */
.yr-field-sub-discount {
    background: #e6e9ec;
    border-radius: 0.4rem;
    padding: 10px 0 10px 5px;
    font-family: inherit;
    font-size: inherit;
}
.yr-field-sub-discount .yr-consent-row {
    align-items: center;
    /* Перебиваем унаследованное `.yr-field label { padding: 10px 0 0 5px }`
       точным значением, подобранным визуально. */
    padding: 0px 0px 1px 7px;
    font-family: inherit;
    font-size: inherit;
}
.yr-field-sub-discount .yr-consent-row span {
    font-family: inherit;
    font-size: inherit;
}

.yr-consent-note {
    margin: var(--yr-sp-1) auto 0;
    max-width: 92%;
    text-align: center;
    color: var(--yr-muted);
    font-size: 11pt;
    line-height: 1.35;
}

/* Primary buttons */
.yr-next-btn,
.yr-cabinet-link {
    display: block;
    width: 100%;
    border: none;
    border-radius: 0.4rem;
    background: var(--yr-accent);
    color: var(--yr-white);
    font: inherit;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    padding: var(--yr-btn-padding);
    box-sizing: border-box;
}

.yr-next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Step 3/4 */
.yr-discount-options { display: flex; flex-direction: column; gap: var(--yr-sp-2); }

.yr-radio-card {
    display: flex;
    flex-direction: column;
    gap: var(--yr-sp-1);
    padding: var(--yr-sp-2) var(--yr-sp-3);
    border: 1px solid var(--yr-border);
    border-radius: var(--yr-card-radius);
    background: var(--yr-white);
}

.yr-radio-card:has(input:checked) {
    border-color: var(--yr-accent);
}

.yr-promo-row {
    display: flex;
    flex-direction: column;
    gap: var(--yr-sp-1);
}

.yr-promo-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--yr-border);
    border-radius: 0.4rem;
    font: inherit;
}

.yr-promo-ok  { color: var(--wp--preset--color--vivid-green-cyan, #00a371); font-size: var(--yr-fs-sm); }
.yr-promo-err { color: var(--wp--preset--color--vivid-red, #cf2e2e); font-size: var(--yr-fs-sm); }

.yr-bonus-picker {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.yr-bonus-picker-label {
    font-size: var(--yr-fs-sm);
    color: var(--yr-muted);
}
.yr-bonus-picker-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.yr-bonus-chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 6px 10px;
    border: 1px solid var(--yr-border);
    border-left-width: 4px;
    border-radius: var(--yr-btn-radius);
    background: var(--yr-white);
    color: var(--yr-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    text-align: left;
}
.yr-bonus-chip-scope {
    flex-basis: 100%;
    font-size: 11px;
    color: var(--yr-muted);
    font-style: italic;
    line-height: 1.2;
}
.yr-bonus-chip:hover  { background: var(--yr-bg-soft); }
.yr-bonus-chip.is-active {
    border-color: var(--wp--preset--color--vivid-green-cyan, #00a371);
    background: var(--yr-bg-soft);
}
.yr-bonus-chip-code {
    font-family: monospace;
    font-weight: 500;
    letter-spacing: 1px;
}
.yr-bonus-chip-badge {
    padding: 1px 6px;
    background: var(--yr-bg-soft);
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}
.yr-bonus-chip-amount {
    font-family: var(--wp--preset--font-family--roboto-condensed);
    font-weight: 500;
    white-space: nowrap;
}
/* Цвета по типу — те же что в кабинете «Мои бонусы». */
.yr-bonus-chip-promo       { border-left-color: #fadbd8; }
.yr-bonus-chip-promo       .yr-bonus-chip-badge { background: #fadbd8; color: #92100d; }
.yr-bonus-chip-promo       .yr-bonus-chip-amount { color: #92100d; }
.yr-bonus-chip-credit      { border-left-color: #e4fae6; }
.yr-bonus-chip-credit      .yr-bonus-chip-badge { background: #e4fae6; color: #0d9262; }
.yr-bonus-chip-credit      .yr-bonus-chip-amount { color: #0d9262; }
.yr-bonus-chip-referral    { border-left-color: #ede4ff; }
.yr-bonus-chip-referral    .yr-bonus-chip-badge { background: #ede4ff; color: #6b46c1; }
.yr-bonus-chip-certificate { border-left-color: #fff4d6; }
.yr-bonus-chip-certificate .yr-bonus-chip-badge { background: #fff4d6; color: #b7791f; }

.yr-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--yr-sp-3);
    padding: 10px;
    border-top: none;
}

.yr-total-label { color: var(--yr-muted); font-weight: 500; }
.yr-total-price { font-size: var(--yr-fs-md); font-weight: 500; color: inherit; }

.yr-payment-note,
.yr-success-note {
    color: var(--yr-muted);
    font-size: var(--yr-fs-sm);
    text-align: center;
}

.yr-success {
    text-align: center;
    padding: var(--yr-sp-3) var(--yr-sp-2);
}

.yr-success-icon {
    font-size: var(--yr-fs-lg);
    margin-bottom: var(--yr-sp-1);
}

/* Cabinet/cert-checkout — учёт safe-area-inset-bottom (Telegram WebApp,
 * iOS home indicator) чтобы контент не уезжал под нижнюю панель. */
.yr-cabinet,
.yr-cert-checkout {
    padding-bottom: max(var(--yr-sp-3), env(safe-area-inset-bottom));
}

/* Notifications */
.yr-error-toast {
    position: fixed;
    left: 50%;
    bottom: max(var(--yr-sp-3), calc(env(safe-area-inset-bottom) + var(--yr-sp-3)));
    transform: translateX(-50%);
    background: var(--wp--preset--color--vivid-red, #cf2e2e);
    color: var(--yr-white);
    padding: var(--yr-sp-2) calc(var(--yr-sp-2) + 24px) var(--yr-sp-2) var(--yr-sp-2);
    border-radius: var(--yr-card-radius);
    max-width: 380px;
    width: calc(100% - 24px);
    text-align: center;
    font: inherit;
    z-index: 9999;
}
.yr-error-toast-text {
    display: block;
    padding-right: 4px;
}
.yr-error-toast-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}
.yr-error-toast-close:hover { opacity: .8; }

.yr-lock-timer {
    margin-top: var(--yr-sp-2);
    padding: var(--yr-sp-1) var(--yr-sp-2);
    border: 1px solid var(--wp--preset--color--luminous-vivid-amber, #fcb900);
    border-radius: var(--yr-card-radius);
    background: var(--wp--preset--color--lightest-gray, #fff7e8);
    color: inherit;
    text-align: center;
    font-size: var(--yr-fs-sm);
}

/* ── Auth landing ───────────────────────────────────────────────────────── */
.yr-auth-landing {
    margin: var(--yr-sp-5) auto;
    padding: var(--yr-sp-4);
    text-align: center;
}

.yr-auth-landing h2 {
    margin: 0 0 var(--yr-sp-2);
    text-align: center;
}

.yr-auth-landing p {
    margin: 0 0 var(--yr-sp-3);
    color: var(--yr-text);
}

.yr-auth-error {
    color: var(--wp--preset--color--vivid-red, #cf2e2e);
    background: var(--yr-bg-soft);
    border-radius: var(--yr-card-radius);
    padding: var(--yr-sp-3);
}

.yr-auth-prompt   { padding: var(--yr-sp-3); }
.yr-auth-success  { padding: var(--yr-sp-4); background: var(--yr-bg-soft); border-radius: var(--yr-card-radius); }
.yr-auth-loading  { color: var(--yr-muted); }

/* ── Cert checkout — экран «сертификат готов» (после оплаты) ────────── */
.yr-cert-issued {
    text-align: center;
    padding: var(--yr-sp-3);
}
.yr-cert-issued-amount {
    color: var(--yr-muted);
    margin: 0 0 var(--yr-sp-3);
}
.yr-cert-issued-code-wrap {
    background: #faf8f5;
    border: 1px solid #e8e0d4;
    border-radius: 8px;
    padding: 20px;
    margin: 0 auto var(--yr-sp-3);
    max-width: 400px;
}
.yr-cert-issued-label {
    color: #9C7B4A;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 8px;
}
.yr-cert-issued-code {
    font-family: var(--wp--preset--font-family--roboto-mono);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: .08em;
    color: #2C2420;
    user-select: all;
}
.yr-cert-issued-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto var(--yr-sp-3);
}
.yr-cert-issued-actions .yr-next-btn { width: 100%; box-sizing: border-box; }
.yr-cert-issued-actions .yr-next-btn-ghost {
    background: #fff;
    color: #32373c;
    border: 2px solid #32373c;
    text-decoration: none;
    text-align: center;
}
.yr-cert-issued-preview {
    max-width: 400px;
    margin: 0 auto;
    text-align: left;
}
.yr-cert-issued-preview summary {
    cursor: pointer;
    color: var(--yr-muted);
    font-size: var(--yr-fs-sm);
}
.yr-cert-share-text {
    background: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: var(--yr-fs-sm);
    margin: 8px 0 0;
}

/* ── Cert checkout (page-specific) ─────────────────────────────────────── */
.yr-cert-checkout .yr-cert-hint {
    margin: var(--yr-sp-2) 0 0;
    color: var(--yr-muted);
    font-size: 11pt;
    text-align: center;
}

/* Подсветка невалидных полей формы (имя/телефон). Используется JS
   при submit и при «исправлении на лету» (отметка снимается как только
   значение становится валидным). */
.yr-cert-checkout .yr-input-error,
.yr-cert-checkout input[aria-invalid="true"] {
    border-color: var(--wp--preset--color--vivid-red, #cf2e2e) !important;
    box-shadow: 0 0 0 1px var(--wp--preset--color--vivid-red, #cf2e2e);
}

.yr-cert-checkout select,
.yr-cert-checkout input[type="text"],
.yr-cert-checkout input[type="tel"],
.yr-cert-checkout textarea {
    /* !important — некоторые темы (Twenty Twenty-Three, ряд WP-тем) ставят
     * select { width: auto } через .entry-content. Без него select-поле
     * (Тип / Услуга / Абонемент / Пол) рендерится узким, не на всю ширину
     * как остальные input'ы. */
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--yr-input-padding);
    border: 1px solid var(--yr-border);
    border-radius: var(--yr-card-radius);
    background: var(--yr-white);
    color: inherit;
    font: inherit;
    min-height: 44px;
}

.yr-cert-checkout textarea { min-height: 88px; resize: vertical; }

.yr-cert-checkout .yr-field {
    margin-bottom: var(--yr-sp-3);
}

.yr-ajax-result {
    margin-top: var(--yr-sp-2);
    color: var(--yr-muted);
    font-size: var(--yr-fs-sm);
    text-align: center;
}

/* Mobile: full width, no frame — для всех shortcode-страниц */
@media (max-width: 768px) {
    .yr-booking-form,
    .yr-cabinet,
    .yr-schedule,
    .yr-auth-landing,
    .yr-cert-checkout {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .yr-step {
        --yr-step-pad: 0px;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
    }

    .yr-back {
        left: 0;
    }
}

@media (max-width: 480px) {
    .yr-slots-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ===== Bot-pairing auth UI =====
 * «Войти через Telegram» и «Открыть @bot» используют классы плагина
 * .yr-next-btn / .yr-cabinet-link — наследуют единую палитру с
 * остальными primary-кнопками формы. Здесь — только структура и
 * индикаторы.
 */
/* Блок авторизации: глобальное правило
 * `.yr-step > * + *:not(.yr-step-header)` ставит border-top +
 * padding-top + margin-top на ВСЕХ прямых детей шага. Это рисует
 * нежелательную горизонтальную полосу над «Чтобы записаться…».
 * Здесь явно нейтрализуем этот эффект для блока авторизации. */
.yr-step > .yr-tg-auth,
.yr-tg-auth {
    display: block;
    margin-top: 20px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.yr-tg-auth .yr-tg-prompt {
    margin: 0;
}

/* Кнопка «Войти через Telegram»: отступ 10px от текста-приглашения. */
.yr-tg-auth .yr-next-btn {
    margin-top: 10px;
}

/* Подсказка под кнопкой: тот же кегль и цвет что у промпта,
 * отступ 10px от кнопки. */
.yr-tg-hint {
    margin: 10px 0 0;
    text-align: center;
    font-size: inherit;
    color: inherit;
}

.yr-tg-pairing {
    display: flex;
    flex-direction: column;
    gap: var(--yr-sp-2);
}

.yr-tg-step,
.yr-tg-waiting {
    margin: 0;
}

/* Кликабельный номер, на который нужно позвонить для верификации.
   Без стилей тема отрисовывает как обычную подчёркнутую ссылку — тут
   явно оформляем крупной кнопкой с иконкой телефона. */
.yr-tg-pairing .yr-login-dial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border: 1px solid var(--yr-accent);
    border-radius: var(--yr-btn-radius);
    background: var(--yr-white);
    color: var(--yr-accent);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    align-self: flex-start;
}
.yr-tg-pairing .yr-login-dial:hover {
    background: var(--yr-bg-soft);
}
.yr-tg-pairing .yr-login-dial::before {
    content: '📞';
    font-size: 20px;
}

.yr-tg-pairing .yr-login-tap-hint {
    margin: 0;
    color: var(--yr-muted);
    font-size: var(--yr-fs-sm);
}

.yr-tg-pairing .yr-login-expires {
    margin: 0;
    color: var(--yr-muted);
    font-size: var(--yr-fs-sm);
    font-variant-numeric: tabular-nums;
}

.yr-tg-waiting {
    color: var(--yr-muted);
    font: inherit;
}

.yr-tg-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--yr-border);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: yr-tg-spin 0.8s linear infinite;
    margin-right: var(--yr-sp-1);
    vertical-align: middle;
}

@keyframes yr-tg-spin {
    to { transform: rotate(360deg); }
}

/* «Начать заново» — текстовая ссылка, не кнопка */
.yr-tg-cancel {
    background: none;
    border: none;
    color: var(--yr-muted);
    text-decoration: underline;
    cursor: pointer;
    padding: var(--yr-sp-1) 0;
    font: inherit;
    align-self: center;
}

.yr-tg-cancel:hover {
    color: var(--yr-text);
}

.yr-tg-err .yr-status-err {
    color: var(--wp--preset--color--vivid-red, #cf2e2e);
    margin: 0 0 var(--yr-sp-2);
}

/* Identity-row на шаге «Ваши данные» — те же классы что в /cabinet/.
 * Аватар слева, имя+фамилия в две колонки справа (desktop).
 * На мобиле — стек: аватар по центру → имя → фамилия. */
.yr-profile-identity {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: var(--yr-sp-3, 12px);
}
.yr-profile-avatar {
    width: 64px;
    height: 64px;
    object-fit: cover;
    flex: 0 0 auto;
}
.yr-profile-names {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-width: 0;
}
@media (max-width: 480px) {
    .yr-profile-identity { flex-direction: column; align-items: center; }
    .yr-profile-names { grid-template-columns: 1fr; width: 100%; }
    /* На мобильном аватар Telegram в форме записи бесполезен (поле имя/фамилия
     * уже подписано) и съедает первый экран. Скрываем — то же что в
     * cabinet.css, единообразно. */
    .yr-profile-avatar { display: none; }
}

/* Заголовок «Ваши данные» — отступ сверху. !important потому что
 * выше в файле .yr-booking-form .yr-section-title получает padding: 0
 * (общий сброс для всех заголовков формы). */
.yr-booking-form .yr-section-title {
    padding-top: 20px !important;
}

/* textarea «Комментарий» — жёстко 4 строки.
 * Глобальный .yr-field textarea имеет min-height: 88px и resize: vertical,
 * тема/Spectra/др. могут перебивать. Ставим !important на ВСЕ три измерения
 * + запрещаем resize, чтобы поле было ровно 4 строки и не растягивалось. */
#yr-comment {
    min-height: 100px !important;
    max-height: 100px !important;
    height:     100px !important;
    resize: none !important;
}