/* *****************************************************
   Etheron.nl Custom Stylesheet for WHMCS
   Based on exact styling from etheron.nl/includes/stylesheet.css
***************************************************** */

/* ==========================================
   FONT FACES - From Etheron.nl stylesheet.css
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* ==========================================
   BASE STYLES - From Etheron.nl stylesheet.css
   ========================================== */
body, html {
    scroll-behavior: smooth;
    font-display: swap;
    background-size: 100% auto;
    z-index: 1;
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    font-family: 'Rubik', sans-serif;
}

* {
    box-sizing: border-box;
}

P {
    font-size: 1.1rem;
}

a {
    text-decoration: none;
    color: #0c94ab;
}

a:hover {
    text-decoration: underline;
    color: #0a7a8f;
}

/* ==========================================
   ETHERON COLORS - From stylesheet.css
   ========================================== */
.blauw { color: #0c94ab; }
.groen { color: #0c94ab; }
.groenl { color: #AEDCC0; }
.donkergroen { color: #1b3d05; }
.grijsl { color: #343E3D; }
.grijs { color: #343E3D; }
.bg-blauw { background-color: #0c94ab; }
.bg-groen { background-color: #0c94ab; }
.bg-groenl { background-color: #AEDCC0; }
.bg-grijsl { background-color: #607466; }
.bg-grijs { background-color: #343E3D; }

.bg-blur {
    background-color: rgb(255 255 255 / 0.3);
    backdrop-filter: blur(10px);
}

/* ==========================================
   ETHERON.NL HEADER - Exact match from etheron.nl (non-sticky)
   ========================================== */
.navbar.bg-header {
    background-color: rgb(255 255 255 / 0.8) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    z-index: 1050;
    font-family: 'Rubik', sans-serif;
}

.header-logo {
    max-width: 200px;
    height: auto;
}

@media (min-width: 500px) {
    .header-logo {
        max-width: 30%;
    }
}

/* Etheron Header Nav Links */
.navbar.bg-header .navbar-nav .nav-link {
    color: #343E3D !important;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    font-size: 0.95rem;
    padding: 0.5rem 0.875rem !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.navbar.bg-header .navbar-nav .nav-link:hover {
    color: #0c94ab !important;
    text-decoration: none !important;
}

/* Etheron Header Dropdowns */
.navbar.bg-header .dropdown-menu {
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 0.5rem 0;
    margin-top: 0 !important;
    min-width: 200px;
}

.navbar.bg-header .dropdown-item {
    padding: 0.5rem 1.25rem;
    font-family: 'Rubik', sans-serif;
    font-size: 0.9rem;
    color: #343E3D !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.navbar.bg-header .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #0c94ab !important;
}

.navbar.bg-header .dropdown-item:active {
    background-color: #0c94ab;
    color: #fff !important;
}

/* Hover dropdown behavior for desktop */
@media (min-width: 980px) {
    .navbar.bg-header .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* ==========================================
   WHMCS NAVIGATION BAR - Dark gray below header
   ========================================== */
.whmcs-nav-bar {
    background-color: #343E3D;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1040;
    font-family: 'Rubik', sans-serif;
}

.whmcs-nav-bar .whmcs-nav-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 0.5rem 0;
}

.whmcs-nav-bar .whmcs-nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.whmcs-nav-bar .whmcs-nav-item {
    position: relative;
}

.whmcs-nav-bar .whmcs-nav-link {
    color: #fff !important;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
    text-decoration: none !important;
    display: block;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.whmcs-nav-bar .whmcs-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff !important;
    text-decoration: none !important;
}

.whmcs-nav-bar .whmcs-nav-link i {
    margin-right: 0.35rem;
    color: #fff !important;
}

/* WHMCS Nav Dropdowns */
.whmcs-nav-bar .whmcs-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    min-width: 200px;
    z-index: 1060;
}

.whmcs-nav-bar .whmcs-nav-item.has-dropdown:hover .whmcs-dropdown-menu {
    display: block;
}

.whmcs-nav-bar .whmcs-dropdown-menu li a {
    display: block;
    padding: 0.5rem 1rem;
    color: #343E3D !important;
    font-family: 'Rubik', sans-serif;
    font-size: 0.875rem;
    text-decoration: none !important;
}

.whmcs-nav-bar .whmcs-dropdown-menu li a:hover {
    background-color: #f8f9fa;
    color: #0c94ab !important;
}

.whmcs-nav-bar .whmcs-dropdown-menu li a i {
    color: #0c94ab;
    margin-right: 0.5rem;
}

.whmcs-nav-bar .whmcs-dropdown-menu .dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

/* WHMCS Cart Button */
.whmcs-cart-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #0c94ab;
    color: #fff !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.whmcs-cart-btn:hover {
    background-color: #0a7a8f;
    color: #fff !important;
    text-decoration: none !important;
}

.whmcs-cart-btn i {
    color: #fff !important;
}

.whmcs-cart-btn .cart-count {
    background-color: #fff;
    color: #0c94ab;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ==========================================
   WHMCS SECONDARY NAVIGATION - Dark style (legacy)
   ========================================== */
.whmcs-secondary-nav {
    background-color: #343E3D;
    padding: 0;
    margin: 0;
}

.whmcs-nav-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 0.75rem 0;
}

.whmcs-nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.whmcs-nav-item {
    position: relative;
}

.whmcs-nav-link {
    color: #fff !important;
    font-weight: 500;
    font-size: 14px;
    padding: 0.5rem 1rem;
    text-decoration: none !important;
    display: block;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.whmcs-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff !important;
    text-decoration: none !important;
}

/* WHMCS Dropdown */
.whmcs-nav-item.has-dropdown {
    position: relative;
}

.whmcs-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    min-width: 200px;
    z-index: 1060;
}

.whmcs-nav-item:hover .whmcs-dropdown-menu {
    display: block;
}

.whmcs-dropdown-menu li a {
    display: block;
    padding: 0.5rem 1rem;
    color: #343E3D !important;
    font-size: 14px;
    text-decoration: none !important;
}

.whmcs-dropdown-menu li a:hover {
    background-color: #f8f9fa;
    color: #0c94ab !important;
}

/* WHMCS Cart Button */
.whmcs-cart-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #0c94ab;
    color: #fff !important;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.whmcs-cart-btn:hover {
    background-color: #0a7a8f;
    color: #fff !important;
    text-decoration: none !important;
}

.whmcs-cart-btn .cart-count {
    background-color: #fff;
    color: #0c94ab;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================
   ADMIN MASQUERADE BANNER - Clean style
   ========================================== */
.admin-masquerade-banner {
    background: linear-gradient(120deg, rgba(153,207,216,1) 0%, rgba(12,148,171,1) 100%);
    padding: 0.75rem 0;
}

.admin-masquerade-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #fff;
    font-size: 14px;
}

.admin-masquerade-content i {
    font-size: 1.1rem;
}

.admin-return-btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff !important;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.admin-return-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
    color: #fff !important;
    text-decoration: none !important;
}

/* ==========================================
   GREETING BANNER - Blue gradient
   ========================================== */
.greeting-banner {
    background: linear-gradient(120deg, rgba(153,207,216,1) 0%, rgba(12,148,171,1) 50%);
    padding: 2rem 0;
    margin-bottom: 0;
}

.greeting-text {
    color: #fff;
    font-size: 2rem;
    font-weight: 300;
    margin: 0;
}

/* ==========================================
   FOOTER STYLING - From stylesheet.css
   ========================================== */
.achtergrond-donker-footer {
    background-image: url(https://etheron.nl/includes/img/footer.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    background-color: #151616;
    font-family: 'Rubik', sans-serif;
}

.achtergrond-donker-footer * {
    font-family: 'Rubik', sans-serif;
}

.page-footer {
    font-family: 'Rubik', sans-serif;
}

.page-footer * {
    font-family: 'Rubik', sans-serif;
}

.text-secondary {
    color: #8d9191 !important;
}

p > .text-secondary:hover {
    color: #7BD389 !important;
    text-decoration: none;
}

/* ==========================================
   BUTTON STYLING - From stylesheet.css
   ========================================== */
.btn-success {
    background-color: #0c94ab !important;
    border-color: #0c94ab !important;
    color: #fff !important;
    transition: all 0.3s ease;
    border-radius: 10px 10px 0px 10px;
}

.btn-success:hover {
    background-color: #0a7a8f !important;
    border-color: #0a7a8f !important;
    color: #fff !important;
}

.btn-primary {
    background-color: #0c94ab !important;
    border-color: #0c94ab !important;
    color: #fff !important;
    border-radius: 10px 10px 0px 10px !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #0a7a8f !important;
    border-color: #0a7a8f !important;
    color: #fff !important;
}

.btn-info {
    background-color: #0c94ab !important;
    border-color: #0c94ab !important;
    color: #fff !important;
    border-radius: 10px 10px 0px 10px !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #0a7a8f !important;
    border-color: #0a7a8f !important;
}

.btn-default,
.btn-secondary {
    background-color: #fff !important;
    border-color: #0c94ab !important;
    color: #0c94ab !important;
    border-radius: 10px 10px 0px 10px !important;
    font-weight: 500;
}

.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #0c94ab !important;
    color: #fff !important;
}

.btn-link {
    color: #0c94ab !important;
}

.btn-link:hover {
    color: #0a7a8f !important;
}

.btn-corner {
    border-radius: 10px 10px 0px 10px;
}

.btn-corner-simple {
    border-radius: 10px 10px 0px 10px;
}

/* ==========================================
   CARD & RADIUS STYLING - From stylesheet.css
   ========================================== */
.img-radius {
    border-radius: 35px 35px 0px 35px;
}

.input-radius {
    border-radius: 15px 15px 0px 15px;
}

.card-radius {
    border-radius: 16px 16px 0 16px !important;
}

.card-blur {
    background-color: rgba(255, 255, 255, 0.753);
    backdrop-filter: blur(10px);
    border-radius: 35px 35px 0px 35px;
}

.table-responsive {
    border-radius: 35px 35px 0px 35px;
}
/* ...but never inside a card: the 35px arc curved right across the table
   header text on the invoice page */
#main-body .card .table-responsive {
    border-radius: 0;
}

/* ==========================================
   GRADIENT BACKGROUNDS - From stylesheet.css
   ========================================== */
.bg-gradient-blauw-1 {
    background: linear-gradient(120deg, rgba(153,207,216,1) 0%, rgba(12,148,171,1) 50%);
    border-radius: 45px 45px 0px 45px;
}

.bg-gradient-blauw-2 {
    background: linear-gradient(120deg, rgba(153,207,216,1) 0%, rgba(12,148,171,1) 50%);
}

.achtergrond-gradient-1 {
    background: linear-gradient(120deg, rgba(153,207,216,1) 0%, rgba(12,148,171,1) 50%);
}

/* ==========================================
   FORM STYLING
   ========================================== */
.form-control:focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 0.2rem rgba(12, 148, 171, 0.25);
}

/* ==========================================
   CARDS & PANELS
   ========================================== */
.card,
.panel {
    border: 1px solid #e9ecef;
    border-radius: 16px 16px 0 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.card-header,
.panel-heading {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.25rem;
}

.card-body,
.panel-body {
    padding: 1.25rem;
}

/* ==========================================
   SIDEBAR STYLING
   ========================================== */
.sidebar {
    margin-bottom: 1.5rem;
}

.sidebar .list-group-item {
    border: none;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0 !important;
    padding: 0.875rem 1rem;
    color: #343E3D;
    transition: all 0.2s ease;
}

.sidebar .list-group-item:hover {
    background-color: #f8f9fa;
    color: #0c94ab;
}

.sidebar .list-group-item.active {
    background-color: #0c94ab !important;
    border-color: #0c94ab !important;
    color: #fff !important;
}

.sidebar .list-group-item i {
    margin-right: 0.5rem;
    color: #0c94ab;
}

.sidebar .list-group-item.active i {
    color: #fff;
}

/* ==========================================
   TABLES
   ========================================== */
.table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #0c94ab;
    color: #343E3D;
    font-weight: 600;
    padding: 0.875rem 1rem;
}

.table tbody td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(12, 148, 171, 0.03);
}

.table-hover tbody tr:hover {
    background-color: rgba(12, 148, 171, 0.06);
}

/* ==========================================
   ALERTS
   ========================================== */
.alert {
    border-radius: 8px;
    border: none;
    padding: 1rem 1.25rem;
}

.alert-info {
    background-color: rgba(12, 148, 171, 0.1);
    color: #0a7a8f;
}

.alert-success {
    background-color: rgba(12, 148, 171, 0.1);
    color: #0a7a8f;
}

/* ==========================================
   BADGES & LABELS
   ========================================== */
.badge-primary,
.label-primary {
    background-color: #0c94ab !important;
}

.badge-success,
.label-success {
    background-color: #0c94ab !important;
}

.badge-info,
.label-info {
    background-color: #0c94ab !important;
}

/* ==========================================
   CLIENT AREA TILES/STATS
   ========================================== */
.tile,
.home-panel,
.client-home-panel {
    background: #fff;
    border-radius: 16px 16px 0 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.tile:hover,
.home-panel:hover,
.client-home-panel:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.tile .stat,
.tile .count,
.home-panel .stat {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0c94ab !important;
    line-height: 1;
}

.tile .title,
.home-panel .title {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
    margin-top: 0.5rem;
}

.tile i,
.home-panel i {
    color: #0c94ab;
}

/* ==========================================
   PAGINATION
   ========================================== */
.pagination .page-link {
    color: #0c94ab;
    border-radius: 6px;
    margin: 0 2px;
    border: 1px solid #dee2e6;
}

.pagination .page-item.active .page-link {
    background-color: #0c94ab;
    border-color: #0c94ab;
    color: #fff;
}

.pagination .page-link:hover {
    background-color: #f8f9fa;
    color: #0a7a8f;
}

/* ==========================================
   UTILITY OVERRIDES
   ========================================== */
.text-primary { color: #0c94ab !important; }
.text-success { color: #0c94ab !important; }
.text-info { color: #0c94ab !important; }
.bg-primary { background-color: #0c94ab !important; }
.bg-success { background-color: #0c94ab !important; }
.bg-info { background-color: #0c94ab !important; }
.border-primary { border-color: #0c94ab !important; }

/* ==========================================
   WHMCS SPECIFIC OVERRIDES
   ========================================== */
/* Hide default WHMCS header */
#header.header {
    display: none !important;
}

/* Fix main body spacing */
#main-body {
    padding-top: 1.5rem;
    min-height: calc(100vh - 300px);
}

/* Ensure dropdowns work properly */
.dropdown-menu {
    z-index: 1060;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 991.98px) {
    .whmcs-nav-content {
        flex-direction: column;
        gap: 1rem;
    }

    .whmcs-nav-links {
        justify-content: center;
    }

    .greeting-text {
        font-size: 1.5rem;
    }

    .admin-masquerade-content {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .whmcs-nav-links {
        flex-direction: column;
        width: 100%;
    }

    .whmcs-nav-item {
        width: 100%;
    }

    .whmcs-nav-link {
        text-align: center;
    }

    .whmcs-dropdown-menu {
        position: static;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.1);
        margin: 0;
    }

    .whmcs-dropdown-menu li a {
        color: #fff !important;
        text-align: center;
    }
}

/* ==========================================
   CLIENTAREA HOME - Simple Design
   ========================================== */
.clientarea-home {
    padding: 1rem 0;
}

/* Home Cards Base Style */
.home-card {
    background: #fff;
    border-radius: 16px 16px 0 16px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.home-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Welcome Card */
.welcome-card {
    padding: 1.5rem;
}

.welcome-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #343E3D;
    margin: 0 0 1.25rem 0;
}

/* Quick Links */
.quick-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.quick-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    color: #343E3D;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.quick-link:hover {
    background-color: #f8f9fa;
    color: #0c94ab;
    text-decoration: none;
}

.quick-link i {
    width: 24px;
    color: #6c757d;
    font-size: 1rem;
}

.quick-link span {
    flex: 1;
    font-size: 0.95rem;
}

.quick-link .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
}

/* Status Card */
.status-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    font-weight: 500;
    font-size: 0.9rem;
    border-left: 4px solid;
}

.status-card.status-operational {
    background-color: rgba(12, 148, 171, 0.1);
    border-left-color: #0c94ab;
    color: #0a7a8f;
}

.status-card.status-operational i {
    color: #0c94ab;
    font-size: 1.1rem;
}

.status-card.status-issue {
    background-color: rgba(255, 193, 7, 0.1);
    border-left-color: #ffc107;
    color: #cc9a06;
}

/* Announcements Card */
.announcements-card {
    padding: 1.25rem;
}

.card-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #343E3D;
    margin: 0 0 1rem 0;
}

.announcement-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.announcement-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    color: #343E3D;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    line-height: 1.4;
}

.announcement-item:hover {
    background-color: #f8f9fa;
    color: #0c94ab;
    text-decoration: none;
}

.announcement-item i {
    color: #0c94ab;
    font-size: 1rem;
    margin-top: 2px;
    opacity: 0.6;
}

/* Domain Checker Card */
.domain-checker-card {
    padding: 0.5rem;
    background: #f8f9fa;
}

.domain-input-group {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 16px 16px 0 16px;
    padding: 0.35rem 0.35rem 0.35rem 1.25rem;
    border: 1px solid #e9ecef;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.domain-input-group i {
    color: #6c757d;
    font-size: 1.1rem;
}

.domain-input {
    flex: 1;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    background: transparent;
    outline: none;
}

.domain-input::placeholder {
    color: #adb5bd;
}

.domain-check-btn {
    background: #0c94ab;
    color: #fff;
    border: none;
    padding: 0.875rem 1.75rem;
    border-radius: 14px 14px 0 14px;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 4px 12px rgba(12, 148, 171, 0.2);
}

.domain-check-btn:hover {
    background: #0a7a8f;
    box-shadow: 0 6px 16px rgba(12, 148, 171, 0.3);
    transform: translateY(-2px);
}

/* Stat Cards */
.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
}

.stat-card:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-icon-blue {
    background: rgba(12, 148, 171, 0.15);
    color: #0c94ab;
}

.stat-icon-light {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.stat-icon-green {
    background: rgba(12, 148, 171, 0.15);
    color: #0c94ab;
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 600;
    color: #343E3D;
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Action Cards */
.action-card {
    padding: 1.5rem;
}

.action-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #343E3D;
    font-weight: 500;
}

.action-header i {
    color: #0c94ab;
    font-size: 1.1rem;
}

.action-btn {
    display: inline-block;
    background: #0c94ab;
    color: #fff !important;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: #0a7a8f;
    color: #fff !important;
    text-decoration: none !important;
}

/* WHMCS Panels */
.whmcs-panel {
    padding: 1.25rem;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #343E3D;
    margin-bottom: 1rem;
}

.panel-header i {
    color: #0c94ab;
}

.panel-body {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.panel-links {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.panel-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    color: #343E3D;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.panel-link:hover {
    background-color: #f8f9fa;
    color: #0c94ab;
    text-decoration: none;
}

.panel-link i {
    color: #6c757d;
    width: 20px;
}

.panel-link.active {
    background-color: #0c94ab;
    color: #fff;
}

.panel-link.active i {
    color: #fff;
}

.panel-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
    font-size: 0.875rem;
    color: #6c757d;
}

.panel-action {
    margin-top: 1rem;
}

/* Extra Panels Section */
.extra-panels {
    margin-top: 1rem;
}

/* Responsive */
@media (max-width: 991.98px) {
    .clientarea-home .col-lg-4 {
        margin-bottom: 1rem;
    }
}

@media (max-width: 767.98px) {
    .stat-card {
        padding: 1rem;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .domain-check-btn {
        padding: 0.75rem 1rem;
    }
}

/* ==========================================
   ICON COLORS - Etheron Brand Colors
   ========================================== */

/* Primary icon color - Teal/Cyan (default for most icons) */
.fas, .far, .fal, .fad {
    color: #0c94ab;
}

/* Icons in specific contexts that should inherit parent color */
.btn .fas, .btn .far, .btn .fal,
.nav-link .fas, .nav-link .far, .nav-link .fal,
.dropdown-item .fas, .dropdown-item .far, .dropdown-item .fal,
a .fas, a .far, a .fal,
.text-white .fas, .text-white .far, .text-white .fal,
.text-success .fas, .text-danger .fas,
.badge .fas, .badge .far,
[class*="alert"] .fas, [class*="alert"] .far {
    color: inherit;
}

/* Footer icons - white */
.page-footer .fas,
.page-footer .far,
.page-footer .fab,
.page-footer i {
    color: #fff !important;
}

/* Footer contact section icons */
.page-footer .text-secondary .fas,
.page-footer .text-secondary .fab {
    color: #fff !important;
}

/* Social media icons in footer - keep white */
.page-footer a.text-white .fab {
    color: #fff !important;
}

/* Sidebar icons */
.sidebar .list-group-item .fas,
.sidebar .list-group-item .far,
.sidebar .list-group-item .fal {
    color: #0c94ab;
}

.sidebar .list-group-item.active .fas,
.sidebar .list-group-item.active .far,
.sidebar .list-group-item.active .fal {
    color: #fff;
}

/* Table icons - status colors */
.text-success .fas, .text-success .far { color: #0c94ab !important; }
.text-danger .fas, .text-danger .far { color: #dc3545 !important; }
.text-warning .fas, .text-warning .far { color: #ffc107 !important; }
.text-info .fas, .text-info .far { color: #0c94ab !important; }
.text-muted .fas, .text-muted .far { color: #6c757d !important; }

/* Knowledge base and downloads folder icons */
.fal.fa-folder,
.fal.fa-folder-open {
    color: #0c94ab;
}

.fal.fa-file-alt {
    color: #6c757d;
}

.fal.fa-star {
    color: #ffc107;
}

/* Error page icons */
.error .fas.fa-exclamation-circle,
[class*="error"] .fas.fa-exclamation-circle {
    color: #0c94ab !important;
}

/* Spinner/loading icons - keep brand color */
.fa-spinner, .fa-spin {
    color: #0c94ab;
}

/* Modal close icons */
.close .fas, .close .fal, .close .far,
.btn-close .fas {
    color: inherit;
}

/* Domain checker icon */
.domain-input-group .fas {
    color: #6c757d;
}

/* Cart button icon */
.whmcs-cart-btn .fas {
    color: #fff !important;
}

/* Header nav icons */
.etheron-nav .nav-link .fas,
.etheron-nav .nav-link .far {
    color: inherit;
}

/* Product details stacked icons */
.fa-stack .fas {
    color: inherit;
}

.fa-stack .fa-circle {
    color: #0c94ab;
}

.fa-stack .fa-inverse {
    color: #fff !important;
}

/* Domain details promo icons */
.clientareadomaindetails .fas.fa-shield-alt,
.clientareadomaindetails .fas.fa-cloud,
.clientareadomaindetails .fas.fa-envelope {
    color: #0c94ab;
}

/* ==========================================
   FOOTER PAYMENT METHODS - Proper Spacing
   ========================================== */
.page-footer .d-flex.flex-wrap {
    gap: 0 !important;
}

.page-footer .d-flex.flex-wrap > span {
    margin-right: 1.5rem;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
    white-space: nowrap;
}

.page-footer .d-flex.flex-wrap > span:last-child {
    margin-right: 0;
}

/* Alternative: use pipe separators visually */
.payment-methods-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.payment-methods-list span {
    padding: 0.25rem 0.75rem;
    position: relative;
}

.payment-methods-list span:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: 0;
    color: #6c757d;
}

/* ==========================================
   MOBILE HEADER RESPONSIVE
   ========================================== */
@media (max-width: 991.98px) {
    /* Etheron header mobile */
    .navbar.bg-header .dropdown-menu {
        position: static !important;
        box-shadow: none;
        border: none;
        padding-left: 1rem;
        margin-top: 0 !important;
    }

    /* WHMCS Nav Bar mobile */
    .whmcs-nav-bar .whmcs-nav-content {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem 0;
    }

    .whmcs-nav-bar .whmcs-nav-links {
        justify-content: center;
        width: 100%;
    }

    .whmcs-nav-bar .whmcs-dropdown-menu {
        position: static;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.1);
        margin: 0;
        width: 100%;
    }

    .whmcs-nav-bar .whmcs-dropdown-menu li a {
        color: #fff !important;
        text-align: center;
    }

    .whmcs-nav-bar .whmcs-dropdown-menu li a:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff !important;
    }
}

/* The dark client-area nav used to render fully expanded on phones (a ~450px
   wall of links on every page). It now collapses behind a "Menu" bar via the
   CSS checkbox in header.tpl; the cart button stays on the bar. */
.whmcs-nav-toggle-cb,
.whmcs-nav-toggle {
    display: none;
}
@media (max-width: 767.98px) {
    .whmcs-nav-bar .whmcs-nav-content {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
        padding: 0;
    }
    .whmcs-nav-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        padding: 14px 4px;
        margin: 0;
        cursor: pointer;
        user-select: none;
    }
    .whmcs-nav-toggle-chevron {
        transition: transform .2s;
    }
    .whmcs-nav-toggle-cb:checked ~ .whmcs-nav-toggle .whmcs-nav-toggle-chevron {
        transform: rotate(180deg);
    }
    .whmcs-nav-bar .whmcs-nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        order: 3;
        padding-bottom: 10px;
    }
    .whmcs-nav-toggle-cb:checked ~ .whmcs-nav-links {
        display: flex;
    }
    .whmcs-nav-bar .whmcs-cart-btn {
        margin-left: 12px;
    }

    .whmcs-nav-bar .whmcs-nav-item {
        width: 100%;
    }

    .whmcs-nav-bar .whmcs-nav-link {
        text-align: center;
        padding: 0.625rem 1rem;
    }

    /* Wide tables (services, domains, invoices, ...) were clipped at the
       right viewport edge on phones — scroll them inside their own card
       instead. !important: the base .table-container rule further down sets
       overflow: hidden (for the rounded corners) and would win the cascade. */
    #main-body .table-container,
    #main-body .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Pagination (DataTables lists): wrap onto multiple lines instead of
       running past the viewport when there are many pages. */
    #main-body .dataTables_paginate,
    #main-body .dataTables_paginate .pagination,
    #main-body ul.pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
        max-width: 100%;
    }

    /* Bulk-action button rows (domains page) stack full width on phones
       instead of cramming four multi-line buttons side by side. */
    #main-body .btn-group:has(> .setBulkAction) {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 6px;
    }
    #main-body .btn-group > .setBulkAction {
        width: 100%;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Form action buttons (details, contacts, profile): full width on
       phones per the form design. NB: on some pages the <form> wraps the
       card instead of living inside .card-body, so don't require
       ".card-body form" nesting. */
    #main-body .card-body input[type="submit"].btn,
    #main-body .card-body button[type="submit"].btn,
    #main-body .card-body input[type="reset"].btn {
        display: block;
        width: 100%;
        margin: 0 0 10px !important;
    }

    /* Kennisbank search (home, submitticket, knowledgebase): the desktop
       pill (floating icon + borderless input + attached button) falls apart
       when stacked — on phones drop the pill and render a plain bordered
       field with a full-width button under it. */
    #main-body .kb-search-card .domain-input-group {
        display: flex;
        flex-wrap: wrap;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    #main-body .kb-search-card .domain-input-group .fa-search {
        display: none;
    }
    #main-body .kb-search-card .domain-input {
        flex: 1 1 100%;
        width: 100%;
        height: auto;
        background: #fff !important;
        border: 1.5px solid #dfe6e3 !important;
        border-radius: 12px !important;
        padding: 13px 14px !important;
        font-size: 15px;
    }
    #main-body .kb-search-card .domain-input:focus {
        border-color: #0c94ab !important;
        box-shadow: 0 0 0 3px rgba(12,148,171,.15) !important;
        outline: none;
    }
    #main-body .kb-search-card .domain-check-btn {
        flex: 1 1 100%;
        height: 48px;
        margin: 10px 0 0 !important;
        border-radius: 10px 10px 0 10px !important;
        position: static !important;
    }

    /* Tables that live directly in a card body (e.g. linked accounts on the
       security page) get the same scroll-in-card treatment as list tables. */
    #main-body .card-body:has(> table),
    #main-body .card-body:has(> .table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Domain search hero: the decorative magnifier icon has no anchor once
       the pill stacks — hide it on phones. */
    #order-standard_cart.etheron-domain-page .etheron-domain-search-icon {
        display: none;
    }
    #order-standard_cart.etheron-domain-page .etheron-domain-search .form-control {
        padding-left: 12px;
    }
    /* Pricing table header: four labels over three stacked columns made no
       sense on phones — drop the "Domein" cell, the TLD names speak for
       themselves. */
    #order-standard_cart.etheron-domain-page .tld-pricing-header .tld-column {
        display: none;
    }
}

