/*
 * Interactive Villages client area (interactivevillages2026, child of Twenty-One).
 * Matches interactivevillages.com: Village Navy, cream page, Source Serif 4 headings, Inter body, pill buttons, 20px cards.
 * Works on WHMCS 8.13 and 9.1 (only Twenty-One class names are used).
 */
:root {
    --iv-navy: #013A6A; --iv-navy-deep: #022C52; --iv-ink: #0B2440; --iv-blue: #4080B9;
    --iv-sky: #EAF2F9; --iv-cream: #FFFBEA; --iv-cream-2: #FFF6CF; --iv-gold: #F2C14E; --iv-gold-deep: #E8B336;
    --iv-red: #D2352E; --iv-muted: #4A5B6C; --iv-line: #E6E1CC; --iv-line-soft: #EFEBDD; --iv-white: #FFFFFF; --iv-on-navy: #BFD3E6;
    --iv-serif: "Source Serif 4", Georgia, serif; --iv-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Base */
body.ivx, body.ivx.primary-bg-color { background: var(--iv-cream); color: var(--iv-ink); font-family: var(--iv-sans); font-size: 15.5px; }
body.ivx h1, body.ivx h2, body.ivx h3, body.ivx h4, body.ivx h5, body.ivx .h1, body.ivx .h2, body.ivx .h3, body.ivx .h4, body.ivx .h5 {
    font-family: var(--iv-serif); font-weight: 600; color: var(--iv-navy); letter-spacing: -0.005em;
}
body.ivx a { color: var(--iv-navy); }
body.ivx a:hover, body.ivx a:focus { color: var(--iv-blue); }
body.ivx :focus-visible { outline: 3px solid var(--iv-blue); outline-offset: 2px; }
body.ivx .text-muted { color: var(--iv-muted) !important; }

/* Site header (website nav) */
.ivx-site-header { background: var(--iv-white); border-bottom: 1px solid var(--iv-line); }
.ivx-site-header__inner { max-width: 1200px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ivx-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; }
.ivx-logo img { width: 52px; height: 52px; flex: 0 0 auto; }
.ivx-logo__text { display: flex; flex-direction: column; line-height: .95; gap: 2px; font-family: var(--iv-serif); font-weight: 600; font-size: 21px; color: var(--iv-navy); }
.ivx-logo--light .ivx-logo__text { color: var(--iv-white); }
.ivx-site-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--iv-line); border-radius: 12px; background: var(--iv-white); }
.ivx-site-toggle span { display: block; height: 2px; background: var(--iv-navy); border-radius: 2px; }
.ivx-site-nav { flex-basis: 100%; }
@media (min-width: 1200px) { .ivx-site-nav { flex-basis: auto; align-items: center; gap: 20px; } }
.ivx-site-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
@media (min-width: 1200px) { .ivx-site-links { flex-direction: row; gap: 4px; } }
.ivx-site-links a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-weight: 600; font-size: 15px; color: var(--iv-navy); text-decoration: none; }
.ivx-site-links a:hover { color: var(--iv-blue); text-decoration: none; }
.ivx-site-actions { display: flex; gap: 10px; padding: 8px 0; }
.ivx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none !important; border: 1.5px solid transparent; }
.ivx-btn-primary { background: var(--iv-navy); color: var(--iv-white) !important; border-color: var(--iv-navy); }
.ivx-btn-primary:hover { background: var(--iv-ink); border-color: var(--iv-ink); color: var(--iv-white) !important; }

