/* ==========================================================================
   WCHP Dashboard — Modern Redesign
   ========================================================================== */

:root {
    --wchp-blue:       #2563eb;
    --wchp-blue-light: #eff6ff;
    --wchp-blue-mid:   #bfdbfe;
    --wchp-green:      #16a34a;
    --wchp-green-light:#f0fdf4;
    --wchp-amber:      #d97706;
    --wchp-amber-light:#fffbeb;
    --wchp-red:        #dc2626;
    --wchp-red-light:  #fef2f2;
    --wchp-gray:       #6b7280;
    --wchp-gray-light: #f8fafc;
    --wchp-border:     #e2e8f0;
    --wchp-text:       #0f172a;
    --wchp-text-muted: #64748b;
    --wchp-card-shadow:0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --wchp-radius:     12px;
    --wchp-radius-sm:  8px;
}

/* ==========================================================================
   WRAPPER
   ========================================================================== */

.wchp-dashboard,
.wchp-subscriptions {
    max-width: 900px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--wchp-text);
}

/* ==========================================================================
   UNIFIED TOP NAVIGATION
   ========================================================================== */

.wchp-nav {
    display: flex;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius);
    padding: 6px;
    margin-bottom: 24px;
    box-shadow: var(--wchp-card-shadow);
}

.wchp-nav a {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--wchp-text-muted);
    text-decoration: none;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.wchp-nav a:hover {
    background: var(--wchp-gray-light);
    color: var(--wchp-text);
}

.wchp-nav a.active {
    background: var(--wchp-blue-light);
    color: var(--wchp-blue);
    font-weight: 600;
}

.wchp-nav a .wchp-nav-icon {
    font-size: 16px;
    line-height: 1;
}

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */

.wchp-page-header {
    margin-bottom: 20px;
}

.wchp-page-header h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--wchp-text);
}

.wchp-page-header p {
    margin: 0;
    color: var(--wchp-text-muted);
    font-size: 14px;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.wchp-empty {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius);
    box-shadow: var(--wchp-card-shadow);
}

.wchp-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.wchp-empty h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--wchp-text);
}

.wchp-empty p {
    color: var(--wchp-text-muted);
    margin: 0 0 20px;
    font-size: 14px;
}

/* ==========================================================================
   SERVICE CARDS
   ========================================================================== */

.wchp-service-card {
    background: #fff;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius);
    margin-bottom: 16px;
    box-shadow: var(--wchp-card-shadow);
    overflow: hidden;
    transition: box-shadow .2s;
}

.wchp-service-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.09);
}

/* Coloured top accent per status */
.wchp-service-card::before {
    content: '';
    display: block;
    height: 4px;
    background: #e2e8f0;
}
.wchp-status-active::before     { background: var(--wchp-green); }
.wchp-status-suspended::before  { background: var(--wchp-red); }
.wchp-status-pending::before,
.wchp-status-processing::before { background: var(--wchp-amber); }
.wchp-status-failed::before     { background: var(--wchp-red); }
.wchp-status-terminated::before,
.wchp-status-cancelled::before  { background: #94a3b8; }

.wchp-service-inner {
    padding: 20px 22px;
}

/* Card header row */
.wchp-service-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.wchp-service-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wchp-service-domain {
    font-size: 18px;
    font-weight: 700;
    color: var(--wchp-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wchp-service-type-label {
    font-size: 12px;
    color: var(--wchp-text-muted);
    font-weight: 500;
}

/* Status badge */
.wchp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.wchp-pill-active     { background: var(--wchp-green-light); color: var(--wchp-green); }
.wchp-pill-suspended  { background: var(--wchp-red-light);   color: var(--wchp-red); }
.wchp-pill-pending,
.wchp-pill-processing { background: var(--wchp-amber-light); color: var(--wchp-amber); }
.wchp-pill-failed     { background: var(--wchp-red-light);   color: var(--wchp-red); }
.wchp-pill-terminated,
.wchp-pill-cancelled  { background: #f1f5f9; color: #94a3b8; }

/* Meta grid */
.wchp-service-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--wchp-gray-light);
    border-radius: var(--wchp-radius-sm);
}

.wchp-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wchp-meta-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wchp-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.wchp-meta-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--wchp-text);
}

