/* Natura Tubs - Main Stylesheet */

:root {
    /* Color Palette */
    --color-old-gold: rgba(186, 168, 74, 1);
    --color-dim-grey: rgba(99, 115, 112, 1);
    --color-dark-spruce: rgba(60, 72, 41, 1);
    --color-pale-oak: rgba(217, 199, 164, 1);
    --color-brown-bark: rgba(105, 76, 39, 1);
    --color-olive-wood: rgba(133, 94, 56, 1);

    /* Gradients */
    --gradient-top: linear-gradient(0deg, #BAA84A, #637370, #3C4829, #D9C7A4, #694C27, #855E38);
    --gradient-right: linear-gradient(90deg, #BAA84A, #637370, #3C4829, #D9C7A4, #694C27, #855E38);
    --gradient-bottom-right: linear-gradient(135deg, #BAA84A, #637370, #3C4829, #D9C7A4, #694C27, #855E38);
    --gradient-left: linear-gradient(270deg, #BAA84A, #637370, #3C4829, #D9C7A4, #694C27, #855E38);
    --gradient-top-left: linear-gradient(315deg, #BAA84A, #637370, #3C4829, #D9C7A4, #694C27, #855E38);
    --gradient-radial: radial-gradient(#BAA84A, #637370, #3C4829, #D9C7A4, #694C27, #855E38);

    /* Spacing & Radius */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --font-price: var(--font-body);

    --radius-pill: 50rem;
    --radius-sm: 6px;
    /* Very slight curve */
}

/* ... existing font-face if needed ... */

.font-price {
    font-family: var(--font-price) !important;
    font-size: 1.25em;
}

body {
    font-family: var(--font-body);
    font-size: 1.25rem;
    /* Further increased for legibility */
    background-color: #f9f9f9;
    color: var(--color-dark-spruce);
    overflow-x: hidden;
}

.small,
small {
    font-size: 0.9em !important;
    /* Boost small text size relative to body */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-brown-bark);
    margin-bottom: 1rem;
    line-height: 1.2;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.75rem;
}

/* Bumped up to maintain gap */
h5 {
    font-size: 1.45rem;
    font-weight: bold;
}

/* Clear hierarchy over body text */
h6 {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Product Card Titles */
h6 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* UI Text Standardization */
label,
.form-label {
    font-weight: bold;
    font-size: 0.9em;
    /* Slightly smaller than body, but bold */
    color: var(--color-dark-spruce);
}

.nav-link {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: bold;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.4em;
    /* Standardize card titles */
}

/* Premium Button Sytles */
.btn-premium {
    background-color: var(--color-old-gold);
    color: #000000;
    border: none;
    padding: 10px 30px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-premium:hover {
    background-color: var(--color-olive-wood);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Global Roundness Overrides */
.card {
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}

.accordion-item {
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}

.accordion-item:first-of-type,
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: var(--radius-sm) !important;
    border-top-right-radius: var(--radius-sm) !important;
}

.accordion-button {
    font-size: 1.25rem !important;
    /* Reset to body size, effectively ignoring parent heading scale */
    font-weight: bold;
    color: var(--color-dark-spruce);
}

.accordion-button:not(.collapsed) {
    color: var(--color-dark-spruce);
    background-color: var(--color-pale-oak);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

.accordion-button:focus {
    border-color: var(--color-pale-oak);
    box-shadow: none;
}

.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-collapse {
    border-bottom-left-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}

img {
    border-radius: var(--radius-sm);
}

/* Exclude Logo or specific images if needed, but 'all other elements' implies general rule */
.navbar-brand img {
    border-radius: 0;
}

.form-control,
.form-select {
    border-radius: var(--radius-sm) !important;
    padding: 12px 15px;
}

.btn {
    border-radius: var(--radius-pill) !important;
}

/* Navbar button override */
.navbar-nav .btn-premium {
    padding: 6px 20px;
    font-size: 0.95rem;
}

.modal-content {
    border-radius: var(--radius-sm) !important;
}

.rounded-xl {
    border-radius: var(--radius-sm) !important;
    /* Reuse standard curve */
}

/* Utils */
.cursor-pointer {
    cursor: pointer;
    transition: transform 0.2s;
}

.cursor-pointer:hover {
    transform: translateY(-2px);
}

.text-gold {
    color: var(--color-old-gold);
}

.bg-old-gold {
    background-color: var(--color-old-gold);
    color: white;
}

.bg-spruce {
    background-color: var(--color-dark-spruce);
    color: white;
}

.text-spruce {
    color: var(--color-dark-spruce);
}

/* Section Padding */
section {
    padding: 80px 0;
}

/* Hero Background Helper */
.hero-bg {
    width: 100%;
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat;
    /* Ensures the gradient overlay blends with the image */
    background-blend-mode: overlay;
    /* Accessibility: overlay reduced to 0.2 to not hide the image, relying on text shadow instead */
    box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.2);
}

.hero-subpage {
    width: 130vw;
    margin-left: calc(-65vw + 50%);
}

.hero-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero-bg h1,
.hero-bg p,
.hero-bg .display-3,
.hero-bg .display-4,
.hero-section h1,
.hero-section p,
.hero-section .display-3,
.hero-subpage h1,
.hero-subpage h2,
.hero-subpage p,
.hero-subpage .display-4 {
    /* Accessibility: Force white text in hero sections */
    color: #ffffff !important;
    /* Accessibility: Stronger shadow to pop against complex backgrounds */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Swiper Override */
:root {
    --swiper-theme-color: var(--color-dark-spruce);
    --swiper-navigation-color: var(--color-dark-spruce);
    --swiper-pagination-color: var(--color-dark-spruce);
}

.border-spruce {
    border-color: var(--color-dark-spruce) !important;
    border-width: 2px !important;
}

.form-check-input:checked {
    background-color: var(--color-dark-spruce);
    border-color: var(--color-dark-spruce);
}

/* Mobile Responsiveness Overrides */
@media (max-width: 768px) {

    /* Typography Scaling */
    h1,
    .display-3,
    .display-4 {
        font-size: 2.5rem !important;
    }

    h2 {
        font-size: 2rem !important;
    }

    h3 {
        font-size: 1.75rem !important;
    }

    .lead {
        font-size: 1.1rem !important;
    }

    /* Spacing Reduction */
    section {
        padding: 50px 0 !important;
    }

    .hero-bg {
        min-height: 60vh !important;
        /* Prevent excessive height on mobile */
    }

    /* Hero Text Container */
    .hero-bg .container {
        padding-top: 40px;
        padding-bottom: 40px;
    }



    /* Fix Buttons being too wide */
    .hero-section .btn,
    .btn-lg {
        padding: 8px 16px !important;
        /* ~15-20% smaller padding */
        font-size: 0.95rem !important;
        /* Slightly smaller text */
        width: auto !important;
        /* Don't force full width if not needed, allows them to sit side-by-side if space permits, or wrap naturally */
        max-width: 100%;
        margin-bottom: 10px;
    }

    /* Ensure two buttons in hero can sit together or stack nicely */
    .hero-section .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-section .btn {
        width: 100% !important;
        /* Stack them full width for easier tapping on mobile */
        margin-left: 0 !important;
        /* Remove ms-3 margin if stacked */
        margin-bottom: 15px !important;
    }

    /* Layout Adjustments */
    .product-card {
        margin-bottom: 20px;
    }

    /* Wizard Sidebar Order */
    /* Removed sticky-top disable for mobile, or adjust specifically for wizard sidebar if that's what this was for. 
       If this was globally disabling sticky-top, it was also breaking the navbar. 
       Scoping to #wizard-app sidebar if possible, otherwise just remove to fix navbar. */
    /* .sticky-top { position: static !important; }  <-- REMOVED THIS */

    /* Footer Text alignment */
    footer .text-md-start {
        text-align: center !important;
    }

    /* Ensure buttons wrap if needed */
    .btn-lg {
        width: 100%;
        margin-bottom: 10px;
    }

    .hero-section .row {
        margin-bottom: 20px !important;
    }

    /* Wizard specific */
    #wizard-app .col-lg-4 {
        order: 2;
        /* Sidebar below */
    }
}

/* Tablet/Laptop Fixes (Prevent Overflow on smaller screens) */
@media (max-width: 992px) {

    .hero-subpage,
    .hero-full-width {
        width: 100% !important;
        margin-left: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin-right: 0 !important;
    }
}

/* Wizard Option Card Redesign */
.img-wrapper-relative {
    position: relative;
    overflow: hidden;
}

.price-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-weight: bold;
}


/* Text Indentation Utils */
.indent-1 {
    margin-left: 20px;
}

.indent-2 {
    margin-left: 40px;
}

.indent-3 {
    margin-left: 60px;
}