/* =====================================================
   Ministerios Online — WHMCS Child Theme
   custom.css for twenty-one parent theme
   Brand: Coral #FF4D1C | Teal #2CB5A0 | Dark #0D1117
   ===================================================== */

/* Google Fonts — Outfit (headings) + DM Sans (body) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;900&family=DM+Sans:wght@400;500;600&display=swap');

/* ── Brand Color Variables ─────────────────────────── */
:root {
    /* Override primary with coral */
    --primary-50:  #fff4f0;
    --primary-100: #ffe4d9;
    --primary-200: #ffc4ad;
    --primary-300: #ff9d7a;
    --primary-400: #ff7047;
    --primary-500: #FF4D1C;
    --primary-600: #e03e0e;
    --primary-700: #b83009;
    --primary-800: #8f2507;
    --primary-900: #6b1c05;
    --primary-950: #3d0e02;

    --primary:          #FF4D1C;
    --primary-lifted:   #e03e0e;
    --primary-accented: #b83009;

    /* Teal accent */
    --teal:          #2CB5A0;
    --teal-lifted:   #239487;
    --teal-accented: #1a7268;

    /* Background — warm off-white */
    --bg:          #FAFAF8;
    --bg-muted:    #F4F2ED;
    --bg-lifted:   #EDEAE3;
    --bg-accented: #E5E3DC;
    --bg-inverted: #0D1117;

    /* Text */
    --text:          #0D1117;
    --text-accented: #374151;
    --text-lifted:   #6B7280;
    --text-muted:    #9CA3AF;
    --text-inverted: #FAFAF8;

    /* Borders */
    --border:         #E5E3DC;
    --border-muted:   #EDEAE3;
    --border-lifted:  #C9C6BC;
    --border-accented:#888880;

    /* Success = teal */
    --success:          #2CB5A0;
    --success-lifted:   #239487;
    --success-accented: #1a7268;

    /* Rounding — modern but not too rounded */
    --rounding-sm: 0.375rem;
    --rounding-md: 0.625rem;
    --rounding-lg: 1rem;

    /* Letter spacing */
    --letter-spacing: -0.01em;
}