/* Knowledgebase Search */
.kb-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 5px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
    z-index: 1000;
    max-height: 350px;
    overflow-y: auto;
}

.kb-result-item {
    display: block;
    padding: 0.75rem 1.25rem;
    color: #343E3D;
    text-decoration: none;
    border-bottom: 1px solid #f8f9fa;
    transition: all 0.2s ease;
}

.kb-result-item:last-child {
    border-bottom: none;
}

.kb-result-item:hover {
    background: #f8f9fa;
    color: #0c94ab;
    text-decoration: none;
}

.kb-result-item .kb-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kb-result-item .kb-summary {
    font-size: 0.85rem;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 1.5rem;
}

.kb-no-results {
    padding: 1rem 1.25rem;
    color: #6c757d;
    text-align: center;
    font-style: italic;
}

.kb-simple-btn {
    background: #0c94ab !important;
    color: #fff !important;
    border: none;
    padding: 0.875rem 1.5rem !important;
    border-radius: 14px 14px 0 14px !important;
    font-weight: 500;
    font-size: 1rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
}

.kb-simple-btn:hover {
    background: #0a7a8f !important;
    transform: translateY(0) !important;
}

/* Force flat corners on ALL list items to prevent bootstrap rounding */
.sidebar .list-group-item,
.sidebar .list-group-item:first-child,
.sidebar .list-group-item:last-child,
.sidebar .list-group-item.active {
    border-radius: 0 !important;
}

