/* ===== Cioraderm Settings Modal ===== */
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__backdrop, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__backdrop, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 20, 0.42);
  animation: cio-modal-fade 0.2s ease;
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__panel, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__panel, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ececed;
  padding: 28px 28px 26px;
  animation: cio-modal-pop 0.22s ease;
}

@keyframes cio-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cio-modal-pop {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__head, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__head, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__title, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__title, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__title {
  font-size: var(--cio-smodal-title-size, 19px);
  font-weight: var(--cio-smodal-title-weight, 500);
  color: var(--cio-smodal-title-color, #131313);
  margin: 0;
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__x, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__x, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__x {
  background: none;
  border: none;
  cursor: pointer;
  color: #8a8a8a;
  padding: 4px;
  display: inline-flex;
  transition: color 0.15s ease;
}
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__x:hover, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__x:hover, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__x:hover { color: #131313; }

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__form, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__form, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__row, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__row, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__field, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__field, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__label, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__label, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__label {
  font-size: var(--cio-smodal-label-size, 12px);
  font-weight: var(--cio-smodal-label-weight, 500);
  letter-spacing: 0.03em;
  color: var(--cio-smodal-label-color, #6b6666);
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__input, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__input, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 13px;
  background: #fefdfd;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  font-size: var(--cio-smodal-input-size, 14px);
  color: var(--cio-smodal-input-color, #333);
  font-family: inherit;
  transition: border-color 0.15s ease;
  font-weight: var(--cio-smodal-input-weight, inherit);
}
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__input:focus, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__input:focus, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__input:focus {
  outline: none;
  border-color: #4b2f4f;
}
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__input--ro, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__input--ro, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__input--ro {
  background: #f4f2f2;
  color: #9a9595;
  cursor: not-allowed;
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__err, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__err, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__err {
  font-size: var(--cio-smodal-err-size, 12px);
  color: var(--cio-smodal-err-color, #e5484d);
  font-weight: var(--cio-smodal-err-weight, inherit);
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__alert, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__alert, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__alert {
  margin: 0;
  padding: 10px 12px;
  background: rgba(229, 72, 77, 0.08);
  border: 1px solid #e5484d;
  color: var(--cio-smodal-alert-color, #e5484d);
  font-size: var(--cio-smodal-alert-size, 13px);
  font-weight: var(--cio-smodal-alert-weight, inherit);
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__ok, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__ok, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__ok {
  margin: 0;
  padding: 10px 12px;
  background: rgba(90, 160, 110, 0.1);
  border: 1px solid #5aa06e;
  color: #3f7a52;
  font-size: var(--cio-smodal-alert-size, 13px);
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__check, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__check, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin-top: 2px;
}
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__check input, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__check input, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__check input {
  margin-top: 3px;
  accent-color: #4b2f4f;
  width: 15px;
  height: 15px;
  flex: none;
}
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__check-body, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__check-body, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__check-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__check-label, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__check-label, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__check-label {
  font-size: var(--cio-smodal-check-size, 13.5px);
  color: var(--cio-smodal-check-color, #131313);
  font-weight: var(--cio-smodal-check-weight, inherit);
}
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__check-desc, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__check-desc, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__check-desc {
  font-size: var(--cio-smodal-check-size, 12px);
  color: #9a9595;
  line-height: 1.35;
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__actions, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__actions, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__btn, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__btn, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__btn {
  flex: 1;
  height: 46px;
  border-radius: 0;
  font-family: inherit;
  font-size: var(--cio-smodal-btn-size, 14px);
  font-weight: var(--cio-smodal-btn-weight, 500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  color: var(--cio-smodal-btn-color, inherit);
}
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__btn--primary, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__btn--primary, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__btn--primary {
  background: #4b2f4f;
  color: #fff;
  border: 1px solid #4b2f4f;
}
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__btn--primary:hover, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__btn--primary:hover, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__btn--primary:hover { opacity: 0.92; }
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__btn--primary:disabled, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__btn--primary:disabled, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__btn--primary:disabled { opacity: 0.6; cursor: default; }
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__btn--ghost, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__btn--ghost, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__btn--ghost {
  background: none;
  border: 1px solid #e0e0e0;
  color: #6b6666;
}
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__btn--ghost:hover, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__btn--ghost:hover, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__btn--ghost:hover { border-color: #4b2f4f; color: #4b2f4f; }
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__btn:focus-visible, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__btn:focus-visible, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__btn:focus-visible {
  outline: 2px solid #4b2f4f;
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__row, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__row, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__backdrop, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__backdrop, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__backdrop, .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__panel, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__panel, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__panel { animation: none; }
}

/* Mobile size overrides — each falls back to its desktop var, then the default. */
@media (max-width: 767px) {
  .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__title, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__title, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__title {
    font-size: var(--cio-smodal-title-size-m, var(--cio-smodal-title-size, 19px));
  }
  .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__label, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__label, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__label {
    font-size: var(--cio-smodal-label-size-m, var(--cio-smodal-label-size, 12px));
  }
  .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__input, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__input, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__input {
    font-size: var(--cio-smodal-input-size-m, var(--cio-smodal-input-size, 14px));
  }
  .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__err, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__err, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__err {
    font-size: var(--cio-smodal-err-size-m, var(--cio-smodal-err-size, 12px));
  }
  .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__alert, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__alert, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__alert {
    font-size: var(--cio-smodal-alert-size-m, var(--cio-smodal-alert-size, 13px));
  }
  .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__check-label, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__check-label, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__check-label {
    font-size: var(--cio-smodal-check-size-m, var(--cio-smodal-check-size, 13.5px));
  }
  .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__btn, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__btn, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__btn {
    font-size: var(--cio-smodal-btn-size-m, var(--cio-smodal-btn-size, 14px));
  }
}

/* Merchant-controlled button side padding. Appended last so it wins over the
   rules above (breakpoint blocks included); the fallbacks are what those
   rules already produce, so an unset prop leaves the button unchanged. */
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__btn, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__btn, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__btn {
  padding-left: var(--cio-btn-smBtn-l, 0);
  padding-right: var(--cio-btn-smBtn-r, 0);
}
.cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__x, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__x, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__x {
  padding-left: var(--cio-btn-smClose-l, 4px);
  padding-right: var(--cio-btn-smClose-r, 4px);
}
@media (max-width: 767px) {
  .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__btn, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__btn, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__btn {
    padding-left: var(--cio-btn-smBtn-l-m, var(--cio-btn-smBtn-l, 0));
    padding-right: var(--cio-btn-smBtn-r-m, var(--cio-btn-smBtn-r, 0));
  }
  .cc_MdNZYCy9lp_7XEylOSZU7 .cio-modal__x, .cc_MdNZYCy9lp_J9rMXh01XW .cio-modal__x, .cc_MdNZYCy9lp_HgtGjusY0S .cio-modal__x {
    padding-left: var(--cio-btn-smClose-l-m, var(--cio-btn-smClose-l, 4px));
    padding-right: var(--cio-btn-smClose-r-m, var(--cio-btn-smClose-r, 4px));
  }
}