/* ============================================================
   Soma Saúde Benefícios — Tema completo
   Paleta da logo:
     Teal ciano  : #13C2BD  (principal)
     Teal escuro : #0D9E9A
     Laranja     : #F5830A  (CTAs)
     Roxo        : #7B3FC4  (acento)
     Roxo escuro : #2C1654  (sidebar)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Variáveis ─────────────────────────────────────────────── */
:root {
  --ss-teal:        #13C2BD;
  --ss-teal-dk:     #0D9E9A;
  --ss-teal-xdk:    #065a57;
  --ss-teal-lt:     #e0f7f6;
  --ss-orange:      #F5830A;
  --ss-orange-dk:   #d4690a;
  --ss-purple:      #7B3FC4;
  --ss-purple-dk:   #5C2B9E;
  --ss-purple-lt:   #f0e8fc;
  --ss-purple-deep: #2C1654;
  --ss-white:       #ffffff;
  --ss-gray-50:     #f8fafc;
  --ss-gray-100:    #f1f5f9;
  --ss-gray-200:    #e2e8f0;
  --ss-gray-600:    #475569;
  --ss-gray-800:    #1e293b;

  --ss-grad-teal:    linear-gradient(135deg, #13C2BD 0%, #0D9E9A 100%);
  --ss-grad-orange:  linear-gradient(135deg, #F5830A 0%, #d4690a 100%);
  --ss-grad-purple:  linear-gradient(135deg, #7B3FC4 0%, #5C2B9E 100%);
  --ss-grad-hero:    linear-gradient(135deg, #2C1654 0%, #5C2B9E 40%, #13C2BD 100%);
  --ss-grad-sidebar: linear-gradient(180deg, #2C1654 0%, #0D7A76 100%);
  --ss-grad-card:    linear-gradient(145deg, #ffffff 0%, #f0fdfb 100%);

  --ss-shadow-teal:   0 6px 24px rgba(19,194,189,.25);
  --ss-shadow-orange: 0 6px 24px rgba(245,131,10,.30);
  --ss-shadow-purple: 0 6px 24px rgba(123,63,196,.25);
  --ss-shadow-card:   0 4px 20px rgba(0,0,0,.07);
  --ss-shadow-lg:     0 10px 40px rgba(0,0,0,.12);

  --ss-radius-sm: 8px;
  --ss-radius-md: 14px;
  --ss-radius-lg: 20px;
  --ss-radius-xl: 30px;
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  background: var(--ss-gray-50);
  color: var(--ss-gray-800);
  -webkit-font-smoothing: antialiased;
}

/* ── Navbar (base.html) ────────────────────────────────────── */
.navbar {
  background: var(--ss-white) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.07) !important;
  border-bottom: none !important;
  padding: 10px 24px !important;
}
.navbar .navbar-brand img {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
  transition: transform .2s;
}
.navbar .navbar-brand img:hover { transform: scale(1.04); }
.navbar .nav-link {
  color: var(--ss-gray-600) !important;
  font-weight: 500; font-size: .92rem;
  padding: 6px 14px !important;
  border-radius: var(--ss-radius-sm);
  transition: all .2s;
}
.navbar .nav-link:hover { background: var(--ss-teal-lt); color: var(--ss-teal-dk) !important; }

/* ── bg-default (cards, badges, botão buscar) ──────────────── */
.bg-default, .bg-default:focus, .bg-default:hover {
  background: var(--ss-grad-teal) !important;
  border-color: transparent !important;
  color: var(--ss-white) !important;
  box-shadow: var(--ss-shadow-teal) !important;
}

/* ── Botões Bootstrap overrides ────────────────────────────── */
.btn-primary, .btn-primary:focus {
  background: var(--ss-grad-teal) !important;
  border-color: transparent !important;
  color: var(--ss-white) !important;
  font-weight: 600; border-radius: var(--ss-radius-sm);
  box-shadow: var(--ss-shadow-teal); transition: all .25s;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0D9E9A, #065a57) !important;
  transform: translateY(-1px); box-shadow: var(--ss-shadow-teal) !important;
}
.btn-theme, .btn-theme:focus {
  background: var(--ss-grad-orange) !important;
  border-color: transparent !important;
  color: var(--ss-white) !important;
  font-weight: 700; border-radius: var(--ss-radius-sm);
  box-shadow: var(--ss-shadow-orange); transition: all .25s;
}
.btn-theme:hover {
  background: linear-gradient(135deg, #d4690a, #a84f00) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(245,131,10,.4) !important;
}
.btn-outline-primary {
  color: var(--ss-teal) !important;
  border: 2px solid var(--ss-teal) !important;
  font-weight: 600; border-radius: var(--ss-radius-sm); transition: all .2s;
}
.btn-outline-primary:hover {
  background: var(--ss-grad-teal) !important;
  border-color: transparent !important; color: var(--ss-white) !important;
}
.btn-outline-danger { border-radius: var(--ss-radius-sm) !important; font-weight: 500; }

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--ss-grad-card);
  border: 1px solid var(--ss-gray-200) !important;
  border-radius: var(--ss-radius-md) !important;
  box-shadow: var(--ss-shadow-card);
  transition: box-shadow .3s, transform .3s;
  overflow: hidden;
}
.card:hover { box-shadow: var(--ss-shadow-lg); transform: translateY(-3px); }
.card-header { border-bottom: none !important; padding: 16px 20px !important; font-weight: 600; }
.card-header.bg-default {
  background: var(--ss-grad-teal) !important;
  color: var(--ss-white) !important;
  border-radius: var(--ss-radius-md) var(--ss-radius-md) 0 0 !important;
}

/* ── Section clínica (topo do dashboard antigo) ────────────── */
.section-clinica {
  padding: 48px 20px 36px;
  background: var(--ss-grad-hero);
  color: var(--ss-white); text-align: center;
  margin-bottom: 32px;
  border-radius: 0 0 var(--ss-radius-xl) var(--ss-radius-xl);
  box-shadow: var(--ss-shadow-lg);
  position: relative; overflow: hidden;
}
.section-clinica::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; background: rgba(255,255,255,.05); border-radius: 50%;
}
.section-clinica h2 { font-size: 1.8rem; font-weight: 700; color: var(--ss-white); position: relative; z-index: 1; }

/* ── Inputs / Select2 ──────────────────────────────────────── */
.form-control, .form-control:focus {
  border: 1.5px solid var(--ss-gray-200); border-radius: var(--ss-radius-sm);
  box-shadow: none; font-size: .94rem; transition: border-color .2s, box-shadow .2s;
}
.form-control:focus {
  border-color: var(--ss-teal);
  box-shadow: 0 0 0 3px rgba(19,194,189,.14);
}
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--ss-gray-200); border-radius: var(--ss-radius-sm); height: 40px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--single {
  border-color: var(--ss-teal); box-shadow: 0 0 0 3px rgba(19,194,189,.14);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 12px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ss-grad-teal); }
.select2-dropdown { border: 1.5px solid var(--ss-gray-200); border-radius: var(--ss-radius-sm); box-shadow: var(--ss-shadow-lg); }

/* ── Botão Buscar (dashboard antigo) ───────────────────────── */
#id_buscar_button {
  background: var(--ss-grad-orange) !important;
  border-color: transparent !important; color: var(--ss-white) !important;
  font-weight: 700; border-radius: var(--ss-radius-sm); padding: 10px 28px;
  box-shadow: var(--ss-shadow-orange); transition: all .25s;
}
#id_buscar_button:hover:not(:disabled) {
  background: linear-gradient(135deg, #d4690a, #a84f00) !important;
  transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,131,10,.4) !important;
}