/* ==========================================
   VIEW TICKET - Remove custom button styling
   ========================================== */
.view-ticket .btn,
.view-ticket .btn-default,
.view-ticket .btn-primary,
.view-ticket .btn-danger,
.view-ticket .btn-sm,
.md-header .btn,
.md-header .btn-toolbar .btn,
.btn-toolbar .btn {
    border-radius: 0 !important;
}

/* ==========================================
   TICKET SIDEBAR - Override custom button styling
   ========================================== */
.ticket-sidebar-footer.card-footer {
    padding: 0 !important;
}

.ticket-sidebar-footer .btn-group,
.ticket-sidebar-footer > .btn-group {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
}

.ticket-sidebar-footer .btn {
    flex: 1 1 50%;
    border-radius: 0 !important;
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
    margin: 0 !important;
}

.ticket-sidebar-footer .btn i {
    display: none;
}

.sidebar .card-body .btn.rounded-0 {
    border-radius: 0 !important;
}

.sidebar .card-body .form-control {
    border-radius: 0 !important;
}

/* Hide Announcements and Downloads from WHMCS Menus */
.whmcs-nav-bar .whmcs-dropdown-menu li a[href*="announcements.php"],
.whmcs-nav-bar .whmcs-dropdown-menu li a[href*="downloads.php"],
.whmcs-nav-bar .whmcs-nav-link[href*="announcements.php"],
.whmcs-nav-bar .whmcs-nav-link[href*="downloads.php"],
.sidebar .list-group-item[href*="announcements.php"],
.sidebar .list-group-item[href*="downloads.php"],
a[href*="announcements"],
a[href*="downloads"] {
    display: none !important;
}

/* Also hide wrapper list items if any */
li.whmcs-nav-item:has(> a[href*="announcements.php"]),
li.whmcs-nav-item:has(> a[href*="downloads.php"]) {
    display: none !important;
}

/* Hide "Bekijk beschikbare opties" (?gid=addons) link wherever it appears
   — sidebar on services page, header dropdown under Diensten, etc. */
a[href*="gid=addons"] {
    display: none !important;
}
li.whmcs-nav-item:has(> a[href*="gid=addons"]) {
    display: none !important;
}

/* dropdown rows of hidden links collapse entirely, including the divider
   left dangling above them; a trailing divider never shows (e.g. after the
   WHOIS item was removed from the Domeinen menu) */
.whmcs-dropdown-menu li:has(> a[href*="gid=addons"]),
.whmcs-dropdown-menu li:has(> a[href*="announcements.php"]),
.whmcs-dropdown-menu li:has(> a[href*="downloads.php"]),
.whmcs-dropdown-menu li.dropdown-divider:has(+ li:last-child > a[href*="gid=addons"]),
.whmcs-dropdown-menu li.dropdown-divider:has(+ li:last-child > a[href*="announcements.php"]),
.whmcs-dropdown-menu li.dropdown-divider:has(+ li:last-child > a[href*="downloads.php"]),
.whmcs-dropdown-menu li.dropdown-divider:last-child {
    display: none !important;
}

/* Terminated services should stand out in red instead of the default neutral
   grey (which was near-invisible white-on-light on the services table). */
.status-terminated,
.product-status-terminated {
    background-color: var(--error) !important;
    color: #fff !important;
}

/* ==========================================================================
   ORDER FORM > "Kies een domein" (configure product > choose domain)
   --------------------------------------------------------------------------
   Brings this step in line with the site's domain-checker design (rounded
   controls, teal brand, gradient action button). Also undoes two issues:
   (1) the global ".domain-input-group" pill leaks onto this page where the
       same class wraps a Bootstrap grid (display:flex collapsed the grid),
   (2) _cart.scss pulled the buttons left with margin-left:-15px + tiny
       padding, so the long "Controleren" / "Verhuizen" labels were cramped.
   ========================================================================== */

/* Card container: keep children inside the rounded corners + soft shadow */
#order-standard_cart .domain-selection-options {
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* Each choice is a padded row separated by a hairline divider */
#order-standard_cart .domain-selection-options .option {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--border-muted);
    transition: background-color 0.2s ease;
}

#order-standard_cart .domain-selection-options .option:last-child {
    border-bottom: 0;
}

/* Highlight the active choice with a subtle brand tint.
   ("body" prefix matches _cart.scss specificity so this wins the grey #f8f8f8.) */
body #order-standard_cart .domain-selection-options .option-selected,
body #order-standard_cart .domain-selection-options .option:has(input[type="radio"]:checked) {
    background: rgba(12, 148, 171, 0.05);
}

/* Radio + label: aligned, comfortable, on-brand radio colour */
#order-standard_cart .domain-selection-options .option > label {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

#order-standard_cart .domain-selection-options .option > label input[type="radio"] {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: #0c94ab;
    cursor: pointer;
}

/* Neutralise the leaked ".domain-input-group" pill: here it only wraps the
   grid of inputs, so strip its card visuals and use it purely as a spacer.
   NB: do NOT set "display" here — the base cart hides inactive options and
   reveals only the selected one; forcing display would open them all. */
#order-standard_cart .domain-selection-options .domain-input-group {
    margin-top: 1rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The revealed option lays out as a normal block grid (not the leaked flex
   pill). Scoped to the active choice so the others stay collapsed on load. */
body #order-standard_cart .domain-selection-options .option-selected .domain-input-group,
body #order-standard_cart .domain-selection-options .option:has(input[type="radio"]:checked) .domain-input-group {
    display: block;
}

/* Vertically centre the field group with the action button */
#order-standard_cart .domain-selection-options .domain-input-group > .row {
    align-items: center;
}

/* Inputs, selects and the "www." addon: matched height + rounded corners */
#order-standard_cart .domain-selection-options .form-control,
#order-standard_cart .domain-selection-options .input-group-text {
    height: 2.875rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.95rem;
}

/* Only the inner ".input-group-text" carries the visible chip (border + bg);
   ".input-group-addon" is just a radius wrapper, so leave it alone. */
#order-standard_cart .domain-selection-options .input-group-text {
    background: var(--bg-muted, #f4f5f6);
    color: var(--text-muted);
    border: 1px solid var(--border-muted);
    font-weight: 500;
    white-space: nowrap;
}

#order-standard_cart .domain-selection-options .form-control:focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 0.18rem rgba(12, 148, 171, 0.15);
}

/* Extension dropdown (the white <select>): drop the native OS arrow and add a
   brand "dropdown button" — a solid teal block + white chevron on the right,
   clipped to the select's rounded/pointy-bottom-right corners so it matches
   the submit button. The real <select> is kept, so WHMCS reads the value. */
body #order-standard_cart .domain-selection-options select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px 8px 0 8px;
    padding-right: 2.5rem;
    cursor: pointer;
    background-color: #fff;
    background-image:
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"),
        linear-gradient(#0c94ab, #0c94ab);
    background-repeat: no-repeat, no-repeat;
    background-position: right 0.68rem center, right center;
    background-size: 0.65rem auto, 2rem 100%;
}

/* Hide the legacy arrow in IE/Edge-legacy */
body #order-standard_cart .domain-selection-options select.form-control::-ms-expand {
    display: none;
}

/* Action button ("Controleren" / "Verhuizen" / "Gebruiken"): a static
   gradient matched to the input height, with real horizontal padding so the
   label is never clipped. No transition/transform — kept deliberately static.
   ("body" prefix overrides _cart.scss's margin-left:-15px + tiny padding.) */
body #order-standard_cart .domain-selection-options .btn-primary {
    margin-left: 0;
    height: 2.875rem;
    padding: 0 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border: none !important;
    background-color: #0c94ab !important;
    background-image: none !important;
    box-shadow: none;
    transition: none;
}

/* Hover/focus keep the same solid colour — no movement, no fade */
body #order-standard_cart .domain-selection-options .btn-primary:hover,
body #order-standard_cart .domain-selection-options .btn-primary:focus {
    background-color: #0c94ab !important;
    background-image: none !important;
    box-shadow: none;
    transform: none;
}

/* From the small breakpoint up, let the button size to its label (instead of
   filling the narrow col-sm-2) so "Controleren" gets room to breathe. */
@media (min-width: 576px) {
    #order-standard_cart .domain-selection-options .domain-input-group .col-sm-2 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding-left: 1.25rem;
    }

    body #order-standard_cart .domain-selection-options .btn-primary {
        width: auto;
    }
}

/* On mobile the button stacks below the fields — add a little breathing room */
@media (max-width: 575.98px) {
    #order-standard_cart .domain-selection-options .domain-input-group .col-sm-2 {
        margin-top: 0.75rem;
    }
}

/* ==========================================================================
   ORDER FORM > Configure product > add-ons: SINGLE-SELECT (radio).
   Lives in custom.css (plain CSS) on purpose — no Smarty parsing here, so it
   can never break the order-form template. The real checkbox and any WHMCS
   iCheck skin are hidden; the indicator is drawn from the .addon-card-selected
   class, which the order-form JS keeps limited to one card at a time.
   ========================================================================== */
#order-standard_cart .addon-card > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
#order-standard_cart .addon-card .icheckbox_square-blue,
#order-standard_cart .addon-card .iradio_square-blue,
#order-standard_cart .addon-card ins.iCheck-helper {
    display: none !important;
}

/* The ::before indicator circle that used to live here is gone: the order-form
   template now renders a real styled radio input per add-on card, so drawing a
   second circle here produced a double checkmark. */

/* ==========================================================================
   CLIENT AREA TABLES — Etheron design for every WHMCS list/table
   (services, domains, invoices, quotes, support tickets, emails, product
   pages). Covers the table itself plus the DataTables chrome around it:
   search box, info line, pagination and page-length select.
   Design tokens: ink #343E3D, muted #607466, teal #0c94ab, border #e2e6e6,
   radius 16px 16px 0 16px, soft shadows.
   ========================================================================== */

/* --- card around every list table --- */
#main-body .table-container {
    background: #fff;
    border: 0;
    border-radius: 16px 16px 0 16px;
    box-shadow: 0 1px 2px rgba(52,62,61,.05), 0 1px 1px rgba(52,62,61,.04);
    padding: 8px 20px 14px 20px;
    overflow: hidden;
}

/* --- the table itself (DataTables lists + generic .table on detail pages) --- */
#main-body table.table-list,
#main-body .table {
    color: #343E3D;
    border: 0 !important;
    margin-bottom: 8px;
    background: transparent;
}
#main-body table.table-list thead th,
#main-body .table > thead > tr > th {
    background: transparent !important;
    color: #607466 !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    border: 0 !important;
    border-bottom: 1px solid #e2e6e6 !important;
    padding: 14px 16px;
    white-space: nowrap;
}
#main-body table.table-list tbody td,
#main-body .table > tbody > tr > td {
    border: 0 !important;
    border-bottom: 1px solid #eef0f0 !important;
    padding: 16px;
    vertical-align: middle;
    font-size: 14px;
    background: transparent;
}
#main-body table.table-list tbody tr:last-child td,
#main-body .table > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}
#main-body table.table-list.table-striped tbody tr,
#main-body .table-striped > tbody > tr {
    background: transparent !important;
}
#main-body table.table-list tbody tr:hover td {
    background: #f7fafa !important;
}
#main-body table.table-list a {
    color: #0c94ab;
    text-decoration: none;
    font-weight: 500;
}
#main-body table.table-list a:hover {
    color: #0a7a8f;
    text-decoration: underline;
}

/* Sorting state on headers: teal for the active column */
#main-body table.table-list thead th.sorting_asc,
#main-body table.table-list thead th.sorting_desc {
    color: #0c94ab !important;
}

/* --- DataTables chrome --- */
#main-body .dataTables_wrapper .listtable {
    border: 0;
}
/* Search box (top right) */
#main-body .dataTables_filter input,
#main-body .dataTables_filter input[type="search"] {
    border: 1.5px solid #dfe6e3 !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    padding: 10px 14px 10px 38px !important;
    height: auto !important;
    font-size: 14px;
    color: #343E3D;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
#main-body .dataTables_filter input:focus {
    border-color: #0c94ab !important;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15) !important;
    outline: none;
}
/* Info line ("Je ziet 1 tot 1 van ...") */
#main-body .dataTables_info {
    color: #607466 !important;
    font-size: 13px;
    padding: 10px 4px;
}
/* Pagination */
#main-body .dataTables_paginate {
    padding-top: 12px;
}
#main-body .dataTables_paginate .paginate_button {
    display: inline-block;
    border: 1px solid #e2e6e6 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #343E3D !important;
    padding: 8px 14px !important;
    margin-left: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
#main-body .dataTables_paginate .paginate_button:hover {
    border-color: #0c94ab !important;
    color: #0c94ab !important;
    background: #f4fbfc !important;
}
#main-body .dataTables_paginate .paginate_button.current,
#main-body .dataTables_paginate .paginate_button.current:hover {
    background: #0c94ab !important;
    border-color: #0c94ab !important;
    color: #fff !important;
}
#main-body .dataTables_paginate .paginate_button.disabled,
#main-body .dataTables_paginate .paginate_button.disabled:hover {
    opacity: .45;
    cursor: default;
    border-color: #e2e6e6 !important;
    color: #8a9691 !important;
    background: #fff !important;
}
/* Page length ("Bekijk 10 resultaten") */
#main-body .dataTables_length {
    color: #607466 !important;
    font-size: 13px;
    padding-top: 14px;
}
#main-body .dataTables_length select {
    border: 1.5px solid #dfe6e3;
    border-radius: 0;
    padding: 6px 10px;
    background: #fff;
    color: #343E3D;
    margin: 0 6px;
}
#main-body .dataTables_length select:focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15);
    outline: none;
}

/* --- status pills in tables (Actief, In behandeling, Betaald, ...) --- */
#main-body table .label,
#main-body table .status {
    border-radius: 999px !important;
    padding: 5px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .03em;
    text-transform: none;
    display: inline-block;
    line-height: 1.2;
}

/* --- generic bordered/striped tables on detail pages (product config,
       invoices detail, ticket info) get the same clean look --- */
#main-body .table-bordered,
#main-body .table-bordered > thead > tr > th,
#main-body .table-bordered > tbody > tr > td {
    border-color: #eef0f0 !important;
}
#main-body .panel .table,
#main-body .card .table {
    margin-bottom: 0;
}

