/* Write your css codes here  */

/* ========================= Arabic Typography Improvements Start ======================== */
/* Apply Arabic font for RTL pages */
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button,
[dir="rtl"] label,
[dir="rtl"] .form-label,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select,
[dir="rtl"] .btn,
[dir="rtl"] .badge,
[dir="rtl"] .alert,
[dir="rtl"] .dropdown-item,
[dir="rtl"] .nav-link,
[dir="rtl"] .breadcrumb__item,
[dir="rtl"] .breadcrumb__link,
[dir="rtl"] .header__menu ul li a,
[dir="rtl"] .dashboard__menu ul li a,
[dir="rtl"] .footer__single ul li a,
[dir="rtl"] .footer__bottom p,
[dir="rtl"] .footer__about p,
[dir="rtl"] .footer__topbar__contact a,
[dir="rtl"] .product__content ul li,
[dir="rtl"] .product__content h6,
[dir="rtl"] .product__content p,
[dir="rtl"] .hero__content p,
[dir="rtl"] .hero__info ul li,
[dir="rtl"] .section__heading p,
[dir="rtl"] .blog__content p,
[dir="rtl"] .blog__content span,
[dir="rtl"] .testimonial__single p,
[dir="rtl"] .faq__content,
[dir="rtl"] .faq__title,
[dir="rtl"] .accordion .accordion-body,
[dir="rtl"] .accordion .accordion-button,
[dir="rtl"] .contact__card h4,
[dir="rtl"] .contact__card a,
[dir="rtl"] .contact__card p,
[dir="rtl"] .auth__widgets a,
[dir="rtl"] .auth__already p,
[dir="rtl"] .auth__policy .form-check-label,
[dir="rtl"] .notification__body a p,
[dir="rtl"] .notification__body a span,
[dir="rtl"] .profile__contact p,
[dir="rtl"] .profile__contact a,
[dir="rtl"] .profile__contact span,
[dir="rtl"] .language__item p,
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[dir="rtl"] .select2-results__option,
[dir="rtl"] .pagination .page-item .page-link,
[dir="rtl"] .table tbody tr td,
[dir="rtl"] .table thead tr th,
[dir="rtl"] .wyg p,
[dir="rtl"] .wyg ul li,
[dir="rtl"] .wyg ol li,
[dir="rtl"] .cookies-card__content,
[dir="rtl"] .search__blog span,
[dir="rtl"] .owner--info p,
[dir="rtl"] .booking--item h5,
[dir="rtl"] .ticket__single p,
[dir="rtl"] .chat-bubble {
    font-family: var(--arabic-font), var(--body-font) !important;
}

/* Arabic headings */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .h1,
[dir="rtl"] .h2,
[dir="rtl"] .h3,
[dir="rtl"] .h4,
[dir="rtl"] .h5,
[dir="rtl"] .h6,
[dir="rtl"] .section__title h2,
[dir="rtl"] .section__title h3,
[dir="rtl"] .section__title h4,
[dir="rtl"] .card-title,
[dir="rtl"] .modal-title,
[dir="rtl"] .dashboard__header h2,
[dir="rtl"] .dashboard__card h5,
[dir="rtl"] .chart__topbar h5,
[dir="rtl"] .table__topbar h5,
[dir="rtl"] .blog__content h4,
[dir="rtl"] .blog__content h5,
[dir="rtl"] .product__content h4,
[dir="rtl"] .product__content h5,
[dir="rtl"] .faq__card h3,
[dir="rtl"] .tutorial__content h4,
[dir="rtl"] .owner__info h4,
[dir="rtl"] .review__total h4,
[dir="rtl"] .review__total h5,
[dir="rtl"] .previous__review h5,
[dir="rtl"] .notification__header h4,
[dir="rtl"] .footer__single h4,
[dir="rtl"] .footer__about h4,
[dir="rtl"] .contact__card h4,
[dir="rtl"] .auth__title h3,
[dir="rtl"] .error__main h4,
[dir="rtl"] .error__main h2,
[dir="rtl"] .browse__topbar h3,
[dir="rtl"] .products__topbar h4,
[dir="rtl"] .products__sidebar__title h5,
[dir="rtl"] .products__sidebar__card h6,
[dir="rtl"] .recent__blog__title h4,
[dir="rtl"] .recent__blog__single h6,
[dir="rtl"] .testimonial__user h4,
[dir="rtl"] .category__topbar h2,
[dir="rtl"] .blog__topbar .section__heading h2,
[dir="rtl"] .hero__content h1,
[dir="rtl"] .hero__form__label h5,
[dir="rtl"] .breadcrumb__title,
[dir="rtl"] .profile__wr h4,
[dir="rtl"] .author__info h4,
[dir="rtl"] .own__items__title h3,
[dir="rtl"] .pd__topbar h4,
[dir="rtl"] .pd__info ul li h5,
[dir="rtl"] .pd__content h4,
[dir="rtl"] .pi__title,
[dir="rtl"] .dashboard__acco__content a,
[dir="rtl"] .product__order h4,
[dir="rtl"] .product__order p,
[dir="rtl"] .add__review h6,
[dir="rtl"] .write--review--form h6,
[dir="rtl"] .previous__review__topbar p,
[dir="rtl"] .product__sidebar h5,
[dir="rtl"] .product__sidebar p,
[dir="rtl"] .widget h4,
[dir="rtl"] .widget-filter h5,
[dir="rtl"] .widget-filter label,
[dir="rtl"] .blog__details h2,
[dir="rtl"] .blog__details h4,
[dir="rtl"] .blog__sidebar h5,
[dir="rtl"] .blog__share h6,
[dir="rtl"] .blog__quote p,
[dir="rtl"] .blog__date span,
[dir="rtl"] .contact__form h3,
[dir="rtl"] .contact__form label,
[dir="rtl"] .contact__info h4,
[dir="rtl"] .contact__info p,
[dir="rtl"] .product__details h2,
[dir="rtl"] .product__details p,
[dir="rtl"] .product__details .nav-tabs .nav-link,
[dir="rtl"] .review__item h6,
[dir="rtl"] .review__item p,
[dir="rtl"] .how__item h5,
[dir="rtl"] .how__item p,
[dir="rtl"] .category__item h6,
[dir="rtl"] .category__item p,
[dir="rtl"] .product__price,
[dir="rtl"] .product__price p,
[dir="rtl"] .product__img span,
[dir="rtl"] .product__navigate ul li,
[dir="rtl"] .product__navigate ul li a,
[dir="rtl"] .hero__content>span,
[dir="rtl"] .hero__form .list-group-item,
[dir="rtl"] .products__sort h6,
[dir="rtl"] .filter__btn,
[dir="rtl"] .action__btn .btn,
[dir="rtl"] .action__drop__toggle,
[dir="rtl"] .table__pt h5,
[dir="rtl"] .table__pt p,
[dir="rtl"] .upload__box label,
[dir="rtl"] .two__factor__info p,
[dir="rtl"] .kyc-noty h4,
[dir="rtl"] .date-tab .label,
[dir="rtl"] .date-tab .selected-date,
[dir="rtl"] .suggestion-item,
[dir="rtl"] .no__data p,
[dir="rtl"] .alert__title,
[dir="rtl"] .alert__desc,
[dir="rtl"] .form-check .form-check-label,
[dir="rtl"] .form-radio .form-check-label,
[dir="rtl"] .form-switch .form-check-label,
[dir="rtl"] .dropdown-toggle,
[dir="rtl"] .dropdown-item,
[dir="rtl"] .offcanvas__menu ul li a,
[dir="rtl"] .social__icon li a,
[dir="rtl"] .footer__newsletter button,
[dir="rtl"] .footer__newsletter .form-control,
[dir="rtl"] .hero__item .btn,
[dir="rtl"] .hero__btn .btn,
[dir="rtl"] .blog__arrow,
[dir="rtl"] .product__arrow,
[dir="rtl"] .cat__arrow span,
[dir="rtl"] .tutorial__number span,
[dir="rtl"] .dc__img,
[dir="rtl"] .ds__plus,
[dir="rtl"] .ds__discount,
[dir="rtl"] .pi__info,
[dir="rtl"] .pi__chat__user h6,
[dir="rtl"] .pi__chat__user p,
[dir="rtl"] .progress-step,
[dir="rtl"] .booking--item h5,
[dir="rtl"] .owner--info p,
[dir="rtl"] .ticket__single p,
[dir="rtl"] .chat-bubble {
    font-family: var(--arabic-font), var(--heading-font) !important;
}

/* Arabic typography improvements */
[dir="rtl"] {
    /* Better line height for Arabic */
    --line-height-relaxed: 1.8;
    --line-height-normal: 1.6;
    --line-height-tight: 1.4;
}

[dir="rtl"] body {
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-arabic);
}

[dir="rtl"] p {
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--paragraph-spacing);
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-arabic);
}

[dir="rtl"] .section__heading p {
    line-height: var(--line-height-relaxed);
}

[dir="rtl"] .hero__content p {
    line-height: var(--line-height-relaxed);
}

[dir="rtl"] .product__content ul li {
    line-height: var(--line-height-normal);
}

[dir="rtl"] .blog__content p {
    line-height: var(--line-height-relaxed);
}

[dir="rtl"] .testimonial__single p {
    line-height: var(--line-height-relaxed);
}

[dir="rtl"] .faq__content {
    line-height: var(--line-height-relaxed);
}

[dir="rtl"] .accordion .accordion-body {
    line-height: var(--line-height-relaxed);
}

[dir="rtl"] .wyg p {
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--paragraph-spacing);
}

[dir="rtl"] .wyg ul li,
[dir="rtl"] .wyg ol li {
    line-height: var(--line-height-relaxed);
}

[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
    line-height: var(--line-height-normal);
}

[dir="rtl"] .btn {
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-arabic);
}

[dir="rtl"] .table tbody tr td {
    line-height: var(--line-height-normal);
}

[dir="rtl"] .table thead tr th {
    line-height: var(--line-height-normal);
}

[dir="rtl"] .dropdown-item {
    line-height: var(--line-height-normal);
}

[dir="rtl"] .badge {
    line-height: var(--line-height-tight);
}

[dir="rtl"] .alert__desc {
    line-height: var(--line-height-relaxed);
}

[dir="rtl"] .notification__body a p {
    line-height: var(--line-height-normal);
}

[dir="rtl"] .chat-bubble {
    line-height: var(--line-height-relaxed);
}

/* ========================= Arabic Typography Improvements End ======================== */

/* ========================= Equipment Category Icons - White Icons in Green Circles ======================== */

/* --- Browse Categories (sections/category.blade.php) --- */
/* Force the icon container to be a green circle - override main.css completely */
.category__grid-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    border-radius: 50% !important;
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    margin: 0 auto 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.3) !important;
}

/* Force the equipment image to be white */
.category__grid-icon img.equipment-icon {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    transition: transform 0.3s ease !important;
}

/* Hover: keep green circle, scale icon slightly */
.category__grid-item:hover .category__grid-icon {
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    box-shadow: 0 6px 20px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.45) !important;
    transform: translateY(-2px) !important;
}

.category__grid-item:hover .category__grid-icon img.equipment-icon {
    filter: brightness(0) invert(1) !important;
    transform: scale(1.1) !important;
}

/* --- Home Categories (home.blade.php) --- */
.category__card-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    margin: 0 auto 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.3) !important;
}

.category__card-img img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    transition: transform 0.3s ease !important;
}

.category__card:hover .category__card-img {
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    box-shadow: 0 6px 20px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.45) !important;
    transform: translateY(-2px) !important;
}

.category__card:hover .category__card-img img {
    filter: brightness(0) invert(1) !important;
    transform: scale(1.1) !important;
}

/* --- Dark Mode --- */
[data-theme="dark"] .category__grid-icon,
[data-theme="dark"] .category__card-img {
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    box-shadow: 0 4px 12px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.4) !important;
}

[data-theme="dark"] .category__grid-item:hover .category__grid-icon,
[data-theme="dark"] .category__card:hover .category__card-img {
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    box-shadow: 0 6px 20px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.6) !important;
}

[data-theme="dark"] .category__grid-icon img.equipment-icon,
[data-theme="dark"] .category__card-img img {
    filter: brightness(0) invert(1) !important;
}

/* --- "View All Categories" Button --- */
.categories__section .btn--outline-base.btn--rounded {
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    color: #ffffff !important;
    border-color: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    box-shadow: 0 4px 12px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.3);
    transition: all 0.3s ease;
}

.categories__section .btn--outline-base.btn--rounded:hover {
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    color: #ffffff !important;
    border-color: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    box-shadow: 0 6px 20px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.45);
    transform: translateY(-2px);
}

[data-theme="dark"] .categories__section .btn--outline-base.btn--rounded {
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    color: #ffffff !important;
    border-color: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    box-shadow: 0 4px 12px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.4);
}

[data-theme="dark"] .categories__section .btn--outline-base.btn--rounded:hover {
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    color: #ffffff !important;
    border-color: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    box-shadow: 0 6px 20px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.6);
}

/* --- Responsive --- */
@media screen and (max-width: 575px) {
    .category__grid-icon,
    .category__card-img {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
    }

    .category__grid-icon img.equipment-icon,
    .category__card-img img {
        width: 34px !important;
        height: 34px !important;
    }
}

/* ========================= Equipment Category Icons - Dark Green Circular Background End ======================== */



/* ========================= Dark Mode Styles Start ======================== */

[data-theme="dark"] {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-card: #1e1e1e;
    --bg-input: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --border-color: #333333;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --body-bg: 0 0% 0%;
}

/* Preloader - dark background with solid white text in both light and dark modes */
.preloader {
    background-color: #000000 !important;
}

/* Make the text solid white - no gradient, no animation affecting text color */
.preloader .loader__text::before {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}



/* ========================= Light Mode Logo Contrast Fix Start ======================== */
/* Improve "شاهين" logo readability on light background */
[data-theme="light"] .header__logo a img,
[data-theme="light"] .offcanvas__topbar a img,
[data-theme="light"] .auth__logo a img {
    filter: brightness(0.85) contrast(1.2);
    transition: filter 0.3s ease;
}

[data-theme="light"] .header__logo a img:hover,
[data-theme="light"] .offcanvas__topbar a img:hover,
[data-theme="light"] .auth__logo a img:hover {
    filter: brightness(1) contrast(1);
}
/* ========================= Light Mode Logo Contrast Fix End ======================== */

/* ========================= Dark Mode Navigation Text Fix Start ======================== */
/* Ensure all navigation/menu text is white (high contrast) in dark mode */
[data-theme="dark"] .dropdown-toggle {
    color: var(--text-primary);
}

