/* ============================================
   DARK THEME OVERRIDES
   Force dark backgrounds on all elements
   ============================================ */

/* Category Items - Force Dark */
.category__item,
.menu .category__item,
section.menu .category__item,
a.category__item {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
}

/* Pagination - Cyberpunk Dark Theme */
.pagination {
    gap: 10px;
}

.pagination .page-item {
    margin: 0 !important;
}

.pagination .page-link {
    background: rgba(26, 26, 46, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 12px !important;
    padding: 10px 18px !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
}

.pagination .page-link:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: #00d4ff !important;
    color: #00d4ff !important;
    transform: translateY(-2px);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.2) !important;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #00d4ff 0%, #bc13fe 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4) !important;
}

.pagination .page-item.disabled .page-link {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    opacity: 0.5;
}

.category__item:hover,
.menu .category__item:hover,
a.category__item:hover {
    border-color: rgba(0, 212, 255, 0.5) !important;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 212, 255, 0.15) !important;
}

.category__title,
a.category__item .category__title {
    color: #ffffff !important;
}

.category__desc,
a.category__item .category__desc {
    color: rgba(255, 255, 255, 0.6) !important;
}

.category__stats .badge {
    background: rgba(0, 212, 255, 0.15) !important;
    color: #00d4ff !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

.category__action {
    background: linear-gradient(135deg, #00d4ff, #bc13fe) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3) !important;
}

/* Service Cards - Force Dark */
.service-card {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.service-card:hover {
    border-color: rgba(0, 212, 255, 0.5) !important;
}

.service-card__title {
    color: #ffffff !important;
}

.service-card__desc {
    color: rgba(255, 255, 255, 0.6) !important;
}

.service-card__content {
    background: transparent !important;
}

.service-card__price {
    background: rgba(10, 10, 15, 0.6) !important;
}

.service-card__price-value {
    color: #39ff14 !important;
}

/* Account Cards - Force Dark */
.account-card {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
}

.account-card:hover {
    border-color: rgba(0, 212, 255, 0.5) !important;
}

.account-header {
    background: rgba(10, 10, 15, 0.6) !important;
}

.account-id {
    color: #00d4ff !important;
}

.account-price {
    color: #39ff14 !important;
}

.account-info {
    background: transparent !important;
}

.info-item__title {
    color: rgba(255, 255, 255, 0.7) !important;
    /* Brighter */
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    color: #ffffff !important;
    /* Pure white */
    font-weight: 700 !important;
    font-size: 1.2rem !important;
}

.account-description {
    background: rgba(0, 0, 0, 0.4) !important;
    border-top: 1px solid rgba(255, 215, 0, 0.2) !important;
    padding: 10px !important;
    border-radius: 0 0 15px 15px !important;
}

.account-description p {
    color: #ffd700 !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    text-align: center;
    margin: 0 !important;
}

/* Pagination Container Styling */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 20px;
}

.pagination {
    display: flex !important;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
    gap: 12px !important;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination .page-link,
.pagination .pagination-item {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

.pagination .page-link:hover,
.pagination .pagination-item:hover:not(.active):not(.disabled) {
    background: rgba(0, 212, 255, 0.2) !important;
    border-color: #00d4ff !important;
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
    transform: translateY(-3px) !important;
}

.pagination .page-item.active .page-link,
.pagination .page-item.active span,
.pagination .page-item.active a,
.pagination .pagination-item.active {
    background: linear-gradient(135deg, #00d4ff, #bc13fe) !important;
    border: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font-weight: 700 !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.pagination .page-item.disabled .page-link,
.pagination .pagination-item.disabled {
    background: rgba(10, 10, 15, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.2) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Cart Discount Section - Dark Mode */
.summary-discount-section {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.discount-input-wrapper {
    display: flex !important;
    gap: 8px !important;
}

#discount-code {
    flex: 1 !important;
    background: rgba(10, 10, 15, 0.6) !important;
    border: 1px solid rgba(255, 212, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    color: #fff !important;
    font-size: 1.3rem !important;
}

.btn-apply-discount {
    background: linear-gradient(135deg, #00d4ff, #bc13fe) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.btn-apply-discount:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
}

#discount-message {
    margin-top: 10px !important;
    font-size: 1.2rem !important;
}

#discount-message .success {
    color: #39ff14 !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

#discount-message .error {
    color: #ff3366 !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Lucky Wheel Cards - Force Dark */
.wheel-card,
.lucky-card {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
}

/* Filter Sections - Force Dark */
.account-filter,
.service-filter {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.account-filter__label,
.service-filter__label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.account-filter__input,
.service-filter__input {
    background-color: rgba(10, 10, 15, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* No Results / Empty States - Force Dark */
.no-results,
.no-data {
    background: rgba(26, 26, 46, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.no-results__title,
.no-data-text {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Section titles - Gradient text */
.section-title,
.menu__header__title,
.detail__product-title,
.service__price-title,
.service__form-title,
.related-accounts__title,
.note-modal__title,
.modal__title,
.category__title {
    background: linear-gradient(135deg, #00d4ff, #bc13fe, #ff00ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}

/* Specific Page Overrides - Account Detail & Service */
.detail__specs,
.service__form,
.service__price-section,
.note-modal__content,
.detail__layout {
    background: rgba(26, 26, 46, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 20px !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
}

.service {
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.spec-row,
.service__price-row {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
}

.spec-row:hover,
.service__price-row:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
    transform: translateX(5px);
}

.spec-label,
.service__price-col--package,
.service__price-col--price {
    color: rgba(255, 255, 255, 0.6) !important;
}

.spec-value,
.service__price-row td {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.service__price-table thead th {
    background: rgba(0, 212, 255, 0.2) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Lightbox & Modal Fixes */
.image-lightbox,
.note-modal {
    z-index: 9999 !important;
}

.lightbox-content img {
    border: 3px solid rgba(0, 212, 255, 0.5) !important;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3) !important;
}

/* Pagination - Force Dark */
.pagination .page-link {
    background: rgba(26, 26, 46, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #00d4ff, #bc13fe) !important;
    color: #ffffff !important;
}

/* Modal Overrides - Force Dark */
.modal-content,
.service-modal__content {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

.modal-header,
.service-modal__header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(188, 19, 254, 0.2)) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.modal-body,
.service-modal__body {
    color: rgba(255, 255, 255, 0.9) !important;
}

.modal-footer,
.service-modal__footer {
    background: rgba(10, 10, 15, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Form Inputs in Modals - Force Dark */
.modal input,
.modal textarea,
.modal select,
.service-modal__form-input,
.service-modal__form-textarea {
    background: rgba(10, 10, 15, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Buttons - Ensure Gradient */
.btn-primary,
.btn-glass-primary,
.service-card__btn,
.category__action {
    background: linear-gradient(135deg, #00d4ff, #bc13fe) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Alert/Notice Boxes */
.alert,
.service-modal__notice {
    background: rgba(255, 215, 0, 0.15) !important;
    color: #ffd700 !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
}

/* Random Account specific overrides */
.random-card,
.random-account-card {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
}

/* Wheel specific overrides */
.wheel-category-card,
.lucky-wheel-card {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
}

/* ============================================
   TEXT READABILITY FIXES
   Ensure all text is visible and readable
   ============================================ */

/* === BASE TEXT COLORS === */
body {
    color: #ffffff !important;
}

p,
span,
div,
li,
td,
th,
label {
    color: inherit;
}

/* === CARD TEXT - White/Light Background Cards === */
.card,
.card-body,
.glass-card,
.blog-card,
.review-card,
.post-card,
.comment-card {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card-body h1,
.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5,
.card-body h6,
.card-title,
.card-header {
    color: #ffffff !important;
}

.card p,
.card span,
.card-text,
.card-body p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* === BLOG / POST PAGES === */
.blog-title,
.post-title,
.article-title,
h1.blog-title,
h1.post-title,
h2.blog-title,
h2.post-title {
    color: #ffffff !important;
}

.blog-content,
.post-content,
.article-content,
.blog-content p,
.post-content p,
.article-content p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.blog-meta,
.post-meta,
.article-meta,
.blog-date,
.post-date {
    color: rgba(255, 255, 255, 0.6) !important;
}

.blog-description,
.post-description,
.post-excerpt {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Blog list items */
.blog-item,
.post-item,
.article-item {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.blog-item h3,
.post-item h3,
.article-item h3,
.blog-item a,
.post-item a {
    color: #ffffff !important;
}

.blog-item p,
.post-item p,
.blog-item .description,
.post-item .description {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Sidebar */
.sidebar,
.blog-sidebar,
.post-sidebar {
    background: rgba(26, 26, 46, 0.9) !important;
    color: #ffffff !important;
}

.sidebar h3,
.sidebar h4,
.sidebar-title {
    color: #ffffff !important;
}

.sidebar a,
.sidebar p,
.sidebar li {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* === REVIEW / RATING PAGES === */
.review-section,
.rating-section {
    background: rgba(26, 26, 46, 0.95) !important;
}

.review-card,
.review-item,
.comment-item {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.review-title,
.review-username,
.commenter-name {
    color: #ffffff !important;
}

.review-content,
.review-text,
.comment-text,
.comment-content {
    color: rgba(255, 255, 255, 0.9) !important;
}

.review-meta,
.review-date,
.comment-date {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Rating summary box */
.rating-summary,
.review-summary,
.rating-overview {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.rating-value,
.average-rating {
    color: #ffd700 !important;
}

.rating-count,
.review-count {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Rating bars */
.rating-bar,
.progress-bar {
    background: rgba(255, 255, 255, 0.1) !important;
}

.rating-bar-fill {
    background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
}

/* === COMMENT SECTION === */
.comments-section,
.comments-list {
    background: transparent !important;
}

.comment-form {
    background: rgba(26, 26, 46, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.comment-form label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.comment-form input,
.comment-form textarea,
.comment-form select {
    background: rgba(10, 10, 15, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* === PROFILE PAGE === */
.profile-section,
.user-profile,
.account-info-section {
    background: rgba(26, 26, 46, 0.95) !important;
}

.profile-sidebar,
.account-sidebar {
    background: rgba(26, 26, 46, 0.95) !important;
}

.profile-sidebar a,
.account-sidebar a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.profile-sidebar a.active,
.account-sidebar a.active {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(188, 19, 254, 0.2)) !important;
    color: #00d4ff !important;
}

.profile-content,
.account-content {
    background: rgba(26, 26, 46, 0.95) !important;
}

.profile-content h1,
.profile-content h2,
.profile-content h3,
.account-content h1,
.account-content h2,
.account-content h3 {
    color: #ffffff !important;
}

.profile-content p,
.profile-content span,
.account-content p,
.account-content span {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Profile info rows */
.info-row,
.profile-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.info-label,
.profile-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

.info-value,
.profile-value {
    color: #ffffff !important;
}

/* === FORM ELEMENTS === */
input,
textarea,
select {
    background: rgba(10, 10, 15, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2) !important;
}

label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Select dropdown options */
option {
    background: #1a1a2e !important;
    color: #ffffff !important;
}

/* === HEADINGS & TITLES === */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff !important;
}

/* === BREADCRUMB === */
.breadcrumb,
.breadcrumb-item,
.breadcrumb a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.breadcrumb-item.active {
    color: #00d4ff !important;
}

/* === TABLE === */
table,
.table {
    color: #ffffff !important;
}

th {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(0, 212, 255, 0.1) !important;
}

td {
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* === ALERTS === */
.alert-info {
    background: rgba(0, 212, 255, 0.15) !important;
    color: #00d4ff !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
}

.alert-success {
    background: rgba(57, 255, 20, 0.15) !important;
    color: #39ff14 !important;
    border-color: rgba(57, 255, 20, 0.3) !important;
}

.alert-warning {
    background: rgba(255, 215, 0, 0.15) !important;
    color: #ffd700 !important;
    border-color: rgba(255, 215, 0, 0.3) !important;
}

.alert-danger {
    background: rgba(255, 51, 102, 0.15) !important;
    color: #ff3366 !important;
    border-color: rgba(255, 51, 102, 0.3) !important;
}

/* === LINKS === */
a {
    color: #00d4ff !important;
}

a:hover {
    color: #bc13fe !important;
}

/* === FOOTER TEXT === */
footer,
footer p,
footer span,
footer a,
footer li {
    color: rgba(255, 255, 255, 0.7) !important;
}

footer h3,
footer h4,
footer h5 {
    color: #ffffff !important;
}

/* === GENERAL TEXT FIXES === */
.text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

.text-dark {
    color: #ffffff !important;
}

.text-secondary {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Fix any remaining light backgrounds */
.bg-white,
.bg-light {
    background: rgba(26, 26, 46, 0.95) !important;
}

/* Container backgrounds */
main,
.main-content,
.content-wrapper {
    background: transparent !important;
}

/* Ensure icons are visible */
i,
.fa,
.fas,
.far,
.fab {
    color: currentColor;
}

/* Service Page Specific Fixes */
.service-page {
    background-color: #0a0a0f !important;
    color: #ffffff !important;
}

/* Restored Related Card Styles */
.related-card {
    display: flex;
    flex-direction: column;
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.related-card:hover {
    transform: translateY(-5px);
    border-color: #00d4ff !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.related-card__image {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.related-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.related-card:hover .related-card__image img {
    transform: scale(1.1);
}

.related-card__info {
    padding: 15px;
}

.related-card__title {
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.related-card__desc {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.related-card__price {
    color: #39ff14 !important;
    font-size: 1.2rem;
    font-weight: 800;
}

.related-card__hot {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ff3366, #ff00ff);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}


.service,
.service__form,
.service__banner,
.service__alert,
.service__price-table {
    background: rgba(26, 26, 46, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.service__banner img {
    border-radius: 12px;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
}

/* Ensure account card text in detail page is visible */
.account-card .account-info .info-item,
.account-card .account-info .info-value,
.account-card .account-header,
.account-card .account-price,
.account-card .account-id {
    color: #fff !important;
}

.account-card .account-price {
    color: #39ff14 !important;
}

/* Clear overlaps in detail */
.detail__right .detail__info-card {
    background: rgba(26, 26, 46, 0.8) !important;
}

/* Force Dark Backgrounds for specific sections */
.account-list,
.account-section,
.account-list-section,
.random-account-list,
.account-grid-section,
section.account-list,
section.account-section {
    background-color: transparent !important;
}

/* Fix for containers that might have inherited light backgrounds */
.container,
.container-fluid {
    background-color: transparent !important;
}

/* Account Card Link - Ensure dark button look */
.account-card__link {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.account-card__link:hover {
    background: linear-gradient(135deg, #00d4ff, #bc13fe) !important;
    color: #fff !important;
}

/* Fix for any remaining light backgrounds */
[style*="background-color: #f1f1f1"],
[style*="background-color: #f8f9fa"],
[style*="background-color: #ffffff"],
[style*="background-color: white"] {
    background-color: transparent !important;
}

/* ========================================
   PROFILE PAGE HEADER COLORS FIX
   Harmonious Cyan/Purple Dark Theme
   ======================================== */

/* Profile Header - Cyan to Purple gradient instead of pink */
body .profile-header,
.profile-section .profile-header {
    background: linear-gradient(135deg, #0891b2 0%, #6366f1 50%, #8b5cf6 100%) !important;
    border-bottom: 4px solid #6366f1 !important;
}

/* Profile Container - Dark glassmorphism */
body .profile-container,
.profile-section .profile-container {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Sidebar styling to match dark theme */
body .profile-sidebar,
.profile-section .profile-sidebar {
    background: rgba(26, 26, 46, 0.5) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body .sidebar-header,
.profile-section .sidebar-header {
    background: transparent !important;
}

body .sidebar-header::after,
.profile-section .sidebar-header::after {
    background: linear-gradient(90deg, #00d4ff, #8b5cf6) !important;
}

body .sidebar-title,
.profile-section .sidebar-title {
    color: #00d4ff !important;
}

body .sidebar-link,
.profile-section .sidebar-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

body .sidebar-link i,
.profile-section .sidebar-link i {
    color: rgba(255, 255, 255, 0.6) !important;
}

body .sidebar-item:hover .sidebar-link,
.profile-section .sidebar-item:hover .sidebar-link {
    background: rgba(0, 212, 255, 0.1) !important;
    color: #00d4ff !important;
}

body .sidebar-item:hover .sidebar-link i,
.profile-section .sidebar-item:hover .sidebar-link i {
    color: #00d4ff !important;
}

body .sidebar-item.active .sidebar-link,
.profile-section .sidebar-item.active .sidebar-link {
    background: linear-gradient(135deg, #0891b2, #6366f1) !important;
    color: white !important;
}

body .sidebar-item.active .sidebar-link i,
.profile-section .sidebar-item.active .sidebar-link i {
    color: white !important;
}

/* Profile Main content area */
body .profile-main,
.profile-section .profile-main {
    background: transparent !important;
}

body .info-header,
.profile-section .info-header {
    background: transparent !important;
    border-bottom: 2px solid #6366f1 !important;
}

body .info-header::after,
.profile-section .info-header::after {
    background: linear-gradient(90deg, #00d4ff, #8b5cf6) !important;
}

body .info-title,
.profile-section .info-title {
    color: #00d4ff !important;
}

body .info-row,
.profile-section .info-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body .info-row:hover,
.profile-section .info-row:hover {
    background: rgba(0, 212, 255, 0.05) !important;
}

body .info-label,
.profile-section .info-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

body .info-value,
.profile-section .info-value {
    color: #fff !important;
}

/* Notification cards - fix bright gradient backgrounds */
body .notification-card,
body .notification-item,
body .alert-notication-custom {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

/* Table styling for dark theme - CRITICAL FOR HOVER */
body .history-table,
.profile-section .history-table {
    background: transparent !important;
}

body .history-table th,
.profile-section .history-table th {
    background: rgba(26, 26, 46, 0.8) !important;
    color: #fff !important;
    border-bottom: 2px solid #6366f1 !important;
}

body .history-table td,
.profile-section .history-table td {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* FIX: Table row hover - MUST be dark, not white */
body .history-table tr:hover td,
.profile-section .history-table tr:hover td,
body .history-table tbody tr:hover td,
.profile-section .history-table tbody tr:hover td {
    background: rgba(0, 212, 255, 0.08) !important;
    color: #fff !important;
}

/* History table container */
body .history-table-container,
.profile-section .history-table-container {
    background: transparent !important;
    box-shadow: none !important;
}

/* Balance info styling */
body .balance-info,
.profile-section .balance-info {
    color: #fff !important;
}

body .balance-label,
.profile-section .balance-label {
    color: #fff !important;
}

/* FIX: Zebra striping - ALL rows must be dark */
body .history-table tr,
body .history-table tbody tr,
.profile-section .history-table tr,
.profile-section .history-table tbody tr,
body .history-table tr:nth-child(even),
body .history-table tr:nth-child(odd),
body .history-table tbody tr:nth-child(even),
body .history-table tbody tr:nth-child(odd),
.profile-section .history-table tr:nth-child(even),
.profile-section .history-table tr:nth-child(odd) {
    background: transparent !important;
    background-color: transparent !important;
}

body .history-table tr td,
body .history-table tbody tr td,
.profile-section .history-table tr td,
body .history-table tr:nth-child(even) td,
body .history-table tr:nth-child(odd) td {
    background: transparent !important;
    background-color: transparent !important;
}

/* ========================================
   DEPOSIT PAGES - ATM & CARD
   ======================================== */

/* Deposit History Section */
body .deposit-history,
.profile-section .deposit-history {
    background: transparent !important;
}

body .history-header,
.profile-section .history-header {
    background: linear-gradient(135deg, #0891b2 0%, #6366f1 100%) !important;
    color: #fff !important;
    padding: 15px 20px !important;
    border-radius: 8px 8px 0 0 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Deposit Notice Box */
body .deposit-notice,
.profile-section .deposit-notice {
    background: rgba(26, 26, 46, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 25px;
}

body .notice-header,
.profile-section .notice-header {
    background: linear-gradient(135deg, #0891b2 0%, #6366f1 100%) !important;
    color: #fff !important;
    padding: 12px 20px !important;
    font-weight: 700 !important;
}

body .notice-content,
.profile-section .notice-content {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 15px 20px !important;
}

body .notice-content p,
.profile-section .notice-content p {
    color: rgba(255, 255, 255, 0.85) !important;
}

body .notice-warning,
.profile-section .notice-warning {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

/* Bank Accounts Container */
body .bank-accounts-container,
.profile-section .bank-accounts-container {
    background: transparent !important;
}

body .bank-accounts-title,
.profile-section .bank-accounts-title {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 600 !important;
    margin-bottom: 15px !important;
}

body .bank-account-item,
.profile-section .bank-account-item {
    background: rgba(26, 26, 46, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #fff !important;
}

body .bank-account-item .bank-name,
.profile-section .bank-account-item .bank-name {
    color: #00d4ff !important;
}

body .bank-account-item .label,
.profile-section .bank-account-item .label {
    color: rgba(255, 255, 255, 0.6) !important;
}

body .bank-account-item .value,
.profile-section .bank-account-item .value {
    color: #fff !important;
}

/* Copy Button */
body .copy-btn,
.profile-section .copy-btn {
    background: rgba(0, 212, 255, 0.2) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: #00d4ff !important;
}

body .copy-btn:hover,
.profile-section .copy-btn:hover {
    background: rgba(0, 212, 255, 0.4) !important;
}

/* ========================================
   MODALS - Dark Theme
   ======================================== */

body .modal,
.profile-section .modal {
    background: rgba(0, 0, 0, 0.8) !important;
}

body .modal__content,
body .modal-content,
.profile-section .modal__content {
    background: rgba(26, 26, 46, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

body .modal__header,
body .modal-header,
.profile-section .modal__header {
    background: linear-gradient(135deg, #0891b2 0%, #6366f1 100%) !important;
    border-bottom: none !important;
    padding: 15px 20px !important;
    border-radius: 16px 16px 0 0 !important;
}

body .modal__title,
body .modal-title,
.profile-section .modal__title {
    color: #fff !important;
    font-weight: 700 !important;
}

body .modal__close,
body .modal-close,
body .close,
.profile-section .modal__close {
    color: #fff !important;
    opacity: 0.8;
}

body .modal__close:hover,
body .close:hover,
.profile-section .modal__close:hover {
    color: #fff !important;
    opacity: 1;
}

body .modal__body,
body .modal-body,
.profile-section .modal__body {
    background: rgba(26, 26, 46, 0.98) !important;
    color: #fff !important;
    padding: 20px !important;
}

body .modal__row,
.profile-section .modal__row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 12px 0 !important;
}

body .modal__label,
.profile-section .modal__label {
    color: rgba(255, 255, 255, 0.7) !important;
}

body .modal__value,
.profile-section .modal__value {
    color: #fff !important;
}

body .modal__value--price,
.profile-section .modal__value--price {
    color: #ef4444 !important;
}

body .modal__footer,
body .modal-footer,
.profile-section .modal__footer {
    background: rgba(26, 26, 46, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 15px 20px !important;
    border-radius: 0 0 16px 16px !important;
}

body .modal__btn,
.profile-section .modal__btn {
    border-radius: 8px !important;
    padding: 10px 25px !important;
    font-weight: 600 !important;
}

body .modal__btn--close,
.profile-section .modal__btn--close {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body .modal__btn--close:hover,
.profile-section .modal__btn--close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Info Content area */
body .info-content,
.profile-section .info-content {
    background: transparent !important;
}

/* Balance info value */
body .balance-value,
.profile-section .balance-value {
    color: #39ff14 !important;
    font-weight: 700 !important;
}



/* ========================================
   ALERTS - Dark Theme
   ======================================== */

body .alert,
.profile-section .alert,
body .service__alert {
    border-radius: 12px !important;
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
    border: none !important;
    backdrop-filter: blur(10px) !important;
}

body .alert-success,
body .service__alert--success {
    background: rgba(57, 255, 20, 0.1) !important;
    border: 1px solid rgba(57, 255, 20, 0.3) !important;
    color: #39ff14 !important;
}

body .alert-danger,
body .service__alert--error {
    background: rgba(255, 51, 102, 0.1) !important;
    border: 1px solid rgba(255, 51, 102, 0.3) !important;
    color: #ff3366 !important;
}

/* ========================================
   FORM INPUTS - Dark Theme
   ======================================== */

body .profile-section input[type="text"],
body .profile-section input[type="password"],
body .profile-section input[type="number"],
body .profile-section input[type="email"],
body .profile-section select,
body .profile-section textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
}

body .profile-section input:focus,
body .profile-section select:focus,
body .profile-section textarea:focus {
    border-color: #00d4ff !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2) !important;
}

/* ========================================
   MODAL EXTRA FIXES
   ======================================== */

body .modal__section,
.profile-section .modal__section {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
}

body .modal__section h6,
.profile-section .modal__section h6 {
    color: #00d4ff !important;
    font-size: 1.6rem !important;
    margin-bottom: 15px !important;
}

/* Bank QR Fix */
body .bank-qr-code,
.profile-section .bank-qr-code {
    background: #fff !important;
    padding: 10px !important;
    border-radius: 12px !important;
    display: inline-block !important;
}

body .bank-qr-code img,
.profile-section .bank-qr-code img {
    display: block !important;
    max-width: 150px !important;
}

/* Profile Sidebar Badge Fix */
body .profile-sidebar .badge,
.profile-section .profile-sidebar .badge {
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.4) !important;
}

/* Account Detail Link in profile */
body .history-table .btn-info,
.profile-section .history-table .btn-info {
    background: #00d4ff !important;
    border: none !important;
    color: #000 !important;
}

body .history-table .btn-info:hover,
.profile-section .history-table .btn-info:hover {
    background: #00a1cc !important;
    transform: scale(1.05);
}

/* Purchased accounts specific */
body .text-bold {
    font-weight: 700 !important;
}

/* ========================================
   ULTRA-SPECIFIC MODAL FIX
   Force dark background on all modal types
   ======================================== */

body .modal,
body .modal__content,
body .modal-content,
body .result-modal .modal-content,
.profile-section .modal__content,
.wheel-game-wrapper .modal-content {
    background: rgba(20, 20, 35, 0.98) !important;
    background-color: rgba(20, 20, 35, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

body .modal__body,
body .modal-body,
body .modal__info {
    background: transparent !important;
    background-color: transparent !important;
    color: #fff !important;
}

body .result-title,
body .result-desc {
    color: #fff !important;
}

body .result-reward {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #00d4ff !important;
}

/* ========================================
   DEPOSIT PAGE EXTRA FIXES
   ======================================== */

body .deposit-container,
.deposit-section .deposit-container {
    background: rgba(26, 26, 46, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body .deposit-balance,
.deposit-section .deposit-balance {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body .deposit-form {
    background: transparent !important;
}

body .receive-amount {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #39ff14 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body .deposit-syntax {
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid #00d4ff !important;
}

body .deposit-syntax .syntax-value {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #00d4ff !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
}

/* Force dark on any missed boxes */
body .deposit-notice,
body .bank-account-item {
    background: rgba(26, 26, 46, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* QR Code Section - Make sure it's visible but not blinding */
body .bank-qr-code {
    background: #fff !important;
    padding: 12px !important;
    border-radius: 12px !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 15px !important;
}

body .bank-account-item {
    background: rgba(30, 30, 50, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

body .bank-account-item:hover {
    border-color: rgba(0, 212, 255, 0.5) !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1) !important;
}

body .qr-note {
    color: #333 !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
}

/* Table Row Hover State - Final reinforcement */
body .history-table tr:hover td {
    background: rgba(0, 212, 255, 0.1) !important;
}

/* Success/Info icons */
body .text-success {
    color: #39ff14 !important;
}

body .text-info {
    color: #00d4ff !important;
}

body .text-danger {
    color: #ff3366 !important;
}

/* ============================================
   LUCKY WHEEL PAGE - COMPREHENSIVE DARK THEME FIX
   ============================================ */

/* Main Container - Remove purple, add dark glass */
.wheel-game-container {
    background: rgba(15, 15, 25, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(0, 212, 255, 0.1) !important;
}

.wheel-game-container::before {
    background-image: radial-gradient(circle, rgba(0, 212, 255, 0.1) 1px, transparent 1px) !important;
}

/* Header & Title */
.wheel-title {
    background: linear-gradient(135deg, #00d4ff, #bc13fe, #ff00ff) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

/* Controls & Badges */
.wheel-price-badge {
    background: rgba(0, 212, 255, 0.1) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

.price-value {
    color: #39ff14 !important;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.5) !important;
}

.discount-code-input {
    background: rgba(10, 10, 15, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.discount-code-input:focus {
    border-color: #00d4ff !important;
}

.spin-count {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Buttons */
.wheel-spin-btn {
    background: linear-gradient(135deg, #00d4ff, #bc13fe) !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.4) !important;
}

.wheel-test-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: #00d4ff !important;
    box-shadow: none !important;
}

.wheel-test-btn:hover {
    background: rgba(0, 212, 255, 0.1) !important;
}

/* Leaderboard Section */
.leaderboard-section {
    background: rgba(20, 20, 30, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

.leaderboard-header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(188, 19, 254, 0.2)) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.1) !important;
}

.leaderboard-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.leaderboard-item:hover {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
}

.player-name {
    color: #ffffff !important;
}

.player-prize {
    color: #00d4ff !important;
}

/* Rules Section */
.rules-section .rules-title {
    color: #ffffff !important;
}

.rules-section .rules-content {
    background: rgba(15, 15, 25, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

.rules-section .rules-content,
.rules-section .rules-content *,
.rules-section .rules-list li {
    color: rgba(255, 255, 255, 0.8) !important;
}

.rules-section .rules-list li strong {
    color: #00d4ff !important;
}