/* ==========================================================================
   Bartenders — кроки приготування, мобільна (хендофф 4a «Номер-чекбокс + розділювачі»).

   Розмітка WPRM + Premium (list_style="checkbox"), шаблон chic-bartenders не змінюється:
     div.wprm-recipe-instructions-container
       h2.wprm-recipe-header …                                   ← не чіпаємо
       div.wprm-recipe-instruction-group
         [h3.wprm-recipe-instruction-group-name]                 ← лише якщо є групи
         ul.wprm-recipe-instructions
           li.wprm-recipe-instruction[.wprm-checkbox-is-checked]
             span.wprm-checkbox-container > input.wprm-checkbox + label.wprm-checkbox-label
             div.wprm-recipe-instruction-text (style="margin-bottom: 5px")
               текст, span.brt-step-amt, span.wprm-inline-ingredient, span[style="display: block;"] з <p>
             [div.wprm-recipe-instruction-media > img]           ← step-art
       p.brt-steps-hint[hidden]                                  ← додає плагін

   Номер — counter(brt-step) у label::before; input прозорий і накриває коло, тож
   тап по колу = нативний клік по чекбоксу. Решту рядка вмикає recipe-steps.js.

   Цей файл друкується раніше за інлайн-стиль шаблону WPRM: !important — лише проти
   !important шаблону/Premium (li: margin/padding, p: font-size/line-height, input: width,
   label: display, .wprm-block-text-bold) та інлайн-стилів (margin-bottom тексту);
   решту бере специфічність. Поза цим @media файл нічого не робить: span.brt-step-amt
   без стилів, підказку ховає атрибут hidden.
   ========================================================================== */

@media screen and (max-width: 767px) {   /* screen: друк (~718px на A4) лишається десктопним */

  /* ---------- Лічильник наскрізний на весь рецепт (через групи теж) ---------- */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container {
    counter-reset: wprm-advanced-list-counter brt-step;
  }

  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container ul.wprm-recipe-instructions {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  /* ---------- Рядок кроку: коло 28 + 12 → текст із 40px, лінії між кроками ---------- */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction {
    counter-increment: brt-step;
    position: relative;
    margin: 0 !important;
    padding: 10px 0 10px 40px !important;
    border-bottom: 1px solid #eef1f3;
    list-style: none;
    background: none;
    text-decoration: none;              /* Premium закреслює виконані */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction:last-child {
    border-bottom: 0;
  }

  /* ---------- Текст ---------- */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-recipe-instruction-text {
    margin: 0 !important;               /* інлайн margin-bottom: 5px */
    padding-top: 2px;                   /* 1-й рядок (24px) по центру кола 28px */
    font-size: 16.5px;
    line-height: 1.45;
    font-weight: 400;
    color: #222222;
    text-decoration: none;
    text-wrap: pretty;
  }
  /* абзаци кроку: WPRM міняє <p> на span[style="display: block;"] */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-recipe-instruction-text > p,
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-recipe-instruction-text > span[style*="display: block"] {
    margin: 0;
  }
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-recipe-instruction-text > :is(p, span[style*="display: block"]) + :is(p, span[style*="display: block"]) {
    margin-top: 6px;
  }
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .brt-step-amt {
    font-weight: 800;
    white-space: nowrap;                /* «30 мл» не рветься між числом і одиницею */
  }
  /* старі картки з [wprm-ingredient]: спан без власного жирного, жирні лише число + одиниця */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-inline-ingredient {
    font-weight: inherit !important;    /* .wprm-block-text-bold { font-weight: 700 !important } */
  }

  /* ---------- Номер-чекбокс 28×28 у лівому полі рядка ---------- */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-checkbox-container {
    display: block;
    position: absolute;
    left: 0;
    top: 10px;
    width: 28px;
    height: 28px;
    margin: 0;
    line-height: 0;
  }
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-checkbox-container input.wprm-checkbox {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 28px !important;             /* Premium: 16px !important */
    height: 28px;
    margin: 0 !important;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-checkbox-container label.wprm-checkbox-label {
    display: block !important;          /* Premium: inline !important */
    position: relative;
    left: 0;
    width: 28px;
    height: 28px;
    margin: 0 !important;
    padding: 0;
  }
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-checkbox-container label.wprm-checkbox-label::before {
    content: counter(brt-step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 1.5px solid #c9d6de;
    border-radius: 50%;
    background: #ffffff no-repeat center / 14px 14px;
    color: #1f6c9c;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    outline: none;                      /* Premium: outline на :focus — фокус лише з клавіатури, нижче */
    transition: background-color .15s, border-color .15s, color .15s;
  }
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-checkbox-container label.wprm-checkbox-label::after {
    content: none;                      /* галочка Premium; нашу дає фон ::before */
  }

  /* поточний крок = перший невиконаний у списку: синє коло, білий номер */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction:not(.wprm-checkbox-is-checked):not(li.wprm-recipe-instruction:not(.wprm-checkbox-is-checked) ~ li) .wprm-checkbox-container label.wprm-checkbox-label::before {
    border-color: #1f6c9c;
    background-color: #1f6c9c;
    color: #ffffff;
  }

  /* виконаний крок (клас від checkboxes.js Premium): зелене коло з галочкою, текст блідне */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction.wprm-checkbox-is-checked .wprm-checkbox-container label.wprm-checkbox-label::before {
    content: '';
    border-color: #1f6e54;
    background-color: #1f6e54;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction.wprm-checkbox-is-checked .wprm-recipe-instruction-text {
    color: #9aa5ab;
  }

  /* фокус з клавіатури; браузер без :focus-visible (Safari < 15.4) відкидає друге правило
     цілком і показує рамку на будь-якому фокусі — краще, ніж жодної */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-checkbox-container input.wprm-checkbox:focus + label.wprm-checkbox-label::before {
    outline: 2px solid #1f6c9c;
    outline-offset: 2px;
  }
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-checkbox-container input.wprm-checkbox:focus:not(:focus-visible) + label.wprm-checkbox-label::before {
    outline: none;
  }

  /* ---------- Step-art: картинка в колонці тексту ----------
     Розмір рідний (150px, як на десктопі): у хендоффі — 100% до 320px, але це +150px на крок
     (Whiskey Sour +1344px на 390); автор обрав компактність. Ховає її кнопка «камера» WPRM
     інлайн-стилем display: none — display контейнера тут не задаємо. */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-recipe-instruction-media {
    margin: 10px 0 2px;
    text-align: left;
    cursor: default;
  }
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container li.wprm-recipe-instruction .wprm-recipe-instruction-media img {
    display: block;
    margin: 0;
    border-radius: 12px;
  }

  /* ---------- Групи кроків (у базі зараз немає, але WPRM їх уміє) ---------- */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container .wprm-recipe-instruction-group-name {
    margin: 14px 0 0 !important;        /* WPRM: margin-top: .8em !important */
    font-size: 13px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1f6c9c;
  }

  /* ---------- Підказка під списком ---------- */
  .brt-rt-page .wprm-recipe-template-chic-bartenders .wprm-recipe-instructions-container p.brt-steps-hint {
    display: block;                     /* поверх атрибута hidden */
    margin: 10px 0 0;
    padding: 0;
    font-size: 12.5px !important;       /* шаблон: p { font-size: 1em !important; line-height: 1.5em !important } */
    line-height: 1.4 !important;
    font-weight: 400;
    color: #999999;
    text-align: left;
  }
}