/* Apple Clean & Airy Custom CSS Styling */

:root {
    --apple-blue: #0071E3;
    --apple-blue-hover: #0077ED;
    --apple-gray-bg: #F5F5F7;
    --apple-text: #1D1D1F;
}

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Ensure tabular numbers align cleanly across calculations */
.tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Apple-style Custom Range Slider */
.apple-range {
    -webkit-appearance: none;
    appearance: none;
    background: #E5E5EA;
    border-radius: 9999px;
    outline: none;
    transition: background 0.15s ease;
}

.apple-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 0.5px 1px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.apple-range::-webkit-slider-thumb:hover {
    transform: scale(1.12);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}

.apple-range::-webkit-slider-thumb:active {
    transform: scale(1.18);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2);
}

.apple-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.apple-range::-moz-range-thumb:active {
    transform: scale(1.18);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.2);
}

/* Remove default spin buttons on number inputs for clean look */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 0.7;
}

/* Smooth Accordion Details */
details > summary {
    user-select: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* Print Stylesheet for PDF generation */
@media print {
    header, footer, #btn-share-link, .preset-btn, #btn-reset, button[onclick="window.print()"] {
        display: none !important;
    }
    body {
        background: #FFFFFF !important;
        color: #000000 !important;
    }
    .shadow-apple-card, .shadow-apple-floating {
        box-shadow: none !important;
        border: 1px solid #E5E5EA !important;
    }
    main {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .sticky {
        position: static !important;
    }
}