[data-theme="dark"] .language__item p {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-toggle .language__item p {
    color: var(--text-primary);
}

[data-theme="dark"] .header__login a {
    color: var(--text-primary);
}

[data-theme="dark"] .header__login a:hover {
    color: hsl(var(--base));
}

[data-theme="dark"] .header__widgets .dropdown .dropdown-toggle {
    color: var(--text-primary);
}

[data-theme="dark"] .offcanvas__language .dropdown-toggle {
    color: var(--text-primary);
}

[data-theme="dark"] .offcanvas__language .language__item p {
    color: var(--text-primary);
}

[data-theme="dark"] .footer__bottom .dropdown-toggle {
    color: var(--text-primary);
}

[data-theme="dark"] .footer__bottom .language__item p {
    color: var(--text-primary);
}

/* Fix dashboard sidebar dark mode toggle text */
[data-theme="dark"] .dark-mode-toggle-li a {
    color: var(--text-primary);
}

[data-theme="dark"] .dark-mode-toggle-li a:hover {
    color: hsl(var(--base));
}
/* ========================= Dark Mode Navigation Text Fix End ======================== */

/* ========================= Hero Title Position Fix ======================== */
/* Reduce padding-top to bring the title "شاهين لتأجير المعدات والشاحنات" up by one line */

/* Fix header position - raise it up */
.header__area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
    padding: 14px 0;
}

/* Reduce hero padding-top to bring title up */
.hero__area {
    padding-top: 130px !important;
}

@media screen and (max-width: 1399px) {
    .hero__area {
        padding-top: 100px !important;
    }
}

@media screen and (max-width: 991px) {
    .hero__area {
        padding-top: 80px !important;
    }
}

/* ========================= Hero Title Position Fix End ======================== */

/* ========================= Breadcrumb Spacing Fix - Add space between header logo and page titles ======================== */
/* Increase breadcrumb padding-top to prevent overlap with absolute-positioned header */
.breadcrumb.pt-120 {
    padding-top: 200px !important;
}

@media screen and (max-width: 1399px) {
    .breadcrumb.pt-120 {
        padding-top: 180px !important;
    }
}

@media screen and (max-width: 991px) {
    .breadcrumb.pt-120 {
        padding-top: 160px !important;
    }
}

@media screen and (max-width: 767px) {
    .breadcrumb.pt-120 {
        padding-top: 140px !important;
    }
}

/* Add extra bottom margin to breadcrumb title for better spacing */
.breadcrumb__title {
    margin-bottom: 30px !important;
}
/* ========================= Breadcrumb Spacing Fix End ======================== */

/* ========================= Dark Mode - Fix All Green Text to White Start ======================== */
/* In Dark Mode, all regular text should be white/light gray for readability.
   Green (hsl(var(--base))) should only appear on hover states, active links, buttons, badges, and highlights. */

