/* ===========================================
   Material Design Dark Theme
   =========================================== */

:root {
    /* Material Design Dark Theme Colors */
    --md-background: #121212;
    --md-surface: #1E1E1E;
    --md-surface-variant: #2D2D2D;
    --md-surface-light: #373737;  /* »õ·Î¿î ¹àÀº ȸ»ö Ãß°¡ */
    --md-primary: #BB86FC;
    --md-primary-variant: #3700B3;
    --md-secondary: #03DAC6;
    --md-on-background: rgba(255, 255, 255, 0.87);
    --md-on-surface: rgba(255, 255, 255, 0.87);
    --md-on-surface-medium: rgba(255, 255, 255, 0.60);
    --md-on-surface-disabled: rgba(255, 255, 255, 0.38);
    --md-error: #CF6679;
    --md-divider: rgba(255, 255, 255, 0.12);
    --md-elevation-1: rgba(255, 255, 255, 0.05);
    --md-elevation-2: rgba(255, 255, 255, 0.07);
    --md-elevation-3: rgba(255, 255, 255, 0.08);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--md-surface-variant) !important;
    color: var(--md-on-background) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Links */
a, .btn-link {
    color: var(--md-primary);
}

a:hover {
    color: var(--md-secondary);
}

/* Buttons */
.btn-primary {
    color: #000;
    background-color: var(--md-primary);
    border-color: var(--md-primary);
}

.btn-primary:hover {
    background-color: #ce9fff;
    border-color: #ce9fff;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--md-surface), 0 0 0 0.25rem var(--md-primary);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--md-secondary);
}

.invalid {
    outline: 1px solid var(--md-error);
}

.validation-message {
    color: var(--md-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ===========================================
   Site Container - Dark Theme
   =========================================== */
.site,
#page,
.site-content,
#content,
.content-area,
#primary {
    background-color: var(--md-background) !important;
}

/* ===========================================
   Site Header - Dark Theme
   =========================================== */
.site-header,
#masthead {
    background-color: var(--md-surface-variant) !important;
    border-bottom: 1px solid var(--md-divider);
}

.inside-header {
    background-color: var(--md-surface-variant) !important;
}

.header-widget,
.header-widget .textwidget,
.header-widget .custom-html-widget {
    background-color: transparent !important;
    color: var(--md-on-surface) !important;
}

.header-widget p,
.header-widget span,
.header-widget strong {
    color: var(--md-on-surface) !important;
}

.header-widget a {
    color: var(--md-primary) !important;
}

.header-widget a:hover {
    color: var(--md-secondary) !important;
}

/* ===========================================
   Navigation - Dark Theme (FIXED)
   =========================================== */
.main-navigation,
#site-navigation,
#mobile-header,
.mobile-header-navigation {
    background-color: var(--md-surface-variant) !important;
    border-bottom: 1px solid var(--md-divider);
}

.inside-navigation {
    background-color: transparent !important;
}

/* Hide the duplicate menu-toggle button in site-navigation */
#site-navigation button.menu-toggle {
    display: none !important;
}

/* Hide #site-navigation on mobile (show only #mobile-header) */
@media (max-width: 768px) {
    #site-navigation {
        display: none !important;
    }
}

/* Hide #mobile-header on desktop (show only #site-navigation) */
@media (min-width: 769px) {
    #mobile-header {
        display: none !important;
    }
}

/* Main navigation links */
.main-nav ul li a,
.menu a,
.main-navigation a,
.main-navigation .main-nav ul li a {
    color: var(--md-on-surface) !important;
    background-color: transparent !important;
}

/* Hover state for navigation - NO white background */
.main-nav ul li a:hover,
.menu a:hover,
.main-navigation a:hover,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li:focus > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
    color: var(--md-primary) !important;
    background-color: transparent !important;
}

/* Current menu item - NO white background */
.main-navigation .main-nav ul li[class*="current-menu-"] > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a,
.current-menu-item > a,
.current_page_item > a {
    color: var(--md-primary) !important;
    background-color: transparent !important;
}