/* ── Typography ────────────────────────────────────── */
body,
.clientarea,
p, span, div, td, li, input, select, textarea, button {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.panel-title,
.product-name,
.page-header h1 {
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* ── Navbar ────────────────────────────────────────── */
.navbar,
#topbar,
nav.navbar {
    background: #0D1117 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: none !important;
}

.navbar-brand,
.navbar-brand:hover {
    color: #FAFAF8 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700;
    font-size: 18px;
}

.navbar-nav > li > a,
.navbar-nav > li > a:hover {
    color: rgba(255,255,255,.7) !important;
    transition: color .15s;
}

.navbar-nav > li > a:hover {
    color: #FF4D1C !important;
}

.navbar-nav > li.active > a,
.navbar-nav > li.active > a:focus {
    color: #FF4D1C !important;
    background: transparent !important;
}

/* Dropdown */
.navbar-nav .dropdown-menu {
    background: #0D1117 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: var(--rounding-md) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
    margin-top: 4px;
}

.navbar-nav .dropdown-menu > li > a {
    color: rgba(255,255,255,.7) !important;
    padding: 8px 20px;
    transition: all .15s;
}

.navbar-nav .dropdown-menu > li > a:hover {
    background: rgba(255,77,28,.1) !important;
    color: #FF4D1C !important;
}

/* ── Logo ──────────────────────────────────────────── */
.navbar-brand img,
#logo img,
.logo img {
    height: 36px !important;
    width: auto !important;
}

/* ── Page background ───────────────────────────────── */
body {
    background-color: #FAFAF8 !important;
}

.container-fluid,
.main-content,
#main-body {
    background-color: #FAFAF8 !important;
}

/* ── Buttons ───────────────────────────────────────── */
.btn-primary,
.btn-success {
    background: #FF4D1C !important;
    border-color: #FF4D1C !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 100px !important;
    padding: 8px 24px !important;
    transition: all .2s !important;
    box-shadow: 0 2px 8px rgba(255,77,28,.25) !important;
}

.btn-primary:hover,
.btn-success:hover {
    background: #e03e0e !important;
    border-color: #e03e0e !important;
    box-shadow: 0 4px 16px rgba(255,77,28,.35) !important;
    transform: translateY(-1px);
}

.btn-default {
    background: white !important;
    border-color: #E5E3DC !important;
    color: #0D1117 !important;
    border-radius: 100px !important;
    font-weight: 600;
    transition: all .2s;
}

.btn-default:hover {
    border-color: #FF4D1C !important;
    color: #FF4D1C !important;
}

/* ── Panels / Cards ────────────────────────────────── */
.panel {
    border: 1px solid #E5E3DC !important;
    border-radius: var(--rounding-lg) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
    background: white !important;
}

.panel-heading,
.panel-title {
    background: white !important;
    border-bottom: 1px solid #E5E3DC !important;
    color: #0D1117 !important;
    border-radius: var(--rounding-lg) var(--rounding-lg) 0 0 !important;
    padding: 16px 20px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700;
}

.panel-body {
    padding: 20px !important;
}

/* ── Forms ─────────────────────────────────────────── */
.form-control {
    border: 1.5px solid #E5E3DC !important;
    border-radius: var(--rounding-md) !important;
    background: white !important;
    color: #0D1117 !important;
    padding: 8px 14px !important;
    transition: border-color .2s !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: #FF4D1C !important;
    box-shadow: 0 0 0 3px rgba(255,77,28,.1) !important;
}

/* ── Tables ────────────────────────────────────────── */
.table {
    border-radius: var(--rounding-lg) !important;
    overflow: hidden;
}

.table thead th {
    background: #F4F2ED !important;
    color: #0D1117 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700;
    border-bottom: 1px solid #E5E3DC !important;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}

.table tbody tr:hover {
    background: #F4F2ED !important;
}

/* ── Sidebar ───────────────────────────────────────── */
#sidebar,
.sidebar {
    background: white !important;
    border: 1px solid #E5E3DC !important;
    border-radius: var(--rounding-lg) !important;
}

.list-group-item.active,
.list-group-item.active:hover {
    background: #FF4D1C !important;
    border-color: #FF4D1C !important;
    color: white !important;
}

.list-group-item:hover {
    background: #F4F2ED !important;
    color: #FF4D1C !important;
}

/* ── Breadcrumb ────────────────────────────────────── */
.breadcrumb {
    background: transparent !important;
    padding: 8px 0 !important;
}

.breadcrumb > li + li::before {
    color: #9CA3AF !important;
}

.breadcrumb > .active {
    color: #FF4D1C !important;
}

/* ── Alerts ────────────────────────────────────────── */
.alert-success {
    background: rgba(44,181,160,.08) !important;
    border-color: rgba(44,181,160,.3) !important;
    color: #1a7268 !important;
    border-radius: var(--rounding-md) !important;
}

.alert-danger,
.alert-error {
    background: rgba(255,77,28,.06) !important;
    border-color: rgba(255,77,28,.25) !important;
    color: #b83009 !important;
    border-radius: var(--rounding-md) !important;
}

.alert-info {
    background: rgba(44,181,160,.06) !important;
    border-color: rgba(44,181,160,.2) !important;
    color: #1a7268 !important;
    border-radius: var(--rounding-md) !important;
}

/* ── Labels / Badges ───────────────────────────────── */
.label-primary,
.badge-primary { background: #FF4D1C !important; }
.label-success,
.badge-success { background: #2CB5A0 !important; }
.label-info    { background: #2CB5A0 !important; }

/* ── Status badges ─────────────────────────────────── */
.label-active,
.status-active {
    background: rgba(44,181,160,.12) !important;
    color: #1a7268 !important;
    border: 1px solid rgba(44,181,160,.3) !important;
    border-radius: 100px !important;
    padding: 2px 10px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}

/* ── Footer ────────────────────────────────────────── */
/* footer.tpl uses inline styles — only target site footer by ID */
#footer {
    background: #0D1117 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.35) !important;
    padding: 20px 0 !important;
}

/* Fix product card footers — reset the dark background */
#order-standard_cart .products .product footer,
.store-order-container footer,
.pricing-card footer {
    background: transparent !important;
    color: #374151 !important;
    border-top: 1px solid #F4F2ED !important;
    padding: 12px 0 0 !important;
}

/* Product pricing in order form */
#order-standard_cart .products .product .product-pricing {
    background: transparent !important;
    color: #0D1117 !important;
}

#order-standard_cart .products .product .product-pricing .price {
    font-family: 'Outfit', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #FF4D1C !important;
}

/* Order now button */
#order-standard_cart .products .product .btn-order-now,
.btn-order-now {
    background: #FF4D1C !important;
    border-color: #FF4D1C !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 6px 18px !important;
    transition: all .2s !important;
}

#order-standard_cart .products .product .btn-order-now:hover,
.btn-order-now:hover {
    background: #e03e0e !important;
    border-color: #e03e0e !important;
    box-shadow: 0 4px 12px rgba(255,77,28,.3) !important;
}

#footer a,
.main-footer a,
.site-footer a {
    color: rgba(255,255,255,.35) !important;
    transition: color .15s;
}

#footer a:hover,
.main-footer a:hover,
.site-footer a:hover {
    color: #FF4D1C !important;
}

/* ── Login page ────────────────────────────────────── */
.login-panel,
.login-logo {
    text-align: center;
}

.login-panel .panel {
    border-top: 3px solid #FF4D1C !important;
}

/* ── Invoice ───────────────────────────────────────── */
.invoice-total,
.balance-due {
    color: #FF4D1C !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700;
}

/* ── Links ─────────────────────────────────────────── */
a {
    color: #FF4D1C;
    transition: color .15s;
}

a:hover {
    color: #e03e0e;
    text-decoration: none;
}

/* ── Scrollbar (webkit) ────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F4F2ED; }
::-webkit-scrollbar-thumb { background: #E5E3DC; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #FF4D1C; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
    .navbar-collapse {
        background: #0D1117 !important;
        border-top: 1px solid rgba(255,255,255,.06) !important;
    }
    .navbar-toggle .icon-bar {
        background: rgba(255,255,255,.7) !important;
    }
}

/* ── Sidebar refinements ───────────────────────────── */
.sidebar .panel {
    border: 1.5px solid #E5E3DC !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    box-shadow: none !important;
}

.sidebar .panel-heading {
    background: #F4F2ED !important;
    border-bottom: 1px solid #E5E3DC !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar .panel-body {
    padding: 14px 16px !important;
    font-size: 13px !important;
    color: #374151 !important;
    line-height: 1.7;
}

.sidebar .btn-primary {
    width: 100%;
    margin-top: 8px;
}

.sidebar .list-group-item {
    border-color: #F4F2ED !important;
    font-size: 13px !important;
    padding: 9px 16px !important;
    color: #374151 !important;
}

.sidebar .list-group-item:hover {
    background: #F4F2ED !important;
    color: #FF4D1C !important;
}

.sidebar .list-group-item i {
    color: #FF4D1C !important;
    margin-right: 6px;
    opacity: .7;
}

/* Sidebar toggle chevron */
.sidebar .panel-heading a {
    color: #374151 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Breadcrumb ────────────────────────────────────── */
.master-breadcrumb {
    background: #F4F2ED !important;
    border-bottom: 1px solid #E5E3DC !important;
    padding: 7px 0 !important;
}

.master-breadcrumb .breadcrumb {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
}

.master-breadcrumb .breadcrumb-item a {
    color: #FF4D1C !important;
    text-decoration: none;
}

.master-breadcrumb .breadcrumb-item.active {
    color: #9CA3AF !important;
}

.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #C9C6BC !important;
}

/* ── Home panels cards ─────────────────────────────── */
.client-home-cards .card {
    border: 1.5px solid #E5E3DC !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}

.client-home-cards .card-header {
    background: white !important;
    border-bottom: 1px solid #F4F2ED !important;
    padding: 12px 18px !important;
}

.client-home-cards .card-header .card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0D1117 !important;
}

.client-home-cards .card-header .card-title i {
    color: #FF4D1C !important;
    margin-right: 6px;
}

.client-home-cards .card-body {
    font-size: 13px !important;
    color: #374151 !important;
    padding: 14px 18px !important;
}

.client-home-cards .card-footer {
    background: #FAFAF8 !important;
    border-top: 1px solid #F4F2ED !important;
    padding: 8px 18px !important;
    font-size: 12px !important;
}

.client-home-cards .list-group-item {
    border-color: #F4F2ED !important;
    font-size: 13px !important;
    padding: 10px 18px !important;
    color: #374151 !important;
}

.client-home-cards .list-group-item:hover {
    background: #F4F2ED !important;
    color: #FF4D1C !important;
}

.client-home-cards .btn.btn-default.btn-xs {
    background: #FF4D1C !important;
    color: white !important;
    border: none !important;
    border-radius: 100px !important;
    font-size: 11px !important;
    padding: 3px 12px !important;
}

/* ── Hero button responsive fix ────────────────────── */
@media (max-width: 900px) {
    .mo-hero-btn {
        margin-top: 12px;
        width: 100%;
        justify-content: center;
    }
}

/* ── Status badge color override ───────────────────── */
.badge.badge-info {
    background: #2CB5A0 !important;
}

/* ═══════════════════════════════════════════════════
   DYNAMIC STORE — Ministerios Online branding
   ═══════════════════════════════════════════════════ */

/* ── Store global colors ───────────────────────────── */
.dynamic-landing-page {
    --primary-color: #FF4D1C !important;
    --accent-color: #2CB5A0 !important;
    --text-color: #0D1117 !important;
    --text-secondary: #6B7280 !important;
    --bg-color: #FAFAF8 !important;
    --bg-light: #F4F2ED !important;
    --bg-dark: #0D1117 !important;
}

/* ── Hero section ──────────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, #0D1117 0%, #111827 100%) !important;
    color: white !important;
}

.hero-section::before {
    background: linear-gradient(135deg, #FF4D1C, #2CB5A0) !important;
    opacity: 0.08 !important;
}

.hero-section h1,
.hero-section h2,
.hero-section p {
    color: white !important;
}

.hero-logo-container {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    box-shadow: none !important;
}

/* ── Pricing cards ─────────────────────────────────── */
.pricing-card {
    border: 1.5px solid #E5E3DC !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
    transition: all .2s !important;
}

.pricing-card:hover {
    border-color: #FF4D1C !important;
    box-shadow: 0 8px 24px rgba(255,77,28,.12) !important;
    transform: translateY(-4px) !important;
}

.pricing-card:has(.plan-button:hover) {
    border-color: #FF4D1C !important;
}

/* Featured/recommended card */
.pricing-card.featured,
.pricing-card[data-featured="true"],
.pricing-card:nth-child(2) {
    border-color: #FF4D1C !important;
    box-shadow: 0 8px 32px rgba(255,77,28,.15) !important;
}

.plan-name {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: #0D1117 !important;
}

.price-amount {
    font-family: 'Outfit', sans-serif !important;
    color: #FF4D1C !important;
    font-weight: 800 !important;
}

.price-period {
    color: #9CA3AF !important;
}

.plan-description {
    color: #6B7280 !important;
    font-size: 13px !important;
}

/* Feature list items */
.feature-item {
    color: #374151 !important;
    font-size: 13px !important;
}

.feature-item i.fa-check {
    color: #2CB5A0 !important;
}

.feature-item i.fa-times {
    color: #E5E3DC !important;
}

/* Plan button */
.plan-button {
    background: #FF4D1C !important;
    border-color: #FF4D1C !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
    transition: all .2s !important;
}

.plan-button:hover {
    background: #e03e0e !important;
    border-color: #e03e0e !important;
    box-shadow: 0 4px 16px rgba(255,77,28,.3) !important;
    transform: translateY(-2px) !important;
}

/* ── Comparison table ──────────────────────────────── */
.features-table-section {
    background: #FAFAF8 !important;
}

.features-table-title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: #0D1117 !important;
}

.comparison-table {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1.5px solid #E5E3DC !important;
}

.comparison-table thead {
    background: #0D1117 !important;
}

.product-header {
    background: #0D1117 !important;
    padding: 20px 16px !important;
    border-bottom: 2px solid rgba(255,255,255,.06) !important;
}

.product-name {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: white !important;
    font-size: 14px !important;
}

.feature-header {
    background: #0D1117 !important;
}

.feature-row:nth-child(even) {
    background: #F4F2ED !important;
}

.feature-row:hover {
    background: #E5E3DC !important;
}

.feature-name {
    font-size: 13px !important;
    color: #374151 !important;
    font-weight: 500 !important;
    padding: 12px 16px !important;
}

.feature-check i {
    color: #2CB5A0 !important;
    font-size: 14px !important;
}

.feature-cross i {
    color: #E5E3DC !important;
    font-size: 14px !important;
}

.feature-text,
.feature-number {
    color: #374151 !important;
    font-size: 13px !important;
}

/* Price row */
.price-row .service-price {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: #FF4D1C !important;
    font-size: 16px !important;
    padding: 16px !important;
}

.table-price .price-amount {
    color: #FF4D1C !important;
    font-weight: 800 !important;
}

/* Buy button in table */
.table-cta-button {
    background: #FF4D1C !important;
    color: white !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all .2s !important;
    width: 100% !important;
}

.table-cta-button:hover {
    background: #e03e0e !important;
    box-shadow: 0 4px 12px rgba(255,77,28,.3) !important;
    transform: translateY(-1px) !important;
}

/* ── CTA section ───────────────────────────────────── */
.cta-section {
    background: #0D1117 !important;
}

.cta-section h2,
.cta-section p {
    color: white !important;
}

.cta-primary-button {
    background: #FF4D1C !important;
    border-color: #FF4D1C !important;
    border-radius: 100px !important;
    font-weight: 600 !important;
}

.cta-primary-button:hover {
    background: #e03e0e !important;
    box-shadow: 0 4px 16px rgba(255,77,28,.35) !important;
}

.cta-secondary-button {
    border-color: rgba(255,255,255,.3) !important;
    color: rgba(255,255,255,.8) !important;
    border-radius: 100px !important;
}

.cta-secondary-button:hover {
    border-color: #FF4D1C !important;
    color: #FF4D1C !important;
}

/* ── Section titles ────────────────────────────────── */
.dynamic-landing-page h1,
.dynamic-landing-page h2,
.dynamic-landing-page h3 {
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: -0.02em !important;
}

/* ── Grid of cards ─────────────────────────────────── */
.grid-card {
    border: 1.5px solid #E5E3DC !important;
    border-radius: 14px !important;
    transition: all .2s !important;
}

.grid-card:hover {
    border-color: #FF4D1C !important;
    box-shadow: 0 8px 24px rgba(255,77,28,.1) !important;
    transform: translateY(-3px) !important;
}

/* ── FAQ ───────────────────────────────────────────── */
.faq-item {
    border: 1.5px solid #E5E3DC !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
}

.faq-contact-button {
    background: #FF4D1C !important;
    border-color: #FF4D1C !important;
    border-radius: 100px !important;
}

/* ═══════════════════════════════════════════════════
   TEAL ACCENT SYSTEM — Ministerios Online v2
   ═══════════════════════════════════════════════════ */

/* ── Navbar active indicator ───────────────────────── */
.mo-navbar-main .navbar-nav > li.active > a {
    color: white !important;
    background: rgba(44,181,160,.08) !important;
    border-bottom: 2px solid #2CB5A0 !important;
}

.mo-navbar-main .navbar-nav > li > a:hover {
    border-bottom: 2px solid rgba(44,181,160,.4) !important;
}

.mo-navbar-main .navbar-nav > li > a {
    border-bottom: 2px solid transparent !important;
    transition: all .15s !important;
}

/* ── Stat cards — alternating coral/teal accent bars ── */
.mo-stat-card:nth-child(odd) {
    border-top: 3px solid #FF4D1C !important;
}

[style*="grid-template-columns:repeat(4"] a:nth-child(odd) > div {
    border-top: 3px solid #FF4D1C !important;
}

[style*="grid-template-columns:repeat(4"] a:nth-child(even) > div {
    border-top: 3px solid #2CB5A0 !important;
}

/* ── Sidebar icons alternating teal ───────────────── */
.sidebar .list-group-item:nth-child(odd) i {
    color: #FF4D1C !important;
}

.sidebar .list-group-item:nth-child(even) i {
    color: #2CB5A0 !important;
}

/* Sidebar panel headings — teal left border */
.sidebar .panel {
    border-left: 3px solid #2CB5A0 !important;
}

/* ── Client home cards — teal accent ──────────────── */
.client-home-cards .card-header .card-title i {
    color: #2CB5A0 !important;
}

/* Alternate card accent colors */
.client-home-cards .card:nth-child(odd) {
    border-left: 3px solid #FF4D1C !important;
}

.client-home-cards .card:nth-child(even) {
    border-left: 3px solid #2CB5A0 !important;
}

/* ── Breadcrumb teal divider ──────────────────────── */
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›" !important;
    color: #2CB5A0 !important;
    font-weight: 700 !important;
}