/* ==========================================================================
   CHECKBOXES, RADIOS & TOGGLES — Etheron design, client-area wide.
   Native inputs get the same look as the order-form cards (22px rounded box,
   teal when checked); the bootstrap-switch widget (marketing opt-in, SSO,
   registration) becomes a teal pill toggle.
   ========================================================================== */

/* --- native checkboxes --- */
#main-body input[type="checkbox"]:not(.toggle-switch-success) {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin: 0 6px 0 0;
    border: 2px solid #cbd5d1;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
    outline: none;
}
#main-body input[type="checkbox"]:not(.toggle-switch-success):hover {
    border-color: #0c94ab;
}
#main-body input[type="checkbox"]:not(.toggle-switch-success):focus-visible {
    box-shadow: 0 0 0 3px rgba(12,148,171,.25);
}
#main-body input[type="checkbox"]:not(.toggle-switch-success):checked {
    background: #0c94ab;
    border-color: #0c94ab;
}
#main-body input[type="checkbox"]:not(.toggle-switch-success):checked::after {
    content: '';
    position: absolute;
    left: 5.5px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* --- native radios (generic; page-specific radio styles stay in charge
       where they are more specific) --- */
#main-body input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin: 0 6px 0 0;
    border: 2px solid #cbd5d1;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    flex-shrink: 0;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
#main-body input[type="radio"]:hover { border-color: #0c94ab; }
#main-body input[type="radio"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(12,148,171,.25);
}
#main-body input[type="radio"]:checked { border-color: #0c94ab; }
#main-body input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0c94ab;
    transform: translate(-50%, -50%);
}

/* --- iCheck skins (order-form pages) get the same look --- */
#main-body .icheckbox_square-blue,
#main-body .iradio_square-blue {
    background-image: none !important;
    width: 22px;
    height: 22px;
    /* !important: on the configure page something resets the border, leaving
       an invisible white box on the white card when unchecked */
    border: 2px solid #cbd5d1 !important;
    background-color: #fff !important;
    /* a stray checked-state rule applies grayscale(1) brightness(.7)
       contrast(2), rendering the teal box near-black — kill any filter */
    filter: none !important;
    -webkit-filter: none !important;
    position: relative;
    transition: background-color .15s, border-color .15s;
}
#main-body .icheckbox_square-blue { border-radius: 7px; }
#main-body .iradio_square-blue { border-radius: 50%; }
#main-body .icheckbox_square-blue.hover,
#main-body .iradio_square-blue.hover { border-color: #0c94ab; }
#main-body .icheckbox_square-blue.checked {
    background-color: #0c94ab !important;
    border-color: #0c94ab !important;
}
#main-body .icheckbox_square-blue.checked::after {
    content: '';
    position: absolute;
    left: 5.5px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
#main-body .iradio_square-blue.checked { border-color: #0c94ab; }
#main-body .iradio_square-blue.checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0c94ab;
    transform: translate(-50%, -50%);
}

/* --- bootstrap-switch (Ja/Nee toggles): draw a clean sliding switch.
   The plugin's own three sliding segments never render acceptably (the wide
   white "knob" kept reading as a detached blob), so the segments are made
   invisible — they stay in place as click targets for the plugin JS — and
   the track + round knob are drawn from the wrapper's state classes
   (.bootstrap-switch-on / -off), which the plugin toggles. --- */
#main-body .bootstrap-switch {
    position: relative;
    width: 54px !important;
    min-width: 54px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #cbd5d1 !important;
    overflow: hidden;
    cursor: pointer;
    transition: background .2s, box-shadow .15s;
}
#main-body .bootstrap-switch.bootstrap-switch-on {
    background: #0c94ab !important;
}
#main-body .bootstrap-switch.bootstrap-switch-focused {
    box-shadow: 0 0 0 3px rgba(12,148,171,.18) !important;
    outline: none;
}
#main-body .bootstrap-switch .bootstrap-switch-container {
    width: 100% !important;
    height: 100% !important;
    margin-left: 0 !important;
    display: block !important;
}
/* The plugin's click/drag handlers live on the LABEL only — the handles are
   dead surface. Hide the handles and stretch the (invisible) label over the
   whole switch so a click anywhere toggles it. */
#main-body .bootstrap-switch .bootstrap-switch-handle-on,
#main-body .bootstrap-switch .bootstrap-switch-handle-off {
    display: none !important;
}
#main-body .bootstrap-switch .bootstrap-switch-label {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    color: transparent !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    cursor: pointer;
    z-index: 2;
}
#main-body .bootstrap-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(52,62,61,.35);
    transition: left .2s;
    pointer-events: none;
}
#main-body .bootstrap-switch.bootstrap-switch-on::after {
    left: 27px;
}

/* Checkbox labels (ToS on register, remember me on login): Bootstrap makes
   .form-check-input absolutely positioned, which pinned the box to the far
   left away from its (centered) text — keep it inline next to the text.
   Must stay `relative` (not `static`): the white ::after checkmark is
   absolutely positioned against the box itself. */
#main-body .form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    margin-bottom: 0;
}
#main-body .form-check-input {
    position: relative !important;
    margin: 0 6px 0 0 !important;
}

/* --- status pill colours (soft tints; some WHMCS defaults left the text
       white on a white row — e.g. "Onbetaald" on the invoice list) --- */
/* red: needs attention */
#main-body table .status-unpaid,
#main-body table .status-overdue,
#main-body table .status-cancelled,
#main-body table .status-terminated,
#main-body table .status-expired,
#main-body table .status-fraud,
#main-body table .label-danger {
    background: #fdecef !important;
    color: #d6336c !important;
}
/* green: all good */
#main-body table .status-paid,
#main-body table .status-active,
#main-body table .status-completed,
#main-body table .status-open,
#main-body table .label-success {
    background: #e7f6f9 !important;
    color: #0c94ab !important;
}
/* amber: waiting */
#main-body table .status-pending,
#main-body table .status-pendingtransfer,
#main-body table .status-suspended,
#main-body table .status-answered,
#main-body table .status-on-hold,
#main-body table .status-in-progress,
#main-body table .status-customer-reply,
#main-body table .status-payment-pending,
#main-body table .label-warning {
    background: #fff4e0 !important;
    color: #d97706 !important;
}
/* neutral: inactive/informational */
#main-body table .status-refunded,
#main-body table .status-collections,
#main-body table .status-closed,
#main-body table .status-draft,
#main-body table .status-grace,
#main-body table .status-redemption,
#main-body table .status-transferred-away,
#main-body table .label-default,
#main-body table .label-info {
    background: #eceff0 !important;
    color: #607466 !important;
}

/* Pagination renders as a wrapper with an inner link — the wrapper carries
   the button design; the inner element must not draw its own box (it caused
   a double outline). */
#main-body .dataTables_paginate .paginate_button a,
#main-body .dataTables_paginate .paginate_button .page-link,
#main-body .dataTables_paginate a.paginate_button > * {
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Panel/card footers used floats, which stagger and break lines when the
   buttons don't fit — lay them out as a flex row instead. */
#main-body .panel-footer,
#main-body .card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
#main-body .panel-footer .btn,
#main-body .card-footer .btn {
    float: none !important;
    margin: 0 !important;
    flex: 1 1 auto;
    white-space: nowrap;
}
/* In the narrow SIDEBAR panels (invoices: "Alles betalen" + "Krediet
   opwaarderen") the buttons come wrapped in Bootstrap-3 `col-xs-6`
   float divs (inert in this theme). Stack the footer's DIRECT children —
   wrapper divs or bare buttons alike — as full-width rows: side by side
   the ~250px card clipped the longer labels. */
#main-body .panel-sidebar .panel-footer,
#main-body .card-sidebar .card-footer,
#main-body .panel-sidebar .card-footer {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
#main-body .panel-sidebar .panel-footer .btn,
#main-body .card-sidebar .card-footer .btn,
#main-body .panel-sidebar .card-footer .btn {
    white-space: normal;
    width: 100%;
}
/* The old clearfix ::after/::before become phantom flex items inside the
   flexed footer and push whitespace to the right — remove them. */
#main-body .panel-footer::before,
#main-body .panel-footer::after,
#main-body .card-footer::before,
#main-body .card-footer::after {
    display: none !important;
    content: none !important;
}
#main-body .panel-sidebar .panel-footer > *,
#main-body .card-sidebar .card-footer > *,
#main-body .panel-sidebar .card-footer > * {
    flex: 1 1 auto;
    min-width: 0;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
#main-body .panel-sidebar .panel-footer .btn,
#main-body .card-sidebar .card-footer .btn,
#main-body .panel-sidebar .card-footer .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100% !important;
    /* height:100% squeezed the button to the footer's collapsed height
       (~30px) which made the 12px corners read as a pill — size by padding
       instead so the signature corner shape is visible */
    height: auto;
    min-height: 46px;
    font-size: 14.5px !important;
    font-weight: 600;
    padding: 12px 10px !important;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* square by default — the rounded bottom-left belongs ONLY to the
       button at the card's bottom edge (see :last-child below), echoing the
       card's own corner. Buttons stacked above it stay square. */
    border-radius: 0 !important;
}
#main-body .panel-sidebar .panel-footer > :last-child:not(.row) .btn,
#main-body .card-sidebar .card-footer > :last-child:not(.row) .btn,
#main-body .panel-sidebar .card-footer > :last-child:not(.row) .btn,
#main-body .panel-sidebar .panel-footer > .btn:last-child,
#main-body .card-sidebar .card-footer > .btn:last-child,
#main-body .panel-sidebar .card-footer > .btn:last-child {
    border-radius: 0 0 0 12px !important;
}

/* ==========================================================================
   AUTH PAGES — login / password reset / register.
   Split card with the Etheron datacenter visual + clean form panel.
   ========================================================================== */
.etheron-login {
    display: flex;
    justify-content: center;
    padding: 48px 16px 72px;
}
.etheron-login-card {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    width: 100%;
    max-width: 1080px;
    min-height: 620px;
    background: #fff;
    border-radius: 20px 20px 0 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(52,62,61,.10), 0 24px 64px rgba(52,62,61,.12);
}
.etheron-pwreset .etheron-login-card {
    max-width: 900px;
    min-height: 460px;
}
.etheron-login-visual {
    position: relative;
    background:
        linear-gradient(205deg, rgba(12,148,171,.20) 0%, rgba(9,58,69,.62) 55%, rgba(6,33,39,.92) 100%),
        url('../img/etheron-datacenter.jpg') center / cover no-repeat;
    display: flex;
    align-items: flex-end;
}
.etheron-login-visual-content {
    padding: 48px 44px;
    color: #fff;
}
.etheron-login-visual-content h2 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: #fff;
}
.etheron-login-visual-content p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.85);
    margin: 0;
}
.etheron-login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 60px;
}
.etheron-login-panel h1,
.etheron-login-panel .h3 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #343E3D;
    margin: 0 0 6px;
}
.etheron-login-sub,
.etheron-login-panel .text-muted {
    color: #607466;
    font-size: 15px;
    margin: 0 0 24px;
}
.etheron-login-panel .form-group {
    margin-bottom: 20px;
}
.etheron-login-panel .form-control-label,
.etheron-login-panel label {
    font-weight: 600;
    font-size: 13.5px;
    color: #343E3D;
    margin-bottom: 7px;
}
.etheron-login-pw-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.etheron-login-forgot {
    font-size: 12.5px;
    color: #0c94ab;
    font-weight: 500;
}
.etheron-login-panel .input-group {
    position: relative;
    display: flex;
    width: 100%;
}
.etheron-login-panel .input-group-prepend {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-left: 15px;
    z-index: 4;
    pointer-events: none;
}
.etheron-login-panel .input-group-text {
    background: transparent;
    border: 0;
    padding: 0;
    color: #8a9691;
    font-size: 14px;
}
.etheron-login-panel .form-control {
    width: 100%;
    height: auto;
    border: 1.5px solid #dfe6e3;
    border-radius: 12px !important;
    background: #fff;
    color: #343E3D;
    font-size: 15px;
    padding: 13px 16px 13px 42px;
    transition: border-color .15s, box-shadow .15s;
}
.etheron-login-panel .form-control:focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15);
    outline: none;
}
.etheron-login-panel .input-group-append {
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 4;
}
.etheron-login-panel .btn-reveal-pw {
    border: 0;
    background: transparent;
    color: #8a9691;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.etheron-login-panel .btn-reveal-pw:hover {
    color: #0c94ab;
    background: #f4fbfc;
}
.etheron-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #607466;
    font-weight: 400;
    margin: 2px 0 22px;
    cursor: pointer;
}
.etheron-login-submit,
.etheron-login-panel button[type="submit"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: #0c94ab !important;
    border-color: #0c94ab !important;
    color: #fff !important;
    transition: background .15s, box-shadow .15s, transform .05s;
}
.etheron-login-submit:hover,
.etheron-login-panel button[type="submit"]:hover {
    background: #0a7a8f !important;
    box-shadow: 0 6px 18px rgba(12,148,171,.35);
    transform: translateY(-1px);
}
.etheron-login-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 24px 0 18px;
    color: #8a9691;
    font-size: 13px;
}
.etheron-login-divider::before,
.etheron-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eef0f0;
}
.etheron-login-panel .social-signin-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.etheron-login-register {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #eef0f0;
    font-size: 14px;
    color: #607466;
    text-align: center;
}
.etheron-login-register a {
    color: #0c94ab;
    font-weight: 600;
}
@media (max-width: 900px) {
    .etheron-login {
        padding: 24px 12px 48px;
    }
    .etheron-login-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .etheron-login-visual {
        /* image on TOP on phones (was order:2 below the form — the visual
           was effectively invisible without scrolling) */
        min-height: 180px;
        order: 0;
    }
    .etheron-login-visual-content {
        padding: 28px 24px;
    }
    .etheron-login-visual-content h2 {
        font-size: 24px;
    }
    .etheron-login-panel {
        padding: 36px 24px;
        order: 1;
    }
}

/* --- register page --- */
#registration {
    max-width: 880px;
    margin: 32px auto 64px;
}
.etheron-auth-hero {
    position: relative;
    background:
        linear-gradient(200deg, rgba(12,148,171,.25) 0%, rgba(9,58,69,.65) 55%, rgba(6,33,39,.9) 100%),
        url('../img/etheron-datacenter.jpg') center / cover no-repeat;
    border-radius: 20px 20px 0 20px;
    padding: 52px 48px;
    margin-bottom: 26px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(52,62,61,.12);
}
.etheron-auth-hero h1 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 8px;
}
.etheron-auth-hero p {
    font-size: 15px;
    color: rgba(255,255,255,.85);
    margin: 0;
}
#registration .card {
    border: 0;
    border-radius: 16px 16px 0 16px;
    box-shadow: 0 1px 2px rgba(52,62,61,.05), 0 4px 14px rgba(52,62,61,.06);
}
#registration .card-title {
    font-size: 20px;
    font-weight: 700;
    color: #343E3D;
    margin-bottom: 18px;
}
#registration .prepend-icon {
    position: relative;
}
/* theme.min.css pins the icon with "#registration .prepend-icon .field-icon
   { top: 0; height: 36px; line-height: 36px }" — match that selector so the
   later custom.css wins, and reset its box so the icon centers on the
   (taller) Etheron field instead of floating above it. */
