/* === MitrShopping Gray Theme (override all) === */

/* พื้นฐานทั้งหน้า */
:root {
    --bg: #f3f4f6; /* เทาอ่อน */
    --bg-2: #e5e7eb; /* เทาอ่อนขึ้นอีกนิด (แถบ/เส้น) */
    --panel: #e7e7e7; /* สีพื้นการ์ด/แถบ */
    --text: #333333; /* ตัวอักษรหลัก */
    --text-sub: #555555;
    --muted: #9ca3af; /* เทาอ่อนสำหรับเส้น/placeholder */
    --brand: #6b7280; /* ปุ่มหลัก = เทากลางหม่น */
    --brand-dark: #4b5563;
    --brand-contrast: #ffffff;
    --link: #4b5563; /* ลิงก์ */
    --link-hover: #374151;
    /* border radius/เส้น */
    --radius: 10px;
    --border: 1px solid #d1d5db;
}

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

/* ฟอนต์จาก _Layout.cshtml กำหนดไว้แล้ว ไม่ต้องซ้ำ */
* {
    color: inherit; /* ให้รับสีจาก body */
}

/* ลิงก์ */
a, a:visited {
    color: var(--link);
    text-decoration: none;
}

    a:hover, a:focus {
        color: var(--link-hover);
        text-decoration: underline;
    }

/* Navbar / Header */
.ec-header, .header-top, .ec-header-bottom, .sticky-nav {
    background: var(--panel) !important;
    border-bottom: var(--border);
}

    .ec-header a, .ec-main-menu a {
        color: var(--text) !important;
    }

/* เมนูหมวดหมู่ */
.ec-category-menu, .ec-category-content, .ec-category-toggle {
    background: var(--panel);
    border: var(--border);
    border-radius: var(--radius);
}

.ec-category-title {
    color: var(--text);
}

/* กล่อง/การ์ด/พาเนล */
.card,
.ec-side-cart,
.ec-popnews-box,
.footer-top,
.footer-bottom,
.footer-container,
.section-space-footer-p,
.ec-footer-widget,
.qty-product-cover,
.qty-nav-thumb,
.modal-content {
    background: var(--panel) !important;
    border: var(--border);
    border-radius: var(--radius);
    color: var(--text);
}

/* ปุ่ม */
.btn, .button, .ec-btn, .btn-primary, .btn-secondary {
    background: var(--brand) !important;
    border-color: var(--brand-dark) !important;
    color: var(--brand-contrast) !important;
}

    .btn:hover, .button:hover, .ec-btn:hover,
    .btn-primary:hover, .btn-secondary:hover {
        background: var(--brand-dark) !important;
    }

/* Input / Form */
input.form-control, select.form-control, textarea.form-control,
.form-control {
    background: #f8f8f8 !important;
    color: var(--text);
    border: var(--border) !important;
    border-radius: var(--radius);
}

    .form-control:focus {
        outline: none;
        box-shadow: none;
        border-color: #bfc6cf !important;
    }

/* ตาราง/เส้นแบ่ง */
hr, .table, .dropdown-menu, .ec-main-menu .sub-menu,
.ec-category-wrapper li, .ec-footer-links ul li {
    border-color: #d1d5db !important;
}

/* Dropdown / เมนูย้อย */
.dropdown-menu, .sub-menu, .sub-menu-child {
    background: var(--panel) !important;
    border: var(--border);
    border-radius: var(--radius);
}

    .dropdown-item, .sub-menu a {
        color: var(--text) !important;
    }

/* Side cart */
.ec-side-cart, .ec-side-cart-overlay {
    background: var(--panel) !important;
}

.ec-cart-title, .cart_title {
    color: var(--text);
}

/* Footer */
.ec-footer, .footer-container, .footer-top, .footer-bottom {
    background: var(--panel) !important;
    color: var(--text-sub);
}

    .ec-footer a {
        color: var(--link) !important;
    }

        .ec-footer a:hover {
            color: var(--link-hover) !important;
        }

/* ป้ายแจ้งเตือน (toast) ให้หม่นลง */
.addtocart_toast, .wishlist_toast {
    background: #2f2f2fcc !important;
    color: #fff !important;
}

/* ปรับสีไอคอน svg (ส่วนใหญ่เป็นไฟล์ svg ดำ/เทาอยู่แล้ว) */
.svg_img, .header_svg, .pro_svg, .search_svg {
    filter: grayscale(40%);
}

/* ปรับพื้นหลังแถบประกาศ/ส่วนย่อยให้กลืน */
.header-top, .footer-offer, .footer-off-msg {
    background: var(--panel) !important;
}

/* ลิงก์ active/เมนูเลือกอยู่ */
.ec-main-menu > ul > li > a:hover,
.ec-main-menu > ul > li > a:focus {
    color: var(--link-hover) !important;
    text-decoration: underline;
}

/* บริเวณค้นหา */
.ec-header-search .form-control {
    background: #f8f8f8 !important;
}

/* ปรับสีเส้น/จุด UI ย่อย ๆ */
.primary-color {
    color: var(--text) !important;
}

.text-upper {
    color: var(--text) !important;
}

/* ปุ่มปิด modal/กล่อง */
.btn-close, .ec-close {
    filter: grayscale(100%);
}

/* ป๊อปอัปคุกกี้ */
#cookie-policy.ec-popnews-box {
    background: var(--panel) !important;
    border-color: #bbb !important;
}

#cookie-policy h5, #cookie-policy p {
    color: var(--text);
}

/* เลือกบนมือถือ/เมนูข้าง */
.ec-mobile-menu, .ec-menu-inner, .ec-menu-title {
    background: var(--panel) !important;
    color: var(--text);
}

/* ลดความฉูดฉาดของเส้น/เงา */
* {
    box-shadow: none !important;
}

/* (ทางเลือก) ทำภาพทุกรูปหม่นลงนิด ๆ แต่ยังมีสี */
img {
    filter: saturate(80%);
}