/* ── Horários (calendário) ─────────────────────────────────── */
button[onclick*="agendar"] {
  background: var(--ss-teal-lt) !important;
  color: var(--ss-teal-dk) !important;
  border: 1.5px solid var(--ss-teal) !important;
  border-radius: var(--ss-radius-sm) !important;
  font-weight: 600 !important; transition: all .2s;
}
button[onclick*="agendar"]:hover {
  background: var(--ss-grad-teal) !important;
  color: var(--ss-white) !important;
  border-color: transparent !important;
  box-shadow: var(--ss-shadow-teal) !important;
  transform: translateY(-1px);
}
button[id^="more_"], button[id^="less_"] {
  background: var(--ss-white) !important;
  color: var(--ss-teal) !important;
  border: 1.5px solid var(--ss-teal) !important;
  border-radius: 999px !important;
  font-size: .8rem !important; font-weight: 600; padding: 6px 18px;
  transition: all .2s;
}
button[id^="more_"]:hover, button[id^="less_"]:hover { background: var(--ss-teal-lt) !important; }
.btn-outline-info { color: var(--ss-teal) !important; border-color: var(--ss-teal) !important; border-radius: var(--ss-radius-sm); }
.btn-outline-info:hover { background: var(--ss-teal) !important; color: var(--ss-white) !important; }
.table-borderless th { font-weight: 700; color: var(--ss-teal-dk) !important; font-size: .72rem !important; text-transform: uppercase; letter-spacing: .5px; }

