/* Percentage Increase Calculator Custom Styling */

.apple-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .apple-glass {
    background: rgba(18, 18, 20, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Mode tab buttons container & tabs */
.mode-tab-container {
    background-color: rgba(244, 244, 245, 0.9);
    border: 1px solid rgba(228, 228, 231, 0.8);
    padding: 6px;
    border-radius: 1.25rem;
}

.dark .mode-tab-container {
    background-color: rgba(24, 24, 27, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mode-tab-btn {
    background-color: transparent;
    border: 1px solid transparent;
    color: #52525b; /* zinc-600 in light mode */
    font-weight: 700;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.dark .mode-tab-btn {
    color: #a1a1aa; /* zinc-400 in dark mode */
}

.mode-tab-btn:hover {
    color: #09090b;
    background-color: rgba(0, 0, 0, 0.04);
}

.dark .mode-tab-btn:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.06);
}

.mode-tab-btn.active {
    background-color: #059669 !important; /* solid emerald-600 */
    border-color: #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
}

.dark .mode-tab-btn.active {
    background-color: #10b981 !important; /* emerald-500 in dark mode */
    border-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

/* Range Slider Styling - Sleek Thin Track */
input[type="range"].thin-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #e4e4e7;
    border-radius: 9999px;
    outline: none;
    transition: background 0.15s ease;
}

.dark input[type="range"].thin-slider {
    background: rgba(255, 255, 255, 0.12);
}

input[type="range"].thin-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #059669;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
    border: 2px solid #ffffff;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.dark input[type="range"].thin-slider::-webkit-slider-thumb {
    background: #10b981;
    border: 2px solid #18181b;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

input[type="range"].thin-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Form input styling in light and dark */
input[type="number"].custom-num-input {
    background-color: #ffffff;
    border: 1px solid #d4d4d8;
    color: #09090b;
}

.dark input[type="number"].custom-num-input {
    background-color: #18181b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

/* Math step box */
.step-box-container {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}

.dark .step-box-container {
    background-color: rgba(9, 9, 11, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #d4d4d8;
}

.text-glow {
    text-shadow: 0 0 25px rgba(5, 150, 105, 0.2);
}

.dark .text-glow {
    text-shadow: 0 0 35px rgba(16, 185, 129, 0.4);
}

/* Desktop Sticky Container Alignment */
@media (min-width: 1024px) {
    .lg\:sticky {
        top: 6rem;
    }
}