/* Dark Mode Stylesheet for Meekai.com */

:root {
    /* Light Mode Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --navbar-bg: var(--color-main);
    --footer-bg: #ffffff;
}

[data-theme="dark"] {
    /* Dark Mode Colors */
    --bg-primary: #1a1f2e;
    --bg-secondary: #252b3d;
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --border-color: #3d4455;
    --card-bg: #252b3d;
    --navbar-bg: #2c3548;
    --footer-bg: #1a1f2e;
}

/* Apply theme colors */
[data-theme="dark"]  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* ยกเว้นป้ายทะเบียนออกจาก bg-light override */
[data-theme="dark"] .bg-light:not(.plate-size):not(.plate-size *) {
    background-color: var(--bg-secondary) !important;
}

/* ยกเว้นป้ายทะเบียนออกจาก text-muted override */
[data-theme="dark"] .text-muted:not(.plate-size):not(.plate-size *) {
    color: var(--text-secondary) !important;
}

/* ยกเว้นป้ายทะเบียนออกจาก border override */
[data-theme="dark"] .border:not(.plate-size):not(.plate-size *):not(.plate-size > div),
[data-theme="dark"] .border-top:not(.plate-size):not(.plate-size *),
[data-theme="dark"] .border-bottom:not(.plate-size):not(.plate-size *) {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] footer {
    background-color: var(--footer-bg) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Dark mode adjustments for specific elements */
[data-theme="dark"] .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
}

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

[data-theme="dark"] input,
/* [data-theme="dark"] textarea, */
[data-theme="dark"] select,
[data-theme="dark"] .form-select,
[data-theme="dark"] .plate-type {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .plate-type:focus {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--color-main) !important;
}

[data-theme="dark"] .form-select option,
[data-theme="dark"] .plate-type option,
[data-theme="dark"] select option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

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

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

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

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

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

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

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-secondary);
}

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

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

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

/* ============================================= */
/* PLATE PREVIEW - Dark Mode Support */
/* JavaScript และ Bootstrap classes ทำงานอย่างอิสระ */
/* แต่ force พื้นหลังสีขาวสำหรับป้ายขาว */
/* ============================================= */

/* Force พื้นหลังสีขาวสำหรับป้ายที่มี .bg-white class (ป้ายขาว-*) */
[data-theme="dark"] .plate-size .bg-white,
[data-theme="dark"] .plate-size #box-plate-car > div.bg-white,
[data-theme="dark"] .plate-size #box-plate-motor > div.bg-white,
[data-theme="dark"] .plate-size #box-plate-big-car > div.bg-white {
    background-color: #ffffff !important;
}

/* Default - ป้ายที่ยังไม่มี class สีอื่น ให้เป็นสีขาว */
[data-theme="dark"] .plate-size .box-plate-car:not(.plate-yellow):not(.plate-green):not(.plate-blue):not(.plate-gold):not(.plate-color):not(.bg-success):not(.bg-danger),
[data-theme="dark"] .plate-size .box-plate-motor:not(.plate-yellow):not(.plate-green):not(.plate-blue):not(.plate-gold):not(.plate-color):not(.bg-success):not(.bg-danger),
[data-theme="dark"] .plate-size #box-plate-car:not(.plate-yellow):not(.plate-green):not(.plate-blue):not(.plate-gold):not(.plate-color),
[data-theme="dark"] .plate-size #box-plate-motor:not(.plate-yellow):not(.plate-green):not(.plate-blue):not(.plate-gold):not(.plate-color),
[data-theme="dark"] .plate-size #box-plate-big-car:not(.plate-yellow):not(.plate-green):not(.plate-blue):not(.plate-gold):not(.plate-color) {
    /* background-color: #f8f9fa !important; */
}

/* Inner div ของป้าย - ให้เป็นสีตาม parent */
[data-theme="dark"] .plate-size #box-plate-car > div,
[data-theme="dark"] .plate-size #box-plate-motor > div,
[data-theme="dark"] .plate-size #box-plate-big-car > div {
    background-color: inherit;
}

