:root {
 --cc-primary: #50b6ba;
 --cc-primary-dark: #3a9fa3;
 --cc-accent: #fabb53;
 --cc-accent-soft: #fff0e0;
 --cc-bg: #ffffff;
 --cc-text: #001d1e;
 --cc-muted: #545454;
 --cc-border: #daf1ff;
 --cc-shadow: 0 10px 30px rgba(0, 29, 30, 0.14);
 --cc-radius: 14px;
}

.cc-banner,
.cc-settings {
 font-family: var(--font-f-ceraroundpro, inherit);
 box-sizing: border-box;
}

.cc-banner *,
.cc-settings * {
 box-sizing: border-box;
}

.cc-banner {
 position: fixed;
 left: 12px;
 right: auto;
 bottom: 12px;
 z-index: 10050;
 width: min(300px, calc(100vw - 24px));
 max-width: 300px;
 margin: 0;
 padding: 12px 14px 10px;
 background: var(--cc-bg);
 border: 1px solid var(--cc-border);
 border-radius: var(--cc-radius);
 box-shadow: var(--cc-shadow);
 transform: translateY(120%);
 opacity: 0;
 pointer-events: none;
 transition: transform 0.3s ease, opacity 0.3s ease;
}

.cc-banner.is-visible {
 transform: translateY(0);
 opacity: 1;
 pointer-events: auto;
}

.cc-banner::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 border-radius: var(--cc-radius) var(--cc-radius) 0 0;
 background: linear-gradient(90deg, var(--cc-accent) 0%, var(--cc-primary) 100%);
}

.cc-banner__head {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 6px;
}

.cc-banner__icon {
 width: 28px;
 height: 28px;
 border-radius: 8px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--cc-accent-soft);
 font-size: 15px;
 line-height: 1;
 flex-shrink: 0;
}

.cc-banner__title {
 margin: 0;
 font-size: 14px;
 font-weight: 800;
 color: var(--cc-text);
 line-height: 1.2;
}

.cc-banner__text {
 margin: 0 0 10px;
 font-size: 11px;
 line-height: 1.45;
 color: var(--cc-muted);
}

.cc-banner__text a {
 color: var(--cc-primary);
 text-decoration: underline;
}

.cc-banner__actions {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 6px;
}

.cc-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 34px;
 padding: 7px 10px;
 border: none;
 border-radius: 999px;
 font-size: 11px;
 font-weight: 700;
 line-height: 1.2;
 cursor: pointer;
 transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.cc-btn:hover {
 transform: translateY(-1px);
}

.cc-btn--primary {
 background: linear-gradient(135deg, var(--cc-accent) 0%, #f0a830 100%);
 color: var(--cc-text);
 box-shadow: 0 6px 16px rgba(250, 187, 83, 0.28);
}

.cc-btn--ghost {
 background: var(--cc-bg);
 color: var(--cc-muted);
 border: 1.5px solid var(--cc-border);
 box-shadow: none;
}

.cc-btn--link {
 grid-column: 1 / -1;
 background: transparent;
 color: var(--cc-primary);
 min-height: auto;
 padding: 2px 0 0;
 font-size: 10px;
}

.cc-settings {
 position: fixed;
 inset: 0;
 z-index: 10060;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 16px;
 background: rgba(0, 29, 30, 0.45);
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity 0.25s ease, visibility 0.25s ease;
}

.cc-settings.is-visible {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
}

.cc-settings__panel {
 width: 100%;
 max-width: 480px;
 max-height: calc(100vh - 32px);
 overflow: auto;
 padding: 18px;
 background: var(--cc-bg);
 border-radius: var(--cc-radius);
 box-shadow: var(--cc-shadow);
}

.cc-settings__head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 12px;
 margin-bottom: 12px;
}

.cc-settings__title {
 margin: 0;
 font-size: 18px;
 font-weight: 800;
 color: var(--cc-text);
}

.cc-settings__close {
 width: 30px;
 height: 30px;
 border: none;
 border-radius: 50%;
 background: var(--cc-accent-soft);
 color: var(--cc-text);
 font-size: 20px;
 line-height: 1;
 cursor: pointer;
}

.cc-settings__intro {
 margin: 0 0 12px;
 font-size: 12px;
 line-height: 1.45;
 color: var(--cc-muted);
}

.cc-category {
 padding: 12px;
 margin-bottom: 8px;
 border: 1.5px solid var(--cc-border);
 border-radius: 12px;
 background: #f4fbff;
}

.cc-category__top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
}

.cc-category__name {
 margin: 0;
 font-size: 13px;
 font-weight: 700;
 color: var(--cc-text);
}

.cc-category__desc {
 margin: 6px 0 0;
 font-size: 11px;
 line-height: 1.4;
 color: var(--cc-muted);
}

.cc-switch {
 position: relative;
 width: 40px;
 height: 22px;
 flex-shrink: 0;
}

.cc-switch input {
 position: absolute;
 opacity: 0;
 width: 0;
 height: 0;
}

.cc-switch__track {
 display: block;
 width: 100%;
 height: 100%;
 border-radius: 999px;
 background: #c5d4cb;
 transition: background-color 0.2s ease;
 cursor: pointer;
}

.cc-switch__track::after {
 content: "";
 position: absolute;
 top: 2px;
 left: 2px;
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background: #fff;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 transition: transform 0.2s ease;
}

.cc-switch input:checked + .cc-switch__track {
 background: var(--cc-primary);
}

.cc-switch input:checked + .cc-switch__track::after {
 transform: translateX(18px);
}

.cc-switch input:disabled + .cc-switch__track {
 opacity: 0.65;
 cursor: not-allowed;
}

.cc-settings__actions {
 display: grid;
 gap: 8px;
 margin-top: 12px;
}

.cc-fab {
 position: fixed;
 left: 12px;
 right: auto;
 bottom: 12px;
 z-index: 10040;
 min-height: 30px;
 padding: 6px 10px;
 border: 1px solid var(--cc-border);
 border-radius: 999px;
 background: var(--cc-bg);
 color: var(--cc-muted);
 font-size: 10px;
 font-weight: 700;
 box-shadow: 0 6px 18px rgba(0, 29, 30, 0.1);
 cursor: pointer;
 opacity: 0;
 visibility: hidden;
 transform: translateY(8px);
 transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.cc-fab.is-visible {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}

body.cc-lock-scroll {
 overflow: hidden;
}

body:has(.cc-banner.is-visible) .whatsappwidjet {
 bottom: 170px;
}

@media (min-width: 640px) {
 .cc-banner {
  left: 16px;
  bottom: 16px;
  width: 280px;
  max-width: 280px;
 }

 .cc-fab {
  left: 16px;
  bottom: 16px;
 }

 .cc-settings__actions {
  grid-template-columns: 1fr 1fr;
 }

 .cc-settings__actions .cc-btn--primary {
  grid-column: 1 / -1;
 }
}

@media (max-width: 639px) {
 .cc-banner {
  left: 10px;
  bottom: 10px;
  width: min(280px, calc(100vw - 20px));
  max-width: none;
 }

 .cc-fab {
  left: 10px;
  bottom: 10px;
 }

 .cc-banner.is-visible ~ .cc-fab,
 .cc-settings.is-visible ~ .cc-fab {
  display: none;
 }

 body:has(.cc-banner.is-visible) .whatsappwidjet {
  bottom: 190px;
  right: 10px;
 }
}

@media (hover: none) and (pointer: coarse) {
 .cc-btn:hover {
  transform: none;
 }
}