/* Dark mode styles */
:root {
    --dark-bg: #222;
    --dark-card-bg: #333;
    --dark-text: #e0e0e0;
    --dark-secondary-text: #aaa;
    --dark-border: #444;
    --dark-accent: #5e9eee;
    --dark-accent-hover: #4a8cd8;
    --dark-input-bg: #444;
    --dark-disabled: #555;
    --dark-button-text: #fff;
    --dark-back-button: #444;
    --dark-back-button-hover: #555;
    --dark-points-bg: #d67d3e;
}

body.dark-mode {
    background-color: var(--dark-bg);
    color: var(--dark-text);
}

.dark-mode .container {
    background-color: var(--dark-card-bg);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Top Section Styles */
.dark-mode .top-section {
    border-bottom: 1px solid var(--dark-border);
}

/* Points Container Styles */
.dark-mode .points-container {
    background-color: var(--dark-points-bg);
}

.dark-mode .points-container li {
    color: var(--dark-text);
}

/* Headings */
.dark-mode h1, .dark-mode h2 {
    color: var(--dark-accent);
}

/* Text Elements */
.dark-mode p, .dark-mode li {
    color: var(--dark-text);
}

/* Form Elements */
.dark-mode textarea, .dark-mode input {
    background-color: var(--dark-input-bg);
    border: 1px solid var(--dark-border);
    color: var(--dark-text);
}

.dark-mode textarea:focus, .dark-mode input:focus {
    border-color: var(--dark-accent);
}

.dark-mode .counter {
    color: var(--dark-secondary-text);
}

/* Buttons */
.dark-mode .btn {
    background-color: var(--dark-accent);
    color: var(--dark-button-text);
}

.dark-mode .btn:hover {
    background-color: var(--dark-accent-hover);
}

.dark-mode .btn:disabled {
    background-color: var(--dark-disabled);
}

.dark-mode .btn-back {
    background-color: var(--dark-back-button);
    color: var(--dark-text);
}

.dark-mode .btn-back:hover {
    background-color: var(--dark-back-button-hover);
}

/* Floating Label Inputs */
.dark-mode .input-container label {
    color: var(--dark-secondary-text);
    background: var(--dark-card-bg);
}

.dark-mode .input-container input:focus + label,
.dark-mode .input-container input:not(:placeholder-shown) + label,
.dark-mode .input-container textarea:focus + label,
.dark-mode .input-container textarea:not(:placeholder-shown) + label {
    color: var(--dark-accent);
}

/* Stripe Payment Elements */
.dark-mode #stripe-element {
    border: 1px solid var(--dark-border);
    background-color: var(--dark-input-bg);
}

/* Footer */
.dark-mode .footer {
    border-top: 1px solid var(--dark-border);
    color: var(--dark-secondary-text);
}

.dark-mode .footer a {
    color: var(--dark-accent);
}

.dark-mode .footer a:hover {
    color: var(--dark-accent-hover);
}

/* Donation Elements */
.dark-mode .donation-info a {
    color: var(--dark-accent);
}

.dark-mode .donation-info a:hover {
    color: var(--dark-accent-hover);
}

/* Theme Toggle */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background-color: white;
    transition: all 0.3s ease;
}

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

.theme-toggle .toggle-icon {
    margin-left: 8px;
    font-size: 18px;
}