@charset "UTF-8";
/* Стилі плагіна syrocarpaty-binotel. Винесено з блоку <style id="syro-binotel"> 11.10.2026 без змін у правилах. */
/* ---------- кнопка ---------- */
/* 15.09: кнопку перенесено праворуч на всіх пристроях (прохання власника).
   Справа внизу вже живуть кнопка «вгору» теми (.up, 60 px), тост «Додано в
   кошик», а на лендах — смуги на всю ширину з кнопкою заявки. Тому відступ
   знизу не константа, а --syro-bingc-bottom: його ставить syro_binotel_skrypt()
   за тим, що зараз реально займає низ справа. */
#bingc-phone-button#bingc-phone-button{
 right:16px!important;left:auto!important;top:auto!important;
 bottom:var(--syro-bingc-bottom,16px)!important;
 /* Нижче за спливний кошик (99999), модалку швидкого замовлення (999999)
    і затемнення теми (999999): у Binotel 200001 — кнопка висіла б поверх
    відкритого кошика. Вище за липку панель купівлі (9998). */
 z-index:9999!important;
 transform-origin:right bottom;transition:bottom .24s ease}
/* Підказку Binotel малює від лівого краю кнопки (у кабінеті стоїть «зліва»),
   на ширину 200 px — біля правого краю екрана вона вилазила б за нього. */
#bingc-phone-button#bingc-phone-button div.bingc-phone-button-tooltip{left:auto!important;right:6px!important}
#bingc-phone-button#bingc-phone-button div.bingc-phone-button-tooltip svg.bingc-phone-button-arrow{left:auto!important;right:29px!important;transform:scaleX(-1)}
#bingc-phone-button#bingc-phone-button svg.bingc-phone-button-circle circle.bingc-phone-button-circle-inside{fill:#f1a416!important}
#bingc-phone-button#bingc-phone-button:hover svg.bingc-phone-button-circle circle.bingc-phone-button-circle-inside{fill:#df950d!important}
#bingc-phone-button#bingc-phone-button svg.bingc-phone-button-circle circle.bingc-phone-button-circle-outside{fill:#f1a416!important;fill-opacity:.18!important}
#bingc-phone-button#bingc-phone-button svg.bingc-phone-button-icon-icon path{fill:#252534!important}
#bingc-phone-button#bingc-phone-button div.bingc-phone-button-icon-text,
#bingc-phone-button#bingc-phone-button div.bingc-phone-button-icon-text span{color:#252534!important;font-weight:600!important}
#bingc-phone-button#bingc-phone-button div.bingc-phone-button-tooltip{background:#2e2e40!important;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
#bingc-phone-button#bingc-phone-button div.bingc-phone-button-tooltip svg.bingc-phone-button-arrow polyline{fill:#2e2e40!important}
@media (max-width:767px){
 /* 97 px на телефоні — чверть ширини екрана. */
 #bingc-phone-button#bingc-phone-button{transform:scale(.72);right:8px!important}
}

/* ---------- вікно «передзвонимо» (passive) ---------- */
#bingc-passive#bingc-passive div.bingc-passive-background{background:rgba(18,17,34,.72)!important}
#bingc-passive#bingc-passive div.bingc-passive-overlay{
 background-color:#252534!important;border:1px solid rgba(241,164,22,.35);
 border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.45)!important}
#bingc-passive#bingc-passive div.bingc-passive-overlay a.bingc-passive-close-button svg polygon{fill:#f1a416!important}
@media (max-width:979px){
 /* Binotel ставить хрестик у кут (12px) без відступу в тексті — на 390 px
    він лягав на «неробочий час». */
 #bingc-passive#bingc-passive div.bingc-passive-overlay div.bingc-passive-content{padding-top:36px!important}
 #bingc-passive#bingc-passive div.bingc-passive-overlay a.bingc-passive-close-button{opacity:.8!important}
}

/* ---------- смуга знизу, що вискакує сама (active) ---------- */
#bingc-active#bingc-active{background:rgba(37,37,52,.97)!important;border-top:2px solid #f1a416;box-shadow:0 -12px 32px rgba(0,0,0,.25)}

/* ---------- спільне для обох форм ---------- */
#bingc-passive#bingc-passive,#bingc-active#bingc-active{font-family:"Open Sans",Ubuntu,Arial,sans-serif}
#bingc-passive#bingc-passive input.bingc-passive-get-phone-form-input,
#bingc-active#bingc-active input.bingc-active-get-phone-form-input{
 border-radius:10px!important;border:1px solid rgba(255,255,255,.25)!important;background:#fff!important;color:#252534!important}