/* SSL badge */
.wchp-ssl-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--wchp-green-light);
    color: var(--wchp-green);
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}

/* Action buttons row */
.wchp-service-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.wchp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1.4;
}

.wchp-btn-primary {
    background: var(--wchp-blue);
    color: #fff !important;
    border-color: var(--wchp-blue);
}
.wchp-btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff !important;
}
/* Sommige thema's stylen a:hover/:active/:focus/:visited globaal en agressief
   (soms zelfs met !important), waardoor de tekst op deze knop onzichtbaar kan
   worden zodra je 'm gehoverd of aangeklikt hebt. Alle linkstatussen expliciet
   met hogere specificiteit vastzetten voorkomt dat. */
a.wchp-btn-primary,
a.wchp-btn-primary:link,
a.wchp-btn-primary:visited,
a.wchp-btn-primary:hover,
a.wchp-btn-primary:active,
a.wchp-btn-primary:focus {
    color: #fff !important;
    text-decoration: none !important;
}

.wchp-btn-ghost {
    background: #fff;
    color: var(--wchp-text) !important;
    border-color: var(--wchp-border);
}
.wchp-btn-ghost:hover {
    background: var(--wchp-gray-light);
    border-color: #c0ccd8;
    color: var(--wchp-text) !important;
}
a.wchp-btn-ghost,
a.wchp-btn-ghost:link,
a.wchp-btn-ghost:visited,
a.wchp-btn-ghost:hover,
a.wchp-btn-ghost:active,
a.wchp-btn-ghost:focus {
    color: var(--wchp-text) !important;
    text-decoration: none !important;
}

.wchp-btn-danger {
    background: var(--wchp-red-light);
    color: var(--wchp-red) !important;
    border-color: #fecaca;
}
.wchp-btn-danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}
a.wchp-btn-danger,
a.wchp-btn-danger:link,
a.wchp-btn-danger:visited,
a.wchp-btn-danger:hover,
a.wchp-btn-danger:active,
a.wchp-btn-danger:focus {
    color: var(--wchp-red) !important;
    text-decoration: none !important;
}

/* Small variant */
.wchp-btn-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 6px;
    gap: 4px;
}

/* Suspended alert */
.wchp-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--wchp-radius-sm);
    font-size: 13px;
    margin-bottom: 16px;
}

.wchp-alert-warning {
    background: var(--wchp-amber-light);
    border: 1px solid #fde68a;
    color: #92400e;
}
.wchp-alert-danger {
    background: var(--wchp-red-light);
    border: 1px solid #fecaca;
    color: #991b1b;
}
.wchp-alert-info {
    background: var(--wchp-blue-light);
    border: 1px solid var(--wchp-blue-mid);
    color: #1e40af;
}

.wchp-alert strong { display: block; margin-bottom: 4px; }
.wchp-alert a { color: inherit; font-weight: 600; }

/* ==========================================================================
   HOSTING BEHEER PANEEL
   ========================================================================== */

.wchp-manage-panel {
    border-top: 1px solid var(--wchp-border);
    margin-top: 16px;
    background: var(--wchp-gray-light);
}

/* Tab navigation */
.wchp-tab-nav {
    display: flex;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--wchp-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.wchp-tab-nav::-webkit-scrollbar { display: none; }

.wchp-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--wchp-text-muted);
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}

.wchp-tab-btn:hover { color: var(--wchp-blue); }

.wchp-tab-btn.active {
    color: var(--wchp-blue);
    border-bottom-color: var(--wchp-blue);
    font-weight: 600;
}

/* Links die zich als tab gedragen (Abonnement / Geavanceerde instellingen)
   — geen onderstreping/actieve status, verder gelijk aan de echte tabs. */
.wchp-tab-btn-link {
    text-decoration: none;
    color: var(--wchp-text-muted);
}
.wchp-tab-btn-link:hover {
    color: var(--wchp-blue);
    text-decoration: none;
}
/* "Geavanceerde instellingen" hoort los aan de rechterkant van de rij. */
.wchp-tab-btn-link--end {
    margin-left: auto;
}

/* Tab content */
.wchp-tab-pane {
    padding: 20px 22px;
}