#registration .field-icon,
#registration .prepend-icon .field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: auto;
    height: auto;
    line-height: 1;
    transform: translateY(-50%);
    color: #8a9691;
    margin: 0;
    z-index: 4;
    pointer-events: none;
    text-align: left;
}
#registration .field-icon i {
    color: #8a9691;
    font-size: 15px;
}
#registration .field {
    width: 100%;
    height: auto;
    border: 1.5px solid #dfe6e3;
    border-radius: 12px;
    background: #fff;
    color: #343E3D;
    font-size: 15px;
    padding: 12px 14px;
    transition: border-color .15s, box-shadow .15s;
}
#registration .prepend-icon .field {
    padding-left: 42px;
}
#registration .field:focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15);
    outline: none;
}
#registration .generate-password {
    border: 1.5px solid #0c94ab !important;
    color: #0c94ab !important;
    background: #fff !important;
    border-radius: 10px !important;
    font-weight: 600;
    padding: 9px 16px !important;
}
#registration .generate-password:hover {
    background: #f4fbfc !important;
}
#registration .password-strength-meter .progress {
    height: 8px;
    border-radius: 999px;
    background: #eef0f0;
}
#registration .password-strength-meter .progress-bar {
    border-radius: 999px;
}
#registration input[type="submit"] {
    background: #0c94ab;
    border: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 56px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .05s;
}
#registration input[type="submit"]:hover {
    background: #0a7a8f;
    box-shadow: 0 6px 18px rgba(12,148,171,.35);
    transform: translateY(-1px);
}
/* social signup block (linkedaccounts include) — same look as the login
   divider, centered buttons */
#registration .sub-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    color: #8a9691;
    font-size: 13px;
    text-align: center;
    border: 0;
}
#registration .sub-heading::before,
#registration .sub-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eef0f0;
}
#registration .sub-heading span {
    background: transparent;
    padding: 0;
    font-weight: 500;
}
#registration .social-signin-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}
/* footer link back to login */
.etheron-register-login {
    margin-top: 10px;
    padding-top: 22px;
    border-top: 1px solid #eef0f0;
    font-size: 14px;
    color: #607466;
    text-align: center;
}
.etheron-register-login a {
    color: #0c94ab;
    font-weight: 600;
}
/* ToS row: give the centered checkbox line some breathing room */
#registration .form-check {
    font-size: 14px;
    color: #607466;
}
#registration .form-check a {
    color: #0c94ab;
    font-weight: 600;
}

/* ==========================================================================
   DOMAIN REGISTER + TRANSFER pages (cart.php?a=add&domain=register|transfer)
   --------------------------------------------------------------------------
   Full Etheron redesign. The templates drop the product-group sidebar (it
   pushed the whole page off center); everything lives in one centered column.
   Selectors are prefixed with #order-standard_cart.etheron-domain-page so
   they beat standard_cart's all.min.css, which loads after this file.
   ========================================================================== */

#order-standard_cart.etheron-domain-page {
    max-width: 1080px;
    margin: 24px auto 64px;
    float: none;
}

/* --- hero (same visual language as the login / register hero) --- */
.etheron-domain-hero {
    position: relative;
    background:
        linear-gradient(200deg, rgba(12,148,171,.25) 0%, rgba(9,58,69,.65) 55%, rgba(6,33,39,.9) 100%),
        url('../img/etheron-datacenter.jpg') center / cover no-repeat;
    border-radius: 20px 20px 0 20px;
    padding: 56px 48px;
    margin-bottom: 28px;
    color: #fff;
    text-align: center;
    box-shadow: 0 8px 24px rgba(52,62,61,.12);
}
.etheron-domain-hero h1 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 10px;
}
.etheron-domain-hero p {
    font-size: 15px;
    color: rgba(255,255,255,.85);
    margin: 0 auto;
    max-width: 560px;
}

/* --- search bar inside the hero: white pill, teal button --- */
.etheron-domain-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    margin: 26px auto 0;
    background: #fff;
    border-radius: 14px 14px 0 14px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(6,33,39,.35);
}
.etheron-domain-search-icon {
    position: absolute;
    left: 22px;
    color: #8a9691;
    font-size: 15px;
    pointer-events: none;
}
#order-standard_cart.etheron-domain-page .etheron-domain-search .form-control {
    flex: 1;
    height: 48px;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: #343E3D;
    font-size: 16px;
    padding: 0 12px 0 40px;
}
#order-standard_cart.etheron-domain-page .etheron-domain-search .form-control:focus {
    border: 0;
    box-shadow: none;
    outline: none;
}
#order-standard_cart.etheron-domain-page .etheron-domain-search .btn {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    border: 0;
    border-radius: 10px 10px 0 10px;
    background: #0c94ab !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .15s;
}
#order-standard_cart.etheron-domain-page .etheron-domain-search .btn:hover {
    background: #0a7a8f !important;
}
.etheron-domain-captcha {
    max-width: 640px;
    margin: 18px auto 0;
    background: rgba(255,255,255,.92);
    border-radius: 12px;
    padding: 14px;
    color: #343E3D;
}

/* --- search results --- */
#order-standard_cart.etheron-domain-page .primary-domain-header {
    background: transparent;
    color: #343E3D;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 0;
    margin: 0 0 14px;
    border: 0;
}
#order-standard_cart.etheron-domain-page #searchDomainInfo {
    background: #fff;
    border: 0;
    border-radius: 16px 16px 0 16px;
    box-shadow: 0 1px 2px rgba(52,62,61,.05), 0 4px 14px rgba(52,62,61,.06);
    padding: 28px 24px;
    margin-bottom: 26px;
    text-align: center;
    font-size: 17px;
}
#order-standard_cart.etheron-domain-page .domain-checker-available { color: #0c94ab; font-weight: 600; }
#order-standard_cart.etheron-domain-page .domain-checker-unavailable { color: #d6336c; font-weight: 600; }
#order-standard_cart.etheron-domain-page .domain-checker-invalid { color: #d97706; font-weight: 600; }
#order-standard_cart.etheron-domain-page .domain-lookup-loader { color: #607466; }
#order-standard_cart.etheron-domain-page .domain-price .price {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: #343E3D;
    margin-bottom: 12px;
}

/* add-to-cart buttons everywhere on these pages: solid teal, brand radius */
#order-standard_cart.etheron-domain-page .btn-add-to-cart,
#order-standard_cart.etheron-domain-page .domain-contact-support {
    background: #0c94ab !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 10px 10px 0 10px !important;
    padding: 10px 22px;
    transition: background .15s;
}
#order-standard_cart.etheron-domain-page .btn-add-to-cart:hover,
#order-standard_cart.etheron-domain-page .domain-contact-support:hover {
    background: #0a7a8f !important;
}

/* --- spotlight TLD strip: white cards in a flex row --- */
#order-standard_cart.etheron-domain-page .spotlight-tlds {
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: 26px;
}
#order-standard_cart.etheron-domain-page .spotlight-tlds-container {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
#order-standard_cart.etheron-domain-page .spotlight-tld-container {
    float: none;
    width: auto;
    flex: 1 1 150px;
    max-width: 200px;
    padding: 0;
}
#order-standard_cart.etheron-domain-page .spotlight-tld {
    background: #fff;
    border: 1.5px solid #eef0f0;
    border-radius: 14px 14px 0 14px;
    padding: 18px 12px 16px;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    color: #343E3D;
    height: auto;
    box-shadow: 0 1px 2px rgba(52,62,61,.05);
}
#order-standard_cart.etheron-domain-page .spotlight-tld .domain-lookup-result {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0c94ab;
}
#order-standard_cart.etheron-domain-page .spotlight-tld .btn {
    font-size: 13px;
    padding: 7px 14px;
    margin-top: 4px;
}
#order-standard_cart.etheron-domain-page .spotlight-tld .btn.unavailable,
#order-standard_cart.etheron-domain-page .spotlight-tld .btn.invalid {
    background: #eceff0 !important;
    color: #8a9691 !important;
    border: 0 !important;
    border-radius: 10px 10px 0 10px !important;
}

/* --- suggested domains: one rounded card, rows with hairline dividers --- */
#order-standard_cart.etheron-domain-page .suggested-domains {
    background: #fff;
    border: 0;
    border-radius: 16px 16px 0 16px;
    box-shadow: 0 1px 2px rgba(52,62,61,.05), 0 4px 14px rgba(52,62,61,.06);
    overflow: hidden;
    margin-bottom: 26px;
}
#order-standard_cart.etheron-domain-page .suggested-domains > .card-header {
    background: #fff;
    border-bottom: 1px solid #eef0f0;
    font-size: 17px;
    font-weight: 700;
    color: #343E3D;
    padding: 18px 24px;
}
#order-standard_cart.etheron-domain-page .domain-suggestion {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border: 0;
    border-bottom: 1px solid #f4f6f6;
    padding: 14px 24px;
    font-size: 16px;
    color: #343E3D;
}
#order-standard_cart.etheron-domain-page .domain-suggestion.w-hidden {
    display: none;
}
#order-standard_cart.etheron-domain-page .domain-suggestion .domain { font-weight: 600; }
#order-standard_cart.etheron-domain-page .domain-suggestion .extension { font-weight: 800; color: #0c94ab; }
#order-standard_cart.etheron-domain-page .domain-suggestion .actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
#order-standard_cart.etheron-domain-page .domain-suggestion .actions .price {
    font-weight: 700;
    color: #343E3D;
}
#order-standard_cart.etheron-domain-page .suggested-domains .card-footer {
    background: #fff;
    border-top: 1px solid #eef0f0;
    justify-content: center;
}
#order-standard_cart.etheron-domain-page .suggested-domains .card-footer a {
    color: #0c94ab;
    font-weight: 600;
}
#order-standard_cart.etheron-domain-page .domain-suggestions-warning {
    padding: 0 24px 16px;
    color: #8a9691;
    font-size: 13px;
}

/* sales-group pills (hot / new / sale) shared by suggestions + pricing */
#order-standard_cart.etheron-domain-page .sales-group-hot,
#order-standard_cart.etheron-domain-page .sales-group-new,
#order-standard_cart.etheron-domain-page .sales-group-sale,
#order-standard_cart.etheron-domain-page .tld-sale-group {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-radius: 999px;
    padding: 3px 10px;
    margin-left: 8px;
    background: #fff4e0;
    color: #d97706;
}

/* --- featured TLDs --- */
#order-standard_cart.etheron-domain-page .featured-tld {
    background: #fff;
    border: 1.5px solid #eef0f0;
    border-radius: 14px 14px 0 14px;
    padding: 18px;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(52,62,61,.05);
}
/* all.min.css gives each TLD's price bar its registry brand colour (blue
   .com, yellow .net, ...) — pull them all onto the Etheron teal tint. */
#order-standard_cart.etheron-domain-page .featured-tld .price {
    background: #e7f6f9 !important;
    color: #0c94ab !important;
    font-weight: 700;
    font-size: 16px;
    margin-top: 8px;
    border: 0 !important;
    border-radius: 8px 8px 0 8px;
    padding: 8px 12px;
}

/* --- TLD pricing table --- */
.etheron-domain-pricing-head {
    text-align: center;
    margin: 8px 0 18px;
}
.etheron-domain-pricing-head h4 {
    font-size: 20px;
    font-weight: 700;
    color: #343E3D;
    margin: 0 0 14px;
}
#order-standard_cart.etheron-domain-page .tld-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
#order-standard_cart.etheron-domain-page .tld-filters a.badge {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    background: #eceff0 !important;
    color: #607466 !important;
    transition: background .15s, color .15s;
}
#order-standard_cart.etheron-domain-page .tld-filters a.badge:hover {
    background: #dfe6e3 !important;
    color: #343E3D !important;
}
/* the active chip: WHMCS scripts toggle badge classes, cover the variants */
#order-standard_cart.etheron-domain-page .tld-filters a.badge-primary,
#order-standard_cart.etheron-domain-page .tld-filters a.badge-success,
#order-standard_cart.etheron-domain-page .tld-filters a.active {
    background: #0c94ab !important;
    color: #fff !important;
}
/* theme.min.css "body #order-standard_cart .domain-pricing .bg-white"
   (specificity 1,2,2) rounds all corners 8px; this outweighs it so the
   bottom right stays pointy. */
body #order-standard_cart.etheron-domain-page .domain-pricing .bg-white.etheron-tld-table {
    border-radius: 8px 8px 0 8px;
}
#order-standard_cart.etheron-domain-page .etheron-tld-table {
    background: #fff;
    border-radius: 16px 16px 0 16px;
    box-shadow: 0 1px 2px rgba(52,62,61,.05), 0 4px 14px rgba(52,62,61,.06);
    overflow: hidden;
    margin-bottom: 34px;
}
#order-standard_cart.etheron-domain-page .tld-pricing-header {
    background: #343E3D;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 14px 0;
    border: 0;
}
/* all.min.css paints every header column light grey with a 6px blue bottom
   border (white text became invisible on it) — flatten the columns so the
   dark header band carries the design. */
#order-standard_cart.etheron-domain-page .tld-pricing-header [class*="col-"],
#order-standard_cart.etheron-domain-page .tld-pricing-header div:nth-child(odd) {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: #fff;
}
/* all.min.css puts a 2px blue border-right on .two-row-center (stray vertical
   line in every pricing row). */
#order-standard_cart.etheron-domain-page .tld-row .two-row-center {
    border-right: 0 !important;
}
#order-standard_cart.etheron-domain-page .tld-row {
    border: 0;
    border-bottom: 1px solid #f4f6f6;
    padding: 12px 0;
    background: #fff;
    transition: background .15s;
}
#order-standard_cart.etheron-domain-page .tld-row:hover {
    background: #f4fbfc;
}
#order-standard_cart.etheron-domain-page .tld-row strong {
    font-size: 16px;
    color: #343E3D;
}
#order-standard_cart.etheron-domain-page .tld-row small {
    color: #8a9691;
}
#order-standard_cart.etheron-domain-page .tld-row.no-tlds {
    color: #607466;
}

