/* *****************************************************

    ** Custom Stylesheet — Java Host Dark Red Theme **

    Nuansa dark red untuk seluruh client area (template nexus).

***************************************************** */

:root {
    --white: #fff;

    /* === Dark red surface palette === */
    --neutral-50: #191114;
    --neutral-100: #20161a;
    --neutral-200: #2b1d22;
    --neutral-300: #3d2930;
    --neutral-400: #5c4149;
    --neutral-500: #8a6a73;
    --neutral-600: #b3939b;
    --neutral-700: #d3bcc1;
    --neutral-800: #e8dade;
    --neutral-900: #f5eef0;
    --neutral-950: #faf6f7;

    /* Primary ramp = dark red */
    --primary-50: #2a1218;
    --primary-100: #38161f;
    --primary-200: #4d1a28;
    --primary-300: #6b2134;
    --primary-400: #93283f;
    --primary-500: #b31230;
    --primary-600: #c8203a;
    --primary-700: #e02d4a;
    --primary-800: #f05268;
    --primary-900: #ff8a99;

    --primary: var(--primary-600);
    --primary-lifted: var(--primary-700);
    --primary-accented: var(--primary-800);

    /* Secondary = muted rose */
    --secondary: #8a5a64;
    --secondary-lifted: #a37180;
    --secondary-accented: #b98d99;

    /* Status colors tuned for dark background */
    --success: #2fbf5e;
    --success-lifted: #46d978;
    --success-accented: #1c9445;
    --info: #3f8cff;
    --info-lifted: #62a3ff;
    --info-accented: #2b6bd6;
    --notice: #a259ff;
    --notice-lifted: #b97fff;
    --notice-accented: #8440e0;
    --warning: #e8930c;
    --warning-lifted: #f5ab2e;
    --warning-accented: #b9760a;
    --error: #f0364a;
    --error-lifted: #ff5a6b;
    --error-accented: #c2243a;

    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-400);
    --neutral-accented: var(--neutral-300);

    /* Text on dark */
    --text-inverted: #1a0d11;
    --text-muted: #a98e96;
    --text-lifted: #c7b0b6;
    --text-accented: #e0cbd0;
    --text: #f2e9ec;

    /* Borders */
    --border-muted: #2b1d22;
    --border: #42292f;
    --border-lifted: #5c4149;
    --border-accented: #8a6a73;

    /* Backgrounds */
    --bg: #120b0e;
    --bg-muted: #191114;
    --bg-lifted: #20161a;
    --bg-accented: #2b1d22;
    --bg-inverted: #f5eef0;

    /* Radius & motion */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;
}

/* ============================================================
   Base
   ============================================================ */

body {
    background-color: var(--bg);
    color: var(--text);
}

/* Utility backgrounds that ship hardcoded white/light */
.bg-white,
.bg-light,
.card,
.panel,
.list-group,
.well,
.dropdown-menu,
.popover,
.modal-content,
.thumbnail,
.jumbotron {
    background-color: var(--bg-lifted) !important;
    color: var(--text);
    border-color: var(--border);
}

/* Homepage domain search box */
.home-domain-search {
    background-color: var(--bg-lifted) !important;
    border: 1px solid var(--border);
    border-radius: var(--rounding-lg);
}

/* ============================================================
   Navbar — deep red tinted bar
   ============================================================ */

