/* 
 * Własne style dla vanilla-cookieconsent (OkCamp)
 * Czysty, bezramkowy (borderless) i bezcieniowy (flat/smooth) design:
 * Przestronny, lekki wizualnie, idealnie dopasowany do brandu OkCamp
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --cc-font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cc-bg: #ffffff;
  --cc-text: #071B2C; /* brandAlt.100 */
  --cc-btn-primary-bg: #FFD503;
  --cc-btn-primary-color: #1963A3;
  --cc-btn-primary-hover-bg: #F0C800;
  --cc-btn-primary-hover-color: #155389;
  
  --cc-btn-secondary-bg: #F4F4F5;
  --cc-btn-secondary-color: #3F3F46;
  --cc-btn-secondary-hover-bg: #E4E4E7;
  --cc-btn-secondary-hover-color: #18181B;
  
  --cc-toggle-bg-off: #DDE4EE;
  --cc-toggle-bg-on: #299915;
  --cc-toggle-bg-readonly: #B6E5AC;
  --cc-toggle-knob-bg: #ffffff;
  --cc-toggle-knob-icon-color: #ffffff;
  
  --cc-block-text: #071B2C;
  --cc-cookie-category-block-bg: #FCFCFD;
  --cc-cookie-category-block-border: transparent;
  --cc-cookie-category-block-hover-bg: #FFFFFF;
  --cc-cookie-category-block-hover-border: transparent;
  --cc-cookie-category-expanded-block-bg: #FFFFFF;
  --cc-cookie-category-expanded-block-hover-bg: #FFFFFF;
  
  --cc-overlay-bg: rgba(7, 27, 44, 0.68);
  
  --cc-btn-border-radius: 12px;
  --cc-modal-border-radius: 20px;
  --cc-cookie-category-block-shadow: none;
}

#cc-main {
  font-family: var(--cc-font-family) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Backdrop & Overlay (Rozmycie tła frosted glass)
   ========================================================================== */

.disable--interaction #cc-main .cm-wrapper:before,
#cc-main .cm-overlay,
#cc-main .pm-overlay {
  background: var(--cc-overlay-bg) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease !important;
}

/* ==========================================================================
   Wrapper & Resetting outer excessive margins
   ========================================================================== */

#cc-main .cm-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}

#cc-main .pm-wrapper {
  overflow: visible !important;
  box-shadow: none !important;
}

/* ==========================================================================
   Consent Modal (.cm) - Główny baner zgody (Bez ramek, bez cieni, przestronny)
   ========================================================================== */

#cc-main .cm {
  overflow: visible !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s ease !important;
}

/* Resetowanie wewnętrznych paddingów biblioteki, aby padding .cm decydował o układzie */
#cc-main .cm__body,
#cc-main .cm__texts,
#cc-main .cm__header {
  position: static !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

#cc-main .cm__title {
  position: static !important;
  color: #071B2C !important;
  font-family: var(--cc-font-family) !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}

#cc-main .cm__desc {
  position: static !important;
  font-family: var(--cc-font-family) !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #374151 !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  overscroll-behavior: auto !important;
}

#cc-main .cm__desc::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#cc-main .cm__desc a {
  color: #1963A3 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1.5px !important;
  transition: color 0.15s ease !important;
}

#cc-main .cm__desc a:hover {
  color: #053A6F !important;
}

/* Ciasteczko na banerze zgody - wystaje poza górną krawędź modalu */
.cc-cookie-icon {
  position: absolute !important;
  top: -28px !important;
  left: 28px !important;
  width: 56px !important;
  height: 56px !important;
  z-index: 1000 !important;
  pointer-events: none !important;
  filter: none !important;
}

/* Przyciski w banerze */
#cc-main .cm__btns, 
#cc-main .cm__footer {
  padding: 0 !important;
  margin: 0 !important;
  border-top: none !important;
}

#cc-main .cm__btns {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  gap: 12px !important;
}

#cc-main .cm__btn-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
}

#cc-main .cm__btn-group.cm__btn-group--uneven {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: auto !important;
}

#cc-main .cm__btn+.cm__btn, 
#cc-main .cm__btn-group+.cm__btn-group {
  margin-top: 0 !important;
}