/* Force border colors ตาม Bootstrap classes */
[data-theme="dark"] .plate-size .border-dark,
[data-theme="dark"] .plate-size #box-plate-car > div.border-dark,
[data-theme="dark"] .plate-size #box-plate-motor > div.border-dark,
[data-theme="dark"] .plate-size #box-plate-big-car > div.border-dark {
    border-color: #000000 !important;
}

[data-theme="dark"] .plate-size .border-success,
[data-theme="dark"] .plate-size #box-plate-car > div.border-success,
[data-theme="dark"] .plate-size #box-plate-motor > div.border-success,
[data-theme="dark"] .plate-size #box-plate-big-car > div.border-success {
    border-color: #198754 !important;
}

[data-theme="dark"] .plate-size .border-primary,
[data-theme="dark"] .plate-size #box-plate-car > div.border-primary,
[data-theme="dark"] .plate-size #box-plate-motor > div.border-primary,
[data-theme="dark"] .plate-size #box-plate-big-car > div.border-primary {
    border-color: #0d6efd !important;
}

[data-theme="dark"] .plate-size .border-info,
[data-theme="dark"] .plate-size #box-plate-car > div.border-info,
[data-theme="dark"] .plate-size #box-plate-motor > div.border-info,
[data-theme="dark"] .plate-size #box-plate-big-car > div.border-info {
    border-color: #0dcaf0 !important;
}

[data-theme="dark"] .plate-size .border-danger,
[data-theme="dark"] .plate-size #box-plate-car > div.border-danger,
[data-theme="dark"] .plate-size #box-plate-motor > div.border-danger,
[data-theme="dark"] .plate-size #box-plate-big-car > div.border-danger {
    border-color: #dc3545 !important;
}

/* JavaScript จะจัดการ: */
/*   - Text colors: .text-dark, .text-success, .text-primary, .text-info, .text-danger, .text-white */
/*   - Border colors: .border-dark, .border-success, .border-primary, .border-info, .border-danger, .border-secondary */
/*   - Special backgrounds: .bg-success (ป้ายเขียว), .bg-danger (ป้ายแดง) */


/* ============================================= */
/* END OF PLATE PREVIEW PRESERVATION */
/* ============================================= */

/* ============================================= */
/* PLATE COLOR STYLES - สีพื้นหลังและตัวอักษรป้าย */
/* ============================================= */

/* ป้ายเหลือง (รถรับจ้างสาธารณะ) */
[data-theme="dark"] .plate-yellow,
[data-theme="dark"] .plate-size .plate-yellow,
[data-theme="dark"] #box-plate-big-car.plate-yellow {
    /* background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%) !important; */
}

[data-theme="dark"] .plate-yellow > div,
[data-theme="dark"] .plate-size .plate-yellow > div,
[data-theme="dark"] #box-plate-big-car.plate-yellow > div {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%) !important;
}

.plate-yellow * {
    color: #000000 !important;
}

.plate-yellow .border,
.plate-yellow .border-secondary {
    border-color: #000000 !important;
}

/* ป้ายเขียว (รถกระบะ) */
.plate-green * {
    color: #0d5f1f !important; /* สีเขียวเข้ม */
}

.plate-green .border,
.plate-green .border-secondary {
    border-color: #0d5f1f !important;
}

/* ป้ายน้ำเงิน (รถตู้) */
.plate-blue * {
   color: #003d80 !important; /* สีน้ำเงินเข้ม */
}

.plate-blue .border,
.plate-blue .border-secondary {
    border-color: #003d80 !important;
}

/* ป้ายทอง (กราฟฟิค) */
.plate-gold * {
    color: #000000 !important;
}

.plate-gold .border,
.plate-gold .border-secondary {
    border-color: #000000 !important;
}

/* ป้ายกราฟฟิค (จังหวัด) - สีตามจังหวัด */
.plate-color * {
    /* สีจะถูกกำหนดโดย JavaScript ตามจังหวัดที่เลือก */
}

