.cn-cb-fab-stack {
  position: fixed;
  inset-block-end: var(--space-md);
  inset-inline-end: var(--space-md);
  z-index: var(--z-header);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  align-items: flex-end;
}

.cn-cb-fab {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--yellow-500);
  color: var(--ink-950);
  border: 0;
  cursor: pointer;
  box-shadow: var(--glow-accent);
  transition: transform var(--dur-hover) var(--ease-out),
              background var(--dur-hover) var(--ease-out);
}
.cn-cb-fab svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; }
.cn-cb-fab svg path { fill: currentColor; stroke: currentColor; }
.cn-cb-fab:hover { transform: translateY(-2px); }
.cn-cb-fab:active { transform: translateY(0) scale(.97); }

.cn-cb-fab--wa {
  background: var(--surface-high);
  color: var(--yellow-500);
  border: 1px solid var(--line);
  box-shadow: none;
}
.cn-cb-fab--wa:hover { border-color: var(--yellow-500); }

.cn-cb-fab-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--yellow-500);
  animation: cnPulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes cnPulse {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .cn-cb-fab-pulse { animation: none; opacity: 0; } }

.cn-cb-fab[data-label]::before {
  content: attr(data-label);
  position: absolute;
  inset-inline-end: calc(100% + 12px);
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-high);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font: var(--type-caption);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-out),
              transform var(--dur-hover) var(--ease-out);
}
.cn-cb-fab:hover::before { opacity: 1; transform: none; }

@media (max-width: 1079px) {
  .cn-cb-fab-stack {
    inset-inline: 0; inset-block-end: 0;
    flex-direction: row; align-items: stretch; gap: var(--space-2xs);
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(11, 11, 10, .9);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-block-start: 1px solid var(--line-soft);
  }
  .cn-cb-fab {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center;
    gap: var(--space-2xs);
    width: auto; height: 48px;
    border-radius: var(--radius-pill);
    box-shadow: none;
  }
  .cn-cb-fab:hover { transform: none; }
  .cn-cb-fab svg { width: 20px; height: 20px; flex-shrink: 0; }
  .cn-cb-fab[data-label]::before {
    position: static; order: 2;
    padding: 0; border: 0; background: none;
    color: inherit; opacity: 1; transform: none;
    font-family: var(--font-display); font-weight: var(--weight-medium);
    font-size: 15px; letter-spacing: -0.01em;
  }
  .cn-cb-fab-pulse { display: none; }
}



.cn-cb-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  padding: var(--space-md);
  background: rgba(6, 6, 6, .74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: cnFade var(--dur-ui) var(--ease-out) both;
}
.cn-cb-overlay[hidden] { display: none; }

.cn-cb-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: calc(100svh - var(--space-xl));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  animation: cnRise var(--dur-ui) var(--ease-out) both;

  display: flex;
  flex-direction: column;

  scrollbar-width: thin;
  scrollbar-color: var(--paper-a30) transparent;
}
.cn-cb-modal::-webkit-scrollbar { width: 6px; }
.cn-cb-modal::-webkit-scrollbar-track { background: transparent; }
.cn-cb-modal::-webkit-scrollbar-thumb {
  background: var(--paper-a12); border-radius: var(--radius-pill);
}
.cn-cb-modal::-webkit-scrollbar-thumb:hover { background: var(--paper-a30); }

.cn-cb-header { order: 1; }
.cn-cb-tabs   { order: 2; }
.cn-cb-body   { order: 3; }
.cn-cb-footer { order: 4; }

@keyframes cnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cnRise {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-cb-overlay, .cn-cb-modal { animation: none; }
}


.cn-cb-header {
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
}
.cn-cb-brand { display: flex; align-items: center; padding-inline-end: 52px; }
.cn-cb-brand img { height: 40px; width: auto; }

.cn-cb-close {
  position: absolute;
  z-index: 2;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.cn-cb-close:hover { color: var(--yellow-500); border-color: var(--yellow-500); }
.cn-cb-close svg { width: 14px; height: 14px; }

.cn-cb-title {
  display: block;
  margin-block-start: var(--space-2xs);
  font: var(--type-h3);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.cn-cb-title[hidden] { display: none; }


.cn-cb-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 var(--space-lg) var(--space-md);
}
.cn-cb-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: 8px 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out);
}
.cn-cb-tab i { font-size: 14px; }
@media (max-width: 379px) {
  .cn-cb-tab { flex-direction: column; gap: 4px; min-height: 56px; border-radius: var(--radius-sm); font-size: 13px; }
}
.cn-cb-tab:hover { color: var(--text); border-color: var(--line); }
.cn-cb-tab.is-active {
  background: var(--yellow-500);
  border-color: var(--yellow-500);
  color: var(--ink-950);
}


.cn-cb-body { padding: var(--space-md) var(--space-lg) var(--space-lg); border-block-start: 1px solid var(--line-soft); }
.cn-cb-pane { display: none; }
.cn-cb-pane.is-active { display: block; }

