body {
    font-family: 'Cairo', sans-serif;
}


/* ==== HERO DASHBOARD RDI ==== */

.hero-rdi {
    padding-top: 20px;
    padding-bottom: 40px;
    background: #f5faf6;
    /* hijau muda lembut */
}

/* Sidebar kategori jadi card */
.rdi-hero-categories {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    background: #ffffff;
}

.rdi-hero-categories .hero__categories__all {
    background: #4CAF50;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rdi-hero-categories ul {
    padding: 10px 0 12px;
}

.rdi-hero-categories ul li a {
    font-size: 14px;
    padding: 8px 18px;
    display: block;
    color: #555;
}

.rdi-hero-categories ul li a:hover {
    background: #e8f5ea;
    color: #2f6b35;
}

/* Search bar lebih clean */
.rdi-hero-search {
    margin-bottom: 18px;
}

.rdi-hero-search .hero__search__form input {
    border-radius: 999px 0 0 999px;
    border-color: #d1e7d6;
}

.rdi-hero-search .hero__search__form button {
    border-radius: 0 999px 999px 0;
    background: #4CAF50;
}

/* Banner lebih modern */
.rdi-hero-banner {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    position: relative;
}

.rdi-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
}

.rdi-hero-banner .hero__text span {
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    color: #4CAF50;
}

.rdi-hero-banner .hero__text h2 {
    font-size: 36px;
    line-height: 1.2;
}

.rdi-hero-cta {
    background: #4CAF50;
    border-radius: 999px;
    padding-inline: 28px;
    box-shadow: 0 4px 10px rgba(76, 175, 80, 0.4);
}

.rdi-hero-cta:hover {
    background: #3e9441;
}


/* === DARK MODE === */
html.dark-mode,
body.dark-mode {
    background-color: #1a1a1a !important;
    color: #e0e0e0;
}

body.dark-mode main,
body.dark-mode .product,
body.dark-mode .product-rdi,
body.dark-mode .container,
body.dark-mode .rdi-hero,
body.dark-mode .spad,
body.dark-mode .section-title h2,
body.dark-mode .contact-form h3 {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

body.dark-mode .humberger__menu__nav ul li a,
body.dark-mode .header__menu ul li a {
    color: #e0e0e0;
}

/* Header & Navbar */
body.dark-mode .rdi-header,
body.dark-mode .humberger__menu__wrapper,
body.dark-mode .hero__categories__all,
body.dark-mode .humberger__menu__widget .header__top__right__auth a {
    background-color: #242424 !important;
    border-color: #333;
    color: #e0e0e0 !important;
}

body.dark-mode .rdi-header {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Components: Cards, Inputs, Dropdowns */
body.dark-mode .product-card,
body.dark-mode .category-card,
body.dark-mode .rdi-hero-categories,
body.dark-mode .rdi-searchbar,
body.dark-mode .mobile-search input,
body.dark-mode .search-dropdown,
body.dark-mode .rdi-user-dropdown,
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .rdi-hero-banner,
body.dark-mode .checkout__order,
body.dark-mode .shoping__checkout {
    background-color: #2d2d2d !important;
    color: #e0e0e0;
    border-color: #404040;
}

/* Specific Text Colors */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .hero-title-text,
body.dark-mode .product-name,
body.dark-mode .category-name,
body.dark-mode .rdi-user-pill .name,
body.dark-mode .rdi-icon-btn,
body.dark-mode .mobile-link,
body.dark-mode .checkout__order h4,
body.dark-mode .checkout__order .checkout__order__products,
body.dark-mode .checkout__order .checkout__order__total,
body.dark-mode .shoping__cart__total h5,
body.dark-mode .shoping__cart__total li {
    color: #ffffff !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode small,
body.dark-mode .hero-sub,
body.dark-mode .category-sub,
body.dark-mode .text-muted,
body.dark-mode .product-price,
body.dark-mode .breadcrumb__text span {
    color: #b0b0b0 !important;
}

/* Buttons & Inputs */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .checkout__input input {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}

body.dark-mode .site-btn,
body.dark-mode .btn-success {
    background-color: #15803d !important;
    /* Hijau rada gelap */
}

/* Chat Bot fix */
body.dark-mode .rasy-chatbox {
    background-color: #2d2d2d !important;
    color: #eee !important;
}

body.dark-mode .msg-row.bot .msg-bubble {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #444 !important;
}

body.dark-mode .rasy-options {
    background-color: #2d2d2d !important;
    border-top-color: #444 !important;
}

body.dark-mode .rasy-chip {
    background-color: #333 !important;
    color: #16a34a !important;
    border-color: #16a34a !important;
}

body.dark-mode .rasy-chip:hover {
    background-color: #16a34a !important;
    color: white !important;
}

/* Footer */
body.dark-mode footer,
body.dark-mode .footer {
    background-color: #111 !important;
    color: #aaa !important;
}

/* Toggle Button Styling */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.theme-switch {
    display: inline-block;
    height: 24px;
    position: relative;
    width: 48px;
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    background-color: white;
    bottom: 2px;
    content: "";
    height: 20px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 20px;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #16a34a;
}

input:checked+.slider:before {
    transform: translateX(20px);
}

.slider-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    pointer-events: none;
}

.slider-icon.sun {
    left: 6px;
    color: #fff;
    opacity: 0;
    transition: .4s;
}

.slider-icon.moon {
    right: 6px;
    color: #555;
    transition: .4s;
}

input:checked~.slider .slider-icon.sun {
    opacity: 1;
}

input:checked~.slider .slider-icon.moon {
    opacity: 0;
}


/* === SHAKE ANIMATION (Error Effect) === */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-10px) rotate(-2deg);
    }

    30% {
        transform: translateX(9px) rotate(2deg);
    }

    45% {
        transform: translateX(-6px) rotate(-1deg);
    }

    60% {
        transform: translateX(5px) rotate(1deg);
    }

    75% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0);
    }
}

.shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

/* Optional: Error Input Highlight */
.is-invalid {
    border-color: #dc3545 !important;
    background-color: #fff8f8 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}