/* Sub-menu dropdown */
.sub-menu,
.main-navigation ul ul,
.main-navigation .main-nav ul ul {
    background-color: var(--md-surface) !important;
    border: 1px solid var(--md-divider) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

.sub-menu li a,
.main-navigation .main-nav ul ul li a {
    color: var(--md-on-surface) !important;
    background-color: transparent !important;
}

.sub-menu li a:hover,
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul ul li.sfHover:not([class*="current-menu-"]) > a {
    background-color: var(--md-elevation-2) !important;
    color: var(--md-primary) !important;
}

.main-navigation .main-nav ul ul li[class*="current-menu-"] > a {
    color: var(--md-primary) !important;
    background-color: var(--md-elevation-2) !important;
}

/* Menu bar items hover */
.main-navigation .menu-bar-item:hover > a,
.main-navigation .menu-bar-item.sfHover > a {
    background-color: transparent !important;
    color: var(--md-primary) !important;
}

/* Social Icons */
.menu-social-icons-container a,
.social-links a {
    color: var(--md-on-surface-medium) !important;
}

.menu-social-icons-container a:hover,
.social-links a:hover {
    color: var(--md-primary) !important;
}

/* ===========================================
   Images with White Background - Dark Theme Fix
   =========================================== */

/* Insurance/Partner logos container - add gap between items */
.gallery-images ul,
.brands-wrapper .gallery-images ul {
    gap: 15px !important;
    padding: 10px 20px !important;
}

/* Insurance/Partner logos - add dark background and rounded corners */
.gallery-images ul li,
.brands-wrapper .gallery-images ul li {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    /* flex ·¹À̾ƿôÀ» À¯ÁöÇϸ鼭 ³»ºÎ ¿©¹é¸¸ Á¶Àý */
    box-sizing: border-box !important;
    /* gapÀ» °í·ÁÇÑ flex-basis °è»ê: (100% - gap * 5) / 6 ? calc·Î °è»ê */
    flex: 0 0 auto !important;
    flex-basis: calc(16.6666667% - 12.5px) !important;
    max-width: calc(16.6666667% - 12.5px) !important;
    padding: 15px 10px !important;
    margin: 0 !important;
}

/* ¸ð¹ÙÀÏ ¹ÝÀÀÇü - 768px ÀÌÇÏ¿¡¼­ 2¿­·Î Ç¥½Ã */
@media (max-width: 768px) {
    .gallery-images ul li,
    .brands-wrapper .gallery-images ul li {
        flex-basis: calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

/* ÅÂºí¸´ ¹ÝÀÀÇü - 1024px ÀÌÇÏ¿¡¼­ 4¿­·Î Ç¥½Ã */
@media (max-width: 1024px) and (min-width: 769px) {
    .gallery-images ul li,
    .brands-wrapper .gallery-images ul li {
        flex-basis: calc(25% - 12px) !important;
        max-width: calc(25% - 12px) !important;
    }
}

/* Service card images - add subtle dark overlay or background */
.card-wrapper .card .img-wrapper {
    background-color: var(--md-surface) !important;
    border-radius: 50% !important;
    overflow: hidden;
}

.card-wrapper .card .img-wrapper img:not(.style-svg) {
    border-radius: 50%;
}

/* Circle background behind card images */
.card-wrapper .card .img-wrapper .bg-circle {
    background-color: var(--md-surface-variant) !important;
}

/* Main content images with white backgrounds - add container styling */
.img-wrapper img:not(.style-svg),
.image-section img {
    border-radius: 8px;
}

/* One column section images (yoga poses etc) */
.one_column_text_image .img-wrapper img {
    /* Keep original, these usually have transparent or acceptable backgrounds */
}

/* ===========================================
   Main Content Area - Dark Theme
   =========================================== */
main,
#main,
.site-main,
.entry-content,
article,
.hentry {
    background-color: var(--md-background) !important;
    color: var(--md-on-background) !important;
}

.inside-article,
.post-content {
    background-color: var(--md-background) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--md-on-background) !important;
}

p {
    color: var(--md-on-background);
}

/* ===========================================
   Page Sections - Dark Theme (CRITICAL)
   =========================================== */
.page-section {
    background-color: var(--md-background) !important;
}

/* Hero Banner Section - ¹àÀº ȸ»öÀ¸·Î º¯°æ */
.full_width_banner,
.hero-banner,
#hero-banner {
    background-color: var(--md-surface-light) !important;
}

.banner-contents-wrapper {
    background-color: var(--md-surface-light) !important;
}

.banner-contents,
.banner-header,
.banner-header span {
    color: var(--md-on-surface) !important;
}

/* Two Column Section */
.two_column_text_image,
.section-wrapper,
.image-section,
.content-section,
.item-content {
    background-color: var(--md-background) !important;
}

.content-wrapper {
    background-color: transparent !important;
    color: var(--md-on-background) !important;
}

.content-wrapper p,
.content-wrapper li {
    color: var(--md-on-background) !important;
}

.section-header,
.section-header span {
    color: var(--md-on-surface) !important;
}

/* Services Slider Section */
.services_slider {
    background-color: var(--md-background) !important;
}

.services-slider {
    background-color: transparent !important;
}

/* Service Cards - Dark Theme */
.card-wrapper .card {
    background-color: var(--md-surface) !important;
    border: 1px solid var(--md-divider) !important;
}

.card-wrapper .card .title {
    color: var(--md-on-surface) !important;
}

.card-wrapper .card .excerpt {
    color: var(--md-on-surface-medium) !important;
}

.card-wrapper .card .btn-read-more,
.card-wrapper .card .btn-white {
    background-color: var(--md-surface-variant) !important;
    color: var(--md-on-surface) !important;
    border: 1px solid var(--md-divider) !important;
}

.card-wrapper .card .btn-read-more:hover,
.card-wrapper .card .btn-white:hover {
    background-color: var(--md-primary) !important;
    color: #000 !important;
}

/* One Column Text Image Section - ¹àÀº ȸ»öÀ¸·Î º¯°æ */
.one_column_text_image {
    background-color: var(--md-surface-light) !important;
}

/* Brands/Gallery Section */
.brands_gallery_images,
.brands-wrapper {
    background-color: var(--md-background) !important;
}

.gallery-images {
    background-color: transparent !important;
}

/* Contact Section - ¹àÀº ȸ»öÀ¸·Î º¯°æ */
.two_column_contact_details {
    background-color: var(--md-surface-light) !important;
}

.two_column_contact_details .left-content,
.two_column_contact_details .right-content {
    background-color: transparent !important;
}

.text-content,
.contact-details {
    color: var(--md-on-surface) !important;
}

.contact-details ul li p,
.contact-details ul li span {
    color: var(--md-on-surface) !important;
}

.contact-details ul li a {
    color: var(--md-primary) !important;
}

/* Form Wrapper - Contact Section°ú °°Àº ¹è°æ»öÀ¸·Î ÅëÀÏ */
.form-wrapper,
.gform_wrapper {
    background-color: transparent !important;
    border-radius: 8px;
    padding: 20px;
}

.gform_title {
    color: var(--md-on-surface) !important;
}

.gform_fields,
.gfield {
    background-color: transparent !important;
}

.ginput_container input,
.ginput_container textarea {
    background-color: var(--md-surface-variant) !important;
    border: 1px solid var(--md-divider) !important;
    color: var(--md-on-surface) !important;
}

.ginput_container input:focus,
.ginput_container textarea:focus {
    border-color: var(--md-primary) !important;
}

/* Wave Dividers - make them blend with dark theme */
.wave img {
    /*filter: brightness(0.3) !important;*/

}

/* Wave top/bottom positioning */
.wave.top {
    margin-bottom: -1px;
}

.wave.bottom {
    margin-top: -1px;
}

/* ===========================================
   WYSIWYG Editor Section
   =========================================== */
.wysiwyg_editor {
    background-color: var(--md-background) !important;
}

.wysiwyg_editor .section-content {
    background-color: transparent !important;
    color: var(--md-on-background) !important;
}

/* ===========================================
   Footer - Dark Theme
   =========================================== */
.site-footer,
.site-info,
footer {
    background-color: var(--md-surface) !important;
    border-top: 1px solid var(--md-divider);
    color: var(--md-on-surface) !important;
}

.inside-site-info {
    background-color: transparent !important;
}

.footer-bar {
    background-color: transparent !important;
}

.footer-bar a,
.site-footer a,
.site-info a {
    color: var(--md-primary) !important;
}

.footer-bar a:hover,
.site-footer a:hover,
.site-info a:hover {
    color: var(--md-secondary) !important;
}

.copyright-bar {
    color: var(--md-on-surface-medium) !important;
}

.widget-title {
    color: var(--md-on-surface) !important;
}

/* ===========================================
   Widgets - Dark Theme
   =========================================== */
.widget,
aside {
    background-color: transparent !important;
    color: var(--md-on-surface) !important;
}

.slideout-widget {
    background-color: transparent !important;
}

/* ===========================================
   Cards and Surfaces - Dark Theme
   =========================================== */
.card,
.panel,
.box {
    background-color: var(--md-surface) !important;
    border: 1px solid var(--md-divider) !important;
    color: var (--md-on-surface) !important;
}

/* ===========================================
   Forms - Dark Theme
   =========================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
    background-color: var(--md-surface) !important;
    border: 1px solid var(--md-divider) !important;
    color: var(--md-on-surface) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--md-primary) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(187, 134, 252, 0.2) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--md-on-surface-disabled) !important;
}

label {
    color: var(--md-on-surface) !important;
}

/* ===========================================
   Buttons - Dark Theme
   =========================================== */
button:not(.mud-icon-btn):not(.mud-button-root),
.button,
input[type="submit"],
input[type="button"],
.btn-green {
    background-color: var(--md-primary) !important;
    color: #000 !important;
    border: none !important;
    transition: all 0.2s ease;
}

button:not(.mud-icon-btn):not(.mud-button-root):hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn-green:hover {
    background-color: #ce9fff !important;
    box-shadow: 0 2px 8px rgba(187, 134, 252, 0.3);
}

/* Book Appointment Button */
.textwidget a[href*="book-appointment"],
a.btn-green {
    background-color: var(--md-primary) !important;
    color: #000 !important;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.textwidget a[href*="book-appointment"]:hover,
a.btn-green:hover {
    background-color: #ce9fff !important;
    color: #000 !important;
}

/* ===========================================
   MudIconButton (Hamburger Menu) - Transparent Background
   =========================================== */
.mud-icon-btn,
.mud-icon-btn.mud-ripple,
.menu-toggle.mud-icon-btn,
button.mud-icon-btn,
.mud-button-root.mud-icon-btn {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.mud-icon-btn:hover,
.mud-button-root.mud-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.mud-icon-btn .mud-icon-root,
.mud-icon-btn svg {
    color: var(--md-on-surface) !important;
    fill: var(--md-on-surface) !important;
}

/* ===========================================
   MudDrawer - Dark Theme
   =========================================== */
.mud-drawer {
    background-color: var(--md-surface) !important;
}

.mud-drawer-content {
    background-color: var(--md-surface) !important;
}

/* ===========================================
   MudBlazor Layout - Dark Theme
   =========================================== */
.mud-layout,
.mud-main-content {
    background-color: var(--md-surface-variant) !important;
}

/* ===========================================
   Slideout Menu - Dark Theme
   =========================================== */
.slideout-navigation {
    background-color: var(--md-surface) !important;
}

.slideout-navigation a {
    color: var(--md-on-surface) !important;
}

.slideout-navigation a:hover {
    color: var(--md-primary) !important;
}

.slideout-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ===========================================
   Shopping Cart - Dark Theme
   =========================================== */
.cart-contents,
.shopping-cart {
    color: var(--md-on-surface) !important;
}

.number-of-items {
    background-color: var(--md-primary) !important;
    color: #000 !important;
}

/* WooCommerce Cart */
.woocommerce,
.woocommerce-cart-form,
.cart-collaterals,
.cart_totals {
    background-color: transparent !important;
}

.shop_table {
    background-color: var(--md-surface) !important;
}

.shop_table th,
.shop_table td {
    background-color: var(--md-surface) !important;
    color: var(--md-on-surface) !important;
    border-color: var(--md-divider) !important;
}

/* ===========================================
   Tables - Dark Theme
   =========================================== */
table {
    background-color: var(--md-surface) !important;
    border-color: var(--md-divider) !important;
}

th {
    background-color: var(--md-surface-variant) !important;
    color: var(--md-on-surface) !important;
    border-color: var(--md-divider) !important;
}

td {
    color: var(--md-on-surface) !important;
    border-color: var(--md-divider) !important;
}

tr:hover {
    background-color: var(--md-elevation-1) !important;
}

/* ===========================================
   Scrollbar - Dark Theme
   =========================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--md-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--md-surface-variant);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* ===========================================
   Grid Container - Dark Theme
   =========================================== */
.grid-container {
    background-color: transparent !important;
}

/* ===========================================
   Page Specific Overrides
   =========================================== */
.page-hero,
.hero-section {
    background-color: var(--md-surface) !important;
}

/* Pricing page */
.pricing-table,
.price-box {
    background-color: var(--md-surface) !important;
    border: 1px solid var(--md-divider) !important;
}

/* ===========================================
   Pricing Page - Light Background Cards
   =========================================== */
.services_pricing .pricing .price-details {
    color: #212121 !important;
}

.services_pricing .pricing .price-details .price-title {
    color: #212121 !important;
}

.services_pricing .pricing .price-details .price-description {
    color: #333333 !important;
}

.services_pricing .pricing .price-details .price-list ul li {
    color: #212121 !important;
}

.services_pricing .pricing .price-details .price-list ul li span {
    color: #212121 !important;
}

.services_pricing .pricing .price-details .price-list ul li span:last-child {
    color: #d35afb !important; 
}

/* ===========================================
   Gift Vouchers Page - Light Background Cards
   =========================================== */
#wc-column-container .products .product {
    color: #212121 !important;
}

#wc-column-container .products .product .woocommerce-loop-product__title {
    color: #212121 !important;
}

#wc-column-container .products .product .woocommerce-product-details__short-description {
    color: #333333 !important;
}