.wchp-panel-loader {
    color: var(--wchp-text-muted);
    font-size: 14px;
    padding: 8px 0;
}

.wchp-hint {
    font-size: 12px;
    color: var(--wchp-text-muted);
    margin-top: 10px;
}

/* ==========================================================================
   MANAGE TABLES (email / subdomains / ftp)
   ========================================================================== */

.wchp-mgmt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.wchp-mgmt-table thead tr { background: var(--wchp-gray-light); }

.wchp-mgmt-table th {
    padding: 9px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--wchp-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--wchp-border);
}

.wchp-mgmt-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: var(--wchp-text);
}

.wchp-mgmt-table tr:last-child td { border-bottom: none; }
.wchp-mgmt-table tr:hover td { background: #f8fafc; }

/* ==========================================================================
   ADD FORM
   ========================================================================== */

.wchp-add-form {
    background: #fff;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}

.wchp-add-form h4 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wchp-text);
}

.wchp-add-form-fields {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.wchp-add-form label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wchp-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: block;
    margin-bottom: 5px;
}

.wchp-add-form input[type="text"],
.wchp-add-form input[type="password"],
.wchp-add-form input[type="number"],
.wchp-add-form select {
    display: block;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: var(--wchp-text);
    background: #fff;
    width: 150px;
    transition: border-color .15s, box-shadow .15s;
}

.wchp-add-form input:focus,
.wchp-add-form select:focus {
    border-color: var(--wchp-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Email domain suffix */
.wchp-email-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
}

.wchp-email-input-wrap input {
    margin: 0 !important;
    width: 120px !important;
    border-radius: 6px 0 0 6px !important;
    border-right: none !important;
}

.wchp-email-domain-hint {
    padding: 7px 10px;
    background: var(--wchp-gray-light);
    border: 1px solid #d1d5db;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: var(--wchp-text-muted);
    white-space: nowrap;
    line-height: 1.5;
}

/* ==========================================================================
   CHANGE PASSWORD INLINE FORM
   ========================================================================== */

.wchp-chpw-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--wchp-blue-light);
    border-top: 1px solid var(--wchp-blue-mid);
}

.wchp-chpw-form label {
    font-size: 11px;
    font-weight: 600;
    color: #1e40af;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: block;
    margin-bottom: 5px;
}