.cn-cb-label {
  display: block;
  font: var(--type-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-start: var(--space-md);
  margin-block-end: var(--space-3xs);
}
.cn-cb-form .cn-cb-label:first-of-type { margin-block-start: 0; }

.cn-cb-input {
  width: 100%;
  min-height: 44px;
  padding-block: var(--space-2xs);
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  font: var(--type-body);
  transition: border-color var(--dur-hover) var(--ease-out);
}
.cn-cb-input:focus { outline: none; border-block-end-color: var(--yellow-500); }
.cn-cb-input::placeholder { color: var(--paper-a30); }
.cn-cb-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }

.cn-cb-phone-wrap { display: flex; gap: var(--space-2xs); align-items: flex-end; }
.cn-cb-cc {
  flex: 0 0 96px;
  background: transparent;
  color: var(--text);
  border: 0;
  border-block-end: 1px solid var(--line);
  min-height: 46px;
  font: var(--type-body);
}
.cn-cb-cc option { background: var(--surface-raised); color: var(--text); }
.cn-cb-phone-wrap .cn-cb-input { flex: 1 1 auto; }


.cn-cb-submit {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2xs);
  width: 100%;
  min-height: var(--btn-h);
  margin-block-start: var(--space-md);
  padding-inline: var(--btn-pad-x);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--yellow-500);
  color: var(--ink-950);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--btn-size);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}
.cn-cb-submit:hover:not(:disabled) { background: var(--paper-000); box-shadow: var(--glow-accent); }
.cn-cb-submit:disabled { opacity: .55; cursor: default; }

.cn-cb-spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(11,11,10,.25);
  border-top-color: var(--ink-950);
  border-radius: 50%;
  animation: cnSpin .7s linear infinite;
}
@keyframes cnSpin { to { transform: rotate(360deg); } }


.cn-cb-success { display: block; text-align: center; padding-block: var(--space-lg); }
.cn-cb-success[hidden] { display: none; }
.cn-cb-success-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; margin-inline: auto;
  border-radius: 50%;
  background: var(--yellow-500);
  color: var(--ink-950);
  font-size: 22px;
}
.cn-cb-success-msg {
  margin-block-start: var(--space-md);
  font: var(--type-h3);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.cn-cb-error-banner {
  display: block;
  margin-block-start: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--yellow-500);
  border-radius: var(--radius-sm);
  background: var(--yellow-a15);
  color: var(--text);
  font: var(--type-caption);
}
.cn-cb-error-banner[hidden] { display: none; }


.cn-cb-footer {
  padding: var(--space-md) var(--space-lg);
  border-block-start: 1px solid var(--line-soft);
  font: var(--type-caption);
  color: var(--text-muted);
  text-align: center;
}
.cn-cb-footer a { color: var(--text-muted); }
.cn-cb-footer a:hover { color: var(--yellow-500); }

.cn-cb-fineprint {
  margin-block-start: var(--space-sm);
  font: var(--type-caption);
  color: var(--text-muted);
}
.cn-cb-fineprint a { color: var(--text-muted); text-decoration: underline; }
.cn-cb-fineprint a:hover { color: var(--yellow-500); }

@media (max-width: 640px) {
  .cn-cb-overlay { place-items: end center; padding: var(--space-xl) 0 0; }
  .cn-cb-modal {
    max-width: none;
    max-height: calc(100svh - var(--space-xl));
    border-block-end: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-block-end: env(safe-area-inset-bottom, 0px);
    scrollbar-width: none;
    animation-name: cnSheet;
  }
  .cn-cb-modal::-webkit-scrollbar { display: none; }
  .cn-cb-modal::before {
    content: ""; order: 0; flex-shrink: 0;
    width: 40px; height: 4px; margin: 10px auto 0;
    border-radius: var(--radius-pill); background: var(--paper-a30);
  }
  .cn-cb-header { padding: var(--space-md) var(--space-md) var(--space-sm); }
  .cn-cb-brand img { height: 34px; }
  .cn-cb-close { inset-block-start: 26px; inset-inline-end: var(--space-md); width: 40px; height: 40px; }
  .cn-cb-tabs { padding: 0 var(--space-md) var(--space-md); }
  .cn-cb-body { padding: var(--space-md) var(--space-md) var(--space-lg); }
  .cn-cb-footer { padding: var(--space-sm) var(--space-md); }
}
@keyframes cnSheet { from { transform: translateY(100%); } to { transform: none; } }

.cn-cb-lock { overflow: hidden; }

.cn-cb-submit i { font-size: 16px; }
.cn-cb-footer { font-size: 12px; }

.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-note { display: block; margin-block-start: 6px; font: var(--type-caption); font-size: 11px; color: var(--text-muted); }
.recaptcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.recaptcha-note a:hover { color: var(--yellow-500); }
