/* 
Theme: SOFT (Light gray background, pastel accent, depth via shadows)
Design Preset: D
*/

:root {
    /* Color Palette */
    --nitrix-base-bg: #F5F7FA;       /* Soft light grayish blue for whole page */
    --nitrix-panel-surface: #FFFFFF; /* Pure white for cards/panels */
    --nitrix-soft-accent: #6B8EAD;   /* Soft slate blue accent */
    --nitrix-accent-hover: #5A7B96;  /* Slightly darker slate for hover */
    --nitrix-ink-main: #2C3E50;      /* Dark slate for main text */
    --nitrix-ink-subtle: #596A7A;    /* Lighter text for secondary info */
    --nitrix-border-subtle: #E2E8F0; /* Soft border color */
    
    /* Typography */
    --font-display: 'Archivo Black', sans-serif;
    --font-body: 'Mulish', sans-serif;
}

/* Base resets handled mostly by Tailwind, adding specific global behaviors */
html {
    scroll-behavior: smooth;
}

/* Typography styles applied dynamically via var() in inline styles to bypass Tailwind limitations with CSS vars */

/* =========================================
   Interactive Gallery CSS Logic
   (Strictly No JS, Radio-based)
   ========================================= */

/* Hide all slides initially */
.g-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
    z-index: 1;
}

/* Show slide based on checked radio button */
#pic1:checked ~ div .slide-wrap .s1,
#pic2:checked ~ div .slide-wrap .s2,
#pic3:checked ~ div .slide-wrap .s3,
#pic4:checked ~ div .slide-wrap .s4 {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Thumbnail Visual States */
.thumb-selector-list label {
    border: 2px solid transparent;
    opacity: 0.6;
}

.thumb-selector-list label:hover {
    opacity: 0.9;
}

/* Preset D: Thumbnails opacity logic, no harsh borders on active, just full opacity */
#pic1:checked ~ div .thumb-selector-list label[for="pic1"],
#pic2:checked ~ div .thumb-selector-list label[for="pic2"],
#pic3:checked ~ div .thumb-selector-list label[for="pic3"],
#pic4:checked ~ div .thumb-selector-list label[for="pic4"] {
    opacity: 1;
    /* Preset D: No border, but we can add a subtle shadow or background tint to active thumb if desired, 
       sticking to simple full opacity for "no border" clean look */
}

/* Custom Scrollbar for thumbnails area on mobile */
.thumb-selector-list::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}
.thumb-selector-list::-webkit-scrollbar-track {
    background: transparent;
}
.thumb-selector-list::-webkit-scrollbar-thumb {
    background: var(--nitrix-border-subtle);
    border-radius: 4px;
}

/* =========================================
   Design Component Details (Preset D)
   ========================================= */

/* CTA Button Preset D style */
.bsn-outbound-link {
    text-decoration: none;
    position: relative;
    overflow: hidden;
    /* Soft border radius handled in HTML via tailwind rounded-xl (soft: 12px) */
    box-shadow: none !important; /* Force no shadow as per Preset D */
}

.bsn-outbound-link::after {
    content: '';
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--nitrix-panel-surface);
    transition: width 0.3s ease;
}

.bsn-outbound-link:hover {
    background-color: var(--nitrix-accent-hover) !important;
}

.bsn-outbound-link:hover::after {
    width: 40%; /* Hover underline effect central */
}

/* Reviews Styling Preset D enhancement */
/* Handled mainly via inline styles for border-bottom and shadow based on variables, 
   adding subtle transition for interaction */
.feedback-entry {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feedback-entry:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.1);
}