.wchp-chpw-form input[type="password"] {
    display: block;
    padding: 6px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 13px;
    color: var(--wchp-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.wchp-chpw-form input[type="password"]:focus {
    border-color: var(--wchp-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.wchp-chpw-msg { font-size: 13px; }

/* ==========================================================================
   WORDPRESS TAB
   ========================================================================== */

.wchp-wp-form {
    background: #fff;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius-sm);
    padding: 16px;
}

.wchp-wp-fields {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.wchp-wp-fields label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wchp-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: block;
    margin-bottom: 5px;
}

.wchp-wp-fields input,
.wchp-wp-fields select {
    display: block;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: var(--wchp-text);
    background: #fff;
    width: 150px;
    transition: border-color .15s, box-shadow .15s;
}

.wchp-wp-fields input:focus,
.wchp-wp-fields select:focus {
    border-color: var(--wchp-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.wchp-wp-section { margin-bottom: 10px; }

.wchp-wp-section h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--wchp-text);
}

.wchp-wp-badge {
    display: inline-block;
    background: var(--wchp-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    text-align: center;
}

.wchp-wp-table th {
    white-space: nowrap;
    background: var(--wchp-gray-light);
}

.wchp-wp-install-row > td {
    background: var(--wchp-blue-light);
    border-top: 2px solid var(--wchp-blue-mid);
    padding: 0;
}

.wchp-wp-install-form { padding: 16px; }

.wchp-wp-install-form .wchp-wp-fields label {
    font-size: 11px;
    font-weight: 600;
    color: var(--wchp-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: block;
    margin-bottom: 5px;
}

.wchp-wp-install-form .wchp-wp-fields input,
.wchp-wp-install-form .wchp-wp-fields select {
    display: block;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    width: 140px;
    color: var(--wchp-text);
    background: #fff;
}

.wchp-wp-success {
    background: var(--wchp-green-light);
    border: 1px solid #bbf7d0;
    border-radius: var(--wchp-radius-sm);
    padding: 14px 16px;
    margin-top: 10px;
    color: #14532d;
}

.wchp-wp-success p { margin: 0 0 8px; }
.wchp-wp-success p:last-child { margin-bottom: 0; }

.wchp-hint-inline {
    font-size: 11px;
    color: var(--wchp-text-muted);
    font-weight: normal;
}

/* ==========================================================================
   DNS PAGE
   ========================================================================== */

.wchp-dns-selector-card {
    background: #fff;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius);
    padding: 18px 20px;
    margin-bottom: 20px;
    box-shadow: var(--wchp-card-shadow);
}

.wchp-dns-selector-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--wchp-text);
    margin-bottom: 10px;
}

.wchp-dns-selector-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.wchp-select {
    flex: 1;
    min-width: 200px;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: var(--wchp-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.wchp-select:focus {
    border-color: var(--wchp-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.wchp-dns-section-card {
    background: #fff;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius);
    box-shadow: var(--wchp-card-shadow);
    overflow: hidden;
    margin-bottom: 20px;
}

.wchp-dns-section-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--wchp-border);
    background: var(--wchp-gray-light);
}

.wchp-dns-section-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--wchp-text);
}

.wchp-dns-body { padding: 20px; }

.wchp-dns-form-grid {
    display: grid;
    grid-template-columns: 100px 1fr 2fr 120px;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
}

.wchp-dns-form-grid label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--wchp-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 5px;
}

.wchp-dns-form-grid input,
.wchp-dns-form-grid select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 7px;
    font-size: 13px;
    color: var(--wchp-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.wchp-dns-form-grid input:focus,
.wchp-dns-form-grid select:focus {
    border-color: var(--wchp-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

#wchp-dns-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 4px;
}

#wchp-dns-table thead tr { background: var(--wchp-gray-light); }

#wchp-dns-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--wchp-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--wchp-border);
}

#wchp-dns-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

#wchp-dns-table tr:last-child td { border-bottom: none; }
#wchp-dns-table tr:hover td { background: #f8fafc; }

.wchp-dns-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    background: var(--wchp-blue-light);
    color: var(--wchp-blue);
    font-family: monospace;
}

/* ==========================================================================
   SUBSCRIPTIONS PAGE
   ========================================================================== */

.wchp-sub-card {
    background: #fff;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius);
    margin-bottom: 16px;
    box-shadow: var(--wchp-card-shadow);
    overflow: hidden;
    transition: box-shadow .2s;
}

.wchp-sub-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.09);
}

.wchp-sub-card-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wchp-sub-card-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.wchp-sub-domain {
    font-size: 17px;
    font-weight: 700;
    color: var(--wchp-text);
}

.wchp-sub-type {
    font-size: 12px;
    color: var(--wchp-text-muted);
    font-weight: 500;
}

.wchp-sub-card-body { padding: 16px 22px; }

.wchp-sub-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.wchp-sub-meta-item { display: flex; flex-direction: column; gap: 3px; }

.wchp-sub-meta-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--wchp-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.wchp-sub-meta-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--wchp-text);
}

.wchp-sub-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
}

.wchp-badge-active    { background: var(--wchp-green-light); color: var(--wchp-green); }
.wchp-badge-on_hold   { background: var(--wchp-amber-light); color: var(--wchp-amber); }
.wchp-badge-cancelled,
.wchp-badge-expired,
.wchp-badge-terminated { background: #f1f5f9; color: #94a3b8; }

.wchp-included-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
}

.wchp-invoice-box {
    border-radius: var(--wchp-radius-sm);
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.wchp-invoice-open   { background: var(--wchp-amber-light); border: 1px solid #fde68a; }
.wchp-invoice-paused { background: var(--wchp-red-light);   border: 1px solid #fecaca; }
.wchp-invoice-ended  { background: #f1f5f9; border: 1px solid #e2e8f0; }

.wchp-invoice-icon { font-size: 22px; flex-shrink: 0; }

.wchp-invoice-content { flex: 1; }

.wchp-invoice-content strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--wchp-text);
}

.wchp-invoice-content p {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--wchp-text-muted);
}

.wchp-sub-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid #f1f5f9;
}

