/* Dark Mode Styles */

body.dark-mode {
    --apple-primary: #ffffff;
    --apple-secondary: #86868b;
    --apple-blue: #0071e3;
    --apple-hover: #0077ed;
    --apple-light-bg: #1c1c1e;
    --apple-card-bg: #2c2c2e;
    --apple-border: #424245;
    background-color: #121212;
    color: #ffffff;
}

body.dark-mode .bg-light {
    background-color: var(--apple-card-bg) !important;
}

body.dark-mode .navbar-brand img {
    filter: invert(1) brightness(2);
}

body.dark-mode .apple-card {
    background: var(--apple-card-bg);
    border-color: var(--apple-border);
}

body.dark-mode .apple-hero-title,
body.dark-mode .apple-price,
body.dark-mode .apple-details dd,
body.dark-mode .apple-list li,
body.dark-mode .apple-details-summary {
    color: var(--apple-primary);
}

body.dark-mode .apple-subtitle,
body.dark-mode .apple-body-text,
body.dark-mode .apple-details dt,
body.dark-mode .text-secondary {
    color: var(--apple-secondary) !important;
}

body.dark-mode a.text-secondary {
    color: var(--apple-secondary) !important;
}
body.dark-mode a.text-secondary:hover {
    color: var(--apple-blue) !important;
}

body.dark-mode .apple-divider {
    background-color: var(--apple-border);
}

body.dark-mode .form-control {
    background-color: #3a3a3c;
    border-color: var(--apple-border);
    color: #ffffff;
}

body.dark-mode .form-control::placeholder {
    color: #8e8e93;
}

body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: 1px solid var(--apple-border);
    color: var(--apple-primary);
    border-radius: 980px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    border-color: var(--apple-blue);
    color: var(--apple-blue);
}

.theme-toggle .fa-sun {
    display: none;
}
.theme-toggle .fa-moon {
    display: block;
}

.dark-mode .theme-toggle .fa-sun {
    display: block;
}
.dark-mode .theme-toggle .fa-moon {
    display: none;
}