/* ==========================================
   SVARTLINE — Global CSS
   Centralized styles used across all pages
   ========================================== */

/* ----- Scrollbar ----- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1d1d1d;
}

::-webkit-scrollbar-thumb {
    background: #83776b;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9B7A5A;
}

/* ----- Smooth Scroll ----- */
html, body {
    scroll-behavior: smooth;
    overflow-x: hidden;
    width: 100%;
}


/* ----- Glass Card ----- */
.glass-card {
    background: rgba(131, 119, 107, 0.15);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(131, 119, 107, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* ----- Fade Bottom (for hero images) ----- */
.fade-bottom {
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 5%);
    mask-image: linear-gradient(to top, transparent 0%, black 1%);
}

/* ----- Check List ----- */
.check-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
    color: #281F18;
}

.check-list li::before {
    content: '\e86c';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    left: 0;
    top: -2px;
    color: #83776b;
    font-size: 1.25rem;
}

/* ----- SEO Section & Text Utilities ----- */
.seo-text {
    overflow-wrap: anywhere;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    white-space: normal;
}

/* ----- FAQ Answer / Icon (from index.html) ----- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    width: 100%;
    transition: max-height 360ms ease, padding 360ms ease;
}

.faq-icon {
    transition: transform 0.3s ease;
}

.faq-icon.open {
    transform: rotate(180deg);
}

/* ----- Form Number Input (no spinners) ----- */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

body {
    font-family: 'Manrope', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.glass-panel {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

.scroll-mt-header {
    scroll-margin-top: 100px;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Hide scrollbar for nav */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ----- Before/After Slider Component ----- */
.before-after-slider {
    --position: 50%;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.clip-after-image {
    clip-path: polygon(var(--position) 0, 100% 0, 100% 100%, var(--position) 100%);
}

.slider-input {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    background: transparent;
    cursor: ew-resize;
    user-select: none;
    z-index: 40;
}

.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 40px; /* Precise hit area */
    height: 100%; /* Vertical area constrained to container */
    background: transparent;
}

.slider-input::-moz-range-thumb {
    width: 40px;
    height: 100%;
    background: transparent;
    border: none;
}

/* ----- Premium Slider Divider ----- */
.slider-divider {
    background: linear-gradient(to bottom, transparent, #7f13ec 20%, #7f13ec 80%, transparent);
    box-shadow: 0 0 15px rgba(127, 19, 236, 0.4), 0 0 5px rgba(127, 19, 236, 0.6);
}

.slider-handle {
    background-color: #7f13ec;
    color: white;
    border: 2px solid white;
    box-shadow: 0 4px 15px rgba(127, 19, 236, 0.5);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, filter 0.3s ease;
}

.slider-input:hover~.slider-divider-container .slider-handle,
.slider-input:active~.slider-divider-container .slider-handle,
.slider-input:focus~.slider-divider-container .slider-handle {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 6px 20px rgba(127, 19, 236, 0.8);
    filter: brightness(1.1);
}