/* ── List group active — teal ─────────────────────── */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background: #2CB5A0 !important;
    border-color: #2CB5A0 !important;
    color: white !important;
}

/* ── Order form product cards ─────────────────────── */
#order-standard_cart .products .product {
    border-radius: 12px !important;
    border: 1.5px solid #E5E3DC !important;
    overflow: hidden !important;
    transition: all .2s !important;
    box-shadow: none !important;
}

#order-standard_cart .products .product:hover {
    border-color: #FF4D1C !important;
    box-shadow: 0 6px 20px rgba(255,77,28,.1) !important;
    transform: translateY(-3px) !important;
}

/* Plan name header */
#order-standard_cart .products .product header,
#order-standard_cart .products .product .header {
    background: #0D1117 !important;
    color: white !important;
    padding: 16px !important;
    border-bottom: 2px solid rgba(44,181,160,.3) !important;
}

#order-standard_cart .products .product header h3,
#order-standard_cart .products .product header h4,
#order-standard_cart .products .product .header h3,
#order-standard_cart .products .product .header h4 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 0 !important;
}

/* Feature list */
#order-standard_cart .products .product ul li {
    font-size: 12px !important;
    color: #374151 !important;
    padding: 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#order-standard_cart .products .product ul li::before {
    content: "✓" !important;
    color: #2CB5A0 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
}