.plate-color .border,
.plate-color .border-secondary {
    /* border-color จะถูกกำหนดโดย JavaScript */
}

/* ============================================= */
/* END OF PLATE COLOR STYLES */
/* ============================================= */

/* Order card and form sections */
[data-theme="dark"] .order-card {
    background-color: var(--card-bg) !important;
}
[data-theme="dark"] .portfolio-card {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] .bg-main-soft ,
[data-theme="dark"] .portfolio-card .card-body .search-section {
    background-color: var(--text-secondary) !important;
}
.portfolio-card .card-body .search-section {
    background-color: #45637d !important;
}



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

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

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

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

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

[data-theme="dark"] .fw-bold,
[data-theme="dark"] .h3,
[data-theme="dark"] .h5 {
    color: var(--text-primary) !important;
}

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

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

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

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

/* Navbar adjustments */
[data-theme="dark"] .navbar.bg-main {
    background-color: var(--navbar-bg) !important;
}

[data-theme="dark"] .bg-gradient-primary {
    background: linear-gradient(135deg, var(--color-main) 0%, #2c3548 100%) !important;
}

/* Buttons */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Additional form elements */
[data-theme="dark"] .form-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

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

/* Prevent white backgrounds in dark mode - except plate previews */
[data-theme="dark"] .bg-white:not(.box-plate-car):not(.box-plate-motor):not(#box-plate-car):not(#box-plate-motor):not(#box-plate-big-car):not(#box-plate-custom-car):not(#box-plate-custom-motor) {
    background-color: var(--card-bg) ;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .bg-white{
    background-color: var(--card-bg) !important ;
    color: var(--text-primary) !important;
}


/* Plate Order Card - specific class (ไม่กระทบ .bg-white ส่วนอื่น) */
.plate-order-card {
    background-color: #ffffff;
}

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

/* Product Features Section - specific class (ไม่กระทบ .bg-white ส่วนอื่น) */
.product-features-section {
    background-color: #ffffff;
}

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

/* Detail cards and feature boxes */
[data-theme="dark"] .detail-card {
    background-color: var(--card-bg) !important;
}

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

[data-theme="dark"] .detail-overlay {
    background-color: rgba(26, 31, 46, 0.85) !important;
}

[data-theme="dark"] .feature-box {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--text-secondary) !important;
}

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

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

[data-theme="dark"] .feature-icon {
    background: linear-gradient(135deg, var(--color-main) 0%, var(--color-main-active) 100%) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .feature-icon i {
    color: #ffffff !important;
}

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

[data-theme="dark"] .quality-badge {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--color-main) !important;
}

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

/* Payment and price sections */
/* ===== Price Summary Card - Dark Mode ===== */
[data-theme="dark"] .price-summary-card {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    padding: 1rem !important;
    border-radius: 8px !important;
}

[data-theme="dark"] .price-summary-card .price-row {
    color: #e5e7eb !important;
}

[data-theme="dark"] .price-summary-card .price-row span,
[data-theme="dark"] .price-row span {
    color: #e5e7eb !important;
}

[data-theme="dark"] .price-summary-card .price-row .fw-bold,
[data-theme="dark"] .price-row .fw-bold {
    color: #ffffff !important;
}

[data-theme="dark"] .price-summary-card .price-row i,
[data-theme="dark"] .price-row i {
    color: #9ca3af !important;
}

/* สีของราคาต่างๆ ใน dark mode - Higher Specificity */
[data-theme="dark"] .price-summary-card .price-row .fw-bold.text-primary,
[data-theme="dark"] .price-summary-card .price-row span.fw-bold .text-primary,
[data-theme="dark"] .price-row .text-primary {
    color: #a5b4fc !important;
}

[data-theme="dark"] .price-summary-card .price-row .fw-bold.text-success,
[data-theme="dark"] .price-summary-card .price-row span.fw-bold .text-success,
[data-theme="dark"] .price-row .text-success {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .price-summary-card .price-row .fw-bold.text-warning,
[data-theme="dark"] .price-summary-card .price-row span.fw-bold .text-warning,
[data-theme="dark"] .price-row .text-warning {
    color: #fcd34d !important;
}

[data-theme="dark"] .price-summary-card .price-row .text-danger,
[data-theme="dark"] .price-summary-card .price-total .text-danger,
[data-theme="dark"] .price-total .text-danger {
    color: #fca5a5 !important;
}

/* ชื่อหัวข้อแต่ละแถว - สว่างขึ้น */
[data-theme="dark"] .price-summary-card .price-row > span:first-child {
    color: #d1d5db !important;
}

/* ตัวเลขราคาทั้งหมด - สีขาวสว่าง */
[data-theme="dark"] .price-summary-card .unit-price,
[data-theme="dark"] .price-summary-card .display-quantity,
[data-theme="dark"] .price-summary-card .subtotal-price,
[data-theme="dark"] .price-summary-card .shipping-cost,
[data-theme="dark"] .price-summary-card .total-price {
    color: #ffffff !important;
    font-weight: bold !important;
}

/* border horizontal rule */
[data-theme="dark"] .price-summary-card hr,
[data-theme="dark"] .price-summary-card hr.my-2 {
    border-color: var(--border-color) !important;
    opacity: 0.3 !important;
}

/* alert badge ส่งฟรี */
[data-theme="dark"] #free-shipping-badge .alert-success,
[data-theme="dark"] .price-summary-card #free-shipping-badge .alert-success {
    background-color: rgba(34, 197, 94, 0.2) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] #free-shipping-badge .alert-success i {
    color: #6ee7b7 !important;
}

