/* ===================================================
   Conecta Cartorio - Brand CSS v2 (layout marketing 2026)
   Primary:  #142745 (navy)   Accent: #c9a227 (dourado)
   Verde:    #128C4B (pagamentos)
   Fontes:   Sora (titulos), Manrope (corpo) - ver fonts.css
   =================================================== */

:root {
    --cc-primary:       #142745;
    --cc-primary-dark:  #0d1a30;
    --cc-primary-light: #1c3a66;
    --cc-navy-deep:     #0f1f39;
    --cc-accent:        #c9a227;
    --cc-accent-dark:   #a5851d;
    --cc-accent-light:  #eecf6a;
    --cc-green:         #128C4B;
    --cc-green-soft:    #f4faf6;
    --cc-green-border:  #d8eee1;
    --cc-wa:            #25D366;
    --cc-white:         #ffffff;
    --cc-gray-light:    #eff4fa;
    --cc-gray:          #54637a;
    --cc-text:          #16202e;
    --cc-text-soft:     #54637a;
    --cc-border:        #e8eef6;
    --cc-border-input:  #dce3ec;
    --cc-shadow:        0 10px 26px rgba(20, 39, 69, 0.07);
    --cc-radius:        16px;
    --cc-radius-sm:     10px;
    --cc-font-heading:  'Sora', system-ui, sans-serif;
    --cc-font-body:     'Manrope', system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--cc-font-body);
    color: var(--cc-text);
    background: var(--cc-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--cc-font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

::selection { background: var(--cc-accent); color: #fff; }

/* Navbar escura (area do cliente / _ClienteLayout) */
.cc-navbar {
    background: var(--cc-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cc-navbar .navbar-brand img { max-width: 200px; }
.cc-navbar .nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-family: var(--cc-font-body);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.5rem 1rem !important;
    transition: color 0.2s;
}
.cc-navbar .nav-link:hover,
.cc-navbar .nav-link.active { color: var(--cc-accent-light) !important; }

/* Sections (paginas internas) */
.cc-section { padding: 4.5rem 0; }
.cc-section-blue { background: var(--cc-primary); color: var(--cc-white); }
.cc-section-blue h2, .cc-section-blue h3, .cc-section-blue h4 { color: var(--cc-white); }
.cc-section-blue p { color: rgba(255,255,255,0.85); }
.cc-section-light { background: var(--cc-gray-light); }

.cc-section-title {
    font-family: var(--cc-font-heading);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    color: var(--cc-primary);
    margin-bottom: 0.5rem;
}
.cc-section-subtitle {
    font-size: 1.05rem;
    color: var(--cc-text-soft);
    margin-bottom: 3rem;
}

/* Botoes */
.btn-cc-primary {
    background: var(--cc-primary);
    color: var(--cc-white);
    border: none;
    border-radius: 11px;
    padding: 0.8rem 1.6rem;
    font-family: var(--cc-font-body);
    font-weight: 800;
    font-size: 0.95rem;
    transition: all 0.2s;
    cursor: pointer;
    display: inline-block;
}
.btn-cc-primary:hover {
    background: var(--cc-primary-light);
    color: var(--cc-white);
    transform: translateY(-1px);
}
.btn-cc-accent {
    background: var(--cc-accent);
    color: var(--cc-white);
    border: none;
    border-radius: 11px;
    padding: 0.8rem 1.6rem;
    font-family: var(--cc-font-body);
    font-weight: 800;
    font-size: 0.95rem;
    transition: all 0.2s;
    cursor: pointer;
    display: inline-block;
}
.btn-cc-accent:hover {
    background: var(--cc-accent-dark);
    color: var(--cc-white);
    transform: translateY(-1px);
}
.btn-cc-outline {
    background: transparent;
    color: var(--cc-primary);
    border: 1.5px solid var(--cc-primary);
    border-radius: 11px;
    padding: 0.7rem 1.4rem;
    font-family: var(--cc-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s;
    cursor: pointer;
    display: inline-block;
}
.btn-cc-outline:hover {
    background: var(--cc-primary);
    color: var(--cc-white);
}
.btn-cc-green {
    background: var(--cc-green);
    color: var(--cc-white);
    border: none;
    border-radius: 11px;
    padding: 0.8rem 1.6rem;
    font-family: var(--cc-font-body);
    font-weight: 800;
    font-size: 0.95rem;
    transition: all 0.2s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-cc-green:hover {
    background: #0e723d;
    color: var(--cc-white);
    transform: translateY(-1px);
}

/* Valor da mensalidade no dashboard do cliente (Views/Cliente/Index.cshtml) */
.cc-valor-plano {
    font-family: var(--cc-font-heading);
    font-weight: 700;
    color: var(--cc-primary);
    line-height: 1;
    margin: 0;
}

/* Formularios */
.cc-form-label {
    font-family: var(--cc-font-body);
    font-weight: 700;
    color: #33455c;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
}
.cc-form-control {
    border: 1px solid var(--cc-border-input);
    border-radius: 9px;
    padding: 0.7rem 0.85rem;
    font-family: var(--cc-font-body);
    font-size: 0.92rem;
    color: var(--cc-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}
.cc-form-control:focus {
    border-color: var(--cc-primary);
    box-shadow: 0 0 0 3px rgba(20,39,69,0.10);
    outline: none;
}

/* Stepper (checkout) */
.cc-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 3rem;
}
.cc-step {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.cc-step-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--cc-border-input);
    background: var(--cc-white);
    color: var(--cc-gray);
    font-family: var(--cc-font-heading);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.cc-step.active .cc-step-circle {
    background: var(--cc-primary);
    border-color: var(--cc-primary);
    color: var(--cc-white);
}
.cc-step.done .cc-step-circle {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: var(--cc-white);
}
.cc-step-label {
    font-family: var(--cc-font-body);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--cc-gray);
    margin-top: 0.4rem;
    white-space: nowrap;
}
.cc-step.active .cc-step-label { color: var(--cc-primary); }
.cc-step-line {
    flex: 1;
    height: 2px;
    background: var(--cc-border-input);
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
    min-width: 40px;
}
.cc-step-line.done { background: var(--cc-accent); }

/* Cards (area do cliente) */
.cc-card {
    background: var(--cc-white);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    padding: 1.75rem;
    height: 100%;
}
.cc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cc-border);
}
.cc-card-title {
    font-family: var(--cc-font-heading);
    font-size: 1.05rem;
    color: var(--cc-primary);
    font-weight: 700;
    margin: 0;
}
.cc-status-badge {
    font-family: var(--cc-font-body);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    letter-spacing: 0.04em;
}
.cc-status-ativo { background: #d9f2e4; color: #0e6b3a; }
.cc-status-pendente { background: #fdf3d1; color: #8a6d10; }
.cc-status-suspenso { background: #f8d7da; color: #721c24; }
.cc-status-cancelado { background: #e2e3e5; color: #383d41; }

/* Sidebar (area do cliente) */
.cc-sidebar {
    background: var(--cc-primary);
    min-height: calc(100vh - 72px);
    padding: 2rem 0;
}
.cc-sidebar .nav-link {
    color: rgba(255,255,255,0.75);
    font-family: var(--cc-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.75rem 1.5rem;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cc-sidebar .nav-link:hover { color: var(--cc-white); background: rgba(255,255,255,0.08); }
.cc-sidebar .nav-link.active {
    color: var(--cc-accent-light);
    border-left-color: var(--cc-accent);
    background: rgba(201,162,39,0.10);
}
.cc-sidebar .nav-link svg { width: 18px; height: 18px; }

/* Tabela de faturas */
.cc-table { width: 100%; border-collapse: collapse; }
.cc-table th {
    font-family: var(--cc-font-body);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--cc-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--cc-border);
    background: var(--cc-gray-light);
}
.cc-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--cc-border);
    font-size: 0.9rem;
    vertical-align: middle;
}
.cc-table tr:hover td { background: var(--cc-gray-light); }

/* Fatura status badges */
.cc-fatura-paga { color: #0e6b3a; background: #d9f2e4; padding: 0.2rem 0.6rem; border-radius: 5px; font-size: 0.8rem; font-weight: 800; }
.cc-fatura-pendente { color: #8a6d10; background: #fdf3d1; padding: 0.2rem 0.6rem; border-radius: 5px; font-size: 0.8rem; font-weight: 800; }
.cc-fatura-vencida { color: #721c24; background: #f8d7da; padding: 0.2rem 0.6rem; border-radius: 5px; font-size: 0.8rem; font-weight: 800; }

/* Metodo de pagamento */
.cc-metodo-card {
    border: 1.5px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s;
}
.cc-metodo-card.principal { border-color: var(--cc-accent); background: #fdf8e9; }
.cc-metodo-card .cc-metodo-info { display: flex; align-items: center; gap: 1rem; }
.cc-metodo-card .cc-metodo-icone {
    width: 44px;
    height: 44px;
    background: var(--cc-gray-light);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* QR Code PIX */
.cc-pix-box {
    background: var(--cc-gray-light);
    border-radius: var(--cc-radius);
    padding: 2rem;
    text-align: center;
}
.cc-pix-code {
    font-family: monospace;
    font-size: 0.75rem;
    word-break: break-all;
    background: var(--cc-white);
    border: 1px solid var(--cc-border);
    border-radius: 7px;
    padding: 1rem;
    color: var(--cc-text);
}

/* Alerts */
.cc-alert-sucesso {
    background: #d9f2e4;
    color: #0e6b3a;
    border: 1px solid var(--cc-green-border);
    border-radius: 9px;
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
}
.cc-alert-erro {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    border-radius: 9px;
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
}