/* ── Mensualmente badge ───────────────────────────── */
#order-standard_cart .products .product .product-pricing br + *,
.product-pricing .billing-cycle,
.product-pricing small {
    color: #2CB5A0 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* The "Mensualmente" text node */
#order-standard_cart .products .product .product-pricing {
    position: relative !important;
}

/* ── Plans page — Mensualmente label ─────────────── */
.product-pricing br {
    display: none !important;
}

/* ── Pricing section headers on store ────────────── */
.pricing-title,
.features-table-title {
    position: relative !important;
    display: inline-block !important;
}

.pricing-title::after,
.features-table-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 48px !important;
    height: 3px !important;
    background: linear-gradient(90deg, #FF4D1C, #2CB5A0) !important;
    border-radius: 2px !important;
}

/* ── Store category sidebar ───────────────────────── */
#side-menu li.active a,
.category-nav .active a {
    color: #2CB5A0 !important;
    border-left: 3px solid #2CB5A0 !important;
    background: rgba(44,181,160,.06) !important;
}

/* ── Page section dividers ────────────────────────── */
.pricing-section,
.features-table-section {
    position: relative !important;
}

.pricing-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, #2CB5A0, transparent) !important;
}

/* ── Status indicators ────────────────────────────── */
.label-success,
.badge-success,
.status-active,
.label-active {
    background: rgba(44,181,160,.12) !important;
    color: #1a7268 !important;
    border: 1px solid rgba(44,181,160,.3) !important;
    border-radius: 100px !important;
    padding: 2px 10px !important;
    font-weight: 600 !important;
    font-size: 11px !important;
}

