/* callback-widget: mobile mini-header + bottom CTA + message sheet + desktop floating CTA */
:root {
  --cbw-bg: rgba(255, 255, 255, 0.96);
  --cbw-border: rgba(0, 0, 0, 0.08);
  --cbw-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  --cbw-green: #82BF31; /* match existing widget */
  --cbw-blue: #0075ac;
  --cbw-radius: 16px;
  --cbw-z: 2147482990; /* below .mcw (2147483000) */
  --cbw-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== Mobile fixed mini-header ===== */
.mc-cbw-header {
  position: fixed;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: var(--cbw-z);
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  background: var(--cbw-bg);
  border: 1px solid var(--cbw-border);
  border-radius: 18px;
  box-shadow: var(--cbw-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--cbw-font);
  transform: translateY(-10px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.mc-cbw-header.is-visible {
  transform: none;
  opacity: 1;
}
.mc-cbw-header__left { display:flex; align-items:center; gap:8px; }
.mc-cbw-header__spacer { flex: 1 1 auto; }

.mc-cbw {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: var(--cbw-z);
  display: none;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  background: var(--cbw-bg);
  border: 1px solid var(--cbw-border);
  border-radius: var(--cbw-radius);
  box-shadow: var(--cbw-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--cbw-font);
}

/* bottom bar is just one main CTA */

.mc-cbw__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--cbw-border);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.mc-cbw__icon:active { transform: translateY(1px); }

.mc-cbw__icon::before {
  content: "";
  width: 22px;
  height: 22px;
  background-color: var(--cbw-blue);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 22px 22px;
  mask-size: 22px 22px;
}

.mc-cbw__icon[data-icon="phone"]::before {
  -webkit-mask-image: url('/assets/libs/callback-widget/cbw_phone.svg');
  mask-image: url('/assets/libs/callback-widget/cbw_phone.svg');
}
.mc-cbw__icon[data-icon="chat"]::before {
  -webkit-mask-image: url('/assets/libs/callback-widget/cbw_chat.svg');
  mask-image: url('/assets/libs/callback-widget/cbw_chat.svg');
}
.mc-cbw__icon[data-icon="tg"]::before {
  -webkit-mask-image: url('/assets/libs/callback-widget/cbw_tg.svg');
  mask-image: url('/assets/libs/callback-widget/cbw_tg.svg');
}
.mc-cbw__icon[data-icon="vk"]::before {
  -webkit-mask-image: url('/assets/libs/callback-widget/cbw_vk.svg');
  mask-image: url('/assets/libs/callback-widget/cbw_vk.svg');
}
.mc-cbw__icon[data-icon="message"]::before {
  -webkit-mask-image: url('/assets/libs/callback-widget/cbw_message.svg');
  mask-image: url('/assets/libs/callback-widget/cbw_message.svg');
}

.mc-cbw__cta {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: var(--cbw-green);
  color: #fff;
  font: 800 15px/1 var(--cbw-font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 12px;
  white-space: nowrap;
}
.mc-cbw__cta:active { transform: translateY(1px); }

.mc-cbw__cta--secondary {
  background: #fff;
  color: rgba(0, 0, 0, 0.78);
  border: 1px solid var(--cbw-border);
  font-weight: 600;
}

/* Respect existing "hide when online widget is visible" classes */
body.mcxxi-widget-in-view .mc-cbw,
body.mcxxi-widget-in-view-mcw .mc-cbw {
  display: none !important;
}
body.mcxxi-widget-in-view .mc-cbw-header,
body.mcxxi-widget-in-view-mcw .mc-cbw-header {
  display: none !important;
}

/* Mobile-only */
@media (max-width: 767px) {
  body.mc-cbw-enabled .mc-cbw { display: flex; }
  body.mc-cbw-enabled .mc-cbw-header { display: flex; }
  body.mc-cbw-enabled .fixed-footer.sticky { display: none !important; } /* avoid double bars */
}

/* Safe area */
@supports (padding: max(0px)) {
  .mc-cbw { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .mc-cbw { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); }
  .mc-cbw-header { top: calc(10px + env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); }
}

/* ===== Bottom sheet ===== */
.mc-cbw-sheet {
  position: fixed;
  inset: 0;
  z-index: calc(var(--cbw-z) + 2);
  display: none;
  font-family: var(--cbw-font);
}
.mc-cbw-sheet.is-open { display: block; }
.mc-cbw-sheet__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}
.mc-cbw-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 10px 12px 12px;
  transform: translateY(16px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.mc-cbw-sheet.is-open .mc-cbw-sheet__panel { transform:none; opacity:1; }
.mc-cbw-sheet__header {
  display:flex;
  align-items:center;
  justify-content: center;
  position: relative;
  padding: 6px 0 10px;
}
.mc-cbw-sheet__title {
  font: 700 16px/1.1 var(--cbw-font);
  color: rgba(0,0,0,.86);
}
.mc-cbw-sheet__close {
  position: absolute;
  right: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--cbw-border);
  background: #fff;
  cursor: pointer;
}
.mc-cbw-sheet__close::before{
  content:"";
  width:18px;height:18px;
  position:absolute; inset:0; margin:auto;
  background: rgba(0,0,0,.65);
  -webkit-mask: url('/assets/libs/callback-widget/cbw_close.svg') no-repeat center / 18px 18px;
  mask: url('/assets/libs/callback-widget/cbw_close.svg') no-repeat center / 18px 18px;
}
.mc-cbw-sheet__list { display:flex; flex-direction:column; gap: 8px; padding: 0 0 10px; }
.mc-cbw-sheet__item {
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--cbw-border);
  background: #fff;
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 0 12px;
  text-decoration:none;
  color: rgba(0,0,0,.86);
  cursor: pointer;
}
.mc-cbw-sheet__item:active { transform: translateY(1px); }
.mc-cbw-sheet__item-icon {
  width: 22px;
  height: 22px;
  background: var(--cbw-blue);
  flex: 0 0 auto;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:22px 22px; mask-size:22px 22px;
}
.mc-cbw-sheet__item-text { font: 600 14px/1 var(--cbw-font); }
.mc-cbw-sheet__item-chevron {
  margin-left: auto;
  width: 16px;
  height: 16px;
  background: rgba(0,0,0,.45);
  -webkit-mask: url('/assets/libs/callback-widget/cbw_chevron_right.svg') no-repeat center / 16px 16px;
  mask: url('/assets/libs/callback-widget/cbw_chevron_right.svg') no-repeat center / 16px 16px;
}

/* ===== Desktop floating CTA ===== */
.mc-cbw-desk {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: var(--cbw-z);
  display: none;
  align-items: center;
  gap: 10px;
  font-family: var(--cbw-font);
}
.mc-cbw-desk__btn {
  height: 48px;
  padding: 0 18px;
  border-radius: 16px;
  background: #fff;
  color: rgba(0,0,0,.82);
  border: 2px solid rgba(130,191,49,.9);
  font: 800 14px/1 var(--cbw-font);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cbw-shadow);
}
.mc-cbw-desk__btn:active { transform: translateY(1px); }
.mc-cbw-desk__btn:active { transform: translateY(1px); }
@media (min-width: 768px) {
  body.mc-cbw-desktop-enabled .mc-cbw-desk { display:flex; }
}
body.mcxxi-widget-in-view .mc-cbw-desk,
body.mcxxi-widget-in-view-mcw .mc-cbw-desk { display:none !important; }