#wc-column-container .products .product .woocommerce-LoopProduct-link {
    color: #212121 !important;
}

#wc-column-container .products .product .add_to_cart_button,
#wc-column-container .products .product .button {
    background-color: #bb86fc !important;
    color: #fff !important;
}

#wc-column-container .products .product .add_to_cart_button:hover,
#wc-column-container .products .product .button:hover {
    background-color: #d39bfb !important;
    color: #fff !important;
}

/* ===========================================
   History Form Page - Light Background
   =========================================== */
.page-body {
    background-color: #fff !important;
    color: #333 !important;
}

.page-body h1 {
    color: #212121 !important;
}

.page-body h2 {
    color: #7baf21 !important;
}

.page-body h3 {
    color: #212121 !important;
}

.page-body p {
    color: #444 !important;
}

.page-body label {
    color: #333 !important;
}

.page-body input[type="text"],
.page-body input[type="email"],
.page-body input[type="tel"],
.page-body select {
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
}

.page-body input::placeholder {
    color: #999 !important;
}

.page-body .condition-list {
    background: #f8f8f8 !important;
    color: #333 !important;
}

.page-body .condition-list label {
    color: #333 !important;
}

.page-body .disclaimer {
    color: #333 !important;
}

.page-body .disclaimer p {
    color: #444 !important;
}