/* ── Ticket status badges ─────────────────────────── */
.badge-open { 
    background: rgba(255,77,28,.1) !important; 
    color: #FF4D1C !important;
    border: 1px solid rgba(255,77,28,.25) !important;
    border-radius: 100px !important;
    padding: 2px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* ── Invoice status ───────────────────────────────── */
.badge-paid,
.label-paid {
    background: rgba(44,181,160,.12) !important;
    color: #1a7268 !important;
    border: 1px solid rgba(44,181,160,.3) !important;
    border-radius: 100px !important;
}

/* ── Form focus teal ring ─────────────────────────── */
.form-control:focus {
    border-color: #2CB5A0 !important;
    box-shadow: 0 0 0 3px rgba(44,181,160,.1) !important;
}

/* ── Topbar logged-in pill ────────────────────────── */
.mo-topbar .btn-active-client {
    border-color: rgba(44,181,160,.3) !important;
}

/* ── Cart button ──────────────────────────────────── */
.mo-cart-btn {
    background: rgba(44,181,160,.12) !important;
    border: 1px solid rgba(44,181,160,.3) !important;
    color: #2CB5A0 !important;
}

.mo-cart-btn:hover {
    background: #2CB5A0 !important;
    color: white !important;
}

/* ── Animated gradient border on hero ────────────── */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Scrollbar teal ───────────────────────────────── */
::-webkit-scrollbar-thumb:hover {
    background: #2CB5A0 !important;
}

/* ── Links teal on dark backgrounds ──────────────── */
.clientareadetails a,
.client-home-cards .card-body a {
    color: #2CB5A0 !important;
}

.clientareadetails a:hover,
.client-home-cards .card-body a:hover {
    color: #239487 !important;
}

/* ── Hero portal dot pulse ────────────────────────── */
[style*="background:#2CB5A0"][style*="border-radius:50%"] {
    box-shadow: 0 0 0 0 rgba(44,181,160,.4) !important;
    animation: moPulse 1.5s infinite, tealGlow 2s infinite !important;
}

@keyframes tealGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(44,181,160,.4); }
    50% { box-shadow: 0 0 0 6px rgba(44,181,160,.0); }
}