.main-navbar-wrapper,
.navbar {
    background-color: #1a0e12 !important;
    border-bottom: 1px solid #42292f;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.navbar .nav-link,
.navbar .navbar-brand {
    color: #e8dade !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--primary-700) !important;
}

.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active {
    color: var(--primary-700) !important;
}

.navbar .dropdown-menu {
    background-color: #20161a;
    border: 1px solid #42292f;
}

.navbar .dropdown-item {
    color: #e8dade;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: #2b1d22;
    color: var(--primary-700);
}

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

.footer {
    background-color: #1a0e12 !important;
    border-top: 2px solid var(--primary-600);
    color: var(--text-muted);
}

.footer a {
    color: var(--primary-700);
}

.footer a:hover {
    color: var(--primary-800);
}

/* ============================================================
   Cards & panels — dark red surfaces
   ============================================================ */

.card,
.panel {
    background-color: var(--bg-lifted);
    border: 1px solid var(--border);
    border-radius: var(--rounding-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.card-header,
.panel-heading,
.card-footer,
.panel-footer {
    background-color: var(--bg-accented) !important;
    border-color: var(--border) !important;
    color: var(--text);
}

.card-body,
.panel-body {
    color: var(--text);
}

/* Homepage portal cards */
.card-columns.home .card {
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.card-columns.home .card:hover {
    border-color: var(--primary-600);
    transform: translateY(-2px);
}

/* ============================================================
   Tables — spec tables on product pages
   ============================================================ */

.table {
    color: var(--text);
    border-color: var(--border);
}

.table th,
.table td {
    border-color: var(--border) !important;
}

.table thead th {
    background-color: var(--bg-accented);
    border-color: var(--border) !important;
    color: var(--text);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(66, 41, 47, 0.35);
}

/* ============================================================
   Forms
   ============================================================ */

.form-control,
.form-select,
input,
select,
textarea {
    background-color: #191114 !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: #20161a !important;
    border-color: var(--primary-600) !important;
    box-shadow: 0 0 0 0.2rem rgba(184, 18, 48, 0.25) !important;
    color: var(--text) !important;
}

.form-control::placeholder,
input::placeholder {
    color: var(--text-muted) !important;
}

option {
    background-color: #20161a;
    color: var(--text);
}

.input-group-text {
    background-color: var(--bg-accented) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn-primary {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-700) !important;
    border-color: var(--primary-700) !important;
}

.btn-secondary {
    background-color: var(--bg-accented) !important;
    border-color: var(--border-lifted) !important;
    color: var(--text) !important;
}

.btn-secondary:hover {
    background-color: var(--border) !important;
}

.btn-default {
    background-color: transparent !important;
    border-color: var(--border-lifted) !important;
    color: var(--text) !important;
}

.btn-default:hover {
    background-color: var(--bg-accented) !important;
}

/* ============================================================
   Links & accents
   ============================================================ */

a {
    color: var(--primary-700);
}

a:hover,
a:focus {
    color: var(--primary-800);
}

.text-primary { color: var(--primary-700) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-dark { color: var(--text) !important; }

hr {
    border-color: var(--border);
}

/* ============================================================
   Alerts
   ============================================================ */

.alert-success { background-color: rgba(47, 191, 94, 0.12); border-color: var(--success-accented); color: #7fe0a0; }
.alert-info    { background-color: rgba(63, 140, 255, 0.12); border-color: var(--info-accented); color: #9cc4ff; }
.alert-warning { background-color: rgba(232, 147, 12, 0.12); border-color: var(--warning-accented); color: #f5c26b; }
.alert-danger,
.alert-error  { background-color: rgba(240, 54, 74, 0.12); border-color: var(--error-accented); color: #ff97a3; }

/* ============================================================
   Store sidebar & misc
   ============================================================ */

.list-group-item {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    color: var(--text);
}

.list-group-item-action:hover {
    background-color: var(--bg-accented);
    color: var(--primary-700);
}

.pagination .page-link {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    color: var(--text);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
    color: #fff;
}

.badge-primary,
.label-primary {
    background-color: var(--primary-600) !important;
}

/* ============================================================
   Site header wrapper & plain nav links
   theme.min.css forces header.header to white and colors the
   menu <a> elements (no .nav-link class) dark gray — unreadable
   on the dark theme. These rules override both.
   ============================================================ */

header.header {
    background-color: #1a0e12 !important;
    border-bottom: 1px solid var(--border);
}

.navbar-nav a,
.navbar .dropdown-menu .dropdown-item {
    color: #e8dade !important;
}

.navbar-nav a:hover,
.navbar-nav a:focus,
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    color: var(--primary-700) !important;
}

.navbar-nav .dropdown-menu {
    background-color: #20161a;
    border: 1px solid #42292f;
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
    background-color: #2b1d22;
}

/* ============================================================
   Sisa background putih — patch tema lanjutan
   (theme.min.css memakai selector ber-specificity tinggi untuk
   elemen-elemen ini; override butuh prefix `body` + !important)
   ============================================================ */

/* Portal cards homepage (action-icon-btns) */
body .action-icon-btns a,
body .action-icon-btns a.card-accent-gold,
body .action-icon-btns a.card-accent-green,
body .action-icon-btns a.card-accent-red,
body .action-icon-btns a.card-accent-blue,
body .action-icon-btns a.card-accent-orange,
body .action-icon-btns a.card-accent-teal,
body .action-icon-btns a.card-accent-pomegranate,
body .action-icon-btns a.card-accent-sun-flower,
body .action-icon-btns a.card-accent-asbestos,
body .action-icon-btns a.card-accent-midnight-blue {
    background-color: var(--bg-lifted) !important;
    color: var(--text) !important;
}

body .action-icon-btns a:hover {
    background-color: var(--bg-accented) !important;
    border-color: var(--primary-600) !important;
}

/* Homepage domain search box */
body .home-domain-search .input-group-wrapper {
    background-color: var(--bg-lifted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--rounding-lg) !important;
}

body .home-domain-search .input-group-wrapper .form-control {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

/* DataTables (tabel pricing domain) — header & sel putih */
body table.table-list thead th,
body table.table-list thead th.sorting_disabled,
body table.table-list > tbody > tr > td,
body table.table-list > tbody > tr > td.sorting_1 {
    background-color: var(--bg-lifted) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

body table.table-list tbody tr:hover > td {
    background-color: var(--bg-accented) !important;
}

body table.table-list thead th.sorting_asc,
body table.table-list thead th.sorting_desc {
    background-color: var(--bg-accented) !important;
    color: var(--primary-700) !important;
}

/* ============================================================
   Homepage baru Java Host — hero, paket, keunggulan, WA float
   ============================================================ */

/* Hero */
.jh-hero {
    background: linear-gradient(135deg, #1a0e12 0%, #2b1d22 55%, #38161f 100%);
    border-bottom: 3px solid var(--primary-600);
    color: var(--text);
}

.jh-hero .jh-hero-title {
    color: var(--text);
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1.25;
}

.jh-hero .jh-hero-sub {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 640px;
    margin: 0 auto 1.2rem;
}

.jh-hero .jh-hero-sub strong {
    color: var(--primary-700);
}

.jh-hero .jh-hero-search-title {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.jh-hero .input-group-wrapper {
    max-width: 560px;
    margin: 0 auto;
    background-color: var(--bg) !important;
    border: 1px solid var(--border-lifted) !important;
    border-radius: var(--rounding-md) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.jh-hero .input-group-wrapper .form-control {
    background-color: transparent !important;
    border: 0 !important;
    color: var(--text) !important;
    height: 48px;
    font-size: 1.05rem;
}

.jh-hero .input-group-wrapper .btn-primary {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
    height: 38px;
}

.jh-hero .input-group-wrapper .btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
}

.jh-hero-trust {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.4rem;
}

.jh-hero-trust li {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.jh-hero-trust li i {
    color: var(--primary-700);
    margin-right: 0.35rem;
}

.jh-hero .tld-logos {
    float: none !important;
    text-align: center;
}

.jh-hero .tld-logos li {
    float: none !important;
    display: inline-block;
    color: var(--text-muted);
}

.jh-hero-pricing-link {
    color: var(--primary-700) !important;
    float: none !important;
    display: inline-block;
    margin-top: 0.4rem;
}

/* Section umum */
.jh-section {
    padding: 3rem 0;
}

.jh-section-alt {
    background-color: var(--bg-muted);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.jh-section-title {
    text-align: center;
    color: var(--text);
    font-weight: 800;
    font-size: 1.7rem;
    margin-bottom: 0.4rem;
}

.jh-section-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    background: var(--primary-600);
    margin: 0.7rem auto 0;
    border-radius: 2px;
}

.jh-section-sub {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Kartu paket */
.jh-packages .jh-package {
    background-color: var(--bg-lifted);
    border: 1px solid var(--border);
    border-radius: var(--rounding-lg);
    padding: 1.6rem 1.3rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.jh-packages .jh-package:hover {
    border-color: var(--primary-600);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(179, 18, 48, 0.2);
}

.jh-package-featured {
    border-color: var(--primary-600) !important;
    box-shadow: 0 0 0 1px var(--primary-600), 0 8px 24px rgba(179, 18, 48, 0.25);
    position: relative;
}

.jh-package-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-600);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.jh-package-name {
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
}

.jh-package-price {
    color: var(--primary-700);
    font-size: 1.9rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 1rem;
}

.jh-package-price span {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.jh-package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.3rem;
    flex-grow: 1;
}

.jh-package-features li {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--border);
}

.jh-package-features li:last-child {
    border-bottom: 0;
}

.jh-package-features li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--primary-700);
    margin-right: 0.5rem;
    font-size: 0.8rem;
}

/* Tombol section */
.jh-btn-outline,
.jh-btn-primary,
.jh-btn-ghost {
    border-radius: var(--rounding-md) !important;
    font-weight: 700 !important;
    padding: 0.6rem 1rem !important;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.jh-btn-outline {
    background-color: transparent !important;
    border: 1px solid var(--primary-600) !important;
    color: var(--primary-700) !important;
}

.jh-btn-outline:hover {
    background-color: var(--primary-600) !important;
    color: #fff !important;
}

.jh-btn-primary {
    background-color: var(--primary-600) !important;
    border-color: var(--primary-600) !important;
    color: #fff !important;
}

.jh-btn-primary:hover {
    background-color: var(--primary-700) !important;
    border-color: var(--primary-700) !important;
}

.jh-btn-ghost {
    background-color: transparent !important;
    border: 1px solid var(--border-lifted) !important;
    color: var(--text) !important;
}

.jh-btn-ghost:hover {
    background-color: var(--bg-accented) !important;
}

/* Keunggulan */
.jh-features .jh-feature {
    text-align: center;
    padding: 1.2rem 0.8rem;
}

.jh-feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.9rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 4px 14px rgba(179, 18, 48, 0.35);
}

.jh-feature h3 {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.jh-feature p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 0;
}

/* Section CTA penutup */
.jh-cta {
    background: linear-gradient(135deg, #38161f 0%, #2b1d22 100%);
    border-top: 3px solid var(--primary-600);
    padding: 3.5rem 0;
}

.jh-cta .jh-section-title {
    margin-bottom: 0.6rem;
}

.jh-cta .jh-btn-primary.btn-lg,
.jh-cta .jh-btn-ghost.btn-lg {
    padding: 0.8rem 2rem !important;
    font-size: 1.05rem;
}

/* Tombol WhatsApp mengambang */
.jh-wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #1da851;
    color: #fff !important;
    padding: 0.75rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.jh-wa-float:hover {
    background-color: #179442;
    transform: translateY(-2px);
    color: #fff !important;
}

.jh-wa-float i {
    font-size: 1.4rem;
}

.jh-wa-label {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .jh-hero .jh-hero-title {
        font-size: 1.6rem;
    }
    .jh-wa-label {
        display: none;
    }
    .jh-wa-float {
        padding: 0.8rem;
    }
}

/* ============================================================
   Client area — invoice, tile, alert, btn-success
   ============================================================ */

/* Halaman invoice: latar gelap di layar, versi cetak tetap putih
   (invoice.min.css memaksa putih hanya di @media print) */
@media screen {
    .invoice-container {
        background-color: var(--bg-lifted) !important;
        border-color: var(--border) !important;
        color: var(--text) !important;
    }
    .invoice-container td.total-row,
    .invoice-container td.total-row.text-right,
    .invoice-container td.total-row.text-center,
    .invoice-container td.total-row.font-weight-bold {
        background-color: var(--bg-accented) !important;
        color: var(--text) !important;
    }
    .invoice-container table,
    .invoice-container td,
    .invoice-container th {
        border-color: var(--border) !important;
        color: var(--text) !important;
    }
    .invoice-container h1,
    .invoice-container h2,
    .invoice-container h3,
    .invoice-container h4,
    .invoice-container .invoice-status {
        color: var(--text) !important;
    }
    .invoice-container .text-muted,
    .invoice-container .small-text {
        color: var(--text-muted) !important;
    }
    .invoice-container a {
        color: var(--primary-700) !important;
    }
    .invoice-container hr {
        border-color: var(--border) !important;
    }
}

/* Sidebar action tiles (dashboard & halaman billing) */
.tiles .tile {
    background-color: var(--bg-lifted) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.tiles .tile .title {
    color: var(--text-muted) !important;
}

.tiles .tile:hover {
    background-color: var(--bg-accented) !important;
}

/* Tombol success di sidebar (theme pakai var(--bg-inverted) yang terang) */
body .sidebar .btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}

/* Alert yang mengandung form (theme: .alert:has(form) memaksa putih) */
body .alert-info:has(form) {
    background-color: rgba(63, 140, 255, 0.12) !important;
    border-color: var(--info-accented) !important;
    color: #9cc4ff !important;
}

body .alert-warning:has(form) {
    background-color: rgba(232, 147, 12, 0.12) !important;
    border-color: var(--warning-accented) !important;
    color: #f5c26b !important;
}

body .alert-danger:has(form),
body .alert-error:has(form) {
    background-color: rgba(240, 54, 74, 0.12) !important;
    border-color: var(--error-accented) !important;
    color: #ff97a3 !important;
}

body .alert-success:has(form) {
    background-color: rgba(47, 191, 94, 0.12) !important;
    border-color: var(--success-accented) !important;
    color: #7fe0a0 !important;
}