.page-body .disclaimer strong {
    color: #212121 !important;
}

.page-body .submit-btn {
    background: #7baf21 !important;
    color: white !important;
}

.page-body .submit-btn:hover {
    background: #6ca018 !important;
}

/* ===========================================
   Selection - Dark Theme
   =========================================== */
::selection {
    background-color: var(--md-primary);
    color: #000;
}

::-moz-selection {
    background-color: var(--md-primary);
    color: #000;
}

/* ===========================================
   Breadcrumbs - Dark Theme
   =========================================== */
.breadcrumbs,
.rank-math-breadcrumb {
    color: var(--md-on-surface-medium) !important;
}

.breadcrumbs a,
.rank-math-breadcrumb a {
    color: var(--md-primary) !important;
}

/* ===========================================
   Map Address Section
   =========================================== */
.map-address {
    background-color: transparent !important;
}

.map-address iframe {
    border-radius: 8px;
}

/* ===========================================
   Service Page - Dark Theme
   =========================================== */
.service-page-content,
.service-page-content .content-wrapper,
.service-page-content .image-section,
.service-page-content .content-section {
    background-color: var(--md-background) !important;
}

.service-pricing {
    background-color: var(--md-surface) !important;
}

.service-pricing .wave {
    position: relative;
    z-index: 1;
}

.service-pricing .wave img {
    /*filter: brightness(0.2) !important;*/
}

.service-pricing .grid-container {
    background-color: transparent !important;
}

.service-pricing h2,
.service-pricing .section-header {
    color: var(--md-on-surface) !important;
}

.service-pricing table {
    background-color: var(--md-surface) !important;
}

.service-pricing table th,
.service-pricing table td {
    background-color: var(--md-surface) !important;
    color: var(--md-on-surface) !important;
    border-color: var(--md-divider) !important;
}