/* ── Responsive mobile ────────────────────────────── */
@media (max-width: 767px) {
    .mo-navbar-main .navbar-nav > li > a {
        border-bottom: none !important;
        border-left: 3px solid transparent !important;
    }
    .mo-navbar-main .navbar-nav > li.active > a {
        border-bottom: none !important;
        border-left: 3px solid #2CB5A0 !important;
    }
}

/* ═══════════════════════════════════════════════════
   FIXES v3 — Headers, Services, Search, Cart
   ═══════════════════════════════════════════════════ */

/* ── Fix product card dark headers — readable ─────── */
#order-standard_cart .products .product header,
#order-standard_cart .products .product .header {
    background: linear-gradient(135deg, #0D1117 0%, #1a2332 100%) !important;
    border-bottom: 2px solid rgba(44,181,160,.4) !important;
    padding: 16px 20px !important;
}

#order-standard_cart .products .product header h3,
#order-standard_cart .products .product header h4,
#order-standard_cart .products .product .header h3,
#order-standard_cart .products .product .header h4 {
    color: white !important;
    font-size: 16px !important;
    margin: 0 !important;
    text-shadow: none !important;
}

/* ── Search bar — remove double border ─────────────── */
.mo-navbar-top .input-group.search .form-control {
    border-left: none !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-left: none !important;
}