/* Hero section - green text should be white in dark mode */
[data-theme="dark"] .hero__content > span {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .hero__content h1 span {
    color: var(--text-primary);
}

[data-theme="dark"] .hero__info ul li span {
    color: var(--text-primary);
}

[data-theme="dark"] .hero__info ul li span::after {
    background-color: var(--bg-input);
}

/* Accordion - green icons/text should be white */
[data-theme="dark"] .accordion .accordion-button:not(.collapsed)::after {
    color: var(--text-primary);
}

[data-theme="dark"] .accordion .accordion-button[aria-expanded=true]::after {
    color: var(--text-primary);
}

/* Action dropdown toggle - default should be white, hover stays green */
[data-theme="dark"] .action__drop__toggle {
    color: var(--text-primary);
}

[data-theme="dark"] .action__drop__toggle:hover {
    color: hsl(var(--base));
}

/* Tab navigation - default text white, hover stays green */
[data-theme="dark"] .custom--tab .nav-item .nav-link {
    color: var(--text-primary);
}

[data-theme="dark"] .custom--tab .nav-item .nav-link:hover {
    color: hsl(var(--base));
}

/* Offcanvas menu - default text white, hover/active stays green */
[data-theme="dark"] .offcanvas__area .offcanvas__main .offcanvas__menu ul li a {
    color: var(--text-primary);
}

[data-theme="dark"] .offcanvas__area .offcanvas__main .offcanvas__menu ul li a:hover,
[data-theme="dark"] .offcanvas__area .offcanvas__main .offcanvas__menu ul li a.active {
    color: hsl(var(--base));
    border-color: hsl(var(--base));
}

/* Header menu open icon - default white, hover green */
[data-theme="dark"] .header__area .header__main .menu__open {
    color: var(--text-primary);
}

[data-theme="dark"] .header__area .header__main .menu__open:hover {
    color: hsl(var(--base));
}

/* Footer - contact links default white, hover green */
[data-theme="dark"] .footer__topbar__contact a {
    color: var(--text-primary);
}

[data-theme="dark"] .footer__topbar__contact a:hover {
    color: hsl(var(--base));
}

/* Footer single links - default white, hover green */
[data-theme="dark"] .footer__single ul li a {
    color: var(--text-primary);
}

[data-theme="dark"] .footer__single ul li a:hover {
    color: hsl(var(--base));
}

/* Breadcrumb links - default white, hover green */
[data-theme="dark"] .breadcrumb__link {
    color: var(--text-primary);
}

[data-theme="dark"] .breadcrumb__link:hover {
    color: hsl(var(--base));
}

/* Text--base utility class - override in dark mode for regular text */
[data-theme="dark"] .text--base {
    color: var(--text-primary) !important;
}

/* Keep text--base green for interactive elements only */
[data-theme="dark"] .btn.text--base,
[data-theme="dark"] a.text--base,
[data-theme="dark"] .badge.text--base,
[data-theme="dark"] .nav-link.text--base,
[data-theme="dark"] .dropdown-item.text--base {
    color: hsl(var(--base)) !important;
}

/* Product price - green should be white in dark mode */
[data-theme="dark"] .product__price {
    color: var(--text-primary);
}

[data-theme="dark"] .product__price span {
    color: var(--text-primary);
}

/* Product card - various green text elements */
[data-theme="dark"] .product__card .product__content .product__price {
    color: var(--text-primary);
}

/* Category items - green text to white */
[data-theme="dark"] .category__item h6 {
    color: var(--text-primary);
}

/* How it works - green text to white */
[data-theme="dark"] .how__item h5 {
    color: var(--text-primary);
}

/* Testimonial - green text to white */
[data-theme="dark"] .testimonial__item h6 {
    color: var(--text-primary);
}

/* Blog - green text to white */
[data-theme="dark"] .blog__content h5 a {
    color: var(--text-primary);
}

[data-theme="dark"] .blog__content h5 a:hover {
    color: hsl(var(--base));
}

/* FAQ - green title to white */
[data-theme="dark"] .faq__title {
    color: var(--text-primary);
}

/* Auth form - green text to white */
[data-theme="dark"] .auth__form h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .auth__form label {
    color: var(--text-primary);
}

/* Product details - green text to white */
[data-theme="dark"] .product__details h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .product__details .nav-tabs .nav-link {
    color: var(--text-primary);
}

[data-theme="dark"] .product__details .nav-tabs .nav-link.active {
    color: #fff;
}

/* Review item - green text to white */
[data-theme="dark"] .review__item h6 {
    color: var(--text-primary);
}

/* Notification - green text to white */
[data-theme="dark"] .notification__header h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .notification__body a p {
    color: var(--text-primary);
}

/* Profile dropdown - green text to white */
[data-theme="dark"] .profile__dropdown span {
    color: var(--text-primary);
}

/* Footer widget - green text to white */
[data-theme="dark"] .footer__single h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .footer__about h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .footer__about p {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer__bottom p {
    color: var(--text-secondary);
}

/* Widget - green text to white */
[data-theme="dark"] .widget h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .widget-filter h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .widget-filter label {
    color: var(--text-primary);
}

/* Contact form - green text to white */
[data-theme="dark"] .contact__form h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .contact__form label {
    color: var(--text-primary);
}

[data-theme="dark"] .contact__info h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .contact__info p {
    color: var(--text-secondary);
}

/* Blog details - green text to white */
[data-theme="dark"] .blog__details h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .blog__details h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .blog__details p {
    color: var(--text-secondary);
}

/* Blog sidebar - green text to white */
[data-theme="dark"] .blog__sidebar h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .blog__sidebar ul li a {
    color: var(--text-primary);
}

[data-theme="dark"] .blog__sidebar ul li a:hover {
    color: hsl(var(--base));
}

/* Section titles - green to white */
[data-theme="dark"] .section__title h2 {
    color: var(--text-primary);
}

[data-theme="dark"] .section__title p {
    color: var(--text-secondary);
}

/* Dashboard elements - green text to white */
[data-theme="dark"] .dashboard__menu ul li a {
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard__menu ul li a:hover,
[data-theme="dark"] .dashboard__menu ul li a.active {
    color: hsl(var(--base));
}

/* Table header - green to white */
[data-theme="dark"] .table thead th {
    color: var(--text-primary);
}

/* Dropdown items - green to white */
[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    color: var(--text-primary);
    background-color: var(--bg-input);
}

/* Pagination - green to white */
[data-theme="dark"] .pagination .page-link {
    color: var(--text-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    color: #fff;
}

/* Select2 - green to white */
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--default .select2-results__option {
    color: var(--text-primary);
}

/* Flatpickr - green to white */
[data-theme="dark"] .flatpickr-day {
    color: var(--text-primary);
}

[data-theme="dark"] .flatpickr-day.selected {
    color: #fff;
}

/* Search results - green to white */
[data-theme="dark"] .dashboard__header .search__box .search-results a {
    color: var(--text-primary);
}

[data-theme="dark"] .dashboard__header .search__box .search-results a:hover {
    background-color: var(--bg-input);
}

/* Product sidebar - green to white */
[data-theme="dark"] .product__sidebar h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .product__sidebar p {
    color: var(--text-secondary);
}

/* Cookies card - dark background with white text */
[data-theme="dark"] .cookies-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .cookies-card p {
    color: var(--text-primary);
}

[data-theme="dark"] .cookies-card .cookies-card__actions .btn-outline--base {
    color: hsl(var(--base)) !important;
    border-color: hsl(var(--base)) !important;
}

[data-theme="dark"] .cookies-card .cookies-card__actions .btn-outline--base:hover {
    color: #fff !important;
    background: hsl(var(--base)) !important;
}

/* Social icons - green to white */
[data-theme="dark"] .social__icon li a {
    color: var(--text-primary);
}

[data-theme="dark"] .social__icon li a:hover {
    color: #fff;
}

/* Footer newsletter - green to white */
[data-theme="dark"] .footer__newsletter input {
    color: var(--text-primary);
}

/* Badge - keep green for badge--base, but ensure text is readable */
[data-theme="dark"] .badge--base {
    color: hsl(var(--base)) !important;
}

/* Alert - keep green for alert--base */
[data-theme="dark"] .alert--base {
    color: hsl(var(--base));
}

[data-theme="dark"] .alert--base .alert__icon {
    color: hsl(var(--base));
}

/* Button outline - keep green for outline buttons */
[data-theme="dark"] .btn-outline--base {
    color: hsl(var(--base)) !important;
}

[data-theme="dark"] .btn-outline--base:hover {
    color: #fff !important;
}

/* Button icon - keep green for icon buttons */
[data-theme="dark"] .btn--icon {
    color: hsl(var(--base));
}

[data-theme="dark"] .btn--icon span {
    color: hsl(var(--base));
}

/* Green background buttons (btn--base) - text should be white in dark mode */
[data-theme="dark"] .btn--base {
    color: #ffffff !important;
}

[data-theme="dark"] .btn--base:hover,
[data-theme="dark"] .btn--base:focus,
[data-theme="dark"] .btn--base:focus-visible {
    color: #ffffff !important;
}

/* btn--icon.btn--base combination - override icon color to white on green background */
[data-theme="dark"] .btn--icon.btn--base,
[data-theme="dark"] .btn--icon.btn--base span {
    color: #ffffff !important;
}

/* Hero form elements - green to white */
[data-theme="dark"] .hero__form__label h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .hero__form .list-group-item {
    color: var(--text-primary);
}

/* Product navigation - green to white */
[data-theme="dark"] .product__navigate ul li a {
    color: var(--text-primary);
}

[data-theme="dark"] .product__navigate ul li a:hover {
    color: hsl(var(--base));
}

/* Product order - green to white */
[data-theme="dark"] .product__order h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .product__order p {
    color: var(--text-secondary);
}

/* Add review - green to white */
[data-theme="dark"] .add__review h6 {
    color: var(--text-primary);
}

/* Previous review - green to white */
[data-theme="dark"] .previous__review__topbar p {
    color: var(--text-primary);
}

/* Owner info - green to white */
[data-theme="dark"] .owner__info h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .owner--info p {
    color: var(--text-secondary);
}

/* Booking item - green to white */
[data-theme="dark"] .booking--item h5 {
    color: var(--text-primary);
}

/* Ticket - green to white */
[data-theme="dark"] .ticket__single p {
    color: var(--text-primary);
}

/* Chat bubble - green to white */
[data-theme="dark"] .chat-bubble {
    color: var(--text-primary);
}

/* Profile - green to white */
[data-theme="dark"] .profile__wr h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .author__info h4 {
    color: var(--text-primary);
}

/* Own items - green to white */
[data-theme="dark"] .own__items__title h3 {
    color: var(--text-primary);
}

/* Product details topbar - green to white */
[data-theme="dark"] .pd__topbar h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .pd__info ul li h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .pd__content h4 {
    color: var(--text-primary);
}

/* Product image info - green to white */
[data-theme="dark"] .pi__title {
    color: var(--text-primary);
}

[data-theme="dark"] .pi__info {
    color: var(--text-secondary);
}

/* Dashboard accordion - green to white */
[data-theme="dark"] .dashboard__acco__content a {
    color: var(--text-primary);
}

/* Progress step - green to white */
[data-theme="dark"] .progress-step {
    color: var(--text-primary);
}

/* Two factor - green to white */
[data-theme="dark"] .two__factor__info p {
    color: var(--text-primary);
}

/* KYC - green to white */
[data-theme="dark"] .kyc-noty h4 {
    color: var(--text-primary);
}

/* Date tab - green to white */
[data-theme="dark"] .date-tab .label {
    color: var(--text-primary);
}

[data-theme="dark"] .date-tab .selected-date {
    color: var(--text-primary);
}

/* Suggestion item - green to white */
[data-theme="dark"] .suggestion-item {
    color: var(--text-primary);
}

/* No data - green to white */
[data-theme="dark"] .no__data p {
    color: var(--text-secondary);
}

/* Alert title/desc - green to white */
[data-theme="dark"] .alert__title {
    color: var(--text-primary);
}

[data-theme="dark"] .alert__desc {
    color: var(--text-primary);
}

/* Form check/radio/switch labels - green to white */
[data-theme="dark"] .form-check .form-check-label,
[data-theme="dark"] .form-radio .form-check-label,
[data-theme="dark"] .form-switch .form-check-label {
    color: var(--text-primary);
}

/* Form label (used in auth pages like Login/Register) - black to white */
[data-theme="dark"] .form-label {
    color: var(--text-primary);
}

/* Upload box - green to white */
[data-theme="dark"] .upload__box label {
    color: var(--text-primary);
}

/* Table PT - green to white */
[data-theme="dark"] .table__pt h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .table__pt p {
    color: var(--text-secondary);
}

/* Action buttons - green to white */
[data-theme="dark"] .action__btn .btn {
    color: var(--text-primary);
}

/* Filter button - green to white */
[data-theme="dark"] .filter__btn {
    color: var(--text-primary);
}

/* Products sort - green to white */
[data-theme="dark"] .products__sort h6 {
    color: var(--text-primary);
}

/* Products sidebar title - green to white */
[data-theme="dark"] .products__sidebar__title h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .products__sidebar__card h6 {
    color: var(--text-primary);
}

/* Recent blog - green to white */
[data-theme="dark"] .recent__blog__title h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .recent__blog__single h6 {
    color: var(--text-primary);
}

/* Testimonial user - green to white */
[data-theme="dark"] .testimonial__user h4 {
    color: var(--text-primary);
}

/* Blog topbar - green to white */
[data-theme="dark"] .blog__topbar .section__heading h2 {
    color: var(--text-primary);
}

/* Hero form label - green to white */
[data-theme="dark"] .hero__form__label h5 {
    color: var(--text-primary);
}

/* Breadcrumb title - green to white */
[data-theme="dark"] .breadcrumb__title {
    color: var(--text-primary);
}

/* Review total - green to white */
[data-theme="dark"] .review__total h4,
[data-theme="dark"] .review__total h5 {
    color: var(--text-primary);
}

/* Previous review - green to white */
[data-theme="dark"] .previous__review h5 {
    color: var(--text-primary);
}

/* Blog share - green to white */
[data-theme="dark"] .blog__share h6 {
    color: var(--text-primary);
}

/* Blog quote - green to white */
[data-theme="dark"] .blog__quote p {
    color: var(--text-primary);
}

/* Blog date - green to white */
[data-theme="dark"] .blog__date span {
    color: var(--text-secondary);
}

/* How item number - green to white */
[data-theme="dark"] .tutorial__number span {
    color: var(--text-primary);
}

/* DC img - green to white */
[data-theme="dark"] .dc__img {
    color: var(--text-primary);
}

/* DS plus/discount - green to white */
[data-theme="dark"] .ds__plus,
[data-theme="dark"] .ds__discount {
    color: var(--text-primary);
}

/* PI chat user - green to white */
[data-theme="dark"] .pi__chat__user h6 {
    color: var(--text-primary);
}

[data-theme="dark"] .pi__chat__user p {
    color: var(--text-secondary);
}

/* Write review form - green to white */
[data-theme="dark"] .write--review--form h6 {
    color: var(--text-primary);
}

/* Product img span - green to white */
[data-theme="dark"] .product__img span {
    color: var(--text-primary);
}

/* Hero btn - green to white */
[data-theme="dark"] .hero__item .btn,
[data-theme="dark"] .hero__btn .btn {
    color: var(--text-primary);
}

/* Blog/category/product arrows - green to white */
[data-theme="dark"] .blog__arrow,
[data-theme="dark"] .product__arrow,
[data-theme="dark"] .cat__arrow span {
    color: var(--text-primary);
}

/* Search blog - green to white */
[data-theme="dark"] .search__blog span {
    color: var(--text-primary);
}

/* Dashboard header - green to white */
[data-theme="dark"] .dashboard__header h2 {
    color: var(--text-primary);
}

/* Dashboard card - green to white */
[data-theme="dark"] .dashboard__card h5 {
    color: var(--text-primary);
}

/* Dashboard card values (numbers/statistics) - white in dark mode */
[data-theme="dark"] .dashboard__card p {
    color: #FFFFFF;
}

/* Chart topbar - green to white */
[data-theme="dark"] .chart__topbar h5 {
    color: var(--text-primary);
}

/* Table topbar - green to white */
[data-theme="dark"] .table__topbar h5 {
    color: var(--text-primary);
}

/* Auth widgets - green to white */
[data-theme="dark"] .auth__widgets a {
    color: var(--text-primary);
}

/* Auth already - green to white */
[data-theme="dark"] .auth__already p {
    color: var(--text-primary);
}

/* Auth policy - green to white */
[data-theme="dark"] .auth__policy .form-check-label {
    color: var(--text-primary);
}

/* Auth title - green to white */
[data-theme="dark"] .auth__title h3 {
    color: var(--text-primary);
}

/* Error main - green to white */
[data-theme="dark"] .error__main h4,
[data-theme="dark"] .error__main h2 {
    color: var(--text-primary);
}

/* Browse topbar - green to white */
[data-theme="dark"] .browse__topbar h3 {
    color: var(--text-primary);
}

/* Products topbar - green to white */
[data-theme="dark"] .products__topbar h4 {
    color: var(--text-primary);
}

/* Category topbar - green to white */
[data-theme="dark"] .category__topbar h2 {
    color: var(--text-primary);
}

/* FAQ card - green to white */
[data-theme="dark"] .faq__card h3 {
    color: var(--text-primary);
}

/* Tutorial content - green to white */
[data-theme="dark"] .tutorial__content h4 {
    color: var(--text-primary);
}

/* Contact card - green to white */
[data-theme="dark"] .contact__card h4 {
    color: var(--text-primary);
}

[data-theme="dark"] .contact__card a {
    color: var(--text-primary);
}

[data-theme="dark"] .contact__card p {
    color: var(--text-secondary);
}

/* Product content - green to white */
[data-theme="dark"] .product__content h4,
[data-theme="dark"] .product__content h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .product__content ul li {
    color: var(--text-secondary);
}

[data-theme="dark"] .product__content p {
    color: var(--text-secondary);
}

/* Blog content - green to white */
[data-theme="dark"] .blog__content h4,
[data-theme="dark"] .blog__content h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .blog__content p {
    color: var(--text-secondary);
}

[data-theme="dark"] .blog__content span {
    color: var(--text-secondary);
}

/* Footer bottom dropdown - green to white */
[data-theme="dark"] .footer__bottom .dropdown-toggle {
    color: var(--text-primary);
}

[data-theme="dark"] .footer__bottom .language__item p {
    color: var(--text-primary);
}

/* Offcanvas language - green to white */
[data-theme="dark"] .offcanvas__language .dropdown-toggle {
    color: var(--text-primary);
}

[data-theme="dark"] .offcanvas__language .language__item p {
    color: var(--text-primary);
}

/* Header widgets dropdown - green to white */
[data-theme="dark"] .header__widgets .dropdown .dropdown-toggle {
    color: var(--text-primary);
}

/* Header login - green to white */
[data-theme="dark"] .header__login a {
    color: var(--text-primary);
}

[data-theme="dark"] .header__login a:hover {
    color: hsl(var(--base));
}

/* Header menu - green to white */
[data-theme="dark"] .header__menu ul li a {
    color: var(--text-primary);
}

[data-theme="dark"] .header__menu ul li a:hover {
    color: hsl(var(--base));
}

/* Dashboard sidebar dark mode toggle - green to white */
[data-theme="dark"] .dark-mode-toggle-li a {
    color: var(--text-primary);
}

[data-theme="dark"] .dark-mode-toggle-li a:hover {
    color: hsl(var(--base));
}

/* Footer single links - green to white */
[data-theme="dark"] .footer__single ul li a {
    color: var(--text-primary);
}

[data-theme="dark"] .footer__single ul li a:hover {
    color: hsl(var(--base));
}

/* Footer topbar contact - green to white */
[data-theme="dark"] .footer__topbar__contact a {
    color: var(--text-primary);
}

[data-theme="dark"] .footer__topbar__contact a:hover {
    color: hsl(var(--base));
}

/* Offcanvas menu - green to white */
[data-theme="dark"] .offcanvas__menu ul li a {
    color: var(--text-primary);
}

[data-theme="dark"] .offcanvas__menu ul li a:hover,
[data-theme="dark"] .offcanvas__menu ul li a.active {
    color: hsl(var(--base));
}

/* Blog sidebar links - green to white */
[data-theme="dark"] .blog__sidebar ul li a {
    color: var(--text-primary);
}

[data-theme="dark"] .blog__sidebar ul li a:hover {
    color: hsl(var(--base));
}

/* Product details nav tabs - green to white */
[data-theme="dark"] .product__details .nav-tabs .nav-link {
    color: var(--text-primary);
}

[data-theme="dark"] .product__details .nav-tabs .nav-link.active {
    color: #fff;
}

[data-theme="dark"] .product__details .nav-tabs .nav-link:hover {
    color: hsl(var(--base));
}

/* Product content links - green to white */
[data-theme="dark"] .product__content h5 a {
    color: var(--text-primary);
}

[data-theme="dark"] .product__content h5 a:hover {
    color: hsl(var(--base));
}

/* Blog content links - green to white */
[data-theme="dark"] .blog__content h5 a {
    color: var(--text-primary);
}

[data-theme="dark"] .blog__content h5 a:hover {
    color: hsl(var(--base));
}

/* Equipment card title links - green to white */
[data-theme="dark"] .equipment__card-title a {
    color: var(--text-primary);
}

[data-theme="dark"] .equipment__card-title a:hover {
    color: hsl(var(--base));
}

/* Category card name - green to white */
[data-theme="dark"] .category__card-name {
    color: var(--text-primary);
}

/* Why card - green to white */
[data-theme="dark"] .why__card h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .why__card p {
    color: var(--text-secondary);
}

/* Category grid - green to white */
[data-theme="dark"] .category__grid-name {
    color: var(--text-primary);
}

[data-theme="dark"] .category__grid-count {
    color: var(--text-secondary);
}

/* ========================= Dark Mode - Fix All Green Text to White End ======================== */

/* ========================= Dark Mode - Fix White Backgrounds Start ======================== */
/* 
   MAINTAINABLE APPROACH: Instead of overriding every component individually,
   we redefine the --white CSS variable in dark mode to point to a dark color.
   This automatically fixes ALL components that use hsl(var(--white)) for backgrounds.
   
   For text colors that use hsl(var(--white)), we keep them white by overriding
   only the specific text elements that need to remain visible on dark backgrounds.
*/

/* Redefine --white in dark mode to be a dark card color instead of white.
   This automatically converts ALL background-color: hsl(var(--white)) to dark backgrounds. */
[data-theme="dark"] {
    --white: 0 0% 12%; /* Dark gray instead of white - matches --bg-card (#1e1e1e) */
    --section-bg: 0 0% 12%; /* Also redefine --section-bg for dark mode to fix .card backgrounds */
}

/* Body background - use the darkest shade */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* 
   Text colors that use hsl(var(--white)) need to stay white/light.
   These are typically text on dark backgrounds (buttons, badges, etc.)
   Override them to use --text-primary instead.
*/

/* Utility classes - text white should use text-primary in dark mode */
[data-theme="dark"] .text--white {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text--white7 {
    color: var(--text-secondary) !important;
}

/* Background utility - bg--white should use card background */
[data-theme="dark"] .bg--white {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .hover-bg--white:hover {
    background-color: var(--bg-card) !important;
}

/* Border utility */
[data-theme="dark"] .border--white {
    border-color: var(--border-color) !important;
}

/* Placeholder white */
[data-theme="dark"] .placeholder--white::placeholder {
    color: var(--text-secondary);
}

/* 
   Specific component overrides that can't be handled by variable redefinition alone.
   These are elements that need special treatment beyond just swapping white for dark.
*/

/* Header - needs border */
[data-theme="dark"] .header__area {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .header__area.fixed-header {
    border-bottom: 1px solid var(--border-color);
}

/* Card headers and footers need borders */
[data-theme="dark"] .card-header {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .modal-header {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .modal-header .modal-title {
    color: #FFFFFF !important;
}

[data-theme="dark"] .modal-body {
    color: #FFFFFF !important;
}

/* Force all text inside modal-body to white in dark mode */
[data-theme="dark"] .modal-body p,
[data-theme="dark"] .modal-body li,
[data-theme="dark"] .modal-body span,
[data-theme="dark"] .modal-body h1,
[data-theme="dark"] .modal-body h2,
[data-theme="dark"] .modal-body h3,
[data-theme="dark"] .modal-body h4,
[data-theme="dark"] .modal-body h5,
[data-theme="dark"] .modal-body h6,
[data-theme="dark"] .modal-body label,
[data-theme="dark"] .modal-body .question {
    color: #FFFFFF !important;
}

[data-theme="dark"] .modal-footer {
    border-top: 1px solid var(--border-color);
}

/* Footer sections need borders */
[data-theme="dark"] .footer__topbar {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="dark"] .footer__bottom {
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .dashboard__header {
    border-bottom: 1px solid var(--border-color);
}

/* Equipment card footer */
[data-theme="dark"] .equipment__card-footer {
    border-top: 1px solid var(--border-color);
}

/* Notification header */
[data-theme="dark"] .notification__header {
    border-bottom: 1px solid var(--border-color);
}

/* Form controls need specific input background and white text */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] textarea.form-control:focus {
    border-color: hsl(var(--base)) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-select::placeholder,
[data-theme="dark"] textarea.form-control::placeholder {
    color: #999999 !important;
}

[data-theme="dark"] .form-control::-webkit-input-placeholder,
[data-theme="dark"] .form-select::-webkit-input-placeholder,
[data-theme="dark"] textarea.form-control::-webkit-input-placeholder {
    color: #999999 !important;
}

[data-theme="dark"] .form-control::-moz-placeholder,
[data-theme="dark"] .form-select::-moz-placeholder,
[data-theme="dark"] textarea.form-control::-moz-placeholder {
    color: #999999 !important;
}

[data-theme="dark"] .form-control:-ms-input-placeholder,
[data-theme="dark"] .form-select:-ms-input-placeholder,
[data-theme="dark"] textarea.form-control:-ms-input-placeholder {
    color: #999999 !important;
}

/* Fix autofill text color in dark mode - override main.css !important rule */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] input:-webkit-autofill:active,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
}

/* Fix password field text color in dark mode - override main.css [type=password] rules */
[data-theme="dark"] .form-control[type=password],
[data-theme="dark"] .form-control[type=password]:focus {
    color: var(--text-primary) !important;
}

/* Fix file input text color in dark mode */
[data-theme="dark"] .form-control[type=file] {
    color: var(--text-primary) !important;
}

/* ========================= Mobile Dark Mode Input Text Fix Start ======================== */
/* On mobile devices, input text remains black in dark mode despite desktop fixes.
   This is because mobile browsers (iOS Safari, Chrome Android) handle -webkit-text-fill-color
   and CSS specificity differently. Apply aggressive overrides for mobile only. */
@media screen and (max-width: 991px) {
    [data-theme="dark"] .form-control,
    [data-theme="dark"] .form-select,
    [data-theme="dark"] textarea.form-control,
    [data-theme="dark"] input.form-control,
    [data-theme="dark"] select.form-control,
    [data-theme="dark"] input[type="text"],
    [data-theme="dark"] input[type="email"],
    [data-theme="dark"] input[type="password"],
    [data-theme="dark"] input[type="search"],
    [data-theme="dark"] input[type="tel"],
    [data-theme="dark"] input[type="url"],
    [data-theme="dark"] input[type="number"],
    [data-theme="dark"] input[type="date"],
    [data-theme="dark"] input[type="time"],
    [data-theme="dark"] input[type="datetime-local"],
    [data-theme="dark"] input[type="month"],
    [data-theme="dark"] input[type="week"],
    [data-theme="dark"] textarea,
    [data-theme="dark"] select {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    [data-theme="dark"] .form-control::placeholder,
    [data-theme="dark"] .form-select::placeholder,
    [data-theme="dark"] textarea.form-control::placeholder,
    [data-theme="dark"] input::placeholder,
    [data-theme="dark"] textarea::placeholder {
        color: #999999 !important;
        -webkit-text-fill-color: #999999 !important;
    }

    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .form-select:focus,
    [data-theme="dark"] textarea.form-control:focus,
    [data-theme="dark"] input:focus,
    [data-theme="dark"] textarea:focus,
    [data-theme="dark"] select:focus {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    /* Fix autofill on mobile */
    [data-theme="dark"] input:-webkit-autofill,
    [data-theme="dark"] input:-webkit-autofill:hover,
    [data-theme="dark"] input:-webkit-autofill:focus,
    [data-theme="dark"] input:-webkit-autofill:active,
    [data-theme="dark"] textarea:-webkit-autofill,
    [data-theme="dark"] select:-webkit-autofill {
        -webkit-text-fill-color: #ffffff !important;
        caret-color: #ffffff !important;
    }
}
/* ========================= Mobile Dark Mode Input Text Fix End ======================== */

/* Select2 needs specific styling */
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .select2-search--dropdown {
    background-color: var(--bg-card);
}

[data-theme="dark"] .select2-search--dropdown input {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

/* Flatpickr calendar */
[data-theme="dark"] .flatpickr-calendar {
    background-color: var(--bg-card);
}

[data-theme="dark"] .flatpickr-months .flatpickr-month {
    background-color: var(--bg-card);
}

[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    background-color: var(--bg-card);
}

[data-theme="dark"] span.flatpickr-weekday {
    background-color: var(--bg-card);
}

/* Search results dropdown */
[data-theme="dark"] .dashboard__header .search__box .search-results {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

/* Social icons */
[data-theme="dark"] .social__icon li a {
    background-color: var(--bg-input);
}

/* Footer newsletter */
[data-theme="dark"] .footer__newsletter .form-control {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

/* Search box */
[data-theme="dark"] .search__box input {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

/* Upload box */
[data-theme="dark"] .upload__box label {
    background-color: var(--bg-input);
}

/* Action buttons */
[data-theme="dark"] .action__btn .btn {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

/* Product details topbar action buttons */
[data-theme="dark"] .pd__topbar .action__btn > a {
    background-color: var(--bg-input);
    border-color: var(--border-color);
}

/* ========================= Dark Mode - Fix Sidebar Green Button Text Start ======================== */
/* When sidebar menu items have green background (active/hover), text and icons must be white */
[data-theme="dark"] .dashboard__menu ul li a.active {
    background-color: hsl(var(--base));
    color: #ffffff;
}

[data-theme="dark"] .dashboard__menu ul li a.active i,
[data-theme="dark"] .dashboard__menu ul li a.active span,
[data-theme="dark"] .dashboard__menu ul li a.active svg {
    color: #ffffff;
    fill: #ffffff;
}

[data-theme="dark"] .dashboard__menu ul li a:hover {
    background-color: hsl(var(--base)/0.3);
    color: #ffffff;
}

[data-theme="dark"] .dashboard__menu ul li a:hover i,
[data-theme="dark"] .dashboard__menu ul li a:hover span,
[data-theme="dark"] .dashboard__menu ul li a:hover svg {
    color: #ffffff;
    fill: #ffffff;
}

[data-theme="dark"] .dashboard__menu ul li a.active::after {
    background-color: #ffffff;
}

[data-theme="dark"] .sidebar__dropdown ul li a.active,
[data-theme="dark"] .sidebar__dropdown ul li a:hover {
    background-color: hsl(var(--base)/0.2);
    color: #ffffff;
}

[data-theme="dark"] .sidebar__dropdown ul li a.active i,
[data-theme="dark"] .sidebar__dropdown ul li a.active span,
[data-theme="dark"] .sidebar__dropdown ul li a.active svg,
[data-theme="dark"] .sidebar__dropdown ul li a:hover i,
[data-theme="dark"] .sidebar__dropdown ul li a:hover span,
[data-theme="dark"] .sidebar__dropdown ul li a:hover svg {
    color: #ffffff;
    fill: #ffffff;
}

[data-theme="dark"] .sidebar__dropdown ul li a.active::after,
[data-theme="dark"] .sidebar__dropdown ul li a:hover::after {
    background-color: #ffffff;
}
/* ========================= Dark Mode - Fix Sidebar Green Button Text End ======================== */

/* ========================= Dark Mode - Fix Flatpickr Calendar White Backgrounds Start ======================== */
/* Flatpickr calendar - ensure all white backgrounds are replaced with dark mode colors */
[data-theme="dark"] .flatpickr-calendar {
    background-color: var(--bg-card) !important;
    box-shadow: 0 3px 13px var(--shadow-color) !important;
}

[data-theme="dark"] .flatpickr-calendar:before {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .flatpickr-calendar:after {
    border-bottom-color: var(--bg-card) !important;
}

[data-theme="dark"] .flatpickr-calendar.arrowBottom:before {
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .flatpickr-calendar.arrowBottom:after {
    border-top-color: var(--bg-card) !important;
}

[data-theme="dark"] .flatpickr-months {
    background-color: var(--bg-card);
}

[data-theme="dark"] .flatpickr-months .flatpickr-month {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-current-month {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-current-month input.cur-year {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-current-month span.cur-month {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-weekdays {
    background-color: var(--bg-card);
}

[data-theme="dark"] span.flatpickr-weekday {
    background-color: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .flatpickr-day {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:focus {
    background: hsl(var(--base)) !important;
    color: #fff !important;
    border-color: hsl(var(--base)) !important;
}

[data-theme="dark"] .flatpickr-day.today {
    border-color: hsl(var(--base)) !important;
}

[data-theme="dark"] .flatpickr-day.today:hover,
[data-theme="dark"] .flatpickr-day.today:focus {
    background: hsl(var(--base)) !important;
    color: #fff !important;
}

[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.startRange,
[data-theme="dark"] .flatpickr-day.endRange {
    background: hsl(var(--base)) !important;
    color: #fff !important;
    border-color: hsl(var(--base)) !important;
}

[data-theme="dark"] .flatpickr-day.inRange {
    background: hsl(var(--base) / 0.3) !important;
    border-color: transparent !important;
    box-shadow: -5px 0 0 hsl(var(--base) / 0.3), 5px 0 0 hsl(var(--base) / 0.3) !important;
}

[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover {
    color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay {
    color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
[data-theme="dark"] .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
[data-theme="dark"] .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
    box-shadow: -10px 0 0 hsl(var(--base)) !important;
}

[data-theme="dark"] .flatpickr-innerContainer {
    background-color: var(--bg-card);
}

[data-theme="dark"] .flatpickr-rContainer {
    background-color: var(--bg-card);
}

[data-theme="dark"] .flatpickr-time {
    background-color: var(--bg-card) !important;
    border-top-color: var(--border-color) !important;
}

[data-theme="dark"] .flatpickr-time input {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-time .flatpickr-time-separator {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-time input:hover,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover,
[data-theme="dark"] .flatpickr-time input:focus,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:focus {
    background: var(--bg-input) !important;
}

[data-theme="dark"] .numInputWrapper:hover {
    background: var(--bg-input) !important;
}

[data-theme="dark"] .numInputWrapper span {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--text-secondary) !important;
}

[data-theme="dark"] .numInputWrapper span.arrowDown:after {
    border-top-color: var(--text-secondary) !important;
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
    fill: hsl(var(--base)) !important;
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
    color: var(--text-primary) !important;
    fill: var(--text-primary) !important;
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover {
    color: hsl(var(--base)) !important;
}

[data-theme="dark"] .dayContainer + .dayContainer {
    box-shadow: -1px 0 0 var(--border-color) !important;
}

[data-theme="dark"] .flatpickr-weekwrapper .flatpickr-weeks {
    box-shadow: 1px 0 0 var(--border-color) !important;
}

[data-theme="dark"] .flatpickr-weekwrapper span.flatpickr-day,
[data-theme="dark"] .flatpickr-weekwrapper span.flatpickr-day:hover {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* ========================= Dark Mode - Fix Flatpickr Calendar White Backgrounds End ======================== */

/* ========================= Dark Mode - Fix Header/Username Area White Backgrounds Start ======================== */
/* Ensure header widgets and dropdowns have no white backgrounds in dark mode */
[data-theme="dark"] .header__widgets .dropdown .dropdown-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .header__widgets .dropdown .dropdown-menu .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .header__widgets .dropdown .dropdown-menu .dropdown-item:hover {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .header__login a {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .header__login a:hover {
    color: hsl(var(--base)) !important;
}

/* Fix any white wrapper/container in the header area */
[data-theme="dark"] .header__area .container,
[data-theme="dark"] .header__area .row,
[data-theme="dark"] .header__area .col-lg-12 {
    background-color: transparent !important;
}

[data-theme="dark"] .header__main {
    background-color: transparent !important;
}

[data-theme="dark"] .header__left,
[data-theme="dark"] .header__menu,
[data-theme="dark"] .header__widgets {
    background-color: transparent !important;
}

/* Fix offcanvas area backgrounds */
[data-theme="dark"] .offcanvas__area {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .offcanvas__topbar {
    background-color: var(--bg-card) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .offcanvas__main {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] .offcanvas__widgets {
    background-color: transparent !important;
}

[data-theme="dark"] .offcanvas__language .dropdown-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .offcanvas__language .dropdown-menu .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .offcanvas__language .dropdown-menu .dropdown-item:hover {
    background-color: var(--bg-input) !important;
}

/* Fix search box in offcanvas */
[data-theme="dark"] .offcanvas__area .search__box {
    background-color: transparent !important;
}

[data-theme="dark"] .offcanvas__area .search__box input {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Fix offcanvas menu */
[data-theme="dark"] .offcanvas__menu {
    background-color: transparent !important;
}

[data-theme="dark"] .offcanvas__btn {
    background-color: transparent !important;
}

/* Fix mobile actions area */
[data-theme="dark"] .header__mobile-actions {
    background-color: transparent !important;
}

/* Fix any hero section wrapper containers that might have white backgrounds */
[data-theme="dark"] .hero__area .container,
[data-theme="dark"] .hero__area .row,
[data-theme="dark"] .hero__area .col-lg-12,
[data-theme="dark"] .hero__area .col-xl-8,
[data-theme="dark"] .hero__area .col-xl-6,
[data-theme="dark"] .hero__area .col-lg-6,
[data-theme="dark"] .hero__area .col-lg-7,
[data-theme="dark"] .hero__area .col-lg-5 {
    background-color: transparent !important;
}

[data-theme="dark"] .hero__content {
    background-color: transparent !important;
}

[data-theme="dark"] .hero__search-wrap {
    background-color: transparent !important;
}

[data-theme="dark"] .hero__stats {
    background-color: transparent !important;
}

[data-theme="dark"] .hero__stat-item {
    background-color: transparent !important;
}

/* Fix any white backgrounds in the hero form (original theme) */
[data-theme="dark"] .hero__form {
    background-color: transparent !important;
}

[data-theme="dark"] .hero__form .mask-box {
    background-color: transparent !important;
}

[data-theme="dark"] .hero__form .form-control {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .hero__form .select2-container--default .select2-selection--single {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .hero__form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .hero__form .list-group-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .hero__form .list-group-item:hover {
    background-color: var(--bg-input) !important;
}

/* Fix any white backgrounds in the hero search form (new theme) */
[data-theme="dark"] .hero__search-field .form-control {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .hero__search-field .form-control::placeholder {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .hero__search-label {
    color: hsl(var(--base)) !important;
}

/* Fix dropdown menus in header */
[data-theme="dark"] .header__area .dropdown-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .header__area .dropdown-menu .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .header__area .dropdown-menu .dropdown-item:hover {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

/* Fix language dropdown in header */
[data-theme="dark"] .header__widgets .dropdown .dropdown-toggle {
    color: var(--text-primary) !important;
}

/* Fix any white backgrounds in the profile/user area */
[data-theme="dark"] .profile__dropdown {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .profile__dropdown .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .profile__dropdown .dropdown-item:hover {
    background-color: var(--bg-input) !important;
}

/* ========================= Dark Mode - Fix Header/Username Area White Backgrounds End ======================== */

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #e0e0e0);
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-primary, #333);
    transition: all 0.3s ease;
    position: relative;
}

.dark-mode-toggle:hover {
    background-color: hsl(var(--base));
    color: #fff;
    border-color: hsl(var(--base));
}

[data-theme="dark"] .dark-mode-toggle {
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .dark-mode-toggle:hover {
    background-color: hsl(var(--base));
    color: #fff;
    border-color: hsl(var(--base));
}

/* ========================= Mobile Dark Mode Toggle Fix Start ======================== */
/* Container for mobile actions (dark mode toggle + hamburger) */
.header__mobile-actions {
    display: none;
    align-items: center;
    gap: 8px;
}

@media screen and (max-width: 991px) {
    .header__mobile-actions {
        display: flex;
    }
}

/* Mobile dark mode toggle - larger and more prominent */
.mobile-dark-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    border: 2px solid hsl(var(--border-color));
    background: transparent;
    cursor: pointer;
    font-size: 20px !important;
    color: hsl(var(--heading-color));
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.mobile-dark-toggle:hover {
    background-color: hsl(var(--base));
    color: #fff;
    border-color: hsl(var(--base));
}

[data-theme="dark"] .mobile-dark-toggle {
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .mobile-dark-toggle:hover {
    background-color: hsl(var(--base));
    color: #fff;
    border-color: hsl(var(--base));
}

/* Ensure the icon inside is large enough */
.mobile-dark-toggle i {
    font-size: 20px !important;
    line-height: 1;
}

/* Also make the desktop dark mode toggle larger */
.dark-mode-toggle:not(.mobile-dark-toggle) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 20px;
}

.dark-mode-toggle:not(.mobile-dark-toggle) i {
    font-size: 20px;
}

/* Dashboard sidebar dark mode toggle - make it consistent */
.dark-mode-toggle-li a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 500;
    color: hsl(var(--white)/0.76);
    border-radius: 0 4px 4px 0;
    position: relative;
    z-index: 1;
    transition: 0.4s;
}

.dark-mode-toggle-li a i {
    font-size: 18px;
    width: 20px;
    text-align: center;
}

[data-theme="dark"] .dark-mode-toggle-li a {
    color: var(--text-primary);
}

[data-theme="dark"] .dark-mode-toggle-li a:hover {
    color: hsl(var(--base));
}
/* ========================= Mobile Dark Mode Toggle Fix End ======================== */

/* ========================= Dark Mode - CKEditor Fix Start ======================== */
/* CKEditor creates an iframe-based editor. The .ck-editor__editable is the content area.
   In dark mode, the editor background stays white. We need to override it. */

/* The editor container/wrapper */
[data-theme="dark"] .ck.ck-editor {
    background-color: transparent;
}

/* The toolbar area */
[data-theme="dark"] .ck.ck-toolbar {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ck.ck-toolbar .ck.ck-toolbar__items .ck-button {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .ck.ck-toolbar .ck.ck-toolbar__items .ck-button:hover {
    background-color: var(--bg-input) !important;
}

[data-theme="dark"] .ck.ck-toolbar .ck.ck-toolbar__items .ck-button.ck-on {
    background-color: hsl(var(--base)) !important;
    color: #fff !important;
}

[data-theme="dark"] .ck.ck-toolbar .ck.ck-toolbar__items .ck-button .ck-button__label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ck.ck-toolbar .ck.ck-toolbar__items .ck-button:hover .ck-button__label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ck.ck-toolbar .ck.ck-toolbar__items .ck-button.ck-on .ck-button__label {
    color: #fff !important;
}

/* The dropdown panels in toolbar */
[data-theme="dark"] .ck.ck-dropdown__panel {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .ck.ck-dropdown__panel .ck-button {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .ck.ck-dropdown__panel .ck-button:hover {
    background-color: var(--bg-input) !important;
}

[data-theme="dark"] .ck.ck-dropdown__panel .ck-button.ck-on {
    background-color: hsl(var(--base)) !important;
    color: #fff !important;
}

/* The main editing area - this is the most important part */
[data-theme="dark"] .ck.ck-editor__editable_inline {
    background-color: var(--bg-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ck.ck-editor__editable_inline.ck-focused {
    border-color: hsl(var(--base)) !important;
}

/* The actual content inside the editor */
[data-theme="dark"] .ck.ck-content {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .ck.ck-content p,
[data-theme="dark"] .ck.ck-content h1,
[data-theme="dark"] .ck.ck-content h2,
[data-theme="dark"] .ck.ck-content h3,
[data-theme="dark"] .ck.ck-content h4,
[data-theme="dark"] .ck.ck-content h5,
[data-theme="dark"] .ck.ck-content h6,
[data-theme="dark"] .ck.ck-content li,
[data-theme="dark"] .ck.ck-content blockquote,
[data-theme="dark"] .ck.ck-content figcaption {
    color: var(--text-primary) !important;
}

/* Placeholder text */
[data-theme="dark"] .ck.ck-editor__editable .ck-placeholder {
    color: #999999 !important;
}

/* Mobile-specific overrides for CKEditor */
@media screen and (max-width: 991px) {
    [data-theme="dark"] .ck.ck-editor__editable_inline {
        background-color: var(--bg-input) !important;
        color: #ffffff !important;
    }
    
    [data-theme="dark"] .ck.ck-content {
        background-color: var(--bg-input) !important;
        color: #ffffff !important;
    }
    
    [data-theme="dark"] .ck.ck-content p,
    [data-theme="dark"] .ck.ck-content h1,
    [data-theme="dark"] .ck.ck-content h2,
    [data-theme="dark"] .ck.ck-content h3,
    [data-theme="dark"] .ck.ck-content h4,
    [data-theme="dark"] .ck.ck-content h5,
    [data-theme="dark"] .ck.ck-content h6,
    [data-theme="dark"] .ck.ck-content li,
    [data-theme="dark"] .ck.ck-content blockquote,
    [data-theme="dark"] .ck.ck-content figcaption {
        color: #ffffff !important;
    }
}
/* ========================= Dark Mode - CKEditor Fix End ======================== */

/* ========================= Dark Mode Styles End ======================== */


/* ========================= Dark Mode - Audit Fixes for Hardcoded Colors Start ======================== */
/* 
   FINAL AUDIT: Fix all remaining hardcoded colors in the Modern Marketplace sections
   that were missing dark mode overrides. This ensures ALL colors use CSS variables.
*/

/* Category Section - dark background should use variable */
[data-theme="dark"] .category__section {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .category__heading {
    color: var(--text-primary);
}

/* Hero Section - use background shorthand to override main.css gradient */
[data-theme="dark"] .hero__area {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .hero__title {
    color: var(--text-primary);
}

[data-theme="dark"] .hero__title .highlight {
    color: #ffd700; /* Keep gold highlight - it's a brand accent */
}

[data-theme="dark"] .hero__subtitle {
    color: var(--text-secondary);
}

[data-theme="dark"] .hero__stat-num {
    color: var(--text-primary);
}

[data-theme="dark"] .hero__stat-label {
    color: var(--text-secondary);
}

/* Hero Search Form */
[data-theme="dark"] .hero__search-form {
    background: var(--bg-card);
    box-shadow: 0 10px 40px var(--shadow-color);
}

[data-theme="dark"] .hero__search-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
}

[data-theme="dark"] .hero__search-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-secondary);
}

[data-theme="dark"] .hero__search-divider {
    background: var(--border-color);
}

[data-theme="dark"] .hero__search-btn:hover {
    background: hsl(var(--base));
    box-shadow: 0 4px 15px var(--shadow-color);
}

/* Equipment Card - image placeholder */
[data-theme="dark"] .equipment__card-img {
    background: var(--bg-input);
}

[data-theme="dark"] .equipment__card-price .price-unit {
    color: var(--text-secondary);
}

/* Button White */
[data-theme="dark"] .btn--white {
    background: var(--bg-card);
    color: var(--text-primary);
}

[data-theme="dark"] .btn--white:hover {
    background: var(--bg-input);
    color: var(--text-primary);
    box-shadow: 0 4px 15px var(--shadow-color);
}

/* ========================= Dark Mode - Audit Fixes for Hardcoded Colors End ======================== */

/* ========================= Compact Category Grid Styles Start ======================== */

.category__section {
    background-color: #383b41;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.category__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.category__heading {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.category__view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: hsl(var(--base));
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
}

.category__view-all:hover {
    background: rgba(255,255,255,0.1);
    color: hsl(var(--base));
    gap: 12px;
}

.category__view-all i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

[dir="rtl"] .category__view-all i {
    transform: rotate(180deg);
}

[dir="rtl"] .category__view-all:hover i {
    transform: rotate(180deg) translateX(-3px);
}

/* Grid Item - Compact Card */
.category__grid-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1.5px solid transparent;
    height: 100%;
    min-height: 70px;
}

.category__grid-item:hover {
    border-color: hsl(var(--base));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* Icon Circle - Green Circle with White Icon */
.category__grid-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: hsl(var(--base-h) var(--base-s) var(--base-l));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.3);
}

.category__grid-icon .equipment-icon {
    width: 26px;
    height: 26px;
    display: block;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: brightness(0) invert(1);
}

.category__grid-item:hover .category__grid-icon {
    background: hsl(var(--base-h) var(--base-s) var(--base-l));
    color: #fff;
    box-shadow: 0 4px 14px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.5);
    transform: scale(1.05);
}

.category__grid-item:hover .category__grid-icon .equipment-icon {
    filter: brightness(0) invert(1);
    transform: scale(1.1);
}

/* Info */
.category__grid-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.category__grid-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category__grid-count {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

/* Dark Mode */
[data-theme="dark"] .category__grid-item {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .category__grid-item:hover {
    border-color: hsl(var(--base));
    box-shadow: 0 6px 20px var(--shadow-color);
}

[data-theme="dark"] .category__grid-name {
    color: var(--text-primary);
}

[data-theme="dark"] .category__grid-count {
    color: var(--text-secondary);
}

[data-theme="dark"] .category__grid-icon {
    background: var(--bg-input);
    color: var(--text-primary);
}

[data-theme="dark"] .category__grid-item:hover .category__grid-icon {
    background: hsl(var(--base));
    color: #fff;
}

[data-theme="dark"] .category__grid-item:hover .category__grid-icon .equipment-icon {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .category__view-all {
    color: #FFFFFF;
}

/* RTL Support */
[dir="rtl"] .category__grid-item {
    text-align: right;
}

/* Responsive */
@media screen and (max-width: 575px) {
    .category__grid-item {
        padding: 12px 14px;
        min-height: 62px;
        gap: 10px;
    }

    .category__grid-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 17px;
        border-radius: 10px;
    }

    .category__grid-name {
        font-size: 13px;
    }

    .category__grid-count {
        font-size: 11px;
    }

    .category__heading {
        font-size: 20px;
    }
}

/* ========================= Compact Category Grid Styles End ======================== */

/* ========================= Modern Marketplace Homepage Styles Start ======================== */

/* Section Padding */
.section-padding {
    padding: 80px 0;
}

@media (max-width: 767px) {
    .section-padding {
        padding: 50px 0;
    }
}

/* Section Header */
.section__header {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.section__badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(0, 108, 53, 0.1);
    color: hsl(var(--base));
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.section__title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--text-primary, #1a1a2e);
}

.section__desc {
    font-size: 16px;
    color: var(--text-secondary, #6c757d);
    line-height: 1.7;
}

@media (max-width: 767px) {
    .section__title {
        font-size: 24px;
    }
    .section__desc {
        font-size: 14px;
    }
}

/* Background Light */
.bg--light {
    background-color: #f8f9fa;
}

[data-theme="dark"] .bg--light {
    background-color: var(--bg-secondary);
}

/* ==================== Hero Section ==================== */
.hero__area {
    position: relative;
    background-color: #F8F6F1;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding-top: 200px !important;
    padding-bottom: 80px;
    overflow: hidden;
}

.hero__bg-overlay {
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.hero__content {
    position: relative;
    z-index: 2;
}

.hero__logo {
    display: inline-block;
}

.hero__logo img {
    max-height: 60px;
}

.hero__title {
    font-size: 48px;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 16px;
    line-height: 1.3;
}

.hero__title .highlight {
    color: #ffd700;
    position: relative;
    display: inline-block;
}

.hero__title .highlight::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 215, 0, 0.3);
    border-radius: 2px;
}

.hero__subtitle {
    font-size: 18px;
    color: #555;
    margin-bottom: 40px;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .hero__area {
        min-height: auto;
        padding: 100px 0 60px;
    }
    .hero__title {
        font-size: 28px;
    }
    .hero__subtitle {
        font-size: 15px;
        margin-bottom: 30px;
    }
}

/* Search Bar */
.hero__search-wrap {
    max-width: 750px;
    margin: 0 auto 40px;
}

.hero__search-form {
    background: #fff;
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.hero__search-inner {
    display: flex;
    align-items: center;
    gap: 0;
}

.hero__search-field {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    position: relative;
}

.hero__search-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: hsl(var(--base));
    font-size: 16px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.hero__search-field .form-control,
.hero__search-field .select2-container {
    border: none;
    background: transparent;
    padding: 8px 4px;
    font-size: 14px;
    height: auto;
    box-shadow: none;
}

.hero__search-field .select2-container--default .select2-selection--single {
    border: none;
    background: transparent;
    height: auto;
}

.hero__search-field .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333;
    font-size: 14px;
    padding: 0;
    line-height: 1.5;
}

.hero__search-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999;
}

.hero__search-field .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    transform: translateY(-50%);
}

.hero__search-divider {
    width: 1px;
    height: 30px;
    background: #e0e0e0;
    flex-shrink: 0;
}

.hero__search-action {
    flex-shrink: 0;
    padding: 4px;
}

.hero__search-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: hsl(var(--base));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.hero__search-btn:hover {
    background: #005a2e;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 108, 53, 0.3);
}

.hero__search-btn i {
    font-size: 16px;
}

@media (max-width: 767px) {
    .hero__search-inner {
        flex-direction: column;
    }
    .hero__search-divider {
        width: 100%;
        height: 1px;
    }
    .hero__search-field {
        width: 100%;
        padding: 8px 12px;
    }
    .hero__search-action {
        width: 100%;
        padding: 8px;
    }
    .hero__search-btn {
        width: 100%;
        justify-content: center;
        padding: 14px;
    }
}

/* Hero Stats */
.hero__stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.hero__stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__stat-num {
    font-size: 28px;
    font-weight: 800;
    color: #1a1a2e;
}

.hero__stat-label {
    font-size: 14px;
    color: #666;
    margin-top: 2px;
}

@media (max-width: 767px) {
    .hero__stats {
        gap: 24px;
    }
    .hero__stat-num {
        font-size: 22px;
    }
    .hero__stat-label {
        font-size: 12px;
    }
}

/* ==================== Categories Section ==================== */
.categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.category__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px;
    background: #fff;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1.5px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.category__card:hover {
    border-color: hsl(var(--base));
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 108, 53, 0.12);
    text-decoration: none;
}

.category__card-img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 10px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.3) !important;
}

.category__card:hover .category__card-img {
    background: hsl(var(--base-h) var(--base-s) var(--base-l)) !important;
    box-shadow: 0 5px 16px hsl(var(--base-h) var(--base-s) var(--base-l) / 0.5) !important;
    transform: scale(1.05) !important;
}

.category__card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transition: all 0.3s ease !important;
    filter: brightness(0) invert(1) !important;
}

.category__card:hover .category__card-img img {
    filter: brightness(0) invert(1) !important;
    transform: scale(1.1) !important;
}

.category__card-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.4;
}

[data-theme="dark"] .category__card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .category__card-name {
    color: var(--text-primary);
}

[data-theme="dark"] .category__card-img {
    background: var(--bg-input);
}

@media (max-width: 575px) {
    .categories__grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
    .category__card {
        padding: 14px 8px;
    }
    .category__card-img {
        width: 50px;
        height: 50px;
        padding: 10px;
    }
    .category__card-name {
        font-size: 11px;
    }
}

/* ==================== Featured Equipment Section ==================== */
.equipment__card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1.5px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.equipment__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
    border-color: hsl(var(--base));
}

.equipment__card-img {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: #f5f5f5;
}

.equipment__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}

.equipment__card:hover .equipment__card-img img {
    transform: scale(1.08);
}

.equipment__badge {
    position: absolute;
    top: 12px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    z-index: 2;
}

.equipment__badge--new {
    left: 12px;
    background: #ff6b6b;
    color: #fff;
}

.equipment__badge--available {
    right: 12px;
    background: rgba(0, 108, 53, 0.9);
    color: #fff;
}

[dir="rtl"] .equipment__badge--new {
    left: auto;
    right: 12px;
}

[dir="rtl"] .equipment__badge--available {
    right: auto;
    left: 12px;
}

.equipment__card-body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.equipment__card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}

.equipment__card-title a {
    color: #1a1a2e;
    text-decoration: none;
    transition: color 0.3s ease;
}

.equipment__card-title a:hover {
    color: hsl(var(--base));
}

.equipment__card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #6c757d;
}

.equipment__card-meta i {
    color: hsl(var(--base));
    font-size: 12px;
}

.equipment__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.equipment__card-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.equipment__card-price .price {
    font-size: 20px;
    font-weight: 800;
    color: hsl(var(--base));
}

.equipment__card-price .price-unit {
    font-size: 12px;
    color: #6c757d;
}

[data-theme="dark"] .equipment__card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .equipment__card-title a {
    color: var(--text-primary);
}

[data-theme="dark"] .equipment__card-title a:hover {
    color: hsl(var(--base));
}

[data-theme="dark"] .equipment__card-meta {
    color: var(--text-secondary);
}

[data-theme="dark"] .equipment__card-footer {
    border-top-color: var(--border-color);
}

@media (max-width: 575px) {
    .equipment__card-img {
        height: 160px;
    }
    .equipment__card-title {
        font-size: 14px;
    }
    .equipment__card-price .price {
        font-size: 17px;
    }
}

/* ==================== Why Choose Us Section ==================== */
.why__card {
    text-align: center;
    padding: 36px 24px;
    background: #fff;
    border-radius: 16px;
    border: 1.5px solid #f0f0f0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    height: 100%;
}

.why__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
    border-color: hsl(var(--base));
}

.why__card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 108, 53, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px;
    color: hsl(var(--base));
    transition: all 0.3s ease;
}

.why__card:hover .why__card-icon {
    background: hsl(var(--base));
    color: #fff;
    transform: scale(1.1);
}

.why__card h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1a1a2e;
}

.why__card p {
    font-size: 14px;
    color: #6c757d;
    line-height: 1.7;
    margin: 0;
}

[data-theme="dark"] .why__card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .why__card h5 {
    color: var(--text-primary);
}

[data-theme="dark"] .why__card p {
    color: var(--text-secondary);
}

/* ==================== Statistics Section ==================== */
.stats__section {
    background: linear-gradient(135deg, #006c35 0%, #008847 50%, #00a55a 100%);
    position: relative;
    overflow: hidden;
}

.stats__section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
}

.stats__card {
    text-align: center;
    padding: 32px 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.stats__card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
}

.stats__card-icon {
    font-size: 32px;
    color: #ffd700;
    margin-bottom: 12px;
}

.stats__card-num {
    display: block;
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 4px;
}

.stats__card-label {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

@media (max-width: 575px) {
    .stats__card {
        padding: 24px 12px;
    }
    .stats__card-num {
        font-size: 28px;
    }
    .stats__card-label {
        font-size: 13px;
    }
    .stats__card-icon {
        font-size: 26px;
    }
}

/* ==================== CTA Section ==================== */
.cta__wrap {
    background: linear-gradient(135deg, #006c35 0%, #008847 100%);
    border-radius: 24px;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.cta__wrap::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.cta__wrap::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
}

.cta__content {
    position: relative;
    z-index: 2;
}

.cta__badge {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.cta__title {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.3;
}

.cta__desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 500px;
}

.cta__features {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.cta__feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.cta__feature-item i {
    color: #ffd700;
    font-size: 16px;
}

.cta__image {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cta__equipment-img {
    max-width: 280px;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.cta__floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    animation: float 3s ease-in-out infinite;
}

.cta__floating-card--1 {
    top: 10%;
    right: 0;
    animation-delay: 0.5s;
}

.cta__floating-card--2 {
    bottom: 15%;
    left: 0;
    animation-delay: 1s;
}

[dir="rtl"] .cta__floating-card--1 {
    right: auto;
    left: 0;
}

[dir="rtl"] .cta__floating-card--2 {
    left: auto;
    right: 0;
}

@media (max-width: 991px) {
    .cta__wrap {
        padding: 40px 24px;
    }
    .cta__title {
        font-size: 28px;
    }
}

@media (max-width: 575px) {
    .cta__wrap {
        padding: 30px 20px;
        border-radius: 16px;
    }
    .cta__title {
        font-size: 22px;
    }
    .cta__desc {
        font-size: 14px;
    }
    .cta__features {
        flex-direction: column;
        gap: 10px;
    }
}

/* ==================== Footer Section ==================== */
.footer__section {
    background: #1a1a2e;
    color: rgba(255, 255, 255, 0.8);
    padding-top: 60px;
}

.footer__top {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}

.footer__widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: hsl(var(--base));
}

[dir="rtl"] .footer__widget-title::after {
    left: auto;
    right: 0;
}

.footer__widget p {
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.65);
}

.footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__links li {
    margin-bottom: 10px;
}

.footer__links li a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer__links li a:hover {
    color: hsl(var(--base));
    padding-left: 4px;
}

[dir="rtl"] .footer__links li a:hover {
    padding-left: 0;
    padding-right: 4px;
}

.footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
}

.footer__contact li i {
    width: 16px;
    color: hsl(var(--base));
    font-size: 14px;
}

.footer__contact li a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer__contact li a:hover {
    color: hsl(var(--base));
}

.footer__social {
    display: flex;
    gap: 10px;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
}

.footer__social-link:hover {
    background: hsl(var(--base));
    color: #fff;
    transform: translateY(-2px);
}

.footer__bottom {
    padding: 20px 0;
    text-align: center;
}

.footer__bottom p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

@media (max-width: 767px) {
    .footer__section {
        padding-top: 40px;
    }
}

/* ==================== Button Styles ==================== */
.btn--outline-base {
    background: transparent;
    border: 2px solid hsl(var(--base));
    color: hsl(var(--base));
    padding: 12px 28px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn--outline-base:hover {
    background: hsl(var(--base));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 108, 53, 0.2);
}

/* Dark mode - outline base button text should be white for readability */
[data-theme="dark"] .btn--outline-base {
    color: #FFFFFF;
    border-color: #FFFFFF;
}

[data-theme="dark"] .btn--outline-base:hover {
    background: hsl(var(--base));
    border-color: hsl(var(--base));
    color: #fff;
}

.btn--rounded {
    border-radius: 50px !important;
}

.btn--lg {
    padding: 14px 36px;
    font-size: 16px;
}

.btn--white {
    background: #fff;
    color: hsl(var(--base));
    border: none;
    font-weight: 600;
}

.btn--white:hover {
    background: #f0f0f0;
    color: #005a2e;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* ==================== Text Color ==================== */
.text--base {
    color: hsl(var(--base)) !important;
}

/* ==================== RTL Fixes for New Sections ==================== */
[dir="rtl"] .hero__search-btn i {
    margin-left: 0;
    margin-right: 0;
}

[dir="rtl"] .equipment__card-footer {
    flex-direction: row-reverse;
}

[dir="rtl"] .cta__feature-item {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn--outline-base i {
    transform: rotate(180deg);
}

/* ==================== Responsive Fixes ==================== */
@media (max-width: 991px) {
    .cta__image {
        display: none !important;
    }
}

/* ========================= Modern Marketplace Homepage Styles End ======================== */

/* ========================= Dark Mode - Policy/Terms Page Text Fix Start ======================== */
/* Fix black text in dark mode for policy/terms pages */
/* Override main.css .wyg rules that use --body-color and --heading-color (which stay black in dark mode) */
/* Also override inline styles (style="color: #000") that come from CKEditor/database content */
[data-theme="dark"] .wyg,
[data-theme="dark"] .wyg p,
[data-theme="dark"] .wyg h1,
[data-theme="dark"] .wyg h2,
[data-theme="dark"] .wyg h3,
[data-theme="dark"] .wyg h4,
[data-theme="dark"] .wyg h5,
[data-theme="dark"] .wyg h6,
[data-theme="dark"] .wyg ul,
[data-theme="dark"] .wyg ol,
[data-theme="dark"] .wyg li,
[data-theme="dark"] .wyg span,
[data-theme="dark"] .wyg a,
[data-theme="dark"] .wyg div,
[data-theme="dark"] .wyg blockquote,
[data-theme="dark"] .wyg strong,
[data-theme="dark"] .wyg em,
[data-theme="dark"] .wyg u {
    color: #FFFFFF !important;
}

/* Force override inline styles (style="color: ...") that come from database content */
[data-theme="dark"] .wyg [style*="color"] {
    color: #FFFFFF !important;
}

/* Mobile-specific override - some mobile browsers handle CSS differently */
@media screen and (max-width: 991px) {
    [data-theme="dark"] .wyg,
    [data-theme="dark"] .wyg p,
    [data-theme="dark"] .wyg h1,
    [data-theme="dark"] .wyg h2,
    [data-theme="dark"] .wyg h3,
    [data-theme="dark"] .wyg h4,
    [data-theme="dark"] .wyg h5,
    [data-theme="dark"] .wyg h6,
    [data-theme="dark"] .wyg ul,
    [data-theme="dark"] .wyg ol,
    [data-theme="dark"] .wyg li,
    [data-theme="dark"] .wyg span,
    [data-theme="dark"] .wyg a,
    [data-theme="dark"] .wyg div,
    [data-theme="dark"] .wyg blockquote,
    [data-theme="dark"] .wyg strong,
    [data-theme="dark"] .wyg em,
    [data-theme="dark"] .wyg u,
    [data-theme="dark"] .wyg [style*="color"] {
        color: #FFFFFF !important;
    }
}
/* ========================= Dark Mode - Policy/Terms Page Text Fix End ======================== */

/* ========================= Dark Mode - ApexCharts Fixes Start ======================== */
/* Fix ApexCharts text colors in dark mode - chart labels, legends, axes, tooltips */
[data-theme="dark"] .apexcharts-text,
[data-theme="dark"] .apexcharts-yaxis-label,
[data-theme="dark"] .apexcharts-xaxis-label,
[data-theme="dark"] .apexcharts-legend-text,
[data-theme="dark"] .apexcharts-datalabel,
[data-theme="dark"] .apexcharts-datalabel-label,
[data-theme="dark"] .apexcharts-datalabel-value,
[data-theme="dark"] .apexcharts-tooltip-title,
[data-theme="dark"] .apexcharts-tooltip-text,
[data-theme="dark"] .apexcharts-tooltip-series-group,
[data-theme="dark"] .apexcharts-menu-item {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Fix ApexCharts tooltip background in dark mode */
[data-theme="dark"] .apexcharts-tooltip {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .apexcharts-tooltip-title {
    background: var(--bg-input) !important;
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .apexcharts-xaxistooltip {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .apexcharts-xaxistooltip-text {
    color: #FFFFFF !important;
}

[data-theme="dark"] .apexcharts-xaxistooltip-bottom:before {
    border-bottom-color: var(--border-color) !important;
}

[data-theme="dark"] .apexcharts-xaxistooltip-bottom:after {
    border-bottom-color: var(--bg-card) !important;
}

[data-theme="dark"] .apexcharts-legend-series .apexcharts-legend-text {
    color: #FFFFFF !important;
}

/* Fix ApexCharts grid lines in dark mode */
[data-theme="dark"] .apexcharts-gridline,
[data-theme="dark"] .apexcharts-xcrosshairs,
[data-theme="dark"] .apexcharts-ycrosshairs {
    stroke: var(--border-color) !important;
}

/* Fix ApexCharts menu/dropdown in dark mode */
[data-theme="dark"] .apexcharts-menu {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .apexcharts-menu-item:hover {
    background: var(--bg-input) !important;
}

/* Fix ApexCharts y-axis title in dark mode */
[data-theme="dark"] .apexcharts-yaxis-title-text,
[data-theme="dark"] .apexcharts-xaxis-title-text {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Fix ApexCharts data labels on bars/areas */
[data-theme="dark"] .apexcharts-data-labels text {
    fill: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* Fix ApexCharts legend marker labels */
[data-theme="dark"] .apexcharts-legend-marker {
    border-color: transparent !important;
}
/* ========================= Dark Mode - ApexCharts Fixes End ======================== */

/* ========================= Dark Mode - Dashboard Value Fixes Start ======================== */
/* Ensure ALL dashboard values, statistics, and counters are white in dark mode */

/* User Dashboard - card values (numbers/statistics) */
[data-theme="dark"] .dashboard__card p {
    color: #FFFFFF !important;
}

/* User Dashboard - any value inside dashboard cards */
[data-theme="dark"] .dashboard__card .card-value,
[data-theme="dark"] .dashboard__card .amount,
[data-theme="dark"] .dashboard__card .count,
[data-theme="dark"] .dashboard__card .stat {
    color: #FFFFFF !important;
}

/* Admin Dashboard - widget card values */
[data-theme="dark"] .widget-card .widget-card__value {
    color: #FFFFFF !important;
}

/* Admin Dashboard - dashboard widget number values */
[data-theme="dark"] .dashboard-widget--card .dashboard-widget__content .number {
    color: #FFFFFF !important;
}

/* Admin Dashboard - text--white utility in dark mode */
[data-theme="dark"] .text--white {
    color: #FFFFFF !important;
}

/* Admin Dashboard - number wrap values (plus/minus transactions) */
[data-theme="dark"] .number--wrap h2,
[data-theme="dark"] .number--wrap .number {
    color: #FFFFFF !important;
}

/* Any counter or statistic value in dark mode */
[data-theme="dark"] .counter,
[data-theme="dark"] .stat-value,
[data-theme="dark"] .stat-number,
[data-theme="dark"] .statistic,
[data-theme="dark"] .statistic-value,
[data-theme="dark"] .amount-value,
[data-theme="dark"] .total-value {
    color: #FFFFFF !important;
}

/* Fix any heading-color based values in dark mode */
[data-theme="dark"] [class*="dashboard"] [class*="value"],
[data-theme="dark"] [class*="dashboard"] [class*="amount"],
[data-theme="dark"] [class*="dashboard"] [class*="count"],
[data-theme="dark"] [class*="dashboard"] [class*="stat"],
[data-theme="dark"] [class*="widget"] [class*="value"],
[data-theme="dark"] [class*="widget"] [class*="amount"],
[data-theme="dark"] [class*="widget"] [class*="count"] {
    color: #FFFFFF !important;
}
/* ========================= Dark Mode - Dashboard Value Fixes End ======================== */

/* ========================= Dark Mode - Product Card Background Fix Start ======================== */
/* Product cards have a light green background (--base-l-800) in light mode.
   In dark mode, this light green background makes white text unreadable.
   Change the background to a dark card color in dark mode.
   Note: No !important here so dashboard-specific overrides can take precedence. */
/* Scoped to .browse__area to avoid affecting other cards like equipment info cards */
[data-theme="dark"] .browse__area .product__card {
    background-color: var(--bg-card);
}

/* Also fix testimonial mask-box that uses the same light green background */
[data-theme="dark"] .testimonial__single .mask-box {
    background-color: var(--bg-card) !important;
}
/* ========================= Dark Mode - Product Card Background Fix End ======================== */

/* ========================= Product Column Cards Fix Start ======================== */
/* Fix ALL product__card.product__column cards (used in Dashboard, Products page, etc.)
   These cards use the product__card.product__column layout. We restore the original appearance
   from main.css while ensuring proper integration with the dashboard/products background. */

/* Restore original card appearance - match main.css .product__card.product__column */
.product__card.product__column {
    background-color: hsl(var(--base-h), var(--base-s), var(--base-l));
    border-radius: 24px;
    transition: 0.3s;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    z-index: 1;
}

.product__card.product__column:hover {
    transform: translateY(-5px);
}

/* Restore original image sizing - match main.css .product__card.product__column .product__img */
.product__card.product__column .product__img {
    border-radius: 24px 24px 0 0;
    height: 262px;
    border: none;
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.product__card.product__column .product__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.6s;
}

.product__card.product__column:hover .product__img img {
    filter: brightness(0.7);
}

/* Restore original content padding - match main.css .product__card.product__column .product__content */
.product__card.product__column .product__content {
    padding: 24px;
    padding-right: 24px;
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Restore original title styling - match main.css .product__content h4 */
.product__card.product__column .product__content h4 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
}

.product__card.product__column .product__content h4 a {
    color: hsl(var(--heading-color));
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product__card.product__column .product__content h4 a:hover {
    color: hsl(var(--base));
}

/* Restore original list styling - match main.css .product__content ul li */
.product__card.product__column .product__content ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product__card.product__column .product__content ul li {
    font-size: 16px;
    color: hsl(var(--body-color));
    display: flex;
    align-items: flex-start;
}

.product__card.product__column .product__content ul li i {
    color: hsl(var(--base));
    margin-top: 3px;
    margin-right: 6px;
    min-width: 16px;
    text-align: center;
}

.product__card.product__column .product__content ul li span {
    margin-right: 5px;
    font-weight: 400;
}

/* Restore original location text */
.product__card.product__column .product--location {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: hsl(var(--body-color));
}

/* Restore original price styling - match main.css .product__price */
.product__card.product__column .product__price {
    margin-top: 16px;
    display: flex;
    align-items: flex-end;
    font-size: 22px;
    font-weight: 700;
    color: hsl(var(--base));
}

.product__card.product__column .product__price p {
    margin-bottom: 3px !important;
    color: hsl(var(--heading-color) / 0.6);
    font-size: 14px;
    font-weight: 500;
}

/* Restore original owner section - match main.css .product__content h6 */
.product__card.product__column .product__content h6 {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 16px;
    color: hsl(var(--body-color));
}

.product__card.product__column .product__content h6 img {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.product__card.product__column .product__content h6 a {
    color: hsl(var(--heading-color));
    text-decoration: none;
}

.product__card.product__column .product__content h6 a:hover {
    color: hsl(var(--base));
}

/* Restore original arrow button - match main.css .product__btn */
.product__card.product__column .product__btn {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 10px 0 0 10px;
    border-radius: 36px 0 0 0;
    background-color: hsl(var(--body-bg));
}

.product__card.product__column .product__btn::before {
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 0;
    height: 30px;
    width: 20px;
    box-shadow: 0 16px 0 0 hsl(var(--body-bg));
    right: 100%;
    border-bottom-right-radius: 16px;
}

.product__card.product__column .product__btn::after {
    content: "";
    position: absolute;
    background-color: transparent;
    bottom: 100%;
    right: 0;
    width: 30px;
    height: 20px;
    box-shadow: 16px 0 0 0 hsl(var(--body-bg));
    border-bottom-right-radius: 16px;
}

.product__card.product__column .product__arrow {
    width: 54px;
    height: 54px;
    background-color: hsl(var(--base));
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    transform: rotate(-45deg);
}

.product__card.product__column .product__arrow:hover {
    transform: rotate(0);
    color: #ffffff;
}

/* Responsive - match main.css breakpoints */
@media screen and (max-width: 1399px) {
    .product__card.product__column .product__content {
        padding: 16px;
        padding-right: 20px;
    }

    .product__card.product__column .product__content ul li {
        font-size: 14px;
    }

    .product__card.product__column .product__content h4 {
        font-size: 20px;
    }
}

@media screen and (max-width: 1199px) {
    .product__card.product__column .product__img {
        height: 220px;
    }
}

@media screen and (max-width: 991px) {
    .product__card.product__column .product__arrow {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .product__card.product__column .product__btn {
        border-radius: 30px 0 0 0;
    }

    .product__card.product__column .product__btn::after {
        border-bottom-right-radius: 10px;
    }

    .product__card.product__column .product__btn::before {
        border-bottom-right-radius: 10px;
    }
}

@media screen and (max-width: 767px) {
    .product__card.product__column .product__content h4 {
        font-size: 18px;
    }

    .product__card.product__column .product__btn {
        border-radius: 30px 0 0 0;
    }

    .product__card.product__column .product__content h6 {
        font-size: 14px;
        margin-top: 16px;
    }

    .product__card.product__column .product__content h6 img {
        width: 32px;
        height: 32px;
    }

    .product__card.product__column {
        border-radius: 16px;
    }

    .product__card.product__column .product__img {
        border-radius: 16px 16px 0 0;
        height: 200px;
    }
}

@media screen and (max-width: 575px) {
    .product__card.product__column .product__img {
        height: 180px;
    }

    .product__card.product__column .product__content {
        padding: 12px;
        padding-right: 50px;
    }
}

/* Dark mode fixes for product column cards */
/* IMPORTANT: In dark mode, --white is redefined to 0 0% 12% (dark gray).
   So we use #ffffff directly for text colors instead of hsl(var(--white)). */
[data-theme="dark"] .product__card.product__column {
    background-color: hsl(var(--base-l-800) / 0.15);
    border: 1px solid hsl(var(--border-color) / 0.2);
    box-shadow: 0 2px 8px hsl(var(--black) / 0.2);
}

[data-theme="dark"] .product__card.product__column:hover {
    border-color: hsl(var(--base) / 0.5);
    box-shadow: 0 8px 25px hsl(var(--black) / 0.3);
}

[data-theme="dark"] .product__card.product__column .product__content h4 a {
    color: #ffffff;
}

[data-theme="dark"] .product__card.product__column .product__content h4 a:hover {
    color: hsl(var(--base));
}

[data-theme="dark"] .product__card.product__column .product__content ul li {
    color: rgba(255, 255, 255, 0.75);
}

[data-theme="dark"] .product__card.product__column .product--location {
    color: rgba(255, 255, 255, 0.75);
}

[data-theme="dark"] .product__card.product__column .product__price {
    color: hsl(var(--base));
}

[data-theme="dark"] .product__card.product__column .product__price p {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .product__card.product__column .product__content h6 {
    color: rgba(255, 255, 255, 0.75);
}

[data-theme="dark"] .product__card.product__column .product__content h6 a {
    color: #ffffff;
}

[data-theme="dark"] .product__card.product__column .product__content h6 a:hover {
    color: hsl(var(--base));
}

[data-theme="dark"] .product__card.product__column .product__btn {
    background-color: hsl(var(--section-bg));
}

[data-theme="dark"] .product__card.product__column .product__btn::before {
    box-shadow: 0 16px 0 0 hsl(var(--section-bg));
}

[data-theme="dark"] .product__card.product__column .product__btn::after {
    box-shadow: 16px 0 0 0 hsl(var(--section-bg));
}

/* Fix grid gap for product column cards row */
.row.gy-5 .product__card.product__column {
    --bs-gutter-y: 1.5rem;
}

/* ========================= Product Column Cards Fix End ======================== */

/* ========================= Equipment Card Text Color Fix - White Text Start ======================== */
/* Fix: Change all text inside equipment/product cards to white (#FFFFFF) for better readability
   against the card background in both Light Mode and Dark Mode.
   This applies to the User Dashboard → Equipment section and all product card listings. */

/* Light Mode - Product card text should be white */
.product__card.product__column .product__content h4 a {
    color: #FFFFFF;
}

.product__card.product__column .product__content ul li {
    color: #FFFFFF;
}

.product__card.product__column .product__content ul li i {
    color: #FFFFFF;
}

.product__card.product__column .product--location {
    color: #FFFFFF;
}

.product__card.product__column .product__price {
    color: #FFFFFF;
}

.product__card.product__column .product__price p {
    color: rgba(255, 255, 255, 0.7);
}

.product__card.product__column .product__content h6 {
    color: #FFFFFF;
}

.product__card.product__column .product__content h6 a {
    color: #FFFFFF;
}

.product__card.product__column .product__content h4 a:hover,
.product__card.product__column .product__content h6 a:hover {
    color: hsl(var(--base));
}

/* Dark Mode - Ensure product card text remains white (override any previous dark mode rules) */
[data-theme="dark"] .product__card.product__column .product__content h4 a {
    color: #FFFFFF;
}

[data-theme="dark"] .product__card.product__column .product__content h4 a:hover {
    color: hsl(var(--base));
}

[data-theme="dark"] .product__card.product__column .product__content ul li {
    color: #FFFFFF;
}

[data-theme="dark"] .product__card.product__column .product--location {
    color: #FFFFFF;
}

[data-theme="dark"] .product__card.product__column .product__price {
    color: #FFFFFF;
}

[data-theme="dark"] .product__card.product__column .product__price p {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .product__card.product__column .product__content h6 {
    color: #FFFFFF;
}

[data-theme="dark"] .product__card.product__column .product__content h6 a {
    color: #FFFFFF;
}

[data-theme="dark"] .product__card.product__column .product__content h6 a:hover {
    color: hsl(var(--base));
}

/* ========================= Equipment Card Text Color Fix - White Text End ======================== */

/* ========================= Equipment Card (Homepage) - White Text Fix Start ======================== */
/* Fix equipment__card text to be white in light mode for better readability */
.equipment__card-title a {
    color: #FFFFFF;
}

.equipment__card-title a:hover {
    color: hsl(var(--base));
}

.equipment__card-meta {
    color: rgba(255, 255, 255, 0.8);
}

.equipment__card-meta i {
    color: #FFFFFF;
}

.equipment__card-price .price {
    color: #FFFFFF;
}

.equipment__card-price .price-unit {
    color: rgba(255, 255, 255, 0.7);
}

/* Dark mode - ensure equipment card text stays white */
[data-theme="dark"] .equipment__card-title a {
    color: #FFFFFF;
}

[data-theme="dark"] .equipment__card-title a:hover {
    color: hsl(var(--base));
}

[data-theme="dark"] .equipment__card-meta {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .equipment__card-meta i {
    color: #FFFFFF;
}

[data-theme="dark"] .equipment__card-price .price {
    color: #FFFFFF;
}

[data-theme="dark"] .equipment__card-price .price-unit {
    color: rgba(255, 255, 255, 0.7);
}

/* ========================= Equipment Card (Homepage) - White Text Fix End ======================== */

/* ========================= Section Product Card (Non-Column) - White Text Fix Start ======================== */
/* Fix product__card (without .product__column) used in sections/product.blade.php */
/* Dark green background for light mode - matches product__card.product__column styling */
/* Scoped to .browse__area to avoid affecting other cards like equipment info cards */
.browse__area .product__card {
    background-color: hsl(var(--base-h), var(--base-s), 25%);
}

.browse__area .product__card .product__content h4 a {
    color: #FFFFFF;
}

.browse__area .product__card .product__content h4 a:hover {
    color: hsl(var(--base));
}

.browse__area .product__card .product__content ul li {
    color: #FFFFFF;
}

.browse__area .product__card .product__content ul li i {
    color: #FFFFFF;
}

.browse__area .product__card .product--location {
    color: #FFFFFF;
}

.browse__area .product__card .product__price {
    color: #FFFFFF;
}

.browse__area .product__card .product__price p {
    color: rgba(255, 255, 255, 0.7);
}

.browse__area .product__card .product__content h6 {
    color: #FFFFFF;
}

.browse__area .product__card .product__content h6 a {
    color: #FFFFFF;
}

.browse__area .product__card .product__content h6 a:hover {
    color: hsl(var(--base));
}

/* Dark mode - ensure section product card text stays white */
[data-theme="dark"] .browse__area .product__card .product__content h4 a {
    color: #FFFFFF;
}

[data-theme="dark"] .browse__area .product__card .product__content h4 a:hover {
    color: hsl(var(--base));
}

[data-theme="dark"] .browse__area .product__card .product__content ul li {
    color: #FFFFFF;
}

[data-theme="dark"] .browse__area .product__card .product--location {
    color: #FFFFFF;
}

[data-theme="dark"] .browse__area .product__card .product__price {
    color: #FFFFFF;
}

[data-theme="dark"] .browse__area .product__card .product__price p {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .browse__area .product__card .product__content h6 {
    color: #FFFFFF;
}

[data-theme="dark"] .browse__area .product__card .product__content h6 a {
    color: #FFFFFF;
}

[data-theme="dark"] .browse__area .product__card .product__content h6 a:hover {
    color: hsl(var(--base));
}

/* ========================= Section Product Card (Non-Column) - White Text Fix End ======================== */

/* ========================= User Dashboard Equipment Table - Text Color Fix Start ======================== */
/* Fix: In Light Mode, table text should be dark (black). In Dark Mode, table text should be white. */

/* Light Mode - Table text dark */
.dashboard__table .table thead th {
    color: #000000;
}

.dashboard__table .table tbody tr td {
    color: #000000;
}

.dashboard__table .table tbody tr td a.table--item {
    color: #000000;
}

.dashboard__table .table tbody tr td a.table--item:hover {
    color: hsl(var(--base));
}

.dashboard__table .table tbody tr td a.table--item img {
    border-color: rgba(0, 0, 0, 0.2);
}

.dashboard__table .table tbody tr td .badge {
    color: #000000;
}

.dashboard__table .table tbody tr td .btn {
    color: #000000;
}

.dashboard__table .table tbody tr td .btn--info {
    color: #000000;
}

.dashboard__table .table tbody tr td .btn--danger {
    color: #000000;
}

.dashboard__table .table tbody tr td .btn--base {
    color: #000000;
}

/* Dark Mode - Table text white */
[data-theme="dark"] .dashboard__table .table thead th {
    color: #FFFFFF;
}

[data-theme="dark"] .dashboard__table .table tbody tr td {
    color: #FFFFFF;
}

[data-theme="dark"] .dashboard__table .table tbody tr td a.table--item {
    color: #FFFFFF;
}

[data-theme="dark"] .dashboard__table .table tbody tr td a.table--item:hover {
    color: hsl(var(--base));
}

[data-theme="dark"] .dashboard__table .table tbody tr td a.table--item img {
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .dashboard__table .table tbody tr td .badge {
    color: #FFFFFF;
}

[data-theme="dark"] .dashboard__table .table tbody tr td .btn {
    color: #FFFFFF;
}

[data-theme="dark"] .dashboard__table .table tbody tr td .btn--info {
    color: #FFFFFF;
}

[data-theme="dark"] .dashboard__table .table tbody tr td .btn--danger {
    color: #FFFFFF;
}

[data-theme="dark"] .dashboard__table .table tbody tr td .btn--base {
    color: #FFFFFF;
}

/* ========================= User Dashboard Equipment Table - Text Color Fix End ======================== */

/* ========================= Equipment Detail Card - Mobile Responsive Fixes Start ======================== */

/* Fix sidebar sticky positioning on mobile - remove sticky so it flows naturally */
@media screen and (max-width: 991px) {
    .product__sidebar {
        position: static !important;
        top: auto !important;
    }
    
    /* Ensure the main grid stacks properly */
    .pd__main {
        gap: 16px;
    }
    
    /* Equipment info card (booking card) - dark green background in light mode on mobile */
    .product__top.card {
        background-color: hsl(var(--base-h), var(--base-s), 25%);
    }
    
    /* Owner card - dark green background in light mode on mobile */
    .product__owner.card {
        background-color: hsl(var(--base-h), var(--base-s), 25%);
    }
    
    /* Dark mode - revert to card background for both cards */
    [data-theme="dark"] .product__top.card,
    [data-theme="dark"] .product__owner.card {
        background-color: var(--bg-card);
    }
    
    /* Ensure text inside product__top.card is white in light mode */
    .product__top.card .product__order h4 {
        color: #FFFFFF;
    }
    
    .product__top.card .product__order p {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .product__top.card .date-tab .label {
        color: #FFFFFF;
    }
    
    .product__top.card .date-tab .selected-date {
        color: rgba(255, 255, 255, 0.8);
    }
    
    /* Dark mode - revert text colors */
    [data-theme="dark"] .product__top.card .product__order h4 {
        color: #FFFFFF;
    }
    
    [data-theme="dark"] .product__top.card .product__order p {
        color: rgba(255, 255, 255, 0.7);
    }
    
    [data-theme="dark"] .product__top.card .date-tab .label {
        color: #FFFFFF;
    }
    
    [data-theme="dark"] .product__top.card .date-tab .selected-date {
        color: rgba(255, 255, 255, 0.8);
    }
    
    /* Owner card text colors in light mode */
    .product__owner.card .owner__info h4 {
        color: #FFFFFF;
    }
    
    .product__owner.card .owner__info h4 a {
        color: #FFFFFF;
    }
    
    .product__owner.card .owner__info h4 a:hover {
        color: hsl(var(--base));
    }
    
    .product__owner.card .owner__info p {
        color: rgba(255, 255, 255, 0.7);
    }
    
    /* Dark mode - revert owner card text */
    [data-theme="dark"] .product__owner.card .owner__info h4 {
        color: #FFFFFF;
    }
    
    [data-theme="dark"] .product__owner.card .owner__info h4 a {
        color: #FFFFFF;
    }
    
    [data-theme="dark"] .product__owner.card .owner__info h4 a:hover {
        color: hsl(var(--base));
    }
    
    [data-theme="dark"] .product__owner.card .owner__info p {
        color: rgba(255, 255, 255, 0.7);
    }
    
    /* Fix product navigation items spacing on mobile */
    .product__navigate ul {
        gap: 8px 12px;
        margin: 16px 0;
    }
    
    .product__navigate ul li {
        font-size: 13px;
    }
    
    /* Fix product description heading size on mobile */
    .product__desc h3 {
        font-size: 22px;
    }
    
    /* Fix review section layout */
    .review__total {
        padding: 20px 16px;
    }
    
    .review__total h5 span {
        font-size: 26px;
    }
    
    .review__total .star__rating li {
        font-size: 18px;
    }
    
    /* Fix previous review cards */
    .previous__review.card.p-3 {
        padding: 16px !important;
    }
    
    .previous__review__topbar p {
        font-size: 20px;
    }
    
    /* Fix owner info section */
    .owner__info img {
        width: 46px;
        height: 46px;
    }
    
    .owner__info h4 {
        font-size: 17px;
    }
    
    .owner__info p {
        font-size: 13px;
    }
    
    /* Fix product order section */
    .product__order {
        padding: 20px 16px;
        margin-top: 16px;
    }
    
    .product__order h4 {
        font-size: 24px;
    }
    
    .product__order p {
        font-size: 14px;
    }
    
    .product__order .btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 15px;
    }
    
    /* Fix date selection tabs */
    .date-selection-tabs {
        max-width: 100%;
        margin: 16px 0;
        padding: 5px;
        border-radius: 40px;
    }
    
    .date-tab .label {
        font-size: 13px;
    }
    
    .date-tab .selected-date {
        font-size: 11px;
    }
    
    /* Fix product calendar padding */
    .product__calendar {
        padding: 8px;
    }
    
    /* Fix product top card */
    .product__top.card {
        padding: 0 !important;
    }
    
    /* Fix product slider images */
    .product__slider .swiper-slide img {
        width: 100%;
        height: auto;
        object-fit: cover;
        max-height: 350px;
    }
    
    /* Fix product thumb slider */
    .productThumbSlider .swiper-slide img {
        max-height: 80px;
        object-fit: cover;
    }
    
    /* Fix product wrap to prevent overflow */
    .product__wrap {
        min-width: 0;
        overflow: hidden;
    }
    
    /* Fix description content overflow */
    .product__desc.wyg {
        overflow: hidden;
    }
    
    .product__desc.wyg p,
    .product__desc.wyg ul,
    .product__desc.wyg ol {
        margin-bottom: 20px;
    }
    
    /* Fix no data section */
    .no__data svg {
        width: 48px;
        height: 48px;
    }
    
    .no__data p {
        font-size: 14px;
    }
}

/* Extra small devices (320px - 480px) */
@media screen and (max-width: 575px) {
    /* Fix product navigation - stack items properly */
    .product__navigate ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    /* Fix product order price */
    .product__order h4 {
        font-size: 22px;
    }
    
    /* Fix owner info - prevent text overflow */
    .owner__info {
        gap: 8px;
    }
    
    .owner__info img {
        width: 40px;
        height: 40px;
    }
    
    .owner__info h4 {
        font-size: 15px;
        word-break: break-word;
    }
    
    .owner__info h4 a {
        word-break: break-word;
    }
    
    .owner__info p {
        font-size: 12px;
    }
    
    /* Fix review total section */
    .review__total {
        padding: 16px 12px;
        margin-bottom: 16px;
    }
    
    .review__total h4 {
        font-size: 18px;
    }
    
    .review__total h5 {
        font-size: 14px;
    }
    
    .review__total h5 span {
        font-size: 22px;
    }
    
    .review__total .star__rating li {
        font-size: 16px;
    }
    
    /* Fix previous review */
    .previous__review.card.p-3 {
        padding: 12px !important;
    }
    
    .previous__review__topbar p {
        font-size: 18px;
    }
    
    .previous__review__topbar .star__rating li {
        font-size: 15px;
    }
    
    .previous__review > ul {
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .previous__review > ul li {
        font-size: 13px;
    }
    
    /* Fix product description */
    .product__desc h3 {
        font-size: 20px;
    }
    
    .product__desc.wyg p {
        font-size: 14px;
    }
    
    .product__desc.wyg ul li,
    .product__desc.wyg ol li {
        font-size: 14px;
    }
    
    /* Fix product order button */
    .product__order .btn {
        font-size: 14px;
        padding: 10px 16px;
    }
    
    /* Fix date selection tabs */
    .date-selection-tabs {
        padding: 4px;
        gap: 3px;
    }
    
    .date-tab .label {
        font-size: 12px;
        margin-bottom: 2px;
    }
    
    .date-tab .selected-date {
        font-size: 10px;
    }
    
    /* Fix product calendar */
    .product__calendar {
        padding: 6px;
    }
    
    /* Fix product order padding */
    .product__order {
        padding: 16px 12px;
    }
    
    /* Fix product slider images for very small screens */
    .product__slider .swiper-slide img {
        max-height: 280px;
    }
    
    /* Fix thumb slider */
    .productThumbSlider .swiper-slide img {
        max-height: 60px;
    }
    
    /* Fix product slider navigation buttons */
    .product__next {
        right: 10px;
    }
    
    .product__prev {
        left: 10px;
    }
    
    /* Fix review section row gap */
    .product__review .row.g-4 {
        --bs-gutter-y: 1rem;
    }
    
    /* Fix product__left sticky on mobile */
    .product__left {
        position: static !important;
        top: auto !important;
    }
}

/* Very small screens (320px) */
@media screen and (max-width: 360px) {
    .product__order h4 {
        font-size: 20px;
    }
    
    .owner__info h4 {
        font-size: 14px;
    }
    
    .owner__info img {
        width: 36px;
        height: 36px;
    }
    
    .review__total h5 span {
        font-size: 20px;
    }
    
    .product__desc h3 {
        font-size: 18px;
    }
    
    .date-tab .label {
        font-size: 11px;
    }
    
    .date-tab .selected-date {
        font-size: 9px;
    }
    
    .product__order .btn {
        font-size: 13px;
        padding: 8px 14px;
    }
    
    .product__slider .swiper-slide img {
        max-height: 240px;
    }
}

/* Fix flatpickr calendar on mobile - ensure it fits within the card */
@media screen and (max-width: 575px) {
    .flatpickr-calendar {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .flatpickr-calendar.inline {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .flatpickr-days {
        width: 100% !important;
    }
    
    .dayContainer {
        width: 100% !important;
        min-width: auto !important;
        max-width: 100% !important;
    }
    
    .flatpickr-day {
        max-width: 100% !important;
    }
    
    .flatpickr-months {
        width: 100% !important;
    }
    
    .flatpickr-current-month {
        width: 100% !important;
    }
}

/* Ensure product sidebar card has proper padding on mobile */
@media screen and (max-width: 991px) {
    .product__sidebar .card {
        padding: 0 !important;
    }
    
    .product__sidebar .product__owner.card {
        padding: 16px !important;
    }
}

/* Fix product__top card border radius on mobile */
@media screen and (max-width: 575px) {
    .product__top.card {
        border-radius: 12px;
    }
    
    .product__owner.card {
        border-radius: 12px;
    }
}

/* ========================= Equipment Detail Card - Mobile Responsive Fixes End ======================== */

/* ========================= Destructive Action Buttons - Dark Muted Orange Start ======================== */
/* Replace bright red with dark muted orange (#C56A0A) for destructive action buttons only.
   Error messages, validation, alerts, and badges remain red. */

/* Base button */
.btn--danger {
    background-color: #C56A0A !important;
    border-color: #C56A0A !important;
    color: #FFFFFF !important;
}

.btn--danger:hover,
.btn--danger:focus,
.btn--danger:focus-visible {
    background-color: #A05508 !important;
    border-color: #A05508 !important;
    color: #FFFFFF !important;
}

/* Outline variant */
.btn-outline--danger {
    color: #C56A0A !important;
    border-color: #C56A0A !important;
    background-color: transparent !important;
}

.btn-outline--danger:hover,
.btn-outline--danger:focus,
.btn-outline--danger:focus-visible {
    background-color: #C56A0A !important;
    color: #FFFFFF !important;
}

/* Icons inside destructive buttons */
.btn--danger i,
.btn--danger svg,
.btn-outline--danger i,
.btn-outline--danger svg {
    color: #FFFFFF !important;
}

/* Remove/delete helper buttons */
.remove-btn,
.removeFormData,
.removeHeader,
.removeBody,
.deleteKey,
.rejectBtn {
    background-color: #C56A0A !important;
    border-color: #C56A0A !important;
    color: #FFFFFF !important;
}

.remove-btn:hover,
.removeFormData:hover,
.removeHeader:hover,
.removeBody:hover,
.deleteKey:hover,
.rejectBtn:hover {
    background-color: #A05508 !important;
    border-color: #A05508 !important;
    color: #FFFFFF !important;
}

/* Close button with danger styling */
.close.btn--danger {
    background-color: #C56A0A !important;
    border-color: #C56A0A !important;
    color: #FFFFFF !important;
}

.close.btn--danger:hover {
    background-color: #A05508 !important;
}

/* Configuration currency remove button */
.btn--danger.configuration-currency {
    background-color: #C56A0A !important;
    border-color: #C56A0A !important;
    color: #FFFFFF !important;
}

.btn--danger.configuration-currency:hover {
    background-color: #A05508 !important;
}

/* Dark mode overrides */
[data-theme="dark"] .btn--danger {
    background-color: #C56A0A !important;
    border-color: #C56A0A !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn--danger:hover {
    background-color: #A05508 !important;
}

[data-theme="dark"] .btn-outline--danger {
    color: #C56A0A !important;
    border-color: #C56A0A !important;
}

[data-theme="dark"] .btn-outline--danger:hover {
    background-color: #C56A0A !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .remove-btn,
[data-theme="dark"] .removeFormData,
[data-theme="dark"] .removeHeader,
[data-theme="dark"] .removeBody,
[data-theme="dark"] .deleteKey,
[data-theme="dark"] .rejectBtn,
[data-theme="dark"] .close.btn--danger {
    background-color: #C56A0A !important;
    border-color: #C56A0A !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .remove-btn:hover,
[data-theme="dark"] .removeFormData:hover,
[data-theme="dark"] .removeHeader:hover,
[data-theme="dark"] .removeBody:hover,
[data-theme="dark"] .deleteKey:hover,
[data-theme="dark"] .rejectBtn:hover,
[data-theme="dark"] .close.btn--danger:hover {
    background-color: #A05508 !important;
}
/* ========================= Destructive Action Buttons - Dark Muted Orange End ======================== */

/* ========================= Table Borders in Dark Mode - White Start ======================== */
[data-theme="dark"] .dashboard__table .table,
[data-theme="dark"] .dashboard__table .table thead th,
[data-theme="dark"] .dashboard__table .table tbody tr td,
[data-theme="dark"] .dashboard__table .table tbody tr {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .table--responsive--lg tbody tr {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .dashboard__table .table tbody tr:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/* ========================= Table Borders in Dark Mode - White End ======================== */

/* ========================= Booking Details Page - Dark Mode Borders & Text Fix Start ======================== */
/* Fix all borders and text in booking details page to be white in dark mode */

/* Card borders */
[data-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Booking info cards (bg--white) - fix borders and text */
[data-theme="dark"] .card.bg--white {
    background-color: var(--bg-card) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .card.bg--white p,
[data-theme="dark"] .card.bg--white h6 {
    color: #FFFFFF !important;
}

/* Booking item card */
[data-theme="dark"] .booking--item {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .booking--item h6 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .booking--item p {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Owner info section */
[data-theme="dark"] .owner--wrap h6 {
    color: #FFFFFF !important;
}

[data-theme="dark"] .owner--info p {
    color: rgba(255, 255, 255, 0.75) !important;
}

[data-theme="dark"] .owner--info p strong {
    color: #FFFFFF !important;
}

/* Progress bar container */
[data-theme="dark"] .progress-container .progress-step {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .progress-container small {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Messages container border */
[data-theme="dark"] #messagesContainer {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background-color: var(--bg-card) !important;
}

/* Message input group */
[data-theme="dark"] #messageForm .form-control {
    background-color: var(--bg-input) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] #messageForm .input-group-text {
    background-color: hsl(var(--base)) !important;
    border-color: hsl(var(--base)) !important;
    color: #FFFFFF !important;
}

/* Action buttons container */
[data-theme="dark"] .action__btn .btn {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Status cards (alerts) - fix borders */
[data-theme="dark"] .status-card.alert {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .status-card.alert p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Card title (Booking number) */
[data-theme="dark"] .card h4 {
    color: #FFFFFF !important;
}

/* Card body text */
[data-theme="dark"] .card-body h5 {
    color: #FFFFFF !important;
}

/* Address textarea */
[data-theme="dark"] textarea[name="address"] {
    background-color: var(--bg-input) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
}

/* General card text */
[data-theme="dark"] .card-body p,
[data-theme="dark"] .card-body h6,
[data-theme="dark"] .card-body small {
    color: #FFFFFF !important;
}

/* Fix any remaining borders in the booking details page */
[data-theme="dark"] .border {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .border-top {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .border-start {
    border-left-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .border-end {
    border-right-color: rgba(255, 255, 255, 0.2) !important;
}
/* ========================= Booking Details Page - Dark Mode Borders & Text Fix End ======================== */

/* Keep responsive transaction tables within the mobile viewport in both LTR and RTL. */
@media screen and (max-width: 1199px) {
    table.table--responsive--lg,
    table.table--responsive--lg tbody {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
    }

    .table--responsive--lg tbody tr td,
    .table--responsive--lg tbody tr td > * {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }
}