/* Przycisk "Ustawienia" i "Tylko niezbędne" */
#cc-main .cm__btn[data-role="show"],
#cc-main .cm__btn[data-role="necessary"] {
  background: #F4F4F5 !important;
  color: #3F3F46 !important;
  font-family: var(--cc-font-family) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  height: 46px !important;
  padding: 0 24px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#cc-main .cm__btn[data-role="show"]:hover,
#cc-main .cm__btn[data-role="necessary"]:hover {
  background: #E4E4E7 !important;
  color: #18181B !important;
  transform: translateY(-1px) !important;
}

#cc-main .cm__btn[data-role="show"]:active,
#cc-main .cm__btn[data-role="necessary"]:active {
  background: #D4D4D8 !important;
  transform: translateY(0) !important;
}

/* Przycisk "Akceptuję" */
#cc-main .cm__btn[data-role="all"] {
  background: #FFD503 !important;
  color: #1963A3 !important;
  font-family: var(--cc-font-family) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  height: 46px !important;
  padding: 0 28px !important;
  border-radius: 12px !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#cc-main .cm__btn[data-role="all"]:hover {
  background: #F0C800 !important;
  color: #155389 !important;
  transform: translateY(-1px) !important;
}

#cc-main .cm__btn[data-role="all"]:active {
  transform: translateY(0) !important;
}

/* Wersja Desktop (wycentrowany, przestronny modal — bez ciasnoty) */
@media (min-width: 640px) {
  #cc-main .cm {
    top: 50% !important;
    bottom: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: calc(100% - 32px) !important;
    max-width: 660px !important;
    border-radius: 20px !important;
    padding: 34px 34px 28px 34px !important;
    transform: translateY(calc(-50% + 40px)) scale(0.97) !important;
  }

  .show--consent #cc-main .cc--anim .cm,
  .show--consent #cc-main .cm {
    transform: translateY(-50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Wersja Mobile (nowoczesny bottom-sheet) */
@media (max-width: 639px) {
  #cc-main .cm {
    top: auto !important;
    bottom: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px 24px 0 0 !important;
    border: none !important;
    padding: 28px 20px 22px 20px !important;
    box-shadow: none !important;
    transform: translateY(100%) !important;
  }

  .show--consent #cc-main .cc--anim .cm,
  .show--consent #cc-main .cm {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .cc-cookie-icon {
    top: -24px !important;
    left: 20px !important;
    width: 48px !important;
    height: 48px !important;
  }

  #cc-main .cm__title {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  #cc-main .cm__desc {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
  }

  #cc-main .cm__btns {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 10px !important;
  }

  #cc-main .cm__btn-group,
  #cc-main .cm__btn-group.cm__btn-group--uneven {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #cc-main .cm__btn[data-role="show"],
  #cc-main .cm__btn[data-role="necessary"],
  #cc-main .cm__btn[data-role="all"] {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    height: 48px !important;
    font-size: 15px !important;
    padding: 0 16px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Ukrycie banera zgody gdy otwarty jest modal preferencji */
.show--preferences #cc-main .cm,
.show--preferences #cc-main .cc--anim .cm,
.show--preferences.show--consent #cc-main .cm,
.show--preferences.show--consent #cc-main .cc--anim .cm {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(calc(-50% + 30px)) scale(0.96) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, visibility 0.2s ease !important;
}

@media (max-width: 639px) {
  .show--preferences #cc-main .cm,
  .show--preferences #cc-main .cc--anim .cm,
  .show--preferences.show--consent #cc-main .cm,
  .show--preferences.show--consent #cc-main .cc--anim .cm {
    transform: translateY(100%) scale(1) !important;
  }
}

/* ==========================================================================
   Preferences Modal (.pm) - Przestronniejszy, bez ramek i bez cieni
   ========================================================================== */

#cc-main .pm,
#cc-main .pm--box {
  background: #F4F4F5 !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 620px !important;
  width: calc(100% - 24px) !important;
  max-height: 94vh !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  bottom: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: translateY(calc(-50% + 25px)) scale(0.97) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, visibility 0.22s ease !important;
}

.show--preferences #cc-main .cc--anim .pm,
.show--preferences #cc-main .cc--anim .pm--box,
.show--preferences #cc-main .pm,
.show--preferences #cc-main .pm--box {
  transform: translateY(-50%) scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Nagłówek preferencji */
