/* ====================================
   Onboarding Styles
   ==================================== */

.bg-orange {
  background-color: var(--color-primary) !important;
}

.hover-shadow {
  border: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hover-shadow:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;

  border-color: var(--color-primary) !important;
}

.click-select {
  cursor: pointer;
}

/* Onboarding Brand Overrides */
.suitability-option:checked,
.click-select .form-check-input:checked {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.suitability-option:focus,
.click-select .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb, 109, 40, 217), 0.22) !important;
  border-color: var(--color-primary) !important;
}

.hover-shadow:hover {
  border-color: var(--color-primary) !important;
}

/* Label and helper text contrast */
.text-purple {
  color: var(--color-bs-purple) !important;
}

/* .form-control-loading vive agora em customer.css (fonte única). */

/* Suitability Cards (Investor Profile) */
.suitability-card {
  border: 1px solid var(--color-bs-gray-300);
  border-radius: 12px;
  padding: var(--spacing-sm);
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
  cursor: pointer;
  background-color: var(--color-text-on-brand);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.suitability-card:hover {
  border-color: var(--color-primary);
  background-color: var(--color-warning-soft-peach-3);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.suitability-card.selected {
  background-color: var(--color-warning-soft-peach-3);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.suitability-card .form-check {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  padding-left: 0 !important;
  /* Reset bootstrap padding */
}

.suitability-card--with-link .form-check {
  width: auto;
  flex: 1 1 20rem;
}

.suitability-card--with-link .btn {
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .suitability-card--with-link .form-check,
  .suitability-card--with-link .btn {
    width: 100%;
  }
}

/* Custom Radio Button Styling */
.suitability-card .form-check-input {
  margin-top: 0.25rem;
  margin-left: 0 !important;
  cursor: pointer;
  flex-shrink: 0;
  border-color: var(--color-primary);
  border-width: 2px;
  background-color: transparent;
  width: 1.25em;
  height: 1.25em;
  background-image: none !important;
  /* Remove default SVG */
  position: relative;
}

.suitability-card .form-check-input:checked {
  border: 5px solid var(--color-primary) !important;
  background-color: var(--color-text-on-brand) !important;
}

/* Remove default pseudo element */
.suitability-card .form-check-input:checked::after {
  display: none;
}

/* Ensure label takes full width for clickability logic via JS */
.suitability-card .form-check-label {
  cursor: pointer;
  flex: 1;
}

.suitability-card .option-title {
  display: block;
  font-weight: 500;
  color: var(--color-bs-gray-600);
  /* Softer black (Gray-700) */
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Question Title Styling Override */
.suitability-question h5 {
  font-size: 1rem;
  color: var(--color-bs-gray-700) !important;
  /* Slightly darker than 495057 but not black */
  font-weight: 600 !important;
}

/* Hide default radio if custom look needed, but standard bootstrap radio is fine for now */
.suitability-card.selected .form-check-input:checked {
  border-color: var(--color-primary);
}

.click-select .text-muted,
.click-select .bi {
  color: var(--color-ink-google) !important;
}

.suitability-question:hover .form-check-label,
.click-select:hover label,
.click-select:hover label strong,
.click-select:hover label small,
.click-select:hover .text-muted,
.click-select:hover .bi {
  color: var(--color-bs-gray-600) !important;
}

/* Suitability: sem check verde */
.suitability-option.is-valid,
.click-select .form-check-input.is-valid,
.was-validated .suitability-option:valid,
.was-validated .click-select .form-check-input:valid {
  border-color: var(--color-primary) !important;
  background-image: none !important;
}

/* Fix for disabled/readonly inputs inside form-floating */
.form-floating>.form-control.readonly-label-fix {
  background-color: var(--color-bs-gray-200) !important;
  opacity: 1;
}

.form-floating>.form-control.readonly-label-fix~label {
  background-color: transparent !important;
}

.form-floating>.form-control.readonly-label-fix~label::after {
  background-color: transparent !important;
}

/* ====================================
   Suitability Renewal Modal (Dashboard)
   ==================================== */

#suitabilityRenewalModal .modal-content {
  border: none;
  box-shadow: var(--shadow-xl);
}

#suitabilityRenewalModal .modal-body::-webkit-scrollbar {
  width: 6px;
}

#suitabilityRenewalModal .modal-body::-webkit-scrollbar-track {
  background: transparent;
}

#suitabilityRenewalModal .modal-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

#suitabilityRenewalModal .suitability-card {
  border: 1px solid var(--color-bs-gray-300);
  border-radius: 12px;
  padding: var(--spacing-sm);
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
  cursor: pointer;
  background-color: var(--color-text-on-brand);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

#suitabilityRenewalModal .suitability-card:hover {
  border-color: var(--color-secondary);
  background-color: var(--color-warning-soft-peach-4);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#suitabilityRenewalModal .suitability-card.selected {
  background-color: var(--color-warning-soft-peach-4);
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 1px var(--color-secondary);
}

