/*
 * 4KPLAYBR — Área do assinante
 * Identidade visual baseada no index principal fornecido pelo usuário.
 * Paleta, tipografia e acabamentos alinhados ao site principal.
 */
:root {
  color-scheme: dark;
  --k4p-bg: #08090c;
  --k4p-card: #11141a;
  --k4p-card-2: #0e1116;
  --k4p-muted: #a3a9b4;
  --k4p-text: #f7f8fa;
  --k4p-accent: #f32645;
  --k4p-accent-2: #ff633d;
  --k4p-line: rgba(255,255,255,.09);
  --k4p-ease: cubic-bezier(.2,.75,.25,1);
}

html {
  background: var(--k4p-bg) !important;
  color-scheme: dark;
}

body {
  background:
    radial-gradient(ellipse at 50% -15%, rgba(243,38,69,.10), transparent 42%),
    var(--k4p-bg) !important;
  color: var(--k4p-text) !important;
  font-family: Inter, Arial, sans-serif !important;
  letter-spacing: -.01em;
  line-height: 1.55;
}

/* Cabeçalho no mesmo padrão do menu do site principal */
.k4p-brandbar {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 20;
  padding: 14px 22px;
  background: rgba(8,9,12,.90);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 35px rgba(0,0,0,.16);
  backdrop-filter: blur(16px);
}

.k4p-brand-inner {
  width: min(1160px, 91%);
  min-height: 48px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.k4p-wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  color: #fff !important;
  white-space: nowrap;
}

.k4p-wordmark strong {
  color: #fff !important;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1.7px;
}

.k4p-wordmark span {
  color: var(--k4p-accent) !important;
}

.k4p-brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 13px;
  border-left: 1px solid rgba(255,255,255,.12);
}

.k4p-brand-copy span {
  color: #a3a9b4 !important;
  font-size: 9px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .13em;
}

.k4p-brand-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #aeb5c0 !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
}

.k4p-brand-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74,222,128,.10);
}

/* Títulos e textos */
h1, h2, h3, h4, h5, h6,
.card-title, .modal-title, label, p {
  font-family: Inter, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #f7f8fa !important;
  letter-spacing: -.035em;
  font-weight: 800;
}

p, label, .form-label {
  color: #d5d9e0;
}

.text-muted, .text-secondary, small, .small {
  color: var(--k4p-muted) !important;
}

/* Cartões — acabamento em grafite, igual ao index */
.card, .panel, .modal-content,
[class*="card"]:not(.k4p-brandbar),
[class*="panel"] {
  color: var(--k4p-text) !important;
  background: linear-gradient(155deg, rgba(22,26,34,.98), rgba(13,15,20,.98)) !important;
  border: 1px solid var(--k4p-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 15px 45px rgba(0,0,0,.12);
}

.card-header, .modal-header, .modal-footer {
  color: var(--k4p-text) !important;
  background: rgba(255,255,255,.025) !important;
  border-color: rgba(255,255,255,.07) !important;
  border-radius: 17px 17px 0 0 !important;
}

/* Corrige a faixa interna que aparecia atrás do título de dados */
.card-header *,
.modal-header * {
  background-color: transparent !important;
}

/* Inputs */
.form-control, .form-select,
input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
select, textarea {
  color: #f7f8fa !important;
  background: #0b0d10 !important;
  border: 1px solid #30343d !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-family: Inter, Arial, sans-serif !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: #858b95 !important;
  opacity: 1;
}

.form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus {
  border-color: rgba(243,38,69,.75) !important;
  box-shadow: 0 0 0 3px rgba(243,38,69,.09) !important;
  outline: none !important;
}

/* Botões: degradê oficial vermelho -> laranja */
.btn-primary, .btn-danger,
button[type="submit"], input[type="submit"],
button.btn, a.btn {
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  font-family: Inter, Arial, sans-serif !important;
  font-weight: 800 !important;
  box-shadow: 0 9px 28px rgba(243,38,69,.18) !important;
  background: linear-gradient(115deg, #f32645 0%, #ff593d 100%) !important;
  transition: transform .2s var(--k4p-ease), filter .2s ease, box-shadow .2s ease;
}

.btn-primary:hover, .btn-danger:hover,
button[type="submit"]:hover, input[type="submit"]:hover,
button.btn:hover, a.btn:hover {
  color: #fff !important;
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 13px 34px rgba(243,38,69,.26) !important;
}

.btn-secondary, .btn-default, .btn-outline-secondary {
  color: #e5e7eb !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 11px !important;
}

/* Seleção de planos — substitui o azul padrão por vermelho */
.border-primary,
.border-info,
.btn-outline-primary {
  border-color: rgba(243,38,69,.7) !important;
}

.btn-outline-primary {
  color: #fff !important;
  background: rgba(243,38,69,.08) !important;
}

input[type="radio"] {
  accent-color: var(--k4p-accent) !important;
}

.form-check-input:checked {
  background-color: var(--k4p-accent) !important;
  border-color: var(--k4p-accent) !important;
}

label:has(input[type="radio"]:checked),
.form-check:has(input[type="radio"]:checked),
[class*="plan"]:has(input[type="radio"]:checked) {
  border-color: var(--k4p-accent) !important;
  box-shadow: 0 0 0 1px rgba(243,38,69,.20), 0 18px 45px rgba(243,38,69,.07) !important;
}

/* Alertas e badges */
.alert-success {
  color: #86efac !important;
  background: rgba(74,222,128,.09) !important;
  border: 1px solid rgba(74,222,128,.20) !important;
  border-radius: 12px !important;
}

.alert-danger, .alert-warning {
  border-radius: 12px !important;
}

.badge.bg-primary, .bg-primary {
  background: linear-gradient(115deg, #f32645, #ff593d) !important;
}

a {
  color: #ff7184;
}

a:hover {
  color: #ff9aaa;
}

hr {
  border-color: rgba(255,255,255,.08) !important;
  opacity: 1;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: #f7f8fa;
  --bs-table-border-color: rgba(255,255,255,.08);
}

/* Evita elementos brancos herdados de temas do fornecedor */
.dropdown-menu, .list-group-item {
  color: #f7f8fa !important;
  background: #11141a !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* Mobile */
@media (max-width: 767px) {
  .k4p-brandbar {
    padding: 12px 15px;
  }

  .k4p-brand-inner {
    width: 100%;
    min-height: 42px;
    gap: 9px;
  }

  .k4p-wordmark strong {
    font-size: 22px;
    letter-spacing: -1.5px;
  }

  .k4p-brand-copy {
    padding-left: 9px;
  }

  .k4p-brand-copy span {
    font-size: 8px;
    letter-spacing: .09em;
  }

  .k4p-brand-status {
    font-size: 7px;
    letter-spacing: .04em;
    gap: 6px;
  }

  .card, .panel, .modal-content {
    border-radius: 15px !important;
  }
}

@media (max-width: 390px) {
  .k4p-brand-status {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}