/* ================================================================
   PARTILAHSHOP — darkmode.css
   Toggle switch di navbar, tidak mengganggu elemen lain
   ================================================================ */

/* ── TOGGLE SWITCH DI NAVBAR ── */
 .dark-toggle-wrap {
    
    align-items: center;
    gap: 5px;
    cursor: pointer;
    vertical-align: middle;
} 

/* Track (rel pembungkus) */
.dark-toggle-track {
    position: relative;
   right: 3rem;
    bottom: 6px;
    width: 52px;
    height: 26px;
    background: linear-gradient(135deg, #fa5b0f, #ffb300);
    border-radius: 50px;
    transition: background 0.4s ease;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
    flex-shrink: 0;
}

/* Bulatan geser di dalam track */
.dark-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
    z-index: 1;
}

/* Ikon di dalam thumb */
.dark-toggle-thumb .t-gear {
    display: inline-block;
    animation: putarGear 3s linear infinite;
    line-height: 1;
}

.dark-toggle-thumb .t-moon {
    display: none;
    line-height: 1;
}

@keyframes putarGear {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes goyangBulan {
    0%, 100% { transform: rotate(-12deg); }
    50%       { transform: rotate(12deg); }
}

/* ── DARK MODE AKTIF ── */
body.dark-mode .dark-toggle-track {
    background: linear-gradient(135deg, #0f3460, #16213e);
}

body.dark-mode .dark-toggle-thumb {
    transform: translateX(26px);
    background: #1f2c34;
}

body.dark-mode .dark-toggle-thumb .t-gear { display: none; }
body.dark-mode .dark-toggle-thumb .t-moon {
    display: inline-block;
    animation: goyangBulan 2.5s ease-in-out infinite;
    color: #e9edef;
}

/* ================================================================
   TRANSISI SMOOTH
   ================================================================ */
body,
body .card, body .card-body, body .card-footer,
body .modal-content, body .modal-header, body .modal-body, body .modal-footer,
body .form-control, body .form-select,
body .btn-filter, body .search-inline-bar,
body .review-card, body .seller-reply-bubble,
body .wa-popup-card, body .filter-kategori-wrapper,
body .custom-navbar, body .container {
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important;
}

/* ================================================================
   DARK MODE COLORS — Abu-abu Gelap
   ================================================================ */
body.dark-mode { background-color: #111b21 !important; color: #e9edef !important; }

body.dark-mode .container.bg-white,
body.dark-mode .container       { background-color: #1f2c34 !important; }
body.dark-mode .bg-white        { background-color: #1f2c34 !important; }
body.dark-mode .bg-secondary    { background-color: #0d1f29 !important; }

body.dark-mode .custom-navbar   { background-color: #0a1828 !important; }
body.dark-mode .search-bar-slide  { background: #0a1828 !important; }
body.dark-mode .search-bar-inner  { background: #1f2c34 !important; }
body.dark-mode .search-bar-inner input { color: #e9edef !important; background: transparent !important; }
body.dark-mode .search-bar-inner input::placeholder { color: #8696a0 !important; }

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e9edef !important; }
body.dark-mode p, body.dark-mode small, body.dark-mode label { color: #b0bec5 !important; }
body.dark-mode .text-muted     { color: #8696a0 !important; }
body.dark-mode .text-secondary { color: #b0bec5 !important; }
body.dark-mode .my-profession  { color: #e9edef !important; }
body.dark-mode #infoProduk     { color: #8696a0 !important; }

body.dark-mode .card           { background-color: #1f2c34 !important; border-color: #2a3942 !important; }
body.dark-mode .card-body      { background-color: #1f2c34 !important; }
body.dark-mode .card-footer    { background-color: #263640 !important; border-top-color: #2a3942 !important; }
body.dark-mode .card-title,
body.dark-mode .card-text,
body.dark-mode .modalNama      { color: #e9edef !important; }
body.dark-mode .harga          { color: #ff7043 !important; }
body.dark-mode .text-danger    { color: #ff7043 !important; }
body.dark-mode .text-decoration-line-through { color: #8696a0 !important; }
body.dark-mode .shadow         { box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important; }

body.dark-mode .filter-kategori-wrapper { background: #1f2c34 !important; }
body.dark-mode .btn-filter       { background: #2a3942 !important; border-color: #3b4a54 !important; color: #e9edef !important; }
body.dark-mode .btn-filter:hover { border-color: #fa5b0f !important; color: #fa5b0f !important; }
body.dark-mode .btn-filter.active { background: #fa5b0f !important; border-color: #fa5b0f !important; color: #fff !important; }

body.dark-mode .search-inline-bar { background: #1f2c34 !important; border-color: #3b4a54 !important; }
body.dark-mode .search-inline-bar input { background: transparent !important; color: #e9edef !important; }
body.dark-mode .search-inline-bar input::placeholder { color: #8696a0 !important; }

body.dark-mode .modal-content  { background-color: #1f2c34 !important; border-color: #2a3942 !important; }
body.dark-mode .modal-header   { background-color: #111b21 !important; border-bottom-color: #2a3942 !important; }
body.dark-mode .modal-title    { color: #e9edef !important; }
body.dark-mode .modal-body     { background-color: #1f2c34 !important; color: #e9edef !important; }
body.dark-mode .modal-footer   { background-color: #1f2c34 !important; border-top-color: #2a3942 !important; }
body.dark-mode .cart-modal-body { background-color: #1f2c34 !important; }
body.dark-mode .form-control,
body.dark-mode .form-select    { background-color: #2a3942 !important; border-color: #3b4a54 !important; color: #e9edef !important; }
body.dark-mode .form-control::placeholder,
body.dark-mode textarea::placeholder { color: #8696a0 !important; }
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #2a3942 !important; border-color: #fa5b0f !important;
    color: #e9edef !important; box-shadow: 0 0 0 0.2rem rgba(250,91,15,0.2) !important;
}

body.dark-mode #about,
body.dark-mode #payment,
body.dark-mode #download       { background-color: #0d1f29 !important; }
body.dark-mode #payment ol li,
body.dark-mode #payment h2     { color: #e9edef !important; }
body.dark-mode #download p,
body.dark-mode #download h3,
body.dark-mode #download ol li { color: #b0bec5 !important; }
body.dark-mode .card.border-0.shadow-sm { background-color: #1f2c34 !important; border-color: #2a3942 !important; }

body.dark-mode #all-reviews           { background-color: #1a2a34 !important; }
body.dark-mode .review-mega-container { background-color: #1f2c34 !important; }
body.dark-mode .review-card           { background-color: #1f2c34 !important; border-bottom-color: #2a3942 !important; }
body.dark-mode .review-card:hover     { background-color: #263640 !important; border-left-color: #fa5b0f !important; }
body.dark-mode .seller-reply-bubble   { background: linear-gradient(135deg,#1a2a35,#1a3040) !important; border-color: #2a4a5e !important; }
body.dark-mode .seller-reply-text     { color: #e9edef !important; }
body.dark-mode .seller-reply-name     { color: #fa5b0f !important; }

body.dark-mode .wa-popup-card  { background-color: #1f2c34 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; }
body.dark-mode .wa-popup-title { color: #e9edef !important; }
body.dark-mode .border-top     { border-top-color: #2a3942 !important; background-color: #1f2c34 !important; }
body.dark-mode .badge.bg-success { background-color: #1a7a4a !important; }

body.dark-mode ::-webkit-scrollbar       { width: 6px; height: 6px; }
body.dark-mode ::-webkit-scrollbar-track { background: #111b21; }
body.dark-mode ::-webkit-scrollbar-thumb { background: #3b4a54; border-radius: 3px; }
body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #fa5b0f; }

/* warna bintang warna judul  */
/* ── MODAL REVIEW DARK MODE ── */
body.dark-mode #modalTulisReview .modal-content {
    background-color: #1f2c34 !important;
}

body.dark-mode .rev-produk-info {
    background: #1a2a35 !important;
    border-left-color: #fa5b0f !important;
}

body.dark-mode #revProdukNama {
    color: #e9edef !important;
}

body.dark-mode .rev-produk-label {
    color: #8696a0 !important;
}

body.dark-mode #modalTulisReview .modal-header {
    background-color: #fa5b0f !important;
}

body.dark-mode #modalTulisReview .modal-title {
    color: #fff !important;
}

/* Bintang rating */
body.dark-mode .rating-wrapper label {
    color: #3b4a54 !important;
}

body.dark-mode .rating-wrapper label {
    color: #3b4a54 !important;
    cursor: pointer !important;
}

body.dark-mode .rating-wrapper input:checked ~ label {
    color: #ffca08 !important;
}

body.dark-mode .rating-wrapper label:hover {
    color: #ffca08 !important;
}

body.dark-mode .rating-wrapper label:hover ~ label {
    color: #ffca08 !important;
}

body.dark-mode .rating-wrapper label {
    color: #3b4a54 !important;
    cursor: pointer !important;
}

body.dark-mode .rating-wrapper input:checked ~ label {
    color: #ffca08 !important;
}

body.dark-mode .rating-wrapper label:hover {
    color: #ffca08 !important;
}

body.dark-mode .rating-wrapper label:hover ~ label {
    color: #ffca08 !important;
}

body.dark-mode #rate5:checked ~ label,
body.dark-mode #rate4:checked ~ label,
body.dark-mode #rate3:checked ~ label,
body.dark-mode #rate2:checked ~ label,
body.dark-mode #rate1:checked ~ label {
    color: #ffca08 !important;
}

body.dark-mode #modalTulisReview label {
    color: #e9edef !important;
}

body.dark-mode #modalTulisReview small {
    color: #8696a0 !important;
}

body.dark-mode #modalTulisReview .alert-info {
    background: #1a2a35 !important;
    border-color: #2a4a5e !important;
    color: #8696a0 !important;
}

/* ── MODAL TANYA PRODUK DARK MODE ── */
body.dark-mode #modalTanyaProduk .produk-preview {
    background: #1a2a35 !important;
    border-color: #2a4a5e !important;
}

body.dark-mode #tanyaNamaProduk {
    color: #e9edef !important;
}

body.dark-mode #tanyaHargaProduk {
    color: #ff7043 !important;
}

/* ── ALERT INFO TANYA PRODUK DARK MODE ── */
body.dark-mode #modalTanyaProduk .alert-info-tanya {
    background: #1a2e1a !important;
    border-color: #1a7a4a !important;
    color: #e9edef !important;
}

body.dark-mode #modalTanyaProduk .alert-info-tanya i {
    color: #25d366 !important;
}

body.dark-mode #modalTanyaProduk .modal-header {
    background: linear-gradient(135deg, #fa5b0f, #ff8c42) !important;
}

body.dark-mode #modalTanyaProduk .modal-footer {
    background: #1f2c34 !important;
    border-top-color: #2a3942 !important;
}

body.dark-mode #modalTanyaProduk .btn-light {
    background: #2a3942 !important;
    color: #e9edef !important;
    border-color: #3b4a54 !important;
}