[data-theme="dark"] .payment-label {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
}

[data-theme="dark"] .payment-label:hover {
    background-color: var(--card-bg) !important;
    border-color: #667eea !important;
}

[data-theme="dark"] .payment-method-group .payment-label {
    background-color: var(--bg-secondary) !important;
    border: 2px solid var(--border-color) !important;
}

/* Payment method checked state - เพิ่มความชัดเจน */
[data-theme="dark"] .payment-radio:checked + .payment-label {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    border-color: #667eea !important;
    border-width: 3px !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

/* Check icon สำหรับ payment ที่เลือก */
[data-theme="dark"] .payment-radio:checked + .payment-label .payment-check {
    color: #667eea !important;
    opacity: 1 !important;
}

[data-theme="dark"] .payment-check {
    opacity: 0.3 !important;
    transition: all 0.3s ease !important;
}

[data-theme="dark"] .payment-title,
[data-theme="dark"] .payment-desc {
    color: var(--text-primary) !important;
}

/* Payment title สำหรับตัวที่เลือก */
[data-theme="dark"] .payment-radio:checked + .payment-label .payment-title {
    color: #a5b4fc !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .payment-icon {
    opacity: 0.9;
}

/* Plate type selection - 1 ด้าน / 2 ด้าน */
[data-theme="dark"] .plate-type-label {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
    transition: all 0.3s ease !important;
}

[data-theme="dark"] .plate-type-label:hover {
    background-color: var(--card-bg) !important;
    border-color: #667eea !important;
}

/* Plate type checked state - เพิ่มความชัดเจน */
[data-theme="dark"] .plate-type-radio:checked + .plate-type-label {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    border-color: #667eea !important;
    border-width: 3px !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

/* Text และ icon สำหรับตัวที่เลือก */
[data-theme="dark"] .plate-type-radio:checked + .plate-type-label span {
    color: #a5b4fc !important;
    font-weight: 600 !important;
}

[data-theme="dark"] .plate-type-radio:checked + .plate-type-label i {
    color: #667eea !important;
}

[data-theme="dark"] .plate-type-label i {
    opacity: 0.7 !important;
    transition: all 0.3s ease !important;
}

[data-theme="dark"] .plate-type-radio:checked + .plate-type-label i {
    opacity: 1 !important;
}

/* Divider custom */
[data-theme="dark"] .divider-line {
    background-color: var(--border-color) !important;
}

[data-theme="dark"] .divider-icon {
    color: var(--color-main) !important;
}

/* Gallery and images */
[data-theme="dark"] .bg-gradient-light {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--card-bg) 100%) !important;
}

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