/* --- bottom promo cards (hosting / transfer / register) --- */
.etheron-domain-promos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.etheron-domain-promo {
    background: #fff;
    border-radius: 16px 16px 0 16px;
    box-shadow: 0 1px 2px rgba(52,62,61,.05), 0 4px 14px rgba(52,62,61,.06);
    padding: 30px 28px;
    text-align: center;
}
.etheron-domain-promo-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 16px 16px 0 16px;
    background: #e7f6f9;
    color: #0c94ab;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.etheron-domain-promo h3 {
    font-size: 20px;
    font-weight: 700;
    color: #343E3D;
    margin: 0 0 10px;
}
.etheron-domain-promo p {
    color: #607466;
    font-size: 14px;
    margin: 0 0 18px;
}
#order-standard_cart.etheron-domain-page .etheron-domain-promo-btn {
    background: #0c94ab !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700;
    border-radius: 10px 10px 0 10px !important;
    padding: 11px 24px;
    transition: background .15s;
}
#order-standard_cart.etheron-domain-page .etheron-domain-promo-btn:hover {
    background: #0a7a8f !important;
}
.etheron-domain-promo-note {
    margin: 14px 0 0 !important;
    font-size: 12px !important;
    color: #8a9691 !important;
}

/* --- transfer page: single centered card --- */
.etheron-transfer-card {
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px 16px 0 16px;
    box-shadow: 0 1px 2px rgba(52,62,61,.05), 0 4px 14px rgba(52,62,61,.06);
    padding: 32px 32px 28px;
}
.etheron-transfer-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #343E3D;
    margin: 0 0 20px;
}
#order-standard_cart.etheron-domain-page .etheron-transfer-card label {
    font-size: 14px;
    font-weight: 600;
    color: #343E3D;
    margin-bottom: 6px;
}
.etheron-transfer-authlabel {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.etheron-transfer-authlabel a {
    font-size: 13px;
    font-weight: 500;
    color: #0c94ab;
    cursor: help;
}
#order-standard_cart.etheron-domain-page .etheron-transfer-card .form-control {
    height: auto;
    border: 1.5px solid #dfe6e3;
    border-radius: 12px;
    background: #fff;
    color: #343E3D;
    font-size: 15px;
    padding: 12px 14px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
#order-standard_cart.etheron-domain-page .etheron-transfer-card .form-control:focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15);
    outline: none;
}
#order-standard_cart.etheron-domain-page .etheron-transfer-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px !important;
    background: #0c94ab !important;
    border: 0 !important;
    color: #fff !important;
    transition: background .15s, box-shadow .15s;
}
#order-standard_cart.etheron-domain-page .etheron-transfer-submit:hover {
    background: #0a7a8f !important;
    box-shadow: 0 6px 18px rgba(12,148,171,.35);
}
.etheron-transfer-note {
    text-align: center;
    color: #8a9691;
    font-size: 12px;
    margin: 16px 0 34px;
}

/* --- mobile --- */
@media (max-width: 767px) {
    #order-standard_cart.etheron-domain-page {
        margin: 12px auto 48px;
    }
    .etheron-domain-hero {
        padding: 36px 20px;
    }
    .etheron-domain-hero h1 {
        font-size: 26px;
    }
    .etheron-domain-search {
        flex-direction: column;
        align-items: stretch;
        border-radius: 14px;
    }
    .etheron-domain-search-icon {
        top: 24px;
    }
    #order-standard_cart.etheron-domain-page .etheron-domain-search .btn {
        width: 100%;
        border-radius: 10px;
    }
    #order-standard_cart.etheron-domain-page .domain-suggestion .actions {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
    .etheron-transfer-card {
        padding: 24px 18px;
    }
}

/* ==========================================================================
   AUDIT FIXES (2026-07-10): assorted defects found in the full-page review
   ========================================================================== */

/* --- E-mailvoorkeuren (details & contacts): the container div carries
   .form-check, so the generic inline-flex .form-check rule crammed all five
   label rows into one non-wrapping row (clipped on phones, uneven columns on
   desktop). Stack them as clean rows. --- */
#main-body .controls.form-check {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    text-align: left;
}
#main-body .controls.form-check label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-weight: 400;
    color: #607466;
    cursor: pointer;
}
#main-body .controls.form-check label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0;
}

/* --- invoice view: gateway pay button (e.g. "Betaal met iDeal") came out as
   an unstyled default input — brand it as the page's primary action. --- */
#main-body .payment-btn-container input[type="submit"],
#main-body .payment-btn-container .btn {
    background: #0c94ab !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    padding: 11px 28px;
    border-radius: 10px 10px 0 10px;
    cursor: pointer;
    transition: background .15s;
}
#main-body .payment-btn-container input[type="submit"]:hover,
#main-body .payment-btn-container .btn:hover {
    background: #0a7a8f !important;
}

/* --- product details: the status/icon block was a flat grey rectangle with
   near-white text. Teal-tinted brand panel instead. Terminated keeps its
   deliberate red treatment (rule further up). --- */
#main-body .product-details .product-status:not(.product-status-terminated) {
    background: #f4fbfc !important;
    border: 1.5px solid #e7f6f9;
    border-radius: 16px 16px 0 16px;
    overflow: hidden;
}
#main-body .product-details .product-icon {
    padding: 24px 16px 14px;
}
#main-body .product-details .product-status:not(.product-status-terminated) .product-icon .fa-stack-2x {
    color: #0c94ab;
}
#main-body .product-details .product-status:not(.product-status-terminated) .product-icon h3 {
    color: #343E3D;
    font-weight: 700;
    font-size: 20px;
    margin: 12px 0 2px;
}
#main-body .product-details .product-status:not(.product-status-terminated) .product-icon h4 {
    color: #607466;
    font-size: 14px;
    margin: 0 0 4px;
}
#main-body .product-details .product-status:not(.product-status-terminated) .product-status-text {
    background: #e7f6f9;
    color: #0c94ab;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 9px 8px;
}
#main-body .product-details .product-status-suspended .product-status-text {
    background: #fff4e0 !important;
    color: #d97706 !important;
}

/* --- status labels outside tables (e.g. "E-mail geverifieerd" on the user
   profile) get the same soft-tint pills as the table status chips instead of
   solid saturated fills. Placed after the generic badge/label colour rules on
   purpose — later !important wins. --- */
#main-body .label {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 12px;
}
#main-body .label-success {
    background: #e7f6f9 !important;
    color: #0c94ab !important;
}
#main-body .label-default {
    background: #eceff0 !important;
    color: #607466 !important;
}

/* --- change-password form: tighten the tall hollow band between the
   strength meter / tips block and the confirm row. --- */
#main-body .using-password-strength .alert-info {
    margin: 10px 0 4px;
}
#main-body .using-password-strength .password-strength-meter .progress {
    margin-bottom: 4px;
}

/* --- mobile header: the marketing navbar wrapped, leaving an orphaned
   hamburger box on its own line under the logo. Cap the brand width so the
   logo and toggler share one row (the collapse panel still drops below via
   its flex-basis: 100%). img needs !important to beat its inline style. --- */
@media (max-width: 991.98px) {
    .navbar.bg-header .navbar-brand {
        max-width: 55%;
        margin: 0;
    }
    .navbar.bg-header .navbar-brand img {
        max-width: 180px !important;
        width: 100%;
    }
}

/* ==========================================================================
   CLIENT AREA SHELL — one big white container carries the signature radius
   (square bottom-right corner); the cards/tiles INSIDE it are plain rounded
   on every corner with a hairline border so they read on the white surface.
   The auth pages, the register page and the order-form/domain pages keep
   their own full-bleed designs, hence the :not(:has(...)) guard.
   ========================================================================== */
#main-body > .container:not(:has(#order-standard_cart, .etheron-login, #registration, .etheron-auth-hero, .etheron-domain-page)) {
    background: #fff;
    border-radius: 20px 20px 0 20px;
    box-shadow: 0 1px 2px rgba(52,62,61,.05), 0 8px 24px rgba(52,62,61,.08);
    padding: 28px 24px;
    margin-top: 28px;
    margin-bottom: 56px;
}
/* items inside the shell: white, hairline border, rounded on ALL corners —
   the signature square corner belongs to the big container only */
#main-body > .container:not(:has(#order-standard_cart, .etheron-login, #registration, .etheron-auth-hero, .etheron-domain-page)) .card,
#main-body > .container:not(:has(#order-standard_cart, .etheron-login, #registration, .etheron-auth-hero, .etheron-domain-page)) .panel,
#main-body > .container:not(:has(#order-standard_cart, .etheron-login, #registration, .etheron-auth-hero, .etheron-domain-page)) .table-container,
#main-body > .container:not(:has(#order-standard_cart, .etheron-login, #registration, .etheron-auth-hero, .etheron-domain-page)) .tile,
#main-body > .container:not(:has(#order-standard_cart, .etheron-login, #registration, .etheron-auth-hero, .etheron-domain-page)) .home-panel {
    border-radius: 12px !important;
    border: 1.5px solid #eef0f0 !important;
    box-shadow: none !important;
    background: #fff;
}
/* nested cards (e.g. inner panels inside a card body) keep the same look —
   but don't double-border list groups & headers inside them */
#main-body > .container:not(:has(#order-standard_cart, .etheron-login, #registration, .etheron-auth-hero, .etheron-domain-page)) .card .card {
    box-shadow: none !important;
}
@media (max-width: 767.98px) {
    #main-body > .container:not(:has(#order-standard_cart, .etheron-login, #registration, .etheron-auth-hero, .etheron-domain-page)) {
        padding: 16px 12px;
        margin-top: 16px;
        margin-bottom: 40px;
        border-radius: 14px 14px 0 14px;
    }
}

/* ==========================================================================
   AUDIT FIXES ROUND 2 (2026-07-10)
   ========================================================================== */

/* --- header (marketing navbar): active/selected dropdown item must be the
   Etheron teal, never Bootstrap's default blue/green --- */
.navbar.bg-header .dropdown-item.active,
.navbar.bg-header .dropdown-item:active {
    background-color: #0c94ab !important;
    color: #fff !important;
}

/* --- footer icons: the ".achtergrond-donker-footer *" font reset also hits
   Font Awesome glyphs; give the icon classes their icon fonts back --- */
.achtergrond-donker-footer .fa,
.achtergrond-donker-footer .fas,
.achtergrond-donker-footer .far,
.achtergrond-donker-footer .fal,
.achtergrond-donker-footer .fad {
    font-family: "Font Awesome 6 Pro" !important;
}
.achtergrond-donker-footer .fab {
    font-family: "Font Awesome 6 Brands" !important;
}

/* --- affiliates: stat tiles were raw WHMCS alert-color boxes; make them
   shell items (white, hairline, teal accent), equal height --- */
#main-body .affiliate-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    min-height: 120px;
    background: #fff;
    border: 1.5px solid #eef0f0;
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
    color: #607466;
    font-size: 14px;
}
#main-body .affiliate-stat i {
    color: #0c94ab;
    font-size: 20px;
    margin-bottom: 2px;
}
#main-body .affiliate-stat span {
    font-size: 26px;
    font-weight: 800;
    color: #343E3D;
    line-height: 1.1;
}
/* commission summary: soften the default bordered/striped table */
#main-body table.table-rounded {
    border: 1.5px solid #eef0f0;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
#main-body table.table-rounded td {
    border: 0;
    border-bottom: 1px solid #f4f6f6;
    padding: 12px 16px;
}
#main-body table.table-rounded tr:last-child td {
    border-bottom: 0;
}

/* --- product details: the status block needs to read clearly branded, the
   pale tint was judged "still grey" --- */
#main-body .product-details .product-status:not(.product-status-terminated) {
    background: #e7f6f9 !important;
    border-color: #cfeaf2;
}
#main-body .product-details .product-status:not(.product-status-terminated) .product-status-text {
    background: #0c94ab;
    color: #fff;
}

/* --- register page: the leftover "Al geregistreerd?" sidebar squeezed the
   hero into a narrow off-center column; the page's own footer link already
   covers it. Hide the sidebar and give the content the full row. --- */
#main-body > .container:has(#registration) .row > .col-lg-4.col-xl-3 {
    display: none;
}
#main-body > .container:has(#registration) .row > .primary-content {
    flex: 0 0 100%;
    max-width: 100%;
}
/* social-signup divider label: grey like the login divider, not link-blue */
#registration .sub-heading,
#registration .sub-heading span {
    color: #8a9691 !important;
    background: transparent !important;
}

/* --- domain register: align the Domein header with its left-aligned
   values --- */
#order-standard_cart.etheron-domain-page .tld-pricing-header .tld-column {
    text-align: left;
    padding-left: 24px !important;
}

/* ==========================================================================
   DOMAIN CONFIGURATION step (cart.php?a=confdomains) — Etheron redesign.
   Same page family as the domain register/transfer pages.
   ========================================================================== */
.etheron-domain-hero-compact {
    padding: 36px 40px;
}
.etheron-domain-hero-compact h1 {
    font-size: 28px;
}
.etheron-conf-errors {
    border: 0;
    border-radius: 12px;
    background: #fdecef;
    color: #d6336c;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.etheron-conf-card {
    background: #fff;
    border-radius: 16px 16px 0 16px;
    box-shadow: 0 1px 2px rgba(52,62,61,.05), 0 4px 14px rgba(52,62,61,.06);
    padding: 26px 28px;
    margin-bottom: 22px;
}
.etheron-conf-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.etheron-conf-card-head h3 {
    font-size: 20px;
    font-weight: 800;
    color: #343E3D;
    margin: 0;
}
.etheron-conf-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.etheron-conf-chip {
    display: inline-block;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 600;
    background: #eceff0;
    color: #607466;
    text-decoration: none;
}
.etheron-conf-chip-ok {
    background: #e7f6f9;
    color: #0c94ab;
}
.etheron-conf-chip-warn {
    background: #fff4e0;
    color: #d97706;
}
a.etheron-conf-chip-warn:hover {
    background: #ffe9c4;
    color: #b45f05;
    text-decoration: none;
}
.etheron-conf-sub {
    color: #607466;
    font-size: 14px;
    margin: -6px 0 16px;
}
#order-standard_cart.etheron-confdomains .form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #343E3D;
}
#order-standard_cart.etheron-confdomains .form-control {
    height: auto;
    border: 1.5px solid #dfe6e3;
    border-radius: 12px;
    background: #fff;
    color: #343E3D;
    font-size: 15px;
    padding: 11px 14px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
#order-standard_cart.etheron-confdomains .form-control:focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15);
    outline: none;
}
#order-standard_cart.etheron-confdomains .field-help-text {
    color: #8a9691;
    font-size: 12.5px;
}
/* addon panels: white selectable cards; scripts.min.js toggles
   .panel-addon-selected and the checkbox */
