/*
 * Dark theme readability fixes.
 * Loaded after assets/css/dark.css. The template's dark build still carries
 * light-theme text colours in places, which leaves dark text on a dark
 * background. Everything here forces light, readable text.
 */

body.dark {
    color: #fff;
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark p,
body.dark li,
body.dark label,
body.dark td,
body.dark th {
    color: #fff;
}

/* Product cards (home: Hot Items and Products) */
body.dark .product-box-4 .product-detail a .name,
body.dark .product-box .product-detail a .name {
    color: #fff;
}

/* Bootstrap tables default to #212529 text */
body.dark .table {
    --bs-table-color: #fff;
    --bs-table-striped-color: #fff;
    --bs-table-active-color: #fff;
    --bs-table-hover-color: #fff;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    color: #fff;
}

/* Text utilities that turn text dark */
body.dark .text-dark,
body.dark .text-black {
    color: #fff !important;
}

body.dark .text-muted {
    color: #bbb !important;
}

/* Form fields */
body.dark .form-control,
body.dark .form-select {
    color: #fff;
}

/* Bootstrap turns the field white on focus, which hides the white text */
body.dark .form-control:focus,
body.dark .form-select:focus {
    background-color: #2a2d2d;
    color: #fff;
    border-color: var(--theme-color);
}

/* Browser autofill paints its own light background */
body.dark .form-control:-webkit-autofill,
body.dark .form-control:-webkit-autofill:hover,
body.dark .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #2a2d2d inset;
    caret-color: #fff;
}

body.dark .form-control::placeholder {
    color: #aaa;
}

body.dark .form-select option {
    background-color: #1d1d22;
    color: #fff;
}

/* Modals */
body.dark .modal-content {
    background-color: #1d1d22;
    color: #fff;
}

body.dark .modal-content .btn-close {
    filter: invert(1);
}

/* Product detail: top-up options */
body.dark .product-section .right-box-contain .product-packege .select-packege li a {
    color: #fff;
}

body.dark .product-section .right-box-contain .product-packege .select-packege li a.bg-gray {
    color: #888;
    cursor: not-allowed;
}

/* Product detail: payment method cards */
body.dark .payment-method {
    background-color: #1d1d22;
    border-color: #444 !important;
    color: #fff;
}

body.dark .payment-method:hover,
body.dark .payment-method.active {
    border-color: var(--theme-color) !important;
}

/* Selected method: same border as hover, thickened with a ring so it
   stays visible after the mouse leaves, without shifting the layout */
body.dark .payment-method.active {
    border-width: 1px !important;
    box-shadow: 0 0 0 1px var(--theme-color);
}

/* Payment logos are drawn for light backgrounds, so give them a light chip */
body.dark .payment-method img {
    box-sizing: content-box;
    background-color: #fff;
    padding: 3px 6px;
    border-radius: 4px;
}

/* Terms and privacy: content is pasted HTML with inline near-black colours.
   The magenta highlight in the terms is kept on purpose. */
body.dark .legal-content,
body.dark .legal-content *:not([style*="255, 0, 255"]) {
    color: #fff !important;
    background-color: transparent !important;
}