#cc-main .pm__header {
  position: static !important;
  padding: 26px 30px 0 30px !important;
  border-bottom: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

#cc-main .pm__title {
  font-family: var(--cc-font-family) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #071B2C !important;
  line-height: normal !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  display: block !important;
}

/* Ciasteczko na modalu preferencji - wystaje poza górną krawędź */
.cc-cookie-icon--pm {
  position: absolute !important;
  top: -28px !important;
  left: 28px !important;
  width: 56px !important;
  height: 56px !important;
  z-index: 1000 !important;
  pointer-events: none !important;
  filter: none !important;
}

/* Dyskretny przycisk zamykania "✕" */
#cc-main .pm__close-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(7, 27, 44, 0.05) !important;
  color: #566174 !important;
  border: none !important;
  cursor: pointer !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: all 0.15s ease !important;
}

#cc-main .pm__close-btn:hover {
  background: rgba(7, 27, 44, 0.1) !important;
  color: #071B2C !important;
  transform: scale(1.05) !important;
}

#cc-main .pm__close-btn:active {
  transform: scale(0.95) !important;
}

/* Treść preferencji (przestronna, z naturalnym marginesem) */
#cc-main .pm__body {
  padding: 16px 30px 8px 30px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(7, 27, 44, 0.15) transparent;
}

#cc-main .pm__body::-webkit-scrollbar {
  width: 5px;
}

#cc-main .pm__body::-webkit-scrollbar-thumb {
  background-color: rgba(7, 27, 44, 0.15);
  border-radius: 5px;
}

/* Opis wstępny pod tytułem */
#cc-main .pm__section:first-child {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 14px 0 !important;
}

#cc-main .pm__section:first-child .pm__section-desc {
  font-family: var(--cc-font-family) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #4B5563 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Karty kategorii cookies — bez ramek, bez cieni, czyste tło */
#cc-main .pm__section--toggle {
  background: #FCFCFD !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: none !important;
  padding: 15px 20px !important;
  margin: 0 0 10px 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  column-gap: 16px !important;
  row-gap: 3px !important;
  align-items: center !important;
  transition: background-color 0.15s ease !important;
}

#cc-main .pm__section--toggle:hover {
  background: #FFFFFF !important;
  box-shadow: none !important;
  border: none !important;
}

#cc-main .pm__section-title-wrapper {
  display: contents !important;
}

#cc-main .pm__section--toggle .pm__section-title {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--cc-font-family) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #071B2C !important;
  cursor: default !important;
  pointer-events: none !important;
  min-height: auto !important;
  width: 100% !important;
  border-radius: 0 !important;
}

#cc-main .pm__section-arrow,
#cc-main .pm__badge,
#cc-main .pm__service-counter {
  display: none !important;
}

#cc-main .pm__section-desc-wrapper {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: block !important;
  border: none !important;
  padding: 0 !important;
  margin: 2px 0 0 0 !important;
  color: #4B5563 !important;
  overflow: visible !important;
  
}

#cc-main .pm__section--toggle .pm__section-desc {
  font-family: var(--cc-font-family) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #4B5563 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   Przełączniki (Switch / Toggle) — Zgrabne 40px x 22px
   ========================================================================== */

#cc-main .section__toggle-wrapper {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: end !important;
  position: relative !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 40px !important;
  right: auto !important;
  z-index: 1 !important;
  cursor: pointer !important;
}

#cc-main .section__toggle {
  width: 40px !important;
  height: 22px !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  z-index: 2 !important;
  outline: none !important;
}

/* Szyna przełącznika */
#cc-main .toggle__icon {
  width: 40px !important;
  height: 22px !important;
  border-radius: 22px !important;
  background: #DDE4EE !important;
  box-shadow: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
  transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Gałka przełącznika - czysta, płaska, bez cienia */
#cc-main .toggle__icon-circle {
  width: 18px !important;
  height: 18px !important;
  top: 2px !important;
  left: 2px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important;
}

/* Stan włączony */
#cc-main .section__toggle:checked ~ .toggle__icon {
  background: #299915 !important;
  box-shadow: none !important;
}

#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
  transform: translateX(18px) !important;
}