#order-standard_cart.etheron-confdomains .panel-addon {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1.5px solid #eef0f0 !important;
    border-radius: 14px 14px 0 14px;
    background: #fff;
    box-shadow: none;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    margin: 0;
}
#order-standard_cart.etheron-confdomains .panel-addon:hover {
    border-color: #0c94ab !important;
}
#order-standard_cart.etheron-confdomains .panel-addon.panel-addon-selected {
    border-color: #0c94ab !important;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15);
}
#order-standard_cart.etheron-confdomains .panel-addon .panel-body {
    flex: 1;
    padding: 16px;
    font-size: 13px;
    color: #607466;
    background: transparent;
}
#order-standard_cart.etheron-confdomains .panel-addon .panel-body label {
    font-size: 14.5px;
    font-weight: 700;
    color: #343E3D;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 6px;
}
#order-standard_cart.etheron-confdomains .panel-addon .panel-price {
    padding: 10px 16px;
    font-weight: 700;
    color: #343E3D;
    background: #f4fbfc;
    border-top: 1px solid #eef0f0;
    text-align: center;
}
#order-standard_cart.etheron-confdomains .panel-addon .panel-add {
    padding: 10px 16px;
    background: #0c94ab;
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    text-align: center;
    transition: background .15s;
}
#order-standard_cart.etheron-confdomains .panel-addon:hover .panel-add,
#order-standard_cart.etheron-confdomains .panel-addon.panel-addon-selected .panel-add {
    background: #0a7a8f;
}
.etheron-conf-field {
    align-items: center;
    color: #607466;
    font-size: 14px;
}
.etheron-conf-submit-row {
    padding: 8px 0 12px;
}
#order-standard_cart.etheron-confdomains .etheron-conf-submit {
    background: #0c94ab !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 44px !important;
    border-radius: 12px !important;
    transition: background .15s, box-shadow .15s;
}
#order-standard_cart.etheron-confdomains .etheron-conf-submit:hover {
    background: #0a7a8f !important;
    box-shadow: 0 6px 18px rgba(12,148,171,.35);
}
@media (max-width: 767.98px) {
    .etheron-domain-hero-compact {
        padding: 26px 18px;
    }
    .etheron-conf-card {
        padding: 20px 16px;
    }
}

/* --- form action buttons (Wijzigingen opslaan / Opzeggen on details,
   contacts, profile): all four corners rounded, per Lars --- */
#main-body .card-body input[type="submit"].btn,
#main-body .card-body button[type="submit"].btn,
#main-body .card-body input[type="reset"].btn,
#main-body .form-group.text-center .btn {
    border-radius: 10px !important;
}

/* --- register page: phone country-code widget --------------------------
   WHMCS's phone script swaps the input for one with only .form-control (the
   .field class is lost), so it stayed at Bootstrap's 36px height; and the
   country list was clipped by the card's overflow:hidden and painted UNDER
   the next card (its z-index of 2 loses to later siblings). ------------- */
#registration .card,
#registration .card-body {
    overflow: visible !important;
}
#registration .intl-tel-input {
    width: 100%;
    position: relative;
    z-index: 30;
}
#registration .intl-tel-input input.form-control {
    height: auto;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border: 1.5px solid #dfe6e3;
    border-radius: 12px;
    color: #343E3D;
    font-size: 15px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
#registration .intl-tel-input input.form-control:focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15);
    outline: none;
}
#registration .intl-tel-input .country-list {
    z-index: 60;
    border: 1.5px solid #eef0f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(52,62,61,.18);
    max-height: 260px;
}
/* the phone field's form-group must stack above the card that follows it */
#registration .form-group:has(.intl-tel-input) {
    position: relative;
    z-index: 30;
}

/* --- register page: StatesDropdown.js hides the province icon with an
   inline display:none when it swaps the input for a select — keep it --- */
#registration #inputStateIcon {
    display: block !important;
}

/* --- invoice: apply-credit row (input + "Krediet gebruiken") — the old
   narrow grid column squeezed the amount field once the label got longer --- */
#main-body .etheron-credit-row {
    display: flex;
    gap: 8px;
    max-width: 420px;
    margin: 14px auto 0;
}
#main-body .etheron-credit-row .form-control {
    flex: 1 1 auto;
    min-width: 0;
}
#main-body .etheron-credit-row .btn {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ==========================================================================
   FINAL DESIGN-AUDIT FIXES (2026-07-13)
   ========================================================================== */

/* reCAPTCHA badge: the site key is not registered for this (dev) domain, so
   Google renders a clipped red ERROR badge hanging off the right edge of
   login/register. Hide the floating badge. NB: on production, either register
   the domain for the key or keep this rule and show the reCAPTCHA attribution
   text somewhere on the page (Google's terms). */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* footer mobile dividers (hr.w-100 inside the row's negative margins) were
   414px wide on a 390px viewport and made every page scroll sideways */
.achtergrond-donker-footer {
    overflow-x: hidden;
}

/* .bg-info surfaces (invoice table headers) rendered Bootstrap cyan #17a2b8
   instead of the brand teal */
#main-body .bg-info {
    background-color: #0c94ab !important;
}

/* invoice status (ONBETAALD/BETAALD/...): soft tint pill per the design
   code, not giant saturated text */
#main-body .invoice-status span {
    display: inline-block;
    border-radius: 999px;
    padding: 8px 22px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
#main-body .invoice-status .unpaid,
#main-body .invoice-status .collections {
    background: #fdecef;
    color: #d6336c !important;
}
#main-body .invoice-status .paid {
    background: #e7f6f9;
    color: #0c94ab !important;
}
#main-body .invoice-status .refunded,
#main-body .invoice-status .cancelled,
#main-body .invoice-status .draft {
    background: #eceff0;
    color: #607466 !important;
}

/* "Powered by WHMCompleteSolution" link: teal, not default link blue */
#main-body a[href*="whmcs.com"] {
    color: #0c94ab !important;
}

/* inline <code> samples (password tips): Bootstrap paints code magenta */
#main-body code {
    color: #0c94ab;
}

/* affiliates commission summary: white card surface under the rows */
#main-body table.table-rounded {
    background: #fff;
}

/* product details: image/icon placeholder tile follows the inner-card
   radius */
#main-body .product-details .product-icon,
#main-body .product-details img {
    border-radius: 12px;
}

/* native selects inside cards: covered by the uniform form control base
   at the end of this file (was a 10px rounded one-off, per Lars all square) */

/* invoice print / download buttons: plain rectangles, per Lars */
#main-body .btn-group.d-print-none .btn {
    border-radius: 0 !important;
}

/* ==========================================================================
   TICKET SIDEBAR (viewticket) — footer buttons, CC form, chips
   ========================================================================== */

/* Antwoord/Sluiten: together full width, 50/50. Left button rounds its
   bottom-LEFT corner, right button its bottom-RIGHT; everything else square. */
#main-body .ticket-sidebar-footer .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100%;
    margin: 0 !important;
    gap: 0;
}
#main-body .ticket-sidebar-footer .row > [class*="col-"] {
    flex: 1 1 0;
    max-width: none;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
#main-body .ticket-sidebar-footer .btn {
    width: 100% !important;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14.5px !important;
    font-weight: 600;
    margin: 0 !important;
}
#main-body .ticket-sidebar-footer .row .col-button-left .btn {
    border-radius: 0 0 0 12px !important;
}
#main-body .ticket-sidebar-footer .row .col-button-right .btn {
    border-radius: 0 0 12px 0 !important;
}

/* CC-ontvangers: stack the e-mail input and the Toevoegen button instead of
   cramming them side by side in the 250px sidebar */
#main-body .ticket-sidebar-footer #containerAddCcEmail {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}
#main-body .ticket-sidebar-footer #inputAddCcEmail {
    width: 100%;
    height: auto;
    border: 1.5px solid #dfe6e3;
    border-radius: 0;
    padding: 10px 12px;
    font-size: 14px;
    color: #343E3D;
}
#main-body .ticket-sidebar-footer #inputAddCcEmail:focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15);
    outline: none;
}
#main-body .ticket-sidebar-footer .input-group-append,
#main-body .ticket-sidebar-footer .input-group-btn {
    width: 100%;
    display: block;
}
#main-body .ticket-sidebar-footer #btnAddCcEmail {
    width: 100% !important;
    min-height: 44px;
    border-radius: 0 0 0 12px !important;
}

/* ticket chips (Houder / status): soft tint pills, never green or olive */
#main-body .label[class*="requestor-type-"],
#main-body .ticket-details-children .label {
    display: inline-block;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 11.5px;
    font-weight: 700;
    background: #e7f6f9 !important;
    color: #0c94ab !important;
}
#main-body .label.status-answered,
#main-body .label.status-customer-reply,
#main-body .label.status-on-hold,
#main-body .label.status-in-progress {
    background: #fff4e0 !important;
    color: #d97706 !important;
}
#main-body .label.status-closed {
    background: #eceff0 !important;
    color: #607466 !important;
}

/* --- client area home: recent tickets / invoices lists in the action
   cards (last 10, scrollable) --- */
#main-body .action-card .home-list {
    max-height: 260px;
    overflow-y: auto;
    border: 1.5px solid #eef0f0;
    border-radius: 12px;
    margin: 14px 0;
    text-align: left;
    background: #fff;
}
#main-body .action-card .home-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid #f4f6f6;
    color: #343E3D;
    font-size: 13.5px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
#main-body .action-card .home-list-item:last-child {
    border-bottom: 0;
}
#main-body .action-card .home-list-item:hover {
    background: #f4fbfc;
    color: #0c94ab;
}
#main-body .action-card .home-list-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#main-body .action-card .home-list-badge {
    flex-shrink: 0;
    background: #e7f6f9;
    color: #0c94ab;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 700;
}
#main-body .action-card .home-list-none {
    padding: 16px;
    text-align: center;
    color: #8a9691;
    font-size: 13.5px;
}

/* home list badges: soft status tints */
#main-body .action-card .home-list-badge.st-unpaid,
#main-body .action-card .home-list-badge.st-overdue,
#main-body .action-card .home-list-badge.st-collections {
    background: #fdecef;
    color: #d6336c;
}
#main-body .action-card .home-list-badge.st-cancelled,
#main-body .action-card .home-list-badge.st-refunded,
#main-body .action-card .home-list-badge.st-closed {
    background: #eceff0;
    color: #607466;
}
#main-body .action-card .home-list-badge.st-answered,
#main-body .action-card .home-list-badge.st-customer-reply,
#main-body .action-card .home-list-badge.st-on-hold,
#main-body .action-card .home-list-badge.st-payment-pending {
    background: #fff4e0;
    color: #d97706;
}

/* --- client area home: system status strip (status.etheron.nl) --- */
#main-body .home-status-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: #343E3D;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}
#main-body .home-status-card:hover {
    color: #0c94ab;
    text-decoration: none;
}
#main-body .home-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
#main-body .home-status-ok .home-status-dot {
    /* per Lars: operational = green (deliberate exception to the no-green
       rule — semantic status colour) */
    background: #2f9e44;
    box-shadow: 0 0 0 4px rgba(47,158,68,.18);
}
#main-body .home-status-degraded .home-status-dot {
    background: #d97706;
    box-shadow: 0 0 0 4px rgba(217,119,6,.15);
}
#main-body .home-status-down .home-status-dot {
    background: #d6336c;
    box-shadow: 0 0 0 4px rgba(214,51,108,.15);
}
#main-body .home-status-link {
    margin-left: auto;
    color: #0c94ab;
    font-size: 13.5px;
    white-space: nowrap;
}

/* status strip: planned/ongoing maintenance = teal (informational) */
#main-body .home-status-maintenance .home-status-dot {
    background: #0c94ab;
    box-shadow: 0 0 0 4px rgba(12,148,171,.15);
}


/* domains page: bulk-action buttons (Beheer naamservers etc.) are plain
   rectangles, per Lars — covers the buttons and the Meer... dropdown toggle */
#main-body .btn-group .setBulkAction,
#main-body .btn-group:has(.setBulkAction) .btn {
    border-radius: 0 !important;
}

/* --- register page: make the phone field and the state/country selects
   match the other fields — square corners (the rest computes 0px) and room
   for the prepend icon (the selects only had 12px padding, so the icon sat
   on top of "Flevoland" / "Netherlands"). --- */
#registration select.field,
#registration #stateselect,
#registration #inputCountry,
#registration .intl-tel-input input.form-control,
#registration .intl-tel-input {
    border-radius: 0 !important;
}
/* full padding, not just left: the generic "#main-body .card-body
   select.form-control" rule gives selects 10px vertical padding, which made
   them 44.5px next to the 48.5px inputs in the same row */
#registration .prepend-icon select.field,
#registration .prepend-icon #stateselect,
#registration .prepend-icon #inputCountry,
#registration select.field,
#registration #stateselect,
#registration #inputCountry {
    height: auto !important;
    padding: 12px 14px 12px 42px !important;
    font-size: 15px;
    line-height: 22.5px;
}

/* --- auth pages: button corners, per Lars ---
   the show/hide password eye = rounded on every corner;
   the submit buttons (Aanmelden / wachtwoord reset / Registreren) carry the
   signature radius with the pointy bottom-right corner. */
.etheron-login-panel .btn-reveal-pw,
.etheron-login-panel .input-group-append .btn {
    border-radius: 10px !important;
}
.etheron-login-submit,
.etheron-login-panel button[type="submit"],
.etheron-login-panel input[type="submit"],
#registration input[type="submit"],
#registration button[type="submit"].btn-primary {
    border-radius: 12px 12px 0 12px !important;
}
/* the password-reset submit sits in a .form-group.text-center, which the
   client-area form-button rule rounds to 10px — that selector is more
   specific, so win it back explicitly for the auth panel */
#main-body .etheron-login-panel .form-group.text-center .btn,
#main-body .etheron-login-panel .form-group.text-center button[type="submit"] {
    border-radius: 12px 12px 0 12px !important;
}

/* --- submit ticket / contact page buttons, per Lars ---
   "+ Meer toevoegen" (attachment row) = fully square, it sits flush against
   the Browse field; the cancel link next to Verzenden = rounded all round. */
#main-body #btnTicketAttachmentsAdd,
#main-body .input-group-append > #btnTicketAttachmentsAdd {
    border-radius: 0 !important;
}
#main-body p.text-center > a.btn.btn-default,
#main-body p.text-center > input[type="reset"].btn {
    border-radius: 10px !important;
}

/* ==========================================================================
   CART CHECKOUT (cart.php?a=checkout) — register-page design language.
   Mirrors the "#registration" block above (hero + white cards + the same
   field treatment); keep the two in sync when the register page changes.
   ========================================================================== */