#suitabilityRenewalModal #btnRenewalSubmit:hover {
  background: var(--gradient-brand-hover) !important;
  box-shadow: none;
}

/* ====================================
   KYC Status Banners
   ==================================== */

.kyc-rejected-banner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--color-danger-soft-100);
  border-bottom: 1px solid var(--color-danger-soft-150);
  border-left: 4px solid var(--color-danger-600);
  font-size: 0.85rem;
  color: var(--color-danger-800);
  flex-shrink: 0;
}

/* Banner GIGANTE FIXO de conta bloqueada para operações (#115). Reusa a paleta de alerta do
   kyc-rejected-banner, porém maior, centralizado e persistente (sem botão de fechar). O
   posicionamento fixo/empurra-conteúdo fica em layout/_sidebar.css (body.has-account-blocked-banner). */
.account-blocked-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem 1.5rem;
  background-color: var(--color-danger-soft-100);
  border-bottom: 2px solid var(--color-danger-600);
  color: var(--color-danger-800);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}

.account-blocked-banner__text {
  line-height: 1.35;
}

.kyc-rejected-banner__icon {
  font-size: 1.05rem;
  color: var(--color-danger-600);
  flex-shrink: 0;
}

.kyc-rejected-banner__text strong {
  font-weight: 700;
}

.kyc-pending-banner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--color-warning-soft-200);
  border-bottom: 1px solid var(--color-warning-soft-150);
  border-left: 4px solid var(--color-warning-amber-600);
  font-size: 0.85rem;
  color: var(--color-warning-amber-900);
  flex-shrink: 0;
}

.kyc-pending-banner__icon {
  font-size: 1.05rem;
  color: var(--color-warning-amber-700);
  flex-shrink: 0;
}

.kyc-pending-banner__text strong {
  font-weight: 700;
}

/* ====================================
   Suitability Profile Tab (Settings)
   ==================================== */

/* Hero Card */
.suit-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-gray-200);
  background: var(--color-text-on-brand);
}

.suit-card__header {
  background: var(--primary-active, var(--color-purple-900));
  padding: 1.25rem var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

/* Cores por perfil de investidor — sincronizadas com o modal do questionário */
.suit-card__header--conservador {
  background: var(--color-success-bs) !important; /* Verde */
}

.suit-card__header--moderado {
  background: var(--color-info-bs) !important; /* Azul */
}

.suit-card__header--arrojado {
  background: var(--color-bs-purple) !important; /* Roxo */
}

.suit-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.suit-card__icon--hero {
  background: rgba(255, 255, 255, 0.15);
}

.suit-card__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.suit-card__badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
}

/* .suit-card__badge--active e --expired vivem agora em customer.css (fonte única). */

.suit-card__body {
  padding: 1.25rem var(--spacing-md);
}

.suit-card__meta {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.suit-card__meta > i {
  color: var(--color-slate-300);
  font-size: 1rem;
  margin-top: 2px;
}

.suit-card__meta-label {
  display: block;
  font-size: 0.7rem;
  color: var(--color-slate-300);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.suit-card__meta-value {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-slate-700);
}

.suit-card__desc {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: 0.75rem var(--spacing-sm);
  background: var(--color-surface-app);
  border-radius: 10px;
  border-left: 3px solid var(--color-primary);
  margin-bottom: var(--spacing-sm);
  font-size: 0.82rem;
  color: var(--color-slate-500);
  line-height: 1.5;
}

.suit-card__desc > i {
  color: var(--color-primary);
  margin-top: 2px;
  flex-shrink: 0;
}

.suit-card__empty-icon {
  font-size: 3rem;
  color: var(--color-primary);
  opacity: 0.4;
  margin-bottom: var(--spacing-xs);
}

/* .suit-card__empty-message vive agora em customer.css (fonte única). */

.suit-card__answers-body {
  background: var(--color-text-on-brand);
}

.suit-answer {
  padding: 0.875rem var(--spacing-sm);
  border: 1px solid var(--color-neutral-200);
  border-radius: 10px;
  background: var(--color-neutral-50);
}

/* .suit-answer__number e .suit-answer__question vivem agora em customer.css (fonte única). */

.suit-answer__selected-icon {
  color: var(--color-gray-400);
  font-size: 0.85rem;
}

.suit-answer__selected-text {
  color: var(--color-gray-600);
  font-size: 0.82rem;
}

/* Responsive */
@media (max-width: 767.98px) {
  .suit-card__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .suit-card__body .col-sm-4.text-sm-end {
    text-align: left !important;
  }

  .suit-card__body .btn {
    width: 100%;
  }
}