/* Client area header (Twenty-One) */
.ivx .header { background: var(--iv-navy); box-shadow: none; }
.ivx .header .topbar { background: var(--iv-navy-deep); color: var(--iv-on-navy); }
.ivx .header .topbar .btn, .ivx .header .topbar .input-group-text { color: var(--iv-on-navy); background: transparent; border: 0; }
.ivx .header .topbar .btn-active-client { color: var(--iv-white); font-weight: 600; }
.ivx .main-navbar-wrapper { background: var(--iv-navy); padding: 0; }
.ivx .main-navbar-wrapper .navbar-nav .nav-link { color: #D3E1EE; font-weight: 600; font-size: 15px; padding: 15px 14px; }
.ivx .main-navbar-wrapper .navbar-nav .nav-link:hover, .ivx .main-navbar-wrapper .navbar-nav .nav-item.active > .nav-link,
.ivx .main-navbar-wrapper .navbar-nav .show > .nav-link { color: var(--iv-white); box-shadow: inset 0 -3px 0 var(--iv-gold); }
.ivx .ivx-ca-title { color: var(--iv-white); font-family: var(--iv-serif); font-weight: 600; font-size: 18px; }
.ivx .main-navbar-wrapper .toolbar .nav-link { color: var(--iv-white); }
.ivx .main-navbar-wrapper .dropdown-menu { border: 1px solid var(--iv-line); border-radius: 14px; box-shadow: 0 12px 30px rgba(11,36,64,.12); padding: 8px; }
.ivx .main-navbar-wrapper .dropdown-item { border-radius: 8px; color: var(--iv-ink); padding: 8px 12px; }
.ivx .main-navbar-wrapper .dropdown-item:hover, .ivx .main-navbar-wrapper .dropdown-item:focus { background: var(--iv-cream); color: var(--iv-navy); }
.ivx .header .search .form-control { border-radius: 0 999px 999px 0; border: 0; background: var(--iv-cream); }
.ivx .header .search .btn { border-radius: 999px 0 0 999px; border: 0; background: var(--iv-cream); color: var(--iv-navy); }
.ivx .badge-info { background: var(--iv-gold); color: var(--iv-ink); }

/* Breadcrumb */
.ivx .master-breadcrumb { background: transparent; }
.ivx .master-breadcrumb .breadcrumb { background: transparent; padding: 18px 0 0; font-size: 14px; }
.ivx .master-breadcrumb .breadcrumb-item a { color: var(--iv-muted); }
.ivx .master-breadcrumb .breadcrumb-item.active { color: var(--iv-navy); font-weight: 600; }

/* Main body, cards, sidebar */
.ivx #main-body { background: transparent; padding: 28px 0 64px; }
.ivx .card { background: var(--iv-white); border: 1px solid var(--iv-line); border-radius: 20px; box-shadow: none; }
.ivx .card-header { background: var(--iv-white); border-bottom: 1px solid var(--iv-line); border-radius: 20px 20px 0 0 !important; }
.ivx .card-header .card-title, .ivx .card-title { font-family: var(--iv-serif); font-weight: 600; color: var(--iv-navy); }
.ivx .card-footer { background: var(--iv-white); border-top: 1px solid var(--iv-line-soft); border-radius: 0 0 20px 20px !important; }
.ivx .sidebar .card { border-radius: 18px; overflow: hidden; }
.ivx .sidebar .card-header { background: var(--iv-white); }
.ivx .sidebar .list-group-item { border-color: var(--iv-line-soft); color: var(--iv-ink); }
.ivx .sidebar .list-group-item:hover { background: var(--iv-cream); color: var(--iv-navy); }
.ivx .sidebar .list-group-item.active { background: var(--iv-cream-2); color: var(--iv-navy); border-color: var(--iv-line); box-shadow: inset 4px 0 0 var(--iv-gold); font-weight: 600; }
.ivx .sidebar .list-group-item .badge { background: var(--iv-sky); color: var(--iv-navy); }

/* Dashboard tiles (Welcome back / counts) */
.ivx .tiles .tile { background: var(--iv-white); border: 1px solid var(--iv-line); border-radius: 20px; padding: 22px 24px; margin-bottom: 16px; transition: border-color .2s ease; }
.ivx .tiles .tile:hover { border-color: var(--iv-blue); background: var(--iv-white); }
.ivx .tiles .tile i { color: var(--iv-sky); }
.ivx .tiles .tile .stat { font-family: var(--iv-serif); font-weight: 700; font-size: 36px; color: var(--iv-navy); }
.ivx .tiles .tile .title { font-size: 14px; font-weight: 600; color: var(--iv-muted); text-transform: none; }
.ivx .tiles .tile .highlight { height: 3px; border-radius: 3px; }
.ivx .tiles .tile .highlight.bg-color-blue { background: var(--iv-navy) !important; }
.ivx .tiles .tile .highlight.bg-color-green { background: #1E6B45 !important; }
.ivx .tiles .tile .highlight.bg-color-red { background: var(--iv-red) !important; }
.ivx .tiles .tile .highlight.bg-color-gold { background: var(--iv-gold) !important; }
.ivx .client-home-cards .card { margin-bottom: 20px; }
.ivx .client-home-cards .card-header .btn { border-radius: 999px; }

/* Buttons */
.ivx .btn { border-radius: 999px; font-weight: 600; }
.ivx .btn-primary { background: var(--iv-navy); border-color: var(--iv-navy); color: var(--iv-white); font-weight: 700; }
.ivx .btn-primary:hover, .ivx .btn-primary:focus, .ivx .btn-primary:active { background: var(--iv-ink) !important; border-color: var(--iv-ink) !important; color: var(--iv-white) !important; }
.ivx .btn-default, .ivx .btn-secondary, .ivx .btn-outline-primary { background: var(--iv-white); border: 1.5px solid var(--iv-navy); color: var(--iv-navy); }
.ivx .btn-default:hover, .ivx .btn-secondary:hover, .ivx .btn-outline-primary:hover { background: var(--iv-navy); border-color: var(--iv-navy); color: var(--iv-white); }
.ivx .btn-success { background: var(--iv-gold); border-color: var(--iv-gold); color: var(--iv-ink); font-weight: 700; }
.ivx .btn-success:hover { background: var(--iv-gold-deep); border-color: var(--iv-gold-deep); color: var(--iv-ink); }
.ivx .btn-danger { background: var(--iv-red); border-color: var(--iv-red); }
.ivx .btn-link { border-radius: 0; color: var(--iv-navy); }
.ivx .header .btn, .ivx .header .topbar .btn, .ivx .input-group .btn, .ivx .search .btn { border-radius: inherit; }

/* Forms */
.ivx .form-control, .ivx .custom-select { border: 1px solid #CFC8AD; border-radius: 12px; min-height: 44px; color: var(--iv-ink); }
.ivx .form-control:focus, .ivx .custom-select:focus { border-color: var(--iv-blue); box-shadow: 0 0 0 3px rgba(64,128,185,.25); }
.ivx label, .ivx .control-label { color: var(--iv-navy); font-weight: 600; }

/* Tables (services, invoices, tickets, domains) */
.ivx .table-container, .ivx .dataTables_wrapper { background: var(--iv-white); border: 1px solid var(--iv-line); border-radius: 20px; overflow: hidden; }
.ivx table.table-list { font-size: 15px; }
.ivx table.table-list thead th { background: var(--iv-white); color: var(--iv-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--iv-line) !important; }
.ivx table.table-list tbody td { border-top: 1px solid var(--iv-line-soft); color: #33424F; }
.ivx table.table-list tbody tr:hover td { background: var(--iv-cream); }
.ivx .table-list a, .ivx table.table-list tbody td strong { color: var(--iv-navy); }

/* Status labels: soft pills like the mockup */
.ivx .label, .ivx .status { border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; }
.ivx .status-active, .ivx .status-paid, .ivx .status-completed, .ivx .status-open { background: #E3F2EA; color: #1E6B45; }
.ivx .status-pending, .ivx .status-unpaid, .ivx .status-customer-reply, .ivx .status-answered { background: var(--iv-cream-2); color: #7A5A00; }
.ivx .status-suspended, .ivx .status-overdue, .ivx .status-cancelled, .ivx .status-terminated, .ivx .status-fraud { background: #FBE6E4; color: #9B231D; }
.ivx .status-closed, .ivx .status-expired { background: #ECEEF1; color: var(--iv-muted); }

/* Alerts */
.ivx .alert { border-radius: 14px; border-width: 1px; }
.ivx .alert-info { background: var(--iv-sky); border-color: #CFE0F0; color: var(--iv-ink); }
.ivx .alert-warning { background: var(--iv-cream-2); border-color: #EADFA8; color: #5C4600; }
.ivx .alert-success { background: #E3F2EA; border-color: #BFE1CD; color: #1E5136; }
.ivx .alert-danger { background: #FBE6E4; border-color: #F2C3BF; color: #7E1D18; }

/* Knowledge base and announcements */
.ivx .kb-category, .ivx .kb-article-item { border-radius: 14px; }
.ivx .kb-search .form-control { border-radius: 999px; }

/* Homepage domain search band */
.ivx .home-domain-search { background: var(--iv-navy); }
.ivx .home-domain-search h2, .ivx .home-domain-search .h2 { color: var(--iv-white); }
.ivx .home-domain-search .input-group-wrapper { border-radius: 999px; overflow: hidden; }
.ivx .home-domain-search .btn { border-radius: 999px; }
.ivx .home-domain-search .btn-primary, .ivx .home-domain-search .btn-success { background: var(--iv-gold); border-color: var(--iv-gold); color: var(--iv-ink); }

/* Login and registration */
.ivx .login-form .card, .ivx .logincontainer { border-radius: 20px; }

/* Modals */
.ivx .modal-content { border: 1px solid var(--iv-line); border-radius: 20px; }
.ivx .modal-header { border-bottom: 1px solid var(--iv-line); }
.ivx .modal-localisation .modal-content { background: var(--iv-navy); }

/* Site footer */
.ivx-site-footer { background: var(--iv-navy-deep); color: var(--iv-on-navy); padding: 64px 24px 28px; margin-top: 0; }
.ivx-site-footer__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 40px; }
.ivx-ft-brand p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; max-width: 380px; }
.ivx-ft-tagline { font-family: var(--iv-serif); font-weight: 600; font-size: 18px; color: var(--iv-white); }
.ivx-ft-head { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--iv-gold); }
.ivx-ft-col ul { list-style: none; margin: 0; padding: 0; }
.ivx-ft-col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--iv-on-navy); font-size: 15px; }
.ivx-ft-col a:hover { color: var(--iv-white); }
.ivx-site-footer__bottom { max-width: 1200px; margin: 40px auto 0; padding-top: 22px; border-top: 1px solid rgba(191,211,230,.22); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.ivx-site-footer__bottom .copyright { margin: 0; font-size: 14px; color: var(--iv-on-navy); }
.ivx-ft-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ivx-ft-legal a, .ivx-ft-locale { display: inline-flex; align-items: center; min-height: 44px; color: var(--iv-on-navy) !important; font-size: 14px; padding: 0; }
.ivx-ft-legal a:hover { color: var(--iv-white) !important; }
@media (max-width: 991px) { .ivx-site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ivx-ft-brand { grid-column: 1 / -1; } }
@media (max-width: 575px) { .ivx-site-footer__inner { grid-template-columns: minmax(0, 1fr); } .ivx-logo__text { font-size: 19px; } .ivx-logo img { width: 44px; height: 44px; } }