/* ── SweetAlert2 ───────────────────────────────────────────── */
.swal2-confirm { background: var(--ss-grad-orange) !important; border-color: transparent !important; border-radius: var(--ss-radius-sm) !important; font-weight: 600 !important; box-shadow: var(--ss-shadow-orange) !important; }
.swal2-popup { border-radius: var(--ss-radius-lg) !important; box-shadow: var(--ss-shadow-lg) !important; }

/* ── Links ─────────────────────────────────────────────────── */
a { color: var(--ss-teal); }
a:hover { color: var(--ss-teal-dk); }

/* ═══════════════════════════════════════════════════════════
   WIZARD — Sobreescrita de variáveis do dashboard.html
   ═══════════════════════════════════════════════════════════ */
.wt-sidebar { background: var(--ss-grad-sidebar) !important; }

/* Step ativo com bolinha teal (em vez de primary genérico) */
.wt-step.active .wt-step-num { color: var(--ss-teal) !important; }

/* Botão "Continuar" — laranja */
.btn-wt-next {
  background: var(--ss-grad-orange) !important;
  box-shadow: var(--ss-shadow-orange) !important;
}
.btn-wt-next:hover:not(:disabled) {
  background: linear-gradient(135deg, #d4690a, #a84f00) !important;
  box-shadow: 0 8px 28px rgba(245,131,10,.4) !important;
}

/* Botão "Confirmar" — teal */
.btn-wt-confirm {
  background: var(--ss-grad-teal) !important;
  box-shadow: var(--ss-shadow-teal) !important;
}
.btn-wt-confirm:hover:not(:disabled) { box-shadow: 0 8px 28px rgba(19,194,189,.4) !important; }

/* Cabeçalho do card de confirmação — roxo→teal */
.conf-head { background: var(--ss-grad-hero) !important; }
.conf-ico  { background: var(--ss-teal-lt) !important; color: var(--ss-teal-dk) !important; }

/* Opção selecionada (especialidade/convênio) */
.opt-item.sel { border-color: var(--ss-teal) !important; background: var(--ss-teal-lt) !important; }
.opt-item.sel .opt-radio { background: var(--ss-teal) !important; border-color: var(--ss-teal) !important; }

/* Cards de profissionais */
.prof-card:hover { border-color: var(--ss-teal) !important; box-shadow: var(--ss-shadow-teal) !important; }
.prof-card.sel   { border-color: var(--ss-teal) !important; background: linear-gradient(135deg, var(--ss-teal-lt), #f5fffd) !important; }
.prof-avatar     { background: linear-gradient(135deg, var(--ss-purple-dk), var(--ss-teal)) !important; }
.prof-tag        { background: var(--ss-teal-lt) !important; color: var(--ss-teal-dk) !important; }

/* Spinner de loading */
.wt-spinner { border-color: var(--ss-teal-lt) !important; border-top-color: var(--ss-teal) !important; }

/* Focus nos inputs do wizard */
.wt-input:focus, .wt-textarea:focus {
  border-color: var(--ss-teal) !important;
  box-shadow: 0 0 0 3px rgba(19,194,189,.14) !important;
}

/* ═══════════════════════════════════════════════════════════
   LANDING PAGE (soma_saude_index.html)
   ═══════════════════════════════════════════════════════════ */

.ss-hero {
  background: var(--ss-grad-hero);
  border-radius: 0 0 var(--ss-radius-xl) var(--ss-radius-xl);
  padding: 64px 24px 56px;
  text-align: center; color: var(--ss-white);
  box-shadow: var(--ss-shadow-lg);
  position: relative; overflow: hidden; margin-bottom: 48px;
}
.ss-hero::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 320px; height: 320px;
  background: rgba(255,255,255,.06); border-radius: 50%; pointer-events: none;
}
.ss-hero::after {
  content: ''; position: absolute; bottom: -100px; left: -60px;
  width: 380px; height: 380px;
  background: rgba(255,255,255,.04); border-radius: 50%; pointer-events: none;
}
.ss-hero h1 {
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.5px; line-height: 1.2;
  margin-bottom: 14px; position: relative; z-index: 1;
}
.ss-hero p {
  font-size: 1.12rem; opacity: .88; max-width: 520px; margin: 0 auto 36px;
  line-height: 1.7; position: relative; z-index: 1;
}
.ss-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  padding: 6px 16px; font-size: .8rem; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 20px;
  position: relative; z-index: 1;
}
.ss-btn-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ss-grad-orange); color: var(--ss-white) !important;
  text-decoration: none !important; border: none;
  padding: 16px 42px; font-size: 1.05rem; font-weight: 700; border-radius: 999px;
  box-shadow: var(--ss-shadow-orange);
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  position: relative; z-index: 1; cursor: pointer;
}
.ss-btn-cta:hover {
  background: linear-gradient(135deg, #d4690a, #a84f00) !important;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 36px rgba(245,131,10,.45) !important;
  color: var(--ss-white) !important;
}

/* Stats em vidro */
.ss-stats { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 40px; position: relative; z-index: 1; }
.ss-stat {
  background: rgba(255,255,255,.12); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--ss-radius-md);
  padding: 16px 24px; text-align: center; min-width: 110px;
}
.ss-stat-number { font-size: 1.8rem; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.ss-stat-label  { font-size: .75rem; opacity: .82; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }

/* Feature cards com 3 variantes de cor */
.ss-features {
  display: block;
  margin-bottom: 48px;
}
.ss-feature-card {
  background: var(--ss-white); border: 1px solid var(--ss-gray-200);
  border-radius: var(--ss-radius-md); padding: 32px 24px; text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  position: relative; overflow: hidden;
}
.ss-feature-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; border-radius: var(--ss-radius-md) var(--ss-radius-md) 0 0;
}
.ss-feature-card.teal::before  { background: var(--ss-grad-teal); }
.ss-feature-card.orange::before{ background: var(--ss-grad-orange); }
.ss-feature-card.purple::before{ background: var(--ss-grad-purple); }