#bingc-passive#bingc-passive input.bingc-passive-get-phone-form-input.warning,
#bingc-active#bingc-active input.bingc-active-get-phone-form-input.warning{border-color:#e5484d!important}
#bingc-passive#bingc-passive div.bingc-passive-get-phone-form-input-border,
#bingc-active#bingc-active div.bingc-active-get-phone-form-input-border{display:none!important}
#bingc-passive#bingc-passive a.bingc-passive-phone-form-button,
#bingc-active#bingc-active a.bingc-active-phone-form-button{
 background:#f1a416!important;color:#252534!important;border-radius:25px;font-weight:600!important}
#bingc-passive#bingc-passive a.bingc-passive-phone-form-button:hover,
#bingc-active#bingc-active a.bingc-active-phone-form-button:hover{background:#df950d!important}
#bingc-passive#bingc-passive a.bingc-passive-phone-form-button:active,
#bingc-active#bingc-active a.bingc-active-phone-form-button:active{background:#c8850b!important}
/* Вибір дня/години/хвилин поза робочим часом: бірюза → картка + акцент. */
#bingc-passive#bingc-passive [class*="date-selection-select-"],
#bingc-active#bingc-active [class*="date-selection-select-"]{background-color:#3a3a50!important;border-radius:10px}
#bingc-passive#bingc-passive [class*="date-selection-select-"] li,
#bingc-active#bingc-active [class*="date-selection-select-"] li{background-color:#2e2e40!important}
#bingc-passive#bingc-passive [class*="date-selection-select-"]:hover,
#bingc-active#bingc-active [class*="date-selection-select-"]:hover,
#bingc-passive#bingc-passive [class*="date-selection-select-"] li:hover,
#bingc-active#bingc-active [class*="date-selection-select-"] li:hover{background-color:#f1a416!important;color:#252534!important}

/* ---------- світла тема ---------- */
html[data-syro-theme="light"] #bingc-passive#bingc-passive div.bingc-passive-background{background:rgba(44,36,24,.45)!important}
html[data-syro-theme="light"] #bingc-passive#bingc-passive div.bingc-passive-overlay{
 background-color:var(--st-surface,#fffdf7)!important;border-color:rgba(241,164,22,.55);box-shadow:0 24px 60px rgba(44,36,24,.22)!important}
html[data-syro-theme="light"] #bingc-active#bingc-active{background:var(--st-surface,#fffdf7)!important;box-shadow:0 -12px 32px rgba(44,36,24,.14)}
/* Binotel прибиває білий текст до кожного блока окремо — перефарбовуємо все
   всередині, крім кнопки (на акценті текст і так темний). */
html[data-syro-theme="light"] #bingc-passive#bingc-passive div.bingc-passive-overlay *:not(a.bingc-passive-phone-form-button),
html[data-syro-theme="light"] #bingc-active#bingc-active *:not(a.bingc-active-phone-form-button){color:var(--st-fg,#2c2418)!important}
html[data-syro-theme="light"] #bingc-passive#bingc-passive input.bingc-passive-get-phone-form-input,
html[data-syro-theme="light"] #bingc-active#bingc-active input.bingc-active-get-phone-form-input{border-color:rgba(44,36,24,.25)!important}
html[data-syro-theme="light"] #bingc-active#bingc-active a.bingc-active-close-button svg polygon{fill:var(--st-fg,#2c2418)!important}
/* Логотип «powered by» — біла картинка, на вершковому тлі не видно. */
html[data-syro-theme="light"] #bingc-passive#bingc-passive a.bingc-powered-by,
html[data-syro-theme="light"] #bingc-active#bingc-active a.bingc-powered-by{filter:invert(.85)}
html[data-syro-theme="light"] #bingc-passive#bingc-passive [class*="date-selection-select-"],
html[data-syro-theme="light"] #bingc-active#bingc-active [class*="date-selection-select-"]{background-color:#efe3c8!important}
html[data-syro-theme="light"] #bingc-passive#bingc-passive [class*="date-selection-select-"] li,
html[data-syro-theme="light"] #bingc-active#bingc-active [class*="date-selection-select-"] li{background-color:var(--st-surface,#fffdf7)!important}
/* Стрілки вибору години — білі svg, на світлому тлі зникали. */
html[data-syro-theme="light"] #bingc-passive#bingc-passive [class*="date-selection-select-"] svg *,
html[data-syro-theme="light"] #bingc-active#bingc-active [class*="date-selection-select-"] svg *{fill:var(--st-muted,#6a5a41)!important}
html[data-syro-theme="light"] #bingc-phone-button#bingc-phone-button div.bingc-phone-button-tooltip{background:var(--st-fg,#2c2418)!important}
html[data-syro-theme="light"] #bingc-phone-button#bingc-phone-button div.bingc-phone-button-tooltip svg.bingc-phone-button-arrow polyline{fill:var(--st-fg,#2c2418)!important}