/* Strizh Theme Studio custom CSS */

.strizh-root, .strizh-overlay-root, .strizh-theme-preview {
  --strizh-primary: #0ea5e9;
  --strizh-accent: #22c55e;
  --strizh-surface: #ffffff;
  --strizh-text: #0f172a;
  --strizh-muted: #64748b;
  --strizh-sms-input-focus-border: #0f172a;
  --strizh-sms-input-focus-shadow: 0 0 0 2px rgba(15, 23, 42, 0.12);
  --strizh-sms-group-focus-border: var(--strizh-sms-input-focus-border);
  --strizh-sms-group-focus-shadow: var(--strizh-sms-input-focus-shadow);
  --strizh-border-radius: 12px;
  --strizh-modal-radius: 16px;
  --strizh-input-radius: 12px;
  --strizh-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  --strizh-gap: 16px;
}

.strizh-root,
.strizh-overlay-root {
  color: var(--strizh-text);
}

.strizh-root .strizh-phone-confirm-wrapper,
.strizh-overlay-root .sl-adopt-sheet {
  background: var(--strizh-surface);
  border-radius: var(--strizh-modal-radius);
  box-shadow: var(--strizh-shadow);
  color: var(--strizh-text);
}

.strizh-root .strizh-phone-confirm-wrapper {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid #e2e8f0;
}

.strizh-root .strizh-phone-confirm-header,
.strizh-overlay-root .strizh-phone-confirm-header {
  margin-bottom: 24px;
}

.strizh-root .strizh-phone-confirm-title,
.strizh-overlay-root .strizh-phone-confirm-title {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--strizh-text);
  font-size: 20px;
  font-weight: 600;
}

.strizh-root .strizh-phone-confirm-title .fa,
.strizh-overlay-root .strizh-phone-confirm-title .fa {
  color: var(--strizh-primary);
}

.strizh-root .strizh-phone-confirm-subtitle,
.strizh-overlay-root .strizh-phone-confirm-subtitle {
  margin: 0 0 8px;
  color: #334155;
  font-size: 15px;
  font-weight: 500;
}

.strizh-root .strizh-phone-confirm-helper,
.strizh-overlay-root .strizh-phone-confirm-helper {
  margin: 0;
  color: var(--strizh-muted);
  font-size: 13px;
  line-height: 1.5;
}

.strizh-root .strizh-phone-confirm-section,
.strizh-overlay-root .strizh-phone-confirm-section {
  margin-bottom: 24px;
}

.strizh-root .strizh-phone-confirm-footer,
.strizh-overlay-root .strizh-phone-confirm-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  color: var(--strizh-muted);
}

.strizh-root .strizh-phone-confirm-snooze,
.strizh-overlay-root .strizh-phone-confirm-snooze {
  margin-bottom: 16px;
}

.strizh-root .strizh-phone-confirm-snooze .sl-adopt-skip-btn,
.strizh-overlay-root .strizh-phone-confirm-snooze .sl-adopt-skip-btn {
  min-width: 200px;
}

.strizh-root .strizh-phone-confirm-footer-note,
.strizh-overlay-root .strizh-phone-confirm-footer-note {
  color: var(--strizh-muted);
  font-size: 13px;
  margin-right: 8px;
}

.strizh-root .strizh-phone-confirm-link,
.strizh-overlay-root .strizh-phone-confirm-link {
  color: var(--strizh-primary);
  font-size: 13px;
  font-weight: 500;
}

.strizh-root .sl-adopt-inline-link,
.strizh-overlay-root .sl-adopt-inline-link {
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  vertical-align: baseline;
}

.strizh-root .sl-input-group,
.strizh-overlay-root .sl-input-group,
.strizh-root .form-control,
.strizh-overlay-root .form-control {
  border-radius: var(--strizh-input-radius);
}

.strizh-root .sl-sms-step-actions,
.strizh-overlay-root .sl-sms-step-actions {
  margin-top: 12px;
}

.strizh-root .sl-sms-step-2-actions,
.strizh-overlay-root .sl-sms-step-2-actions,
.strizh-root .sl-adopt-confirm-actions,
.strizh-overlay-root .sl-adopt-confirm-actions,
.strizh-root .sl-adopt-actions,
.strizh-overlay-root .sl-adopt-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.strizh-root .sl-sms-feedback-container,
.strizh-overlay-root .sl-sms-feedback-container {
  margin-top: 12px;
}

.strizh-root .sl-adopt-confirm,
.strizh-overlay-root .sl-adopt-confirm {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #e5e5e5;
  border-radius: var(--strizh-border-radius);
  background: #fff;
}

.strizh-root .sl-adopt-confirm-title,
.strizh-overlay-root .sl-adopt-confirm-title {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--strizh-text);
}

.strizh-root .sl-adopt-confirm-text,
.strizh-overlay-root .sl-adopt-confirm-text {
  margin-bottom: 10px;
  color: var(--strizh-muted);
}