/* Modal adjustments */
[data-theme="dark"] .modal-header {
    background-color: var(--color-main) !important;
    border-bottom-color: var(--border-color) !important;
}

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

[data-theme="dark"] .modal-footer {
    background-color: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
}

/* Text colors */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--text-primary) !important;
}

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

[data-theme="dark"] label:not(.box-plate-car label):not(.box-plate-motor label):not(#box-plate-car label):not(#box-plate-motor label):not(#box-plate-big-car label):not(#box-plate-custom-car label):not(#box-plate-custom-motor label) {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fs-14,
[data-theme="dark"] .fs-15,
[data-theme="dark"] .fs-13 {
    color: var(--text-primary) !important;
}

/* Shadow adjustments */
[data-theme="dark"] .shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .card.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4) !important;
}

/* Border adjustments for rounded elements */
[data-theme="dark"] .rounded,
[data-theme="dark"] .rounded-3 {
    border-color: var(--border-color) !important;
}

/* Button hover states */
[data-theme="dark"] .btn-buy-plate:hover,
[data-theme="dark"] .btn-payment:hover {
    opacity: 0.9;
}

/* Ensure container backgrounds */
[data-theme="dark"] .container {
    background-color: transparent;
}

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

/* Text gradient in dark mode */
[data-theme="dark"] .text-gradient {
    background: linear-gradient(135deg, var(--color-main) 0%, #5a8bb5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Alert success in dark mode */
[data-theme="dark"] .alert-success {
    background-color: rgba(40, 167, 69, 0.2) !important;
    border-color: rgba(40, 167, 69, 0.3) !important;
    color: #5ad97c !important;
}

/* Display text in dark mode */
[data-theme="dark"] .display-5 {
    color: var(--text-primary) !important;
}

/* Facebook Messenger Widget Button */
#messengerWidget {
    position: fixed;
    bottom: 150px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #00B2FF 0%, #006AFF 100%);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 132, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    text-decoration: none;
}

#messengerWidget:hover {
    background: linear-gradient(135deg, #006AFF 0%, #0051D4 100%);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 132, 255, 0.5);
    color: white;
}

#messengerWidget:active {
    transform: translateY(-2px) scale(1.05);
}

#messengerWidget i {
    transition: transform 0.3s ease;
}

#messengerWidget:hover i {
    transform: rotate(15deg);
}

@media (max-width: 768px) {
    #messengerWidget {
        bottom: 130px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

/* Theme Toggle Button */
#themeToggle {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--color-main);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(69, 99, 125, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
}

#themeToggle:hover {
    background: #365570;
    transform: translateY(-5px) rotate(180deg);
    box-shadow: 0 6px 20px rgba(69, 99, 125, 0.4);
}

#themeToggle:active {
    transform: translateY(-2px);
}

#themeToggle i {
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    #themeToggle {
        bottom: 75px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

/* =====================================================
   Form Select Dark Mode
   ===================================================== */

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

[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-secondary) !important;
    border-color: var(--color-main) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

[data-theme="dark"] .form-select option {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .form-select:disabled {
    background-color: rgba(37, 43, 61, 0.5) !important;
    color: var(--text-secondary) !important;
    opacity: 0.6;
}

/* =====================================================
   Form Input & Textarea Placeholder Dark Mode
   ===================================================== */

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .form-control::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

[data-theme="dark"] input::-webkit-input-placeholder,
[data-theme="dark"] textarea::-webkit-input-placeholder,
[data-theme="dark"] .form-control::-webkit-input-placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

[data-theme="dark"] input::-moz-placeholder,
[data-theme="dark"] textarea::-moz-placeholder,
[data-theme="dark"] .form-control::-moz-placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}

[data-theme="dark"] input:-ms-input-placeholder,
[data-theme="dark"] textarea:-ms-input-placeholder,
[data-theme="dark"] .form-control:-ms-input-placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.7;
}