.ss-feature-card:hover { box-shadow: var(--ss-shadow-lg); transform: translateY(-6px); }
.ss-feature-icon {
  width: 64px; height: 64px; border-radius: var(--ss-radius-md);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; font-size: 1.6rem; color: var(--ss-white);
  box-shadow: 0 4px 14px rgba(0,0,0,.15); transition: transform .2s;
}
.ss-feature-card.teal   .ss-feature-icon { background: var(--ss-grad-teal); }
.ss-feature-card.orange .ss-feature-icon { background: var(--ss-grad-orange); }
.ss-feature-card.purple .ss-feature-icon { background: var(--ss-grad-purple); }
.ss-feature-card:hover .ss-feature-icon { transform: scale(1.1) rotate(-3deg); }
.ss-feature-card h5 { font-size: 1rem; font-weight: 700; color: var(--ss-gray-800); margin-bottom: 8px; }
.ss-feature-card p  { font-size: .88rem; color: var(--ss-gray-600); line-height: 1.6; margin: 0; }

/* Card seleção de unidade */
.ss-select-card { background: var(--ss-white); border: 1px solid var(--ss-gray-200); border-radius: var(--ss-radius-lg); box-shadow: var(--ss-shadow-lg); overflow: hidden; max-width: 520px; margin: 0 auto 48px; }
.ss-select-card-header { background: var(--ss-grad-teal); color: var(--ss-white); padding: 20px 28px; text-align: center; font-size: 1.02rem; font-weight: 700; }
.ss-select-card-body   { padding: 32px 28px; text-align: center; }

/* ── Responsivo ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ss-hero h1 { font-size: 1.9rem; }
  .ss-hero p  { font-size: 1rem; }
  .ss-hero    { padding: 48px 16px 44px; }
  .ss-btn-cta { padding: 14px 30px; font-size: .96rem; }
  .ss-stats   { gap: 8px; }
  .ss-stat    { padding: 12px 16px; min-width: 90px; }
}