/* Stan zablokowany */
#cc-main .section__toggle:disabled {
  cursor: not-allowed !important;
}

#cc-main .section__toggle:disabled ~ .toggle__icon {
  background: #B6E5AC !important;
  opacity: 0.9 !important;
  box-shadow: none !important;
}

#cc-main .section__toggle:disabled ~ .toggle__icon .toggle__icon-circle {
  transform: translateX(18px) !important;
}

#cc-main .toggle__icon-on,
#cc-main .toggle__icon-off {
  display: none !important;
}

/* ==========================================================================
   Stopka modala preferencji (Czysta, bez linii i bez cieni)
   ========================================================================== */

#cc-main .pm__footer {
  padding: 14px 30px 24px 30px !important;
  border-top: none !important;
  border-radius: 0 0 20px 20px !important;
  background: #F4F4F5 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}

#cc-main .pm__footer .pm__btn-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 12px !important;
}

#cc-main .pm__footer .pm__btn-group:has(.pm__btn[data-role="save"]),
#cc-main .pm__footer .pm__btn-group:nth-child(2) {
  order: 1 !important;
}

#cc-main .pm__footer .pm__btn-group:has(.pm__btn[data-role="all"]),
#cc-main .pm__footer .pm__btn-group:nth-child(1) {
  order: 2 !important;
}

#cc-main .pm__btn[data-role="necessary"] {
  display: none !important;
}

/* Przycisk "Zapisz" */
#cc-main .pm__btn[data-role="save"] {
  background: #E4E4E7 !important;
  color: #27272A !important;
  font-family: var(--cc-font-family) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 44px !important;
  padding: 0 22px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#cc-main .pm__btn[data-role="save"]:hover {
  background: #D4D4D8 !important;
  color: #18181B !important;
  transform: translateY(-1px) !important;
}

#cc-main .pm__btn[data-role="save"]:active {
  transform: translateY(0) !important;
}

/* Przycisk "Zaakceptuj wszystkie" */
#cc-main .pm__btn[data-role="all"] {
  background: #FFD503 !important;
  color: #1963A3 !important;
  font-family: var(--cc-font-family) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  height: 44px !important;
  padding: 0 26px !important;
  border-radius: 10px !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#cc-main .pm__btn[data-role="all"]:hover {
  background: #F0C800 !important;
  color: #155389 !important;
  transform: translateY(-1px) !important;
}

#cc-main .pm__btn[data-role="all"]:active {
  transform: translateY(0) !important;
}

/* Modale na urządzeniach mobilnych */
@media (max-width: 639px) {
  #cc-main .pm,
  #cc-main .pm--box {
    width: calc(100% - 20px) !important;
    max-height: 94vh !important;
    border-radius: 20px !important;
  }

  .cc-cookie-icon--pm {
    top: -24px !important;
    left: 18px !important;
    width: 48px !important;
    height: 48px !important;
  }

  #cc-main .pm__header {
    padding: 20px 18px 0 18px !important;
  }

  #cc-main .pm__title {
    font-size: 18px !important;
  }

  #cc-main .pm__close-btn {
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
  }

  #cc-main .pm__body {
    padding: 10px 18px 4px 18px !important;
  }

  #cc-main .pm__section:first-child .pm__section-desc {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }

  #cc-main .pm__section--toggle {
    padding: 13px 15px !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
  }

  #cc-main .pm__section--toggle .pm__section-title {
    font-size: 14px !important;
  }

  #cc-main .pm__section--toggle .pm__section-desc {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  #cc-main .pm__footer {
    padding: 14px 18px 18px 18px !important;
    border-radius: 0 0 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #cc-main .pm__footer .pm__btn-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
  }

  #cc-main .pm__footer .pm__btn-group:has(.pm__btn[data-role="all"]),
  #cc-main .pm__footer .pm__btn-group:nth-child(1) {
    order: 1 !important;
  }

  #cc-main .pm__footer .pm__btn-group:has(.pm__btn[data-role="save"]),
  #cc-main .pm__footer .pm__btn-group:nth-child(2) {
    order: 2 !important;
  }

  #cc-main .pm__btn[data-role="save"],
  #cc-main .pm__btn[data-role="all"] {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    height: 46px !important;
    font-size: 14px !important;
    padding: 0 16px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}