/* =========================================
   Base: em cima do Bootstrap (não rebenta nada)
   ========================================= */

:root {
    --sops-primary: #111827;
    --sops-accent: #22c55e;
    --sops-accent-soft: rgba(34, 197, 94, 0.12);
    --sops-text-main: #111827;
    --sops-text-muted: #6b7280;
}

/* Fonte e fundo base – simples, sem dramas */

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--sops-text-main);
    background-color: #f3f4f6;
}

/* =========================================
   Navbar (usa o #mainNav que já tens)
   ========================================= */

#mainNav {
    background-color: #111827; /* quase preto */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#mainNav .navbar-brand {
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    text-transform: uppercase;
}

#mainNav .navbar-nav .nav-link {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Botão “Login / Reserved Area” na navbar */

#mainNav .btn.btn-dark.btn-sm {
    background-color: var(--sops-accent);
    border-color: var(--sops-accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#mainNav .btn.btn-dark.btn-sm:hover {
    background-color: #16a34a;
    border-color: #16a34a;
}

/* Pequeno sombreado quando se faz scroll (se quiseres mais tarde meter JS) */

#mainNav.navbar-scrolled {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
}

/* =========================================
   Secções / spacing
   ========================================= */

.page-section {
    padding-top: 120px;
    padding-bottom: 80px;
}

@media (max-width: 991.98px) {
    .page-section {
        padding-top: 96px;
        padding-bottom: 64px;
    }
}

/* =========================================
   Cards (checkout, users, etc.)
   ========================================= */

.card {
    border-radius: 0.75rem;
    border-color: #e5e7eb;
}

.card-header {
    background-color: #f9fafb;
}

.card-body {
    /* leve ajuste de padding mas sem exagerar */
    padding: 1.5rem;
}

/* Hover suave em cards “clicáveis” */

.card.hoverable {
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.card.hoverable:hover {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
    transform: translateY(-2px);
    border-color: #d1d5db;
}

/* =========================================
   Formulários
   ========================================= */

.form-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sops-text-muted);
}

.form-control,
.form-select {
    border-radius: 0.6rem;
}

/* Só um foco um bocadinho mais moderno, sem estragar Bootstrap */

.form-control:focus,
.form-select:focus {
    border-color: var(--sops-accent);
    box-shadow: 0 0 0 0.15rem rgba(34, 197, 94, 0.25);
}

/* Texto de ajuda */

.form-text {
    font-size: 0.78rem;
    color: var(--sops-text-muted);
}

/* =========================================
   Botões
   ========================================= */

.btn-primary {
    background-color: var(--sops-primary);
    border-color: var(--sops-primary);
}

.btn-primary:hover {
    background-color: #020617;
    border-color: #020617;
}

.btn-outline-light {
    border-radius: 999px;
}

/* =========================================
   Alerts (flash messages)
   ========================================= */

.alert {
    border-radius: 0.65rem;
    font-size: 0.9rem;
}

.alert-success {
    border-color: rgba(34, 197, 94, 0.5);
    background-color: rgba(34, 197, 94, 0.1);
    color: #166534;
}

.alert-danger {
    border-color: rgba(239, 68, 68, 0.5);
    background-color: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

/* =========================================
   Footer
   ========================================= */

.footer {
    background-color: #111827;
    color: #e5e7eb;
}

.footer .link-dark {
    color: #9ca3af;
}

.footer .link-dark:hover {
    color: #e5e7eb;
}

.footer .btn-social {
    border-radius: 999px;
}

/* =========================================
   Pequenos utilitários
   ========================================= */

/* Se quiseres destacar um badge tipo “Most popular” nos planos */
.badge-soft-accent {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background-color: var(--sops-accent-soft);
    color: #166534;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}