/* ==========================================================================
   FEEDBACK / STATUS MESSAGES
   ========================================================================== */

.wchp-msg-ok  { color: var(--wchp-green); font-size: 13px; font-weight: 500; }
.wchp-msg-err { color: var(--wchp-red);   font-size: 13px; font-weight: 500; }
.wchp-ssl-msg { font-size: 13px; vertical-align: middle; }

.wchp-action-cell { white-space: nowrap; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 640px) {
    .wchp-nav { flex-wrap: wrap; }
    .wchp-nav a { flex: 1; justify-content: center; padding: 9px 10px; font-size: 13px; }
    .wchp-service-header { flex-direction: column; gap: 8px; }
    .wchp-service-meta { grid-template-columns: 1fr 1fr; }
    .wchp-sub-card-header { flex-direction: column; align-items: flex-start; }
    .wchp-sub-meta { grid-template-columns: 1fr 1fr; }
    .wchp-dns-form-grid { grid-template-columns: 1fr 1fr; }
    .wchp-tab-btn { padding: 10px 12px; font-size: 12px; }
    .wchp-add-form-fields { flex-direction: column; }
    .wchp-add-form input[type="text"],
    .wchp-add-form input[type="password"] { width: 100% !important; }
    .wchp-email-input-wrap { flex-wrap: wrap; }
    .wchp-email-input-wrap input { width: 100% !important; }
}

/* ==========================================================================
   WALLET (TeraWallet)
   ========================================================================== */

.wchp-wallet-card {
    background: #fff;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius);
    box-shadow: var(--wchp-card-shadow);
    margin-bottom: 24px;
    overflow: hidden;
}

.wchp-wallet-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
}

.wchp-wallet-icon-badge {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    background: var(--wchp-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.wchp-wallet-label {
    font-size: 12px;
    color: var(--wchp-text-muted);
    font-weight: 500;
    margin-bottom: 2px;
}

.wchp-wallet-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--wchp-text);
}

.wchp-wallet-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0 22px 18px;
}

.wchp-wallet-pill {
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    padding: 5px 12px;
    white-space: nowrap;
}
.wchp-wallet-pill--ok {
    color: var(--wchp-green);
    background: var(--wchp-green-light);
    border: 1px solid rgba(22,163,74,.25);
}
.wchp-wallet-pill--warn {
    color: var(--wchp-amber);
    background: var(--wchp-amber-light);
    border: 1px solid rgba(217,119,6,.25);
}

.wchp-wallet-panel {
    border-top: 1px solid var(--wchp-border);
    background: var(--wchp-gray-light);
    padding: 18px 22px 22px;
}

.wchp-wallet-tab-nav {
    background: transparent;
    border-bottom: 1px solid var(--wchp-border);
    margin: 0 0 18px;
    padding: 0;
}

.wchp-wallet-tab-pane {
    background: #fff;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius-sm);
    padding: 18px 20px;
}

/* Content die TeraWallet zelf via zijn action-hooks rendert (formulieren,
   statistiek-kaarten, transactietabel) — generieke opschoning zodat het
   past bij de rest van de stijl in plaats van de eigen plugin-look. */
.wchp-wallet-tab-pane form p,
.wchp-wallet-tab-pane form > div { margin-bottom: 14px; }

.wchp-wallet-tab-pane label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--wchp-text-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 5px;
}

.wchp-wallet-tab-pane input[type="text"],
.wchp-wallet-tab-pane input[type="number"],
.wchp-wallet-tab-pane input[type="email"],
.wchp-wallet-tab-pane select,
.wchp-wallet-tab-pane textarea {
    width: 100%;
    max-width: 360px;
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius-sm);
    padding: 9px 12px;
    font-size: 14px;
    color: var(--wchp-text);
    background: #fff;
    box-sizing: border-box;
}