.mo-navbar-top .input-group.search .btn-default {
    border: 1px solid rgba(255,255,255,.15) !important;
    border-right: none !important;
}

.mo-navbar-top .input-group.search {
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.mo-navbar-top .input-group.search .btn-default,
.mo-navbar-top .input-group.search .form-control {
    border: none !important;
    box-shadow: none !important;
}

/* ── Cart button — teal only when has items ─────────── */
.mo-cart-btn {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(255,255,255,.7) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
}

.mo-cart-btn .badge {
    background: #FF4D1C !important;
    color: white !important;
    border-radius: 100px !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
    margin-left: 4px !important;
}

.mo-cart-btn:hover {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.2) !important;
    color: white !important;
}

/* ── Mis Servicios — table improvements ─────────────── */
.clientareaproducts table,
#tableServicesList {
    border: 1.5px solid #E5E3DC !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.clientareaproducts table thead th,
#tableServicesList thead th {
    background: #0D1117 !important;
    color: rgba(255,255,255,.7) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 14px 16px !important;
    border: none !important;
}

.clientareaproducts table tbody tr,
#tableServicesList tbody tr {
    border-bottom: 1px solid #F4F2ED !important;
    transition: background .15s !important;
}

.clientareaproducts table tbody tr:hover,
#tableServicesList tbody tr:hover {
    background: #F4F2ED !important;
}

