:root {
  --cc-bg: #fff;
  --cc-primary-color: #333333;
  --cc-secondary-color: #5e6266;
  --cc-btn-primary-bg: #e1251b;
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: #e1251b;
  --cc-btn-primary-hover-bg: #333333;
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: #333333;
  --cc-btn-secondary-bg: #f0f0f0;
  --cc-btn-secondary-color: #333333;
  --cc-btn-secondary-border-color: #f0f0f0;
  --cc-btn-secondary-hover-bg: #333333;
  --cc-btn-secondary-hover-color: #fff;
  --cc-btn-secondary-hover-border-color: #333333;
  --cc-toggle-on-bg: #e1251b;
  --cc-toggle-off-bg: #8a8a8a;
  --cc-toggle-on-knob-bg: #fff;
  --cc-toggle-off-knob-bg: #fff;
  --cc-cookie-category-block-bg: #f5f5f5;
  --cc-cookie-category-block-border: #f5f5f5;
  --cc-cookie-category-block-hover-bg: #ececec;
  --cc-cookie-category-block-hover-border: #ececec;
  --cc-font-family: 'Roboto', Arial, sans-serif;
  --cc-btn-border-radius: 0;
}

#cc-main .cm__body,
#cc-main .pm__body {
  font-family: var(--cc-font-family);
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-family: 'Kanit', sans-serif;
  font-weight: 500;
}

#cc-main .cm__desc,
#cc-main .pm__section-desc {
  font-family: var(--cc-font-family);
  line-height: 1.5;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: 'Kanit', sans-serif;
  font-weight: 400;
  padding: 0.55rem 1.5rem;
  border-radius: 0;
  transition: all 0.3s ease;
}

#cc-main .toggle__icon {
  border-radius: 36px;
}

#cc-main .toggle__icon-circle {
  border-radius: 50%;
}

#cc-main .cm__footer {
  background-color: var(--cc-cookie-category-block-bg);
}

#cc-main .cc__link {
  color: #e1251b;
}

#cc-main .cc__link:hover {
  color: #333333;
}

/* Botón flotante para reabrir preferencias */
#cc-show-preferences-modal {
  position: fixed;
  left: 15px;
  bottom: 15px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: none;
  border-radius: 50%;
  background-color: #333333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: background-color .3s ease;
}

#cc-show-preferences-modal:hover {
  background-color: #e1251b;
}

#cc-show-preferences-modal svg {
  width: 100%;
  height: 100%;
  display: block;
}

#cc-show-preferences-modal svg path {
  fill: #fff;
}

@media (max-width: 640px) {
  #cc-main .cm__title {
    font-size: 1.2rem;
  }

  #cc-main .cm__desc {
    font-size: 0.9rem;
  }

  #cc-main .cm__btn,
  #cc-main .pm__btn {
    font-size: 0.82rem;
  }

  #cc-show-preferences-modal {
    width: 38px;
    height: 38px;
    padding: 8px;
  }
}