#order-standard_cart.etheron-checkout {
    max-width: 880px;
    margin: 24px auto 64px;
    float: none;
    padding: 0;
}
/* every section between two sub-headings reads as a white card */
#order-standard_cart.etheron-checkout .etheron-checkout-body {
    background: #fff;
    border-radius: 16px 16px 0 16px;
    box-shadow: 0 1px 2px rgba(52,62,61,.05), 0 4px 14px rgba(52,62,61,.06);
    padding: 28px 28px 32px;
}
/* section headings: dark ink titles, not the teal WHMCS bar */
#order-standard_cart.etheron-checkout .sub-heading {
    border: 0;
    border-bottom: 1px solid #eef0f0;
    margin: 26px 0 18px;
    padding: 0 0 16px;
    text-align: left;
}
#order-standard_cart.etheron-checkout .sub-heading:first-of-type {
    margin-top: 4px;
}
#order-standard_cart.etheron-checkout .sub-heading span,
#order-standard_cart.etheron-checkout .sub-heading .primary-bg-color {
    background: transparent !important;
    color: #343E3D !important;
    font-size: 20px;
    font-weight: 700;
    padding: 0 !important;
    border-radius: 0 !important;
}
#order-standard_cart.etheron-checkout .sub-heading small,
#order-standard_cart.etheron-checkout .sub-heading i {
    font-size: 13px;
    font-weight: 400;
    color: #607466 !important;
}
/* fields: identical treatment to the register form */
#order-standard_cart.etheron-checkout .prepend-icon {
    position: relative;
}
#order-standard_cart.etheron-checkout .field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: auto;
    height: auto;
    line-height: 1;
    transform: translateY(-50%);
    color: #8a9691;
    margin: 0;
    z-index: 4;
    pointer-events: none;
}
#order-standard_cart.etheron-checkout .field,
#order-standard_cart.etheron-checkout select.form-control,
#order-standard_cart.etheron-checkout .intl-tel-input input.form-control {
    width: 100%;
    height: auto;
    border: 1.5px solid #dfe6e3;
    border-radius: 0;
    background: #fff;
    color: #343E3D;
    font-size: 15px;
    padding: 12px 14px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
#order-standard_cart.etheron-checkout .prepend-icon .field,
#order-standard_cart.etheron-checkout .prepend-icon select.form-control {
    padding-left: 42px;
}
#order-standard_cart.etheron-checkout .intl-tel-input input.form-control {
    padding-left: 84px;
}
#order-standard_cart.etheron-checkout .field:focus,
#order-standard_cart.etheron-checkout select.form-control:focus,
#order-standard_cart.etheron-checkout .intl-tel-input input.form-control:focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15);
    outline: none;
}
/* the country dropdown must float above the card, like on register */
#order-standard_cart.etheron-checkout .intl-tel-input {
    width: 100%;
    position: relative;
    z-index: 30;
}
#order-standard_cart.etheron-checkout .intl-tel-input .country-list {
    z-index: 60;
    border: 1.5px solid #eef0f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(52,62,61,.18);
    max-height: 260px;
}
/* total-due banner + complete-order button on brand */
#order-standard_cart.etheron-checkout #totalDueToday {
    background: #e7f6f9;
    border: 0;
    border-radius: 12px;
    color: #0c94ab;
    font-weight: 600;
}
#order-standard_cart.etheron-checkout #btnCompleteOrder {
    background: #0c94ab !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 44px;
    border-radius: 12px 12px 0 12px !important;
    transition: background .15s, box-shadow .15s;
}
#order-standard_cart.etheron-checkout #btnCompleteOrder:hover {
    background: #0a7a8f !important;
    box-shadow: 0 6px 18px rgba(12,148,171,.35);
}
@media (max-width: 767.98px) {
    #order-standard_cart.etheron-checkout {
        margin: 12px auto 48px;
    }
    #order-standard_cart.etheron-checkout .etheron-checkout-body {
        padding: 20px 16px 24px;
    }
}

/* checkout: the orderform's all.min.css loads AFTER this file, so its
   "#order-standard_cart .prepend-icon .field-icon" (1,2,0) tied with the
   rule above and won on source order — the icons sat 24px too high and
   overlapped the text. Same specificity + !important settles it. */
#order-standard_cart.etheron-checkout .prepend-icon .field-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
    color: #8a9691 !important;
    margin: 0 !important;
    text-align: left !important;
    z-index: 4;
    pointer-events: none;
}
#order-standard_cart.etheron-checkout .prepend-icon .field-icon i {
    font-size: 15px;
    color: #8a9691;
}

/* --- checkout: order overview --- */
.etheron-order-items {
    border: 1.5px solid #eef0f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 22px;
}
.etheron-order-item {
    padding: 14px 16px;
    border-bottom: 1px solid #f4f6f6;
}
.etheron-order-item-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.etheron-order-item-name {
    font-weight: 700;
    color: #343E3D;
    font-size: 15px;
}
.etheron-order-item-price {
    flex-shrink: 0;
    font-weight: 700;
    color: #343E3D;
    font-size: 15px;
    text-align: right;
}
.etheron-order-item-price small {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: #8a9691;
}
.etheron-order-item-meta {
    color: #607466;
    font-size: 13px;
    margin-top: 2px;
}
.etheron-order-item-sub {
    color: #607466;
    font-size: 12.5px;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.etheron-order-totals {
    background: #f4fbfc;
    padding: 12px 16px;
}
.etheron-order-total-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #607466;
    font-size: 14px;
    padding: 3px 0;
}
.etheron-order-total-row-final {
    border-top: 1px solid #dfe6e3;
    margin-top: 6px;
    padding-top: 9px;
    color: #343E3D;
    font-weight: 800;
    font-size: 16px;
}

/* checkout: discount line reads as a credit */
.etheron-order-total-row-discount span:last-child,
.etheron-order-total-row-discount {
    color: #d6336c;
}

/* checkout: "Bestaande klant inlog" / "Maak een nieuw account aan" toggle.
   Stock WHMCS floats a teal btn-info next to a YELLOW btn-warning, which
   also overflowed the card — one flex row, both on brand. */
#order-standard_cart.etheron-checkout .etheron-account-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
}
#order-standard_cart.etheron-checkout .etheron-account-toggle p {
    margin: 0;
    color: #607466;
    font-size: 14px;
    flex: 1 1 260px;
}
#order-standard_cart.etheron-checkout .etheron-account-toggle-btns {
    flex-shrink: 0;
}
#order-standard_cart.etheron-checkout .etheron-account-toggle-btns .btn {
    background: #fff !important;
    border: 1.5px solid #0c94ab !important;
    color: #0c94ab !important;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 10px !important;
    white-space: nowrap;
    transition: background .15s;
}
#order-standard_cart.etheron-checkout .etheron-account-toggle-btns .btn:hover {
    background: #f4fbfc !important;
}

/* --- checkout: payment method cards (two columns, logo + fee) --- */
#order-standard_cart.etheron-checkout .etheron-pay-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 4px;
    text-align: left;
}
#order-standard_cart.etheron-checkout .etheron-pay-method {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1.5px solid #dfe6e3;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-weight: 400;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
#order-standard_cart.etheron-checkout .etheron-pay-method:hover {
    border-color: #0c94ab;
}
/* the radio stays for the checkout JS, but the iCheck box is invisible */
#order-standard_cart.etheron-checkout .etheron-pay-method .iradio_square-blue,
#order-standard_cart.etheron-checkout .etheron-pay-method input.payment-methods {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden;
    pointer-events: none;
    margin: 0;
}
#order-standard_cart.etheron-checkout .etheron-pay-method:has(input:checked) {
    border-color: #0c94ab;
    background: #f4fbfc;
    box-shadow: 0 0 0 1px #0c94ab inset;
}
#order-standard_cart.etheron-checkout .etheron-pay-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 40px;
    height: 28px;
}
#order-standard_cart.etheron-checkout .etheron-pay-logo img {
    max-height: 26px;
    max-width: 40px;
    display: block;
}
#order-standard_cart.etheron-checkout .etheron-pay-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}
#order-standard_cart.etheron-checkout .etheron-pay-name {
    font-weight: 600;
    font-size: 14px;
    color: #343E3D;
}
#order-standard_cart.etheron-checkout .etheron-pay-fee {
    font-size: 12.5px;
    color: #8a9691;
}
#order-standard_cart.etheron-checkout .etheron-pay-check {
    flex: 0 0 auto;
    font-size: 18px;
    color: #dfe6e3;
    transition: color .15s;
}
#order-standard_cart.etheron-checkout .etheron-pay-method:has(input:checked) .etheron-pay-check {
    color: #0c94ab;
}
@media (max-width: 575.98px) {
    #order-standard_cart.etheron-checkout .etheron-pay-methods {
        grid-template-columns: 1fr;
    }
}
/* servicesfee's own fee table duplicates the per-card labels now */
#order-standard_cart.etheron-checkout #wsservicesfee {
    display: none !important;
}
/* mailing list row: plain and quiet, exactly like the terms row below it */
#order-standard_cart.etheron-checkout .marketing-email-optin {
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 4px;
}

/* --- company toggle (register + checkout): fields hidden until checked --- */
.etheron-hide {
    display: none !important;
}
.etheron-company-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 16px;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
    color: #343E3D;
    text-align: left;
}
.etheron-company-toggle input {
    margin: 0;
    flex-shrink: 0;
}

/* faint hosting hardware icons (ram, ssd, servers) on the page background,
   echoing the dark footer pattern; keep a light gradient underneath.
   Both layers must REPEAT: the canvas background only tiles past the root
   box when repeating (no-repeat stopped the colour after one viewport).
   The gradient runs horizontally so vertical tiling has no seams. */
html, body {
    background-image: url('../img/pattern-light.svg'), linear-gradient(90deg, #fdfbfb 0%, #ebedee 100%);
    background-size: 1600px auto, 100% 100%;
    background-repeat: repeat, repeat;
}

/* domain pricing table: signature corner, bottom right stays pointy.
   The shell rule's :not(:has(#order-standard_cart, ...)) carries ID-level
   specificity with !important, so this must match that weight and add one. */
#main-body > .container:not(:has(#order-standard_cart)) .domain-pricing .table-container,
.domain-pricing .table-container {
    border-radius: 12px 12px 0 12px !important;
}

/* ==========================================================================
   UNIFORM FORM CONTROLS — one look on every page, per Lars: square corners,
   1.5px hairline border, inputs and selects the same height, teal focus.
   :where() keeps specificity at the #main-body id only, so id-scoped
   component designs (register, checkout, kb search) win with their own
   rules; class-scoped ones (login panel, intl-tel phone, domain search)
   cannot outrank the id and are excluded explicitly instead.
   ========================================================================== */
#main-body :where(input.form-control:not([type="checkbox"]):not([type="radio"]),
    select.form-control,
    select,
    textarea.form-control):where(:not(:is(.etheron-login-panel, .intl-tel-input, .etheron-domain-search) *)) {
    border: 1.5px solid #dfe6e3;
    border-radius: 0;
    background-color: #fff;
    color: #343E3D;
    font-size: 15px;
    padding: 12px 14px;
    height: auto;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}
#main-body :where(input.form-control:not([type="checkbox"]):not([type="radio"]),
    select.form-control,
    select,
    textarea.form-control):where(:not(:is(.etheron-login-panel, .intl-tel-input, .etheron-domain-search) *)):focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15);
    outline: none;
}

/* markdown editor textarea (submit ticket): same hairline as other fields */
#main-body textarea.markdown-editor {
    border: 1.5px solid #dfe6e3 !important;
}

/* dedicated server manager: ALL buttons fully square, per Lars */
#dServermanagerApp .btn,
#dServermanagerApp .btn-group {
    border-radius: 0 !important;
}

/* intl-tel phone inputs on generic pages (details, contacts): same look as
   the uniform base, but leave the plugin's flag padding-left alone */
#main-body .intl-tel-input input.form-control {
    border: 1.5px solid #dfe6e3;
    border-radius: 0;
    background-color: #fff;
    color: #343E3D;
    font-size: 15px;
    padding-top: 12px;
    padding-bottom: 12px;
    height: auto;
    box-shadow: none;
}
#main-body .intl-tel-input input.form-control:focus {
    border-color: #0c94ab;
    box-shadow: 0 0 0 3px rgba(12,148,171,.15);
    outline: none;
}

/* user management + payment methods: action buttons fully square, per Lars
   (Machtigingen beheren / Toegang verwijderen / Instellen als Standaard /
   Bewerken) */
.btn-manage-permissions,
.btn-remove-user,
.btn-set-default,
a[data-role="edit-payment-method"] {
    border-radius: 0 !important;
}

/* configure page: the category sidebar renders empty but still floats the
   configurator to the right; drop it and center the content */
#order-standard_cart.etheron-configure .cart-sidebar {
    display: none !important;
}
#order-standard_cart.etheron-configure .cart-body {
    float: none !important;
    width: 100% !important;
    max-width: 1240px;
    margin: 0 auto !important;
}

/* invoice: label above logo-only gateway buttons (e.g. NOWPayments) */
#main-body .etheron-pay-hint {
    font-weight: 600;
    font-size: 14px;
    color: #343E3D;
    margin: 8px 0 6px;
}

/* configure page quantity sliders (ion.rangeSlider): teal, never green.
   The stock skin paints via a sprite, so every painted part is overridden
   with flat brand colors. */
#order-standard_cart .irs-bar,
#order-standard_cart .irs-bar-edge {
    background: #0c94ab !important;
    border-color: #0c94ab !important;
}
#order-standard_cart .irs-single,
#order-standard_cart .irs-from,
#order-standard_cart .irs-to {
    background: #0c94ab !important;
    color: #fff !important;
}
#order-standard_cart .irs-single::after,
#order-standard_cart .irs-from::after,
#order-standard_cart .irs-to::after {
    border-top-color: #0c94ab !important;
}
/* stock handle is 11x18 at top 31px; a 16px circle recentered on the bar */
#order-standard_cart .irs-slider {
    border: 2px solid #0c94ab !important;
    background: #fff !important;
    border-radius: 50%;
    cursor: pointer;
    width: 16px !important;
    height: 16px !important;
    top: 32px !important;
}

/* unpaid invoice banner: a real call to action instead of a mini button */
#main-body .etheron-pay-invoice-btn {
    font-size: 14px;
    font-weight: 700;
    padding: 10px 22px;
    white-space: nowrap;
}
/* upgrade actions are locked while an invoice is open; the hover note is a
   pure CSS tooltip (bootstrap tooltips are unreliable in the BS4/BS5 mix) */
#main-body .etheron-upgrade-locked {
    opacity: .45;
    cursor: not-allowed;
    position: relative;
    /* WHMCS adds bootstrap's .disabled (pointer-events: none), which kills
       every hover event; restore them so the note can show. The click stays
       blocked by the script. */
    pointer-events: auto !important;
}
#main-body .etheron-upgrade-locked:hover::after {
    content: attr(data-locked-note);
    position: absolute;
    left: 14px;
    top: calc(100% - 4px);
    z-index: 60;
    background: #343E3D;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 8px 12px;
    border-radius: 8px 8px 0 8px;
    width: max-content;
    max-width: 250px;
    white-space: normal;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    pointer-events: none;
}
/* invoice credit panel: the title sat dark on the teal header */
#main-body .card-header.bg-info .card-subtitle,
#main-body .card-header.bg-info .card-subtitle strong {
    color: #fff !important;
}