.wchp-wallet-tab-pane input[type="submit"],
.wchp-wallet-tab-pane button[type="submit"] {
    background: var(--wchp-blue);
    color: #fff;
    border: none;
    border-radius: var(--wchp-radius-sm);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.wchp-wallet-tab-pane input[type="submit"]:hover,
.wchp-wallet-tab-pane button[type="submit"]:hover {
    background: #1d4ed8;
}

.wchp-wallet-tab-pane table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.wchp-wallet-tab-pane table th,
.wchp-wallet-tab-pane table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--wchp-border);
    text-align: left;
}
.wchp-wallet-tab-pane table th {
    color: var(--wchp-text-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Stat-kaarten van de "Overzicht"-tab */
.wchp-wallet-tab-pane .woo-wallet-stats-grid,
.wchp-wallet-tab-pane .ww-txn-table {
    font-size: 13px;
}
.wchp-wallet-tab-pane .woo-wallet-stat-card {
    border: 1px solid var(--wchp-border);
    border-radius: var(--wchp-radius-sm);
    background: var(--wchp-gray-light);
}

/* Transacties-tab: alleen de tabel tonen, geen zoek-/datumfilter erboven
   (die injecteert de plugin zelf via DataTables). CSS als directe eerste
   verdediging, de JS-MutationObserver vangt latere dynamische inhoud af. */
.wchp-wallet-tab-pane[data-wallet-pane="transactions"] .dataTables_filter,
.wchp-wallet-tab-pane[data-wallet-pane="transactions"] .dataTables_length,
.wchp-wallet-tab-pane[data-wallet-pane="transactions"] .woo-wallet-table-controls,
.wchp-wallet-tab-pane[data-wallet-pane="transactions"] [id*="daterange"],
.wchp-wallet-tab-pane[data-wallet-pane="transactions"] [class*="daterange"],
.wchp-wallet-tab-pane[data-wallet-pane="transactions"] [class*="date-filter"] {
    display: none !important;
}

@media (max-width: 640px) {
    .wchp-wallet-summary { flex-wrap: wrap; }
    .wchp-wallet-tab-nav { overflow-x: auto; white-space: nowrap; }
    .wchp-wallet-tab-pane input[type="text"],
    .wchp-wallet-tab-pane input[type="number"],
    .wchp-wallet-tab-pane select { max-width: 100%; }
}

/* ==========================================================================
   WOOCOMMERCE MY ACCOUNT SIDEBAR — eigen menu-items (Mijn diensten beheren /
   Abonnementen). Zelfde probleem als bij de knoppen: het thema stylet de
   actieve/hover-status van menu-links agressief, waardoor de tekst onzichtbaar
   kan worden tegen de gekleurde achtergrond van het actieve item. Alle
   linkstatussen expliciet vastzetten met hoge specificiteit voorkomt dat.
   ========================================================================== */
.woocommerce-MyAccount-navigation-link--hosting-services a,
.woocommerce-MyAccount-navigation-link--hosting-services a:link,
.woocommerce-MyAccount-navigation-link--hosting-services a:visited,
.woocommerce-MyAccount-navigation-link--hosting-services a:hover,
.woocommerce-MyAccount-navigation-link--hosting-services a:focus,
.woocommerce-MyAccount-navigation-link--mijn-abonnementen a,
.woocommerce-MyAccount-navigation-link--mijn-abonnementen a:link,
.woocommerce-MyAccount-navigation-link--mijn-abonnementen a:visited,
.woocommerce-MyAccount-navigation-link--mijn-abonnementen a:hover,
.woocommerce-MyAccount-navigation-link--mijn-abonnementen a:focus {
    color: inherit;
}

.woocommerce-MyAccount-navigation-link--hosting-services.is-active a,
.woocommerce-MyAccount-navigation-link--hosting-services.is-active a:link,
.woocommerce-MyAccount-navigation-link--hosting-services.is-active a:visited,
.woocommerce-MyAccount-navigation-link--hosting-services.is-active a:hover,
.woocommerce-MyAccount-navigation-link--hosting-services.is-active a:focus,
.woocommerce-MyAccount-navigation-link--mijn-abonnementen.is-active a,
.woocommerce-MyAccount-navigation-link--mijn-abonnementen.is-active a:link,
.woocommerce-MyAccount-navigation-link--mijn-abonnementen.is-active a:visited,
.woocommerce-MyAccount-navigation-link--mijn-abonnementen.is-active a:hover,
.woocommerce-MyAccount-navigation-link--mijn-abonnementen.is-active a:focus {
    color: #fff !important;
}