/* Оформление виджета записи, таймлайна и блока «Моя запись».
   Общее для всех тем: цвета берутся из CSS-переменных, которые задаёт тема. */

.book{margin-top:24px}
.book__note{background:var(--oto-note-bg);border-left:4px solid var(--oto-note-border);padding:12px 16px;border-radius:var(--oto-radius-sm);margin:12px 0}
.book__controls{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.book__controls label{font-size:13px;font-weight:600;color:var(--oto-muted);display:block;margin-bottom:4px}
.book__controls select,.book__controls input{width:100%;padding:10px 12px;border:1px solid var(--oto-border);border-radius:var(--oto-radius-sm);font-size:14px;background:var(--oto-surface);color:var(--oto-text)}
.book__controls>div{min-width:150px;flex:1}
.book__summary{font-size:14px;color:var(--oto-free-ink);font-weight:600;min-height:20px;margin-bottom:8px}
.book__client{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.book__client input{width:100%;padding:10px 12px;border:1px solid var(--oto-border);border-radius:var(--oto-radius-sm);font-size:14px;background:var(--oto-surface);color:var(--oto-text)}
.book__consent{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:13px;color:var(--oto-muted)}
.book__consent input{width:auto;margin-top:2px}
.book__msg{margin-top:12px;font-weight:600;font-size:15px;min-height:20px}
.book__code{font-family:ui-monospace,Consolas,monospace;font-size:18px;letter-spacing:2px}

/* --- Кнопки: единая «таблетка» с мягкой тенью и состоянием нажатия --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 26px;border:1px solid transparent;border-radius:999px;
  background-color:var(--oto-primary);color:var(--oto-primary-ink);
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));
  font:inherit;font-size:15px;font-weight:600;letter-spacing:.01em;line-height:1.15;
  text-decoration:none;cursor:pointer;
  box-shadow:0 1px 2px rgba(13,21,34,.10),
             0 12px 26px -14px color-mix(in srgb,var(--oto-primary) 90%,black);
  transition:transform .14s ease,box-shadow .2s ease,background-color .2s ease,filter .2s ease;
}
.btn:hover{
  text-decoration:none;transform:translateY(-2px);filter:brightness(1.04);
  box-shadow:0 2px 4px rgba(13,21,34,.12),
             0 20px 38px -16px color-mix(in srgb,var(--oto-primary) 90%,black);
}
.btn:active{transform:translateY(0) scale(.985);
  box-shadow:0 1px 2px rgba(13,21,34,.14),
             0 8px 18px -12px color-mix(in srgb,var(--oto-primary) 90%,black)}
.btn:focus-visible{outline:3px solid color-mix(in srgb,var(--oto-primary) 55%,white);outline-offset:3px}
.btn__icon{display:inline-flex;align-items:center;transition:transform .18s ease}
.btn:hover .btn__icon{transform:translateX(3px)}
.btn[disabled],.btn[aria-disabled="true"],.btn.is-disabled{
  opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;filter:none}
.btn.is-loading{color:transparent;position:relative;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:oto-spin .7s linear infinite}
@keyframes oto-spin{to{transform:rotate(360deg)}}
.btn--ghost{background-color:transparent;color:var(--oto-primary);border-color:var(--oto-border);
  background-image:none;box-shadow:none}
.btn--ghost:hover{background-color:color-mix(in srgb,var(--oto-primary) 8%,transparent);filter:none;box-shadow:none}
.btn--lg{min-height:54px;padding:16px 32px;font-size:16px}
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}.btn:hover{transform:none}.btn:hover .btn__icon{transform:none}
}

/* --- Фон сайта, заданный в настройках (background_image) --- */
body.oto-bg-hero .top-section{
  background-image:linear-gradient(color-mix(in srgb, var(--oto-surface) var(--oto-bg-alpha,0%), transparent)),
                     var(--oto-bg-image);
  background-size:cover;background-position:center;background-repeat:no-repeat
}
body.oto-bg-page{
  background-image:linear-gradient(color-mix(in srgb, var(--oto-surface) var(--oto-bg-alpha,0%), transparent)),
                     var(--oto-bg-image);
  background-size:cover;background-attachment:fixed;background-position:center;background-repeat:no-repeat
}
body.oto-bg-page .top-section{
  background:color-mix(in srgb, var(--oto-surface) 65%, transparent)
}

/* --- Таймлайн: сетка на широком экране --- */
.tl{margin:16px 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    border:1px solid var(--oto-border);border-radius:var(--oto-radius);padding:8px;background:var(--oto-surface)}
.tl__grid{display:grid;gap:2px}
.tl__corner{position:sticky;left:0;z-index:3;background:var(--oto-surface)}
.tl__time{font-size:11px;font-weight:600;color:var(--oto-muted);text-align:center;padding:2px 0 6px;
          border-bottom:1px solid var(--oto-border);white-space:nowrap;overflow:hidden}
.tl__label{position:sticky;left:0;z-index:2;background:var(--oto-surface);font-size:12px;font-weight:600;
           color:var(--oto-text);padding:6px 10px;display:-webkit-box;-webkit-line-clamp:2;
           -webkit-box-orient:vertical;border-right:1px solid var(--oto-border);overflow:hidden;
           line-height:1.25;align-self:stretch;align-content:center}
.tl__label--disabled{opacity:.45}
.tl__cell{height:var(--oto-cell-h);border-radius:var(--oto-radius-sm);display:flex;align-items:center;
          justify-content:center;font-size:12px;font-weight:600;line-height:1;cursor:pointer;
          transition:background .12s ease, box-shadow .12s ease;border:1px solid transparent;
          white-space:nowrap;overflow:hidden;padding:0 6px;font-variant-numeric:tabular-nums}
.tl__cell--free{background:var(--oto-free-bg);color:var(--oto-free-ink)}
.tl__cell--free:hover{background:var(--oto-free-hover);color:#fff}
.tl__cell--busy{background:var(--oto-busy-bg);color:var(--oto-busy-ink);cursor:not-allowed}
.tl__cell--sel,.tl__cell.is-sel{background:var(--oto-primary);color:var(--oto-primary-ink)}
.tl__cell--off{background:var(--oto-off-bg);color:var(--oto-off-ink);cursor:default}
.tl__cell--reserved{background:var(--oto-reserved-bg);color:var(--oto-reserved-ink);cursor:not-allowed;
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0 6px,transparent 6px 12px)}
.tl__empty{color:var(--oto-muted);padding:14px;display:block}
.tl__offtext{font-size:12px;font-weight:500}

/* --- Таймлайн: список на узких экранах --- */
.tl__list{display:flex;flex-direction:column;gap:12px}
.tl__line{border:1px solid var(--oto-border);border-radius:var(--oto-radius-sm);padding:10px 12px}
.tl__line--disabled{opacity:.55}
.tl__line-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;
               font-weight:700;margin-bottom:8px;color:var(--oto-text)}
.tl__meta{color:var(--oto-muted);font-weight:500;font-size:12px}
.tl__chips{display:flex;flex-wrap:wrap;gap:6px}
.tl__chip{font:inherit;font-size:13px;font-weight:600;padding:8px 12px;border-radius:var(--oto-radius-sm);
          border:1px solid transparent;cursor:pointer;background:var(--oto-free-bg);color:var(--oto-free-ink);
          font-variant-numeric:tabular-nums}
.tl__chip--free:hover{background:var(--oto-free-hover);color:#fff}
.tl__chip--busy{background:var(--oto-busy-bg);color:var(--oto-busy-ink);border-color:var(--oto-border);cursor:not-allowed}
.tl__chip.is-sel{background:var(--oto-primary);color:var(--oto-primary-ink)}

.tl__legend{display:flex;gap:16px;margin-top:12px;font-size:13px;flex-wrap:wrap;color:var(--oto-muted)}
.tl__legend span{display:flex;align-items:center;gap:6px}
.tl__dot{width:14px;height:14px;border-radius:3px;display:inline-block}
.tl__dot--free{background:var(--oto-free-bg);border:1px solid var(--oto-free-hover)}
.tl__dot--busy{background:var(--oto-busy-bg);border:1px solid var(--oto-busy-ink)}
.tl__dot--sel{background:var(--oto-primary)}
.tl__dot--reserved{background:var(--oto-reserved-bg);border:1px solid var(--oto-reserved-ink)}

/* --- Календарь доступных дней --- */
.cal{margin:0 0 16px;border:1px solid var(--oto-border);border-radius:var(--oto-radius);
     padding:12px;background:var(--oto-surface);max-width:460px}
.cal__empty{color:var(--oto-muted);font-size:13px;padding:6px}
.cal__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.cal__title{font-weight:700;font-size:14px;color:var(--oto-text)}
.cal__nav{border:1px solid var(--oto-border);background:var(--oto-surface);color:var(--oto-text);
          width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:16px;line-height:1}
.cal__nav:hover{background:var(--oto-off-bg)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__dow{font-size:11px;color:var(--oto-muted);text-align:center;padding:2px 0;font-weight:600}
.cal__day{display:flex;align-items:center;justify-content:center;height:36px;border-radius:8px;
          font-size:13px;font-weight:600;border:1px solid transparent;background:transparent;
          color:var(--oto-text);cursor:default;font-family:inherit}
.cal__day--free{background:var(--oto-free-bg);color:var(--oto-free-ink);cursor:pointer}
.cal__day--free:hover{background:var(--oto-free-hover);color:#fff}
.cal__day--busy{background:var(--oto-busy-bg);color:var(--oto-busy-ink)}
.cal__day--closed{background:var(--oto-off-bg);color:var(--oto-off-ink)}
.cal__day--past{background:transparent;color:var(--oto-off-ink);opacity:.6}
.cal__day.is-today{outline:1px solid var(--oto-primary)}
.cal__day.is-selected{background:var(--oto-primary);color:var(--oto-primary-ink)}
.cal__legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--oto-muted)}
.cal__legend span{display:flex;align-items:center;gap:6px}
.cal__dot{width:12px;height:12px;border-radius:3px;display:inline-block}
.cal__dot--free{background:var(--oto-free-bg);border:1px solid var(--oto-free-hover)}
.cal__dot--busy{background:var(--oto-busy-bg);border:1px solid var(--oto-busy-ink)}
.cal__dot--closed{background:var(--oto-off-bg);border:1px solid var(--oto-off-ink)}
.book__datehint{display:block;font-size:12px;color:var(--oto-muted);margin-top:4px}

/* --- «Моя запись» --- */
.my__form{display:grid;grid-template-columns:200px 240px auto;gap:10px;align-items:end;margin:14px 0}
.my__form label{font-size:13px;font-weight:600;color:var(--oto-muted);display:block;margin-bottom:4px}
.my__form input{margin:0}
.my__hint{color:var(--oto-muted);font-size:13px;margin-top:6px}
.my__card{border:1px solid var(--oto-border);border-radius:var(--oto-radius);padding:16px;margin-top:14px;background:var(--oto-surface)}
.my__card h3{margin:0 0 10px;font-size:17px;color:var(--oto-text)}
.my__status{font-weight:700}
.my__status--confirmed{color:var(--oto-free-ink)}
.my__status--cancelled{color:var(--oto-busy-ink)}
.my__status--done{color:var(--oto-primary)}
.my__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.my__reschedule{margin-top:12px;border-top:1px dashed var(--oto-border);padding-top:12px}
.my__row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.my__row select,.my__row input{margin:0;min-width:150px}
.my__msg{margin-top:10px;font-weight:600}

@media(max-width:768px){
  .book__controls>div{min-width:100%}
  .book__client{grid-template-columns:1fr}
  .my__form{grid-template-columns:1fr}
}
/* --- Карта пункта (одинаково во всех темах) --- */
.oto-map{margin:18px 0 0;background:var(--oto-surface,#fff);
  border:1px solid var(--oto-border,#e2e6eb);
  border-radius:var(--oto-radius,14px);overflow:hidden}
.oto-map__head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  padding:14px 16px 10px}
.oto-map__head b{font-size:15.5px}
.oto-map__head span{font-size:13.5px;color:var(--oto-muted,#5b6572)}
.oto-map__frame{position:relative;height:320px;background:#e9edf1}
.oto-map__frame iframe{display:block;width:100%;height:100%;border:0}
.oto-map__foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 16px 14px;font-size:12.5px;color:var(--oto-muted,#5b6572)}
.oto-map__coords{font-family:ui-monospace,Consolas,"Liberation Mono",monospace}
.oto-map__foot a{color:var(--oto-text,#1a1f26);text-decoration:underline}
@media (max-width:640px){.oto-map__frame{height:240px}}