/* Theme Studio visual lock: colors/radius must stay overrideable from custom CSS. */
.strizh-root .sl-sms-send-btn,
.strizh-root .sl-adopt-btn-primary,
.strizh-overlay-root .sl-sms-send-btn,
.strizh-overlay-root .sl-adopt-btn-primary {
  width: 100%;
  border-radius: var(--strizh-sms-button-radius, var(--sl-sms-radius, var(--strizh-border-radius)));
  background: var(--strizh-sms-button-bg, linear-gradient(45deg, var(--sl-sms-bg-start, var(--strizh-primary)), var(--sl-sms-bg-end, var(--strizh-primary))));
  border-color: var(--strizh-sms-button-border-color, var(--sl-sms-bg-end, var(--strizh-primary)));
  color: var(--strizh-sms-button-text, var(--sl-sms-text-color, #ffffff));
  box-shadow: var(--strizh-sms-button-shadow, var(--sl-sms-shadow, none));
}

.strizh-root .sl-sms-verify-btn,
.strizh-root .sl-adopt-btn-success,
.strizh-overlay-root .sl-sms-verify-btn,
.strizh-overlay-root .sl-adopt-btn-success {
  border-radius: var(--strizh-sms-verify-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, var(--strizh-border-radius))));
  background: var(--strizh-sms-verify-bg, var(--strizh-sms-button-bg, linear-gradient(45deg, var(--sl-sms-bg-start, var(--strizh-accent)), var(--sl-sms-bg-end, var(--strizh-accent)))));
  border-color: var(--strizh-sms-verify-border-color, var(--strizh-sms-button-border-color, var(--sl-sms-bg-end, var(--strizh-accent))));
  color: var(--strizh-sms-verify-text, var(--strizh-sms-button-text, var(--sl-sms-text-color, #ffffff)));
  box-shadow: var(--strizh-sms-verify-shadow, var(--strizh-sms-button-shadow, var(--sl-sms-shadow, none)));
}

.strizh-root .sl-sms-change-number-btn,
.strizh-root .sl-adopt-confirm-back,
.strizh-overlay-root .sl-sms-change-number-btn,
.strizh-overlay-root .sl-adopt-confirm-back {
  border-radius: var(--strizh-border-radius);
}

.strizh-root .sl-auth-modal-content,
.strizh-overlay-root .sl-auth-modal-content {
  background: var(--strizh-surface);
  border-radius: var(--strizh-modal-radius);
  box-shadow: var(--strizh-shadow);
}

.strizh-root .sl-auth-modal-title,
.strizh-overlay-root .sl-auth-modal-title {
  color: var(--strizh-text);
}

.strizh-root .sl-auth-modal-text,
.strizh-overlay-root .sl-auth-modal-text {
  color: var(--strizh-muted);
}

.strizh-root .sl-auth-modal-close,
.strizh-overlay-root .sl-auth-modal-close {
  border-radius: calc(var(--strizh-border-radius) - 2px);
}

.strizh-root .sl-buttons-wrap,
.strizh-overlay-root .sl-buttons-wrap,
.strizh-root .social-login-buttons .buttons,
.strizh-root .social-login-buttons .buttons.clearfix,
.strizh-overlay-root .social-login-buttons .buttons,
.strizh-overlay-root .social-login-buttons .buttons.clearfix {
  gap: var(--strizh-gap);
}

.strizh-root .sl-passkey-login-btn,
.strizh-root .social-button-icon--passkey,
.strizh-overlay-root .sl-passkey-login-btn,
.strizh-overlay-root .social-button-icon--passkey {
  border-radius: var(--strizh-border-radius);
}

.strizh-root .sl-consent-card,
.strizh-overlay-root .sl-consent-card,
.strizh-root .sl-consent-doc-sheet,
.strizh-overlay-root .sl-consent-doc-sheet,
.strizh-overlay-root .sl-upsell-sheet {
  background: var(--strizh-surface);
  border-radius: var(--strizh-modal-radius);
  box-shadow: var(--strizh-shadow);
}

.strizh-root .sl-consent-text,
.strizh-root .sl-consent-doc-title,
.strizh-root .sl-consent-doc-body,
.strizh-overlay-root .sl-consent-text,
.strizh-overlay-root .sl-consent-doc-title,
.strizh-overlay-root .sl-consent-doc-body,
.strizh-overlay-root .sl-upsell-title {
  color: var(--strizh-text);
}

.strizh-root .sl-consent-text a,
.strizh-overlay-root .sl-consent-text a,
.strizh-overlay-root .sl-upsell-icon {
  color: var(--strizh-primary);
}

.strizh-overlay-root .sl-upsell-title,
.strizh-overlay-root .sl-upsell-desc {
  color: var(--strizh-text);
}

.strizh-overlay-root .sl-upsell-desc,
.strizh-overlay-root .sl-upsell-btn-secondary {
  color: var(--strizh-muted);
}

.strizh-overlay-root .sl-upsell-btn-primary {
  background: var(--strizh-primary);
  border-radius: var(--strizh-border-radius);
  color: #ffffff;
}

.strizh-overlay-root .sl-upsell-icon {
  background: rgba(14, 165, 233, 0.12);
}