/* =========================================================
   Chakloon UI
   AUTO-GENERATED FILE
   Не редагуй цей файл вручну.
   Використовуй chakloon-ui.base.css для базових стилів.
   ========================================================= */

/* ===== BASE CSS ===== */
:root {
  --ck-color-bg: #f5f7fb;
  --ck-color-surface: #ffffff;
  --ck-color-border: #e3e8f2;
  --ck-color-text: #0f172a;
  --ck-color-text-soft: #667085;
  --ck-color-primary: #111827;
  --ck-color-primary-contrast: #ffffff;
  --ck-color-secondary: #eef2f7;
  --ck-color-accent: #4f46e5;
  --ck-color-accent-contrast: #ffffff;
  --ck-color-success: #16a34a;
  --ck-color-danger: #dc2626;

  --ck-radius-sm: 10px;
  --ck-radius-md: 14px;
  --ck-radius-lg: 18px;
  --ck-radius-xl: 24px;

  --ck-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --ck-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);

  --ck-space-1: 4px;
  --ck-space-2: 8px;
  --ck-space-3: 12px;
  --ck-space-4: 16px;
  --ck-space-5: 20px;
  --ck-space-6: 24px;
  --ck-space-8: 32px;

  --ck-font-size-sm: 14px;
  --ck-font-size-md: 16px;
  --ck-font-size-lg: 18px;
  --ck-font-size-xl: 24px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--ck-color-text);
  background: var(--ck-color-bg);
}

button,
input,
textarea,
select {
  font: inherit;
}

.ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--ck-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: 0.2s ease;
  text-decoration: none;
  font-weight: 600;
}

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

.ck-btn--primary {
  background: var(--ck-color-primary);
  color: var(--ck-color-primary-contrast);
}

.ck-btn--primary:hover {
  opacity: 0.95;
}

.ck-btn--secondary {
  background: var(--ck-color-secondary);
  color: var(--ck-color-text);
  border-color: var(--ck-color-border);
}

.ck-btn--accent {
  background: var(--ck-color-accent);
  color: var(--ck-color-accent-contrast);
}

.ck-btn--danger {
  background: var(--ck-color-danger);
  color: #fff;
}

.ck-input,
.ck-select,
.ck-textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ck-color-border);
  border-radius: var(--ck-radius-md);
  background: #fff;
  color: var(--ck-color-text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ck-textarea {
  min-height: 120px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

.ck-input:focus,
.ck-select:focus,
.ck-textarea:focus {
  border-color: var(--ck-color-accent);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.ck-card {
  background: var(--ck-color-surface);
  border: 1px solid var(--ck-color-border);
  border-radius: var(--ck-radius-lg);
  box-shadow: var(--ck-shadow-sm);
  padding: var(--ck-space-6);
}

.ck-card__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
}

.ck-card__text {
  margin: 0;
  color: var(--ck-color-text-soft);
  line-height: 1.6;
}

.ck-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #eef2ff;
  color: #3730a3;
}

.ck-alert {
  padding: 16px 18px;
  border-radius: var(--ck-radius-md);
  border: 1px solid var(--ck-color-border);
  background: #fff;
}

.ck-alert--success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

.ck-alert--danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.ck-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ck-tab {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--ck-color-border);
  cursor: pointer;
  font-weight: 600;
}

.ck-tab.is-active {
  background: var(--ck-color-primary);
  color: #fff;
  border-color: var(--ck-color-primary);
}

.ck-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  z-index: 9999;
}

.ck-modal-backdrop.is-open {
  display: flex;
}

.ck-modal {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--ck-shadow-md);
  margin: auto 0;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.ck-modal__title {
  margin: 0 0 10px;
  font-size: 24px;
}

.ck-modal__text {
  margin: 0 0 20px;
  color: var(--ck-color-text-soft);
  line-height: 1.6;
}

.ck-modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ck-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ck-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ck-divider {
  width: 100%;
  height: 1px;
  background: var(--ck-color-border);
}

.ck-checkbox,
.ck-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--ck-color-text);
}

.ck-checkbox input,
.ck-radio input {
  margin: 0;
  width: 16px;
  height: 16px;
}

.ck-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.ck-switch input {
  display: none;
}

.ck-switch__track {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  transition: 0.2s ease;
}

.ck-switch__thumb {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.ck-switch input:checked + .ck-switch__track {
  background: var(--ck-color-accent);
}

.ck-switch input:checked + .ck-switch__track .ck-switch__thumb {
  left: 22px;
}

.ck-table-wrap {
  width: 100%;
  overflow: auto;
}

.ck-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--ck-color-border);
  border-radius: 16px;
  overflow: hidden;
}

.ck-table th,
.ck-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--ck-color-border);
  font-size: 14px;
}

.ck-table th {
  background: #f8fafc;
  font-weight: 700;
}

.ck-table tr:last-child td {
  border-bottom: 0;
}

.ck-pagination {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ck-page-btn {
  min-width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--ck-color-border);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}

.ck-page-btn.is-active {
  background: var(--ck-color-primary);
  color: #fff;
  border-color: var(--ck-color-primary);
}

.ck-dropdown {
  position: relative;
  display: inline-block;
}

.ck-dropdown__toggle {
  min-height: 44px;
}

.ck-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--ck-color-border);
  border-radius: 16px;
  box-shadow: var(--ck-shadow-md);
  padding: 8px;
  display: none;
  z-index: 30;
}

.ck-dropdown.is-open .ck-dropdown__menu {
  display: block;
}

.ck-dropdown__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 12px 12px;
  border-radius: 12px;
  cursor: pointer;
}

.ck-dropdown__item:hover {
  background: #f3f4f6;
}

.ck-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.ck-accordion__item {
  border: 1px solid var(--ck-color-border);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.ck-accordion__button {
  width: 100%;
  min-height: 54px;
  padding: 16px 18px;
  background: #fff;
  border: 0;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}

.ck-accordion__content {
  display: none;
  padding: 0 18px 18px;
  color: var(--ck-color-text-soft);
  line-height: 1.6;
}

.ck-accordion__item.is-open .ck-accordion__content {
  display: block;
}

.ck-section-title {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 800;
}

.ck-section-text {
  margin: 0;
  color: var(--ck-color-text-soft);
  line-height: 1.7;
  font-size: 16px;
}

.ck-hero {
  width: 100%;
  padding: 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, #111827 0%, #312e81 100%);
  color: #fff;
}

.ck-hero__title {
  margin: 0 0 14px;
  font-size: 42px;
  line-height: 1.05;
}

.ck-hero__text {
  margin: 0 0 24px;
  max-width: 640px;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
}

.ck-stat-card {
  min-width: 180px;
  padding: 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--ck-color-border);
}

.ck-stat-card__label {
  font-size: 13px;
  color: var(--ck-color-text-soft);
  margin-bottom: 8px;
}

.ck-stat-card__value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.ck-foundation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  width: 100%;
}

.ck-color-token {
  border: 1px solid var(--ck-color-border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.ck-color-token__swatch {
  height: 88px;
  border-bottom: 1px solid var(--ck-color-border);
}

.ck-color-token__body {
  padding: 14px;
}

.ck-color-token__name {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
}

.ck-color-token__value {
  margin: 0;
  font-size: 13px;
  color: var(--ck-color-text-soft);
}

.ck-type-scale {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.ck-type-row {
  padding: 16px 18px;
  border: 1px solid var(--ck-color-border);
  border-radius: 16px;
  background: #fff;
}

.ck-space-scale {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.ck-space-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: center;
}

.ck-space-bar {
  height: 16px;
  background: var(--ck-color-accent);
  border-radius: 999px;
}

@media (max-width: 767px) {
  .ck-hero {
    padding: 28px;
  }

  .ck-hero__title {
    font-size: 30px;
  }

  .ck-section-title {
    font-size: 26px;
  }
}

/* ===== ELEMENT: ckln-head-blue-btn | Header Button ===== */
.ck-btn {
  height: 32px;
  padding: 0 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  box-sizing: border-box;
  transition: .2s ease;
}

.ck-btn--ghost {
  background: #f3f9ff;
  color: #3b9de3;
  border: 1px solid #7ec0ee;
}
.ck-btn--ghost:hover {
  background: #eaf5ff;
}

/* ===== ELEMENT: ckln-head-btn | Header Button (Blue) ===== */
.ck-btn--primary {
  background: #49a4e6;
  color: #fff;
  border: 1px solid #49a4e6;
  box-shadow: 0 2px 8px rgba(73, 164, 230, .25);
}

.ck-btn--primary:hover {
  background: #3b9bdb;
  border-color: #3b9bdb;
}

/* ===== ELEMENT: ckln-publish | Publish Button ===== */
.ck-btn--primary {
  background: #49a4e6;
  color: #fff;
  border: 1px solid #49a4e6;
  box-shadow: 0 2px 8px rgba(73, 164, 230, .25);
}

.ck-btn--primary:hover {
  background: #3b9bdb;
  border-color: #3b9bdb;
}

/* ===== ELEMENT: ck-mobile-compose | Mobile Compose Button ===== */
.ck-mobile-compose {
  display: none;
}

@media (max-width: 768px) {
  .ck-mobile-compose {
    display: inline-flex;
    position: fixed;
    right: 8px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #45A4E1;
    color: #fff;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(69, 164, 225, .35);
    z-index: 1201;
  }

  .ck-mobile-compose svg {
    width: 24px;
    height: 24px;
    display: block;
    flex: 0 0 24px;
  }
}

/* ===== ELEMENT: ckln-btn-auth-primary | Primary Login Button ===== */
/* --- DESKTOP (Base) --- */
.ckln-btn-auth-primary {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 103px;
  gap: 10px;
  width: 350px;
  height: 38px;
  box-sizing: border-box;
  
  border: none;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease-in-out;

  background: #45A4E1;
  box-shadow: 0px 2px 10px rgba(114, 200, 255, 0.8);
  border-radius: 10px;

  color: #FAFAFA;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
}

.ckln-btn-auth-primary:hover {
  background: #2896DD;
  box-shadow: 0px 2px 15px rgba(17, 142, 223, 0.8);
}

/* --- TABLET (max-width: 768px) --- */
@media (max-width: 768px) {
  .ckln-btn-auth-primary {
    width: 320px;
    height: 42px;
    padding: 12px 80px;
    font-size: 15px;
  }
}

/* --- MOBILE (max-width: 480px) --- */
@media (max-width: 480px) {
  .ckln-btn-auth-primary {
    width: 100%;
    max-width: 300px;
    height: 46px;
    padding: 12px 20px;
    font-size: 16px;
  }
}

.ckln-btn-auth-primary:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}

/* ===== ELEMENT: ckln-btn-auth-secondary | Secondary Login Button ===== */
/* --- DESKTOP (Base) --- */
.ckln-btn-auth-secondary {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 15px;
  gap: 10px;
  width: 350px;
  height: 38px;
  box-sizing: border-box;

  background: #F9FAFB;
  border: 1px solid #DEE5EE;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  color: #1F1F1F;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
}

.ckln-btn-auth-secondary:hover {
  background: #F3F3F3;
}

/* --- TABLET (max-width: 768px) --- */
@media (max-width: 768px) {
  .ckln-btn-auth-secondary {
    width: 320px;
    height: 42px; /* Збільшена висота для зручності натискання */
    font-size: 15px;
  }
}

/* --- MOBILE (max-width: 480px) --- */
@media (max-width: 480px) {
  .ckln-btn-auth-secondary {
    width: 100%; /* Гумова ширина для мобільних */
    max-width: 300px;
    height: 44px;
    padding: 10px;
    font-size: 16px; /* Оптимально для мобільного тексту */
  }
}

/* ===== ELEMENT: composer-box-row | Composer Box Row ===== */
.composer-box__row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
}

.composer-box__media-btn {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: #222;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}

.composer-box__media-btn svg {
  width: 19px;
  height: 19px;
  display: block;
}

.composer-box__textarea {
  flex: 1 1 auto;
  min-height: 24px;
  height: 24px;
  max-height: 120px;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  line-height: 24px;
  color: #2b2d31;
  padding: 0 8px 0 14px;
  margin: 0;
  overflow: hidden;
}

.composer-box__textarea::placeholder {
  color: #8e959c;
}

.composer-box__submit {
  flex: 0 0 auto;
  height: 34px;
  min-width: 90px;
  border: 0;
  border-radius: 12px;
  background: #47a5e7;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 0 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(71, 165, 231, .28);
  margin-right: 4px;
}

.composer-box__submit:disabled {
  opacity: .45;
  cursor: default;
  box-shadow: none;
}

@media (max-width: 640px) {
  .composer-box__media-item {
    width: calc(33.333% - 4px);
    min-width: 90px;
    flex: 0 0 calc(33.333% - 4px);
    height: 120px;
  }

  .composer-box__row {
    gap: 10px;
  }

  .composer-box__submit {
    min-width: 64px;
    padding: 0 14px;
  }
}

/* ===== ELEMENT: people-search-form | People Search Form ===== */
.people-search {
  margin-bottom: 14px;
}

.people-search__field {
  position: relative;
  display: block;
}

.people-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #98a1ab;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.people-search__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.people-search__input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid #d9e1e8;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  color: #111;
  outline: none;
  box-sizing: border-box;
}

.people-search__input::placeholder {
  color: #98a1ab;
}

/* ===== ELEMENT: ckln-language-dropdown-01 | Language Dropdown / Вибір мови ===== */
#ckln-language-dropdown-01.ckln-language-dropdown {
  --ckln-dropdown-width: 350px;
  --ckln-dropdown-height: 38px;
  --ckln-dropdown-radius: 10px;
  --ckln-dropdown-border: #DEE5EE;
  --ckln-dropdown-text: #1F1F1F;
  --ckln-dropdown-hover: #F9FAFB;
  --ckln-dropdown-bg: #FFFFFF;

  position: relative;
  width: var(--ckln-dropdown-width);
  height: var(--ckln-dropdown-height);
  box-sizing: border-box;
  background: var(--ckln-dropdown-bg);
  border: 1px solid var(--ckln-dropdown-border);
  border-radius: var(--ckln-dropdown-radius);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  transition: height 0.22s ease, box-shadow 0.22s ease;
}

#ckln-language-dropdown-01.ckln-language-dropdown.ckln-is-open {
  height: 190px;
}

#ckln-language-dropdown-01 .ckln-language-dropdown__trigger {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 12px 15px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
}

#ckln-language-dropdown-01 .ckln-language-dropdown__value {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  color: var(--ckln-dropdown-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ckln-language-dropdown-01 .ckln-language-dropdown__icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ckln-dropdown-text);
}

#ckln-language-dropdown-01 .ckln-language-dropdown__chevron {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform 0.22s ease;
}

#ckln-language-dropdown-01.ckln-is-open .ckln-language-dropdown__chevron {
  transform: rotate(180deg);
}

#ckln-language-dropdown-01 .ckln-language-dropdown__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background: var(--ckln-dropdown-bg);
}

#ckln-language-dropdown-01 .ckln-language-dropdown__item {
  width: 100%;
  height: 38px;
  border-top: 1px solid var(--ckln-dropdown-border);
  box-sizing: border-box;
}

#ckln-language-dropdown-01 .ckln-language-dropdown__option {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px 15px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  cursor: pointer;

  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  color: var(--ckln-dropdown-text);
  text-align: left;
}

#ckln-language-dropdown-01 .ckln-language-dropdown__option:hover,
#ckln-language-dropdown-01 .ckln-language-dropdown__option:focus-visible {
  background: var(--ckln-dropdown-hover);
  outline: none;
}

#ckln-language-dropdown-01 .ckln-language-dropdown__trigger:focus-visible {
  outline: none;
}

#ckln-language-dropdown-01.ckln-is-open .ckln-language-dropdown__trigger {
  border-bottom: 0;
}

@media (max-width: 374px) {
  #ckln-language-dropdown-01.ckln-language-dropdown {
    width: 100%;
  }
}

/* ===== ELEMENT: ckln-registration-fields-01 | Registration Fields / Ім’я, Прізвище, Нікнейм, Email, Пароль ===== */
#ckln-registration-fields-01.ckln-registration-fields {
  width: 350px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Inter', sans-serif;
}

#ckln-registration-fields-01 .ckln-registration-fields__row {
  display: grid;
  grid-template-columns: 170px 170px;
  gap: 10px;
}

#ckln-registration-fields-01 .ckln-form-field {
  width: 100%;
}

#ckln-registration-fields-01 .ckln-form-field__label {
  display: block;
  margin: 0 0 6px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 15px;
  color: #1F1F1F;
}

#ckln-registration-fields-01 .ckln-form-field__control-wrap {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 12px 15px;
  background: #FFFFFF;
  border: 1px solid #DEE5EE;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

#ckln-registration-fields-01 .ckln-form-field__control {
  width: 100%;
  min-width: 0;
  height: 14px;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;

  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  color: #1F1F1F;
}

#ckln-registration-fields-01 .ckln-form-field__control::placeholder {
  color: rgba(31, 31, 31, 0.5);
  opacity: 1;
}

#ckln-registration-fields-01 .ckln-form-field__control-wrap:hover,
#ckln-registration-fields-01 .ckln-form-field:focus-within .ckln-form-field__control-wrap {
  border-color: #45A4E1;
  box-shadow: 0px 1px 6px rgba(69, 164, 225, 0.8);
}

#ckln-registration-fields-01 .ckln-form-field.ckln-is-filled .ckln-form-field__control-wrap {
  background: #F9FAFB;
}

#ckln-registration-fields-01 .ckln-form-field.ckln-is-error .ckln-form-field__control-wrap {
  border-color: rgba(220, 39, 39, 0.5);
  box-shadow: 0px 1px 6px rgba(220, 39, 39, 0.5);
}

#ckln-registration-fields-01 .ckln-form-field.ckln-is-error .ckln-form-field__control-wrap:hover,
#ckln-registration-fields-01 .ckln-form-field.ckln-is-error:focus-within .ckln-form-field__control-wrap {
  border-color: rgba(220, 39, 39, 0.5);
  box-shadow: 0px 1px 6px rgba(220, 39, 39, 0.5);
}

#ckln-registration-fields-01 .ckln-form-field--password .ckln-form-field__control {
  padding-right: 24px;
}

#ckln-registration-fields-01 .ckln-form-field__toggle {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#ckln-registration-fields-01 .ckln-form-field__toggle:focus {
  outline: none;
}

#ckln-registration-fields-01 .ckln-form-field__toggle-icon {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#ckln-registration-fields-01 .ckln-form-field__toggle-icon--open {
  opacity: 0;
  pointer-events: none;
}

#ckln-registration-fields-01 .ckln-form-field__toggle.ckln-is-active .ckln-form-field__toggle-icon--closed {
  opacity: 0;
  pointer-events: none;
}

#ckln-registration-fields-01 .ckln-form-field__toggle.ckln-is-active .ckln-form-field__toggle-icon--open {
  opacity: 1;
  pointer-events: auto;
}

#ckln-registration-fields-01 .ckln-form-field__hint {
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: rgba(31, 31, 31, 0.5);
}

#ckln-registration-fields-01 .ckln-form-field__error-text {
  display: none;
  margin: 6px 0 0;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
  color: #DC2727;
}

#ckln-registration-fields-01 .ckln-form-field.ckln-is-error .ckln-form-field__error-text {
  display: block;
}

@media (max-width: 374px) {
  #ckln-registration-fields-01.ckln-registration-fields {
    width: 100%;
  }

  #ckln-registration-fields-01 .ckln-registration-fields__row {
    grid-template-columns: 1fr;
  }
}

/* ===== ELEMENT: ckln-icons-system-01 | Icons System / Unified Hover Color ===== */
#ckln-icons-full-set-01.ckln-icons-full-set {
  --ckln-icon-color: #1F1F1F;
  --ckln-icon-hover-color: #45A4E1;
  --ckln-icon-bg: #FFFFFF;
  --ckln-icon-border: #DEE5EE;
  --ckln-icon-transition: 0.2s ease;
  --ckln-icon-label: rgba(31, 31, 31, 0.7);
}

#ckln-icons-full-set-01 .ckln-icons-full-set__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

#ckln-icons-full-set-01 .ckln-icons-full-set__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#ckln-icons-full-set-01 .ckln-icons-full-set__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  padding: 12px;
  border: 1px solid var(--ckln-icon-border);
  border-radius: 12px;
  background: var(--ckln-icon-bg);
  color: var(--ckln-icon-color);
  cursor: pointer;
  transition:
    color var(--ckln-icon-transition),
    border-color var(--ckln-icon-transition),
    box-shadow var(--ckln-icon-transition),
    background-color var(--ckln-icon-transition);
}

#ckln-icons-full-set-01 .ckln-icons-full-set__item:hover,
#ckln-icons-full-set-01 .ckln-icons-full-set__item:focus-visible {
  color: var(--ckln-icon-hover-color);
  border-color: rgba(69, 164, 225, 0.35);
  box-shadow: 0px 1px 6px rgba(69, 164, 225, 0.18);
  outline: none;
}

#ckln-icons-full-set-01 .ckln-icons-full-set__label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  color: var(--ckln-icon-label);
  text-align: center;
  transition: color var(--ckln-icon-transition);
}

#ckln-icons-full-set-01 .ckln-icons-full-set__item:hover .ckln-icons-full-set__label,
#ckln-icons-full-set-01 .ckln-icons-full-set__item:focus-visible .ckln-icons-full-set__label {
  color: var(--ckln-icon-hover-color);
}

#ckln-icons-full-set-01 .ckln-icon {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

#ckln-icons-full-set-01 .ckln-icon--16 {
  width: 16px;
  height: 16px;
}

#ckln-icons-full-set-01 .ckln-icon--20 {
  width: 20px;
  height: 20px;
}

#ckln-icons-full-set-01 .ckln-icon--24 {
  width: 24px;
  height: 24px;
}

#ckln-icons-full-set-01 .ckln-icon use,
#ckln-icons-full-set-01 .ckln-icon path,
#ckln-icons-full-set-01 .ckln-icon circle,
#ckln-icons-full-set-01 .ckln-icon rect,
#ckln-icons-full-set-01 .ckln-icon line,
#ckln-icons-full-set-01 .ckln-icon polyline,
#ckln-icons-full-set-01 .ckln-icon polygon,
#ckln-icons-full-set-01 .ckln-icon ellipse {
  transition: fill var(--ckln-icon-transition), stroke var(--ckln-icon-transition);
}

@media (max-width: 767px) {
  #ckln-icons-full-set-01 .ckln-icons-full-set__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  #ckln-icons-full-set-01 .ckln-icons-full-set__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== ELEMENT: ckln-mask | Image Mask — Superlips ===== */
.ck-mask {
  --ck-size: 48px;

  width: var(--ck-size);
  height: var(--ck-size);
  display: inline-block;
}

.ck-mask__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 822 819' xmlns='http://www.w3.org/2000/svg'><path d='M0 408.781C0 72.1498 72.3593 0 409.212 0C746.066 0 821.712 72.1498 821.712 408.781C821.712 745.412 746.066 819 409.212 819C72.3593 819 0 745.412 0 408.781Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;

  mask-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 822 819' xmlns='http://www.w3.org/2000/svg'><path d='M0 408.781C0 72.1498 72.3593 0 409.212 0C746.066 0 821.712 72.1498 821.712 408.781C821.712 745.412 746.066 819 409.212 819C72.3593 819 0 745.412 0 408.781Z' fill='black'/></svg>");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* ===== ELEMENT: ckln-services-menu | Chakloon Header Menu ===== */
.ck-services-menu {
  position: relative;
  display: inline-flex;
}

.ck-services-menu__dropdown {
  position: fixed;
  top: var(--ck-services-menu-top, 56px);
  left: var(--ck-services-menu-left, auto);
  right: var(--ck-services-menu-right, 16px);
  z-index: 1000;
}

.ck-services-menu__card {
  width: 298px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(69, 164, 225, 0.08);
  overflow: hidden;
}

.ck-services-menu__label {
  padding: 20px 20px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #7f858d;
  letter-spacing: 0.03em;
}

.ck-services-menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px;
  padding: 8px 18px 18px;
}

.ck-services-menu__item {
  text-decoration: none;
  color: #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.ck-services-menu__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #4ea5e3;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(78, 165, 227, 0.18);
}

.ck-services-menu__text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: #111;
}

.ck-services-menu__footer {
  border-top: 1px solid #eef2f5;
  padding: 16px 20px;
  display: flex;
  justify-content: center;
}

.ck-services-menu__all {
  color: #45A4E1;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.ck-topbar__apps {
  width: 36px;
  height: 36px;
  border: 0;
  background: #eaf4fb;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ck-topbar__apps svg {
  width: 18px;
  height: 18px;
  fill: #8d9299;
  display: block;
}

/* ===== ELEMENT: ckln-account-menu | Account Menu ===== */
.ck-account-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ck-account-menu__toggle {
  border: 0;
  cursor: pointer;
}

.ck-account-menu__dropdown {
  position: fixed;
  top: var(--ck-account-menu-top, 56px);
  left: var(--ck-account-menu-left, 156px);
  right: var(--ck-account-menu-right, 16px);
  z-index: 1100;
}

.ck-account-menu__card {
  width: 250px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(69, 164, 225, 0.08);
  overflow: hidden;
}

.ck-account-menu__section-title {
  padding: 22px 22px 10px;
  font-size: 10px;
  font-weight: 700;
  color: #7e848c;
  letter-spacing: 0.03em;
}

.ck-account-menu__profile-link {
  display: block;
  padding: 0 22px 18px;
  text-decoration: none;
}

.ck-account-menu__name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: #222;
}

.ck-account-menu__email {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: #7c7c7c;
}

.ck-account-menu__divider {
  height: 1px;
  background: #e8f1f8;
}

.ck-account-menu__actions {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ck-account-menu__logout-form {
  margin: 0;
}

.ck-account-menu__action {
  width: 100%;
  min-height: 38px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
}

.ck-account-menu__action--edit {
  background: #eef7ff;
  color: #45A4E1;
}

.ck-account-menu__action--logout {
  background: #fff1f1;
  color: #ef2f2f;
}

.ck-account-menu__action-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
}

.ck-account-menu__action-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.ck-account-menu__profile-link:hover .ck-account-menu__name,
.ck-account-menu__profile-link:hover .ck-account-menu__email {
  opacity: 0.92;
}

.ck-account-menu__action:hover {
  filter: brightness(0.99);
}

/* ===== ELEMENT: post-menu-dropdown | Post Menu Dropdown ===== */
.feed-preview-card__actions {
  flex: 0 0 auto;
}

.post-menu {
  position: relative;
}

.post-menu__dropdown {
  position: absolute;
  top: 26px;
  right: 0;
  min-width: 148px;
  background: #fff;
  border: 1px solid rgba(69, 164, 225, 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
  overflow: hidden;
  z-index: 30;
}

.post-menu__item {
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: #fff;
  color: #2b2d31;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.post-menu__item:hover {
  background: #f7fbfe;
}

.post-menu__item.danger {
  color: #2b2d31;
}

.post-menu__icon {
  width: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  line-height: 1;
}

/* ===== ELEMENT: ck-sidebar-item | Sidebar Vertical ===== */
.ck-sidebar__item {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #222;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.ck-sidebar__item:hover {
  background: #eef6fd;
}

.ck-sidebar__item--active {
  width: 40px;
  height: 40px;
  margin-left: -4px;
  background: #dceefe;
  color: #45A4E1;
}

.ck-sidebar__icon {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 24px;
}

/* ===== ELEMENT: ck-mobile-nav-item | Sidebar Mobile ===== */
.ck-mobile-nav__item {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #333;
  text-decoration: none;
}

.ck-mobile-nav__item svg {
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 22px;
}

.ck-mobile-nav__item.is-active {
  color: #45A4E1;
}

/* ===== ELEMENT: ckln-desktop-menu-01 | Desktop Side Menu / Home Search Profile ===== */
/* --- ЗАГАЛЬНІ НАЛАШТУВАННЯ --- */
:root {
    --ck-sidebar-bg: rgba(245, 247, 251, 0.45);
    --ck-sidebar-blur: blur(18px) saturate(140%);
    --ck-accent-soft: color-mix(in srgb, var(--ck-color-accent, #FF8000) 20%, transparent);
    --ck-text-dim: rgba(31, 31, 31, 0.8);
}

/* --- ДЕСКТОПНИЙ САЙДБАР --- */
.ckln-sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    width: 60px;
    height: calc(100dvh - 60px);

    background: var(--ck-sidebar-bg);
    backdrop-filter: var(--ck-sidebar-blur);
    -webkit-backdrop-filter: var(--ck-sidebar-blur);

    border-right: 1px solid rgba(255, 255, 255, 0.25);

    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 99998;

    box-shadow: none;
    filter: none;
}

.ckln-sidebar:hover {
    width: 200px;
}

.ckln-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 20px 7px 20px 13px;
    gap: 8px;
}

.ckln-nav-item {
    display: flex;
    align-items: center;
    height: 40px;
    width: 40px;

    text-decoration: none;
    border-radius: 20px;
    color: var(--ck-text-dim);

    transition:
        width 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

    white-space: nowrap;
}

.ckln-sidebar:hover .ckln-nav-item {
    width: 180px;
}

.ckln-nav-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.ckln-nav-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.ckln-nav-label {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;

    opacity: 0;
    margin-left: 12px;
    padding-top: 1px;

    color: currentColor;

    transition: opacity 0.2s ease;
}

.ckln-sidebar:hover .ckln-nav-label {
    opacity: 1;
}

/* Активний стан та hover */
.ckln-nav-item:hover {
    background: var(--ck-accent-soft);
}

.ckln-nav-item.is-active {
    background: var(--ck-accent-soft);
    color: var(--ck-color-accent, #FF8000);
}

/* --- МОБІЛЬНИЙ ТУЛБАР --- */
.ckln-mobile-toolbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    z-index: 2000;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 360px;
    height: 55px;

    transform: translateX(-50%);

    background: var(--ck-sidebar-bg);
    backdrop-filter: var(--ck-sidebar-blur);
    -webkit-backdrop-filter: var(--ck-sidebar-blur);

    border: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0px 2px 15px rgba(255, 128, 0, 0.15);
    border-radius: 45px;
}

.ckln-toolbar-inner {
    display: flex;
    width: 304px;
    justify-content: space-around;
    align-items: center;
}

.ckln-toolbar-item {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    color: var(--ck-text-dim);
    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease,
        background-color 0.2s ease;

    border-radius: 999px;
}

.ckln-toolbar-item:hover {
    background: var(--ck-accent-soft);
}

.ckln-toolbar-item.is-active {
    color: var(--ck-color-accent, #FF8000);
}

.ckln-toolbar-item:active {
    transform: scale(0.9);
}

.ckln-toolbar-item svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* --- АДАПТИВНІСТЬ --- */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .ckln-mobile-toolbar {
        width: min(360px, calc(100vw - 30px));
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}

/* ===== ELEMENT: ck-brand-text | Brand Text ===== */
.ck-brand__text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

/* ===== ELEMENT: ckln-navigation-adaptive | Adaptive Navigation (Desktop Sidebar / Mobile Toolbar) ===== */
/* =========================================================
   CKLN SIDEBAR — DESKTOP + MOBILE TOOLBAR + POST SCREEN
========================================================= */

/* --- ЗАГАЛЬНІ НАЛАШТУВАННЯ --- */
:root {
    --ck-sidebar-bg: rgba(245, 247, 251, 0.55);
    --ck-sidebar-blur: blur(18px) saturate(140%);
    --ck-accent-soft: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 20%, transparent);
    --ck-text-dim: rgba(31, 31, 31, 0.8);
}

/* =========================================================
   DESKTOP SIDEBAR
========================================================= */

.ckln-sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    width: 60px;
    height: calc(100dvh - 60px);

    /*background: var(--ck-sidebar-bg);*/
    background: rgba(245, 247, 251, 0.55) !important;
    background-color: var(--ck-sidebar-bg);
    backdrop-filter: var(--ck-sidebar-blur);
    -webkit-backdrop-filter: var(--ck-sidebar-blur);

    border-right: 1px solid rgba(255, 255, 255, 0.25);

    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 99998;

    box-shadow: none;
    filter: none;
}

.ckln-sidebar *,
.ckln-sidebar *::before,
.ckln-sidebar *::after {
    box-sizing: border-box;
}

.ckln-sidebar:hover {
    width: 200px;
}

body .ckln-sidebar button.ckln-nav-item, body .ckln-sidebar .ckln-nav-item {
    justify-content: flex-start !important;
}
.ckln-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 20px 6px 20px 12px;
    gap: 8px;
}

.ckln-nav-item {
    display: flex;
    align-items: center;
    height: 40px;
    width: 40px;

    text-decoration: none;
    border-radius: 20px;
    color: var(--ck-text-dim);

    transition:
        width 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

    white-space: nowrap;
}

.ckln-sidebar:hover .ckln-nav-item {
    width: 180px;
}

.ckln-nav-icon {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.ckln-nav-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.ckln-nav-label {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;

    opacity: 0;
    margin-left: 12px;
    padding-top: 1px;

    color: currentColor;

    transition: opacity 0.2s ease;
}

.ckln-sidebar:hover .ckln-nav-label {
    opacity: 1;
}

.ckln-nav-item:hover {
    background: var(--ck-accent-soft);
}

.ckln-nav-item.is-active {
    background: var(--ck-accent-soft);
    color: var(--ck-color-accent, #45A4E1);
}

/* =========================================================
   MOBILE TOOLBAR
========================================================= */

.ckln-mobile-toolbar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;
    z-index: 2000 !important;

    width: min(460px, calc(100vw - 40px)) !important;
    height: 55px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(245, 247, 251, 0.72) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;

    border: 1px solid #DEE5EE !important;
    border-radius: 45px !important;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.ckln-mobile-toolbar *,
.ckln-mobile-toolbar *::before,
.ckln-mobile-toolbar *::after {
    box-sizing: border-box;
}

.ckln-toolbar-item {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    padding: 0 !important;
    margin: 0 !important;
}


.ckln-toolbar-item:hover {
    background: transparent;
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-toolbar-item.is-active {
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-toolbar-item:active {
    transform: scale(0.9);
}

.ckln-toolbar-item svg {
    display: block;
    width: 28px;
    height: 28px;
}

/* =========================================================
   MOBILE PLUS BUTTON
========================================================= */

.ckln-mobile-sidebar-fab,
.ckln-mobile-sidebar-fab.is-above-toolbar {
    position: fixed !important;
    right: 20px !important;
    bottom: 82px !important;

    width: 55px !important;
    height: 55px !important;
    min-width: 55px !important;
    min-height: 55px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 30px !important;
    background: var(--ck-color-accent, #FF8000) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--ck-color-accent, #FF8000) 45%, transparent) !important;    z-index: 2001 !important;

    font-size: 0 !important;
    line-height: 0 !important;
}

.ckln-mobile-sidebar-fab::before,
.ckln-mobile-sidebar-fab::after {
    content: none !important;
    display: none !important;
}

.ckln-mobile-sidebar-fab__icon {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
}

.ckln-mobile-sidebar-fab__icon path {
    fill: currentColor !important;
}

.ckln-mobile-sidebar-fab:active {
    transform: scale(0.94);
}

.ckln-mobile-sidebar-fab.is-above-toolbar {
    bottom: 85px;
}

/* =========================================================
   MOBILE SIDEBAR POST SCREEN
========================================================= */

.ckln-mobile-sidebar-post {
    position: fixed;
    inset: 0;
    z-index: 3000;

    box-sizing: border-box;
    width: 100vw;
    height: 100dvh;

    background: #FFFFFF;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    overflow: hidden;
}

.ckln-mobile-sidebar-post[hidden] {
    display: none !important;
}

.ckln-mobile-sidebar-post *,
.ckln-mobile-sidebar-post *::before,
.ckln-mobile-sidebar-post *::after {
    box-sizing: border-box;
}

.ckln-mobile-sidebar-post__header {
    position: absolute;
    top: 64px;
    left: 15px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: calc(100vw - 30px);
    height: 24px;
}

.ckln-mobile-sidebar-post__back {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin-top: 0;
    padding: 0;

    background: transparent;
    border: none;
    color: #1F1F1F;
    cursor: pointer;
}

.ckln-mobile-sidebar-post__back svg {
    display: block;
    width: 20px;
    height: 20px;
}

.ckln-mobile-sidebar-post__title {
    display: flex;
    align-items: center;

    width: auto;
    max-width: calc(100vw - 70px);
    height: 24px;
    margin: 0;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;

    color: #000000;
    white-space: nowrap;
}

.ckln-mobile-sidebar-post__author {
    position: absolute;
    top: 112px;
    left: 15px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: calc(100vw - 30px);
    height: 42px;
}

.ckln-mobile-sidebar-post__avatar {
    display: block;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    object-fit: cover;
    border-radius: 50%;
}

.ckln-mobile-sidebar-post__author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;

    width: calc(100vw - 82px);
    height: 36px;
    flex: 1 1 auto;
}

.ckln-mobile-sidebar-post__name {
    width: 100%;
    height: 19px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;

    color: #000000;
}

.ckln-mobile-sidebar-post__username {
    width: 100%;
    height: 15px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;

    color: rgba(0, 0, 0, 0.65);
}

.ckln-mobile-sidebar-post__field {
    position: absolute;
    top: 174px;
    left: 15px;

    width: calc(100vw - 30px);
    max-width: none;
    min-height: 92px;
    height: 92px;

    border: 1px solid #DEE5EE;
    border-radius: 12px;
    background: #FFFFFF;

    overflow: hidden;
}

.ckln-mobile-sidebar-post__textarea {
    display: block;

    width: 100%;
    min-height: 90px;
    height: 90px;
    max-height: 190px;
    padding: 13px 14px;

    resize: none;
    overflow-y: auto;

    background: transparent;
    border: none;
    outline: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;

    color: #000000;
}

.ckln-mobile-sidebar-post__textarea::placeholder {
    color: #000000;
    opacity: 1;
}

.ckln-mobile-sidebar-post__add-photo {
    position: absolute;
    top: 282px;
    left: 15px;
    z-index: 2;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;

    width: auto;
    min-width: 138px;
    height: 38px;
    padding: 9px 14px;

    border: 1px solid #DEE5EE;
    border-radius: 10px;
    background: #FFFFFF;

    color: #000000;
    cursor: pointer;

    white-space: nowrap;
}

.ckln-mobile-sidebar-post__file {
    display: none;
}

.ckln-mobile-sidebar-post__add-photo-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: currentColor;
}

.ckln-mobile-sidebar-post__add-photo span {
    width: auto;
    height: 17px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: #000000;
    white-space: nowrap;
}

/* =========================================================
   MOBILE POST MEDIA GALLERY
   ВАЖНО: фото полностью вписывается внутрь квадрата/прямоугольника
========================================================= */

.ckln-mobile-sidebar-post__media-gallery {
    position: absolute;
    left: 15px;
    top: 338px;

    width: calc(100vw - 30px);
    height: 200px;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ckln-mobile-sidebar-post__media-gallery::-webkit-scrollbar {
    display: none;
}

.ckln-mobile-sidebar-post__media-gallery[hidden] {
    display: none !important;
}

.ckln-mobile-sidebar-post__media-track {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;

    width: max-content;
    min-width: 100%;
    height: 200px;
    padding: 0;
}

.ckln-mobile-sidebar-post__media-item {
    position: relative;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 185px !important;
    height: 200px !important;
    flex: 0 0 185px !important;

    overflow: hidden !important;

    border-radius: 5px !important;
    background: #F1F5F9 !important;
}

.ckln-mobile-sidebar-post__media-img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    border-radius: 5px !important;
    background: #F1F5F9 !important;
}

/* Если внутри картинки браузер/тема добавляет inline width/height */
.ckln-mobile-sidebar-post__media-item img,
.ckln-mobile-sidebar-post__media-track img,
.ckln-mobile-sidebar-post__media-gallery img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;
}

.ckln-mobile-sidebar-post__remove-media {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 3;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 24px;
    height: 24px;
    padding: 0;

    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;

    color: #1F1F1F;
    cursor: pointer;
}

.ckln-mobile-sidebar-post__remove-media svg {
    display: block;
    width: 14px;
    height: 14px;
}

.ckln-mobile-sidebar-post__bottom-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 73px;

    width: 100%;
    height: 1px;

    background: #DEE5EE;
}

.ckln-mobile-sidebar-post__footer {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 20px;

    width: calc(100vw - 30px);
    height: 38px;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.ckln-mobile-sidebar-post__cancel,
.ckln-mobile-sidebar-post__publish {
    display: flex;
    justify-content: center;
    align-items: center;

    width: auto;
    height: 38px;
    padding: 12px 20px;

    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;

    white-space: nowrap;
    flex: 0 0 auto;

    cursor: pointer;
}

.ckln-mobile-sidebar-post__cancel {
    min-width: 112px;

    background: #F9FAFB;
    border: 1px solid #DEE5EE;
    color: #1F1F1F;
}

.ckln-mobile-sidebar-post__publish {
    min-width: 136px;

    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 50%, transparent);
    box-shadow: 0px 2px 10px color-mix(in srgb, var(--ck-color-accent, #45A4E1) 45%, transparent);
    border: none;

    color: #FAFAFA;
}

.ckln-mobile-sidebar-post__publish:not(:disabled) {
    background: var(--ck-color-accent, #45A4E1);
    box-shadow: 0px 2px 10px color-mix(in srgb, var(--ck-color-accent, #45A4E1) 70%, transparent);
}

.ckln-mobile-sidebar-post__publish:disabled {
    cursor: not-allowed;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .ckln-mobile-toolbar.is-compact .ckln-toolbar-inner {
        width: 100%;
        gap: 0;
        justify-content: space-between;
    }

    body.ckln-mobile-sidebar-post-open {
        overflow: hidden;
    }

    body.ckln-mobile-sidebar-post-open .ckln-mobile-toolbar,
    body.ckln-mobile-sidebar-post-open .ckln-mobile-sidebar-fab {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-only,
    .ckln-mobile-sidebar-fab,
    .ckln-mobile-sidebar-post {
        display: none !important;
    }
}

/* =========================================================
   FORCE SIDEBAR BACKGROUND
========================================================= */

.ckln-sidebar {
    background: rgba(245, 247, 251, 0.55) !important;
    background-color: rgba(245, 247, 251, 0.55) !important;

    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;

    box-shadow: none !important;
    filter: none !important;
}

.ckln-mobile-toolbar {
    background: rgba(245, 247, 251, 0.55) !important;
    background-color: rgba(245, 247, 251, 0.55) !important;

    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

/* =========================================================
   FINAL HARD OVERRIDE FOR MEDIA FIT
   Этот блок должен стоять самым последним
========================================================= */

@media (max-width: 768px) {
    .ckln-mobile-sidebar-post .ckln-mobile-sidebar-post__media-item {
        width: 185px !important;
        height: 200px !important;
        min-width: 185px !important;
        max-width: 185px !important;
        min-height: 200px !important;
        max-height: 200px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #F1F5F9 !important;
        border-radius: 5px !important;
        overflow: hidden !important;
    }


    body .ckln-sidebar button.ckln-nav-item, body .ckln-sidebar .ckln-nav-item {
        justify-content: center !important;
    }

    .ckln-mobile-sidebar-post .ckln-mobile-sidebar-post__media-item > img,
    .ckln-mobile-sidebar-post .ckln-mobile-sidebar-post__media-img {
        width: 100% !important;
        height: 100% !important;

        max-width: 100% !important;
        max-height: 100% !important;

        object-fit: contain !important;
        object-position: center center !important;

        display: block !important;
        flex: 0 0 auto !important;

        background: #F1F5F9 !important;
        border-radius: 5px !important;
    }
}
/* =========================================================
   MOBILE POST MEDIA — fill rectangle with slight crop
   Removes side stripes
========================================================= */

@media (max-width: 768px) {
    .ckln-mobile-sidebar-post .ckln-mobile-sidebar-post__media-item {
        width: 185px !important;
        height: 200px !important;
        min-width: 185px !important;
        max-width: 185px !important;
        min-height: 200px !important;
        max-height: 200px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: #F1F5F9 !important;
        border-radius: 5px !important;
        overflow: hidden !important;
    }

    .ckln-mobile-sidebar-post .ckln-mobile-sidebar-post__media-item > img,
    .ckln-mobile-sidebar-post .ckln-mobile-sidebar-post__media-img {
        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: cover !important;
        object-position: center center !important;

        display: block !important;

        background: #F1F5F9 !important;
        border-radius: 5px !important;
    }
}

.ckln-sidebar button.ckln-nav-item,
.ckln-mobile-toolbar button.ckln-toolbar-item {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.ckln-nav-icon img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ckln-toolbar-item img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.ckln-nav-item.is-active img,
.ckln-toolbar-item.is-active img {
    filter: brightness(0) saturate(100%) invert(52%) sepia(97%) saturate(1422%) hue-rotate(360deg) brightness(101%) contrast(104%);
}

/* ===== ELEMENT: ckln-resend-email-link-01 | Resend Email Link ===== */
/* =========================================================
   CKLN RESEND EMAIL LINK 01
========================================================= */

#ckln-resend-email-link-01,
.ckln-resend-email-link {
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 151px;
    height: 15px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;

    color: var(--ck-color-accent, #45A4E1);
    text-align: center;
    white-space: nowrap;
    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease;
}

.ckln-resend-email-link:hover {
    color: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 85%, black);
    text-decoration: none;
}

.ckln-resend-email-link:active {
    transform: scale(0.98);
}

.ckln-resend-email-link:disabled,
.ckln-resend-email-link.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== ELEMENT: ckln-sacrament-booking-flow-01 | Sacrament Booking Flow ===== */
#ckln-sacrament-booking-flow-01,
.ckln-sacrament-booking-flow {
    box-sizing: border-box;

    width: 680px;
    max-width: 100%;
    margin: 0 auto;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    --ck-sacrament-accent: var(--ck-color-accent, #FF8000);
    --ck-sacrament-accent-soft: color-mix(in srgb, var(--ck-sacrament-accent) 15%, transparent);
    --ck-sacrament-accent-shadow: color-mix(in srgb, var(--ck-sacrament-accent) 80%, transparent);
    --ck-sacrament-accent-light-shadow: color-mix(in srgb, var(--ck-sacrament-accent) 15%, transparent);

    --ck-sacrament-text: #1F1F1F;
    --ck-sacrament-text-dark: #0C0600;
    --ck-sacrament-muted: rgba(31, 31, 31, 0.8);
    --ck-sacrament-muted-light: rgba(31, 31, 31, 0.6);
    --ck-sacrament-border: #F1F5F9;
    --ck-sacrament-border-strong: #DEE5EE;
    --ck-sacrament-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ck-sacrament-calendar-shadow: 0 4.39412px 4.39412px rgba(0, 0, 0, 0.25);
}

.ckln-sacrament-booking-flow *,
.ckln-sacrament-booking-flow *::before,
.ckln-sacrament-booking-flow *::after {
    box-sizing: border-box;
}

.ckln-sacrament-booking-flow__list-screen,
.ckln-sacrament-booking-flow__mobile-detail {
    width: 100%;
}

.ckln-sacrament-booking-flow__header {
    display: flex;
    align-items: center;
    gap: 14px;

    width: 100%;
    min-height: 24px;
    margin-bottom: 15px;
}

.ckln-sacrament-booking-flow__back {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    color: rgba(31, 31, 31, 0.8);
    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-sacrament-booking-flow__back:hover {
    color: var(--ck-sacrament-accent);
    transform: translateX(-2px);
}

.ckln-sacrament-booking-flow__back:active {
    transform: translateX(-2px) scale(0.94);
}

.ckln-sacrament-booking-flow__back svg {
    display: block;
    width: 14px;
    height: 14px;
}

.ckln-sacrament-booking-flow__title {
    display: flex;
    align-items: center;

    min-width: 0;
    margin: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;

    color: var(--ck-sacrament-text);
}

.ckln-sacrament-booking-flow__services {
    display: flex;
    flex-direction: column;
    gap: 5px;

    width: 100%;
}

.ckln-sacrament-booking-flow__service {
    overflow: hidden;

    width: 100%;

    background: #FFFFFF;
    border: 1px solid var(--ck-sacrament-border);
    box-shadow: var(--ck-sacrament-card-shadow);
    border-radius: 15px;

    transition:
        min-height 0.22s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.ckln-sacrament-booking-flow__service:hover,
.ckln-sacrament-booking-flow__service.is-active {
    border-color: color-mix(in srgb, var(--ck-sacrament-accent) 28%, var(--ck-sacrament-border));
}

.ckln-sacrament-booking-flow__service-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px;
    align-items: center;
    gap: 14px;

    width: 100%;
    min-height: 50px;
    padding: 14px 16px 14px 20px;

    background: #FFFFFF;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    text-align: left;
    color: var(--ck-sacrament-muted);
    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}

.ckln-sacrament-booking-flow__service-head:hover {
    color: var(--ck-sacrament-accent);
}

.ckln-sacrament-booking-flow__service-title {
    display: block;

    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.4px;

    color: currentColor;
}

.ckln-sacrament-booking-flow__service-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;

    color: rgba(31, 31, 31, 0.8);

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-sacrament-booking-flow__service-arrow svg {
    display: block;
    width: 14px;
    height: 14px;
}

.ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__service-arrow {
    transform: rotate(90deg);
}

.ckln-sacrament-booking-flow__service:hover .ckln-sacrament-booking-flow__service-arrow,
.ckln-sacrament-booking-flow__service.is-active .ckln-sacrament-booking-flow__service-arrow {
    color: var(--ck-sacrament-accent);
}

.ckln-sacrament-booking-flow__service-body {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 25px;

    min-height: 331px;
    padding: 14px 14px 18px 20px;
    border-top: 1px solid var(--ck-sacrament-border-strong);

    transition: min-height 0.22s ease;
}

.ckln-sacrament-booking-flow__service-body[hidden],
.ckln-sacrament-booking-flow__mobile-detail[hidden],
.ckln-sacrament-booking-flow__mobile-calendar-wrap[hidden],
.ckln-sacrament-booking-flow__list-screen[hidden] {
    display: none;
}

/* Calendar */

.ckln-sacrament-booking-flow__calendar {
    overflow: hidden;

    width: 280px;
    max-width: 100%;

    background: #FFFFFF;
    border-radius: 10px;
}

.ckln-sacrament-booking-flow__calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: 100%;
    min-height: 55px;
    padding: 15px 25px 15px 20px;

    background: #FFFFFF;
    box-shadow: var(--ck-sacrament-calendar-shadow);
}

.ckln-sacrament-booking-flow__month {
    display: block;

    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 15.3794px;
    line-height: 26px;
    letter-spacing: 0.109853px;

    color: var(--ck-sacrament-muted-light);
}

.ckln-sacrament-booking-flow__month-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;

    flex: 0 0 auto;
}

.ckln-sacrament-booking-flow__month-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 18px;
    padding: 0;

    background: transparent;
    border: none;

    color: var(--ck-sacrament-muted-light);
    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-sacrament-booking-flow__month-btn:hover {
    color: var(--ck-sacrament-accent);
}

.ckln-sacrament-booking-flow__month-btn:active {
    transform: scale(0.9);
}

.ckln-sacrament-booking-flow__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    width: 100%;
    height: 35px;
    padding: 0 15px;

    background: #FFFFFF;
    box-shadow: var(--ck-sacrament-calendar-shadow);
}

.ckln-sacrament-booking-flow__weekdays span {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 13.1823px;
    line-height: 18px;
    letter-spacing: 0.439412px;

    color: var(--ck-sacrament-muted-light);
}

.ckln-sacrament-booking-flow__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    width: 100%;
    padding: 0 15px 10px;

    background: #FFFFFF;
}

/* Calendar day states */

.ckln-sacrament-booking-flow__day {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 35.15px;
    height: 35.15px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: 1.09853px solid transparent;
    border-radius: 999px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 15.3794px;
    line-height: 22px;
    letter-spacing: 0.274632px;

    color: #1F1F1F;
    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}

.ckln-sacrament-booking-flow__day:hover {
    background: color-mix(in srgb, var(--ck-sacrament-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--ck-sacrament-accent) 35%, transparent);
    color: #1F1F1F;
}

.ckln-sacrament-booking-flow__day:active {
    transform: scale(0.94);
}

.ckln-sacrament-booking-flow__day.is-muted {
    opacity: 0.4;
}

.ckln-sacrament-booking-flow__day.is-today {
    background: #FFFFFF;
    border-color: #1F1F1F;
    color: #1F1F1F;
}

.ckln-sacrament-booking-flow__day.is-selected {
    background: var(--ck-sacrament-accent);
    border-color: var(--ck-sacrament-accent);
    color: #FFFFFF;
    opacity: 1;
}

.ckln-sacrament-booking-flow__day.is-selected.is-today {
    background: var(--ck-sacrament-accent);
    border-color: var(--ck-sacrament-accent);
    color: #FFFFFF;
}

.ckln-sacrament-booking-flow__day.is-selected:hover {
    background: var(--ck-sacrament-accent);
    border-color: var(--ck-sacrament-accent);
    color: #FFFFFF;
}

/* Availability */

.ckln-sacrament-booking-flow__availability {
    min-width: 0;
    padding: 0 0 0 20px;

    border-left: 1px solid var(--ck-sacrament-border-strong);
}

.ckln-sacrament-booking-flow__available-days,
.ckln-sacrament-booking-flow__mobile-days {
    display: none !important;
}

.ckln-sacrament-booking-flow__available-title {
    margin: 0 0 16px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    color: var(--ck-sacrament-text);
}

.ckln-sacrament-booking-flow__slot-group + .ckln-sacrament-booking-flow__slot-group {
    margin-top: 14px;
}

.ckln-sacrament-booking-flow__slot-date {
    margin: 0 0 6px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: var(--ck-sacrament-muted-light);
}

.ckln-sacrament-booking-flow__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ckln-sacrament-booking-flow__slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 69px;
    max-width: 100%;
    min-height: 38px;
    padding: 12px 15px;

    background: #FFFFFF;
    border: 1px solid var(--ck-sacrament-border-strong);
    box-shadow: 0 0 0 1px var(--ck-sacrament-border-strong);
    border-radius: 6px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;

    color: var(--ck-sacrament-muted);
    white-space: nowrap;
    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-sacrament-booking-flow__slot:hover,
.ckln-sacrament-booking-flow__slot.is-active {
    background: var(--ck-sacrament-accent-soft);
    border-color: var(--ck-sacrament-accent);
    box-shadow: 0px 2px 10px var(--ck-sacrament-accent-light-shadow);
    color: rgba(31, 31, 31, 0.8);
}

.ckln-sacrament-booking-flow__slot:active {
    transform: scale(0.96);
}

/* Submit buttons */

.ckln-sacrament-booking-flow__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 126px;
    max-width: 100%;
    min-height: 34px;
    padding: 10px 20px;

    background: var(--ck-sacrament-accent);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 2px 10px var(--ck-sacrament-accent-shadow);

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;

    color: #FAFAFA;
    white-space: nowrap;
    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.ckln-sacrament-booking-flow__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0px 4px 14px var(--ck-sacrament-accent-shadow);
}

.ckln-sacrament-booking-flow__submit:active {
    transform: scale(0.97);
}

.ckln-sacrament-booking-flow__submit[hidden] {
    display: none;
}

.ckln-sacrament-booking-flow__mobile-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 350px;
    max-width: 100%;
    min-height: 40px;
    margin: 24px auto 0;
    padding: 12px 25px;

    background: var(--ck-sacrament-accent);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 2px 10px var(--ck-sacrament-accent-shadow);

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;

    color: #FFFFFF;
    white-space: nowrap;
    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.ckln-sacrament-booking-flow__mobile-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0px 4px 14px var(--ck-sacrament-accent-shadow);
}

.ckln-sacrament-booking-flow__mobile-submit:active {
    transform: scale(0.97);
}

.ckln-sacrament-booking-flow__mobile-submit[hidden] {
    display: none;
}

.ckln-sacrament-booking-flow__mobile-detail {
    display: none;
}

/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 641px) {
    .ckln-sacrament-booking-flow__service.is-open {
        position: relative;
        width: 680px;
        min-height: 382px;
        overflow: hidden;

        background: #FFFFFF;
        border: 1px solid #F1F5F9;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 15px;
    }

    .ckln-sacrament-booking-flow__service.is-open.has-selected-time {
        position: relative !important;
        width: 680px !important;
        min-height: 436px !important;
        height: 436px !important;
        padding-bottom: 54px !important;
        overflow: hidden !important;

        background: #FFFFFF;
        border: 1px solid #F1F5F9;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 15px;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__service-head {
        position: relative;
        z-index: 6;

        display: grid;
        grid-template-columns: minmax(0, 1fr) 14px;
        align-items: center;

        width: 100%;
        height: 50px;
        min-height: 50px;
        padding: 14px 16px 14px 20px;

        background: #FFFFFF;
        border: none;
        border-radius: 15px 15px 0 0;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__service-title {
        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0.4px;

        color: rgba(31, 31, 31, 0.8);
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__service-arrow {
        width: 14px;
        height: 14px;
        color: rgba(31, 31, 31, 0.8);
        transform: rotate(90deg);
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__service-body {
        position: relative;

        display: grid;
        grid-template-columns: 330px 1fr;
        gap: 0;

        width: 100%;
        min-height: 331px;
        padding: 0;
        border-top: 1px solid #DEE5EE;
    }

    .ckln-sacrament-booking-flow__service.is-open.has-selected-time .ckln-sacrament-booking-flow__service-body {
        position: static !important;
        min-height: 331px !important;
        height: 331px !important;
        padding-bottom: 0 !important;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__calendar {
        width: 280px;
        height: 310px;
        margin: 15px 0 0 20px;
        overflow: hidden;

        background: #FFFFFF;
        border-radius: 10px;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__calendar-head {
        width: 280px;
        height: 55px;
        min-height: 55px;
        padding: 15px 25px 15px 20px;
        gap: 58px;

        background: #FFFFFF;
        box-shadow: 0px 4.39412px 4.39412px rgba(0, 0, 0, 0.25);
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__month {
        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 500;
        font-size: 15.3794px;
        line-height: 26px;
        letter-spacing: 0.109853px;

        color: rgba(31, 31, 31, 0.6);
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__weekdays {
        width: 280px;
        height: 35px;
        padding: 0 15px;

        background: #FFFFFF;
        box-shadow: 0px 4.39412px 4.39412px rgba(0, 0, 0, 0.25);
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__days {
        width: 280px;
        height: 220px;
        padding: 0 15px 10px;

        background: #FFFFFF;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__day {
        width: 35.15px;
        height: 35.15px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 400;
        font-size: 15.3794px;
        line-height: 22px;
        letter-spacing: 0.274632px;

        color: #1F1F1F;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__day.is-today {
        background: #FFFFFF;
        border-color: #1F1F1F;
        color: #1F1F1F;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__day.is-selected,
    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__day.is-selected.is-today {
        background: var(--ck-sacrament-accent);
        border-color: var(--ck-sacrament-accent);
        color: #FFFFFF;
        opacity: 1;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__day.is-selected:hover {
        background: var(--ck-sacrament-accent);
        border-color: var(--ck-sacrament-accent);
        color: #FFFFFF;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__day.is-muted {
        opacity: 0.4;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__availability {
        position: relative;

        min-width: 0;
        height: 331px;
        padding: 15px 15px 0 25px;

        border-left: 1px solid #DEE5EE;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: stable;
    }

    .ckln-sacrament-booking-flow__service.is-open.has-selected-time .ckln-sacrament-booking-flow__availability {
        position: static !important;
        height: 331px !important;
        padding-bottom: 68px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-gutter: stable !important;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__availability::-webkit-scrollbar {
        width: 6px;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__availability::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 999px;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__availability::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--ck-sacrament-accent) 35%, #DEE5EE);
        border-radius: 999px;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__availability::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--ck-sacrament-accent) 55%, #DEE5EE);
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__available-days {
        display: none !important;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__available-title {
        width: 230px;
        max-width: 100%;
        min-height: 20px;
        height: auto;
        margin: 0 0 12px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;

        color: #1F1F1F;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__slot-group {
        margin: 0;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__slot-group + .ckln-sacrament-booking-flow__slot-group {
        margin-top: 14px;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__slot-date {
        width: auto;
        height: 20px;
        margin: 0 0 6px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;

        color: rgba(31, 31, 31, 0.6);
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__slots {
        display: grid;
        grid-template-columns: repeat(4, 69px);
        gap: 6px;
        align-items: start;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__slot {
        width: 69px;
        min-width: 69px;
        height: 38px;
        min-height: 38px;
        padding: 1px;

        background: #DEE5EE;
        border: 1px solid #DEE5EE;
        box-shadow: none;
        border-radius: 6px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        cursor: pointer;

        display: flex;
        align-items: center;
        justify-content: center;

        font-weight: 500;
        font-size: 14px;
        line-height: 100%;

        color: rgba(31, 31, 31, 0.8);
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__slot:not(.is-active) {
        background:
            linear-gradient(#FFFFFF, #FFFFFF) content-box,
            #DEE5EE;
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__slot.is-active {
        background:
            linear-gradient(var(--ck-sacrament-accent-soft), var(--ck-sacrament-accent-soft)) content-box,
            #FFFFFF;
        border: 1px solid var(--ck-sacrament-accent);
        box-shadow: 0px 2px 10px var(--ck-sacrament-accent-light-shadow);

        color: rgba(31, 31, 31, 0.8);
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__slot:hover {
        background:
            linear-gradient(var(--ck-sacrament-accent-soft), var(--ck-sacrament-accent-soft)) content-box,
            #FFFFFF;
        border-color: var(--ck-sacrament-accent);
        box-shadow: 0px 2px 10px var(--ck-sacrament-accent-light-shadow);
        color: rgba(31, 31, 31, 0.8);
    }

    .ckln-sacrament-booking-flow__service.is-open.has-selected-time::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 4;

        width: 100%;
        height: 54px;

        background: #FFFFFF;
        border-radius: 0 0 15px 15px;
        pointer-events: none;
    }

    .ckln-sacrament-booking-flow__service.is-open.has-selected-time::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 54px;
        z-index: 5;

        width: 100%;
        height: 1px;

        background: #DEE5EE;
        pointer-events: none;
    }

    .ckln-sacrament-booking-flow__service.is-open.has-selected-time .ckln-sacrament-booking-flow__submit {
        position: absolute !important;
        right: 20px !important;
        bottom: 10px !important;
        z-index: 7 !important;

        display: inline-flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;

        width: auto !important;
        min-width: 126px !important;
        max-width: calc(100% - 40px) !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 10px 20px !important;

        background: var(--ck-sacrament-accent) !important;
        border: none !important;
        box-shadow: 0px 2px 10px var(--ck-sacrament-accent-shadow) !important;
        border-radius: 10px !important;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif) !important;
        font-style: normal !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        line-height: 100% !important;

        color: #FAFAFA !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    .ckln-sacrament-booking-flow__service.is-open.has-selected-time .ckln-sacrament-booking-flow__submit:hover {
        transform: translateY(-1px);
        box-shadow: 0px 4px 14px var(--ck-sacrament-accent-shadow) !important;
    }

    .ckln-sacrament-booking-flow__service.is-open.has-selected-time .ckln-sacrament-booking-flow__submit:active {
        transform: scale(0.97);
    }

    .ckln-sacrament-booking-flow__service.is-open.has-selected-time .ckln-sacrament-booking-flow__submit[hidden] {
        display: none !important;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 760px) {
    #ckln-sacrament-booking-flow-01,
    .ckln-sacrament-booking-flow {
        width: 100%;
    }

    .ckln-sacrament-booking-flow__service-body {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 18px;
        padding: 14px;
    }

    .ckln-sacrament-booking-flow__availability {
        padding-left: 16px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {
    #ckln-sacrament-booking-flow-01,
    .ckln-sacrament-booking-flow {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .ckln-sacrament-booking-flow__header {
        display: grid;
        grid-template-columns: 14px minmax(0, 1fr);
        align-items: start;
        gap: 12px;

        min-height: 40px;
        margin-bottom: 15px;
    }

    .ckln-sacrament-booking-flow__back {
        width: 14px;
        height: 14px;
        min-width: 14px;
        margin-top: 8px;
    }

    .ckln-sacrament-booking-flow__back svg {
        width: 14px;
        height: 14px;
    }

    .ckln-sacrament-booking-flow__title {
        min-height: 40px;

        font-size: 16px;
        line-height: 20px;
    }

    .ckln-sacrament-booking-flow__services {
        gap: 10px;
    }

    .ckln-sacrament-booking-flow__service {
        width: 100%;
        min-height: 50px;

        border-radius: 15px;
    }

    .ckln-sacrament-booking-flow__service-head {
        min-height: 50px;
        padding: 14px 19px;

        grid-template-columns: minmax(0, 1fr) 14px;
    }

    .ckln-sacrament-booking-flow__service-title {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0.4px;
    }

    .ckln-sacrament-booking-flow__service-arrow {
        transform: rotate(-90deg);
    }

    .ckln-sacrament-booking-flow__service.is-open .ckln-sacrament-booking-flow__service-arrow {
        transform: rotate(-90deg);
    }

    .ckln-sacrament-booking-flow__service-body {
        display: none !important;
    }

    .ckln-sacrament-booking-flow__mobile-detail {
        position: relative;

        display: block;
        width: 100%;
        min-height: 100dvh;
        padding-bottom: 20px;
    }

    .ckln-sacrament-booking-flow__mobile-detail[hidden] {
        display: none;
    }

    .ckln-sacrament-booking-flow__mobile-detail-header {
        position: relative;

        display: flex;
        align-items: center;

        width: 100%;
        min-height: 24px;
        margin-bottom: 17px;
    }

    .ckln-sacrament-booking-flow__mobile-detail-header .ckln-sacrament-booking-flow__back {
        position: relative;
        z-index: 2;

        width: 24px;
        height: 24px;
        min-width: 24px;
        margin: 0;
    }

    .ckln-sacrament-booking-flow__mobile-detail-title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        width: max-content;
        max-width: calc(100% - 70px);
        margin: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;

        color: var(--ck-sacrament-text);
    }

    .ckln-sacrament-booking-flow__mobile-subtitle {
        margin: 0 0 8px 5px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;

        color: var(--ck-sacrament-text-dark);
    }

    .ckln-sacrament-booking-flow__mobile-date-field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;

        width: 350px;
        max-width: 100%;
        min-height: 40px;
        margin: 0 auto 10px;
        padding: 12px 20px;

        background: #FFFFFF;
        border: 1px solid var(--ck-sacrament-border-strong);
        border-radius: 10px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-weight: 500;
        font-size: 14px;
        line-height: 17px;

        color: rgba(31, 31, 31, 0.5);
        cursor: pointer;
    }

    .ckln-sacrament-booking-flow__mobile-date-field svg {
        width: 18px;
        height: 18px;
        color: rgba(31, 31, 31, 0.5);
    }

    .ckln-sacrament-booking-flow__mobile-calendar-wrap {
        width: 280px;
        max-width: 100%;
        margin: 0 auto 16px;
    }

    .ckln-sacrament-booking-flow__mobile-calendar-wrap .ckln-sacrament-booking-flow__calendar {
        margin: 0 auto;
    }

    .ckln-sacrament-booking-flow__mobile-days {
        display: none !important;
    }

    .ckln-sacrament-booking-flow__mobile-available-title {
        width: 350px;
        max-width: 100%;
        margin: 0 auto 8px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;

        color: var(--ck-sacrament-text-dark);
    }

    .ckln-sacrament-booking-flow__mobile-slot-groups {
        display: flex;
        flex-direction: column;
        gap: 22px;

        width: 350px;
        max-width: 100%;
        margin: 0 auto 20px;
    }

    .ckln-sacrament-booking-flow__mobile-slot-date {
        margin: 0 0 8px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;

        color: rgba(12, 6, 0, 0.6);
    }

    .ckln-sacrament-booking-flow__mobile-slots {
        display: grid;
        grid-template-columns: repeat(4, 74px);
        gap: 8px;

        width: 100%;
    }

    .ckln-sacrament-booking-flow__mobile-slots .ckln-sacrament-booking-flow__slot {
        width: 74px;
        min-width: 74px;
        min-height: 40px;
        padding: 12px 15px;
    }

    .ckln-sacrament-booking-flow__mobile-submit {
        position: sticky !important;
        left: auto !important;
        right: auto !important;
        bottom: 20px !important;
        z-index: 20 !important;

        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;

        width: 350px !important;
        max-width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;

        margin: 20px auto 0 !important;
        padding: 12px 20px !important;

        background: var(--ck-sacrament-accent) !important;
        border: none !important;
        box-shadow: 0px 2px 10px var(--ck-sacrament-accent-shadow) !important;
        border-radius: 10px !important;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif) !important;
        font-style: normal !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        line-height: 100% !important;

        color: #FAFAFA !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    .ckln-sacrament-booking-flow__mobile-submit:hover {
        transform: translateY(-1px);
        box-shadow: 0px 4px 14px var(--ck-sacrament-accent-shadow) !important;
    }

    .ckln-sacrament-booking-flow__mobile-submit:active {
        transform: scale(0.97);
    }

    .ckln-sacrament-booking-flow__mobile-submit[hidden] {
        display: none !important;
    }
}

@media (max-width: 380px) {
    #ckln-sacrament-booking-flow-01,
    .ckln-sacrament-booking-flow {
        padding: 0 10px;
    }

    .ckln-sacrament-booking-flow__mobile-slots {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .ckln-sacrament-booking-flow__mobile-slots .ckln-sacrament-booking-flow__slot {
        width: 100%;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    .ckln-sacrament-booking-flow__mobile-submit {
        width: 100% !important;
    }
}

/* ===== ELEMENT: ckln-btn-next-icon | Button Next (with Icon) ===== */
.ckln-btn-next {
    /* Auto layout (Figma) -> Flexbox (CSS) */
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 25px;
    gap: 8px;
    
    /* Кольори та фон (з підтримкою ваших токенів і фоллбеком на Figma-колір) */
    background: var(--ck-color-accent, #FF8000);
    border-radius: 10px;
    border: none;
    
    /* Тінь генерується динамічно від кольору акценту, щоб відповідати прозорості 0.8 з Figma */
    box-shadow: 0px 2px 10px color-mix(in srgb, var(--ck-color-accent, #FF8000) 80%, transparent);
    
    /* Типографіка з Figma */
    color: #FAFAFA;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    
    /* Взаємодія */
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ckln-btn-next:hover {
    /* Додаємо легкий ефект при наведенні */
    transform: translateY(-2px);
    box-shadow: 0px 4px 12px color-mix(in srgb, var(--ck-color-accent, #FF8000) 60%, transparent);
}

.ckln-btn-next:active {
    transform: translateY(0);
}

.ckln-btn-next__text {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1; /* 100% у Figma */
}

.ckln-btn-next__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.ckln-btn-next__icon {
    width: 100%;
    height: 100%;
}

/* ===== ELEMENT: ckln-btn-back-icon | Button Back (Outline with Icon) ===== */
.ckln-btn-back {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 25px;
    gap: 10px;
    
    /* Кольори з Figma (Outline стиль) */
    background: #F9FAFB;
    border: 1px solid #DEE5EE;
    border-radius: 10px;
    
    /* Типографіка */
    color: #1F1F1F;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ckln-btn-back:hover {
    /* Легке затемнення фону та рамки при наведенні для інтерактивності */
    background: #F0F2F5; 
    border-color: #D1D9E2;
    transform: translateY(-2px);
}

.ckln-btn-back:active {
    transform: translateY(0);
}

.ckln-btn-back__text {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
}

.ckln-btn-back__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    
    /* Віддзеркалюємо ту саму іконку, щоб вона дивилася вліво */
    transform: scaleX(-1);
}

.ckln-btn-back__icon {
    width: 100%;
    height: 100%;
}

/* ===== ELEMENT: ckln-btn-submit-full | Button Submit (Full Width) ===== */
.ckln-btn-full {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    /* Адаптивність: займає всю ширину батьківського блоку */
    width: 100%;
    /* Для захисту на надшироких екранах можна розкоментувати рядок нижче: */
    /* max-width: 350px; */ 
    
    padding: 12px 24px; /* Адекватний внутрішній відступ */
    height: 38px;
    
    /* Зв'язок з вашим Style Set (із синім кольором з Figma як фоллбеком) */
    background: var(--ck-color-accent, #45A4E1);
    
    /* Тінь: генерується з акценту (прозорість 80%) */
    box-shadow: 0px 2px 10px color-mix(in srgb, var(--ck-color-accent, #45A4E1) 80%, transparent);
    
    border: none;
    border-radius: 10px;
    
    /* Типографіка */
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1; /* 100% */
    color: #FAFAFA;
    
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* СТАН НАВЕДЕННЯ (HOVER) */
.ckln-btn-full:hover {
    /* Змішуємо акцент із чорним на 15%, щоб отримати темніший відтінок (як #2896DD у Figma) */
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 85%, black);
    
    /* Тінь стає більшою і розмитішою */
    box-shadow: 0px 2px 15px color-mix(in srgb, var(--ck-color-accent, #45A4E1) 90%, transparent);
    
    /* Легке підняття для фізичності */
    transform: translateY(-2px);
}

/* СТАН НАТИСКАННЯ (ACTIVE) */
.ckln-btn-full:active {
    transform: translateY(0);
    box-shadow: 0px 1px 5px color-mix(in srgb, var(--ck-color-accent, #45A4E1) 50%, transparent);
}

/* СТАН ВІДКЛЮЧЕННЯ (DISABLED) */
.ckln-btn-full:disabled {
    background: #EAECEF;
    color: #919396;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* ===== ELEMENT: ckln-btn-destructive | Button (Destructive Action) ===== */
.ckln-btn-destructive {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 15px;
    gap: 5px;
    
    /* Адаптивність: можна змінити на width: fit-content, якщо кнопка не повинна розтягуватись */
    width: 100%; 
    max-width: 320px;
    height: 38px;
    
    background: #FEF2F2;
    border: 1px solid #FDE8E9;
    border-radius: 10px;
    
    /* Жорсткий червоний колір для тексту та іконки */
    color: #DC2727;
    
    cursor: pointer;
    transition: all 0.2s ease;
}

.ckln-btn-destructive-text {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
}

.ckln-btn-destructive-icon {
    flex-shrink: 0;
}

/* Стан наведення (трохи темніший фон та рамка) */
.ckln-btn-destructive:hover {
    background: #FDE8E9;
    border-color: #FCD2D4;
}

/* Стан натискання */
.ckln-btn-destructive:active {
    background: #FCD2D4;
    transform: translateY(1px);
}

/* Стан фокусу (з червоним кільцем замість акцентного) */
.ckln-btn-destructive:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 39, 39, 0.15);
}

/* ===== ELEMENT: ckln-btn-secondary | Button Secondary (Light Gray) ===== */
.ckln-btn-secondary {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 15px;
    gap: 10px;

    /* Адаптивність */
    width: 100%;
    max-width: 350px;
    height: 38px;

    background: #F9FAFB;
    border: 1px solid #DEE5EE;
    border-radius: 10px;
    
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.ckln-btn-secondary-text {
    font-family: var(--ck-font-base, 'Inter', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 1; /* 100% */
    color: #1F1F1F;
}

/* СТАН НАВЕДЕННЯ (HOVER) */
.ckln-btn-secondary:hover {
    background: #F3F3F3;
    /* Рамка залишається такою ж за макетом, але можна додати легкий акцент за потреби */
    border-color: #DEE5EE; 
}

/* СТАН НАТИСКАННЯ (ACTIVE) */
.ckln-btn-secondary:active {
    background: #EAEAEA;
    transform: scale(0.98);
}

/* СТАН ФОКУСУ (Для доступності) */
.ckln-btn-secondary:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-color-accent, #45A4E1) 15%, transparent);
}

/* СТАН ВІДКЛЮЧЕННЯ (DISABLED) */
.ckln-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ===== ELEMENT: ckln-btn-follow-toggle | Follow Toggle Button (Follow/Following) ===== */
.ckln-btn-follow {
    box-sizing: border-box;

    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: auto;
    min-width: 122px;
    max-width: 100%;

    height: 32px;
    padding: 8px 20px;

    background: transparent;
    border: 1px solid #DEE5EE;
    border-radius: 10px;

    cursor: pointer;
    outline: none;

    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;

    color: var(--ck-color-accent, #45A4E1);

    white-space: nowrap;
    overflow: visible;

    transition:
        background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ckln-btn-follow-text {
    display: block;

    width: auto;
    min-width: max-content;

    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
}

/* Состояние после клика */
.ckln-btn-follow.is-following {
    width: auto;
    min-width: 122px;

    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 10%, transparent);
    border-color: #DEE5EE;

    color: var(--ck-color-accent, #45A4E1);
}

/* Hover */
.ckln-btn-follow:hover {
    border-color: var(--ck-color-accent, #45A4E1);
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 5%, transparent);
}

.ckln-btn-follow.is-following:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 15%, transparent);
}

/* Active */
.ckln-btn-follow:active {
    transform: scale(0.96);
}

/* ===== ELEMENT: ckln-icon-btn-plus | Icon Button (Plus / Add) ===== */
/* БАЗОВИЙ СТАН КНОПКИ */
.ckln-icon-btn-plus {
    all: unset;
    cursor: pointer;
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Статичний колір (80% чорного) */
    color: rgba(31, 31, 31, 0.8);
    overflow: visible;
    transition: color 0.2s ease;
}

/* ПІДКЛАДКА-КРУЖОК (Ellipse 52) */
.ckln-icon-btn-plus::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
    height: 25px;
    
    /* 🟢 ТЕПЕР ПІДТЯГУЄТЬСЯ АКЦЕНТНИЙ КОЛІР (з прозорістю 20%) */
    background-color: color-mix(in srgb, var(--ck-color-accent, #FF8000) 20%, transparent);
    
    border-radius: 50%;
    display: none;
    pointer-events: none;
    z-index: 0;
}

.ckln-icon-btn-plus svg {
    position: relative;
    z-index: 1;
}

/* 🟢 СТАН НАВЕДЕННЯ (HOVER) */
.ckln-icon-btn-plus:hover {
    /* 🟢 ТЕПЕР ПІДТЯГУЄТЬСЯ АКЦЕНТНИЙ КОЛІР */
    color: var(--ck-color-accent, #FF8000);
}

.ckln-icon-btn-plus:hover::before {
    display: block;
}

.ckln-icon-btn-plus:active {
    opacity: 0.7;
}

/* ===== ELEMENT: ckln-call-toolbar | Call Floating Control Bar ===== */
.ckln-call-toolbar {
    position: fixed;
    left: 50%;
    bottom: 35px;
    z-index: 1000;

    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    width: 419px;
    height: 65px;
    padding: 10px;

    transform: translateX(-50%);

    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    box-shadow: 0px 4px 40px -12px rgba(0, 0, 0, 0.25);
    border-radius: 40px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-call-toolbar *,
.ckln-call-toolbar *::before,
.ckln-call-toolbar *::after {
    box-sizing: border-box;
}

.ckln-call-toolbar__media {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;

    width: 200px;
    height: 44px;
    flex: 0 0 200px;
}

.ckln-call-toolbar__button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 44px;
    height: 44px;
    padding: 0;
    flex: 0 0 44px;

    color: #475569;
    background: #F1F5F9;
    border: none;
    border-radius: 24px;

    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-call-toolbar__button:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 8%, #F1F5F9);
    color: var(--ck-color-accent, #FF8000);
}

.ckln-call-toolbar__button:active {
    transform: scale(0.96);
}

.ckln-call-toolbar__button.is-active {
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 10%, transparent);
    color: var(--ck-color-accent, #FF8000);
}

.ckln-call-toolbar__icon {
    display: block;
    flex: 0 0 auto;
    color: currentColor;
}

.ckln-call-toolbar__icon--mic-off,
.ckln-call-toolbar__icon--camera-off {
    display: none;
}

.ckln-call-toolbar__button.is-muted .ckln-call-toolbar__icon--mic-on {
    display: none;
}

.ckln-call-toolbar__button.is-muted .ckln-call-toolbar__icon--mic-off {
    display: block;
}

.ckln-call-toolbar__button.is-camera-off .ckln-call-toolbar__icon--camera-on {
    display: none;
}

.ckln-call-toolbar__button.is-camera-off .ckln-call-toolbar__icon--camera-off {
    display: block;
}

.ckln-call-toolbar__end {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;

    width: 176.8px;
    height: 44px;
    padding: 10px 15px;
    flex: 0 0 176.8px;

    overflow: hidden;

    background: #DC2626;
    border: none;
    border-radius: 24px;

    color: #FFFFFF;

    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.ckln-call-toolbar__end:hover {
    background: #B91C1C;
    transform: translateY(-1px);
}

.ckln-call-toolbar__end:active {
    transform: translateY(0);
}

.ckln-call-toolbar__end-shadow {
    position: absolute;
    inset: 0;
    z-index: -1;

    background: rgba(255, 255, 255, 0.002);
    box-shadow:
        0px 10px 15px -3px #FFDADA,
        0px 4px 6px -4px rgba(244, 157, 37, 0.2);
    border-radius: 24px;
}

.ckln-call-toolbar__end-icon {
    display: block;

    width: 16.8px;
    height: 6.53px;
    flex: 0 0 16.8px;

    color: #FFFFFF;
}

.ckln-call-toolbar__end-text {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 125px;
    height: 24px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;

    color: #FFFFFF;
}

/* Mobile safe scaling */
@media (max-width: 640px) {
    .ckln-call-toolbar {
        width: calc(100% - 30px);
        max-width: 419px;
        bottom: 20px;
        gap: 12px;
    }

    .ckln-call-toolbar__media {
        width: auto;
        flex: 1 1 auto;
        gap: 6px;
    }

    .ckln-call-toolbar__button {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .ckln-call-toolbar__end {
        width: 54px;
        flex-basis: 54px;
        justify-content: center;
        padding: 10px;
    }

    .ckln-call-toolbar__end-text {
        display: none;
    }
}

/* ===== ELEMENT: ckln-call-speaker-view | Call Speaker View Participant Tile ===== */
.ckln-call-speaker-view {
    --ck-call-tile-width: 755px;
    --ck-call-tile-height: 750px;
    --ck-call-avatar-size: 75px;
    --ck-call-badge-left: 15px;
    --ck-call-badge-bottom: 15px;
    --ck-call-badge-height: 29px;
    --ck-call-badge-padding: 2px 8px;
    --ck-call-badge-icon-size: 18px;
    --ck-call-badge-name-width: 106px;
    --ck-call-badge-font-size: 12px;
    --ck-call-badge-line-height: 25px;

    position: relative;

    box-sizing: border-box;
    width: var(--ck-call-tile-width);
    height: var(--ck-call-tile-height);

    overflow: hidden;

    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 10%, transparent);
    box-shadow: 0px 4px 4px rgba(222, 222, 222, 0.25);
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-call-speaker-view *,
.ckln-call-speaker-view *::before,
.ckln-call-speaker-view *::after {
    box-sizing: border-box;
}

.ckln-call-speaker-view__video {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: none;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.ckln-call-speaker-view.has-video {
    background: #000000;
    border: 1px solid color-mix(in srgb, var(--ck-color-accent, #FF8000) 25%, #FFFFFF);
}

.ckln-call-speaker-view.has-video .ckln-call-speaker-view__video {
    display: block;
}

.ckln-call-speaker-view.has-video .ckln-call-speaker-view__avatar {
    display: none;
}

.ckln-call-speaker-view__avatar {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;

    display: block;

    width: var(--ck-call-avatar-size);
    height: var(--ck-call-avatar-size);

    object-fit: cover;
    border-radius: 999px;

    transform: translate(-50%, -50%);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ckln-call-speaker-view__name-badge {
    position: absolute;
    left: var(--ck-call-badge-left);
    bottom: var(--ck-call-badge-bottom);
    z-index: 3;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;

    width: fit-content;
    max-width: calc(100% - 30px);
    height: var(--ck-call-badge-height);
    padding: var(--ck-call-badge-padding);

    background: rgba(255, 247, 234, 0.6);
    border-radius: 15px;

    backdrop-filter: blur(6px);
}

.ckln-call-speaker-view__audio-icon {
    display: block;

    width: var(--ck-call-badge-icon-size);
    height: var(--ck-call-badge-icon-size);
    flex: 0 0 var(--ck-call-badge-icon-size);

    color: #0C0600;
}

.ckln-call-speaker-view__audio-icon--off {
    display: none;
}

.ckln-call-speaker-view.is-muted .ckln-call-speaker-view__audio-icon--on {
    display: none;
}

.ckln-call-speaker-view.is-muted .ckln-call-speaker-view__audio-icon--off {
    display: block;
}

.ckln-call-speaker-view__name {
    display: flex;
    align-items: center;

    width: var(--ck-call-badge-name-width);
    height: calc(var(--ck-call-badge-height) - 4px);

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: var(--ck-call-badge-font-size);
    line-height: var(--ck-call-badge-line-height);

    color: #0C0600;
}

/* Speaking animation for video */
.ckln-call-speaker-view.has-video.is-speaking {
    animation: ckln-call-video-speaking 1.15s ease-in-out infinite;
}

/* Speaking animation for avatar state */
.ckln-call-speaker-view:not(.has-video).is-speaking .ckln-call-speaker-view__avatar {
    animation: ckln-call-avatar-speaking 1.15s ease-in-out infinite;
}

/* Compact 240×142 tile */
.ckln-call-speaker-view--compact {
    --ck-call-tile-width: 240px;
    --ck-call-tile-height: 142px;
    --ck-call-avatar-size: 48px;
    --ck-call-badge-left: auto;
    --ck-call-badge-bottom: 5px;
    --ck-call-badge-height: 24px;
    --ck-call-badge-padding: 3px 8px;
    --ck-call-badge-icon-size: 16px;
    --ck-call-badge-name-width: 71px;
    --ck-call-badge-font-size: 12px;
    --ck-call-badge-line-height: 18px;

    filter: drop-shadow(0px 4px 4px rgba(222, 222, 222, 0.25));
    box-shadow: none;
}

.ckln-call-speaker-view--compact .ckln-call-speaker-view__name-badge {
    left: auto;
    right: 5px;
    bottom: 5px;
    max-width: calc(100% - 10px);
}

/* Layout helper for many participants */
.ckln-call-speaker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;

    width: 100%;
    height: 100%;
}

.ckln-call-speaker-grid .ckln-call-speaker-view {
    width: 100%;
    height: 100%;
    min-height: 142px;
}

.ckln-call-speaker-grid .ckln-call-speaker-view__video {
    object-fit: cover;
}

@keyframes ckln-call-avatar-speaking {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 0 0 color-mix(in srgb, var(--ck-color-accent, #FF8000) 35%, transparent),
            0 0 0 0 color-mix(in srgb, var(--ck-color-accent, #FF8000) 18%, transparent);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow:
            0 0 0 8px color-mix(in srgb, var(--ck-color-accent, #FF8000) 18%, transparent),
            0 0 0 18px color-mix(in srgb, var(--ck-color-accent, #FF8000) 8%, transparent);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 0 0 color-mix(in srgb, var(--ck-color-accent, #FF8000) 0%, transparent),
            0 0 0 0 color-mix(in srgb, var(--ck-color-accent, #FF8000) 0%, transparent);
    }
}

@keyframes ckln-call-video-speaking {
    0% {
        box-shadow:
            0px 4px 4px rgba(222, 222, 222, 0.25),
            0 0 0 0 color-mix(in srgb, var(--ck-color-accent, #FF8000) 28%, transparent);
    }

    50% {
        box-shadow:
            0px 4px 4px rgba(222, 222, 222, 0.25),
            0 0 0 4px color-mix(in srgb, var(--ck-color-accent, #FF8000) 24%, transparent);
    }

    100% {
        box-shadow:
            0px 4px 4px rgba(222, 222, 222, 0.25),
            0 0 0 0 color-mix(in srgb, var(--ck-color-accent, #FF8000) 0%, transparent);
    }
}

/* Responsive */
@media (max-width: 640px) {
    .ckln-call-speaker-view {
        --ck-call-tile-width: 100%;
        --ck-call-tile-height: calc(100dvh - 130px);

        width: 100%;
        min-height: 420px;
        border-radius: 10px;
    }

    .ckln-call-speaker-view--compact {
        --ck-call-tile-width: 100%;
        --ck-call-tile-height: 190px;
        --ck-call-avatar-size: 55px;
    }

    .ckln-call-speaker-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ===== ELEMENT: ckln-call-header | Call Header ===== */
.ckln-call-header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 900;

    box-sizing: border-box;
    width: 100%;
    height: 75px;

    background: transparent;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-call-header *,
.ckln-call-header *::before,
.ckln-call-header *::after {
    box-sizing: border-box;
}

.ckln-call-header__brand {
    position: absolute;
    left: 20px;
    top: 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 25px;
    height: 35px;

    text-decoration: none;
}

.ckln-call-header__brand-icon {
    display: block;

    width: 25px;
    height: 35px;
    flex: 0 0 25px;
}

.ckln-call-header__container {
    position: absolute;
    left: 65px;
    right: 25px;
    top: 27px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;

    height: 28px;
}

.ckln-call-header__title-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 163px;
    height: 28px;
    flex: 0 0 163px;
}

.ckln-call-header__title {
    display: flex;
    align-items: center;

    width: 163px;
    height: 28px;
    margin: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;

    color: #000000;
}

.ckln-call-header__meta {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

    height: 20px;
    min-width: 55px;
    flex: 1 1 auto;
}

.ckln-call-header__timer {
    display: flex;
    align-items: center;

    min-width: 55px;
    height: 20px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: #94A3B8;
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-call-header {
        height: 60px;
    }

    .ckln-call-header__brand {
        left: 15px;
        top: 14px;

        width: 23px;
        height: 32px;
    }

    .ckln-call-header__brand-icon {
        width: 23px;
        height: 32px;
        flex-basis: 23px;
    }

    .ckln-call-header__container {
        left: 48px;
        right: 15px;
        top: 18px;

        height: 24px;
        gap: 12px;
    }

    .ckln-call-header__title-wrap {
        width: auto;
        height: 24px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .ckln-call-header__title {
        width: 100%;
        height: 24px;

        font-size: 16px;
        line-height: 24px;
    }

    .ckln-call-header__meta {
        height: 18px;
        flex: 0 0 auto;
    }

    .ckln-call-header__timer {
        min-width: 52px;
        height: 18px;

        font-size: 12px;
        line-height: 18px;
    }
}

/* ===== ELEMENT: ckln-call-preview-overlay | Call Preview Overlay ===== */
.ckln-call-preview-overlay {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 85px;
    bottom: 88px;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 0;

    overflow: hidden;

    background: #000000;
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-call-preview-overlay *,
.ckln-call-preview-overlay *::before,
.ckln-call-preview-overlay *::after {
    box-sizing: border-box;
}

.ckln-call-preview-overlay__video {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: none;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    background: #000000;
}

.ckln-call-preview-overlay.has-video .ckln-call-preview-overlay__video {
    display: block;
}

.ckln-call-preview-overlay__controls {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;

    width: 98px;
    height: 44px;
}

.ckln-call-preview-overlay__button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 44px;
    height: 44px;
    padding: 0;
    flex: 0 0 44px;

    background: #F1F5F9;
    border: none;
    border-radius: 24px;

    color: #475569;
    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-call-preview-overlay__button:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 8%, #F1F5F9);
    color: var(--ck-color-accent, #FF8000);
}

.ckln-call-preview-overlay__button:active {
    transform: scale(0.96);
}

.ckln-call-preview-overlay__icon {
    display: block;

    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    color: currentColor;
}

.ckln-call-preview-overlay__icon--mic-off,
.ckln-call-preview-overlay__icon--camera-off {
    display: none;
}

.ckln-call-preview-overlay__button.is-muted .ckln-call-preview-overlay__icon--mic-on {
    display: none;
}

.ckln-call-preview-overlay__button.is-muted .ckln-call-preview-overlay__icon--mic-off {
    display: block;
}

.ckln-call-preview-overlay__button.is-camera-off .ckln-call-preview-overlay__icon--camera-on {
    display: none;
}

.ckln-call-preview-overlay__button.is-camera-off .ckln-call-preview-overlay__icon--camera-off {
    display: block;
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-call-preview-overlay {
        left: 15px;
        right: 15px;
        top: 75px;
        bottom: 90px;
        padding-bottom: 16px;
    }
}

/* ===== ELEMENT: ckln-call-participants-panel | Call Participants Panel ===== */
.ckln-call-participants-panel {
    box-sizing: border-box;
    position: relative;

    width: 350px;
    height: 750px;

    background: #FFFFFF;
    border: 1px solid #F1F5F9;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-call-participants-panel *,
.ckln-call-participants-panel *::before,
.ckln-call-participants-panel *::after {
    box-sizing: border-box;
}

.ckln-call-participants-panel__close {
    position: absolute;
    right: 20px;
    top: 30px;
    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 20px;
    height: 20px;
    padding: 0;

    background: transparent;
    border: none;

    color: #000000;
    cursor: pointer;
}

.ckln-call-participants-panel__close-icon {
    display: block;
    width: 20px;
    height: 20px;
}

.ckln-call-participants-panel__list {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 65px;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.ckln-call-participants-panel__item {
    position: relative;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 310px;
    height: 50px;
}

.ckln-call-participants-panel__avatar {
    display: block;

    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    object-fit: cover;
    border-radius: 90px;
}

.ckln-call-participants-panel__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    width: 220px;
    height: 40px;
    min-width: 0;
}

.ckln-call-participants-panel__name {
    display: flex;
    align-items: center;

    width: 100%;
    height: 20px;
    margin: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.4px;

    color: #0C0600;
}

.ckln-call-participants-panel__role {
    display: flex;
    align-items: center;

    width: 100%;
    height: 20px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.4px;

    color: #0C0600;
}

.ckln-call-participants-panel__audio {
    position: absolute;
    right: 0;
    top: 14px;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 22px;
    height: 22px;

    color: rgba(24, 25, 26, 0.8);
}

.ckln-call-participants-panel__audio-icon {
    display: block;

    width: 22px;
    height: 22px;
    flex: 0 0 22px;

    color: currentColor;
}

.ckln-call-participants-panel__audio-icon--off {
    display: none;
}

.ckln-call-participants-panel__item.is-muted .ckln-call-participants-panel__audio {
    width: 20px;
    height: 20px;
    top: 15px;

    color: #0C0600;
}

.ckln-call-participants-panel__item.is-muted .ckln-call-participants-panel__audio-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

.ckln-call-participants-panel__item.is-muted .ckln-call-participants-panel__audio-icon--on {
    display: none;
}

.ckln-call-participants-panel__item.is-muted .ckln-call-participants-panel__audio-icon--off {
    display: block;
}

/* Positioned helper */
.ckln-call-participants-panel--right {
    position: absolute;
    width: 350px;
    height: 750px;
    right: 20px;
    top: 75px;
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-call-participants-panel {
        width: 100%;
        height: 100%;
        min-height: 520px;
        border-radius: 10px;
    }

    .ckln-call-participants-panel__list {
        top: 60px;
    }

    .ckln-call-participants-panel__item {
        width: 100%;
    }

    .ckln-call-participants-panel__content {
        width: calc(100% - 82px);
    }

    .ckln-call-participants-panel--right {
        position: fixed;
        left: 15px;
        right: 15px;
        top: 75px;
        bottom: 90px;

        width: auto;
        height: auto;
    }
}

/* ===== ELEMENT: ckln-sacrament-card | Sacrament Booking Card ===== */
.ckln-sacrament-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 164px;

    width: 980px;
    height: 76px;
    padding: 15px;

    background: #FFFFFF;
    border: 1px solid #F1F5F9;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 15px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-sacrament-card *,
.ckln-sacrament-card *::before,
.ckln-sacrament-card *::after {
    box-sizing: border-box;
}

.ckln-sacrament-card__main {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;

    min-width: 0;
    width: 411.67px;
    height: 44px;
}

.ckln-sacrament-card__time {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 28px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    text-align: center;

    color: #000000;
}

.ckln-sacrament-card__divider {
    display: block;
    flex: 0 0 auto;

    width: 1px;
    height: 40px;

    background: #F1F5F9;
}

.ckln-sacrament-card__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

    width: 172.67px;
    height: 44px;
    min-width: 0;
}

.ckln-sacrament-card__title {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 20px;
    margin: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;

    color: #000000;
}

.ckln-sacrament-card__person {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;

    width: 172.67px;
    height: 20px;
    min-width: 0;

    color: #64748B;
}

.ckln-sacrament-card__person-icon {
    display: block;
    flex: 0 0 auto;

    width: 10.67px;
    height: 10.67px;

    color: #64748B;
}

.ckln-sacrament-card__person-name {
    display: flex;
    align-items: center;

    min-width: 0;
    max-width: 154px;
    height: 20px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: #64748B;
}

.ckln-sacrament-card__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;

    width: 203px;
    height: 30px;
    flex: 0 0 auto;
}

.ckln-sacrament-card__confirm {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 80px;
    height: 25px;
    padding: 5px 15px;

    background: #FFFFFF;
    border: 1px solid #FEF3C7;
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;

    color: #F8A436;

    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-sacrament-card__confirm:hover {
    background: #FEF3C7;
    transform: translateY(-1px);
}

.ckln-sacrament-card__confirm.is-confirmed,
.ckln-sacrament-card.is-confirmed .ckln-sacrament-card__confirm {
    width: 95px;

    background: #DCFCE7;
    border-color: #DCFCE7;

    color: #2E8F52;

    cursor: default;
    pointer-events: none;
    transform: none;
}

.ckln-sacrament-card__action {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 30px;
    height: 30px;
    padding: 3px;

    background: #FFFFFF;
    border: 1px solid #F1F5F9;
    border-radius: 5px;

    color: #64748B;

    cursor: pointer;
    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.ckln-sacrament-card__action svg {
    display: block;
    flex: 0 0 auto;
}

.ckln-sacrament-card__action:hover {
    color: var(--ck-color-accent, #FF8000);
    border-color: color-mix(in srgb, var(--ck-color-accent, #FF8000) 30%, #F1F5F9);
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 5%, transparent);
    transform: translateY(-1px);
}

.ckln-sacrament-card__action--delete {
    color: #DC2727;
}

.ckln-sacrament-card__action--delete:hover {
    color: #DC2727;
    border-color: rgba(220, 39, 39, 0.25);
    background: rgba(220, 39, 39, 0.05);
}

/* Ready confirmed state from backend */
.ckln-sacrament-card[data-status="confirmed"] .ckln-sacrament-card__confirm {
    width: 95px;

    background: #DCFCE7;
    border-color: #DCFCE7;

    color: #2E8F52;

    cursor: default;
    pointer-events: none;
}

.ckln-sacrament-card[data-status="confirmed"] .ckln-sacrament-card__confirm::before {
    content: "Confirmed";
}

.ckln-sacrament-card[data-status="confirmed"] .ckln-sacrament-card__confirm {
    font-size: 0;
}

.ckln-sacrament-card[data-status="confirmed"] .ckln-sacrament-card__confirm::before {
    font-size: 12px;
    line-height: 15px;
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-sacrament-card {
        position: relative;

        display: block;

        width: 350px;
        height: 121px;
        padding: 0;
        gap: 0;

        border-radius: 15px;
    }

    .ckln-sacrament-card__main {
        display: contents;
    }

    .ckln-sacrament-card__time {
        position: absolute;
        left: 15px;
        top: 12px;

        justify-content: flex-start;

        width: 53px;
        height: 28px;
    }

    .ckln-sacrament-card__divider {
        position: absolute;
        left: 15px;
        top: 50px;

        width: 320px;
        height: 1px;

        background: #F1F5F9;
    }

    .ckln-sacrament-card__info {
        position: absolute;
        left: 15px;
        top: 61px;

        gap: 5px;

        width: 172px;
        height: 45px;
    }

    .ckln-sacrament-card__person {
        gap: 8px;
        width: 172px;
        height: 20px;
    }

    .ckln-sacrament-card__person-icon {
        width: 10px;
        height: 10px;
    }

    .ckln-sacrament-card__person-name {
        max-width: 154px;
    }

    .ckln-sacrament-card__actions {
        position: absolute;
        left: auto;
        right: 12px;
        top: 12px;

        width: 203px;
        height: 30px;

        justify-content: flex-end;
        gap: 6px;
    }
}

/* ===== ELEMENT: ckln-stream-card | Stream Event Card ===== */
.ckln-stream-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;

    height: 130px;
    padding: 8px;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 15px;
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.05));

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-stream-card *,
.ckln-stream-card *::before,
.ckln-stream-card *::after {
    box-sizing: border-box;
}

.ckln-stream-card__media {
    position: relative;
    flex: 0 0 auto;

    width: 200px;
    height: 112.5px;

    background: #F1F5F9;
    border-radius: 10px;
    overflow: hidden;
}

.ckln-stream-card__image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.ckln-stream-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;

    width: 657px;
    height: 58px;
    padding: 5px 0;
    flex: 1 1 auto;
    min-width: 0;
}

.ckln-stream-card__head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;

    width: 100%;
    height: 23px;
    min-width: 0;
}

.ckln-stream-card__title {
    display: flex;
    align-items: center;

    width: 100%;
    max-width: 339px;
    height: 23px;
    margin: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;

    color: var(--ck-color-text, #101010);
}

.ckln-stream-card__meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;

    width: 100%;
    height: 16px;
    margin-top: 4px;

    color: #64748B;
}

.ckln-stream-card__meta-icon {
    display: block;
    flex: 0 0 auto;

    width: 16.5px;
    height: 11.67px;
    margin-right: 6px;

    color: #64748B;
}

.ckln-stream-card__meta-text {
    display: flex;
    align-items: center;

    width: 164px;
    height: 16px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;

    color: #64748B;
}

.ckln-stream-card__button {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 38px;
    padding: 12px 20px;
    flex: 0 0 auto;

    background: #F9FAFB;
    border: 1px solid #DEE5EE;
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;

    color: var(--ck-color-text-dark, #1F1F1F);

    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-stream-card__button:hover {
    color: var(--ck-color-accent, #FF8000);
    border-color: color-mix(in srgb, var(--ck-color-accent, #FF8000) 30%, #DEE5EE);
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 5%, #F9FAFB);
    transform: translateY(-1px);
}

/* State: no uploaded image — desktop */
.ckln-stream-card--no-image {
    justify-content: space-between;
    align-items: flex-end;
    padding: 8px 16px 8px 20px;
}

.ckln-stream-card--no-image .ckln-stream-card__media {
    display: none;
}

.ckln-stream-card--no-image .ckln-stream-card__content {
    width: auto;
    height: 58px;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5px 0;
}

.ckln-stream-card--no-image .ckln-stream-card__title {
    max-width: 100%;
}

.ckln-stream-card--no-image .ckln-stream-card__button {
    margin-bottom: 0;
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-stream-card {
        position: relative;

        display: block;

        width: 350px;
        height: 271px;
        padding: 0;

        background: #FFFFFF;
        border: 1px solid #F1F5F9;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
        filter: none;
        border-radius: 15px;
    }

    .ckln-stream-card__media {
        position: absolute;
        left: 0;
        top: 0;

        width: 350px;
        height: 197px;

        background: #F1F5F9;
        border-radius: 15px 15px 0 0;
    }

    .ckln-stream-card__content {
        position: absolute;
        left: 15px;
        top: 212px;

        align-items: flex-start;
        gap: 8px;

        width: 235px;
        height: auto;
        padding: 0;
    }

    .ckln-stream-card__head {
        width: 100%;
        height: 20px;
    }

    .ckln-stream-card__title {
        width: 195px;
        max-width: 195px;
        height: 20px;

        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
    }

    .ckln-stream-card__meta {
        width: 262px;
        height: 16px;
        margin-top: 0;
    }

    .ckln-stream-card__button {
        position: absolute;
        right: 10px;
        top: 223px;

        width: 75px;
        height: 38px;
    }

    /* Mobile: no uploaded image */
    .ckln-stream-card--no-image {
        position: relative;

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;

        width: 350px;
        height: auto;
        min-height: 92px;
        padding: 15px;
    }

    .ckln-stream-card--no-image .ckln-stream-card__media {
        display: none;
    }

    .ckln-stream-card--no-image .ckln-stream-card__content {
        position: static;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;

        width: calc(100% - 90px);
        height: auto;
        padding: 0;
    }

    .ckln-stream-card--no-image .ckln-stream-card__head {
        width: 100%;
        height: auto;
    }

    .ckln-stream-card--no-image .ckln-stream-card__title {
        width: 100%;
        max-width: 100%;
        height: auto;

        overflow: visible;
        white-space: normal;
        text-overflow: unset;
    }

    .ckln-stream-card--no-image .ckln-stream-card__meta {
        width: 100%;
        height: 16px;
        margin-top: 0;
    }

    .ckln-stream-card--no-image .ckln-stream-card__button {
        position: static;

        width: 75px;
        height: 38px;
        flex: 0 0 75px;
    }
}

/* ===== ELEMENT: ckln-chat-contact-item | Chat Contact Item ===== */
.ckln-chat-contact-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;

    width: 350px;
    height: 58px;
    padding: 5px 10px;

    background: transparent;
    border: none;
    border-radius: 12px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    text-align: left;

    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.ckln-chat-contact-item *,
.ckln-chat-contact-item *::before,
.ckln-chat-contact-item *::after {
    box-sizing: border-box;
}

.ckln-chat-contact-item:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 5%, transparent);
}

.ckln-chat-contact-item:active {
    transform: scale(0.995);
}

.ckln-chat-contact-item.is-active {
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 8%, transparent);
}

.ckln-chat-contact-item__avatar-wrap {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 48px;
    height: 48px;
    flex: 0 0 48px;
}

.ckln-chat-contact-item__avatar {
    display: block;

    width: 48px;
    height: 48px;

    object-fit: cover;
    border-radius: 9999px;
}

.ckln-chat-contact-item__status {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;

    width: 14px;
    height: 14px;

    background: var(--ck-color-success, #22C55E);
    border: 2px solid #FFFFFF;
    border-radius: 9999px;
}

/* Online state */
.ckln-chat-contact-item.is-online .ckln-chat-contact-item__status {
    display: block;
}

/* Offline state */
.ckln-chat-contact-item:not(.is-online) .ckln-chat-contact-item__status {
    display: none;
}

.ckln-chat-contact-item__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;

    width: 274px;
    height: 42px;
    min-width: 0;
    flex: 1 1 auto;
}

.ckln-chat-contact-item__top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    width: 100%;
    height: 20px;
    min-width: 0;
}

.ckln-chat-contact-item__name {
    display: flex;
    align-items: center;

    max-width: 160px;
    height: 20px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;

    color: var(--ck-color-heading, #0F172A);
}

.ckln-chat-contact-item__time {
    display: flex;
    align-items: center;

    height: 16px;
    flex: 0 0 auto;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;

    color: var(--ck-color-muted, #64748B);
}

.ckln-chat-contact-item__bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;

    width: 100%;
    height: 20px;
    min-width: 0;
}

.ckln-chat-contact-item__message {
    display: flex;
    align-items: center;

    width: 247px;
    height: 20px;
    min-width: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;

    color: var(--ck-color-muted, #64748B);
}

.ckln-chat-contact-item__badge {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    padding: 2px 0 3px;

    background: var(--ck-color-accent, #FF8000);
    border-radius: 9999px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    line-height: 15px;
    text-align: center;

    color: #FFFFFF;
}

/* Has unread messages */
.ckln-chat-contact-item.has-unread .ckln-chat-contact-item__badge {
    display: flex;
}

/* No unread messages */
.ckln-chat-contact-item:not(.has-unread) .ckln-chat-contact-item__badge {
    display: none;
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-chat-contact-item {
        width: 100%;
        max-width: 350px;
    }

    .ckln-chat-contact-item__content {
        width: auto;
    }

    .ckln-chat-contact-item__name {
        max-width: 145px;
    }

    .ckln-chat-contact-item__message {
        width: auto;
        flex: 1 1 auto;
    }
}

/* ===== ELEMENT: ckln-chat-message-input | Chat Message Input ===== */
.ckln-chat-message-input {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;

    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    width: 100%;
    min-height: 74px;
    padding: 15px 15px 15px 0;

    background: #FDFEFF;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-chat-message-input *,
.ckln-chat-message-input *::before,
.ckln-chat-message-input *::after {
    box-sizing: border-box;
}

.ckln-chat-message-input__inner {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;

    width: 100%;
    max-width: none;
    margin: 0;
}

.ckln-chat-message-input__field-wrap {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;

    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

.ckln-chat-message-input__field {
    display: block;

    width: 100%;
    min-height: 49px;
    max-height: 160px;
    padding: 15px 48px 15px 20px;

    overflow-y: hidden;
    resize: none;

    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 15px;
    outline: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;

    color: var(--ck-color-text, #1F1F1F);

    transition:
        height 0.15s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.ckln-chat-message-input__field::placeholder {
    color: #6B7280;
    opacity: 1;
}

.ckln-chat-message-input__field:focus {
    background: #FFFFFF;
    border-color: color-mix(in srgb, var(--ck-color-accent, #FF8000) 35%, #DEE5EE);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-color-accent, #FF8000) 10%, transparent);
}

.ckln-chat-message-input__send {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 0;
    margin: 0 0 4.5px 0;

    align-self: flex-end;

    background: var(--ck-color-accent, #FF8000);
    border: none;
    border-radius: 9999px;

    color: #FFFEFC;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.ckln-chat-message-input__send-icon {
    display: block;
    width: 24.44px;
    height: 24.44px;
    transform: none;
}

.ckln-chat-message-input__send:not(:disabled):hover {
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 88%, black);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ck-color-accent, #FF8000) 35%, transparent);
    transform: translateY(-1px);
}

.ckln-chat-message-input__send:not(:disabled):active {
    transform: translateY(0);
    box-shadow: none;
}

/* Empty / disabled state */
.ckln-chat-message-input__send:disabled {
    background: #E5E7EB;
    color: #9CA3AF;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* When message has text */
.ckln-chat-message-input.has-value .ckln-chat-message-input__send {
    background: var(--ck-color-accent, #FF8000);
    color: #FFFEFC;
}

/* Textarea grows upward because footer is fixed to bottom */
.ckln-chat-message-input.is-growing {
    min-height: auto;
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-chat-message-input {
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        min-height: 69px;
        padding: 10px 15px 15px;

        background: #FDFEFF;
    }

    .ckln-chat-message-input__inner {
        width: 100%;
        max-width: 100%;
        gap: 10px;
        align-items: flex-end;
    }

    .ckln-chat-message-input__field {
        min-height: 44px;
        max-height: 140px;
        padding: 13px 20px;

        font-size: 14px;
        line-height: 18px;
        border-radius: 15px;
    }

    /* Mobile empty state: field takes full width, button hidden */
    .ckln-chat-message-input:not(.has-value) .ckln-chat-message-input__send {
        display: none;
    }

    .ckln-chat-message-input:not(.has-value) .ckln-chat-message-input__field-wrap {
        width: 100%;
        flex: 1 1 100%;
    }

    /* Mobile typing state: button appears and stays at bottom */
    .ckln-chat-message-input.has-value .ckln-chat-message-input__send {
        display: flex;
    }

    .ckln-chat-message-input.has-value .ckln-chat-message-input__field-wrap {
        width: calc(100% - 50px);
        flex: 1 1 auto;
    }

    .ckln-chat-message-input__send {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        margin-bottom: 2px;
        align-self: flex-end;
    }
}

/* ===== ELEMENT: ckln-chat-messages | Chat Messages Area ===== */
.ckln-chat-messages {
    box-sizing: border-box;
    position: relative;

    width: 100%;
    height: 801px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    background: transparent;
}

.ckln-chat-messages *,
.ckln-chat-messages *::before,
.ckln-chat-messages *::after {
    box-sizing: border-box;
}

.ckln-chat-messages__scroll {
    width: 100%;
    height: 100%;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.25) transparent;
}

.ckln-chat-messages__scroll::-webkit-scrollbar {
    width: 4px;
}

.ckln-chat-messages__scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.25);
    border-radius: 999px;
}

.ckln-chat-messages__inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 15px;

    width: 100%;
    min-height: 100%;
    padding: 20px;
}

.ckln-chat-messages__date {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 23px;
    margin: 5px 0;
}

.ckln-chat-messages__date-label {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 23px;
    min-width: 65px;
    padding: 4px 12px;

    background: rgba(226, 232, 240, 0.5);
    border-radius: 9999px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #64748B;
}

.ckln-chat-message {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;

    width: 100%;
}

.ckln-chat-message--other {
    justify-content: flex-start;
}

.ckln-chat-message--own {
    justify-content: flex-end;
}

.ckln-chat-message__avatar {
    display: block;

    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    object-fit: cover;
    border-radius: 9999px;
}

.ckln-chat-message__bubble {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    max-width: 520px;
    min-height: 57px;
    padding: 10px 16px;

    border-radius: 15px;
}

.ckln-chat-message--other .ckln-chat-message__bubble {
    background: #FFFFFF;
    border: 1px solid #F1F5F9;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}

.ckln-chat-message--own .ckln-chat-message__bubble {
    background: var(--ck-color-accent, #FF8000);
    border: 1px solid var(--ck-color-accent, #FF8000);
}

.ckln-chat-message__text {
    display: block;

    width: 100%;
    margin: 0 0 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    overflow-wrap: anywhere;
    word-break: normal;
}

.ckln-chat-message--other .ckln-chat-message__text {
    color: #334155;
}

.ckln-chat-message--own .ckln-chat-message__text {
    color: #FFFFFF;
}

.ckln-chat-message__time {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    width: 100%;
    height: 15px;
    margin-top: 2px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;
    text-align: right;
    text-transform: uppercase;
}

.ckln-chat-message--other .ckln-chat-message__time {
    color: #94A3B8;
}

.ckln-chat-message--own .ckln-chat-message__time {
    color: rgba(255, 255, 255, 0.7);
}

/* Compact one-line messages */
.ckln-chat-message__text:only-child {
    margin-bottom: 0;
}

/* Desktop width behavior */
@media (min-width: 641px) {
    .ckln-chat-message__bubble {
        width: auto;
        max-width: min(520px, calc(100vw - 160px));
    }

    .ckln-chat-message--other .ckln-chat-message__bubble {
        max-width: 575px;
    }

    .ckln-chat-message--own .ckln-chat-message__bubble {
        max-width: 559px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-chat-messages {
        width: 100%;
        height: calc(100dvh - 129px);
    }

    .ckln-chat-messages__inner {
        gap: 12px;
        padding: 15px;
    }

    .ckln-chat-messages__date {
        height: 23px;
        margin: 3px 0;
    }

    .ckln-chat-message {
        gap: 8px;
    }

    .ckln-chat-message__avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .ckln-chat-message__bubble {
        max-width: calc(100vw - 86px);
        min-height: auto;
        padding: 10px 14px;
        border-radius: 15px;
    }

    .ckln-chat-message--own .ckln-chat-message__avatar {
        display: none;
    }

    .ckln-chat-message--own .ckln-chat-message__bubble {
        max-width: calc(100vw - 30px);
    }

    .ckln-chat-message__text {
        font-size: 14px;
        line-height: 20px;
    }

    .ckln-chat-message__time {
        margin-top: 2px;
    }
}

/* ===== ELEMENT: ckln-chat-header | Chat Header ===== */
.ckln-chat-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;

    width: 100%;
    height: 64px;
    padding: 0 24px;

    background: #FDFEFF;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-chat-header *,
.ckln-chat-header *::before,
.ckln-chat-header *::after {
    box-sizing: border-box;
}

.ckln-chat-header__back {
    display: none;
}

.ckln-chat-header__user {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;

    width: 225px;
    height: 42px;
    min-width: 0;
}

.ckln-chat-header__avatar {
    display: block;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    object-fit: cover;
    border-radius: 9999px;
}

.ckln-chat-header__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 171px;
    height: 40px;
    min-width: 0;
}

.ckln-chat-header__name {
    display: flex;
    align-items: center;

    width: 171px;
    height: 24px;
    margin: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;

    color: var(--ck-color-heading, #0F172A);
}

.ckln-chat-header__status {
    display: flex;
    align-items: center;

    width: 171px;
    height: 16px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.ckln-chat-header__status-online {
    display: none;
    color: var(--ck-color-success, #22C55E);
}

.ckln-chat-header__status-offline {
    display: inline-flex;
    color: var(--ck-color-muted, #64748B);
}

.ckln-chat-header.is-online .ckln-chat-header__status-online {
    display: inline-flex;
}

.ckln-chat-header.is-online .ckln-chat-header__status-offline {
    display: none;
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-chat-header {
        position: relative;

        display: block;

        width: 100%;
        height: 52px;
        padding: 0;

        background: #FDFEFF;
    }

    .ckln-chat-header__back {
        position: absolute;
        left: 10px;
        top: 11px;

        display: flex;
        justify-content: center;
        align-items: center;

        width: 20px;
        height: 20px;
        padding: 0;

        color: var(--ck-color-text, #0C0600);
        background: transparent;
        border: none;

        cursor: pointer;
    }

    .ckln-chat-header__back svg {
        display: block;
        width: 20px;
        height: 20px;
    }

    .ckln-chat-header__user {
        position: absolute;
        left: 40px;
        top: 0;

        display: block;

        width: calc(100% - 50px);
        height: 42px;
    }

    .ckln-chat-header__avatar {
        position: absolute;
        left: 0;
        top: 0;

        width: 42px;
        height: 42px;
    }

    .ckln-chat-header__info {
        position: absolute;
        left: 52px;
        top: 4px;

        width: 150px;
        height: 34px;
    }

    .ckln-chat-header__name {
        width: 150px;
        height: 18px;

        font-weight: 500;
        font-size: 14px;
        line-height: 18px;

        color: var(--ck-color-text, #0C0600);
    }

    .ckln-chat-header__status {
        width: 150px;
        height: 14px;

        font-size: 12px;
        line-height: 14px;
    }
}

/* ===== ELEMENT: ckln-chat-thread-01 | Chat Thread Messages ===== */
/* =========================================================
   CKLN MESSENGER CHAT 01
========================================================= */

#ckln-messenger-chat-01,
.ckln-messenger-chat {
    position: relative;
    box-sizing: border-box;

    width: min(100%, 430px);
    height: min(100dvh, 860px);
    min-height: 560px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #FFFFFF;
    border: 1px solid #F1F5F9;
    border-radius: 24px;
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.08);

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    --ck-chat-accent: var(--ck-color-accent, #45A4E1);
    --ck-chat-accent-soft: color-mix(in srgb, var(--ck-chat-accent) 18%, #FFFFFF);
    --ck-chat-accent-line: color-mix(in srgb, var(--ck-chat-accent) 20%, transparent);
    --ck-chat-border: #F1F5F9;
    --ck-chat-muted: #6B7280;
    --ck-chat-danger: #FF0000;
}

.ckln-messenger-chat *,
.ckln-messenger-chat *::before,
.ckln-messenger-chat *::after {
    box-sizing: border-box;
}

/* Scroll area */

.ckln-messenger-chat__viewport {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    gap: 18px;

    min-height: 0;
    padding: 18px 10px 24px;

    overflow-y: auto;
    overflow-x: hidden;

    scroll-behavior: smooth;
}

.ckln-messenger-chat.is-floating-open .ckln-messenger-chat__viewport {
    overflow: hidden;
}

.ckln-messenger-chat.is-floating-open {
    overscroll-behavior: contain;
}

.ckln-messenger-chat__viewport::-webkit-scrollbar {
    width: 4px;
}

.ckln-messenger-chat__viewport::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ck-chat-accent) 35%, transparent);
    border-radius: 999px;
}

.ckln-messenger-chat__date {
    align-self: center;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 15px;
    margin: 2px 0;

    font-weight: 500;
    font-size: 11px;
    line-height: 15px;

    color: var(--ck-chat-muted);
    white-space: nowrap;
}

/* Message layout */

.ckln-msg {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: flex-end;
    gap: 5px;

    width: 100%;
}

.ckln-msg.is-selected {
    z-index: 1005;
}

.ckln-msg.is-selected .ckln-msg__bubble {
    position: relative;
    z-index: 1005;
}

.ckln-msg.is-selected .ckln-msg__reactions {
    z-index: 1006;
}

.ckln-msg--incoming {
    justify-content: flex-start;
}

.ckln-msg--outgoing {
    justify-content: flex-end;
}

.ckln-msg__avatar {
    display: block;

    width: 35px;
    height: 35px;
    flex: 0 0 35px;

    object-fit: cover;
    border-radius: 50px;
}

.ckln-msg__body {
    position: relative;

    display: flex;
    flex-direction: column;

    max-width: min(300px, calc(100vw - 90px));
}

.ckln-msg--incoming .ckln-msg__body {
    align-items: flex-start;
}

.ckln-msg--outgoing .ckln-msg__body {
    align-items: flex-end;
}

/* Bubble base */

.ckln-msg__bubble {
    position: relative;

    display: block;
    padding: 0;
    margin: 0;

    border: 0;
    outline: none;
    cursor: pointer;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
    text-align: left;

    user-select: none;
    -webkit-user-select: none;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.ckln-msg__bubble:hover {
    transform: translateY(-1px);
}

.ckln-msg__bubble:active {
    transform: scale(0.99);
}

.ckln-msg.is-selected .ckln-msg__bubble {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ck-chat-accent) 28%, transparent);
}

/* Text */

.ckln-msg__bubble--text {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 5px;

    min-width: 150px;
    max-width: min(300px, calc(100vw - 90px));
    min-height: 36px;
    padding: 8px 15px;

    border-radius: 15px;
}

.ckln-msg--incoming .ckln-msg__bubble--text {
    background: #FFFFFF;
    border: 1px solid var(--ck-chat-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ckln-msg--outgoing .ckln-msg__bubble--text,
.ckln-msg--outgoing .ckln-msg__bubble--long,
.ckln-msg--outgoing .ckln-msg__bubble--reply {
    background: var(--ck-chat-accent-soft);
}

.ckln-msg__text {
    display: flex;
    align-items: center;

    max-width: 230px;

    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: #1F1F1F;
}

.ckln-msg__time {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 26px;
    height: 15px;
    flex: 0 0 auto;

    font-weight: 500;
    font-size: 10px;
    line-height: 15px;

    text-align: right;
    text-transform: uppercase;

    color: var(--ck-chat-muted);
}

.ckln-msg__bubble--long {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

    width: min(300px, calc(100vw - 90px));
    min-height: 96px;
    padding: 8px 15px;

    border-radius: 15px;
}

.ckln-msg__bubble--long .ckln-msg__text {
    width: 100%;
    max-width: 270px;
    min-height: 60px;
}

/* Reactions */

.ckln-msg__reactions {
    position: absolute;
    left: 5px;
    bottom: -18px;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    min-width: 30px;
    height: 24px;
    padding: 2px 8px;

    background: #FFFFFF;
    border: 1px solid var(--ck-chat-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 16px;

    cursor: pointer;
}

.ckln-msg--incoming .ckln-msg__reactions {
    left: 10px;
}

.ckln-msg__reactions[hidden],
.ckln-msg__reactions.is-empty {
    display: none;
}

.ckln-msg__reactions span {
    display: flex;
    align-items: center;

    width: 14px;
    height: 16px;

    font-weight: 400;
    font-size: 14px;
    line-height: 16px;

    color: #1F1F1F;
}

.ckln-msg__reactions strong {
    display: flex;
    align-items: center;

    min-width: 6px;
    height: 16px;

    font-weight: 500;
    font-size: 10px;
    line-height: 16px;

    color: #1F1F1F;
}

.ckln-msg__reactions img {
    display: block;

    width: 16px;
    height: 16px;

    object-fit: cover;
    border-radius: 50px;
}

.ckln-msg__reactions--count {
    min-width: 58px;
}

.ckln-msg__reactions--users {
    min-width: 70px;
}

/* Reply */

.ckln-msg__bubble--reply {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;

    width: min(247px, calc(100vw - 90px));
    min-height: 79px;
    padding: 8px 15px;

    border-radius: 15px;
}

.ckln-reply {
    display: flex;
    align-items: flex-start;

    width: 100%;
    height: 35px;

    overflow: hidden;
}

.ckln-reply__line {
    width: 0;
    height: 35px;
    flex: 0 0 0;

    border-left: 2px solid var(--ck-chat-accent);
}

.ckln-reply__content {
    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 35px;
    padding-left: 8px;
}

.ckln-reply__author {
    display: block;

    height: 15px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-weight: 600;
    font-size: 12px;
    line-height: 15px;

    color: var(--ck-chat-accent);
}

.ckln-reply__text {
    display: block;

    height: 15px;
    margin-top: 3px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-weight: 400;
    font-size: 12px;
    line-height: 15px;

    color: #1F1F1F;
}

.ckln-msg__reply-main {
    display: flex;
    align-items: flex-end;
    gap: 5px;

    width: 100%;
}

/* Media */

.ckln-msg__bubble--photo,
.ckln-msg__bubble--video {
    position: relative;

    width: min(250px, calc(100vw - 110px));
    height: 290px;

    overflow: hidden;
    border-radius: 10px;
}

.ckln-media__image,
.ckln-video__preview {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    border-radius: 10px;
}

.ckln-media__time {
    position: absolute;
    right: 10px;
    bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 39px;
    height: 18px;
    padding: 3px 8px;

    background: rgba(31, 31, 31, 0.6);
    border-radius: 40px;

    font-weight: 500;
    font-size: 10px;
    line-height: 12px;

    color: #FFFFFF;
}

.ckln-msg__bubble--video,
.ckln-video__preview {
    background: rgba(205, 205, 205, 0.3);
}

.ckln-video__play {
    position: absolute;
    left: 50%;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    transform: translate(-50%, -50%);
}

.ckln-video__play::before {
    content: "";

    position: absolute;

    width: 40px;
    height: 40px;

    background: rgba(31, 31, 31, 0.6);
    border-radius: 999px;
}

.ckln-video__play span {
    position: relative;
    z-index: 1;

    display: block;

    width: 0;
    height: 0;
    margin-left: 4px;

    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid #FFFFFF;
}

/* File */

.ckln-msg__bubble--file {
    position: relative;

    width: min(300px, calc(100vw - 90px));
    height: 54px;

    background: var(--ck-chat-accent-soft);
    border-radius: 15px;
}

.ckln-file__icon {
    position: absolute;
    left: 7px;
    top: 7px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 4px;

    background: var(--ck-chat-accent);
    border-radius: 30px;

    color: #FFFFFF;
}

.ckln-file__icon svg {
    width: 20px;
    height: 20px;
}

.ckln-file__content {
    position: absolute;
    left: 57px;
    top: 9px;

    display: flex;
    flex-direction: column;

    width: calc(100% - 106px);
    height: 36px;
}

.ckln-file__title {
    display: block;

    height: 18px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-weight: 400;
    font-size: 14px;
    line-height: 18px;

    color: #1F1F1F;
}

.ckln-file__meta {
    display: block;

    height: 14px;
    margin-top: 4px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-weight: 400;
    font-size: 12px;
    line-height: 14px;

    color: #1F1F1F;
}

.ckln-msg__bubble--file .ckln-msg__time {
    position: absolute;
    right: 15px;
    bottom: 8px;
}

/* Map */

.ckln-msg__bubble--map {
    display: flex;
    flex-direction: column;

    width: min(300px, calc(100vw - 90px));
    height: 285px;

    overflow: hidden;

    background: var(--ck-chat-accent-soft);
    border-radius: 15px;
}

.ckln-map__image {
    display: block;

    width: 100%;
    height: 236px;

    overflow: hidden;

    border-radius: 15px 15px 0 0;
}

.ckln-map__image img {
    display: block;

    width: 100%;
    height: 236px;

    object-fit: cover;
}

.ckln-map__footer {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 100%;
    height: 49px;
}

.ckln-map__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;

    color: #1F1F1F;
}

.ckln-map__icon svg {
    width: 20px;
    height: 20px;
}

.ckln-map__text {
    display: flex;
    align-items: center;

    height: 20px;

    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: #161616;
}

/* Poll */

.ckln-msg__bubble--poll {
    position: relative;

    width: min(300px, calc(100vw - 90px));
    height: 159px;

    background: var(--ck-chat-accent-soft);
    border-radius: 15px;
}

.ckln-poll__title {
    position: absolute;
    left: 15px;
    top: 8px;

    display: flex;
    align-items: center;

    width: calc(100% - 30px);
    height: 20px;
    margin: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: #161616;
}

.ckln-poll__option {
    position: absolute;
    left: 0;

    display: block;

    width: 100%;
    height: 48px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    text-align: left;
    color: #161616;

    cursor: pointer;
}

.ckln-poll__option:nth-of-type(1) {
    top: 40px;
}

.ckln-poll__option:nth-of-type(2) {
    top: 88px;
}

.ckln-poll__radio {
    position: absolute;
    left: 15px;
    top: 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    border: 1.5px solid var(--ck-chat-accent);
    border-radius: 9px;
}

.ckln-poll__radio span {
    display: block;

    width: 11px;
    height: 11px;

    background: var(--ck-chat-accent);
    border-radius: 999px;
}

.ckln-poll__label {
    position: absolute;
    left: 48px;
    top: 0;

    display: flex;
    align-items: center;

    width: 150px;
    height: 20px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: #161616;
}

.ckln-poll__line {
    position: absolute;
    left: 48px;
    right: 15px;
    top: 28px;

    display: block;

    height: 0;

    border-top: 2px solid var(--ck-chat-accent-line);
}

.ckln-poll__option.is-selected .ckln-poll__line {
    border-top-color: var(--ck-chat-accent);
}

.ckln-poll__voter {
    position: absolute;
    right: 15px;
    top: 8px;

    display: none;

    width: 15px;
    height: 15px;
}

.ckln-poll__voter img {
    display: block;

    width: 15px;
    height: 15px;

    object-fit: cover;
    border-radius: 50px;
}

.ckln-msg__bubble--poll.is-voted .ckln-poll__option.is-selected .ckln-poll__voter:not(:empty) {
    display: block;
}

.ckln-msg__bubble--poll.is-voted .ckln-poll__option.is-selected .ckln-poll__line {
    right: 15px;
    border-top-color: var(--ck-chat-accent);
}

.ckln-msg__bubble--poll.is-voted .ckln-poll__option:not(.is-selected) .ckln-poll__line {
    border-top-color: var(--ck-chat-accent-line);
}

.ckln-poll__time {
    position: absolute;
    right: 15px;
    bottom: 8px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 26px;
    height: 15px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;

    text-align: right;
    text-transform: uppercase;

    color: rgba(23, 23, 23, 0.7);
}

/* Voice */

.ckln-msg__bubble--voice {
    position: relative;

    width: min(300px, calc(100vw - 90px));
    height: 54px;

    background: var(--ck-chat-accent-soft);
    border-radius: 15px;
}

.ckln-voice__play {
    position: absolute;
    left: 7px;
    top: 7px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    background: var(--ck-chat-accent);
    border-radius: 30px;

    color: #FFFFFF;
}

.ckln-voice__play svg {
    display: block;

    width: 28px;
    height: 28px;
}

.ckln-voice__pause-icon {
    display: none !important;
}

.ckln-msg__bubble--voice.is-playing .ckln-voice__play-icon {
    display: none !important;
}

.ckln-msg__bubble--voice.is-playing .ckln-voice__pause-icon {
    display: block !important;
}

.ckln-voice__wave {
    position: absolute;
    left: 57px;
    right: 82px;
    top: 11px;
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 4px;

    height: 32px;
    padding: 8px 0;

    overflow: hidden;
}

.ckln-voice__wave span {
    display: block;

    width: 2px;
    flex: 0 0 2px;

    background: color-mix(in srgb, var(--ck-chat-accent) 38%, transparent);
    border-radius: 1px;

    transition:
        height 0.18s ease,
        background-color 0.12s linear,
        transform 0.18s ease;
}

.ckln-voice__wave span.is-filled {
    background: var(--ck-chat-accent);
}

.ckln-voice__wave span.is-current {
    background: var(--ck-chat-accent);
    transform: scaleY(1.18);
}

.ckln-msg__bubble--voice.is-playing .ckln-voice__wave span {
    animation: cklnVoiceWavePulse 0.82s ease-in-out infinite;
}

.ckln-msg__bubble--voice.is-playing .ckln-voice__wave span:nth-child(2n) {
    animation-delay: 0.08s;
}

.ckln-msg__bubble--voice.is-playing .ckln-voice__wave span:nth-child(3n) {
    animation-delay: 0.16s;
}

.ckln-msg__bubble--voice.is-playing .ckln-voice__wave span:nth-child(4n) {
    animation-delay: 0.24s;
}

.ckln-voice__duration {
    position: absolute;
    right: 41px;
    top: 19px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 34px;
    height: 15px;

    font-weight: 400;
    font-size: 12px;
    line-height: 15px;

    color: #6B7280;
}

.ckln-msg__bubble--voice .ckln-msg__time {
    position: absolute;
    right: 15px;
    bottom: 8px;
    z-index: 2;

    color: rgba(23, 23, 23, 0.7);
}

@keyframes cklnVoiceWavePulse {
    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.22);
    }
}

/* Floating */

.ckln-chat-floating.is-hidden {
    display: none;
}

.ckln-chat-floating__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;

    background: rgba(242, 242, 242, 0.6);
    backdrop-filter: blur(5px);
}

.ckln-reaction-picker,
.ckln-actions-menu {
    position: fixed;
    z-index: 1010;
}

.ckln-reaction-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    width: 296px;
    height: 45px;
    padding: 12px 15px;

    background: #FFFFFF;
    border-radius: 60px;
    box-shadow: 8px 16px 56px rgba(10, 10, 10, 0.16);
}

.ckln-reaction-picker__item,
.ckln-reaction-picker__add {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    background: transparent;
    border: none;
    cursor: pointer;
}

.ckln-reaction-picker__item {
    width: 32px;
    height: 32px;

    border-radius: 8px;

    font-family: 'Poppins', var(--ck-font-base, 'Montserrat', sans-serif);
    font-size: 24px;
    line-height: 24px;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease;
}

.ckln-reaction-picker__item:hover,
.ckln-reaction-picker__item.is-active {
    background: color-mix(in srgb, var(--ck-chat-accent) 14%, transparent);
}

.ckln-reaction-picker__item:hover {
    transform: translateY(-2px) scale(1.08);
}

.ckln-reaction-picker__add {
    width: 24px;
    height: 24px;

    color: var(--ck-chat-accent);
}

.ckln-reaction-picker__add svg {
    width: 24px;
    height: 24px;
}

.ckln-actions-menu {
    width: 165px;
    padding: 14px 30px 14px 18px;

    background: #FFFFFF;
    border-radius: 15px;
    box-shadow: 8px 16px 56px rgba(10, 10, 10, 0.16);
}

.ckln-actions-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 117px;
    height: 20px;
    padding: 0;
    margin: 0 0 14px;

    background: transparent;
    border: none;

    color: #1F1F1F;
    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-actions-menu__item:last-child {
    margin-bottom: 0;
}

.ckln-actions-menu__item:hover {
    color: var(--ck-chat-accent);
    transform: translateX(2px);
}

.ckln-actions-menu__item span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    font-size: 15px;
    line-height: 18px;
}

.ckln-actions-menu__item strong {
    display: flex;
    align-items: center;

    height: 20px;

    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    white-space: nowrap;
}

.ckln-actions-menu__item--danger,
.ckln-actions-menu__item--danger:hover {
    color: var(--ck-chat-danger);
    transform: none;
}

/* Tablet / desktop */

@media (min-width: 768px) {
    #ckln-messenger-chat-01,
    .ckln-messenger-chat {
        width: min(100%, 520px);
        height: min(100dvh - 40px, 900px);
    }

    .ckln-messenger-chat__viewport {
        padding: 20px 16px 24px;
    }

    .ckln-msg__body {
        max-width: 340px;
    }

    .ckln-msg__bubble--text,
    .ckln-msg__bubble--long,
    .ckln-msg__bubble--file,
    .ckln-msg__bubble--map,
    .ckln-msg__bubble--poll,
    .ckln-msg__bubble--voice {
        width: auto;
        max-width: 340px;
    }

    .ckln-msg__bubble--file,
    .ckln-msg__bubble--map,
    .ckln-msg__bubble--poll,
    .ckln-msg__bubble--voice {
        width: 300px;
    }
}

/* Small mobile */

@media (max-width: 360px) {
    .ckln-messenger-chat {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .ckln-msg__avatar {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .ckln-msg__body {
        max-width: calc(100vw - 70px);
    }

    .ckln-msg__bubble--photo,
    .ckln-msg__bubble--video {
        width: min(230px, calc(100vw - 90px));
        height: 270px;
    }

    .ckln-reaction-picker {
        width: calc(100vw - 24px);
        gap: 12px;
    }

    .ckln-voice__wave {
        left: 54px;
        right: 78px;
        gap: 3px;
    }

    .ckln-voice__wave span {
        width: 2px;
        flex-basis: 2px;
    }

    .ckln-voice__duration {
        right: 39px;
    }
}

/* ===== ELEMENT: ckln-chat-profile-header-01 | Chat Profile Header ===== */
/* =========================================================
   CKLN CHAT PROFILE HEADER 01
========================================================= */

#ckln-chat-profile-header-01,
.ckln-chat-profile-header {
    position: relative;
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;
    min-height: 306px;
    padding: 70px 15px 15px;

    background: #FFFFFF;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #000000;

    --ck-profile-accent: var(--ck-color-accent, #45A4E1);
    --ck-profile-text: #000000;
    --ck-profile-muted: rgba(0, 0, 0, 0.7);
}

.ckln-chat-profile-header *,
.ckln-chat-profile-header *::before,
.ckln-chat-profile-header *::after {
    box-sizing: border-box;
}

.ckln-chat-profile-header__back {
    position: absolute;
    left: 15px;
    top: 70px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    color: #1F1F1F;
    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-chat-profile-header__back:hover {
    color: var(--ck-profile-accent);
    transform: translateX(-2px);
}

.ckln-chat-profile-header__back:active {
    transform: translateX(-2px) scale(0.96);
}

.ckln-chat-profile-header__back svg {
    display: block;
    width: 22px;
    height: 22px;
}

.ckln-chat-profile-header__user {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
}

.ckln-chat-profile-header__avatar {
    display: block;

    width: 100px;
    height: 100px;

    object-fit: cover;
    border-radius: 50px;
}

.ckln-chat-profile-header__name {
    display: block;

    max-width: 100%;
    height: 22px;
    margin: 10px 0 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;

    text-align: center;

    color: var(--ck-profile-text);
}

.ckln-chat-profile-header__username {
    display: block;

    max-width: 100%;
    height: 17px;
    margin: 3px 0 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    text-align: center;

    color: var(--ck-profile-muted);
}

.ckln-chat-profile-header__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;

    width: 250px;
    max-width: calc(100% - 64px);
    margin: 38px auto 0;
}

.ckln-chat-profile-header__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;

    min-width: 0;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: var(--ck-profile-text);
    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-chat-profile-header__action:hover {
    color: var(--ck-profile-accent);
    transform: translateY(-2px);
}

.ckln-chat-profile-header__action:active {
    transform: translateY(-1px) scale(0.96);
}

.ckln-chat-profile-header__action-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    color: currentColor;
}

.ckln-chat-profile-header__action-icon svg {
    display: block;

    width: 22px;
    height: 22px;
}

.ckln-chat-profile-header__action-label {
    display: block;

    width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;

    text-align: center;

    color: #2E2626;
}

.ckln-chat-profile-header__action:hover .ckln-chat-profile-header__action-label {
    color: var(--ck-profile-accent);
}

/* Responsive */

@media (max-width: 360px) {
    .ckln-chat-profile-header {
        min-height: 296px;
        padding-top: 62px;
    }

    .ckln-chat-profile-header__back {
        top: 62px;
    }

    .ckln-chat-profile-header__avatar {
        width: 92px;
        height: 92px;
    }

    .ckln-chat-profile-header__actions {
        column-gap: 18px;
        width: 236px;
        margin-top: 34px;
    }
}

@media (min-width: 768px) {
    .ckln-chat-profile-header {
        width: 520px;
        min-height: 320px;
        padding-top: 76px;
        border-radius: 24px;
    }

    .ckln-chat-profile-header__back {
        left: 24px;
        top: 76px;
    }

    .ckln-chat-profile-header__actions {
        width: 280px;
        column-gap: 34px;
    }
}

/* ===== ELEMENT: ckln-chat-search-header-01 | Chat Search Header ===== */
/* =========================================================
   CKLN CHAT SEARCH HEADER 01
========================================================= */

#ckln-chat-search-header-01,
.ckln-chat-search-header {
    position: relative;
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;
    min-height: 210px;
    padding: 70px 15px 0;

    background: #FFFFFF;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    --ck-search-accent: var(--ck-color-accent, #45A4E1);
    --ck-search-text: #1F1F1F;
    --ck-search-border: #DEE5EE;
    --ck-search-muted: rgba(31, 31, 31, 0.5);
}

.ckln-chat-search-header *,
.ckln-chat-search-header *::before,
.ckln-chat-search-header *::after {
    box-sizing: border-box;
}

.ckln-chat-search-header__top {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 20px;
}

.ckln-chat-search-header__back {
    position: absolute;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    color: #1F1F1F;
    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-chat-search-header__back:hover {
    color: var(--ck-search-accent);
    transform: translateX(-2px);
}

.ckln-chat-search-header__back:active {
    transform: translateX(-2px) scale(0.96);
}

.ckln-chat-search-header__back svg {
    display: block;

    width: 20px;
    height: 20px;
}

.ckln-chat-search-header__title {
    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: 20px;
    margin: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: var(--ck-search-text);
    text-align: center;
}

.ckln-chat-search-header__field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 360px;
    max-width: 100%;
    height: 40px;
    margin: 20px auto 0;
    padding: 0 20px;

    background: #FFFFFF;
    border: 1px solid var(--ck-search-border);
    border-radius: 10px;
}

.ckln-chat-search-header__search-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    color: var(--ck-search-muted);
}

.ckln-chat-search-header__search-icon svg {
    display: block;

    width: 18px;
    height: 18px;
}

.ckln-chat-search-header__input {
    display: block;

    width: 100%;
    min-width: 0;
    height: 17px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;
    outline: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: var(--ck-search-text);
}

.ckln-chat-search-header__input::placeholder {
    color: var(--ck-search-muted);
}

.ckln-chat-search-header__input::-webkit-search-decoration,
.ckln-chat-search-header__input::-webkit-search-cancel-button,
.ckln-chat-search-header__input::-webkit-search-results-button,
.ckln-chat-search-header__input::-webkit-search-results-decoration {
    display: none;
}

.ckln-chat-search-header__tabs {
    display: grid;
    grid-template-columns: 116px 1fr 1fr;
    align-items: start;
    gap: 0;

    width: 360px;
    max-width: 100%;
    height: 25px;
    margin: 20px auto 0;
}

.ckln-chat-search-header__tab {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    height: 25px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #000000;
    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-chat-search-header__tab span {
    display: block;

    width: 100%;
    height: 17px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    text-align: center;

    color: currentColor;
}

.ckln-chat-search-header__tab::after {
    content: "";

    display: block;

    width: 100%;
    height: 0;
    margin-top: 8px;

    border-bottom: 1.5px solid transparent;
    border-radius: 999px;

    transition: border-color 0.18s ease;
}

.ckln-chat-search-header__tab:hover {
    color: var(--ck-search-accent);
}

.ckln-chat-search-header__tab.is-active {
    color: var(--ck-search-accent);
}

.ckln-chat-search-header__tab.is-active::after {
    border-bottom-color: var(--ck-search-accent);
}

/* Responsive */

@media (max-width: 360px) {
    #ckln-chat-search-header-01,
    .ckln-chat-search-header {
        width: 100%;
        min-height: 204px;
        padding: 62px 12px 0;
    }

    .ckln-chat-search-header__field,
    .ckln-chat-search-header__tabs {
        width: 100%;
    }

    .ckln-chat-search-header__tabs {
        grid-template-columns: 108px 1fr 1fr;
    }
}

@media (min-width: 768px) {
    #ckln-chat-search-header-01,
    .ckln-chat-search-header {
        width: 520px;
        min-height: 220px;
        padding: 76px 24px 0;
        border-radius: 24px;
    }

    .ckln-chat-search-header__field,
    .ckln-chat-search-header__tabs {
        width: 420px;
    }

    .ckln-chat-search-header__tabs {
        grid-template-columns: 140px 1fr 1fr;
    }
}

/* ===== ELEMENT: ckln-chat-media-gallery-01 | Chat Media Gallery ===== */
/* =========================================================
   CKLN CHAT MEDIA GALLERY 01
========================================================= */

#ckln-chat-media-gallery-01,
.ckln-chat-media-gallery {
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;
    padding: 0 0 24px;

    background: #FFFFFF;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    --ck-gallery-accent: var(--ck-color-accent, #45A4E1);
    --ck-gallery-text: #1F1F1F;
}

.ckln-chat-media-gallery *,
.ckln-chat-media-gallery *::before,
.ckln-chat-media-gallery *::after {
    box-sizing: border-box;
}

.ckln-chat-media-gallery__group {
    display: block;

    width: 100%;
    margin: 0;
    padding: 0;
}

.ckln-chat-media-gallery__group + .ckln-chat-media-gallery__group {
    margin-top: 15px;
}

.ckln-chat-media-gallery__month {
    display: flex;
    align-items: center;

    width: 100%;
    height: 15px;
    margin: 0 0 10px;
    padding: 0 15px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;

    color: var(--ck-gallery-text);
}

.ckln-chat-media-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;

    width: 100%;
}

.ckln-chat-media-gallery__item {
    position: relative;

    display: block;

    width: 100%;
    aspect-ratio: 130 / 140;
    padding: 0;
    margin: 0;

    overflow: hidden;

    background: #F3F4F6;
    border: none;
    border-radius: 0;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        opacity 0.18s ease,
        filter 0.18s ease;
}

.ckln-chat-media-gallery__item::after {
    content: "";

    position: absolute;
    inset: 0;

    background: color-mix(in srgb, var(--ck-gallery-accent) 0%, transparent);

    transition: background-color 0.18s ease;
}

.ckln-chat-media-gallery__item:hover {
    opacity: 0.96;
    filter: saturate(1.05);
}

.ckln-chat-media-gallery__item:hover::after {
    background: color-mix(in srgb, var(--ck-gallery-accent) 10%, transparent);
}

.ckln-chat-media-gallery__item:active {
    transform: scale(0.985);
}

.ckln-chat-media-gallery__item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* Responsive */

@media (max-width: 360px) {
    #ckln-chat-media-gallery-01,
    .ckln-chat-media-gallery {
        width: 100%;
    }

    .ckln-chat-media-gallery__month {
        padding: 0 12px;
    }
}

@media (min-width: 768px) {
    #ckln-chat-media-gallery-01,
    .ckln-chat-media-gallery {
        width: 520px;
        padding-bottom: 32px;
    }

    .ckln-chat-media-gallery__month {
        padding: 0 20px;
    }

    .ckln-chat-media-gallery__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .ckln-chat-media-gallery__item {
        aspect-ratio: 130 / 140;
    }
}

/* ===== ELEMENT: ckln-chat-files-list-01 | Chat Files List ===== */
/* =========================================================
   CKLN CHAT FILES LIST 01
========================================================= */

#ckln-chat-files-list-01,
.ckln-chat-files-list {
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;
    padding: 0 15px 24px;

    background: #FFFFFF;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    --ck-files-accent: var(--ck-color-accent, #45A4E1);
    --ck-files-accent-soft: color-mix(in srgb, var(--ck-files-accent) 18%, #FFFFFF);
    --ck-files-text: #1F1F1F;
}

.ckln-chat-files-list *,
.ckln-chat-files-list *::before,
.ckln-chat-files-list *::after {
    box-sizing: border-box;
}

.ckln-chat-files-list__group {
    display: block;

    width: 100%;
    margin: 0;
    padding: 0;
}

.ckln-chat-files-list__group + .ckln-chat-files-list__group {
    margin-top: 15px;
}

.ckln-chat-files-list__month {
    display: flex;
    align-items: center;

    width: 100%;
    height: 15px;
    margin: 0 0 10px;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;

    color: var(--ck-files-text);
}

.ckln-chat-files-list__items {
    display: flex;
    flex-direction: column;
    gap: 4px;

    width: 100%;
}

.ckln-chat-files-list__item {
    position: relative;

    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;

    width: 100%;
    height: 54px;
    padding: 7px;

    background: var(--ck-files-accent-soft);
    border: none;
    border-radius: 15px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    text-align: left;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.ckln-chat-files-list__item:hover {
    background: color-mix(in srgb, var(--ck-files-accent) 23%, #FFFFFF);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ck-files-accent) 14%, transparent);
    transform: translateY(-1px);
}

.ckln-chat-files-list__item:active {
    transform: scale(0.99);
}

.ckln-chat-files-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    background: var(--ck-files-accent);
    border-radius: 30px;

    color: #FFFFFF;
}

.ckln-chat-files-list__icon svg {
    display: block;

    width: 24px;
    height: 24px;
}

.ckln-chat-files-list__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    height: 36px;
}

.ckln-chat-files-list__title {
    display: block;

    width: 100%;
    height: 18px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;

    color: var(--ck-files-text);
}

.ckln-chat-files-list__meta {
    display: block;

    width: 100%;
    height: 14px;
    margin-top: 4px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;

    color: var(--ck-files-text);
}

/* Responsive */

@media (max-width: 360px) {
    #ckln-chat-files-list-01,
    .ckln-chat-files-list {
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }
}

@media (min-width: 768px) {
    #ckln-chat-files-list-01,
    .ckln-chat-files-list {
        width: 520px;
        padding-right: 24px;
        padding-left: 24px;
    }
}

/* ===== ELEMENT: ckln-chat-link-card-01 | Chat Link Card ===== */
/* =========================================================
   CKLN CHAT LINK CARD 01
========================================================= */

#ckln-chat-link-card-01,
.ckln-chat-link-card {
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;

    width: 360px;
    max-width: 100%;
    height: 54px;
    padding: 11px 14px;

    background: transparent;
    border: 1px solid rgba(222, 229, 238, 0.5);
    border-radius: 15px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
    text-decoration: none;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.ckln-chat-link-card *,
.ckln-chat-link-card *::before,
.ckln-chat-link-card *::after {
    box-sizing: border-box;
}

.ckln-chat-link-card:hover {
    background: rgba(69, 164, 225, 0.04);
    border-color: rgba(69, 164, 225, 0.35);
    box-shadow: 0px 2px 10px rgba(114, 200, 255, 0.12);
}

.ckln-chat-link-card:active {
    transform: scale(0.99);
}

/* Icon */

.ckln-chat-link-card__icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    background: linear-gradient(225deg, #45A4E1 0%, #66C3FF 100%);
    border-radius: 8px;
}

.ckln-chat-link-card__icon {
    display: block;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

/* Content */

.ckln-chat-link-card__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    min-width: 0;
    height: 18px;
    margin-left: 20px;
    flex: 1 1 auto;
}

.ckln-chat-link-card__title {
    display: block;

    width: auto;
    height: 17px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: #1F1F1F;
    white-space: nowrap;
}

/* Badge */

.ckln-chat-link-card__badge {
    display: flex;
    justify-content: center;
    align-items: center;

    min-width: 18px;
    width: auto;
    height: 18px;
    padding: 2px 6px 3px;

    background: #DC2727;
    border-radius: 9999px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 15px;

    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
}

.ckln-chat-link-card__badge:empty,
.ckln-chat-link-card__badge.is-hidden {
    display: none;
}

/* Arrow */

.ckln-chat-link-card__arrow {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 15px;
    height: 15px;
    flex: 0 0 15px;

    color: #0C0600;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-chat-link-card__arrow svg {
    display: block;
    width: 15px;
    height: 15px;
}

.ckln-chat-link-card:hover .ckln-chat-link-card__arrow {
    color: var(--ck-color-accent, #45A4E1);
    transform: translateX(2px);
}

/* Responsive */

@media (max-width: 768px) {
    #ckln-chat-link-card-01,
    .ckln-chat-link-card {
        width: 360px;
        max-width: calc(100vw - 30px);
        height: 54px;
        padding: 11px 14px;
    }
}

@media (max-width: 360px) {
    .ckln-chat-link-card__content {
        margin-left: 14px;
    }
}

/* ===== ELEMENT: ckln-chat-search-filter-01 | Search Filter ===== */
/* =========================================================
   CKLN CHAT SEARCH FILTER 01
   Search + filters with optional badges
========================================================= */

#ckln-chat-search-filter-01,
.ckln-chat-search-filter {
    width: 390px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
}

.ckln-chat-search-filter *,
.ckln-chat-search-filter *::before,
.ckln-chat-search-filter *::after {
    box-sizing: border-box;
}

/* Top row */

.ckln-chat-search-filter__top {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;

    width: 100%;
    height: 40px;
    margin-top: 65px;
}

.ckln-chat-search-filter__back {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 20px;
    height: 20px;
    padding: 0;

    background: transparent;
    border: none;

    color: #0C0600;
    cursor: pointer;
}

.ckln-chat-search-filter__back svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Search */

.ckln-chat-search-filter__search {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 100%;
    height: 40px;
    padding: 12px 20px;

    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 10px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ckln-chat-search-filter__search:focus-within {
    border-color: var(--ck-color-accent, #45A4E1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-color-accent, #45A4E1) 12%, transparent);
}

.ckln-chat-search-filter__search-icon {
    display: block;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    color: rgba(31, 31, 31, 0.5);

    transition: color 0.2s ease;
}

.ckln-chat-search-filter__search:focus-within .ckln-chat-search-filter__search-icon {
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-chat-search-filter__input {
    display: block;

    width: 100%;
    min-width: 0;
    height: 17px;
    margin: 0;
    padding: 0;

    background: transparent;
    border: none;
    outline: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: #1F1F1F;

    appearance: none;
    -webkit-appearance: none;
}

.ckln-chat-search-filter__input::placeholder {
    color: rgba(31, 31, 31, 0.5);
    opacity: 1;
}

.ckln-chat-search-filter__input::-webkit-search-decoration,
.ckln-chat-search-filter__input::-webkit-search-cancel-button,
.ckln-chat-search-filter__input::-webkit-search-results-button,
.ckln-chat-search-filter__input::-webkit-search-results-decoration {
    display: none;
}

/* Tabs */

.ckln-chat-search-filter__tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;

    width: 100%;
    height: 32px;
    margin-top: 15px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.ckln-chat-search-filter__tabs::-webkit-scrollbar {
    display: none;
}

.ckln-chat-search-filter__tab {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;

    width: auto;
    height: 32px;
    min-width: max-content;
    padding: 8px 10px;

    background: #F1F5F9;
    border: none;
    border-radius: 20px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;

    color: rgba(31, 31, 31, 0.6);
    text-align: center;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-chat-search-filter__tab:first-child {
    padding: 8px 15px;
}

.ckln-chat-search-filter__tab-text {
    display: flex;
    align-items: center;

    width: auto;
    height: 16px;

    font: inherit;
    line-height: 16px;
    color: currentColor;

    white-space: nowrap;
}

.ckln-chat-search-filter__tab:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 12%, #FFFFFF);
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-chat-search-filter__tab.is-active {
    background: linear-gradient(
        0deg,
        color-mix(in srgb, var(--ck-color-accent, #45A4E1) 20%, transparent),
        color-mix(in srgb, var(--ck-color-accent, #45A4E1) 20%, transparent)
    ), #FFFFFF;

    color: var(--ck-color-accent, #45A4E1);
}

.ckln-chat-search-filter__tab:active {
    transform: scale(0.96);
}

/* Badge */

.ckln-chat-search-filter__badge {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 16px;
    min-width: 16px;
    height: 16px;
    padding: 3px 0;

    background: var(--ck-color-accent, #45A4E1);
    border-radius: 9999px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 15px;

    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
}

.ckln-chat-search-filter__badge:empty,
.ckln-chat-search-filter__badge.is-hidden {
    display: none;
}

/* Responsive */

@media (max-width: 390px) {
    #ckln-chat-search-filter-01,
    .ckln-chat-search-filter {
        width: 100%;
        padding: 0 15px;
    }

    .ckln-chat-search-filter__search {
        padding: 12px 16px;
    }

    .ckln-chat-search-filter__tabs {
        gap: 6px;
    }
}

/* ===== ELEMENT: ckln-create-group-link-01 | Create Group Link ===== */
/* =========================================================
   CKLN CREATE GROUP LINK 01
========================================================= */

#ckln-create-group-link-01,
.ckln-create-group-link {
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 350px;
    max-width: 100%;
    height: 42px;
    padding: 0 5px;

    background: transparent;
    border: none;
    border-bottom: 1px solid #DEE5EE;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: var(--ck-color-accent, #45A4E1);
    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.ckln-create-group-link *,
.ckln-create-group-link *::before,
.ckln-create-group-link *::after {
    box-sizing: border-box;
}

.ckln-create-group-link:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 5%, transparent);
    color: var(--ck-color-accent, #45A4E1);
    text-decoration: none;
}

.ckln-create-group-link__icon {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    color: currentColor;
}

.ckln-create-group-link__icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.ckln-create-group-link__text {
    display: block;

    width: auto;
    height: 17px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: currentColor;
    white-space: nowrap;
}

/* Responsive */

@media (max-width: 768px) {
    #ckln-create-group-link-01,
    .ckln-create-group-link {
        width: 350px;
        max-width: calc(100vw - 40px);
        height: 42px;
    }
}

/* ===== ELEMENT: ckln-voice-message-bubble-01 | Voice Message Bubble ===== */
/* =========================================================
   CKLN VOICE MESSAGE BUBBLE 01
   Audio bubble with waveform progress
========================================================= */

#ckln-voice-message-bubble-01,
.ckln-voice-message-bubble {
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;

    width: 300px;
    max-width: 100%;
    height: 54px;
    padding: 7px;

    background: #FFFFFF;
    border: 1px solid #F1F5F9;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 15px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
}

.ckln-voice-message-bubble *,
.ckln-voice-message-bubble *::before,
.ckln-voice-message-bubble *::after {
    box-sizing: border-box;
}

/* =========================================================
   PLAY / PAUSE BUTTON
========================================================= */

.ckln-voice-message-bubble__play {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 4px;
    margin: 0;

    background: var(--ck-color-accent, #45A4E1);
    border: none;
    border-radius: 30px;

    color: #FFFFFF;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.ckln-voice-message-bubble__play:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 90%, black);
    box-shadow: 0px 2px 10px rgba(114, 200, 255, 0.35);
}

.ckln-voice-message-bubble__play:active {
    transform: scale(0.96);
}

.ckln-voice-message-bubble__play-icon,
.ckln-voice-message-bubble__pause-icon {
    display: block;

    width: 28px;
    height: 28px;

    color: currentColor;
}

.ckln-voice-message-bubble__pause-icon {
    display: none;
}

.ckln-voice-message-bubble.is-playing .ckln-voice-message-bubble__play-icon {
    display: none;
}

.ckln-voice-message-bubble.is-playing .ckln-voice-message-bubble__pause-icon {
    display: block;
}

/* =========================================================
   WAVEFORM
   Default bars are soft blue.
   JS adds .is-filled from left to right by audio progress.
========================================================= */

.ckln-voice-message-bubble__waveforms {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;

    width: 157px;
    height: 32px;
    margin-left: 10px;

    overflow: hidden;
}

.ckln-voice-message-bubble__waveform {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;

    height: 32px;
    padding: 8px 0;

    flex: 0 0 auto;
}

.ckln-voice-message-bubble__waveform--long {
    width: 86px;
}

.ckln-voice-message-bubble__waveform--short {
    width: 68px;
}

.ckln-voice-message-bubble__waveform span {
    display: block;

    width: 2px;
    height: var(--h, 10px);
    flex: 0 0 2px;

    background: rgba(69, 164, 225, 0.5);
    border-radius: 1px;

    opacity: 1;

    transition:
        background-color 0.16s ease,
        opacity 0.16s ease,
        transform 0.16s ease;
}

/* Filled by current playback progress */
.ckln-voice-message-bubble__waveform span.is-filled {
    background: var(--ck-color-accent, #45A4E1);
    opacity: 1;
}

/* Optional small pulse only for already-filled bars while playing */
.ckln-voice-message-bubble.is-playing .ckln-voice-message-bubble__waveform span.is-filled {
    animation: cklnVoiceFilledPulse 0.9s ease-in-out infinite alternate;
}

.ckln-voice-message-bubble.is-playing .ckln-voice-message-bubble__waveform span.is-filled:nth-child(2n) {
    animation-delay: 0.08s;
}

.ckln-voice-message-bubble.is-playing .ckln-voice-message-bubble__waveform span.is-filled:nth-child(3n) {
    animation-delay: 0.16s;
}

@keyframes cklnVoiceFilledPulse {
    from {
        transform: scaleY(0.86);
    }

    to {
        transform: scaleY(1);
    }
}

/* =========================================================
   DURATION
========================================================= */

.ckln-voice-message-bubble__duration {
    display: flex;
    align-items: center;

    width: 31px;
    height: 15px;
    flex: 0 0 31px;
    margin-left: auto;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;

    color: #6B7280;
    white-space: nowrap;
}

/* Hidden native audio */
.ckln-voice-message-bubble__audio {
    display: none;
}

/* =========================================================
   STATES
========================================================= */

.ckln-voice-message-bubble.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.ckln-voice-message-bubble.is-loading .ckln-voice-message-bubble__play {
    cursor: wait;
}

.ckln-voice-message-bubble.is-loading .ckln-voice-message-bubble__waveform span {
    animation: cklnVoiceLoading 0.8s ease-in-out infinite alternate;
}

.ckln-voice-message-bubble.is-loading .ckln-voice-message-bubble__waveform span:nth-child(2n) {
    animation-delay: 0.08s;
}

.ckln-voice-message-bubble.is-loading .ckln-voice-message-bubble__waveform span:nth-child(3n) {
    animation-delay: 0.16s;
}

@keyframes cklnVoiceLoading {
    from {
        opacity: 0.35;
    }

    to {
        opacity: 0.9;
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 360px) {
    #ckln-voice-message-bubble-01,
    .ckln-voice-message-bubble {
        width: 100%;
        min-width: 0;
    }

    .ckln-voice-message-bubble__waveforms {
        width: auto;
        flex: 1 1 auto;
    }

    .ckln-voice-message-bubble__waveform--short {
        display: none;
    }
}
/* =========================================================
   CKLN VOICE MESSAGE BUBBLE — mobile waveform full width
========================================================= */

@media (max-width: 768px) {
    #ckln-voice-message-bubble-01,
    .ckln-voice-message-bubble {
        width: 300px;
        max-width: 100%;
        min-width: 0;

        display: flex;
        align-items: center;
    }

    .ckln-voice-message-bubble__play {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .ckln-voice-message-bubble__duration {
        width: 31px;
        flex: 0 0 31px;
        margin-left: 10px;
    }

    .ckln-voice-message-bubble__waveforms {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 32px;
        margin-left: 10px;

        display: flex;
        align-items: center;
        gap: 4px;

        overflow: hidden;
    }

    .ckln-voice-message-bubble__waveform {
        width: auto;
        flex: 1 1 auto;
        min-width: 0;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }

    .ckln-voice-message-bubble__waveform--long {
        flex: 1 1 auto;
        width: auto;
    }

    .ckln-voice-message-bubble__waveform--short {
        flex: 1 1 auto;
        width: auto;
    }

    .ckln-voice-message-bubble__waveform span {
        flex: 0 0 2px;
        width: 2px;
    }
}

@media (max-width: 360px) {
    .ckln-voice-message-bubble__duration {
        margin-left: 8px;
    }

    .ckln-voice-message-bubble__waveforms {
        margin-left: 8px;
    }

    .ckln-voice-message-bubble__waveform--short {
        display: flex;
    }
}

/* ===== ELEMENT: ckln-public-group-switch-01 | Public Group Switch ===== */
/* =========================================================
   CKLN PUBLIC GROUP SWITCH 01
========================================================= */

#ckln-public-group-switch-01,
.ckln-public-group-switch {
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;

    width: 360px;
    max-width: 100%;
    height: 28px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
}

.ckln-public-group-switch *,
.ckln-public-group-switch *::before,
.ckln-public-group-switch *::after {
    box-sizing: border-box;
}

.ckln-public-group-switch__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    flex: 0 0 24px;

    color: #1F1F1F;
}

.ckln-public-group-switch__icon svg {
    display: block;

    width: 24px;
    height: 24px;
}

.ckln-public-group-switch__label {
    display: flex;
    align-items: center;

    width: auto;
    min-width: 0;
    height: 20px;
    margin-left: 26px;
    margin-right: 16px;
    flex: 1 1 auto;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    color: #1F1F1F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Switch */

.ckln-public-group-switch__control {
    position: relative;

    display: block;

    width: 36px;
    height: 20px;
    flex: 0 0 36px;
    padding: 0;
    margin: 0;

    background: #D2D5DA;
    border: none;
    border-radius: 100px;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ckln-public-group-switch__thumb {
    position: absolute;
    left: 2px;
    top: 2px;

    display: block;

    width: 16px;
    height: 16px;

    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgba(39, 39, 39, 0.1);
    border-radius: 100px;

    transition:
        left 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.ckln-public-group-switch__control:hover {
    box-shadow: 0 0 0 3px rgba(69, 164, 225, 0.08);
}

.ckln-public-group-switch__control.is-active,
.ckln-public-group-switch__control[aria-checked="true"] {
    background: var(--ck-color-accent, #45A4E1);
}

.ckln-public-group-switch__control.is-active .ckln-public-group-switch__thumb,
.ckln-public-group-switch__control[aria-checked="true"] .ckln-public-group-switch__thumb {
    left: 18px;
}

.ckln-public-group-switch__control:active .ckln-public-group-switch__thumb {
    transform: scale(0.94);
}

/* Responsive */

@media (max-width: 390px) {
    #ckln-public-group-switch-01,
    .ckln-public-group-switch {
        width: 100%;
    }

    .ckln-public-group-switch__label {
        margin-left: 26px;
    }
}

/* ===== ELEMENT: ckln-chat-composer-advanced-01 | Advanced Chat Composer ===== */
.ckln-chat-shell {
    position: relative;
    width: 390px;
    height: 844px;
    background: #ffffff;
    overflow: visible;
    font-family: 'Montserrat', Arial, sans-serif;
}

.ckln-chat-composer,
.ckln-chat-composer * {
    box-sizing: border-box;
}

.ckln-chat-composer {
    --ckln-accent: #45A4E1;

    position: absolute;
    left: 0;
    bottom: 20px;
    width: 390px;
    height: 150px;
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Plus */
.ckln-chat-composer__plus {
    position: absolute;
    left: 10px;
    bottom: 9px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 20;
}

.ckln-chat-composer.is-attach-open .ckln-chat-composer__plus svg {
    transform: rotate(45deg);
}

.ckln-chat-composer__plus svg {
    display: block;
    transition: transform 0.2s ease;
}

/* Default input */
.ckln-chat-composer__input {
    position: absolute;
    left: 39px;
    bottom: 0;
    width: 294px;
    min-height: 42px;
    z-index: 10;
}

.ckln-chat-composer__textarea {
    display: block;
    width: 294px;
    min-height: 42px;
    max-height: 120px;
    padding: 12px 45px 12px 15px;
    resize: none;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 30px;
    outline: none;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #1F1F1F;
}

.ckln-chat-composer__textarea::placeholder {
    color: #6B7280;
}

.ckln-chat-composer__camera {
    position: absolute;
    right: 10px;
    bottom: 9px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.ckln-chat-composer.is-typing .ckln-chat-composer__camera {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
}

/* Send / mic button */
.ckln-chat-composer__send {
    position: absolute;
    right: 10px;
    bottom: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    background: var(--ckln-accent);
    box-shadow: 0 2px 10px rgba(114, 200, 255, 0.8);
    border-radius: 30px;
    cursor: pointer;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.ckln-chat-composer__send:active {
    transform: scale(0.94);
}

.ckln-chat-composer__send svg {
    display: block;
}

/* Reply */
.ckln-chat-reply {
    position: absolute;
    left: 10px;
    bottom: 0;
    width: 323px;
    height: 90px;
    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 15px;
    z-index: 15;
    overflow: hidden;
}

.ckln-chat-reply[hidden] {
    display: none !important;
}

.ckln-chat-composer.is-replying .ckln-chat-composer__input {
    display: none;
}

.ckln-chat-reply__line {
    position: absolute;
    left: 15px;
    top: 13px;
    width: 0;
    height: 35px;
    border-left: 2px solid var(--ckln-accent);
}

.ckln-chat-reply__content {
    position: absolute;
    left: 23px;
    right: 52px;
    top: 11px;
}

.ckln-chat-reply__name {
    height: 15px;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;
    color: var(--ckln-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ckln-chat-reply__text {
    margin-top: 3px;
    height: 15px;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #1F1F1F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ckln-chat-reply__close {
    position: absolute;
    right: 12px;
    top: 11px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ckln-chat-reply__textarea {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    width: calc(100% - 28px);
    min-height: 19px;
    max-height: 42px;
    padding: 0;
    border: 0;
    outline: none;
    resize: none;
    overflow: hidden;
    background: transparent;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    line-height: 17px;
    color: #1F1F1F;
}

.ckln-chat-reply__textarea::placeholder {
    color: #6B7280;
}

/* Record panel */
.ckln-chat-record {
    position: absolute;
    left: 39px;
    bottom: 0;
    width: 294px;
    height: 42px;
    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 30px;
    z-index: 25;
    display: flex;
    align-items: center;
    padding: 0 12px 0 10px;
    gap: 8px;
}

.ckln-chat-record[hidden] {
    display: none !important;
}

.ckln-chat-composer.is-recording .ckln-chat-composer__input,
.ckln-chat-composer.is-recording .ckln-chat-reply,
.ckln-chat-composer.is-recording .ckln-chat-composer__plus {
    opacity: 0;
    pointer-events: none;
}

.ckln-chat-record__delete {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ckln-chat-record__timer-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 58px;
    flex: 0 0 58px;
}

.ckln-chat-record__dot {
    width: 7px;
    height: 7px;
    background: #DC2727;
    border-radius: 50%;
    animation: cklnRecordDot 1s ease-in-out infinite;
}

@keyframes cklnRecordDot {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

.ckln-chat-record__timer {
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #6B7280;
}

.ckln-chat-record__wave {
    height: 32px;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.ckln-chat-record__wave span {
    width: 2px;
    height: var(--h);
    min-height: 2px;
    background: var(--ckln-accent);
    border-radius: 1px;
    opacity: 0.45;
}

.ckln-chat-record__wave.is-active span {
    animation: cklnWave 1s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.05s);
}

.ckln-chat-record__wave span:nth-child(1) { --i: 1; }
.ckln-chat-record__wave span:nth-child(2) { --i: 2; }
.ckln-chat-record__wave span:nth-child(3) { --i: 3; }
.ckln-chat-record__wave span:nth-child(4) { --i: 4; }
.ckln-chat-record__wave span:nth-child(5) { --i: 5; }
.ckln-chat-record__wave span:nth-child(6) { --i: 6; }
.ckln-chat-record__wave span:nth-child(7) { --i: 7; }
.ckln-chat-record__wave span:nth-child(8) { --i: 8; }
.ckln-chat-record__wave span:nth-child(9) { --i: 9; }
.ckln-chat-record__wave span:nth-child(10) { --i: 10; }

@keyframes cklnWave {
    0%, 100% {
        opacity: 0.45;
        transform: scaleY(0.75);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.25);
    }
}

.ckln-chat-record__hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    text-align: center;
    font-size: 11px;
    line-height: 14px;
    color: rgba(31, 31, 31, 0.45);
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: 0.18s ease;
}

.ckln-chat-composer.is-recording:not(.is-recording-locked) .ckln-chat-record__hint {
    opacity: 1;
    transform: translateY(0);
}

.ckln-chat-composer.is-recording-locked .ckln-chat-record__hint {
    opacity: 1;
    color: var(--ckln-accent);
}

.ckln-chat-composer.is-recording-locked .ckln-chat-record__hint::before {
    content: 'Запис закріплено';
}

.ckln-chat-composer.is-recording-locked .ckln-chat-record__hint {
    font-size: 0;
}

.ckln-chat-composer.is-recording-locked .ckln-chat-record__hint::before {
    font-size: 11px;
}

/* Attach menu */
.ckln-chat-attach {
    position: absolute;
    left: 20px;
    bottom: -70px;
    width: 345px;
    height: 59px;
    z-index: 40;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    animation: cklnAttachInDown 0.18s ease forwards;
}

.ckln-chat-attach[hidden] {
    display: none !important;
}

@keyframes cklnAttachInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ckln-chat-attach__item {
    width: auto;
    min-width: 40px;
    height: 59px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #000000;
}

.ckln-chat-attach__icon {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ckln-chat-attach__icon--location {
    background: rgba(136, 73, 243, 0.2);
}

.ckln-chat-attach__icon--photo {
    background: rgba(51, 153, 231, 0.2);
}

.ckln-chat-attach__icon--video {
    background: rgba(23, 215, 157, 0.2);
}

.ckln-chat-attach__icon--poll {
    background: rgba(244, 72, 108, 0.2);
}

.ckln-chat-attach__icon--file {
    background: rgba(252, 145, 29, 0.2);
}

.ckln-chat-attach__item svg {
    display: block;
}

/* Mobile width */
@media (max-width: 390px) {
    .ckln-chat-shell,
    .ckln-chat-composer {
        width: 100vw;
    }

    .ckln-chat-composer__send {
        right: 10px;
    }
}

/* ===== ELEMENT: ckln-poll-bottom-sheet-01 | Poll Bottom Sheet ===== */
/* =========================================================
   CKLN POLL BOTTOM SHEET 01
   Full CSS
========================================================= */

#ckln-poll-bottom-sheet-01,
.ckln-poll-bottom-sheet {
    position: relative;
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;
    height: 844px;
    margin: 0 auto;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    --ck-poll-accent: var(--ck-color-accent, #45A4E1);
}

.ckln-poll-bottom-sheet *,
.ckln-poll-bottom-sheet *::before,
.ckln-poll-bottom-sheet *::after {
    box-sizing: border-box;
}

/* Backdrop */

.ckln-poll-bottom-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    background: rgba(31, 31, 31, 0.15);

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.2s ease;
}

.ckln-poll-bottom-sheet.is-open::before,
.ckln-poll-bottom-sheet.has-backdrop::before {
    opacity: 1;
}

/* Panel */

.ckln-poll-bottom-sheet__panel {
    position: absolute;
    left: 0;
    top: 244px;
    z-index: 2;

    width: 390px;
    max-width: 100%;
    min-height: 600px;
    padding: 16px 15px 84px;

    background: #FFFFFF;
    border-radius: 30px 30px 0 0;

    overflow: hidden;
}

.ckln-poll-bottom-sheet__title {
    width: 100%;
    height: 20px;
    margin: 0 0 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #1F1F1F;
}

/* Question field */

.ckln-poll-bottom-sheet__field {
    width: 350px;
    max-width: 100%;
    margin: 0 auto;

    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 10px;
}

.ckln-poll-bottom-sheet__field--question {
    height: 80px;
    padding: 10px 14px;
}

.ckln-poll-bottom-sheet__textarea {
    display: block;

    width: 100%;
    height: 58px;
    min-height: 58px;
    max-height: 58px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;
    outline: none;
    resize: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #1F1F1F;

    overflow-y: auto;
}

.ckln-poll-bottom-sheet__textarea::placeholder,
.ckln-poll-bottom-sheet__input::placeholder {
    color: rgba(31, 31, 31, 0.6);
    opacity: 1;
}

/* Dividers */

.ckln-poll-bottom-sheet__divider {
    width: 350px;
    max-width: 100%;
    height: 1px;
    margin-left: auto;
    margin-right: auto;

    background: #DEE5EE;
}

.ckln-poll-bottom-sheet__divider--top {
    margin-top: 15px;
    margin-bottom: 14px;
}

.ckln-poll-bottom-sheet__divider--bottom {
    margin-top: 20px;
    margin-bottom: 18px;
}

/* Answers */

.ckln-poll-bottom-sheet__answers {
    display: flex;
    flex-direction: column;
    gap: 10px;

    width: 350px;
    max-width: 100%;
    max-height: 170px;
    margin: 0 auto;
    padding-right: 0;

    overflow-y: auto;
}

.ckln-poll-bottom-sheet__answers::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.ckln-poll-bottom-sheet__answer {
    position: relative;

    display: flex;
    align-items: center;

    width: 350px;
    max-width: 100%;
    height: 42px;
    flex: 0 0 42px;

    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 10px;
}

.ckln-poll-bottom-sheet__input {
    display: block;

    width: 100%;
    height: 40px;
    padding: 0 44px 0 14px;
    margin: 0;

    background: transparent;
    border: none;
    outline: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #1F1F1F;
}

.ckln-poll-bottom-sheet__input:not(:placeholder-shown) {
    color: #1F1F1F;
}

/* Remove answer icon */

.ckln-poll-bottom-sheet__remove-answer {
    position: absolute;
    right: 10px;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    color: rgba(31, 31, 31, 0.8);

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        color 0.18s ease,
        transform 0.18s ease,
        opacity 0.18s ease;
}

.ckln-poll-bottom-sheet__remove-answer svg {
    display: block;
    width: 20px;
    height: 20px;
}

.ckln-poll-bottom-sheet__remove-answer:hover {
    color: #DC2727;
    transform: translateY(-50%) scale(1.05);
}

.ckln-poll-bottom-sheet__remove-answer:active {
    transform: translateY(-50%) scale(0.94);
}

/* Add answer */

.ckln-poll-bottom-sheet__add {
    display: flex;
    align-items: center;

    width: fit-content;
    height: 22px;
    margin: 10px 0 0 25px;
    padding: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: var(--ck-poll-accent);
    cursor: pointer;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.ckln-poll-bottom-sheet__add:hover {
    opacity: 0.8;
}

.ckln-poll-bottom-sheet__add:active {
    transform: scale(0.98);
}

/* Options */

.ckln-poll-bottom-sheet__options {
    display: flex;
    flex-direction: column;
    gap: 20px;

    width: 350px;
    max-width: 100%;
    margin: 0 auto;
}

.ckln-poll-bottom-sheet__option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 22px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    text-align: left;

    color: #1F1F1F;
    cursor: pointer;
}

.ckln-poll-bottom-sheet__radio {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    border: 1px solid rgba(31, 31, 31, 0.8);
    border-radius: 999px;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease;
}

.ckln-poll-bottom-sheet__radio-dot {
    display: block;

    width: 11px;
    height: 11px;

    background: transparent;
    border-radius: 999px;

    transition: background-color 0.18s ease;
}

.ckln-poll-bottom-sheet__option.is-active .ckln-poll-bottom-sheet__radio,
.ckln-poll-bottom-sheet__option[aria-pressed="true"] .ckln-poll-bottom-sheet__radio {
    border-color: var(--ck-poll-accent);
}

.ckln-poll-bottom-sheet__option.is-active .ckln-poll-bottom-sheet__radio-dot,
.ckln-poll-bottom-sheet__option[aria-pressed="true"] .ckln-poll-bottom-sheet__radio-dot {
    background: var(--ck-poll-accent);
}

.ckln-poll-bottom-sheet__option-text {
    display: flex;
    align-items: center;

    min-width: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #1F1F1F;
}

/* Submit */

.ckln-poll-bottom-sheet__submit {
    position: absolute;
    left: 50%;
    bottom: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 360px;
    max-width: calc(100% - 30px);
    height: 44px;
    padding: 15px 25px;

    background: var(--ck-poll-accent);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(114, 200, 255, 0.8);

    transform: translateX(-50%);

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;

    color: #FFFFFF;

    cursor: pointer;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.ckln-poll-bottom-sheet__submit:disabled,
.ckln-poll-bottom-sheet__submit.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ckln-poll-bottom-sheet__submit:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
}

.ckln-poll-bottom-sheet__submit:not(:disabled):hover {
    box-shadow: 0px 4px 16px rgba(114, 200, 255, 0.55);
    transform: translateX(-50%) translateY(-1px);
}

.ckln-poll-bottom-sheet__submit:not(:disabled):active {
    transform: translateX(-50%) scale(0.98);
}

/* Dynamic states */

.ckln-poll-bottom-sheet.has-extra-answers .ckln-poll-bottom-sheet__add {
    margin-top: 10px;
}

.ckln-poll-bottom-sheet.has-extra-answers .ckln-poll-bottom-sheet__divider--bottom {
    margin-top: 20px;
    margin-bottom: 18px;
}

/* Responsive */

@media (max-width: 390px) {
    #ckln-poll-bottom-sheet-01,
    .ckln-poll-bottom-sheet {
        width: 100%;
        height: 100dvh;
        min-height: 844px;
    }

    .ckln-poll-bottom-sheet__panel {
        width: 100%;
    }

    .ckln-poll-bottom-sheet__field,
    .ckln-poll-bottom-sheet__answers,
    .ckln-poll-bottom-sheet__answer,
    .ckln-poll-bottom-sheet__divider,
    .ckln-poll-bottom-sheet__options {
        width: calc(100% - 10px);
    }
}

/* ===== ELEMENT: ckln-chat-poll-message-01 | Chat Poll Message ===== */
/* =========================================================
   CKLN CHAT POLL MESSAGE 01
   Poll message + voted state
========================================================= */

#ckln-chat-poll-message-01,
.ckln-chat-poll-message {
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #161616;

    --ck-poll-accent: var(--ck-color-accent, #45A4E1);
}

.ckln-chat-poll-message *,
.ckln-chat-poll-message *::before,
.ckln-chat-poll-message *::after {
    box-sizing: border-box;
}

.ckln-chat-poll-message__bubble {
    position: relative;

    width: 300px;
    min-height: 159px;
    margin-left: 80px;
    padding: 8px 15px 25px;

    background: #DAEDF9;
    border-radius: 15px;
}

.ckln-chat-poll-message__question {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 20px;
    margin: 0 0 16px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: #161616;
}

.ckln-chat-poll-message__option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    column-gap: 15px;

    width: 100%;
    min-height: 38px;
    padding: 0;
    margin: 0 0 10px;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    text-align: left;

    color: #161616;
    cursor: pointer;
}

.ckln-chat-poll-message__option:last-of-type {
    margin-bottom: 0;
}

.ckln-chat-poll-message__radio {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;
    margin-top: 5px;

    border: 1.5px solid var(--ck-poll-accent);
    border-radius: 999px;
}

.ckln-chat-poll-message__radio-dot {
    width: 11px;
    height: 11px;

    background: transparent;
    border-radius: 999px;

    transition: background-color 0.18s ease;
}

.ckln-chat-poll-message__option.is-selected .ckln-chat-poll-message__radio-dot,
.ckln-chat-poll-message__option[aria-pressed="true"] .ckln-chat-poll-message__radio-dot {
    background: var(--ck-poll-accent);
}

.ckln-chat-poll-message__option-content {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.ckln-chat-poll-message__option-text {
    display: flex;
    align-items: center;

    min-height: 20px;
    margin-bottom: 8px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: #161616;
}

.ckln-chat-poll-message__line-wrap {
    position: relative;

    display: block;

    width: 237px;
    max-width: 100%;
    height: 15px;
}

.ckln-chat-poll-message__line {
    position: absolute;
    left: 0;
    top: 3px;

    display: block;

    width: 100%;
    height: 4px;

    background: rgba(69, 164, 225, 0.2);
    border-radius: 999px;

    transition:
        background-color 0.18s ease,
        width 0.18s ease;
}

/* Активная линия после голоса */
.ckln-chat-poll-message__option.has-vote .ckln-chat-poll-message__line,
.ckln-chat-poll-message__option.is-selected.has-vote .ckln-chat-poll-message__line {
    background: var(--ck-poll-accent);
}

/* Аватар голосовавшего */
.ckln-chat-poll-message__voter-avatar {
    position: absolute;
    right: 0;
    top: -3px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;

    border-radius: 50px;
    overflow: hidden;

    background: #FFFFFF;
}

.ckln-chat-poll-message__voter-avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    border-radius: inherit;
}

.ckln-chat-poll-message__time {
    position: absolute;
    right: 15px;
    bottom: 8px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    min-width: 20px;
    height: 15px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;

    text-align: right;
    text-transform: uppercase;

    color: rgba(23, 23, 23, 0.7);
}

/* Hover */

.ckln-chat-poll-message__option:hover .ckln-chat-poll-message__radio-dot {
    background: color-mix(in srgb, var(--ck-poll-accent) 35%, transparent);
}

.ckln-chat-poll-message__option.is-selected:hover .ckln-chat-poll-message__radio-dot,
.ckln-chat-poll-message__option[aria-pressed="true"]:hover .ckln-chat-poll-message__radio-dot {
    background: var(--ck-poll-accent);
}

/* Mobile safety */

@media (max-width: 390px) {
    #ckln-chat-poll-message-01,
    .ckln-chat-poll-message {
        width: 100%;
    }

    .ckln-chat-poll-message__bubble {
        width: 300px;
        max-width: calc(100% - 90px);
        margin-left: auto;
        margin-right: 10px;
    }

    .ckln-chat-poll-message__line-wrap {
        width: 100%;
    }
}

/* ===== ELEMENT: ckln-location-share-modal-01 | Location Share Modal ===== */
/* =========================================================
   CKLN LOCATION SHARE MODAL 01
========================================================= */

#ckln-location-share-modal-01,
.ckln-location-share-modal {
    position: relative;
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;
    min-height: 844px;
    margin: 0 auto;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
}

.ckln-location-share-modal *,
.ckln-location-share-modal *::before,
.ckln-location-share-modal *::after {
    box-sizing: border-box;
}

.ckln-location-share-modal__card {
    position: absolute;
    left: 45px;
    top: 230px;

    width: 300px;
    height: 350px;

    background: #FFFFFF;
    border-radius: 15px;

    overflow: hidden;
}

.ckln-location-share-modal__title {
    position: absolute;
    left: 50%;
    top: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 188px;
    min-height: 40px;
    margin: 0;

    transform: translateX(-50%);

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    text-align: center;

    color: #1F1F1F;
}

.ckln-location-share-modal__preview {
    position: absolute;
    left: 0;
    top: 64px;

    width: 300px;
    height: 236px;

    overflow: hidden;

    background: #F1F5F9;
}

.ckln-location-share-modal__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.ckln-location-share-modal__actions {
    position: absolute;
    left: 0;
    bottom: 0;

    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;

    width: 300px;
    height: 50px;

    background: #FFFFFF;
}

.ckln-location-share-modal__button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 50px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #1F1F1F;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}

.ckln-location-share-modal__button:hover {
    color: var(--ck-color-accent, #45A4E1);
    background: rgba(69, 164, 225, 0.06);
}

.ckln-location-share-modal__button:active {
    background: rgba(69, 164, 225, 0.12);
}

.ckln-location-share-modal__divider {
    display: block;

    width: 1px;
    height: 50px;

    background: #DEE5EE;
}

/* Responsive */

@media (max-width: 390px) {
    #ckln-location-share-modal-01,
    .ckln-location-share-modal {
        width: 100%;
        min-height: 100dvh;
    }

    .ckln-location-share-modal__card {
        left: 50%;
        width: 300px;
        transform: translateX(-50%);
    }
}

/* ===== ELEMENT: ckln-chat-location-message-01 | Chat Location Message ===== */
/* =========================================================
   CKLN CHAT LOCATION MESSAGE 01
========================================================= */

#ckln-chat-location-message-01,
.ckln-chat-location-message {
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #161616;

    --ck-location-accent: var(--ck-color-accent, #45A4E1);
}

.ckln-chat-location-message *,
.ckln-chat-location-message *::before,
.ckln-chat-location-message *::after {
    box-sizing: border-box;
}

.ckln-chat-location-message__bubble {
    position: relative;

    width: 300px;
    height: 285px;
    margin-left: 77px;

    background: color-mix(in srgb, var(--ck-location-accent) 18%, #FFFFFF);
    border-radius: 15px;

    overflow: hidden;
}

.ckln-chat-location-message__preview {
    width: 300px;
    height: 236px;

    background: #F1F5F9;
    border-radius: 15px 15px 0 0;

    overflow: hidden;
}

.ckln-chat-location-message__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.ckln-chat-location-message__open {
    position: absolute;
    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 300px;
    height: 49px;
    padding: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: #161616;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}

.ckln-chat-location-message__open:hover {
    color: var(--ck-location-accent);
    background: color-mix(in srgb, var(--ck-location-accent) 8%, transparent);
}

.ckln-chat-location-message__open:active {
    background: color-mix(in srgb, var(--ck-location-accent) 14%, transparent);
}

.ckln-chat-location-message__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;
    flex: 0 0 20px;

    color: #1F1F1F;

    transition: color 0.18s ease;
}

.ckln-chat-location-message__open:hover .ckln-chat-location-message__icon {
    color: var(--ck-location-accent);
}

.ckln-chat-location-message__icon svg {
    display: block;

    width: 20px;
    height: 20px;
}

.ckln-chat-location-message__text {
    display: flex;
    align-items: center;

    height: 20px;

    color: currentColor;
}

/* Mobile safety */

@media (max-width: 390px) {
    #ckln-chat-location-message-01,
    .ckln-chat-location-message {
        width: 100%;
    }

    .ckln-chat-location-message__bubble {
        width: 300px;
        max-width: calc(100% - 90px);
        margin-left: auto;
        margin-right: 13px;
    }

    .ckln-chat-location-message__preview,
    .ckln-chat-location-message__open {
        width: 100%;
    }
}

/* ===== ELEMENT: ckln-image-send-modal-01 | Image Send Modal ===== */
/* =========================================================
   CKLN IMAGE SEND MODAL 01
========================================================= */

#ckln-image-send-modal-01,
.ckln-image-send-modal {
    position: relative;
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;
    min-height: 844px;
    margin: 0 auto;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
}

.ckln-image-send-modal *,
.ckln-image-send-modal *::before,
.ckln-image-send-modal *::after {
    box-sizing: border-box;
}

.ckln-image-send-modal__card {
    position: absolute;
    left: 45px;
    top: 160px;

    width: 300px;
    height: 450px;

    background: #FFFFFF;
    border-radius: 15px;

    overflow: hidden;
}

/* Gallery */

.ckln-image-send-modal__gallery {
    position: absolute;
    left: 0;
    top: 50px;

    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 2px;

    width: 300px;
    height: 350px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    background: #FFFFFF;
}

.ckln-image-send-modal__gallery::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.ckln-image-send-modal__slide {
    position: relative;

    width: 279px;
    min-width: 279px;
    height: 350px;

    flex: 0 0 279px;

    overflow: hidden;
    scroll-snap-align: start;

    background: #F1F5F9;
}

.ckln-image-send-modal__slide:first-child {
    margin-left: 0;
}

.ckln-image-send-modal__slide:last-child {
    margin-right: 0;
}

.ckln-image-send-modal__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* Right preview sliver for next image */
.ckln-image-send-modal__gallery.has-multiple .ckln-image-send-modal__slide {
    width: 279px;
    min-width: 279px;
    flex-basis: 279px;
}

/* Remove photo button */

.ckln-image-send-modal__remove {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;

    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 999px;
    box-shadow: 0px 2px 8px rgba(31, 31, 31, 0.12);

    color: rgba(31, 31, 31, 0.8);

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.ckln-image-send-modal__remove svg {
    display: block;
    width: 20px;
    height: 20px;
}

.ckln-image-send-modal__remove:hover {
    color: #DC2727;
    background: #FFFFFF;
    box-shadow: 0px 4px 12px rgba(31, 31, 31, 0.16);
    transform: scale(1.05);
}

.ckln-image-send-modal__remove:active {
    transform: scale(0.94);
}

/* Actions */

.ckln-image-send-modal__actions {
    position: absolute;
    left: 0;
    bottom: 0;

    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;

    width: 300px;
    height: 50px;

    background: #FFFFFF;
}

.ckln-image-send-modal__button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 50px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #1F1F1F;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}

.ckln-image-send-modal__button:hover {
    color: var(--ck-color-accent, #45A4E1);
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 7%, transparent);
}

.ckln-image-send-modal__button:active {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 12%, transparent);
}

.ckln-image-send-modal__divider {
    display: block;

    width: 1px;
    height: 50px;

    background: #DEE5EE;
}

/* Empty state */

.ckln-image-send-modal.is-empty .ckln-image-send-modal__gallery {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ckln-image-send-modal.is-empty .ckln-image-send-modal__gallery::before {
    content: "Немає вибраних фото";

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: rgba(31, 31, 31, 0.6);
}

/* Responsive */

@media (max-width: 390px) {
    #ckln-image-send-modal-01,
    .ckln-image-send-modal {
        width: 100%;
        min-height: 100dvh;
    }

    .ckln-image-send-modal__card {
        left: 50%;
        width: 300px;
        transform: translateX(-50%);
    }
}

/* ===== ELEMENT: ckln-chat-image-message-01 | Chat Image Message ===== */
/* =========================================================
   CKLN CHAT IMAGE MESSAGE 01
========================================================= */

#ckln-chat-image-message-01,
.ckln-chat-image-message {
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-chat-image-message *,
.ckln-chat-image-message *::before,
.ckln-chat-image-message *::after {
    box-sizing: border-box;
}

.ckln-chat-image-message__bubble {
    position: relative;

    width: 250px;
    height: 290px;
    margin-left: 130px;

    border-radius: 10px;
    overflow: hidden;

    background: #F1F5F9;
}

.ckln-chat-image-message__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    border-radius: 10px;
}

.ckln-chat-image-message__time {
    position: absolute;
    right: 10px;
    bottom: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 39px;
    height: 18px;
    padding: 3px 8px;

    background: rgba(31, 31, 31, 0.6);
    border-radius: 40px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;

    color: #FFFFFF;
}

/* Mobile safety */

@media (max-width: 390px) {
    #ckln-chat-image-message-01,
    .ckln-chat-image-message {
        width: 100%;
    }

    .ckln-chat-image-message__bubble {
        width: 250px;
        height: 290px;
        max-width: calc(100% - 140px);
        margin-left: auto;
        margin-right: 10px;
    }
}

/* ===== ELEMENT: ckln-file-send-modal-01 | File Send Modal ===== */
/* =========================================================
   CKLN FILE SEND MODAL 01
========================================================= */

#ckln-file-send-modal-01,
.ckln-file-send-modal {
    position: relative;
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;
    min-height: 844px;
    margin: 0 auto;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    --ck-file-accent: var(--ck-color-accent, #45A4E1);
}

.ckln-file-send-modal *,
.ckln-file-send-modal *::before,
.ckln-file-send-modal *::after {
    box-sizing: border-box;
}

.ckln-file-send-modal__card {
    position: absolute;
    left: 45px;
    top: 290px;

    width: 300px;
    height: 220px;

    background: #FFFFFF;
    border-radius: 15px;

    overflow: hidden;
}

/* Title */

.ckln-file-send-modal__title {
    position: absolute;
    left: 50%;
    top: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 220px;
    height: 20px;
    margin: 0;

    transform: translateX(-50%);

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    text-align: center;

    color: #1F1F1F;
}

/* File list */

.ckln-file-send-modal__list {
    position: absolute;
    left: 20px;
    top: 51px;

    display: flex;
    flex-direction: column;
    gap: 14px;

    width: 260px;
    max-height: 96px;

    overflow-y: auto;
    overflow-x: hidden;
}

.ckln-file-send-modal__list::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.ckln-file-send-modal__file {
    position: relative;

    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 22px;
    align-items: center;
    column-gap: 10px;

    width: 100%;
    min-height: 32px;
}

.ckln-file-send-modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    color: #1F1F1F;
}

.ckln-file-send-modal__icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.ckln-file-send-modal__info {
    display: flex;
    flex-direction: column;
    gap: 2px;

    min-width: 0;
}

.ckln-file-send-modal__name {
    display: block;

    max-width: 100%;
    height: 18px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;

    color: #1F1F1F;
}

.ckln-file-send-modal__meta {
    display: block;

    max-width: 100%;
    height: 14px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;

    color: #1F1F1F;
}

.ckln-file-send-modal__remove {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    color: rgba(31, 31, 31, 0.45);

    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-file-send-modal__remove svg {
    display: block;
    width: 18px;
    height: 18px;
}

.ckln-file-send-modal__remove:hover {
    color: #DC2727;
    transform: scale(1.05);
}

.ckln-file-send-modal__remove:active {
    transform: scale(0.94);
}

/* Actions */

.ckln-file-send-modal__actions {
    position: absolute;
    left: 0;
    bottom: 0;

    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;

    width: 300px;
    height: 50px;

    background: #FFFFFF;
    border-top: 1px solid #DEE5EE;
}

.ckln-file-send-modal__button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 50px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #1F1F1F;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}

.ckln-file-send-modal__button:hover {
    color: var(--ck-file-accent);
    background: color-mix(in srgb, var(--ck-file-accent) 7%, transparent);
}

.ckln-file-send-modal__button:active {
    background: color-mix(in srgb, var(--ck-file-accent) 12%, transparent);
}

.ckln-file-send-modal__divider {
    display: block;

    width: 1px;
    height: 50px;

    background: #DEE5EE;
}

.ckln-file-send-modal__button:disabled,
.ckln-file-send-modal__button.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

/* Empty */

.ckln-file-send-modal.is-empty .ckln-file-send-modal__list {
    align-items: center;
    justify-content: center;
}

.ckln-file-send-modal.is-empty .ckln-file-send-modal__list::before {
    content: "Файли не вибрані";

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;

    color: rgba(31, 31, 31, 0.55);
}

/* Responsive */

@media (max-width: 390px) {
    #ckln-file-send-modal-01,
    .ckln-file-send-modal {
        width: 100%;
        min-height: 100dvh;
    }

    .ckln-file-send-modal__card {
        left: 50%;
        width: 300px;
        transform: translateX(-50%);
    }
}

/* ===== ELEMENT: ckln-chat-message-actions-drawer-01 | Chat Message Actions Drawer ===== */
/* =========================================================
   CKLN CHAT MESSAGE ACTIONS DRAWER 01
========================================================= */

#ckln-chat-message-actions-drawer-01,
.ckln-chat-message-actions-drawer {
    position: absolute;
    left: 211px;
    top: 351px;
    z-index: 50;

    box-sizing: border-box;

    width: 165px;
    height: 218px;
    padding: 14px 30px 14px 18px;

    background: #FFFFFF;
    border-radius: 15px;
    box-shadow: 8px 16px 56px rgba(10, 10, 10, 0.16);

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    --ck-actions-accent: var(--ck-color-accent, #45A4E1);
    --ck-actions-danger: #FF0000;
}

.ckln-chat-message-actions-drawer *,
.ckln-chat-message-actions-drawer *::before,
.ckln-chat-message-actions-drawer *::after {
    box-sizing: border-box;
}

.ckln-chat-message-actions-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;

    width: 117px;
    height: 190px;
}

/* Item */

.ckln-chat-message-actions-drawer__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: auto;
    min-width: 102px;
    height: 20px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
    text-align: left;

    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-chat-message-actions-drawer__item:nth-child(1) {
    width: 108px;
}

.ckln-chat-message-actions-drawer__item:nth-child(2) {
    width: 106px;
}

.ckln-chat-message-actions-drawer__item:nth-child(3),
.ckln-chat-message-actions-drawer__item:nth-child(4),
.ckln-chat-message-actions-drawer__item:nth-child(5) {
    width: 117px;
}

.ckln-chat-message-actions-drawer__item:nth-child(6) {
    width: 102px;
}

/* Icon */

.ckln-chat-message-actions-drawer__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    color: currentColor;

    transition: color 0.18s ease;
}

.ckln-chat-message-actions-drawer__icon svg {
    display: block;

    width: 18px;
    height: 18px;

    color: currentColor;
}

.ckln-chat-message-actions-drawer__icon svg path {
    transition:
        color 0.18s ease,
        fill 0.18s ease,
        stroke 0.18s ease;
}

/* Text */

.ckln-chat-message-actions-drawer__text {
    display: flex;
    align-items: center;

    height: 20px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    color: currentColor;
    white-space: nowrap;

    transition: color 0.18s ease;
}

/* Hover / Active обычных пунктов */

.ckln-chat-message-actions-drawer__item:not(.ckln-chat-message-actions-drawer__item--danger):hover {
    color: var(--ck-actions-accent);
    transform: translateX(2px);
}

.ckln-chat-message-actions-drawer__item:not(.ckln-chat-message-actions-drawer__item--danger):active {
    color: var(--ck-actions-accent);
    transform: translateX(2px) scale(0.98);
}

.ckln-chat-message-actions-drawer__item:not(.ckln-chat-message-actions-drawer__item--danger):hover .ckln-chat-message-actions-drawer__icon,
.ckln-chat-message-actions-drawer__item:not(.ckln-chat-message-actions-drawer__item--danger):hover .ckln-chat-message-actions-drawer__text,
.ckln-chat-message-actions-drawer__item:not(.ckln-chat-message-actions-drawer__item--danger):active .ckln-chat-message-actions-drawer__icon,
.ckln-chat-message-actions-drawer__item:not(.ckln-chat-message-actions-drawer__item--danger):active .ckln-chat-message-actions-drawer__text {
    color: var(--ck-actions-accent);
}

/* Перекраска SVG обычных пунктов на hover/active */

.ckln-chat-message-actions-drawer__item:not(.ckln-chat-message-actions-drawer__item--danger):hover svg path,
.ckln-chat-message-actions-drawer__item:not(.ckln-chat-message-actions-drawer__item--danger):active svg path {
    stroke: currentColor;
}

.ckln-chat-message-actions-drawer__item:not(.ckln-chat-message-actions-drawer__item--danger):hover svg path[fill]:not([fill="none"]),
.ckln-chat-message-actions-drawer__item:not(.ckln-chat-message-actions-drawer__item--danger):active svg path[fill]:not([fill="none"]) {
    fill: currentColor;
}

/* Delete: всегда красный, без изменения цвета при hover/click */

.ckln-chat-message-actions-drawer__item--danger,
.ckln-chat-message-actions-drawer__item--danger .ckln-chat-message-actions-drawer__icon,
.ckln-chat-message-actions-drawer__item--danger .ckln-chat-message-actions-drawer__text {
    color: var(--ck-actions-danger);
}

.ckln-chat-message-actions-drawer__item--danger:hover,
.ckln-chat-message-actions-drawer__item--danger:active {
    color: var(--ck-actions-danger);
    opacity: 1;
    transform: none;
}

.ckln-chat-message-actions-drawer__item--danger:hover .ckln-chat-message-actions-drawer__icon,
.ckln-chat-message-actions-drawer__item--danger:active .ckln-chat-message-actions-drawer__icon,
.ckln-chat-message-actions-drawer__item--danger:hover .ckln-chat-message-actions-drawer__text,
.ckln-chat-message-actions-drawer__item--danger:active .ckln-chat-message-actions-drawer__text {
    color: var(--ck-actions-danger);
    opacity: 1;
}

.ckln-chat-message-actions-drawer__item--danger svg,
.ckln-chat-message-actions-drawer__item--danger svg path,
.ckln-chat-message-actions-drawer__item--danger:hover svg,
.ckln-chat-message-actions-drawer__item--danger:active svg,
.ckln-chat-message-actions-drawer__item--danger:hover svg path,
.ckln-chat-message-actions-drawer__item--danger:active svg path {
    color: var(--ck-actions-danger);
    stroke: currentColor;
}

.ckln-chat-message-actions-drawer__item--danger svg path[fill]:not([fill="none"]),
.ckln-chat-message-actions-drawer__item--danger:hover svg path[fill]:not([fill="none"]),
.ckln-chat-message-actions-drawer__item--danger:active svg path[fill]:not([fill="none"]) {
    fill: currentColor;
}

/* Hidden state */

.ckln-chat-message-actions-drawer.is-hidden,
.ckln-chat-message-actions-drawer[hidden] {
    display: none;
}

/* Position helpers */

.ckln-chat-message-actions-drawer.is-left {
    left: 14px;
}

.ckln-chat-message-actions-drawer.is-right {
    right: 14px;
    left: auto;
}

.ckln-chat-message-actions-drawer.is-above {
    top: auto;
    bottom: 14px;
}

/* Mobile safety */

@media (max-width: 390px) {
    #ckln-chat-message-actions-drawer-01,
    .ckln-chat-message-actions-drawer {
        left: auto;
        right: 14px;
        top: 351px;

        width: 165px;
        height: 218px;
    }
}

/* ===== ELEMENT: ckln-chat-reaction-picker-01 | Chat Reaction Picker ===== */
/* =========================================================
   CKLN CHAT REACTION PICKER 01
========================================================= */

#ckln-chat-reaction-picker-01,
.ckln-chat-reaction-picker {
    position: absolute;
    left: 47px;
    top: 615px;
    z-index: 60;

    box-sizing: border-box;

    width: 296px;
    height: 45px;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    --ck-reaction-accent: var(--ck-color-accent, #45A4E1);
}

.ckln-chat-reaction-picker *,
.ckln-chat-reaction-picker *::before,
.ckln-chat-reaction-picker *::after {
    box-sizing: border-box;
}

.ckln-chat-reaction-picker__inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 18px;

    width: 296px;
    height: 45px;
    padding: 12px 15px;

    background: #FFFFFF;
    border-radius: 60px;
    box-shadow: 8px 16px 56px rgba(10, 10, 10, 0.16);
}

.ckln-chat-reaction-picker__item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;
    border-radius: 8px;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

.ckln-chat-reaction-picker__item:hover {
    background: color-mix(in srgb, var(--ck-reaction-accent) 10%, transparent);
    transform: translateY(-2px) scale(1.08);
}

.ckln-chat-reaction-picker__item:active {
    transform: translateY(-1px) scale(0.96);
}

.ckln-chat-reaction-picker__item.is-active {
    background: color-mix(in srgb, var(--ck-reaction-accent) 14%, transparent);
}

.ckln-chat-reaction-picker__emoji {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    font-family: 'Poppins', 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 24px;
    letter-spacing: 0.75px;

    color: #1F1F1F;

    user-select: none;
}

.ckln-chat-reaction-picker__item:first-child .ckln-chat-reaction-picker__emoji {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    letter-spacing: 0;
}

.ckln-chat-reaction-picker__more-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 66px;
    height: 32px;
    flex: 0 0 66px;
}

.ckln-chat-reaction-picker__add {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    min-width: 24px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    color: var(--ck-reaction-accent);
    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease,
        background-color 0.18s ease;
}

.ckln-chat-reaction-picker__add svg {
    display: block;

    width: 24px;
    height: 24px;
}

.ckln-chat-reaction-picker__add:hover {
    color: var(--ck-reaction-accent);
    transform: scale(1.12);
}

.ckln-chat-reaction-picker__add:active {
    transform: scale(0.94);
}

/* Hidden */

.ckln-chat-reaction-picker.is-hidden,
.ckln-chat-reaction-picker[hidden] {
    display: none;
}

/* Position helpers */

.ckln-chat-reaction-picker.is-top {
    top: 615px;
}

.ckln-chat-reaction-picker.is-bottom {
    top: auto;
    bottom: 24px;
}

.ckln-chat-reaction-picker.is-left {
    left: 15px;
}

.ckln-chat-reaction-picker.is-right {
    left: auto;
    right: 15px;
}

/* Mobile safety */

@media (max-width: 390px) {
    #ckln-chat-reaction-picker-01,
    .ckln-chat-reaction-picker {
        left: 50%;
        width: 296px;
        max-width: calc(100% - 30px);

        transform: translateX(-50%);
    }

    .ckln-chat-reaction-picker__inner {
        width: 100%;
        gap: 18px;
    }
}

/* ===== ELEMENT: ckln-chat-emoji-picker-sheet-01 | Chat Emoji Picker Sheet ===== */
/* =========================================================
   CKLN CHAT EMOJI PICKER SHEET 01 — FULL CSS
========================================================= */

#ckln-chat-emoji-picker-sheet-01,
.ckln-chat-emoji-picker-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;

    display: none;

    width: 100vw !important;
    height: 100vh !important;

    font-family: 'Montserrat', Arial, sans-serif !important;

    --ck-emoji-accent: var(--ck-color-accent, #45A4E1);
}

#ckln-chat-emoji-picker-sheet-01.is-open,
.ckln-chat-emoji-picker-sheet.is-open {
    display: block !important;
}

.ckln-chat-emoji-picker-sheet,
.ckln-chat-emoji-picker-sheet * {
    box-sizing: border-box !important;
}

.ckln-chat-emoji-picker-sheet__overlay {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    background: rgba(242, 242, 242, 0.6) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.ckln-chat-emoji-picker-sheet__panel {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;

    display: block !important;

    width: 390px !important;
    max-width: 100vw !important;
    height: 454px !important;

    overflow: hidden !important;

    background: rgba(255, 255, 255, 0.6) !important;
    border-radius: 30px 30px 0 0 !important;
    box-shadow:
        0 0 2.88298px rgba(0, 0, 0, 0.05),
        0 54.7766px 129.734px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(57.6596px) !important;
    -webkit-backdrop-filter: blur(57.6596px) !important;

    transform: translateX(-50%) !important;
}

/* Category BG base */
.ckln-chat-emoji-picker-sheet__category-bar {
    box-sizing: border-box !important;

    position: relative !important;

    width: 390px !important;
    max-width: 100vw !important;
    height: 46px !important;

    background: #FFFFFF !important;
    border-bottom: 1px solid #DEE5EE !important;
    backdrop-filter: blur(50.8125px) !important;
    -webkit-backdrop-filter: blur(50.8125px) !important;
    border-radius: 30px 30px 0 0 !important;

    overflow: hidden !important;
    z-index: 2 !important;
}

.ckln-chat-emoji-picker-sheet__categories {
    position: absolute !important;
    left: 50% !important;
    top: 13px !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 340px !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;

    overflow: visible !important;
    background: transparent !important;

    transform: translateX(-50%) !important;
}

.ckln-chat-emoji-picker-sheet__category {
    all: unset !important;

    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;

    color: #A1A5AC !important;

    cursor: pointer !important;
    user-select: none !important;

    transition:
        color 0.18s ease,
        transform 0.18s ease,
        opacity 0.18s ease !important;
}

.ckln-chat-emoji-picker-sheet__category svg {
    display: block !important;

    width: 20px !important;
    height: 20px !important;

    color: currentColor !important;
    fill: currentColor !important;

    transition:
        color 0.18s ease,
        transform 0.18s ease,
        opacity 0.18s ease !important;
}

.ckln-chat-emoji-picker-sheet__category svg path,
.ckln-chat-emoji-picker-sheet__category svg circle,
.ckln-chat-emoji-picker-sheet__category svg rect,
.ckln-chat-emoji-picker-sheet__category svg polygon {
    fill: currentColor !important;
    stroke: none !important;
}

.ckln-chat-emoji-picker-sheet__category:hover {
    color: #707174 !important;
    transform: translateY(-1px) !important;
}

.ckln-chat-emoji-picker-sheet__category.is-active {
    color: var(--ck-emoji-accent, #45A4E1) !important;
    transform: translateY(0) !important;
}

.ckln-chat-emoji-picker-sheet__category::before,
.ckln-chat-emoji-picker-sheet__category::after {
    display: none !important;
    content: none !important;
}

/* Emoji picker component body */
.ckln-chat-emoji-picker-sheet__body {
    position: relative !important;

    display: block !important;

    width: 390px !important;
    max-width: 100vw !important;
    height: 408px !important;

    padding: 10px 20px 21px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(57.6596px) !important;
    -webkit-backdrop-filter: blur(57.6596px) !important;

    scrollbar-width: none !important;
    z-index: 1 !important;
}

.ckln-chat-emoji-picker-sheet__body::-webkit-scrollbar {
    display: none !important;
}

.ckln-chat-emoji-picker-sheet__grid {
    position: relative !important;

    display: grid !important;
    grid-template-columns: repeat(7, 36.06px) !important;
    grid-auto-rows: 36.06px !important;
    gap: 8px 16.06px !important;

    width: 350px !important;
    min-height: 387px !important;

    margin: 0 auto !important;

    background: transparent !important;
}

.ckln-chat-emoji-picker-sheet__emoji {
    all: unset !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 36.06px !important;
    height: 36.06px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif !important;
    font-size: 30px !important;
    line-height: 36.06px !important;
    font-weight: 400 !important;

    color: #1F1F1F !important;

    cursor: pointer !important;
    user-select: none !important;
    text-align: center !important;
    white-space: nowrap !important;

    -webkit-text-fill-color: initial !important;
    opacity: 1 !important;
    visibility: visible !important;

    transition:
        background-color 0.16s ease,
        transform 0.16s ease !important;
}

.ckln-chat-emoji-picker-sheet__emoji::before {
    content: attr(data-emoji) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 36.06px !important;
    height: 36.06px !important;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif !important;
    font-size: 30px !important;
    line-height: 36.06px !important;

    color: #1F1F1F !important;
    -webkit-text-fill-color: initial !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.ckln-chat-emoji-picker-sheet__emoji:hover {
    background: rgba(69, 164, 225, 0.12) !important;
    transform: scale(1.12) !important;
}

.ckln-chat-emoji-picker-sheet__emoji:active {
    transform: scale(0.92) !important;
}

.ckln-chat-emoji-picker-sheet.is-closing .ckln-chat-emoji-picker-sheet__panel {
    animation: cklnEmojiSheetOut 0.18s ease forwards !important;
}

.ckln-chat-emoji-picker-sheet.is-open .ckln-chat-emoji-picker-sheet__panel {
    animation: cklnEmojiSheetIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@keyframes cklnEmojiSheetIn {
    from {
        transform: translateX(-50%) translateY(100%) !important;
    }

    to {
        transform: translateX(-50%) translateY(0) !important;
    }
}

@keyframes cklnEmojiSheetOut {
    from {
        transform: translateX(-50%) translateY(0) !important;
    }

    to {
        transform: translateX(-50%) translateY(100%) !important;
    }
}

@media (max-width: 390px) {
    .ckln-chat-emoji-picker-sheet__panel,
    .ckln-chat-emoji-picker-sheet__category-bar,
    .ckln-chat-emoji-picker-sheet__body {
        width: 100vw !important;
    }

    .ckln-chat-emoji-picker-sheet__categories {
        width: 340px !important;
        max-width: calc(100vw - 40px) !important;
    }

    .ckln-chat-emoji-picker-sheet__grid {
        width: 350px !important;
        max-width: calc(100vw - 40px) !important;
    }
}

@media (max-width: 360px) {
    .ckln-chat-emoji-picker-sheet__categories {
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
    }

    .ckln-chat-emoji-picker-sheet__body {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .ckln-chat-emoji-picker-sheet__grid {
        grid-template-columns: repeat(7, 34px) !important;
        gap: 8px 6px !important;
        width: 100% !important;
    }

    .ckln-chat-emoji-picker-sheet__emoji,
    .ckln-chat-emoji-picker-sheet__emoji::before {
        width: 34px !important;
        height: 34px !important;
        font-size: 28px !important;
        line-height: 34px !important;
    }
}
/* =========================================================
   CKLN EMOJI PICKER — COMPACT PREVIEW SIZE v2
   Визуально: 390×454 -> примерно 281×327
========================================================= */

.ckln-chat-emoji-picker-sheet__panel {
    position: absolute !important;
    left: 50% !important;
    bottom: 20px !important;

    display: block !important;

    width: 390px !important;
    max-width: 100vw !important;
    height: 454px !important;

    overflow: hidden !important;

    background: rgba(255, 255, 255, 0.6) !important;
    border-radius: 30px 30px 0 0 !important;
    box-shadow:
        0 0 2.88298px rgba(0, 0, 0, 0.05),
        0 34px 78px rgba(0, 0, 0, 0.20) !important;
    backdrop-filter: blur(57.6596px) !important;
    -webkit-backdrop-filter: blur(57.6596px) !important;

    transform: translateX(-50%) scale(0.72) !important;
    transform-origin: bottom center !important;
}

/* оверлей оставляем легче для превью */
.ckln-chat-emoji-picker-sheet__overlay {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    background: rgba(242, 242, 242, 0.35) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

.ckln-chat-emoji-picker-sheet.is-open .ckln-chat-emoji-picker-sheet__panel {
    animation: cklnEmojiSheetInCompactV2 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.ckln-chat-emoji-picker-sheet.is-closing .ckln-chat-emoji-picker-sheet__panel {
    animation: cklnEmojiSheetOutCompactV2 0.18s ease forwards !important;
}

@keyframes cklnEmojiSheetInCompactV2 {
    from {
        transform: translateX(-50%) translateY(100%) scale(0.72) !important;
    }

    to {
        transform: translateX(-50%) translateY(0) scale(0.72) !important;
    }
}

@keyframes cklnEmojiSheetOutCompactV2 {
    from {
        transform: translateX(-50%) translateY(0) scale(0.72) !important;
    }

    to {
        transform: translateX(-50%) translateY(100%) scale(0.72) !important;
    }
}

/* анимации тоже должны учитывать scale(0.5) */
.ckln-chat-emoji-picker-sheet.is-open .ckln-chat-emoji-picker-sheet__panel {
    animation: cklnEmojiSheetInCompact 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.ckln-chat-emoji-picker-sheet.is-closing .ckln-chat-emoji-picker-sheet__panel {
    animation: cklnEmojiSheetOutCompact 0.18s ease forwards !important;
}

@keyframes cklnEmojiSheetInCompact {
    from {
        transform: translateX(-50%) translateY(100%) scale(0.5) !important;
    }

    to {
        transform: translateX(-50%) translateY(0) scale(0.5) !important;
    }
}

@keyframes cklnEmojiSheetOutCompact {
    from {
        transform: translateX(-50%) translateY(0) scale(0.5) !important;
    }

    to {
        transform: translateX(-50%) translateY(100%) scale(0.5) !important;
    }
}

/* ===== ELEMENT: ckln-input-text-required | Text Input (Required with Placeholder) ===== */
/* Базові стилі */
.ckln-input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    max-width: 320px;
}

.ckln-input-label {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    color: #28313E;
    display: flex;
    align-items: center;
    gap: 2px;
}

.ckln-input-asterisk {
    color: var(--ck-color-accent, #FF8000);
}

.ckln-input-field {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 10px 15px;
    background: #F9FAFB;
    border: 1px solid #DEE5EE;
    border-radius: 10px;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: #28313E;
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ckln-input-field::placeholder {
    font-weight: 400;
    color: #919396;
    opacity: 1;
}

.ckln-input-field:focus {
    background: #FFFFFF;
    border-color: var(--ck-color-accent, #FF8000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-color-accent, #FF8000) 15%, transparent);
}

.ckln-input-field:disabled {
    background: #EAECEF;
    color: #919396;
    cursor: not-allowed;
    border-color: #EAECEF;
}

/* 🔴 Стан помилки */
.ckln-input-field.is-error {
    border: 1px solid rgba(220, 39, 39, 0.5) !important;
    box-shadow: 0px 1px 6px rgba(220, 39, 39, 0.5) !important;
    background: #FFFAFA;
}

.ckln-input-field.is-error:focus {
    border-color: #DC2727 !important;
    box-shadow: 0 0 0 3px rgba(220, 39, 39, 0.15), 0px 1px 6px rgba(220, 39, 39, 0.5) !important;
}

/* 🔴 Текст помилки */
.ckln-input-error-text {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.25;
    color: #DC2727;
    margin-top: 2px;
    display: none;
}

.ckln-input-error-text.is-visible {
    display: block;
    animation: cklnFadeInError 0.2s ease forwards;
}

@keyframes cklnFadeInError {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== ELEMENT: ckln-date-picker-custom | Date Picker (Input + Custom Dropdown) ===== */
/* Базові стилі */
.ckln-datepicker-wrapper {
    position: relative;
    width: 100%;
    max-width: 320px;
}

.ckln-input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
}

.ckln-input-label {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 12px;
    color: #28313E;
    display: flex;
    align-items: center;
    gap: 2px;
}

.ckln-input-asterisk {
    color: var(--ck-color-accent, #FF8000);
}

.ckln-input-box {
    position: relative;
    width: 100%;
}

.ckln-input-field {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 10px 40px 10px 15px;
    background: #F9FAFB;
    border: 1px solid #DEE5EE;
    border-radius: 10px;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-size: 14px;
    color: #28313E;
    outline: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.ckln-input-field:focus, 
.ckln-datepicker-wrapper.is-active .ckln-input-field {
    background: #FFFFFF;
    border-color: var(--ck-color-accent, #FF8000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-color-accent, #FF8000) 15%, transparent);
}

.ckln-input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(31, 31, 31, 0.6);
    pointer-events: none;
    display: flex;
}

/* 🔴 Стан помилки */
.ckln-input-field.is-error {
    border: 1px solid rgba(220, 39, 39, 0.5) !important;
    box-shadow: 0px 1px 6px rgba(220, 39, 39, 0.5) !important;
    background: #FFFAFA;
}

.ckln-input-field.is-error:focus, 
.ckln-datepicker-wrapper.is-active .ckln-input-field.is-error {
    border-color: #DC2727 !important;
    box-shadow: 0 0 0 3px rgba(220, 39, 39, 0.15), 0px 1px 6px rgba(220, 39, 39, 0.5) !important;
}

.ckln-input-error-text {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.25;
    color: #DC2727;
    margin-top: 2px;
    display: none;
}

.ckln-input-error-text.is-visible {
    display: block;
    animation: cklnFadeInError 0.2s ease forwards;
}

/* Дропдаун */
.ckln-calendar-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100;
    width: 280px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    padding: 15px 15px 20px 15px;
    box-sizing: border-box;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.ckln-calendar-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ckln-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 5px;
}

.ckln-cal-title {
    background: none;
    border: none;
    font-family: inherit;
    font-weight: 500;
    font-size: 15px;
    color: rgba(31, 31, 31, 0.8);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.ckln-cal-title:hover {
    background: #F0F2F5;
    color: var(--ck-color-accent, #FF8000);
}

.ckln-cal-nav {
    display: flex;
    gap: 15px;
}

.ckln-cal-nav-btn {
    background: none;
    border: none;
    color: rgba(31, 31, 31, 0.6);
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.ckln-cal-nav-btn:hover {
    color: var(--ck-color-accent, #FF8000);
}

.ckln-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 13px;
    color: rgba(31, 31, 31, 0.5);
    margin-bottom: 10px;
}

.ckln-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.ckln-cal-day {
    background: none;
    border: 2px solid transparent;
    border-radius: 50%;
    font-family: inherit;
    font-size: 14px;
    color: #1F1F1F;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ckln-cal-day:hover:not(.is-selected) {
    background: #F0F2F5;
}

.ckln-cal-day.is-outside {
    opacity: 0.3;
}

.ckln-cal-day.is-today {
    border-color: var(--ck-color-accent, #FF8000);
    color: var(--ck-color-accent, #FF8000);
    font-weight: 600;
}

.ckln-cal-day.is-selected {
    background: var(--ck-color-accent, #FF8000);
    color: #FFFFFF;
    font-weight: 600;
    border-color: var(--ck-color-accent, #FF8000);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--ck-color-accent, #FF8000) 40%, transparent);
}

/* Місяці та Роки */
.ckln-cal-months, 
.ckln-cal-years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 5px;
}

.ckln-cal-grid-btn {
    background: none;
    border: 2px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: #1F1F1F;
    cursor: pointer;
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ckln-cal-grid-btn:hover:not(.is-selected) {
    background: #F0F2F5;
}

.ckln-cal-grid-btn.is-selected {
    background: var(--ck-color-accent, #FF8000);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--ck-color-accent, #FF8000) 40%, transparent);
}

.ckln-cal-grid-btn.is-outside {
    opacity: 0.4;
}

/* ===== ELEMENT: ckln-phone-picker | Phone Input (with Country Code Dropdown & Search) ===== */
/* Базові стилі */
.ckln-phone-wrapper {
    position: relative;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ckln-input-label {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 12px;
    color: #28313E;
    display: flex;
    align-items: center;
    gap: 2px;
}

.ckln-input-asterisk {
    color: var(--ck-color-accent, #FF8000);
}

.ckln-phone-box {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    background: #F9FAFB;
    border: 1px solid #DEE5EE;
    border-radius: 10px;
    display: flex;
    align-items: center;
    transition: all 0.25s ease;
}

.ckln-phone-box:focus-within, 
.ckln-phone-wrapper.is-active .ckln-phone-box {
    background: #FFFFFF;
    border-color: var(--ck-color-accent, #FF8000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-color-accent, #FF8000) 15%, transparent);
}

/* 🔴 Стан помилки (вішається на .ckln-phone-box) */
.ckln-phone-box.is-error {
    border: 1px solid rgba(220, 39, 39, 0.5) !important;
    box-shadow: 0px 1px 6px rgba(220, 39, 39, 0.5) !important;
    background: #FFFAFA;
}

.ckln-phone-box.is-error:focus-within, 
.ckln-phone-wrapper.is-active .ckln-phone-box.is-error {
    border-color: #DC2727 !important;
    box-shadow: 0 0 0 3px rgba(220, 39, 39, 0.15), 0px 1px 6px rgba(220, 39, 39, 0.5) !important;
}

.ckln-input-error-text {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.25;
    color: #DC2727;
    margin-top: 2px;
    display: none;
}

.ckln-input-error-text.is-visible {
    display: block;
    animation: cklnFadeInError 0.2s ease forwards;
}

/* Внутрішні елементи телефону */
.ckln-phone-prefix-btn {
    background: none;
    border: none;
    height: 100%;
    padding: 0 10px 0 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-size: 14px;
    color: #28313E;
    font-weight: 500;
    border-radius: 10px 0 0 10px;
}

.ckln-phone-prefix-btn:hover {
    background: rgba(0, 0, 0, 0.03);
}

.ckln-phone-chevron {
    color: #919396;
    transition: transform 0.2s;
}

.ckln-phone-wrapper.is-active .ckln-phone-chevron {
    transform: rotate(180deg);
}

.ckln-phone-divider {
    width: 1px;
    height: 20px;
    background: #DEE5EE;
}

.ckln-phone-input-field {
    flex-grow: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 15px 10px 10px;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: #28313E;
    border-radius: 0 10px 10px 0;
}

.ckln-phone-input-field::placeholder {
    font-weight: 400;
    color: #919396;
    opacity: 1;
}

/* Дропдаун */
.ckln-phone-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 100;
    width: 100%;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.ckln-phone-wrapper.is-active .ckln-phone-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ckln-phone-search-box {
    padding: 10px;
    border-bottom: 1px solid #DEE5EE;
}

.ckln-phone-search {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: #F9FAFB;
    border: 1px solid #DEE5EE;
    border-radius: 6px;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.ckln-phone-search:focus {
    border-color: var(--ck-color-accent, #FF8000);
}

.ckln-phone-list {
    margin: 0;
    padding: 5px 0;
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
}

.ckln-phone-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    cursor: pointer;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-size: 14px;
    color: #28313E;
    transition: background 0.2s;
}

.ckln-phone-item:hover {
    background: #F0F2F5;
}

.ckln-phone-item.is-selected {
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 10%, transparent);
    color: var(--ck-color-accent, #FF8000);
    font-weight: 600;
}

.ckln-phone-item-name {
    flex-grow: 1;
}

.ckln-phone-item-code {
    color: #919396;
    font-size: 13px;
}

.ckln-phone-item.is-selected .ckln-phone-item-code {
    color: inherit;
}

/* ===== ELEMENT: ckln-input-email-validated | Email Input (with JS Validation) ===== */
.ckln-input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    max-width: 320px;
}

.ckln-input-label {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 12px;
    color: #28313E;
    display: flex;
    align-items: center;
    gap: 2px;
}

.ckln-input-asterisk {
    color: var(--ck-color-accent, #FF8000);
}

.ckln-input-field {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 10px 15px;
    background: #F9FAFB;
    border: 1px solid #DEE5EE;
    border-radius: 10px;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: #28313E;
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ckln-input-field::placeholder {
    font-weight: 400;
    color: #919396;
    opacity: 1;
}

.ckln-input-field:focus {
    background: #FFFFFF;
    border-color: var(--ck-color-accent, #FF8000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-color-accent, #FF8000) 15%, transparent);
}

/* 🔴 Стан помилки */
.ckln-input-field.is-error {
    border: 1px solid rgba(220, 39, 39, 0.5) !important;
    box-shadow: 0px 1px 6px rgba(220, 39, 39, 0.5) !important;
    background: #FFFAFA;
}

.ckln-input-field.is-error:focus {
    border-color: #DC2727 !important;
    box-shadow: 0 0 0 3px rgba(220, 39, 39, 0.15), 0px 1px 6px rgba(220, 39, 39, 0.5) !important;
}

/* 🔴 Текст помилки */
.ckln-input-error-text {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 1.25;
    color: #DC2727;
    margin-top: 2px;
    display: none;
}

.ckln-input-error-text.is-visible {
    display: block;
    animation: cklnFadeInError 0.2s ease forwards;
}

@keyframes cklnFadeInError {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== ELEMENT: ckln-dropdown-select | Custom Select (Dropdown) ===== */
/* -------------------------------------------
   1. ОБГОРТКА ТА КНОПКА (ТРИГЕР)
------------------------------------------- */
.ckln-dropdown-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ckln-dropdown-trigger {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 10px 15px;
    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 10px; /* Початковий стан: всі кути заокруглені */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: #1F1F1F;
    cursor: pointer;
    
    /* border-radius змінюємо миттєво (0s), щоб не було "желе" під час кліку */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, border-radius 0s;
}

/* Фокус (тільки в закритому стані) */
.ckln-dropdown-trigger:focus {
    border-color: var(--ck-color-accent, #FF8000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-color-accent, #FF8000) 15%, transparent);
    outline: none;
}

/* 🟢 ВІДКРИТИЙ СТАН: МАГІЯ ЗЛИТТЯ 🟢 */
.ckln-dropdown-wrapper.is-open .ckln-dropdown-trigger {
    border-radius: 10px 10px 0 0; /* Зрізаємо нижні кути */
    border-color: var(--ck-color-accent, #FF8000); /* Фарбуємо в акцент */
    border-bottom-color: transparent; /* Ховаємо нижню лінію, щоб злитися зі списком */
    box-shadow: none; /* Відключаємо фокус-кільце, щоб воно не ламало фігуру знизу */
}

.ckln-dropdown-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1F1F1F;
}

.ckln-dropdown-chevron {
    transition: transform 0.3s ease;
}

.ckln-dropdown-wrapper.is-open .ckln-dropdown-chevron {
    transform: rotate(180deg);
}

/* -------------------------------------------
   2. ВИПАДАЮЧИЙ СПИСОК (ВІДКРИТИЙ СТАН)
------------------------------------------- */
.ckln-dropdown-list {
    position: absolute;
    top: calc(100% - 1px); 
    left: 0;
    z-index: 100;
    
    width: 100%;
    max-height: 190px;
    overflow-y: auto;
    
    background: #FFFFFF;
    
    border: 1px solid var(--ck-color-accent, #FF8000);
    border-top: none; 
    border-radius: 0 0 10px 10px; 
    
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.05);
    
    margin: 0;
    /* 🔴 Прибрали padding: 5px 0, щоб пункти прилягали впритул і лінії йшли від краю до краю */
    padding: 0; 
    list-style: none;
    box-sizing: border-box;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ckln-dropdown-wrapper.is-open .ckln-dropdown-list {
    opacity: 1;
    visibility: visible;
}

/* -------------------------------------------
   3. ЕЛЕМЕНТИ СПИСКУ
------------------------------------------- */
.ckln-dropdown-item {
    /* Трохи збільшили клікабельну зону, щоб з лініями текст мав більше "повітря" */
    padding: 12px 15px; 
    cursor: pointer;
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-size: 14px;
    color: #1F1F1F;
    transition: background 0.2s;
    
    /* 🔴 Та сама лінія зверху кожного пункту */
    border-top: 1px solid #DEE5EE;
}

/* Прибираємо лінію зверху для першого елемента, 
   ЯКЩО ти не хочеш, щоб вона розділяла кнопку і список. 
   (Але зазвичай з нею виглядає краще, тому цей блок опціональний) */
/*
.ckln-dropdown-item:first-child {
    border-top: none;
}
*/

.ckln-dropdown-item:hover {
    background: #F9FAFB;
}

.ckln-dropdown-item.is-selected {
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 10%, transparent);
    color: var(--ck-color-accent, #FF8000);
    font-weight: 600;
}

/* ===== ELEMENT: ckln-checkbox-terms | Checkbox (Terms & Conditions with Links) ===== */
/* ГРУПА ТА ОБГОРТКА */
.ckln-checkbox-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
}

.ckln-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ПРИХОВАНИЙ ІНПУТ */
.ckln-checkbox-hidden {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* КРУЖОК (БАЗОВИЙ) */
.ckln-checkbox-indicator {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(31, 31, 31, 0.5);
    border-radius: 50%;
    box-sizing: border-box;
    margin-top: 1.5px;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

/* ВНУТРІШНЄ БІЛЕ КІЛЬЦЕ */
.ckln-checkbox-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 8px;
    height: 8px;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    box-sizing: border-box;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🟢 АКТИВНИЙ СТАН */
.ckln-checkbox-hidden:checked + .ckln-checkbox-indicator {
    background: var(--ck-color-accent, #45A4E1);
    border-color: var(--ck-color-accent, #45A4E1);
}

.ckln-checkbox-hidden:checked + .ckln-checkbox-indicator::after {
    transform: translate(-50%, -50%) scale(1);
}

/* 🔴 СТАН ПОМИЛКИ (is-error) */
.ckln-checkbox-hidden.is-error + .ckln-checkbox-indicator {
    border-color: #DC2727 !important;
    background: #FFFAFA;
    box-shadow: 0px 1px 6px rgba(220, 39, 39, 0.3);
}

/* ТЕКСТ ПОМИЛКИ */
.ckln-input-error-text {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 11px;
    color: #DC2727;
    margin-top: 4px;
    margin-left: 22px; /* Вирівнювання під текстом, а не під кружком */
    display: none;
    line-height: 1.2;
}

.ckln-input-error-text.is-visible {
    display: block;
    animation: cklnFadeInError 0.2s ease forwards;
}

@keyframes cklnFadeInError {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ТЕКСТ ТА ПОСИЛАННЯ */
.ckln-checkbox-text {
    font-family: var(--ck-font-base, 'Inter', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: rgba(31, 31, 31, 0.5);
    transition: color 0.2s;
}

.ckln-checkbox-text a.ckln-link {
    color: var(--ck-color-accent, #45A4E1);
    text-decoration: none;
    font-weight: 600;
}

.ckln-checkbox-text a.ckln-link:hover {
    text-decoration: underline;
}

/* ===== ELEMENT: ckln-time-picker-15min | Time Picker (15-minute step) ===== */
.ckln-time-frame-bg {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1px;
    gap: 1px;
    width: 102px;
    height: 38px;
    background: #DEE5EE;
    border: 1px solid #DEE5EE;
    border-radius: 6px;
    position: relative;
}

.ckln-time-input-block {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 67px;
    height: 36px;
    background: #FFFFFF;
    border-radius: 6px 5px 5px 6px;
}

.ckln-time-field {
    width: 100%;
    border: none;
    background: transparent;
    text-align: center;
    
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px; 
    line-height: 1;
    
    color: rgba(31, 31, 31, 0.8);
    outline: none;
    padding: 0;
    margin: 0;
}

/* Правий блок (Frame 1321317445) */
.ckln-time-nav-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 36px;
    background: #FFFFFF;
    border-radius: 5px 6px 6px 5px;
    gap: 2px;
}

.ckln-time-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}

.ckln-time-nav-btn:hover {
    opacity: 0.6;
}

.ckln-time-field::-webkit-inner-spin-button,
.ckln-time-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===== ELEMENT: ckln-duration-picker-15min | Duration Picker (15 min step) ===== */
/* Контейнер (Frame 1321317447) */
.ckln-duration-frame-bg {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1px;
    gap: 1px;
    width: 125px;
    height: 38px;
    background: #DEE5EE;
    border: 1px solid #DEE5EE;
    border-radius: 6px;
    position: relative;
}

/* Лівий блок (Frame 1321317444) */
.ckln-duration-input-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 6px 12px 6px;
    gap: 4px;
    width: 90px;
    height: 36px;
    background: #FFFFFF;
    border-radius: 6px 5px 5px 6px;
}

.ckln-duration-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(31, 31, 31, 0.8);
    flex-shrink: 0;
}

.ckln-duration-field {
    width: 100%;
    border: none;
    background: transparent;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: rgba(31, 31, 31, 0.8);
    outline: none;
    padding: 0;
}

/* Правий блок (Frame 1321317445) */
.ckln-duration-nav-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 36px;
    background: #FFFFFF;
    border-radius: 5px 6px 6px 5px;
    gap: 2px;
}

.ckln-duration-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}

.ckln-duration-nav-btn:hover {
    opacity: 0.6;
}

/* ===== ELEMENT: ckln-checkbox-square-accent | Square Checkbox (Accent Fill) ===== */
.ckln-square-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    vertical-align: middle;
}

.ckln-square-checkbox-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ckln-square-checkbox-box {
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border: 1px solid #000000;
    border-radius: 2px;
    background-color: transparent;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    flex-shrink: 0;
    position: relative;
    transition: all 0.15s ease;
}

/* Стан Checked */
.ckln-square-checkbox-hidden:checked + .ckln-square-checkbox-box {
    background-color: var(--ck-color-accent, #FF8000);
    border-color: var(--ck-color-accent, #FF8000);
}

/* Іконка пташки */
.ckln-checkbox-icon {
    
    width: 8px; 
    height: 8px;
    
    opacity: 0;
    transform: scale(0.4);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.2);
    pointer-events: none;
    
    overflow: visible;
}

.ckln-square-checkbox-hidden:checked + .ckln-square-checkbox-box .ckln-checkbox-icon {
    opacity: 1;
    transform: scale(1);
}

.ckln-square-checkbox-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #000000;
}

/* ===== ELEMENT: ckln-app-header | App Header With Account And Notifications ===== */
.ckln-app-header {
    position: sticky !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 99999 !important;

    box-sizing: border-box;
    width: 100%;
    height: 60px;

    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);

    box-shadow: none;
    filter: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-app-header *,
.ckln-app-header *::before,
.ckln-app-header *::after {
    box-sizing: border-box;
}

.ckln-app-header::before,
.ckln-app-header::after {
    box-shadow: none !important;
    filter: none !important;
}

/* Brand / Logo */
.ckln-app-header__brand {
    position: absolute;
    left: 15px;
    top: 14px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: auto;
    height: 34px;

    line-height: 0;
    text-decoration: none;
}

.ckln-app-header__logo,
.ckln-app-header__brand svg {
    display: block;

    width: auto !important;
    height: 34px !important;
    max-width: none !important;
    max-height: 34px !important;

    flex: 0 0 auto;
}

.ckln-app-header__brand-text{
 color: black;
 padding-left:8px;
}

/* Bell */
.ckln-app-header__bell {
    position: absolute;
    right: 61px;
    top: 18px;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 24px;
    height: 24px;
    padding: 0;

    color: rgba(31, 31, 31, 0.8);
    background: transparent;
    border: none;

    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.ckln-app-header__bell:hover,
.ckln-app-header__bell.is-open {
    color: var(--ck-color-accent, #FF8000);
    transform: translateY(-1px);
}

.ckln-app-header__bell-icon {
    display: block;
    flex: 0 0 auto;
}

.ckln-app-header__bell-icon--active {
    display: none;
}

.ckln-app-header__bell.has-notifications .ckln-app-header__bell-icon--default {
    display: none;
}

.ckln-app-header__bell.has-notifications .ckln-app-header__bell-icon--active {
    display: block;
}

/* Avatar */
.ckln-app-header__avatar-btn {
    position: absolute;
    right: 15px;
    top: 14px;

    display: block;
    width: 34px;
    height: 34px;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 90px;

    cursor: pointer;
}

.ckln-app-header__avatar {
    display: block;
    width: 34px;
    height: 34px;

    object-fit: cover;
    border-radius: 90px;
}

.ckln-app-header__avatar-btn:hover .ckln-app-header__avatar,
.ckln-app-header__avatar-btn.is-open .ckln-app-header__avatar {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ck-color-accent, #FF8000) 35%, transparent);
}

/* Account dropdown */
.ckln-app-header__account {
    position: absolute;
    right: 15px;
    top: 60px;
    z-index: 100002;

    width: 240px;
    height: 141px;

    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(91, 91, 91, 0.15);
    border-radius: 15px;
}

.ckln-app-header__account[hidden],
.ckln-app-header__notifications[hidden] {
    display: none !important;
}

.ckln-app-header__account-label {
    position: absolute;
    left: 15px;
    top: 15px;

    width: 52px;
    height: 12px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;

    color: rgba(31, 31, 31, 0.6);
}

.ckln-app-header__account-name {
    position: absolute;
    top: 37px;
    left:15px;

    max-width: 200px;
    height: 17px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;

    color: #1F1F1F;
}

.ckln-app-header__account-username {
    position: absolute;
    top: 58px;
    left:15px;
    max-width: 200px;
    height: 15px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;

    color: rgba(31, 31, 31, 0.6);
}

.ckln-app-header__account-line {
    position: absolute;
    left: 0;
    top: 83px;

    width: 240px;
    height: 1px;

    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 10%, transparent);
}

.ckln-app-header__logout {
    position: absolute;
    left: 10px;
    top: 93px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;

    width: 220px;
    height: 38px;
    padding: 10px 15px;

    background: #FEF2F2;
    border: 1px solid #FDE8E9;
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;

    color: #DC2727;

    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ckln-app-header__logout svg {
    display: block;
    flex: 0 0 18px;
}

.ckln-app-header__logout:hover {
    background: #FDE8E9;
    transform: translateY(-1px);
}

/* Notifications dropdown */
.ckln-app-header__notifications {
    position: absolute;
    right: 55px;
    top: 60px;
    z-index: 100001;

    width: 320px;
    height: 550px;

    overflow: hidden;

    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(91, 91, 91, 0.15);
    border-radius: 15px;
}

.ckln-app-header__notifications-head {
    position: relative;

    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    height: 37px;
    padding: 15px 15px 10px;
}

.ckln-app-header__notifications-title {
    display: block;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
    text-transform: uppercase;

    color: rgba(31, 31, 31, 0.6);
}

.ckln-app-header__read-all {
    display: block;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;

    color: var(--ck-color-accent, #FF8000);

    cursor: pointer;
}

.ckln-app-header__read-all:hover {
    text-decoration: underline;
}

.ckln-app-header__notifications-list {
    width: 100%;
    height: calc(100% - 37px);

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: rgba(31, 31, 31, 0.15) transparent;
}

.ckln-app-header__notifications-list::-webkit-scrollbar {
    width: 4px;
}

.ckln-app-header__notifications-list::-webkit-scrollbar-thumb {
    background: rgba(31, 31, 31, 0.15);
    border-radius: 99px;
}

.ckln-app-header__notification {
    position: relative;

    display: grid;
    grid-template-columns: 35px 1fr 8px;
    column-gap: 10px;

    width: 290px;
    min-height: 100px;
    margin: 0 auto;
    padding: 5px 0 15px;

    border-bottom: 1px solid #DEE5EE;
}

.ckln-app-header__notification:last-child {
    border-bottom: none;
}

.ckln-app-header__notification-icon,
.ckln-app-header__notification-avatar {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 35px;
    height: 35px;

    color: var(--ck-color-accent, #FF8000);
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 10%, transparent);
    border-radius: 17.5px;
}

.ckln-app-header__notification-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.ckln-app-header__notification-avatar {
    object-fit: cover;
    padding: 0;
    background: #F1F5F9;
}

.ckln-app-header__notification-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

    width: 220px;
    min-width: 0;
}

.ckln-app-header__notification-title {
    display: flex;
    align-items: center;

    width: 220px;
    min-height: 20px;
    margin: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    color: #1F1F1F;
}

.ckln-app-header__notification-text {
    display: flex;
    align-items: center;

    width: 220px;
    min-height: 36px;
    margin: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;

    color: #1F1F1F;
}

.ckln-app-header__notification-text--strong {
    font-weight: 500;
}

.ckln-app-header__notification-time {
    display: flex;
    align-items: center;

    width: 220px;
    height: 14px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;

    color: rgba(31, 31, 31, 0.6);
}

.ckln-app-header__notification-dot {
    display: none;

    width: 8px;
    height: 8px;
    margin-top: 31px;

    background: var(--ck-color-accent, #FF8000);
    border-radius: 999px;
}

.ckln-app-header__notification.is-unread .ckln-app-header__notification-dot {
    display: block;
}

.ckln-app-header__notification--compact {
    min-height: 73px;
}

.ckln-app-header__notification--compact .ckln-app-header__notification-body {
    gap: 3px;
}

.ckln-app-header__notification--compact .ckln-app-header__notification-text {
    min-height: 36px;
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-app-header {
        position: sticky !important;
        top: 0 !important;

        width: 100%;
        height: 60px;

        background: rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);

        box-shadow: none;
        filter: none;
    }

    .ckln-app-header__brand {
        left: 15px;
        top: 16px;

        width: auto;
        height: 28px;
    }

    .ckln-app-header__logo,
    .ckln-app-header__brand svg {
        width: auto !important;
        height: 28px !important;
        max-height: 28px !important;
    }

    .ckln-app-header__bell {
        right: 55px;
        top: 18px;
    }

    .ckln-app-header__avatar-btn {
        right: 10px;
        top: 16px;

        width: 28px;
        height: 28px;
    }

    .ckln-app-header__avatar {
        width: 28px;
        height: 28px;
    }

    .ckln-app-header__account {
        position: fixed;
        right: 10px;
        top: 60px;

        width: 240px;
        height: 141px;
    }

    .ckln-app-header__notifications {
        position: fixed;
        left: 50%;
        right: auto;
        top: 60px;

        width: calc(100vw - 20px);
        max-width: 320px;
        height: min(550px, calc(100dvh - 75px));

        transform: translateX(-50%);
    }

    .ckln-app-header__notification {
        width: calc(100% - 30px);
        grid-template-columns: 35px 1fr 8px;
    }

    .ckln-app-header__notification-body,
    .ckln-app-header__notification-title,
    .ckln-app-header__notification-text,
    .ckln-app-header__notification-time {
        width: 100%;
    }
}

/* Force override */
#ckln-app-header-01.ckln-app-header,
.ckln-app-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 99999 !important;

    width: 100% !important;
    height: 60px !important;

    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;

    box-shadow: none !important;
    filter: none !important;
}

#ckln-app-header-01.ckln-app-header::before,
#ckln-app-header-01.ckln-app-header::after,
.ckln-app-header::before,
.ckln-app-header::after {
    box-shadow: none !important;
    filter: none !important;
}

/* Use this modifier when sticky is blocked by parent overflow */
#ckln-app-header-01.ckln-app-header.ckln-app-header--fixed,
.ckln-app-header.ckln-app-header--fixed {
    position: fixed !important;
}

/* Desktop logo = desktop avatar height 34px */
#ckln-app-header-01 .ckln-app-header__brand,
.ckln-app-header .ckln-app-header__brand {
    position: absolute !important;
    left: 15px !important;
    top: 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    height: 34px !important;

    line-height: 0 !important;
    text-decoration: none !important;
}

#ckln-app-header-01 .ckln-app-header__logo,
.ckln-app-header .ckln-app-header__logo,
#ckln-app-header-01 .ckln-app-header__brand svg,
.ckln-app-header .ckln-app-header__brand svg {
    display: block !important;

    width: auto !important;
    height: 34px !important;
    max-width: none !important;
    max-height: 34px !important;

    flex: 0 0 auto !important;
}

/* Desktop avatar = 34px */
#ckln-app-header-01 .ckln-app-header__avatar-btn,
.ckln-app-header .ckln-app-header__avatar-btn {
    right: 15px !important;
    top: 14px !important;

    width: 34px !important;
    height: 34px !important;
}

#ckln-app-header-01 .ckln-app-header__avatar,
.ckln-app-header .ckln-app-header__avatar {
    width: 34px !important;
    height: 34px !important;
}

/* Bell */
#ckln-app-header-01 .ckln-app-header__bell,
.ckln-app-header .ckln-app-header__bell {
    right: 61px !important;
    top: 18px !important;
}

/* Dropdown positions only — shadows stay */
#ckln-app-header-01 .ckln-app-header__account,
.ckln-app-header .ckln-app-header__account {
    top: 60px !important;
    z-index: 100002 !important;
}

#ckln-app-header-01 .ckln-app-header__notifications,
.ckln-app-header .ckln-app-header__notifications {
    top: 60px !important;
    z-index: 100001 !important;
}

@media (max-width: 640px) {
    #ckln-app-header-01.ckln-app-header,
    .ckln-app-header {
        position: sticky !important;
        top: 0 !important;

        width: 100% !important;
        height: 60px !important;

        z-index: 99999 !important;

        background: rgba(255, 255, 255, 0.45) !important;
        backdrop-filter: blur(18px) saturate(140%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(140%) !important;

        box-shadow: none !important;
        filter: none !important;
    }

    #ckln-app-header-01.ckln-app-header.ckln-app-header--fixed,
    .ckln-app-header.ckln-app-header--fixed {
        position: fixed !important;
    }

    /* Mobile logo = mobile avatar height 28px */
    #ckln-app-header-01 .ckln-app-header__brand,
    .ckln-app-header .ckln-app-header__brand {
        left: 15px !important;
        top: 16px !important;

        width: auto !important;
        height: 28px !important;
    }

    #ckln-app-header-01 .ckln-app-header__logo,
    .ckln-app-header .ckln-app-header__logo,
    #ckln-app-header-01 .ckln-app-header__brand svg,
    .ckln-app-header .ckln-app-header__brand svg {
        width: auto !important;
        height: 28px !important;
        max-height: 28px !important;
    }

    #ckln-app-header-01 .ckln-app-header__avatar-btn,
    .ckln-app-header .ckln-app-header__avatar-btn {
        right: 10px !important;
        top: 16px !important;

        width: 28px !important;
        height: 28px !important;
    }

    #ckln-app-header-01 .ckln-app-header__avatar,
    .ckln-app-header .ckln-app-header__avatar {
        width: 28px !important;
        height: 28px !important;
    }

    #ckln-app-header-01 .ckln-app-header__bell,
    .ckln-app-header .ckln-app-header__bell {
        right: 55px !important;
        top: 18px !important;
    }
}
/* =========================================================
   HEADER + SIDEBAR #F5F7FB WITH VISIBLE BLUR
========================================================= */

#ckln-app-header-01.ckln-app-header,
.ckln-app-header {
    background: rgba(245, 247, 251, 0.55) !important;
    background-color: rgba(245, 247, 251, 0.55) !important;

    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;

    box-shadow: none !important;
    filter: none !important;
}

.ckln-sidebar {
    background: rgba(245, 247, 251, 0.55) !important;
    background-color: rgba(245, 247, 251, 0.55) !important;

    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;

    box-shadow: none !important;
    filter: none !important;
}

.ckln-mobile-toolbar {
    background: rgba(245, 247, 251, 0.55) !important;
    background-color: rgba(245, 247, 251, 0.55) !important;

    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}
/* =========================================================
   HEADER NOTIFICATIONS — empty state fix
========================================================= */

.ckln-app-header__notifications-empty,
.ckln-app-header__empty-notifications,
.ckln-app-header__notifications-empty-message,
[data-ckln-notifications-empty] {
    position: static !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 120px !important;
    padding: 24px 18px !important;
    margin: 0 !important;

    text-align: center !important;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 16px !important;

    color: rgba(31, 31, 31, 0.55) !important;

    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: unset !important;
    word-break: normal !important;
}

/* Если empty-текст лежит прямо внутри списка уведомлений */
.ckln-app-header__notifications-list:empty::before,
.ckln-app-header__notifications-body:empty::before {
    content: "Немає нових сповіщень";

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 120px;
    padding: 24px 18px;

    text-align: center;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;

    color: rgba(31, 31, 31, 0.55);
}

/* Контейнер dropdown — чтобы текст не вылезал за края */
.ckln-app-header__notifications,
[data-ckln-notifications-menu] {
    overflow: hidden !important;
}

.ckln-app-header__notifications *,
[data-ckln-notifications-menu] * {
    max-width: 100%;
}

/* ===== ELEMENT: ckln-input-time | Input Time ===== */
.ckln-input-time {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;

    width: 250px;
    height: 59px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-input-time *,
.ckln-input-time *::before,
.ckln-input-time *::after {
    box-sizing: border-box;
}

.ckln-input-time__label {
    display: flex;
    align-items: center;

    width: 100%;
    height: 16px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;

    color: var(--ck-color-heading, #0F172A);
}

.ckln-input-time__field-wrap {
    position: relative;
    isolation: isolate;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    width: 100%;
    height: 38px;
}

.ckln-input-time__field {
    box-sizing: border-box;
    display: flex;
    align-items: center;

    width: 100%;
    height: 38px;
    padding: 10px 12px 10px 48px;

    background: var(--ck-color-input-bg, #F9FAFB);
    border: 1px solid var(--ck-color-input-border, #DEE5EE);
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;

    color: var(--ck-color-heading, #0F172A);
    outline: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ckln-input-time__field::placeholder {
    color: var(--ck-color-heading, #0F172A);
    opacity: 1;
}

.ckln-input-time__field:focus {
    border-color: color-mix(in srgb, var(--ck-color-accent, #FF8000) 45%, #DEE5EE);
    background: #FFFFFF;
    box-shadow: 0px 0px 0px 3px color-mix(in srgb, var(--ck-color-accent, #FF8000) 12%, transparent);
}

.ckln-input-time__field.is-invalid {
    border-color: var(--ck-color-danger, #DC2727);
    box-shadow: 0px 0px 0px 3px rgba(220, 39, 39, 0.08);
}

.ckln-input-time__icon {
    position: absolute;
    z-index: 1;
    left: 16px;
    top: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 20px;
    height: 20px;

    color: var(--ck-color-muted-icon, #94A3B8);

    transform: translateY(-50%);
    pointer-events: none;
}

.ckln-input-time__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Disabled */
.ckln-input-time__field:disabled {
    background: #EAECEF;
    border-color: #EAECEF;
    color: #919396;
    cursor: not-allowed;
}

.ckln-input-time__field:disabled + .ckln-input-time__icon,
.ckln-input-time:has(.ckln-input-time__field:disabled) .ckln-input-time__icon {
    color: #B8BBC0;
}

/* Mobile / narrow containers */
@media (max-width: 640px) {
    .ckln-input-time {
        width: 100%;
        max-width: 250px;
    }
}

/* ===== ELEMENT: ckln-delete-post-modal | Delete Post Modal ===== */
.ckln-delete-post-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(15, 23, 42, 0.12);

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-delete-post-modal[hidden] {
    display: none !important;
}

.ckln-delete-post-modal *,
.ckln-delete-post-modal *::before,
.ckln-delete-post-modal *::after {
    box-sizing: border-box;
}

.ckln-delete-post-modal__content {
    position: relative;

    width: 220px;
    height: 100px;

    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(91, 91, 91, 0.15);
    border-radius: 10px;

    overflow: hidden;
}

.ckln-delete-post-modal__title {
    position: absolute;
    left: 50%;
    top: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 137px;
    height: 20px;
    margin: 0;

    transform: translateX(-50%);

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #000000;
}

.ckln-delete-post-modal__actions {
    position: absolute;
    left: 0;
    bottom: 0;

    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;

    width: 220px;
    height: 47px;

    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 10%, transparent);
    border-radius: 0 0 10px 10px;
}

.ckln-delete-post-modal__divider {
    display: block;

    width: 1px;
    height: 47px;

    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 20%, transparent);
}

.ckln-delete-post-modal__button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 47px;
    padding: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: #2E2626;

    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.ckln-delete-post-modal__button:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 8%, transparent);
}

.ckln-delete-post-modal__button--delete:hover {
    color: var(--ck-color-danger, #DC2727);
}

.ckln-delete-post-modal__demo-open {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    height: 38px;
    padding: 10px 16px;

    background: var(--ck-color-accent, #FF8000);
    border: none;
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;

    color: #FFFFFF;

    cursor: pointer;
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-delete-post-modal {
        padding: 20px;
        align-items: center;
    }

    .ckln-delete-post-modal__content {
        width: 220px;
        height: 100px;
    }
}

/* ===== ELEMENT: ckln-notifications-screen-01 | Notifications Screen ===== */
/* =========================================================
   CKLN NOTIFICATIONS SCREEN 01
========================================================= */

#ckln-notifications-screen-01,
.ckln-notifications-screen {
    width: 390px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
}

.ckln-notifications-screen *,
.ckln-notifications-screen *::before,
.ckln-notifications-screen *::after {
    box-sizing: border-box;
}

/* Header */

.ckln-notifications-screen__header {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 20px;

    width: 100%;
    height: 20px;
    margin-top: 70px;
    padding: 0 15px;
}

.ckln-notifications-screen__back {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;
    padding: 0;

    background: transparent;
    border: none;

    color: #0C0600;
    cursor: pointer;
}

.ckln-notifications-screen__back svg {
    display: block;
    width: 20px;
    height: 20px;
}

.ckln-notifications-screen__title {
    display: flex;
    align-items: center;

    width: auto;
    height: 20px;
    margin: 0;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #1F1F1F;
}

.ckln-notifications-screen__read-all {
    display: block;

    width: auto;
    height: 15px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;

    color: var(--ck-color-accent, #45A4E1);
    white-space: nowrap;

    cursor: pointer;
}

/* List */

.ckln-notifications-screen__list {
    display: flex;
    flex-direction: column;

    width: 100%;
    margin-top: 25px;
}

.ckln-notifications-screen__item {
    position: relative;

    display: grid;
    grid-template-columns: 50px minmax(0, 280px) 8px;
    align-items: center;
    column-gap: 10px;

    width: 100%;
    min-height: 74px;
    padding: 11px 15px 9px;

    background: transparent;
    border-bottom: 1px solid #DEE5EE;

    cursor: pointer;

    transition: background-color 0.2s ease;
}

.ckln-notifications-screen__item:hover {
    background: rgba(69, 164, 225, 0.04);
}

.ckln-notifications-screen__avatar {
    display: block;

    width: 50px;
    height: 50px;

    object-fit: cover;
    border-radius: 40px;
}

.ckln-notifications-screen__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;

    width: 280px;
    max-width: 100%;
    min-width: 0;
}

.ckln-notifications-screen__text {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;

    color: #1F1F1F;
}

.ckln-notifications-screen__time {
    display: flex;
    align-items: center;

    width: 100%;
    height: 14px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;

    color: rgba(31, 31, 31, 0.6);
}

.ckln-notifications-screen__dot {
    display: none;

    width: 8px;
    height: 8px;

    background: var(--ck-color-accent, #45A4E1);
    border-radius: 50%;
}

.ckln-notifications-screen__item.is-unread .ckln-notifications-screen__dot {
    display: block;
}

/* Responsive */

@media (max-width: 768px) {
    #ckln-notifications-screen-01,
    .ckln-notifications-screen {
        width: 390px;
        max-width: 100%;
    }
}

@media (max-width: 390px) {
    .ckln-notifications-screen__item {
        grid-template-columns: 50px minmax(0, 1fr) 8px;
    }

    .ckln-notifications-screen__content {
        width: 100%;
    }

    .ckln-notifications-screen__header {
        gap: 14px;
    }
}

/* ===== ELEMENT: ckln-onboarding-screen-01 | Onboarding Screen ===== */
/* =========================================================
   CKLN ONBOARDING SCREEN 01
========================================================= */

#ckln-onboarding-screen-01,
.ckln-onboarding-screen {
    position: relative;
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;
    min-height: 844px;
    margin: 0 auto;
    padding: 0 15px;

    background: #FFFFFF;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    color: #000000;

    overflow: hidden;
}

.ckln-onboarding-screen *,
.ckln-onboarding-screen *::before,
.ckln-onboarding-screen *::after {
    box-sizing: border-box;
}

/* Skip */

.ckln-onboarding-screen__skip {
    position: absolute;
    top: 50px;
    right: 25px;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: 20px;
    padding: 0;

    background: transparent;
    border: none;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: rgba(31, 31, 31, 0.8);

    cursor: pointer;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.ckln-onboarding-screen__skip:hover {
    color: var(--ck-color-accent, #45A4E1);
}

/* Illustration */

.ckln-onboarding-screen__illustration {
    position: absolute;
    left: 0;
    top: 110px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 390px;
    height: 390px;

    overflow: visible;
    pointer-events: none;
}

.ckln-onboarding-screen__image,
.ckln-onboarding-screen__illustration svg {
    display: block;

    width: 390px;
    height: 390px;

    object-fit: contain;
}

/* Content */

.ckln-onboarding-screen__content {
    position: absolute;
    left: 50%;
    top: 550px;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 330px;

    transform: translateX(-50%);
}

.ckln-onboarding-screen__title {
    width: 100%;
    min-height: 22px;
    margin: 0;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 22px;

    text-align: center;

    color: #000000;
}

.ckln-onboarding-screen__text {
    width: 290px;
    max-width: 100%;
    min-height: 40px;
    margin: 15px 0 0;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;

    text-align: center;

    color: #000000;
}

/* Steps */

.ckln-onboarding-screen__steps {
    position: absolute;
    left: 50%;
    top: 745px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;

    width: auto;
    height: 4px;

    transform: translateX(-50%);
}

.ckln-onboarding-screen__step {
    display: block;

    width: 50px;
    height: 0;

    border-top: 4px solid rgba(69, 164, 225, 0.3);
    border-radius: 999px;

    transition:
        border-color 0.25s ease,
        opacity 0.25s ease;
}

.ckln-onboarding-screen__step.is-active {
    border-color: var(--ck-color-accent, #45A4E1);
}

/* Button */

.ckln-onboarding-screen__next {
    position: absolute;
    left: 50%;
    top: 765px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 330px;
    height: 49px;
    padding: 15px 25px;

    background: var(--ck-color-accent, #45A4E1);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(114, 200, 255, 0.8);

    transform: translateX(-50%);

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;

    color: #FFFFFF;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.ckln-onboarding-screen__next:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 90%, black);
    box-shadow: 0px 4px 16px rgba(114, 200, 255, 0.55);
    transform: translateX(-50%) translateY(-1px);
}

.ckln-onboarding-screen__next:active {
    transform: translateX(-50%) scale(0.98);
}

/* Responsive */

@media (max-width: 390px) {
    #ckln-onboarding-screen-01,
    .ckln-onboarding-screen {
        width: 100%;
        min-height: 100dvh;
    }

    .ckln-onboarding-screen__illustration {
        left: 50%;
        width: 390px;
        transform: translateX(-50%);
    }

    .ckln-onboarding-screen__next {
        width: calc(100% - 60px);
    }
}

@media (max-height: 760px) {
    #ckln-onboarding-screen-01,
    .ckln-onboarding-screen {
        min-height: 760px;
    }

    .ckln-onboarding-screen__illustration {
        top: 90px;
        height: 350px;
    }

    .ckln-onboarding-screen__image,
    .ckln-onboarding-screen__illustration svg {
        width: 350px;
        height: 350px;
    }

    .ckln-onboarding-screen__content {
        top: 500px;
    }

    .ckln-onboarding-screen__steps {
        top: 665px;
    }

    .ckln-onboarding-screen__next {
        top: 685px;
    }
}

/* ===== ELEMENT: ckln-onboarding-feed-screen-01 | Onboarding Feed Screen ===== */
/* =========================================================
   CKLN ONBOARDING FEED SCREEN 01
========================================================= */

#ckln-onboarding-feed-screen-01,
.ckln-onboarding-feed-screen {
    position: relative;
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;
    min-height: 844px;
    margin: 0 auto;
    padding: 0 15px;

    background: #FFFFFF;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    color: #000000;

    overflow: hidden;
}

.ckln-onboarding-feed-screen *,
.ckln-onboarding-feed-screen *::before,
.ckln-onboarding-feed-screen *::after {
    box-sizing: border-box;
}

/* Skip */

.ckln-onboarding-feed-screen__skip {
    position: absolute;
    top: 50px;
    right: 25px;
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: 20px;
    padding: 0;

    background: transparent;
    border: none;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: rgba(31, 31, 31, 0.8);

    cursor: pointer;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.ckln-onboarding-feed-screen__skip:hover {
    color: var(--ck-color-accent, #45A4E1);
}

/* Illustration */

.ckln-onboarding-feed-screen__illustration {
    position: absolute;
    left: 0;
    top: 110px;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 390px;
    height: 390px;

    overflow: visible;
    pointer-events: none;
}

.ckln-onboarding-feed-screen__image,
.ckln-onboarding-feed-screen__illustration svg {
    display: block;

    width: 390px;
    height: 390px;

    object-fit: contain;
}

/* Content */

.ckln-onboarding-feed-screen__content {
    position: absolute;
    left: 50%;
    top: 550px;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 330px;

    transform: translateX(-50%);
}

.ckln-onboarding-feed-screen__title {
    width: 100%;
    min-height: 22px;
    margin: 0;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 22px;

    text-align: center;

    color: #000000;
}

.ckln-onboarding-feed-screen__text {
    width: 290px;
    max-width: 100%;
    min-height: 40px;
    margin: 15px 0 0;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;

    text-align: center;

    color: #000000;
}

/* Steps */

.ckln-onboarding-feed-screen__steps {
    position: absolute;
    left: 50%;
    top: 745px;
    z-index: 2;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;

    width: auto;
    height: 4px;

    transform: translateX(-50%);
}

.ckln-onboarding-feed-screen__step {
    display: block;

    width: 50px;
    height: 0;

    border-top: 4px solid rgba(69, 164, 225, 0.3);
    border-radius: 999px;

    transition:
        border-color 0.25s ease,
        opacity 0.25s ease;
}

.ckln-onboarding-feed-screen__step.is-active {
    border-color: var(--ck-color-accent, #45A4E1);
}

/* Button */

.ckln-onboarding-feed-screen__next {
    position: absolute;
    left: 50%;
    top: 765px;
    z-index: 2;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 330px;
    height: 49px;
    padding: 15px 25px;

    background: var(--ck-color-accent, #45A4E1);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(114, 200, 255, 0.8);

    transform: translateX(-50%);

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;

    color: #FFFFFF;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.ckln-onboarding-feed-screen__next:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 90%, black);
    box-shadow: 0px 4px 16px rgba(114, 200, 255, 0.55);
    transform: translateX(-50%) translateY(-1px);
}

.ckln-onboarding-feed-screen__next:active {
    transform: translateX(-50%) scale(0.98);
}

/* Responsive */

@media (max-width: 390px) {
    #ckln-onboarding-feed-screen-01,
    .ckln-onboarding-feed-screen {
        width: 100%;
        min-height: 100dvh;
    }

    .ckln-onboarding-feed-screen__illustration {
        left: 50%;
        width: 390px;
        transform: translateX(-50%);
    }

    .ckln-onboarding-feed-screen__next {
        width: calc(100% - 60px);
    }
}

@media (max-height: 760px) {
    #ckln-onboarding-feed-screen-01,
    .ckln-onboarding-feed-screen {
        min-height: 760px;
    }

    .ckln-onboarding-feed-screen__illustration {
        top: 90px;
        height: 350px;
    }

    .ckln-onboarding-feed-screen__image,
    .ckln-onboarding-feed-screen__illustration svg {
        width: 350px;
        height: 350px;
    }

    .ckln-onboarding-feed-screen__content {
        top: 500px;
    }

    .ckln-onboarding-feed-screen__steps {
        top: 665px;
    }

    .ckln-onboarding-feed-screen__next {
        top: 685px;
    }
}

/* ===== ELEMENT: ckln-onboarding-create-post-screen-01 | Onboarding Create Post Screen ===== */
/* =========================================================
   CKLN ONBOARDING CREATE POST SCREEN 01
========================================================= */

#ckln-onboarding-create-post-screen-01,
.ckln-onboarding-create-post-screen {
    position: relative;
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;
    min-height: 844px;
    margin: 0 auto;
    padding: 0 15px;

    background: #FFFFFF;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    color: #000000;

    overflow: hidden;
}

.ckln-onboarding-create-post-screen *,
.ckln-onboarding-create-post-screen *::before,
.ckln-onboarding-create-post-screen *::after {
    box-sizing: border-box;
}

/* Illustration */

.ckln-onboarding-create-post-screen__illustration {
    position: absolute;
    left: 0;
    top: 110px;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 390px;
    height: 390px;

    overflow: visible;
    pointer-events: none;
}

.ckln-onboarding-create-post-screen__image,
.ckln-onboarding-create-post-screen__illustration svg {
    display: block;

    width: 390px;
    height: 390px;

    object-fit: contain;
}

/* Content */

.ckln-onboarding-create-post-screen__content {
    position: absolute;
    left: 50%;
    top: 550px;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 330px;

    transform: translateX(-50%);
}

.ckln-onboarding-create-post-screen__title {
    width: 100%;
    min-height: 22px;
    margin: 0;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 22px;

    text-align: center;

    color: #000000;
}

.ckln-onboarding-create-post-screen__text {
    width: 290px;
    max-width: 100%;
    min-height: 40px;
    margin: 15px 0 0;

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;

    text-align: center;

    color: #000000;
}

/* Steps */

.ckln-onboarding-create-post-screen__steps {
    position: absolute;
    left: 50%;
    top: 745px;
    z-index: 2;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;

    width: auto;
    height: 4px;

    transform: translateX(-50%);
}

.ckln-onboarding-create-post-screen__step {
    display: block;

    width: 50px;
    height: 0;

    border-top: 4px solid rgba(69, 164, 225, 0.3);
    border-radius: 999px;

    transition:
        border-color 0.25s ease,
        opacity 0.25s ease;
}

.ckln-onboarding-create-post-screen__step.is-active {
    border-color: var(--ck-color-accent, #45A4E1);
}

/* Button */

.ckln-onboarding-create-post-screen__next {
    position: absolute;
    left: 50%;
    top: 765px;
    z-index: 2;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 330px;
    height: 49px;
    padding: 15px 25px;

    background: var(--ck-color-accent, #45A4E1);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(114, 200, 255, 0.8);

    transform: translateX(-50%);

    font-family: 'Inter', var(--ck-font-base, sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;

    color: #FFFFFF;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.ckln-onboarding-create-post-screen__next:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 90%, black);
    box-shadow: 0px 4px 16px rgba(114, 200, 255, 0.55);
    transform: translateX(-50%) translateY(-1px);
}

.ckln-onboarding-create-post-screen__next:active {
    transform: translateX(-50%) scale(0.98);
}

/* Responsive */

@media (max-width: 390px) {
    #ckln-onboarding-create-post-screen-01,
    .ckln-onboarding-create-post-screen {
        width: 100%;
        min-height: 100dvh;
    }

    .ckln-onboarding-create-post-screen__illustration {
        left: 50%;
        width: 390px;
        transform: translateX(-50%);
    }

    .ckln-onboarding-create-post-screen__next {
        width: calc(100% - 60px);
    }
}

@media (max-height: 760px) {
    #ckln-onboarding-create-post-screen-01,
    .ckln-onboarding-create-post-screen {
        min-height: 760px;
    }

    .ckln-onboarding-create-post-screen__illustration {
        top: 90px;
        height: 350px;
    }

    .ckln-onboarding-create-post-screen__image,
    .ckln-onboarding-create-post-screen__illustration svg {
        width: 350px;
        height: 350px;
    }

    .ckln-onboarding-create-post-screen__content {
        top: 500px;
    }

    .ckln-onboarding-create-post-screen__steps {
        top: 665px;
    }

    .ckln-onboarding-create-post-screen__next {
        top: 685px;
    }
}

/* ===== ELEMENT: ckln-post-card | Post Card ===== */
.ckln-post-card {
    position: relative;

    box-sizing: border-box;
    width: 680px;
    padding: 18px 0 19px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    background: transparent;
    overflow: visible;

    cursor: pointer;
}

.ckln-post-card *,
.ckln-post-card *::before,
.ckln-post-card *::after {
    box-sizing: border-box;
}

.ckln-post-card:focus-visible {
    outline: 2px solid var(--ck-color-accent, #45A4E1);
    outline-offset: 6px;
    border-radius: 8px;
}

/* =========================================================
   HEADER
========================================================= */

.ckln-post-card__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;

    width: 680px;
    max-width: 100%;
    height: 50px;

    overflow: visible;
}

.ckln-post-card__author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: auto;
    max-width: calc(100% - 42px);
    min-width: 0;
    height: 50px;
    flex: 1 1 auto;

    overflow: visible;
}

.ckln-post-card__avatar {
    display: block;

    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    object-fit: cover;
    border-radius: 90px;
}

.ckln-post-card__author-meta {
    display: grid;
    grid-template-columns: minmax(0, max-content) auto;
    grid-template-rows: 20px 17px;
    column-gap: 10px;
    row-gap: 5px;
    align-items: start;

    width: auto;
    max-width: calc(100% - 60px);
    min-width: 0;
    height: 42px;
    flex: 1 1 auto;

    overflow: visible;
}

.ckln-post-card__author-line {
    display: contents;
}

.ckln-post-card__name {
    grid-column: 1;
    grid-row: 1;

    display: block;

    width: auto;
    max-width: 260px;
    height: 20px;
    margin: 0;
    padding: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #000000;
    text-decoration: none;
}

.ckln-post-card__username {
    grid-column: 1 / 3;
    grid-row: 2;

    display: block;

    width: auto;
    max-width: 260px;
    height: 17px;
    margin: 0;
    padding: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
}

.ckln-post-card__time {
    grid-column: 2;
    grid-row: 1;

    position: static;

    display: block;

    width: max-content;
    max-width: 95px;
    height: 17px;
    margin: 1px 0 0;
    padding: 0;

    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 300;
    font-size: 14px;
    line-height: 17px;

    color: #000000;
    text-decoration: none;
}

.ckln-post-card__header a,
.ckln-post-card__header a:hover,
.ckln-post-card__header a:focus,
.ckln-post-card__name,
.ckln-post-card__username,
.ckln-post-card__time {
    color: inherit;
    text-decoration: none !important;
}

/* =========================================================
   DOTS MENU
========================================================= */

.ckln-post-card__menu-wrap {
    position: relative;

    width: 22px;
    height: 22px;
    flex: 0 0 22px;

    cursor: default;
}

.ckln-post-card__menu-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.4px;

    width: 22px;
    height: 22px;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 6px;

    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ckln-post-card__menu-toggle:hover,
.ckln-post-card__menu-toggle.is-open {
    background: rgba(0, 0, 0, 0.04);
}

.ckln-post-card__dot {
    display: block;

    width: 3.67px;
    height: 3.67px;

    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.ckln-post-card__menu {
    position: absolute;
    right: 0;
    top: 22px;
    z-index: 20;

    width: max-content;
    min-width: 150px;
    max-width: calc(100vw - 30px);
    height: auto;

    overflow: hidden;

    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(91, 91, 91, 0.15);
    border-radius: 10px;
}

.ckln-post-card__menu[hidden] {
    display: none !important;
}

.ckln-post-card__menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-width: max-content;
    height: 36px;
    padding: 0 16px 0 12px;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    text-align: left;

    color: #2E2626;

    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;

    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.ckln-post-card__menu-item span {
    display: block;

    width: auto;
    min-width: max-content;

    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
}

.ckln-post-card__menu-item--delete {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 10%, transparent);
    border-radius: 0 0 10px 10px;
}

.ckln-post-card__menu-item:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 8%, transparent);
}

.ckln-post-card__menu-item--delete:hover {
    color: var(--ck-color-danger, #DC2727);
}

.ckln-post-card__menu-icon {
    display: block;

    width: 17px;
    height: 17px;
    flex: 0 0 17px;

    color: #1F1F1F;
}

/* =========================================================
   POST TEXT
========================================================= */

.ckln-post-card__text {
    width: 100%;
    min-height: 88px;
    margin: 10px 0 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #000000;
}

/* =========================================================
   STATS
========================================================= */

.ckln-post-card__footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    width: 680px;
    max-width: 100%;
    height: 20px;
    margin-top: 8px;
}

.ckln-post-card__stats-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;

    height: 20px;
}

.ckln-post-card__stats-group--left {
    justify-content: flex-start;
}

.ckln-post-card__stats-group--right {
    justify-content: flex-end;
}

.ckln-post-card__stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;

    height: 20px;
    padding: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);

    color: #000000;

    cursor: default;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

button.ckln-post-card__stat {
    cursor: pointer;
}

.ckln-post-card__like-icon,
.ckln-post-card__views-icon,
.ckln-post-card__repost-icon,
.ckln-post-card__comments-icon {
    display: block;

    width: 20px;
    height: 20px;
    flex: 0 0 20px;

    color: #000000;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-post-card__stat svg,
.ckln-post-card__stat svg path {
    transition:
        color 0.2s ease,
        stroke 0.2s ease,
        fill 0.2s ease,
        transform 0.2s ease;
}

.ckln-post-card__like-icon--filled {
    display: none;
}

.ckln-post-card__like.is-liked .ckln-post-card__like-icon--empty {
    display: none;
}

.ckln-post-card__like.is-liked .ckln-post-card__like-icon--filled {
    display: block;
}

.ckln-post-card__stat-value {
    display: flex;
    align-items: center;

    height: 16px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;

    color: #000000;

    transition: color 0.2s ease;
}

/* =========================================================
   STATS HOVER + ACTIVE STATES
========================================================= */

/* Hover for clickable stats */
button.ckln-post-card__stat:hover {
    color: var(--ck-color-accent, #45A4E1);
}

button.ckln-post-card__stat:hover .ckln-post-card__stat-value {
    color: var(--ck-color-accent, #45A4E1);
}

button.ckln-post-card__stat:hover svg {
    color: var(--ck-color-accent, #45A4E1);
    transform: translateY(-1px);
}

/* Stroke icons hover */
button.ckln-post-card__stat:hover svg path[stroke],
button.ckln-post-card__stat:hover .ckln-post-card__views-icon path,
button.ckln-post-card__stat:hover .ckln-post-card__repost-icon path,
button.ckln-post-card__stat:hover .ckln-post-card__comments-icon path {
    stroke: var(--ck-color-accent, #45A4E1);
}

/* Fill icons hover */
button.ckln-post-card__stat:hover svg path[fill],
button.ckln-post-card__stat:hover .ckln-post-card__like-icon--empty path {
    fill: var(--ck-color-accent, #45A4E1);
}

/* Active liked state */
.ckln-post-card__like.is-liked {
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-post-card__like.is-liked .ckln-post-card__stat-value {
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-post-card__like.is-liked .ckln-post-card__like-icon--filled path {
    fill: #FF2929;
}

/* Active repost state */
.ckln-post-card__repost.is-reposted {
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-post-card__repost.is-reposted .ckln-post-card__stat-value {
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-post-card__repost.is-reposted .ckln-post-card__repost-icon {
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-post-card__repost.is-reposted .ckln-post-card__repost-icon path {
    stroke: var(--ck-color-accent, #45A4E1);
}

/* Active press */
button.ckln-post-card__stat:active svg {
    transform: scale(0.94);
}

/* Divider */
.ckln-post-card__divider {
    display: block;

    width: 100%;
    height: 1px;
    margin-top: 18px;

    background: #DEE5EE;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {
    .ckln-post-card {
        width: 100%;
        max-width: 360px;
        padding-bottom: 16px;
        overflow: visible;
    }

    .ckln-post-card__header {
        width: 100%;
        max-width: 360px;
        height: 40px;
        gap: 10px;
        overflow: visible;
    }

    .ckln-post-card__author {
        align-items: flex-start;
        gap: 10px;

        max-width: calc(100% - 28px);
        height: 40px;
    }

    .ckln-post-card__avatar {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .ckln-post-card__author-meta {
        grid-template-columns: minmax(0, max-content) auto;
        grid-template-rows: 17px 15px;
        column-gap: 6px;
        row-gap: 2px;

        max-width: calc(100% - 50px);
        height: 34px;
    }

    .ckln-post-card__name {
        max-width: 170px;
        height: 17px;

        font-weight: 500;
        font-size: 14px;
        line-height: 17px;

        color: #000000;
    }

    .ckln-post-card__username {
        max-width: 170px;
        height: 15px;

        font-weight: 400;
        font-size: 12px;
        line-height: 15px;

        color: rgba(0, 0, 0, 0.7);
    }

    .ckln-post-card__time {
        max-width: 70px;
        height: 15px;
        margin-top: 1px;

        font-weight: 300;
        font-size: 12px;
        line-height: 15px;

        color: #000000;
    }

    .ckln-post-card__menu-wrap {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

    .ckln-post-card__menu-toggle {
        width: 18px;
        height: 18px;
        gap: 2.1px;
    }

    .ckln-post-card__dot {
        width: 3px;
        height: 3px;
    }

    .ckln-post-card__menu {
        right: 0;
        top: 20px;

        width: max-content;
        min-width: 150px;
        max-width: calc(100vw - 30px);
        height: auto;
    }

    .ckln-post-card__menu-item {
        width: 100%;
        min-width: max-content;
        padding: 0 16px 0 12px;

        white-space: nowrap;
    }

    .ckln-post-card__text {
        min-height: auto;
        margin-top: 10px;
        font-size: 14px;
        line-height: 22px;
    }

    .ckln-post-card__footer {
        width: 100%;
        height: 20px;
        margin-top: 8px;
        gap: 20px;
    }

    .ckln-post-card__stats-group {
        gap: 8px;
    }

    .ckln-post-card__stat {
        gap: 4px;
    }

    .ckln-post-card__like-icon,
    .ckln-post-card__views-icon,
    .ckln-post-card__repost-icon,
    .ckln-post-card__comments-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    .ckln-post-card__stat-value {
        font-size: 14px;
        line-height: 16px;
    }
}

/* =========================================================
   FINAL OVERRIDES
========================================================= */

.ckln-post-card,
.ckln-post-card__header,
.ckln-post-card__author,
.ckln-post-card__author-meta {
    overflow: visible !important;
}

.ckln-post-card__author-line {
    display: contents !important;
}

.ckln-post-card__time {
    position: static !important;
}

.ckln-post-card__menu {
    width: max-content !important;
    min-width: 150px !important;
    max-width: calc(100vw - 30px) !important;
    height: auto !important;
}

.ckln-post-card__menu-item {
    width: 100% !important;
    min-width: max-content !important;
    white-space: nowrap !important;
}

.ckln-post-card__menu-item span {
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
}
/* =========================================================
   POST CARDS — each post has its own dynamic height
========================================================= */

/* Возможные контейнеры ленты */
.ckln-posts,
.ckln-post-feed,
.ckln-profile-posts,
.ckln-profile-feed,
.ckln-community-feed,
.ckln-main-feed,
[data-ckln-posts],
[data-ckln-feed] {
    align-items: flex-start !important;
    align-content: flex-start !important;
}

/* Если лента сделана через grid */
.ckln-posts,
.ckln-post-feed,
.ckln-profile-posts,
.ckln-profile-feed,
.ckln-community-feed,
.ckln-main-feed,
[data-ckln-posts],
[data-ckln-feed] {
    grid-auto-rows: auto !important;
}

/* Сама карточка не должна растягиваться под соседей */
.ckln-post-card {
    display: block !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    align-self: flex-start !important;
    justify-self: stretch !important;

    padding-bottom: 0 !important;
}

/* Header не должен задавать высоту всей карточке */
.ckln-post-card__header {
    flex: 0 0 auto !important;
}

/* Текст строго по контенту */
.ckln-post-card__text {
    display: block !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 10px 0 0 !important;
    padding: 0 !important;

    overflow: visible !important;
    white-space: normal !important;
}

/* Если текста нет — блок вообще не занимает место */
.ckln-post-card__text:empty {
    display: none !important;
    margin: 0 !important;
}

/* Footer сразу после текста */
.ckln-post-card__footer {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;

    margin-top: 8px !important;

    flex: 0 0 auto !important;
}

/* Разделитель тоже без лишней высоты */
.ckln-post-card__divider {
    height: 1px !important;
    margin-top: 18px !important;
}

/* На случай если карточки лежат в grid/flex item-обёртках */
.ckln-post-card,
.ckln-post-card-wrapper,
.ckln-post-card-wrap,
.ckln-feed-item,
[data-ckln-post-item] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    align-self: flex-start !important;
}

/* Если родитель напрямую содержит карточки — современный браузерный фикс */
*:has(> .ckln-post-card) {
    align-items: flex-start !important;
    grid-auto-rows: auto !important;
}
/* =========================================================
   POST CARD LIKE — active red state
========================================================= */

.ckln-post-card__like.is-liked {
    color: #FF2929 !important;
}

.ckln-post-card__like.is-liked .ckln-post-card__stat-value {
    color: #FF2929 !important;
}

.ckln-post-card__like.is-liked .ckln-post-card__like-icon--filled {
    color: #FF2929 !important;
}

.ckln-post-card__like.is-liked .ckln-post-card__like-icon--filled path {
    fill: #FF2929 !important;
}

/* Чтобы hover не перебивал красный цвет у уже лайкнутого */
.ckln-post-card__like.is-liked:hover {
    color: #FF2929 !important;
}

.ckln-post-card__like.is-liked:hover .ckln-post-card__stat-value {
    color: #FF2929 !important;
}

.ckln-post-card__like.is-liked:hover .ckln-post-card__like-icon--filled path {
    fill: #FF2929 !important;
}

/* ===== ELEMENT: ckln-post-composer | Post Composer Desktop ===== */
/* =========================================================
   CKLN POST COMPOSER — DESKTOP ONLY
========================================================= */

.ckln-post-composer-fab,
button.ckln-post-composer-fab,
[data-ckln-post-composer-open] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ckln-post-composer {
    position: fixed;
    left: 50%;
    bottom: 20px;
    z-index: 60;

    box-sizing: border-box;
    width: 680px;

    transform: translateX(-50%);

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-post-composer *,
.ckln-post-composer *::before,
.ckln-post-composer *::after {
    box-sizing: border-box;
}

.ckln-post-composer__inner {
    position: relative;

    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;

    width: 680px;
    min-height: 50px;
    padding: 7px 8px 7px 14px;

    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 10px;

    transition:
        height 0.2s ease,
        min-height 0.2s ease,
        box-shadow 0.2s ease;
}

/* Expanded state with uploaded photos */
.ckln-post-composer.has-media .ckln-post-composer__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;

    width: 680px;
    height: auto;
    min-height: 50px;
    padding: 10px 12px;

    border: 1px solid #DEE5EE;
    box-shadow: 0px 4px 15px rgba(208, 208, 208, 0.25);
    border-radius: 10px;
}

/* Gallery */
.ckln-post-composer__gallery {
    display: none;
}

.ckln-post-composer.has-media .ckln-post-composer__gallery {
    position: relative;
    left: auto;
    top: auto;

    display: block;

    width: 100%;
    height: 130px;
    margin: 0 0 4px 0;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ckln-post-composer__gallery::-webkit-scrollbar {
    display: none;
}

.ckln-post-composer__gallery[hidden] {
    display: none !important;
}

.ckln-post-composer__gallery-track {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5px;

    width: max-content;
    min-width: 100%;
    height: 130px;
}

.ckln-post-composer__gallery-item {
    position: relative;

    width: 120px;
    height: 130px;
    flex: 0 0 120px;

    overflow: hidden;

    background: #F1F5F9;
    border-radius: 5px;
}
.ckln-post-composer__gallery-img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    border-radius: 5px;
}

.ckln-post-composer__gallery-remove {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 20px;
    height: 20px;
    padding: 0;

    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 10px;

    color: #1F1F1F;

    cursor: pointer;
}

.ckln-post-composer__gallery-remove svg {
    display: block;
    width: 8px;
    height: 8px;
}

/* Media icon */
.ckln-post-composer__media {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 20px;
    height: 34px;
    flex: 0 0 20px;
    align-self: flex-end;

    color: #000000;

    cursor: pointer;
    transition: color 0.2s ease;
}

.ckln-post-composer.has-media .ckln-post-composer__media {
    position: static;

    width: 20px;
    height: 34px;
    flex: 0 0 20px;
    align-self: flex-end;
}

.ckln-post-composer__media:hover {
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-post-composer__file {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.ckln-post-composer__media-icon {
    display: block;

    width: 20px;
    height: 20px;
}

/* Textarea */
.ckln-post-composer__field {
    display: block;

    width: 100%;
    height: auto !important;
    min-width: 0;
    min-height: 34px;
    max-height: 180px;
    padding: 6px 8px 6px 0;

    flex: 1 1 auto;
    align-self: flex-end;

    resize: none;
    overflow-y: hidden;

    background: transparent;
    border: none;
    outline: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #000000;

    transition: height 0.15s ease;
}

.ckln-post-composer.has-media .ckln-post-composer__field {
    position: static;

    width: auto;
    min-width: 0;
    height: auto !important;
    min-height: 34px;
    max-height: 120px;
    padding: 6px 8px 6px 0;

    flex: 1 1 auto;
    align-self: flex-end;

    overflow-y: hidden;

    font-size: 14px;
    line-height: 22px;
}

.ckln-post-composer__field::placeholder {
    color: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

/* Submit */
.ckln-post-composer__submit {
    display: flex;
    justify-content: center;
    align-items: center;

    width: fit-content;
    min-width: unset;
    max-width: none;
    height: 34px;
    flex: 0 0 auto;
    padding: 10px 20px;
    align-self: flex-end;

    background: var(--ck-color-accent, #45A4E1);
    box-shadow: 0px 2px 10px color-mix(in srgb, var(--ck-color-accent, #45A4E1) 80%, transparent);
    border: none;
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;

    color: #FFFFFF;

    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.ckln-post-composer.has-media .ckln-post-composer__submit {
    position: static;

    height: 34px;
    padding: 8px 20px;

    flex: 0 0 auto;
    align-self: flex-end;
}
.ckln-post-composer__submit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 88%, black);
    box-shadow: 0px 2px 15px color-mix(in srgb, var(--ck-color-accent, #45A4E1) 90%, transparent);
    transform: translateY(-1px);
}

.ckln-post-composer__submit:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0px 1px 5px color-mix(in srgb, var(--ck-color-accent, #45A4E1) 50%, transparent);
}

.ckln-post-composer__submit:disabled {
    background: #E5E7EB;
    box-shadow: none;
    color: #9CA3AF;
    cursor: not-allowed;
    transform: none;
}

.ckln-post-composer.has-value .ckln-post-composer__submit {
    background: var(--ck-color-accent, #45A4E1);
    color: #FFFFFF;
}

/* =========================================================
   MOBILE OFF
========================================================= */

@media (max-width: 768px) {
    .ckln-post-composer,
    .ckln-post-composer-fab,
    button.ckln-post-composer-fab,
    [data-ckln-post-composer],
    [data-ckln-post-composer-open] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ===== ELEMENT: ckln-mobile-post-textarea | Mobile Post Textarea ===== */
.ckln-mobile-post-textarea {
    box-sizing: border-box;

    width: 100%;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-mobile-post-textarea *,
.ckln-mobile-post-textarea *::before,
.ckln-mobile-post-textarea *::after {
    box-sizing: border-box;
}

.ckln-mobile-post-textarea__field {
    display: block;

    width: 100%;
    min-height: 60px;
    max-height: 220px;
    padding: 15px;

    resize: none;
    overflow-y: hidden;

    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 10px;
    outline: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #000000;

    transition:
        height 0.15s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ckln-mobile-post-textarea__field::placeholder {
    color: #000000;
    opacity: 1;
}

.ckln-mobile-post-textarea__field:focus {
    border-color: color-mix(in srgb, var(--ck-color-accent, #FF8000) 35%, #DEE5EE);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ck-color-accent, #FF8000) 10%, transparent);
}

/* Fixed mode: full screen width with 15px side padding */
.ckln-mobile-post-textarea--fixed {
    position: fixed;
    left: 15px;
    right: 15px;
    bottom: 90px;
    z-index: 80;

    width: auto;
}

/* If нужно прям от края до края — добавь класс .ckln-mobile-post-textarea--edge */
.ckln-mobile-post-textarea--edge {
    left: 0;
    right: 0;
}

/* ===== ELEMENT: ckln-mobile-add-photo-button | Mobile Add Photo Button ===== */
.ckln-mobile-add-photo {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;

    width: 185px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-mobile-add-photo *,
.ckln-mobile-add-photo *::before,
.ckln-mobile-add-photo *::after {
    box-sizing: border-box;
}

.ckln-mobile-add-photo__preview {
    position: relative;

    width: 185px;
    height: 200px;

    border-radius: 5px;
    overflow: hidden;
}

.ckln-mobile-add-photo__preview[hidden] {
    display: none !important;
}

.ckln-mobile-add-photo__preview-image {
    display: block;

    width: 185px;
    height: 200px;

    object-fit: cover;
    border-radius: 5px;
}

.ckln-mobile-add-photo__preview-remove {
    position: absolute;
    top: 5px;
    right: 5px;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 20px;
    height: 20px;
    padding: 0;

    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 999px;

    color: #1F1F1F;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.ckln-mobile-add-photo__preview-remove:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.05);
}

.ckln-mobile-add-photo__preview-remove-icon {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.ckln-mobile-add-photo__button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;

    width: 118px;
    height: 37px;
    padding: 10px;

    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #000000;

    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-mobile-add-photo__button:hover {
    border-color: color-mix(in srgb, var(--ck-color-accent, #FF8000) 35%, #DEE5EE);
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 5%, #FFFFFF);
    color: var(--ck-color-accent, #FF8000);
}

.ckln-mobile-add-photo__button:active {
    transform: scale(0.98);
}

.ckln-mobile-add-photo__input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.ckln-mobile-add-photo__button-icon {
    display: block;

    width: 17px;
    height: 17px;
    flex: 0 0 17px;

    color: currentColor;
}

.ckln-mobile-add-photo__button-text {
    display: flex;
    align-items: center;

    width: 76px;
    height: 17px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: currentColor;
}

/* ===== ELEMENT: ckln-mobile-post-author | Mobile Post Author ===== */
.ckln-mobile-post-author {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 100%;
    height: 50px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-mobile-post-author *,
.ckln-mobile-post-author *::before,
.ckln-mobile-post-author *::after {
    box-sizing: border-box;
}

.ckln-mobile-post-author__avatar {
    display: block;

    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    object-fit: cover;
    border-radius: 90px;
}

.ckln-mobile-post-author__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;

    width: 132px;
    height: 50px;
    min-width: 0;
}

.ckln-mobile-post-author__name {
    display: flex;
    align-items: center;

    height: 20px;
    margin: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #000000;
}

.ckln-mobile-post-author__username {
    display: flex;
    align-items: center;

    width: 74px;
    height: 15px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;

    color: rgba(0, 0, 0, 0.7);
}

/* Fixed design position, if needed */
.ckln-mobile-post-author--positioned {
    position: absolute;
    left: 15px;
    top: 117px;

    width: 192px;
    height: 50px;
}

/* ===== ELEMENT: ckln-edit-post-modal | Edit post ===== */
/* =========================================================
   CKLN EDIT POST MODAL — FULL ADAPTIVE HEIGHT
========================================================= */

.ckln-edit-post-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    width: 100vw;
    height: 100dvh;
    padding: 18px 15px;

    overflow-x: hidden;
    overflow-y: auto;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-edit-post-modal *,
.ckln-edit-post-modal *::before,
.ckln-edit-post-modal *::after {
    box-sizing: border-box;
}

.ckln-edit-post-modal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;

    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ckln-edit-post-modal__panel {
    position: relative;
    z-index: 1;

    display: flex !important;
    flex-direction: column !important;

    width: 680px !important;
    max-width: calc(100vw - 30px) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 auto;
    padding: 0;

    background: #FFFFFF;
    border: none;
    border-radius: 15px;
    box-shadow: 0px 12px 40px rgba(15, 23, 42, 0.14);

    overflow: visible !important;
}

/* Header */

.ckln-edit-post-modal__header {
    position: static !important;

    display: flex;
    align-items: center;

    width: 100%;
    height: 58px;
    min-height: 58px;
    padding: 0 30px;

    background: #F9FAFB;
    border-bottom: 1px solid #DEE5EE;
    border-radius: 15px 15px 0 0;
}

.ckln-edit-post-modal__title {
    position: static !important;

    width: auto;
    height: auto;
    margin: 0;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;

    color: #000000;
}

/* Body */

.ckln-edit-post-modal__body {
    position: static !important;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 15px;

    overflow: visible !important;
}

/* Author */

.ckln-edit-post-modal__author {
    position: static !important;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 100%;
    height: 50px;
    min-height: 50px;

    overflow: visible !important;
}

.ckln-edit-post-modal__avatar {
    display: block;

    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    object-fit: cover;
    border-radius: 30px;
}

.ckln-edit-post-modal__author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;

    width: min(260px, calc(100% - 60px));
    min-width: 0;
    height: 42px;
}

.ckln-edit-post-modal__name {
    display: block;

    width: 100%;
    height: 20px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #000000;
}

.ckln-edit-post-modal__username {
    display: block;

    width: 100%;
    height: 17px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    color: rgba(0, 0, 0, 0.7);
}

/* Textarea */

.ckln-edit-post-modal__field-wrap {
    position: static !important;

    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 10px;

    border: 1px solid #DEE5EE;
    border-radius: 10px;
    background: #FFFFFF;

    overflow: hidden;
}

.ckln-edit-post-modal__textarea {
    display: block;

    width: 100%;
    height: 118px;
    min-height: 118px;
    max-height: 420px;
    padding: 10px 18px;

    resize: none;
    overflow-y: hidden;

    background: transparent;
    border: none;
    outline: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #000000;
}

.ckln-edit-post-modal__textarea::placeholder {
    color: rgba(0, 0, 0, 0.5);
    opacity: 1;
}

/* Gallery */

.ckln-edit-post-modal__gallery-wrap {
    position: relative !important;

    display: none;

    width: 100%;
    height: 240px;
    min-height: 240px;
    margin-top: 10px;

    overflow: hidden;
}

.ckln-edit-post-modal__panel.has-media .ckln-edit-post-modal__gallery-wrap {
    display: block !important;
}

.ckln-edit-post-modal__gallery {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;

    width: 100%;
    height: 240px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ckln-edit-post-modal__gallery::-webkit-scrollbar {
    display: none;
}

.ckln-edit-post-modal__media-item {
    position: relative;

    width: 222px;
    height: 240px;
    flex: 0 0 222px;

    overflow: hidden;

    background: #F1F5F9;
    border-radius: 5px;
}

.ckln-edit-post-modal__media-img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    border-radius: 5px;
}

.ckln-edit-post-modal__remove-media {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 3;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 20px;
    height: 20px;
    padding: 0;

    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 10px;

    color: #1F1F1F;
    cursor: pointer;
}

.ckln-edit-post-modal__remove-media svg {
    display: block;
    width: 14px;
    height: 14px;
}

.ckln-edit-post-modal__gallery-next {
    position: absolute;
    right: 5px;
    top: 109px;
    z-index: 4;

    display: none;
    justify-content: center;
    align-items: center;

    width: 22px;
    height: 22px;
    padding: 0;

    background: rgba(249, 250, 251, 0.8);
    border: 1px solid #DEE5EE;
    border-radius: 50%;

    color: #000000;
    cursor: pointer;
}

.ckln-edit-post-modal__gallery-wrap.has-overflow .ckln-edit-post-modal__gallery-next {
    display: flex;
}

/* Add photo */

.ckln-edit-post-modal__add-photo {
    position: static !important;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;

    width: fit-content;
    min-width: 118px;
    height: 37px;
    margin-top: 10px;
    padding: 10px;

    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 10px;

    color: #000000;
    cursor: pointer;
}

.ckln-edit-post-modal__file {
    display: none;
}

.ckln-edit-post-modal__add-photo-icon {
    display: block;

    width: 17px;
    height: 17px;
    flex: 0 0 17px;

    color: currentColor;
}

.ckln-edit-post-modal__add-photo span {
    display: block;

    width: auto;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: #000000;
    white-space: nowrap;
}

/* Footer */

.ckln-edit-post-modal__footer {
    position: static !important;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 9px;

    width: 100%;
    height: 66px;
    min-height: 66px;
    padding: 13px 20px;

    background: #FFFFFF;
    border-top: 1px solid #DEE5EE;
    border-radius: 0 0 15px 15px;
}

.ckln-edit-post-modal__cancel,
.ckln-edit-post-modal__save {
    display: flex;
    justify-content: center;
    align-items: center;

    width: auto;
    height: 38px;
    padding: 12px 25px;

    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;

    cursor: pointer;
    white-space: nowrap;
}

.ckln-edit-post-modal__cancel {
    min-width: 99px;

    background: #F9FAFB;
    border: 1px solid #DEE5EE;

    color: #1F1F1F;
}

.ckln-edit-post-modal__save {
    min-width: 84px;

    background: var(--ck-color-accent, #45A4E1);
    border: none;
    box-shadow: 0px 2px 10px rgba(114, 200, 255, 0.8);

    color: #FAFAFA;
}

.ckln-edit-post-modal__save:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 88%, black);
}

/* Mobile */

@media (max-width: 768px) {
    .ckln-edit-post-modal {
        padding: 0;
        align-items: stretch;
    }

    .ckln-edit-post-modal__panel {
        width: 100vw !important;
        max-width: none !important;
        min-height: 100dvh !important;
        border-radius: 0;
    }

    .ckln-edit-post-modal__header {
        border-radius: 0;
        padding: 0 20px;
    }

    .ckln-edit-post-modal__body {
        padding: 15px;
    }

    .ckln-edit-post-modal__footer {
        border-radius: 0;
        padding: 13px 15px;
    }
}

/* ===== ELEMENT: ckln-post-detail-01 | Post Detail ===== */
/* =========================================================
   CKLN POST DETAIL 01
========================================================= */

#ckln-post-detail-01,
.ckln-post-detail {
    width: 680px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0 30px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #000000;

    overflow: visible;
}

.ckln-post-detail *,
.ckln-post-detail *::before,
.ckln-post-detail *::after {
    box-sizing: border-box;
}

/* =========================================================
   TOPBAR
========================================================= */

.ckln-post-detail__topbar {
    display: flex;
    align-items: center;
    gap: 15px;

    width: 100%;
    height: 52px;
}

.ckln-post-detail__back {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 22px;
    height: 22px;
    padding: 0;

    background: transparent;
    border: none;
    color: #1F1F1F;

    cursor: pointer;
}

.ckln-post-detail__back svg {
    display: block;
    width: 22px;
    height: 22px;
}

.ckln-post-detail__title {
    margin: 0;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;

    color: #000000;
}

/* =========================================================
   POST
========================================================= */

.ckln-post-detail__post {
    width: 100%;
    overflow: visible;
}

.ckln-post-detail__post-header {
    width: 100%;
    height: auto;
    min-height: 50px;
    margin-top: 5px;

    overflow: visible;
}

.ckln-post-detail__author {
    position: relative;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 50px;
    height: auto;

    overflow: visible;
}

.ckln-post-detail__avatar {
    display: block;

    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    object-fit: cover;
    border-radius: 30px;
}

.ckln-post-detail__author-content {
    min-width: 0;
    flex: 1 1 auto;
    max-width: calc(100% - 82px);
}

.ckln-post-detail__author-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;

    width: 100%;
    min-width: 0;
}

.ckln-post-detail__author-info {
    display: flex;
    flex-direction: column;
    gap: 5px;

    width: auto;
    max-width: 240px;
    min-width: 0;
}

.ckln-post-detail__name {
    display: block;

    width: auto;
    max-width: 240px;
    height: 20px;
    margin: 0;
    padding: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #000000;
    text-decoration: none !important;
}

.ckln-post-detail__username {
    display: block;

    width: auto;
    max-width: 240px;
    height: 17px;
    margin: 0;
    padding: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    color: rgba(0, 0, 0, 0.7);
    text-decoration: none !important;
}

.ckln-post-detail__time {
    display: block;

    width: max-content;
    max-width: 90px;
    height: 17px;
    margin-top: 1px;

    overflow: visible;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 300;
    font-size: 14px;
    line-height: 17px;

    color: #000000;
    text-decoration: none !important;
}

/* =========================================================
   OWN POST MENU / DOTS
========================================================= */

.ckln-post-detail__menu-wrap,
.ckln-post-detail__own-menu-wrap,
.ckln-post-detail [data-ckln-post-menu-wrap],
.ckln-post-detail .ckln-post-card__menu-wrap {
    position: absolute;
    right: 0;
    top: 0;

    width: 22px;
    height: 22px;

    z-index: 5;
}

.ckln-post-detail__menu-toggle,
.ckln-post-detail__own-menu-toggle,
.ckln-post-detail [data-ckln-post-menu-toggle],
.ckln-post-detail .ckln-post-card__menu-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.4px;

    width: 22px;
    height: 22px;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 6px;

    cursor: pointer;
}

.ckln-post-detail__menu-toggle:hover,
.ckln-post-detail__own-menu-toggle:hover,
.ckln-post-detail [data-ckln-post-menu-toggle]:hover,
.ckln-post-detail .ckln-post-card__menu-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}

.ckln-post-detail__menu-toggle span,
.ckln-post-detail__own-menu-toggle span,
.ckln-post-detail [data-ckln-post-menu-toggle] span,
.ckln-post-detail .ckln-post-card__menu-toggle span,
.ckln-post-detail .ckln-post-card__dot {
    display: block;

    width: 3.67px;
    height: 3.67px;

    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

/* Dropdown menu if old post-card menu is reused inside detail */
.ckln-post-detail .ckln-post-card__menu {
    position: absolute;
    right: 0;
    top: 22px;
    z-index: 20;

    width: max-content;
    min-width: 150px;
    max-width: calc(100vw - 30px);
    height: auto;

    overflow: hidden;

    background: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(91, 91, 91, 0.15);
    border-radius: 10px;
}

.ckln-post-detail .ckln-post-card__menu[hidden] {
    display: none !important;
}

.ckln-post-detail .ckln-post-card__menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-width: max-content;
    height: 36px;
    padding: 0 16px 0 12px;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    color: #2E2626;

    white-space: nowrap;
    cursor: pointer;
}

.ckln-post-detail .ckln-post-card__menu-item--delete {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 10%, transparent);
    border-radius: 0 0 10px 10px;
}

/* =========================================================
   POST TEXT
========================================================= */

.ckln-post-detail__text {
    display: block;

    width: 100%;
    height: auto;
    min-height: 0;
    margin: 10px 0 0;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #000000;

    overflow: visible;
    white-space: normal;
}

/* =========================================================
   MEDIA / IMAGE
========================================================= */

.ckln-post-detail__media {
    display: block;

    width: 100%;
    max-width: 680px;
    height: auto;
    min-height: 0;
    margin-top: 18px;

    overflow: hidden;

    background: #F1F5F9;
    border-radius: 10px;
}

.ckln-post-detail__image {
    display: block;

    width: 100%;
    height: auto;
    max-width: 100%;

    object-fit: contain;
    object-position: center center;

    border-radius: 10px;
}

/* If real image comes through older classes */
.ckln-post-detail__media img,
.ckln-post-detail .ckln-post-card__media img,
.ckln-post-detail .ckln-post-card__image,
.ckln-post-detail [data-ckln-post-image] {
    display: block;

    width: 100%;
    height: auto;
    max-width: 100%;

    object-fit: contain;
    object-position: center center;

    border-radius: 10px;
}

/* Remove fake background/ghost rectangle */
.ckln-post-detail__media::before,
.ckln-post-detail__media::after,
.ckln-post-detail .ckln-post-card__media::before,
.ckln-post-detail .ckln-post-card__media::after {
    display: none !important;
    content: none !important;
}

/* If some old fixed image wrapper exists */
.ckln-post-detail .ckln-post-card__media,
.ckln-post-detail .ckln-post-card__image-wrap,
.ckln-post-detail [data-ckln-post-media] {
    width: 100% !important;
    max-width: 680px !important;
    height: auto !important;
    min-height: 0 !important;

    overflow: hidden !important;
    border-radius: 10px !important;
}

/* =========================================================
   STATS
========================================================= */

.ckln-post-detail__stats {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    height: 20px;
    margin-top: 18px;
}

.ckln-post-detail__stats-left,
.ckln-post-detail__stats-right {
    display: flex;
    align-items: center;
    gap: 8px;

    height: 20px;
}

.ckln-post-detail__stat {
    display: flex;
    align-items: center;
    gap: 4px;

    height: 20px;
    padding: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #000000;

    cursor: default;
}

button.ckln-post-detail__stat {
    cursor: pointer;
}

.ckln-post-detail__stat-icon {
    display: block;

    width: 20px;
    height: 20px;
    flex: 0 0 20px;

    color: currentColor;
}

.ckln-post-detail__stat-value {
    display: block;

    height: 16px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;

    color: currentColor;
}

button.ckln-post-detail__stat,
button.ckln-post-detail__stat svg,
button.ckln-post-detail__stat path,
button.ckln-post-detail__stat .ckln-post-detail__stat-value {
    transition:
        color 0.2s ease,
        stroke 0.2s ease,
        fill 0.2s ease,
        transform 0.2s ease;
}

button.ckln-post-detail__stat:hover {
    color: var(--ck-color-accent, #45A4E1);
}

button.ckln-post-detail__stat:hover svg {
    transform: translateY(-1px);
}

.ckln-post-detail__like.is-liked {
    color: #FF2929;
}

.ckln-post-detail__repost.is-reposted {
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-post-detail__divider {
    width: 100%;
    height: 1px;
    margin-top: 30px;

    background: #DEE5EE;
}

/* =========================================================
   COMMENTS
========================================================= */

.ckln-post-detail__comments {
    width: 100%;
    margin-top: 14px;
}

.ckln-post-detail__comments-title {
    margin: 0 0 14px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #000000;
}

.ckln-post-detail__comments-list {
    display: flex;
    flex-direction: column;
    gap: 17px;

    width: 100%;
}

.ckln-post-detail__comment {
    display: flex;
    gap: 10px;

    width: 100%;
}

.ckln-post-detail__comment-avatar {
    display: block;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    object-fit: cover;
    border-radius: 30px;
}

.ckln-post-detail__comment-content {
    width: calc(100% - 50px);
    min-width: 0;
}

.ckln-post-detail__comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    width: 100%;
    min-height: 17px;
}

.ckln-post-detail__comment-user {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    min-width: 0;
}

.ckln-post-detail__comment-name {
    display: block;

    max-width: 180px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: #000000;
}

.ckln-post-detail__comment-username {
    display: block;

    max-width: 120px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;

    color: rgba(0, 0, 0, 0.6);
}

.ckln-post-detail__comment-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.4px;

    width: 22px;
    height: 22px;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 6px;

    cursor: pointer;
}

.ckln-post-detail__comment-menu span {
    display: block;

    width: 3.67px;
    height: 3.67px;

    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
}

.ckln-post-detail__comment-menu:hover {
    background: rgba(0, 0, 0, 0.04);
}

.ckln-post-detail__comment-text {
    width: 100%;
    margin: 5px 0 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: #000000;
}

.ckln-post-detail__comment-footer {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 5px;

    font-size: 12px;
    line-height: 15px;

    color: rgba(0, 0, 0, 0.6);
}

.ckln-post-detail__comment-footer span,
.ckln-post-detail__comment-footer button {
    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;

    color: rgba(0, 0, 0, 0.6);
}

.ckln-post-detail__comment-footer button {
    padding: 0;

    background: transparent;
    border: none;

    cursor: pointer;
}

.ckln-post-detail__comment-footer button:hover {
    color: var(--ck-color-accent, #45A4E1);
}

/* =========================================================
   COMMENT FORM
========================================================= */

.ckln-post-detail__comment-form {
    display: flex;
    align-items: flex-start;
    gap: 5px;

    width: 100%;
    margin-top: 20px;
}

.ckln-post-detail__comment-form-avatar {
    display: block;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    object-fit: cover;
    border-radius: 30px;
}

.ckln-post-detail__comment-field-wrap {
    width: 590px;
    min-height: 40px;
    flex: 1 1 auto;

    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 10px;

    overflow: hidden;
}

.ckln-post-detail__comment-field {
    display: block;

    width: 100%;
    height: 38px;
    min-height: 38px;
    max-height: 140px;
    padding: 8px 15px;

    resize: none;
    overflow-y: hidden;

    background: transparent;
    border: none;
    outline: none;

    font-family: 'Inter', var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #000000;
}

.ckln-post-detail__comment-field::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.ckln-post-detail__comment-submit {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    padding: 8px;

    background: var(--ck-color-accent, #45A4E1);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(114, 200, 255, 0.8);

    color: #FFFFFF;

    cursor: pointer;
}

.ckln-post-detail__comment-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ckln-post-detail__comment-submit svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
    #ckln-post-detail-01,
    .ckln-post-detail {
        width: 100%;
        max-width: 390px;
        padding: 0 15px 30px;
    }

    .ckln-post-detail__topbar {
        width: 100%;
        height: 52px;
    }

    .ckln-post-detail__post-header {
        margin-top: 10px;
    }

    .ckln-post-detail__author {
        min-height: 50px;
    }

    .ckln-post-detail__author-content {
        max-width: calc(100% - 82px);
    }

    .ckln-post-detail__author-info {
        max-width: 165px;
    }

    .ckln-post-detail__name {
        max-width: 165px;
    }

    .ckln-post-detail__username {
        max-width: 165px;
    }

    .ckln-post-detail__time {
        max-width: 75px;
    }

    .ckln-post-detail__text {
        margin-top: 10px;
    }

    .ckln-post-detail__media {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-top: 18px;
        border-radius: 10px;
    }

    .ckln-post-detail__image,
    .ckln-post-detail__media img,
    .ckln-post-detail .ckln-post-card__image,
    .ckln-post-detail [data-ckln-post-image] {
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 10px;
    }

    .ckln-post-detail__stats {
        margin-top: 18px;
    }

    .ckln-post-detail__divider {
        margin-top: 30px;
    }

    .ckln-post-detail__comment-name {
        max-width: 150px;
    }

    .ckln-post-detail__comment-username {
        max-width: 90px;
    }

    .ckln-post-detail__comment-form {
        gap: 5px;
    }

    .ckln-post-detail__comment-field-wrap {
        width: auto;
    }
}
/* =========================================================
   CKLN POST DETAIL — restore own post dots menu
========================================================= */

/* Контейнер автора должен быть точкой позиционирования */
.ckln-post-detail__author {
    position: relative !important;
    padding-right: 32px !important;
}

/* Возвращаем три точки справа */
.ckln-post-detail__menu-wrap,
.ckln-post-detail__own-menu-wrap,
.ckln-post-detail .ckln-post-card__menu-wrap,
.ckln-post-detail [data-ckln-post-menu-wrap] {
    position: absolute !important;
    right: 0 !important;
    top: 14px !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;

    overflow: visible !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}

/* Сама кнопка */
.ckln-post-detail__menu-toggle,
.ckln-post-detail__own-menu-toggle,
.ckln-post-detail .ckln-post-card__menu-toggle,
.ckln-post-detail [data-ckln-post-menu-toggle] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2.4px !important;

    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;

    color: rgba(0, 0, 0, 0.5) !important;

    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Hover */
.ckln-post-detail__menu-toggle:hover,
.ckln-post-detail__own-menu-toggle:hover,
.ckln-post-detail .ckln-post-card__menu-toggle:hover,
.ckln-post-detail [data-ckln-post-menu-toggle]:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Точки, если они сделаны span */
.ckln-post-detail__menu-toggle span,
.ckln-post-detail__own-menu-toggle span,
.ckln-post-detail .ckln-post-card__menu-toggle span,
.ckln-post-detail .ckln-post-card__dot,
.ckln-post-detail [data-ckln-post-menu-toggle] span {
    display: block !important;

    width: 3.67px !important;
    height: 3.67px !important;
    min-width: 3.67px !important;
    min-height: 3.67px !important;

    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* Если иконка трёх точек приходит SVG */
.ckln-post-detail__menu-toggle svg,
.ckln-post-detail__own-menu-toggle svg,
.ckln-post-detail .ckln-post-card__menu-toggle svg,
.ckln-post-detail [data-ckln-post-menu-toggle] svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;

    opacity: 1 !important;
    visibility: visible !important;

    color: rgba(0, 0, 0, 0.5) !important;
}

.ckln-post-detail__menu-toggle svg path,
.ckln-post-detail__own-menu-toggle svg path,
.ckln-post-detail .ckln-post-card__menu-toggle svg path,
.ckln-post-detail [data-ckln-post-menu-toggle] svg path {
    fill: rgba(0, 0, 0, 0.5) !important;
    stroke: rgba(0, 0, 0, 0.5) !important;
}

/* Dropdown меню под точками */
.ckln-post-detail .ckln-post-card__menu,
.ckln-post-detail__menu,
.ckln-post-detail__own-menu,
.ckln-post-detail [data-ckln-post-menu] {
    position: absolute !important;
    right: 0 !important;
    top: 26px !important;
    z-index: 30 !important;

    width: max-content !important;
    min-width: 150px !important;
    max-width: calc(100vw - 30px) !important;
    height: auto !important;

    overflow: hidden !important;

    background: #FFFFFF !important;
    box-shadow: 0px 4px 20px rgba(91, 91, 91, 0.15) !important;
    border-radius: 10px !important;
}

.ckln-post-detail .ckln-post-card__menu[hidden],
.ckln-post-detail__menu[hidden],
.ckln-post-detail__own-menu[hidden],
.ckln-post-detail [data-ckln-post-menu][hidden] {
    display: none !important;
}

/* ===== ELEMENT: ckln-repost-card-01 | Repost Card With Link Preview ===== */
/* =========================================================
   CKLN REPOST CARD 01
========================================================= */

#ckln-repost-card-01,
.ckln-repost-card {
    width: 680px;
    max-width: 100%;
    margin: 0 auto;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #000000;
}

.ckln-repost-card *,
.ckln-repost-card *::before,
.ckln-repost-card *::after {
    box-sizing: border-box;
}

/* Repost info */

.ckln-repost-card__repost-info {
    display: flex;
    align-items: center;
    gap: 6px;

    width: 100%;
    height: 22px;
    margin-bottom: 6px;
}

.ckln-repost-card__repost-avatar {
    display: block;

    width: 22px;
    height: 22px;
    flex: 0 0 22px;

    object-fit: cover;
    border-radius: 90px;
}

.ckln-repost-card__repost-text {
    display: block;

    width: auto;
    max-width: calc(100% - 28px);
    height: 15px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 12px;
    line-height: 15px;

    color: #000000;
}

/* Header */

.ckln-repost-card__header {
    width: 100%;
    height: 50px;
}

.ckln-repost-card__author {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    height: 50px;
}

.ckln-repost-card__avatar {
    display: block;

    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    object-fit: cover;
    border-radius: 30px;
}

.ckln-repost-card__author-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;

    min-width: 0;
}

.ckln-repost-card__author-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    min-width: 0;
}

.ckln-repost-card__name {
    display: block;

    max-width: 140px;
    height: 20px;
    margin: 0;
    padding: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #000000;
}

.ckln-repost-card__time {
    display: block;

    width: max-content;
    height: 17px;
    margin-top: 1px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 300;
    font-size: 14px;
    line-height: 17px;

    color: #000000;
    white-space: nowrap;
}

.ckln-repost-card__username {
    display: block;

    max-width: 140px;
    height: 17px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    color: rgba(0, 0, 0, 0.7);
}

/* Text */

.ckln-repost-card__text {
    width: 100%;
    margin: 10px 0 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;

    color: #000000;
}

.ckln-repost-card__text a {
    color: var(--ck-color-accent, #45A4E1);
    text-decoration: none;
}

.ckln-repost-card__text a:hover {
    text-decoration: underline;
}

/* Link preview */

.ckln-repost-card__link-preview {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
    height: 110px;
    margin-top: 8px;

    overflow: hidden;

    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 5px;

    color: #000000;
    text-decoration: none;
}

.ckln-repost-card__preview-thumb {
    position: relative;

    width: 180px;
    height: 100px;
    flex: 0 0 180px;
    margin-left: 5px;

    overflow: hidden;

    background: #F1F5F9;
    border-radius: 5px;
}

.ckln-repost-card__preview-img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
    border-radius: 5px;
}

.ckln-repost-card__youtube-icon {
    position: absolute;
    left: 50%;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;

    transform: translate(-50%, -50%);
}

.ckln-repost-card__youtube-icon svg {
    display: block;
    width: 60px;
    height: 60px;
}

.ckln-repost-card__preview-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;

    width: calc(100% - 195px);
    min-width: 0;
    padding: 10px 15px;
}

.ckln-repost-card__preview-main {
    display: flex;
    flex-direction: column;
    gap: 5px;

    width: 100%;
    min-width: 0;
}

.ckln-repost-card__preview-domain {
    display: block;

    width: 100%;
    height: 16px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;

    color: #000000;
}

.ckln-repost-card__preview-title {
    display: block;

    width: 100%;
    height: 20px;
    margin: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #000000;
}

.ckln-repost-card__preview-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;

    width: 188px;
    max-width: 100%;
}

.ckln-repost-card__preview-channel {
    display: block;

    width: 100%;
    height: 16px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;

    color: #000000;
}

.ckln-repost-card__preview-details {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 188px;
    max-width: 100%;
    height: 16px;
}

.ckln-repost-card__preview-details span {
    display: block;

    height: 16px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;

    color: #000000;
    white-space: nowrap;
}

/* Footer */

.ckln-repost-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;
    height: 20px;
    margin-top: 8px;
}

.ckln-repost-card__stats-group {
    display: flex;
    align-items: center;
    gap: 8px;

    height: 20px;
}

.ckln-repost-card__stat {
    display: flex;
    align-items: center;
    gap: 4px;

    height: 20px;
    padding: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #000000;

    cursor: default;
}

button.ckln-repost-card__stat {
    cursor: pointer;
}

.ckln-repost-card__icon {
    display: block;

    width: 20px;
    height: 20px;
    flex: 0 0 20px;

    color: currentColor;
}

.ckln-repost-card__stat-value {
    display: block;

    height: 16px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;

    color: currentColor;
}

.ckln-repost-card__like.is-liked {
    color: #45A4E1;
}

.ckln-repost-card__repost.is-reposted {
    color: var(--ck-color-accent, #45A4E1);
}

button.ckln-repost-card__stat,
button.ckln-repost-card__stat svg,
button.ckln-repost-card__stat path,
button.ckln-repost-card__stat .ckln-repost-card__stat-value {
    transition:
        color 0.2s ease,
        stroke 0.2s ease,
        fill 0.2s ease,
        transform 0.2s ease;
}

button.ckln-repost-card__stat:hover {
    color: var(--ck-color-accent, #45A4E1);
}

button.ckln-repost-card__stat:hover svg {
    transform: translateY(-1px);
}

/* Responsive */

@media (max-width: 768px) {
    #ckln-repost-card-01,
    .ckln-repost-card {
        width: 100%;
        max-width: 390px;
        padding: 0 15px;
    }

    .ckln-repost-card__link-preview {
        height: auto;
        min-height: 110px;
    }

    .ckln-repost-card__preview-thumb {
        width: 135px;
        flex-basis: 135px;
    }

    .ckln-repost-card__preview-content {
        width: calc(100% - 150px);
        padding: 10px;
    }

    .ckln-repost-card__preview-title {
        font-size: 14px;
        line-height: 18px;
        height: 18px;
    }

    .ckln-repost-card__preview-details {
        gap: 6px;
    }
}
/* =========================================================
   CKLN REPOST CARD — mobile link preview fit fix
========================================================= */

@media (max-width: 768px) {
    .ckln-repost-card__link-preview {
        width: 100% !important;
        height: 110px !important;
        min-height: 110px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        overflow: hidden !important;
    }

    .ckln-repost-card__preview-thumb {
        width: 120px !important;
        height: 100px !important;
        flex: 0 0 120px !important;
        margin-left: 5px !important;
    }

    .ckln-repost-card__preview-content {
        width: calc(100% - 130px) !important;
        min-width: 0 !important;
        height: 90px !important;

        padding: 0 10px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 10px !important;

        overflow: hidden !important;
    }

    .ckln-repost-card__preview-main {
        width: 100% !important;
        min-width: 0 !important;
        gap: 5px !important;
    }

    .ckln-repost-card__preview-domain {
        width: 100% !important;
        height: 16px !important;

        font-size: 12px !important;
        line-height: 16px !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .ckln-repost-card__preview-title {
        width: 100% !important;
        height: 20px !important;

        font-size: 14px !important;
        line-height: 20px !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .ckln-repost-card__preview-meta {
        width: 100% !important;
        min-width: 0 !important;
        gap: 4px !important;
    }

    .ckln-repost-card__preview-channel {
        width: 100% !important;
        height: 16px !important;

        font-size: 13px !important;
        line-height: 16px !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .ckln-repost-card__preview-details {
        width: 100% !important;
        min-width: 0 !important;
        height: 16px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;

        overflow: hidden !important;
    }

    .ckln-repost-card__preview-details span {
        height: 16px !important;

        font-size: 12px !important;
        line-height: 16px !important;

        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .ckln-repost-card__preview-details span:first-child {
        max-width: 92px !important;
        flex: 0 1 auto !important;
    }

    .ckln-repost-card__preview-details span:last-child {
        max-width: 82px !important;
        flex: 0 1 auto !important;
    }

    .ckln-repost-card__youtube-icon,
    .ckln-repost-card__youtube-icon svg {
        width: 46px !important;
        height: 46px !important;
    }
}

@media (max-width: 360px) {
    .ckln-repost-card__preview-thumb {
        width: 105px !important;
        flex-basis: 105px !important;
    }

    .ckln-repost-card__preview-content {
        width: calc(100% - 115px) !important;
        padding: 0 8px !important;
    }

    .ckln-repost-card__preview-details {
        gap: 6px !important;
    }

    .ckln-repost-card__preview-details span:first-child {
        max-width: 78px !important;
    }

    .ckln-repost-card__preview-details span:last-child {
        max-width: 70px !important;
    }
}

/* ===== ELEMENT: ckln-sacrament-post-card-01 | Sacrament Booking Post Card ===== */
/* =========================================================
   CKLN SACRAMENT POST CARD 01
========================================================= */

#ckln-sacrament-post-card-01,
.ckln-sacrament-post-card {
    box-sizing: border-box;

    width: 680px;
    max-width: 100%;
    padding: 0 0 18px;

    background: rgba(245, 247, 251, 0.55) !important;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: rgba(245, 247, 251, 0.55) !important;

    --ck-sacrament-accent: var(--ck-color-accent, #FF8000);
    --ck-sacrament-accent-soft: color-mix(in srgb, var(--ck-sacrament-accent) 10%, transparent);
    --ck-sacrament-text: #1F1F1F;
    --ck-sacrament-muted: rgba(31, 31, 31, 0.7);
    --ck-sacrament-strong-muted: rgba(31, 31, 31, 0.8);
    --ck-sacrament-border: #F1F5F9;
    --ck-sacrament-divider: #DEE5EE;
    --ck-sacrament-status-bg: #F1F5F9;
}

.ckln-sacrament-post-card *,
.ckln-sacrament-post-card *::before,
.ckln-sacrament-post-card *::after {
    box-sizing: border-box;
}

.ckln-sacrament-post-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    width: 100%;
    height: 50px;
    margin: 18px 0 10px;
}

.ckln-sacrament-post-card__author {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 250px;
    max-width: 100%;
    height: 50px;
}

.ckln-sacrament-post-card__avatar {
    display: block;

    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    object-fit: cover;
    border-radius: 90px;
}

.ckln-sacrament-post-card__author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;

    width: 132px;
    height: 42px;
    min-width: 0;
}

.ckln-sacrament-post-card__name {
    display: block;

    width: 132px;
    max-width: 100%;
    height: 20px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: var(--ck-sacrament-text);
}

.ckln-sacrament-post-card__username {
    display: block;

    width: 132px;
    max-width: 100%;
    height: 17px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    color: var(--ck-sacrament-muted);
}

.ckln-sacrament-post-card__posted-time {
    display: block;

    width: 48px;
    height: 17px;
    flex: 0 0 48px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 300;
    font-size: 14px;
    line-height: 17px;

    color: var(--ck-sacrament-text);
    white-space: nowrap;
}

.ckln-sacrament-post-card__booking {
    position: relative;

    width: 100%;
    min-height: 110px;
    margin-top: 10px;
    padding: 14px;

    background: #FFFFFF;
    border: 1px solid var(--ck-sacrament-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
}

.ckln-sacrament-post-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 81px;
    height: 23px;
    padding: 4px 10px;

    background: var(--ck-sacrament-accent-soft);
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;

    color: var(--ck-sacrament-accent);
    white-space: nowrap;
}

.ckln-sacrament-post-card__title {
    display: block;

    width: calc(100% - 230px);
    min-height: 20px;
    margin: 7px 0 6px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    color: var(--ck-sacrament-text);
}

.ckln-sacrament-post-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 16px;
}

.ckln-sacrament-post-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-width: 0;
    height: 16px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;

    color: var(--ck-sacrament-strong-muted);
    white-space: nowrap;
}

.ckln-sacrament-post-card__meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;
    flex: 0 0 14px;

    color: var(--ck-sacrament-strong-muted);
}

.ckln-sacrament-post-card__meta-icon svg {
    display: block;
    width: 14px;
    height: 14px;
}

.ckln-sacrament-post-card__status,
.ckln-sacrament-post-card__join {
    position: absolute;
    right: 14px;
    bottom: 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 34px;
    padding: 10px 20px;

    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;

    white-space: nowrap;
}

.ckln-sacrament-post-card__status {
    min-width: 207px;

    background: var(--ck-sacrament-status-bg);
    color: rgba(31, 31, 31, 0.6);
}

.ckln-sacrament-post-card__join {
    min-width: 139px;

    background: var(--ck-sacrament-accent);
    border: none;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--ck-sacrament-accent) 80%, transparent);

    color: #FAFAFA;
    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;
}

.ckln-sacrament-post-card__join:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--ck-sacrament-accent) 75%, transparent);
}

.ckln-sacrament-post-card__join:active {
    transform: scale(0.98);
    opacity: 0.92;
}

.ckln-sacrament-post-card::after {
    content: "";

    display: block;

    width: 100%;
    height: 0;
    margin-top: 18px;

    border-top: 1px solid var(--ck-sacrament-divider);
}

@media (max-width: 720px) {
    #ckln-sacrament-post-card-01,
    .ckln-sacrament-post-card {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .ckln-sacrament-post-card {
        padding-bottom: 16px;
    }

    .ckln-sacrament-post-card__header {
        height: auto;
        margin-bottom: 10px;
    }

    .ckln-sacrament-post-card__author {
        width: 100%;
    }

    .ckln-sacrament-post-card__posted-time {
        margin-left: auto;
    }

    .ckln-sacrament-post-card__booking {
        min-height: 150px;
        padding: 14px;
    }

    .ckln-sacrament-post-card__title {
        width: 100%;
        margin-bottom: 8px;
    }

    .ckln-sacrament-post-card__meta {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding-bottom: 46px;
    }

    .ckln-sacrament-post-card__status,
    .ckln-sacrament-post-card__join {
        left: 14px;
        right: 14px;
        bottom: 14px;

        width: auto;
        min-width: 0;
    }
}

@media (max-width: 360px) {
    .ckln-sacrament-post-card__avatar {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .ckln-sacrament-post-card__name {
        font-size: 15px;
    }

    .ckln-sacrament-post-card__username,
    .ckln-sacrament-post-card__posted-time {
        font-size: 13px;
    }

    .ckln-sacrament-post-card__title {
        font-size: 13px;
    }

    .ckln-sacrament-post-card__status,
    .ckln-sacrament-post-card__join {
        font-size: 13px;
    }
}

/* ===== ELEMENT: ckln-priest-profile-hero-01 | Priest Profile Hero ===== */
/* =========================================================
   CKLN UNIVERSAL PROFILE HERO 01
========================================================= */

#ckln-priest-profile-hero-01,
.ckln-priest-profile-hero {
    box-sizing: border-box;

    width: 680px;
    max-width: 100%;
    padding: 0;

    background: #FFFFFF;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    --ck-profile-accent: var(--ck-color-accent, #45A4E1);
    --ck-profile-accent-soft: color-mix(in srgb, var(--ck-profile-accent) 10%, transparent);
    --ck-profile-accent-shadow: color-mix(in srgb, var(--ck-profile-accent) 70%, transparent);
    --ck-profile-text: #1F1F1F;
    --ck-profile-muted: rgba(31, 31, 31, 0.7);
    --ck-profile-muted-2: rgba(31, 31, 31, 0.6);
    --ck-profile-border: #F1F5F9;
    --ck-profile-button-bg: #F9FAFB;
}

.ckln-priest-profile-hero *,
.ckln-priest-profile-hero *::before,
.ckln-priest-profile-hero *::after,
.ckln-profile-demo-switcher *,
.ckln-profile-demo-switcher *::before,
.ckln-profile-demo-switcher *::after {
    box-sizing: border-box;
}

.ckln-priest-profile-hero [hidden] {
    display: none !important;
}

/* Demo switcher */

.ckln-profile-demo-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    width: 680px;
    max-width: 100%;
    margin: 0 0 18px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-profile-demo-switcher button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 34px;
    padding: 9px 14px;

    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;

    color: #1F1F1F;
    white-space: nowrap;
    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-profile-demo-switcher button:hover,
.ckln-profile-demo-switcher button.is-active {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 10%, #FFFFFF);
    border-color: var(--ck-color-accent, #45A4E1);
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-profile-demo-switcher button:active {
    transform: scale(0.98);
}

/* Base layout */

.ckln-priest-profile-hero__top {
    position: relative;

    display: grid;
    grid-template-columns: 125px minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 25px;

    width: 100%;
    min-height: 135px;
}

.ckln-priest-profile-hero__avatar-wrap {
    position: relative;

    width: 125px;
    height: 125px;
}

.ckln-priest-profile-hero__avatar-wrap::before {
    content: "";

    position: absolute;
    inset: -4px;

    display: block;

    border: 2.2px solid var(--ck-profile-accent);
    border-radius: 999px;

    opacity: 1;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.ckln-priest-profile-hero.is-following-animating .ckln-priest-profile-hero__avatar-wrap::before {
    animation: ckln-profile-avatar-pulse 0.65s ease;
}

.ckln-priest-profile-hero__avatar {
    position: relative;
    z-index: 1;

    display: block;

    width: 125px;
    height: 125px;

    object-fit: cover;
    border-radius: 90px;

    transition: transform 0.28s ease;
}

.ckln-priest-profile-hero.is-following-animating .ckln-priest-profile-hero__avatar {
    animation: ckln-profile-avatar-pop 0.65s ease;
}

.ckln-priest-profile-hero__info {
    min-width: 0;
}

.ckln-priest-profile-hero__name-row {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
    height: 22px;
}

.ckln-priest-profile-hero__name {
    display: block;

    max-width: 100%;
    min-width: 0;
    margin: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;

    color: var(--ck-profile-text);
}

.ckln-priest-profile-hero__verified {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    color: var(--ck-profile-accent);
}

.ckln-priest-profile-hero__verified svg {
    display: block;
    width: 18px;
    height: 18px;
}

.ckln-priest-profile-hero__username {
    display: block;

    max-width: 100%;
    height: 17px;
    margin: 3px 0 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    color: var(--ck-profile-muted);
}

.ckln-priest-profile-hero__stats {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 15px;

    max-width: 100%;
    margin-top: 20px;

    overflow: hidden;
}

.ckln-priest-profile-hero__stat {
    display: inline-flex;
    align-items: center;

    min-width: 0;
    height: 20px;
    flex: 0 1 auto;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    color: var(--ck-profile-text);
}

/* Buttons */

.ckln-priest-profile-hero__before-follow {
    display: block;

    width: min(260px, 100%);
    margin-top: 15px;
}

.ckln-priest-profile-hero__after-follow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    width: 100%;
    margin-top: 15px;
}

.ckln-priest-profile-hero.is-following-animating .ckln-priest-profile-hero__after-follow {
    animation: ckln-profile-controls-in 0.36s ease both;
}

.ckln-priest-profile-hero__follow,
.ckln-priest-profile-hero__secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 38px;
    padding: 12px 25px;

    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease;
}

.ckln-priest-profile-hero__follow {
    background: var(--ck-profile-accent);
    border: none;
    box-shadow: 0 2px 10px var(--ck-profile-accent-shadow);

    color: #FFFFFF;
}

.ckln-priest-profile-hero__secondary-btn {
    background: var(--ck-profile-button-bg);
    border: 1px solid var(--ck-profile-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    color: #1F1F1F;
}

.ckln-priest-profile-hero__follow span,
.ckln-priest-profile-hero__secondary-btn span {
    display: block;

    max-width: 100%;
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;

    color: currentColor;
}

.ckln-priest-profile-hero__follow:hover,
.ckln-priest-profile-hero__secondary-btn:hover {
    transform: translateY(-1px);
}

.ckln-priest-profile-hero__follow:hover {
    box-shadow: 0 4px 14px var(--ck-profile-accent-shadow);
}

.ckln-priest-profile-hero__secondary-btn:hover {
    border-color: color-mix(in srgb, var(--ck-profile-accent) 28%, var(--ck-profile-border));
}

.ckln-priest-profile-hero__follow:active,
.ckln-priest-profile-hero__secondary-btn:active {
    transform: scale(0.98);
    opacity: 0.92;
}

/* Menu */

.ckln-priest-profile-hero__menu-wrap {
    position: relative;

    display: flex;
    justify-content: flex-end;

    width: 22px;
    min-height: 22px;
}

.ckln-priest-profile-hero__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    color: rgba(31, 31, 31, 0.5);
    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-priest-profile-hero__menu-toggle:hover,
.ckln-priest-profile-hero__menu-toggle.is-active {
    color: var(--ck-profile-accent);
}

.ckln-priest-profile-hero__menu-toggle:active {
    transform: scale(0.94);
}

.ckln-priest-profile-hero__menu-toggle svg {
    display: block;
    width: 22px;
    height: 22px;
}

.ckln-priest-profile-hero__menu {
    position: absolute;
    right: 0;
    top: 22px;
    z-index: 20;

    width: max-content;
    min-width: 198px;
    max-width: min(260px, calc(100vw - 30px));
    padding: 12px;

    background: #FFFFFF;
    box-shadow: 0 4px 20px rgba(91, 91, 91, 0.15);
    border-radius: 10px;
}

.ckln-priest-profile-hero__menu-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
    text-align: left;
    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-priest-profile-hero__menu-item:hover {
    color: var(--ck-profile-accent);
    transform: translateX(2px);
}

.ckln-priest-profile-hero__menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;
    flex: 0 0 17px;

    color: currentColor;
}

.ckln-priest-profile-hero__menu-icon svg {
    display: block;
    width: 17px;
    height: 17px;
}

.ckln-priest-profile-hero__menu-text {
    display: block;

    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    color: currentColor;
}

/* Cards */

.ckln-priest-profile-hero__actions {
    display: grid;
    width: 100%;
}

.ckln-priest-profile-hero__actions--before {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin-top: 25px;
}

.ckln-priest-profile-hero__actions--after {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;

    margin-top: 25px;
}

.ckln-priest-profile-hero.is-following-animating .ckln-priest-profile-hero__actions--after {
    animation: ckln-profile-cards-in 0.42s ease both;
}

.ckln-priest-profile-hero__card {
    position: relative;

    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) 14px;
    align-items: center;
    column-gap: 10px;

    width: 100%;
    min-height: 58px;
    padding: 6px 10px;

    opacity: 0.6;
    background: #FFFFFF;
    border: 1px solid var(--ck-profile-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 15px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    text-align: left;
    color: var(--ck-profile-text);
    cursor: pointer;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.ckln-priest-profile-hero__card--compact {
    min-height: 74px;
}

.ckln-priest-profile-hero__card:hover {
    opacity: 1;
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ck-profile-accent) 32%, var(--ck-profile-border));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--ck-profile-accent) 12%, transparent);
}

.ckln-priest-profile-hero__card:active {
    transform: scale(0.99);
}

.ckln-priest-profile-hero__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 45px;
    height: 45px;

    background: var(--ck-profile-accent-soft);
    border-radius: 50%;
    color: var(--ck-profile-accent);
}

.ckln-priest-profile-hero__card-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.ckln-priest-profile-hero__card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.ckln-priest-profile-hero__card-title {
    display: block;

    max-width: 100%;
    height: 17px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: var(--ck-profile-text);
}

.ckln-priest-profile-hero__card-text {
    display: block;

    max-width: 100%;
    height: 16px;
    margin-top: 5px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;

    color: var(--ck-profile-muted-2);
}

.ckln-priest-profile-hero__card--compact .ckln-priest-profile-hero__card-text {
    height: 32px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ckln-priest-profile-hero__card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;

    color: rgba(31, 31, 31, 0.8);

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.ckln-priest-profile-hero__card:hover .ckln-priest-profile-hero__card-arrow {
    color: var(--ck-profile-accent);
    transform: translateX(2px);
}

.ckln-priest-profile-hero__card-arrow svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* =========================================================
   MODE VISIBILITY
========================================================= */

.ckln-priest-profile-hero[data-profile-mode="own"] .ckln-priest-profile-hero__verified,
.ckln-priest-profile-hero[data-profile-mode="own"] .ckln-priest-profile-hero__menu-wrap,
.ckln-priest-profile-hero[data-profile-mode="own"] .ckln-priest-profile-hero__before-follow,
.ckln-priest-profile-hero[data-profile-mode="own"] .ckln-priest-profile-hero__after-follow,
.ckln-priest-profile-hero[data-profile-mode="own"] .ckln-priest-profile-hero__actions {
    display: none !important;
}

.ckln-priest-profile-hero[data-profile-mode="priest-unfollowed"] .ckln-priest-profile-hero__after-follow,
.ckln-priest-profile-hero[data-profile-mode="priest-unfollowed"] .ckln-priest-profile-hero__actions--after {
    display: none !important;
}

.ckln-priest-profile-hero[data-profile-mode="user-unfollowed"] .ckln-priest-profile-hero__verified,
.ckln-priest-profile-hero[data-profile-mode="user-unfollowed"] .ckln-priest-profile-hero__menu-wrap,
.ckln-priest-profile-hero[data-profile-mode="user-unfollowed"] .ckln-priest-profile-hero__after-follow,
.ckln-priest-profile-hero[data-profile-mode="user-unfollowed"] .ckln-priest-profile-hero__actions {
    display: none !important;
}

.ckln-priest-profile-hero[data-profile-mode="user-followed"] .ckln-priest-profile-hero__verified,
.ckln-priest-profile-hero[data-profile-mode="user-followed"] .ckln-priest-profile-hero__menu-wrap,
.ckln-priest-profile-hero[data-profile-mode="user-followed"] .ckln-priest-profile-hero__before-follow,
.ckln-priest-profile-hero[data-profile-mode="user-followed"] .ckln-priest-profile-hero__actions {
    display: none !important;
}

.ckln-priest-profile-hero[data-profile-mode="user-followed"] .ckln-priest-profile-hero__after-follow {
    display: grid !important;
}

.ckln-priest-profile-hero[data-profile-mode="priest-followed"] .ckln-priest-profile-hero__before-follow,
.ckln-priest-profile-hero[data-profile-mode="priest-followed"] .ckln-priest-profile-hero__actions--before {
    display: none !important;
}

.ckln-priest-profile-hero[data-profile-mode="priest-followed"] .ckln-priest-profile-hero__after-follow,
.ckln-priest-profile-hero[data-profile-mode="priest-followed"] .ckln-priest-profile-hero__actions--after {
    display: grid !important;
}

.ckln-priest-profile-hero[data-profile-mode="priest-followed"] [data-ckln-priest-action="sacraments"] {
    display: none !important;
}

.ckln-priest-profile-hero[data-profile-mode="priest-followed"] .ckln-priest-profile-hero__actions--after {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ckln-priest-profile-hero[data-profile-mode="mentor"] .ckln-priest-profile-hero__before-follow,
.ckln-priest-profile-hero[data-profile-mode="mentor"] .ckln-priest-profile-hero__actions--before {
    display: none !important;
}

.ckln-priest-profile-hero[data-profile-mode="mentor"] .ckln-priest-profile-hero__after-follow,
.ckln-priest-profile-hero[data-profile-mode="mentor"] .ckln-priest-profile-hero__actions--after {
    display: grid !important;
}

/* Animations */

@keyframes ckln-profile-avatar-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--ck-profile-accent) 28%, transparent);
    }

    45% {
        transform: scale(1.035);
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--ck-profile-accent) 16%, transparent);
    }

    100% {
        transform: scale(1);
        box-shadow: none;
    }
}

@keyframes ckln-profile-avatar-pop {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.025);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ckln-profile-controls-in {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ckln-profile-cards-in {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */

@media (max-width: 720px) {
    #ckln-priest-profile-hero-01,
    .ckln-priest-profile-hero,
    .ckln-profile-demo-switcher {
        width: 100%;
    }

    .ckln-priest-profile-hero__top {
        grid-template-columns: 100px minmax(0, 1fr) auto;
        column-gap: 16px;
        min-height: 116px;
    }

    .ckln-priest-profile-hero__avatar-wrap,
    .ckln-priest-profile-hero__avatar {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 560px) {
    .ckln-profile-demo-switcher {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .ckln-profile-demo-switcher button {
        min-height: 36px;
        padding: 9px 10px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ckln-priest-profile-hero__top {
        grid-template-columns: 72px minmax(0, 1fr) 22px;
        grid-template-rows: auto auto auto auto;
        column-gap: 12px;

        min-height: auto;
    }

    .ckln-priest-profile-hero__avatar-wrap {
        grid-column: 1 / 2;
        grid-row: 1 / 4;

        width: 72px;
        height: 72px;
    }

    .ckln-priest-profile-hero__avatar {
        width: 72px;
        height: 72px;
    }

    .ckln-priest-profile-hero__info {
        display: contents;
    }

    .ckln-priest-profile-hero__name-row {
        grid-column: 2 / 3;
        grid-row: 1 / 2;

        height: auto;
    }

    .ckln-priest-profile-hero__name {
        font-size: 15px;
        line-height: 19px;
    }

    .ckln-priest-profile-hero__verified {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
    }

    .ckln-priest-profile-hero__verified svg {
        width: 16px;
        height: 16px;
    }

    .ckln-priest-profile-hero__username {
        grid-column: 2 / 3;
        grid-row: 2 / 3;

        height: auto;
        margin-top: 3px;

        font-size: 14px;
        line-height: 17px;
    }

    .ckln-priest-profile-hero__stats {
        grid-column: 1 / -1;
        grid-row: 3 / 4;

        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: clamp(8px, 3.2vw, 16px);

        width: 100%;
        max-width: 100%;
        margin-top: 14px;

        overflow: hidden;
    }

    .ckln-priest-profile-hero__stat {
        flex: 0 1 auto;

        min-width: 0;
        height: auto;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: clamp(12px, 3.55vw, 14px);
        line-height: 20px;
    }

    .ckln-priest-profile-hero__menu-wrap {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    .ckln-priest-profile-hero__before-follow,
    .ckln-priest-profile-hero__after-follow {
        grid-column: 1 / -1;
        grid-row: 4 / 5;

        width: 100%;
        margin-top: 22px;
    }

    .ckln-priest-profile-hero__after-follow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ckln-priest-profile-hero__follow,
    .ckln-priest-profile-hero__secondary-btn {
        min-height: 38px;
        padding: 12px 20px;
        border-radius: 10px;
    }

    .ckln-priest-profile-hero__follow span,
    .ckln-priest-profile-hero__secondary-btn span {
        font-size: 14px;
        line-height: 100%;
    }

    .ckln-priest-profile-hero__actions--before,
    .ckln-priest-profile-hero__actions--after,
    .ckln-priest-profile-hero[data-profile-mode="priest-followed"] .ckln-priest-profile-hero__actions--after {
        grid-template-columns: 1fr;
        gap: 12px;

        margin-top: 25px;
    }

    .ckln-priest-profile-hero__card,
    .ckln-priest-profile-hero__card--compact {
        min-height: 58px;
        grid-template-columns: 45px minmax(0, 1fr) 14px;
        column-gap: 10px;
        padding: 6px 10px;

        border-radius: 15px;
    }

    .ckln-priest-profile-hero__card-icon {
        width: 45px;
        height: 45px;
    }

    .ckln-priest-profile-hero__card-icon svg {
        width: 24px;
        height: 24px;
    }

    .ckln-priest-profile-hero__card-title {
        height: 17px;

        font-size: 14px;
        line-height: 17px;
    }

    .ckln-priest-profile-hero__card-text,
    .ckln-priest-profile-hero__card--compact .ckln-priest-profile-hero__card-text {
        height: 16px;
        margin-top: 5px;

        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 12px;
        line-height: 16px;
    }

    .ckln-priest-profile-hero__card-arrow {
        width: 14px;
        height: 14px;
    }

    .ckln-priest-profile-hero__card-arrow svg {
        width: 14px;
        height: 14px;
    }

    .ckln-priest-profile-hero__menu {
        right: 0;

        min-width: 180px;
        max-width: calc(100vw - 30px);
    }
}

@media (max-width: 360px) {
    .ckln-profile-demo-switcher {
        grid-template-columns: 1fr;
    }

    .ckln-priest-profile-hero__top {
        grid-template-columns: 64px minmax(0, 1fr) 22px;
        column-gap: 10px;
    }

    .ckln-priest-profile-hero__avatar-wrap,
    .ckln-priest-profile-hero__avatar {
        width: 64px;
        height: 64px;
    }

    .ckln-priest-profile-hero__name {
        font-size: 14px;
        line-height: 18px;
    }

    .ckln-priest-profile-hero__username {
        font-size: 13px;
    }

    .ckln-priest-profile-hero__stats {
        gap: 8px;
    }

    .ckln-priest-profile-hero__stat {
        font-size: 12px;
        line-height: 18px;
    }

    .ckln-priest-profile-hero__after-follow {
        grid-template-columns: 1fr;
    }
}
.ckln-priest-profile-hero__stats {
    grid-column: 2 / 3;
    grid-row: 3 / 4;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(6px, 2.2vw, 10px);

    width: 100%;
    max-width: 100%;
    margin-top: 10px;

    overflow: hidden;
}

.ckln-priest-profile-hero__stat {
    flex: 0 1 auto;

    min-width: 0;
    height: auto;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: clamp(11px, 3.05vw, 13px);
    line-height: 18px;
}
/* =========================================================
   PROFILE HERO TABS
========================================================= */

.ckln-priest-profile-hero__tabs {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 18px;

    width: 100%;
    max-width: 100%;

    margin-top: 20px;
}

.ckln-priest-profile-hero__tab {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    min-width: 0;
    max-width: 100%;
    height: 27px;
    padding: 0 4px 7px;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: #000000;
    white-space: nowrap;
    cursor: pointer;

    transition:
        color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}

.ckln-priest-profile-hero__tab::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 0;
    height: 0;

    border-bottom: 2px solid transparent;

    transform: translateX(-50%);

    transition:
        width 0.18s ease,
        border-color 0.18s ease;
}

.ckln-priest-profile-hero__tab.is-active {
    color: var(--ck-profile-accent);
}

.ckln-priest-profile-hero__tab.is-active::after {
    width: calc(100% + 8px);
    border-bottom-color: var(--ck-profile-accent);
}

.ckln-priest-profile-hero__tab:hover {
    color: var(--ck-profile-accent);
}

.ckln-priest-profile-hero__tab:active {
    transform: scale(0.98);
}

.ckln-priest-profile-hero[data-profile-mode="own"] .ckln-priest-profile-hero__tabs,
.ckln-priest-profile-hero[data-profile-mode="user-unfollowed"] .ckln-priest-profile-hero__tabs,
.ckln-priest-profile-hero[data-profile-mode="user-followed"] .ckln-priest-profile-hero__tabs {
    margin-top: 20px;
}

.ckln-priest-profile-hero__actions + .ckln-priest-profile-hero__tabs {
    margin-top: 20px;
}

@media (max-width: 560px) {
    .ckln-priest-profile-hero__tabs {
        gap: 18px;
        margin-top: 10px;
    }

    .ckln-priest-profile-hero[data-profile-mode="own"] .ckln-priest-profile-hero__tabs,
    .ckln-priest-profile-hero[data-profile-mode="user-unfollowed"] .ckln-priest-profile-hero__tabs,
    .ckln-priest-profile-hero[data-profile-mode="user-followed"] .ckln-priest-profile-hero__tabs {
        margin-top: 10px;
    }

    .ckln-priest-profile-hero__actions + .ckln-priest-profile-hero__tabs {
        margin-top: 10px;
    }
}

/* ===== ELEMENT: ckln-user-profile-header-01 | User Profile Header ===== */
/* =========================================================
   CKLN USER PROFILE HEADER 01
   Desktop + Mobile corrected layout
========================================================= */

#ckln-user-profile-header-01,
.ckln-user-profile-header {
    width: 680px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
}

.ckln-user-profile-header *,
.ckln-user-profile-header *::before,
.ckln-user-profile-header *::after {
    box-sizing: border-box;
}

/* =========================================================
   DESKTOP
   Avatar: 125x125
   Content starts 150px from left
========================================================= */

.ckln-user-profile-header__main {
    display: grid;
    grid-template-columns: 125px 260px;
    grid-template-rows: auto auto;
    column-gap: 25px;
    row-gap: 0;

    width: 100%;
    min-height: 125px;
}

.ckln-user-profile-header__avatar {
    grid-column: 1;
    grid-row: 1 / 3;

    display: block;

    width: 125px;
    height: 125px;

    object-fit: cover;
    border-radius: 90px;
}

.ckln-user-profile-header__info {
    grid-column: 2;
    grid-row: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 260px;
    min-width: 0;
    padding-top: 0;
}

.ckln-user-profile-header__name {
    display: block;

    width: 260px;
    max-width: 260px;
    height: 22px;
    margin: 0;
    padding: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;

    color: #1F1F1F;
}

.ckln-user-profile-header__username {
    display: block;

    width: 260px;
    max-width: 260px;
    height: 17px;
    margin-top: 3px;
    padding: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    color: rgba(31, 31, 31, 0.7);
}

.ckln-user-profile-header__side {
    grid-column: 2;
    grid-row: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: 260px;
    padding-top: 10px;
}

.ckln-user-profile-header__stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;

    width: 260px;
    height: 20px;
    margin: 0 0 15px;
    padding: 0;
}

.ckln-user-profile-header__stat {
    display: block;

    width: auto;
    height: 20px;
    margin: 0;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    color: #1F1F1F;
    white-space: nowrap;
}

.ckln-user-profile-header__stat strong {
    font-weight: 500;
}

/* =========================================================
   FOLLOW BUTTON
========================================================= */

.ckln-user-profile-header__follow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: 260px;
    height: 38px;
    padding: 12px 25px;
    gap: 10px;

    background: var(--ck-color-accent, #45A4E1);
    border: none;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(114, 200, 255, 0.8);

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;

    color: #FFFFFF;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-user-profile-header__follow:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 88%, black);
    transform: translateY(-1px);
}

.ckln-user-profile-header__follow:active {
    transform: translateY(0);
}

.ckln-user-profile-header__follow-text {
    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: 14px;
    margin: 0;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;

    color: currentColor;
    white-space: nowrap;
}

/* Following state */

.ckln-user-profile-header__follow.is-following {
    background: #F9FAFB;
    border: 1px solid #F1F5F9;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 12px;

    color: #1F1F1F;
}

.ckln-user-profile-header__follow.is-following:hover {
    background: #F1F5F9;
    border-color: #DEE5EE;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
}

/* =========================================================
   ALL POSTS TITLE
========================================================= */

.ckln-user-profile-header__tabs {
    width: 100%;
    margin-top: 25px;
}

.ckln-user-profile-header__tab-title {
    display: block;

    width: auto;
    height: 20px;
    margin: 0;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;

    color: #1F1F1F;
}

/* =========================================================
   MOBILE
   Exact structure:
   avatar 80x80 left
   text/statistics right
   button full width below
========================================================= */

@media (max-width: 768px) {
    #ckln-user-profile-header-01,
    .ckln-user-profile-header {
        width: 100%;
        max-width: 390px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .ckln-user-profile-header__main {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 10px;
        row-gap: 0;

        width: 100%;
        min-height: 133px;
    }

    .ckln-user-profile-header__avatar {
        grid-column: 1;
        grid-row: 1 / 3;

        width: 80px;
        height: 80px;

        object-fit: cover;
        border-radius: 90px;
    }

    .ckln-user-profile-header__info {
        grid-column: 2;
        grid-row: 1;

        width: 100%;
        min-width: 0;
        padding-top: 4px;
    }

    .ckln-user-profile-header__name {
        width: 100%;
        max-width: 100%;
        height: 22px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 22px;

        color: #1F1F1F;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ckln-user-profile-header__username {
        width: 100%;
        max-width: 100%;
        height: 17px;
        margin-top: 3px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;

        color: rgba(31, 31, 31, 0.7);

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ckln-user-profile-header__side {
        display: contents;
    }

    .ckln-user-profile-header__stats {
        grid-column: 2;
        grid-row: 2;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 15px;

        width: 100%;
        height: 20px;
        margin: 8px 0 0;
        padding: 0;
    }

    .ckln-user-profile-header__stat {
        display: block;

        width: auto;
        height: 20px;
        margin: 0;
        padding: 0;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;

        color: #1F1F1F;
        white-space: nowrap;
    }

    .ckln-user-profile-header__follow {
        grid-column: 1 / -1;
        grid-row: 3;

        width: 100%;
        height: 38px;
        margin-top: 15px;
        padding: 12px 25px;

        border-radius: 10px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 100%;
    }

    .ckln-user-profile-header__follow.is-following {
        background: #F9FAFB;
        border: 1px solid #F1F5F9;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 10px;

        color: #1F1F1F;
    }

    .ckln-user-profile-header__follow-text {
        height: 14px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 100%;

        color: currentColor;
    }

    .ckln-user-profile-header__tabs {
        width: 100%;
        margin-top: 21px;
    }

    .ckln-user-profile-header__tab-title {
        height: 20px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;

        color: #1F1F1F;
    }
}

/* =========================================================
   SMALL MOBILE SAFETY
========================================================= */

@media (max-width: 360px) {
    .ckln-user-profile-header__main {
        grid-template-columns: 76px minmax(0, 1fr);
        column-gap: 9px;
    }

    .ckln-user-profile-header__avatar {
        width: 76px;
        height: 76px;
    }

    .ckln-user-profile-header__stats {
        gap: 10px;
    }

    .ckln-user-profile-header__stat {
        font-size: 13px;
    }
}
/* =========================================================
   CKLN USER PROFILE HEADER — alignment fixes
========================================================= */

/* Desktop: text/stat block centered vertically to avatar */
@media (min-width: 769px) {
    .ckln-user-profile-header__main {
        align-content: center !important;
        align-items: center !important;

        grid-template-columns: 125px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 50px !important;

        min-height: 125px !important;
    }

    .ckln-user-profile-header__avatar {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;

        align-self: center !important;

        width: 125px !important;
        height: 125px !important;
    }

    .ckln-user-profile-header__info {
        grid-column: 2 !important;
        grid-row: 1 !important;

        align-self: end !important;

        width: 360px !important;
        padding-top: 0 !important;
    }

    .ckln-user-profile-header__side {
        grid-column: 2 !important;
        grid-row: 2 !important;

        align-self: start !important;

        width: 360px !important;
        padding-top: 14px !important;
    }

    .ckln-user-profile-header__stats {
        width: 360px !important;
        margin: 0 0 15px 0 !important;

        display: flex !important;
        align-items: center !important;
        gap: 28px !important;
    }

    .ckln-user-profile-header__follow {
        width: 260px !important;
    }
}

/* If this is own profile and follow button is hidden/removed, stats still stay centered nicely */
.ckln-user-profile-header__follow[hidden],
.ckln-user-profile-header__follow.is-hidden,
.ckln-user-profile-header__follow--hidden {
    display: none !important;
}

@media (min-width: 769px) {
    .ckln-user-profile-header__side:has(.ckln-user-profile-header__follow[hidden]),
    .ckln-user-profile-header__side:has(.ckln-user-profile-header__follow.is-hidden),
    .ckln-user-profile-header__side:not(:has(.ckln-user-profile-header__follow)) {
        padding-top: 16px !important;
    }
}

/* Remove ugly underline from followers/following if they are links */
.ckln-user-profile-header__stat,
.ckln-user-profile-header__stat a,
.ckln-user-profile-header__stats a {
    text-decoration: none !important;
}

.ckln-user-profile-header__stat:hover,
.ckln-user-profile-header__stat a:hover,
.ckln-user-profile-header__stats a:hover {
    color: var(--ck-color-accent, #45A4E1) !important;
    text-decoration: none !important;
}

/* All Posts spacing */
.ckln-user-profile-header__tabs {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
}

.ckln-user-profile-header__tab-title {
    margin: 0 !important;
}

/* Mobile: keep compact layout from your design */
@media (max-width: 768px) {
    .ckln-user-profile-header__main {
        grid-template-columns: 80px minmax(0, 1fr) !important;
        column-gap: 10px !important;
        align-items: center !important;
    }

    .ckln-user-profile-header__avatar {
        width: 80px !important;
        height: 80px !important;
        align-self: center !important;
    }

    .ckln-user-profile-header__info {
        padding-top: 0 !important;
        align-self: end !important;
    }

    .ckln-user-profile-header__stats {
        margin-top: 8px !important;
        gap: 15px !important;
    }

    .ckln-user-profile-header__tabs {
        margin-top: 21px !important;
        margin-bottom: 30px !important;
    }
}

/* ===== ELEMENT: ckln-public-profile-header-01 | Public Profile Header ===== */
/* =========================================================
   CKLN PUBLIC PROFILE HEADER 01
========================================================= */

#ckln-public-profile-header-01,
.ckln-public-profile-header {
    width: 360px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #000000;
}

.ckln-public-profile-header *,
.ckln-public-profile-header *::before,
.ckln-public-profile-header *::after {
    box-sizing: border-box;
}

/* =========================================================
   MAIN
========================================================= */

.ckln-public-profile-header__main {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 15px;
    row-gap: 15px;

    width: 100%;
}

.ckln-public-profile-header__avatar {
    grid-column: 1;
    grid-row: 1;

    display: block;

    width: 80px;
    height: 80px;

    object-fit: cover;
    border-radius: 50px;
}

.ckln-public-profile-header__info {
    grid-column: 2;
    grid-row: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    min-width: 0;
    padding-top: 3px;
}

.ckln-public-profile-header__name {
    display: block;

    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;

    color: #000000;
}

.ckln-public-profile-header__username {
    display: block;

    width: 100%;
    height: 17px;
    margin-top: 2px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;

    color: rgba(0, 0, 0, 0.7);
}

.ckln-public-profile-header__stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 100%;
    height: 20px;
    margin-top: 7px;
}

.ckln-public-profile-header__stat {
    display: block;

    width: auto;
    height: 20px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    color: #000000;
    white-space: nowrap;
}

.ckln-public-profile-header__stat strong {
    font-weight: 500;
}

/* =========================================================
   ACTIONS
========================================================= */

.ckln-public-profile-header__actions {
    grid-column: 1 / -1;
    grid-row: 2;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;

    width: 100%;
}

.ckln-public-profile-header__button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 100%;
    height: 38px;
    padding: 12px 25px;

    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;

    white-space: nowrap;
    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-public-profile-header__button span {
    display: block;

    width: auto;
    height: 14px;

    font: inherit;
    line-height: 100%;
    color: currentColor;
}

.ckln-public-profile-header__button--follow {
    background: var(--ck-color-accent, #45A4E1);
    border: none;
    box-shadow: 0px 2px 10px rgba(114, 200, 255, 0.8);

    color: #FFFFFF;
}

.ckln-public-profile-header__button--follow:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 88%, black);
    transform: translateY(-1px);
}

.ckln-public-profile-header__button--follow.is-following {
    background: color-mix(in srgb, var(--ck-color-accent, #45A4E1) 10%, transparent);
    border: 1px solid #DEE5EE;
    box-shadow: none;

    color: var(--ck-color-accent, #45A4E1);
}

.ckln-public-profile-header__button--message {
    background: #F9FAFB;
    border: 1px solid #DEE5EE;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);

    color: #1F1F1F;
}

.ckln-public-profile-header__button--message:hover {
    background: #F1F5F9;
    border-color: #DEE5EE;
    transform: translateY(-1px);
}

.ckln-public-profile-header__button:active {
    transform: scale(0.98);
}

/* =========================================================
   TABS
========================================================= */

.ckln-public-profile-header__tabs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;

    width: 100%;
    height: 20px;
    margin-top: 15px;
}

.ckln-public-profile-header__tab {
    display: block;

    width: auto;
    height: 20px;
    padding: 0;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #000000;
    white-space: nowrap;

    cursor: pointer;

    transition: color 0.2s ease;
}

.ckln-public-profile-header__tab.is-active {
    color: var(--ck-color-accent, #45A4E1);
}

.ckln-public-profile-header__tab:hover {
    color: var(--ck-color-accent, #45A4E1);
}

/* =========================================================
   DESKTOP / WIDER CONTAINERS
========================================================= */

@media (min-width: 769px) {
    #ckln-public-profile-header-01,
    .ckln-public-profile-header {
        width: 680px;
    }

    .ckln-public-profile-header__main {
        grid-template-columns: 80px minmax(0, 265px);
        justify-content: start;
    }

    .ckln-public-profile-header__actions {
        width: 360px;
    }

    .ckln-public-profile-header__tabs {
        margin-top: 15px;
    }
}

/* =========================================================
   SMALL MOBILE SAFETY
========================================================= */

@media (max-width: 360px) {
    #ckln-public-profile-header-01,
    .ckln-public-profile-header {
        width: 100%;
        padding: 0 15px;
    }

    .ckln-public-profile-header__main {
        grid-template-columns: 76px minmax(0, 1fr);
        column-gap: 10px;
    }

    .ckln-public-profile-header__avatar {
        width: 76px;
        height: 76px;
    }

    .ckln-public-profile-header__stats {
        gap: 8px;
    }

    .ckln-public-profile-header__stat {
        font-size: 13px;
    }

    .ckln-public-profile-header__tabs {
        gap: 20px;
    }
}

/* ===== ELEMENT: ckln-user-search-01 | User Search ===== */
/* =========================================================
   CKLN USER SEARCH 01
========================================================= */

#ckln-user-search-01,
.ckln-user-search {
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    width: 650px;
    max-width: 100%;
    height: 38px;
    padding: 10px 20px;

    background: #FFFFFF;
    border: 1px solid #DEE5EE;
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.ckln-user-search *,
.ckln-user-search *::before,
.ckln-user-search *::after {
    box-sizing: border-box;
}

.ckln-user-search__icon {
    display: block;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    color: rgba(31, 31, 31, 0.5);

    transition: color 0.2s ease;
}

.ckln-user-search__input {
    display: block;

    width: 100%;
    min-width: 0;
    height: 17px;
    padding: 0;
    margin: 0;

    background: transparent;
    border: none;
    outline: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: #1F1F1F;

    appearance: none;
    -webkit-appearance: none;
}

.ckln-user-search__input::placeholder {
    color: rgba(31, 31, 31, 0.5);
    opacity: 1;
}

.ckln-user-search__input::-webkit-search-decoration,
.ckln-user-search__input::-webkit-search-cancel-button,
.ckln-user-search__input::-webkit-search-results-button,
.ckln-user-search__input::-webkit-search-results-decoration {
    display: none;
}

.ckln-user-search:focus-within {
    border-color: var(--ck-color-accent, #45A4E1);
    box-shadow: 0px 0px 0px 3px color-mix(in srgb, var(--ck-color-accent, #45A4E1) 12%, transparent);
}

.ckln-user-search:focus-within .ckln-user-search__icon {
    color: var(--ck-color-accent, #45A4E1);
}

/* Responsive */

@media (max-width: 768px) {
    #ckln-user-search-01,
    .ckln-user-search {
        width: 100%;
        height: 38px;
        padding: 10px 15px;
    }
}

/* ===== ELEMENT: ckln-settings-links-card-01 | Settings Links Card ===== */
/* =========================================================
   CKLN SETTINGS LINKS CARD 01
========================================================= */

#ckln-settings-links-card-01,
.ckln-settings-links-card {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    width: 360px;
    max-width: 100%;
    height: 105px;
    padding: 0;

    background: transparent;
    border: 1px solid #EEEEEE;
    border-radius: 15px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    overflow: hidden;
}

.ckln-settings-links-card *,
.ckln-settings-links-card *::before,
.ckln-settings-links-card *::after {
    box-sizing: border-box;
}

.ckln-settings-links-card__item {
    display: flex;
    flex-direction: row;
    align-items: center;

    width: 100%;
    height: 52px;
    padding: 11px 14px;

    background: transparent;
    color: #1F1F1F;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.ckln-settings-links-card__item + .ckln-settings-links-card__item {
    border-top: 1px solid rgba(238, 238, 238, 0.7);
}

.ckln-settings-links-card__item:hover {
    background: rgba(69, 164, 225, 0.04);
}

.ckln-settings-links-card__icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 30px;
    height: 30px;
    flex: 0 0 30px;

    border-radius: 8px;
}

.ckln-settings-links-card__icon-wrap--notifications {
    background: linear-gradient(225deg, #EF700E 0%, #FF9B4E 100%);
}

.ckln-settings-links-card__icon-wrap--language {
    background: linear-gradient(225deg, #0F47F1 0%, #406BEC 100%);
}

.ckln-settings-links-card__icon {
    display: block;

    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.ckln-settings-links-card__content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    min-width: 0;
    height: 18px;
    margin-left: 20px;
    flex: 1 1 auto;
}

.ckln-settings-links-card__title {
    display: block;

    width: auto;
    height: 17px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: #1F1F1F;
    white-space: nowrap;
}

.ckln-settings-links-card__badge {
    display: flex;
    justify-content: center;
    align-items: center;

    min-width: 18px;
    width: auto;
    height: 18px;
    padding: 2px 6px 3px;

    background: #DC2727;
    border-radius: 9999px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    line-height: 15px;

    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
}

.ckln-settings-links-card__badge:empty,
.ckln-settings-links-card__badge.is-hidden {
    display: none;
}

.ckln-settings-links-card__arrow {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 15px;
    height: 15px;
    flex: 0 0 15px;

    color: #0C0600;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-settings-links-card__arrow svg {
    display: block;
    width: 15px;
    height: 15px;
}

.ckln-settings-links-card__item:hover .ckln-settings-links-card__arrow {
    color: var(--ck-color-accent, #45A4E1);
    transform: translateX(2px);
}

/* Responsive */

@media (max-width: 768px) {
    #ckln-settings-links-card-01,
    .ckln-settings-links-card {
        width: 360px;
        max-width: calc(100vw - 30px);
        height: 105px;
    }
}

@media (max-width: 360px) {
    .ckln-settings-links-card__content {
        margin-left: 14px;
    }
}

/* ===== ELEMENT: ckln-language-screen-01 | Language Screen ===== */
/* =========================================================
   CKLN LANGUAGE SCREEN 01
========================================================= */

#ckln-language-screen-01,
.ckln-language-screen {
    width: 390px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
}

.ckln-language-screen *,
.ckln-language-screen *::before,
.ckln-language-screen *::after {
    box-sizing: border-box;
}

/* Header */

.ckln-language-screen__header {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 20px;

    width: 100%;
    height: 20px;
    margin-top: 70px;
    padding: 0 15px;
}

.ckln-language-screen__back {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;
    height: 20px;
    padding: 0;

    background: transparent;
    border: none;

    color: #0C0600;
    cursor: pointer;
}

.ckln-language-screen__back svg {
    display: block;
    width: 20px;
    height: 20px;
}

.ckln-language-screen__title {
    display: flex;
    align-items: center;

    width: auto;
    height: 20px;
    margin: 0;
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;

    color: #1F1F1F;
}

/* List */

.ckln-language-screen__list {
    display: flex;
    flex-direction: column;

    width: 100%;
    margin-top: 28px;
    padding: 0 15px;
}

.ckln-language-screen__item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    width: 100%;
    height: 47px;
    padding: 0 5px;

    background: transparent;
    border: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;
    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.ckln-language-screen__item:hover {
    background: rgba(69, 164, 225, 0.04);
}

.ckln-language-screen__label {
    display: flex;
    align-items: center;

    width: auto;
    height: 17px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;

    color: #1F1F1F;
    white-space: nowrap;
}

.ckln-language-screen__radio {
    position: relative;

    display: block;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    border: 1px solid rgba(31, 31, 31, 0.8);
    border-radius: 50%;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease;
}

.ckln-language-screen__radio::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    display: block;

    width: 11px;
    height: 11px;

    background: var(--ck-color-accent, #45A4E1);
    border-radius: 50%;

    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
}

.ckln-language-screen__item.is-active .ckln-language-screen__radio {
    border-color: var(--ck-color-accent, #45A4E1);
}

.ckln-language-screen__item.is-active .ckln-language-screen__radio::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Responsive */

@media (max-width: 768px) {
    #ckln-language-screen-01,
    .ckln-language-screen {
        width: 390px;
        max-width: 100%;
    }
}

@media (max-width: 390px) {
    .ckln-language-screen__header {
        gap: 20px;
    }

    .ckln-language-screen__list {
        padding: 0 15px;
    }
}

/* ===== ELEMENT: ckln-chat-file-message-01 | Chat File Message ===== */
/* =========================================================
   CKLN CHAT FILE MESSAGE 01
========================================================= */

#ckln-chat-file-message-01,
.ckln-chat-file-message {
    box-sizing: border-box;

    width: 390px;
    max-width: 100%;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: #1F1F1F;

    --ck-file-accent: var(--ck-color-accent, #45A4E1);
}

.ckln-chat-file-message *,
.ckln-chat-file-message *::before,
.ckln-chat-file-message *::after {
    box-sizing: border-box;
}

.ckln-chat-file-message__bubble {
    position: relative;

    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 36px;
    align-items: center;
    column-gap: 10px;

    width: 300px;
    height: 54px;
    margin-left: 80px;
    padding: 7px 10px 7px 7px;

    background: color-mix(in srgb, var(--ck-file-accent) 18%, #FFFFFF);
    border: none;
    border-radius: 15px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    text-align: left;

    color: #1F1F1F;
    cursor: pointer;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

.ckln-chat-file-message__bubble:hover {
    background: color-mix(in srgb, var(--ck-file-accent) 22%, #FFFFFF);
}

.ckln-chat-file-message__bubble:active {
    transform: scale(0.99);
}

.ckln-chat-file-message__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    background: var(--ck-file-accent);
    border-radius: 30px;
}

.ckln-chat-file-message__icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

.ckln-chat-file-message__content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    height: 40px;
}

.ckln-chat-file-message__name {
    display: block;

    max-width: 100%;
    height: 18px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;

    color: #1F1F1F;
}

.ckln-chat-file-message__meta {
    display: block;

    max-width: 100%;
    height: 14px;
    margin-top: 4px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;

    color: #1F1F1F;
}

.ckln-chat-file-message__time {
    align-self: end;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 36px;
    height: 15px;
    margin-bottom: 1px;

    overflow: hidden;
    white-space: nowrap;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-weight: 500;
    font-size: 10px;
    line-height: 15px;

    text-align: right;
    text-transform: uppercase;

    color: #6B7280;
}

/* Mobile safety */

@media (max-width: 390px) {
    #ckln-chat-file-message-01,
    .ckln-chat-file-message {
        width: 100%;
    }

    .ckln-chat-file-message__bubble {
        width: 300px;
        max-width: calc(100% - 90px);
        margin-left: auto;
        margin-right: 10px;
    }
}

/* ===== ELEMENT: ckln-verification-table | Verification Requests Table ===== */
.ckln-verification-table {
    box-sizing: border-box;

    width: 100%;
    max-width: 100%;
    height: 207px;

    background: #FFFFFF;
    border: 1px solid #F1F5F9;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 15px;

    overflow: hidden;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-verification-table *,
.ckln-verification-table *::before,
.ckln-verification-table *::after {
    box-sizing: border-box;
}

.ckln-verification-table__scroll {
    width: 100%;
    height: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.25) transparent;
}

.ckln-verification-table__scroll::-webkit-scrollbar {
    height: 5px;
}

.ckln-verification-table__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.ckln-verification-table__scroll::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.25);
    border-radius: 999px;
}

.ckln-verification-table__table {
    width: 100%;
    min-width: 1180px;
    height: 100%;

    border-collapse: collapse;
    table-layout: auto;
}

.ckln-verification-table__row {
    height: 51px;
}

.ckln-verification-table__head .ckln-verification-table__row {
    height: 50px;
}

.ckln-verification-table__body .ckln-verification-table__row {
    border-top: 1px solid #E2E8F0;
}

.ckln-verification-table__cell {
    padding: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-size: 14px;
    line-height: 20px;
    color: #000000;

    vertical-align: middle;
    text-align: left;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ckln-verification-table__head .ckln-verification-table__cell {
    font-weight: 500;
}

.ckln-verification-table__body .ckln-verification-table__cell {
    font-weight: 400;
}

/* Desktop adaptive columns */
.ckln-verification-table__cell--name {
    width: 17%;
    min-width: 180px;
    padding-left: 30px;
}

.ckln-verification-table__cell--email {
    width: 18%;
    min-width: 210px;
}

.ckln-verification-table__cell--parish {
    width: 28%;
    min-width: 260px;
}

.ckln-verification-table__cell--date {
    width: 14%;
    min-width: 150px;
}

.ckln-verification-table__cell--status {
    width: 15%;
    min-width: 210px;
    text-align: center;
}

.ckln-verification-table__cell--action {
    width: 8%;
    min-width: 150px;
    text-align: center;
    padding-right: 0;
}

.ckln-verification-table__head .ckln-verification-table__cell--action {
    text-align: center;
    padding-right: 0;
}

.ckln-verification-table__body .ckln-verification-table__cell--action {
    text-align: center;
    padding-right: 0;
}

.ckln-verification-table__status {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    height: 25px;
    padding: 5px 12px;

    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;

    white-space: nowrap;
}

.ckln-verification-table__status--confirmed {
    min-width: 116px;

    background: #DCFCE7;
    color: #2E8F52;
}

.ckln-verification-table__status--pending {
    min-width: 167px;

    background: #FEF3C7;
    color: #F8A436;
}

.ckln-verification-table__button {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 107px;
    height: 25px;
    padding: 5px 12px;

    background: #E2E8F0;
    border: none;
    border-radius: 10px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;

    color: #1F1F1F;

    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ckln-verification-table__button:hover {
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 12%, #E2E8F0);
    color: #1F1F1F;
    transform: translateY(-1px);
}

.ckln-verification-table__button:active {
    transform: translateY(0);
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 641px) {
    .ckln-verification-table__cell {
        font-size: 13px;
    }

    .ckln-verification-table__cell--name {
        min-width: 170px;
        padding-left: 20px;
    }

    .ckln-verification-table__cell--email {
        min-width: 190px;
    }

    .ckln-verification-table__cell--parish {
        min-width: 240px;
    }

    .ckln-verification-table__cell--date {
        min-width: 140px;
    }

    .ckln-verification-table__cell--status {
        min-width: 200px;
    }

    .ckln-verification-table__cell--action {
        min-width: 140px;
        padding-right: 0;
        text-align: center;
    }

    .ckln-verification-table__status--pending {
        min-width: 150px;
    }

    .ckln-verification-table__status--confirmed {
        min-width: 108px;
    }

    .ckln-verification-table__button {
        width: 100px;
    }
}

/* Mobile horizontal swipe */
@media (max-width: 640px) {
    .ckln-verification-table {
        width: 100%;
        max-width: 100%;
        height: 207px;

        overflow: hidden;
        border-radius: 15px;
    }

    .ckln-verification-table__scroll {
        width: 100%;
        max-width: 100%;

        overflow-x: auto;
        overflow-y: hidden;
    }

    .ckln-verification-table__table {
        width: 1180px;
        min-width: 1180px;
        table-layout: auto;
    }

    .ckln-verification-table__cell--name {
        width: 180px;
        min-width: 180px;
        padding-left: 30px;
    }

    .ckln-verification-table__cell--email {
        width: 210px;
        min-width: 210px;
    }

    .ckln-verification-table__cell--parish {
        width: 260px;
        min-width: 260px;
    }

    .ckln-verification-table__cell--date {
        width: 150px;
        min-width: 150px;
    }

    .ckln-verification-table__cell--status {
        width: 210px;
        min-width: 210px;
        text-align: center;
    }

    .ckln-verification-table__cell--action {
        width: 170px;
        min-width: 170px;
        padding-right: 0;
        text-align: center;
    }

    .ckln-verification-table__head .ckln-verification-table__cell--action,
    .ckln-verification-table__body .ckln-verification-table__cell--action {
        text-align: center;
        padding-right: 0;
    }
}

/* ===== ELEMENT: ckln-tabs-count | Tabs With Count Badges ===== */
.ckln-tabs-count {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;

    width: max-content;
    max-width: 100%;
    min-height: 22px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-tabs-count *,
.ckln-tabs-count *::before,
.ckln-tabs-count *::after {
    box-sizing: border-box;
}

.ckln-tabs-count__item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;

    padding: 0;
    margin: 0;

    background: transparent;
    border: none;
    outline: none;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    color: var(--ck-color-text-strong, #000000);

    cursor: pointer;
    transition: color 0.25s ease;
}

.ckln-tabs-count__text {
    display: flex;
    align-items: center;

    min-height: 20px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;

    color: currentColor;
}

.ckln-tabs-count__badge {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 10px;
    height: 19px;
    padding: 2px;

    border-radius: 9999px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    line-height: 15px;

    color: var(--ck-color-accent, #FF8000);
    background: transparent;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        padding 0.25s ease,
        min-width 0.25s ease;
}

.ckln-tabs-count__item.is-active {
    color: var(--ck-color-accent, #FF8000);
}

.ckln-tabs-count__item.is-active .ckln-tabs-count__badge {
    min-width: 22px;
    padding: 2px 8px;

    color: var(--ck-color-accent, #FF8000);
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 10%, transparent);
}

.ckln-tabs-count__item:hover {
    color: var(--ck-color-accent, #FF8000);
}

.ckln-tabs-count__item:focus-visible {
    color: var(--ck-color-accent, #FF8000);
}

.ckln-tabs-count__item:disabled {
    color: var(--ck-color-muted, #919396);
    cursor: not-allowed;
}

.ckln-tabs-count__item:disabled .ckln-tabs-count__badge {
    color: var(--ck-color-muted, #919396);
    background: transparent;
}

/* Mobile / narrow containers */
@media (max-width: 640px) {
    .ckln-tabs-count {
        width: 100%;
        overflow-x: auto;
        gap: 16px;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ckln-tabs-count::-webkit-scrollbar {
        display: none;
    }

    .ckln-tabs-count__item {
        flex: 0 0 auto;
    }
}

/* ===== ELEMENT: ckln-upload-ordination | Upload Area Ordination Document ===== */
.ckln-upload-area {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;

    width: 515px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
}

.ckln-upload-area *,
.ckln-upload-area *::before,
.ckln-upload-area *::after {
    box-sizing: border-box;
}

.ckln-upload-area__label {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 18px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;

    color: var(--ck-color-text, #28313E);
}

.ckln-upload-area__body {
    width: 100%;
}

.ckln-upload-area__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ckln-upload-area__drop {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 184px;
    padding: 30px 48px;

    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 5%, transparent);
    border: 2px dashed color-mix(in srgb, var(--ck-color-accent, #FF8000) 30%, transparent);
    border-radius: 15px;

    cursor: pointer;
    overflow: hidden;

    transition:
        border-color 0.25s ease,
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.ckln-upload-area__drop:hover,
.ckln-upload-area.is-dragover .ckln-upload-area__drop {
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 8%, transparent);
    border-color: color-mix(in srgb, var(--ck-color-accent, #FF8000) 55%, transparent);
    box-shadow: 0px 2px 12px color-mix(in srgb, var(--ck-color-accent, #FF8000) 18%, transparent);
}

.ckln-upload-area__desktop-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.ckln-upload-area__icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 64px;
    height: 64px;
    margin-bottom: 16px;

    color: var(--ck-color-accent, #FF8000);
    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 20%, transparent);
    border-radius: 9999px;
}

.ckln-upload-area__icon {
    display: block;
    flex: 0 0 auto;
    color: var(--ck-color-accent, #FF8000);
}

.ckln-upload-area__title {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 20px;
    margin-bottom: 0;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;

    color: var(--ck-color-text, #28313E);
}

.ckln-upload-area__hint {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 20px;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    text-align: center;

    color: var(--ck-color-muted, #919396);
}

.ckln-upload-area__mobile-content {
    display: none;
}

.ckln-upload-area__preview {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: none;
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.ckln-upload-area__filebar {
    display: none;
    flex-direction: row;
    align-items: center;

    width: 100%;
    height: 38px;
    padding: 10px 10px 10px 15px;
    gap: 10px;

    background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--ck-color-accent, #FF8000) 15%, transparent);
    border-radius: 10px;
}

.ckln-upload-area__filename {
    display: block;

    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: var(--ck-font-base, 'Montserrat', sans-serif);
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;

    color: var(--ck-color-text, #28313E);
}

/* Image uploaded: desktop preview fills the dashed upload area */
.ckln-upload-area.is-image-uploaded .ckln-upload-area__preview {
    display: block;
}

.ckln-upload-area.is-image-uploaded .ckln-upload-area__desktop-content {
    opacity: 0;
    pointer-events: none;
}

/* Non-image file uploaded: replace upload field with compact file bar */
.ckln-upload-area.is-file-uploaded:not(.is-image-uploaded) .ckln-upload-area__drop {
    display: none;
}

.ckln-upload-area.is-file-uploaded:not(.is-image-uploaded) .ckln-upload-area__filebar {
    display: flex;
}

/* Mobile */
@media (max-width: 640px) {
    .ckln-upload-area {
        width: 320px;
        gap: 3px;
    }

    .ckln-upload-area__label {
        min-height: 20px;
        font-size: 12px;
        line-height: 20px;
    }

    .ckln-upload-area__drop {
        flex-direction: row;
        justify-content: center;
        align-items: center;

        height: 38px;
        padding: 10px 10px 10px 15px;
        gap: 10px;

        background: color-mix(in srgb, var(--ck-color-accent, #FF8000) 5%, transparent);
        border: 1px solid color-mix(in srgb, var(--ck-color-accent, #FF8000) 15%, transparent);
        border-radius: 10px;
    }

    .ckln-upload-area__desktop-content,
    .ckln-upload-area__preview {
        display: none !important;
    }

    .ckln-upload-area__mobile-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .ckln-upload-area__mobile-text {
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 20px;

        font-family: var(--ck-font-base, 'Montserrat', sans-serif);
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        text-align: center;

        color: var(--ck-color-text, #28313E);
    }

    .ckln-upload-area.is-file-uploaded .ckln-upload-area__drop,
    .ckln-upload-area.is-image-uploaded .ckln-upload-area__drop {
        display: none;
    }

    .ckln-upload-area.is-file-uploaded .ckln-upload-area__filebar,
    .ckln-upload-area.is-image-uploaded .ckln-upload-area__filebar {
        display: flex;
    }
}