.clientareaproducts table tbody td,
#tableServicesList tbody td {
    padding: 14px 16px !important;
    font-size: 13px !important;
    color: #374151 !important;
    border: none !important;
    vertical-align: middle !important;
}

/* Service name bold */
.clientareaproducts table tbody td:first-child,
#tableServicesList tbody td:first-child {
    font-weight: 600 !important;
    color: #0D1117 !important;
}

/* Status badges */
.clientareaproducts .label,
#tableServicesList .label,
.label-default {
    border-radius: 100px !important;
    padding: 3px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Active */
span.label[class*="success"],
.label-success {
    background: rgba(44,181,160,.12) !important;
    color: #1a7268 !important;
    border: 1px solid rgba(44,181,160,.3) !important;
}

/* Suspended */
span.label[class*="warning"],
.label-warning {
    background: rgba(255,193,7,.1) !important;
    color: #92660a !important;
    border: 1px solid rgba(255,193,7,.3) !important;
}

/* Terminated / Cancelled */
span.label[class*="danger"],
.label-danger,
span.label[class*="default"],
.label-default {
    background: rgba(107,114,128,.08) !important;
    color: #6B7280 !important;
    border: 1px solid rgba(107,114,128,.2) !important;
}

/* Pending */
span.label[class*="info"],
.label-info {
    background: rgba(44,181,160,.08) !important;
    color: #2CB5A0 !important;
    border: 1px solid rgba(44,181,160,.2) !important;
}

/* ── Services sidebar filters ────────────────────────── */
.clientareaproducts .sidebar .panel-body label,
.clientareaproducts .sidebar .panel-body a {
    font-size: 13px !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 0 !important;
    cursor: pointer !important;
}

/* Color dots for status filters */
.clientareaproducts .sidebar input[type="radio"] {
    accent-color: #FF4D1C !important;
}

/* ── DataTables controls ──────────────────────────── */
.dataTables_wrapper .dataTables_info {
    font-size: 12px !important;
    color: #9CA3AF !important;
    padding: 12px 0 !important;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid #E5E3DC !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    color: #0D1117 !important;
    background: white !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #2CB5A0 !important;
    box-shadow: 0 0 0 3px rgba(44,181,160,.1) !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1.5px solid #E5E3DC !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
    color: #374151 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #FF4D1C !important;
    border-color: #FF4D1C !important;
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #F4F2ED !important;
    border-color: #E5E3DC !important;
    color: #0D1117 !important;
}

/* ── Sortable table headers ───────────────────────── */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    color: rgba(44,181,160,.6) !important;
}

/* ── Fix product header span — overrides WHMCS default ── */
#order-standard_cart .products .product header span,
#order-standard_cart .products .product .header span {
    color: white !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* ── Register page field icons fix ───────────────── */
.register-page-wrapper .prepend-icon {
    position: relative !important;
}

.register-page-wrapper .field-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #C9C6BC !important;
    z-index: 4 !important;
    pointer-events: none !important;
    font-size: 13px !important;
    width: 16px !important;
    text-align: center !important;
}

.register-page-wrapper .prepend-icon .field,
.register-page-wrapper .prepend-icon .form-control {
    padding-left: 34px !important;
}

/* Fix double icon (state field has 2 labels) */
.register-page-wrapper #inputStateIcon + #inputStateIcon {
    display: none !important;
}

/* ── Phone field — intl-tel-input fix ────────────── */
.register-page-wrapper .iti {
    width: 100% !important;
}

.register-page-wrapper .iti__flag-container {
    z-index: 5 !important;
}

.register-page-wrapper #inputPhone,
.register-page-wrapper input[name="phonenumber"] {
    padding-left: 52px !important;
}

.register-page-wrapper .iti--separate-dial-code #inputPhone,
.register-page-wrapper .iti--separate-dial-code input[name="phonenumber"] {
    padding-left: 90px !important;
}

/* ── Phone placeholder — push right of flag ─────── */
.register-page-wrapper .iti input[type="tel"],
.register-page-wrapper input#inputPhone {
    padding-left: 80px !important;
}