/* ==========================================================================
   Phase 3: Premium UI/UX Visual Stylesheet
   Australian Waste Management
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* Brand Colors */
    --color-green-dark:     #168241;
    --color-green-mid:      #1DAE57;
    --color-green-light:    #28a745;
    --color-green-pale:     #eef9ee;
    --color-green-accent:   #B9D434;
    --color-green-accent2:  #d7f83c;

    --color-brown-dark:     #402e15;
    --color-brown-mid:      #271c07;
    --color-brown-light:    #6f5219;

    --color-orange-cta:     #DF3F1A;
    --color-orange-hover:   #EC632C;
    --color-orange-warm:    #DFA050;
    --color-orange-bright:  #e29d13;

    /* Neutrals */
    --color-white:          #ffffff;
    --color-off-white:      #f9f9f9;
    --color-grey-light:     #f5f5f5;
    --color-grey-mid:       #dddddd;
    --color-grey-dark:      #666666;
    --color-text-primary:   #402e15;
    --color-text-secondary: #555555;

    /* Typography */
    --font-heading:  'RobotoCnBold', Arial, sans-serif;
    --font-body:     Arial, Helvetica, sans-serif;
    --font-medium:   'RobotoLtMed', Arial, sans-serif;

    /* Spacing Scale */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   40px;
    --space-2xl:  60px;

    /* Border Radius */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-pill: 50px;

    /* Shadows */
    --shadow-sm:    0 2px 6px rgba(0,0,0,0.06);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:    0 8px 32px rgba(0,0,0,0.14);
    --shadow-green: 0 4px 20px rgba(22,130,65,0.18);

    /* Transitions */
    --transition-fast:   0.15s ease;
    --transition-mid:    0.25s ease;
    --transition-slow:   0.4s ease;
}

/* --------------------------------------------------------------------------
   2. Navigation — Smooth Hover Underlines & Active State
   -------------------------------------------------------------------------- */

/* Individual nav items: subtle animated underline */
#menu li > a {
    position: relative;
    transition: opacity var(--transition-mid);
}

#menu li > a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: var(--color-green-accent);
    transition: width var(--transition-mid), left var(--transition-mid);
}

#menu li > a:hover::after {
    width: 80%;
    left: 10%;
}

/* Price match badge — subtle pulse */
#nav_price_match a {
    transition: filter var(--transition-mid);
}

#nav_price_match a:hover {
    filter: brightness(1.08) drop-shadow(0 0 8px rgba(185,212,52,0.6));
}

/* --------------------------------------------------------------------------
   3. Buttons — Modern Transitions & Elevation
   -------------------------------------------------------------------------- */

/* Standard yellow-green button — add transition & subtle lift */
.button,
button:not([class*="cookie"]) {
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        filter var(--transition-fast);
    border-radius: var(--radius-sm);
}

.button:hover,
button:not([class*="cookie"]):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(185,212,52,0.45);
    filter: brightness(1.05);
}

.button:active,
button:not([class*="cookie"]):active {
    transform: translateY(0);
    box-shadow: none;
}

/* Primary CTA (orange, service pages) */
.button-primary {
    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-mid) !important;
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

/* Shimmer effect on CTA */
.button-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-20deg);
    transition: left 0.55s ease;
    pointer-events: none;
}

.button-primary:hover::before {
    left: 150%;
}

.button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(223,63,26,0.40);
}

/* --------------------------------------------------------------------------
   4. Service & Pricing Containers — Glassmorphism Cards
   -------------------------------------------------------------------------- */

/* Upgrade the checkout/buy block on service pages */
#buy_block {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 4px solid var(--color-green-dark) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition-mid);
}

#buy_block:hover {
    box-shadow: var(--shadow-green);
}

/* Content left area (description panel) */
.services_inner02 .content_left {
    background-color: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-mid);
}

.services_inner02 .content_left:hover {
    box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   5. Phase 2 Component Upgrades (Bin Cards, Trust Signals)
   -------------------------------------------------------------------------- */

/* Bin comparison cards — elevated glassmorphism */
.bin-card {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.6) !important;
    box-shadow: var(--shadow-md) !important;
    transition:
        transform var(--transition-mid),
        box-shadow var(--transition-mid) !important;
    border-radius: var(--radius-md) !important;
}

.bin-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Trust signals — modern pill badges */
.trust-signals {
    background: linear-gradient(135deg, rgba(238,249,238,0.9) 0%, rgba(255,255,255,0.95) 100%) !important;
    border: 1px solid rgba(40,167,69,0.2) !important;
    box-shadow: var(--shadow-sm) !important;
    border-radius: var(--radius-md) !important;
}

.trust-item strong {
    color: var(--color-green-dark) !important;
}

/* Guidelines block */
.guidelines-section {
    border-left-color: var(--color-green-dark) !important;
    background: linear-gradient(to right, rgba(238,249,238,0.9), rgba(255,255,255,0.6)) !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-mid);
}

.guidelines-section:hover {
    box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   6. FAQ Section Upgrades
   -------------------------------------------------------------------------- */

.faq-row {
    background: rgba(255,255,255,0.65);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg) !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-mid);
}

.faq-row:hover {
    box-shadow: var(--shadow-md);
}

.faq-row h3 {
    border-left-color: var(--color-green-dark) !important;
    color: var(--color-green-dark) !important;
    font-size: 1.05em !important;
}

/* --------------------------------------------------------------------------
   7. Inner Page Header ("inner_leaves") — Soft Gradient Overlay
   -------------------------------------------------------------------------- */

#inner_leaves {
    background-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   8. Pricing Tables (services) — Subtle Row Hover
   -------------------------------------------------------------------------- */

.services_table tr {
    transition: background-color var(--transition-fast);
}

.services_table tbody tr:hover td {
    background-color: rgba(22,130,65,0.06) !important;
}

.services_table th {
    background: linear-gradient(to bottom, rgba(22,130,65,0.12), rgba(22,130,65,0.05)) !important;
    color: var(--color-green-dark) !important;
}

/* --------------------------------------------------------------------------
   9. "Back to Services" Button Micro-Interaction
   -------------------------------------------------------------------------- */

.btn_backtoservices,
a[href*="/services/"],
a[href*="/products/"] {
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

/* --------------------------------------------------------------------------
   10. Block Shadow Containers — Glassmorphism Upgrade
   -------------------------------------------------------------------------- */

.block_background {
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-mid);
}

.block_background:hover {
    box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   11. Mobile Responsive Enhancements
   -------------------------------------------------------------------------- */

@media screen and (max-width: 960px) {

    /* Sticky mobile CTA — pinned to bottom on service pages */
    .mobile-sticky-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 500;
        padding: var(--space-sm) var(--space-md);
        background: linear-gradient(135deg, var(--color-orange-cta) 0%, var(--color-orange-bright) 100%);
        box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-md);
    }

    .mobile-sticky-cta a {
        color: #fff !important;
        font-family: var(--font-medium);
        font-size: 1em;
        text-decoration: none !important;
        font-weight: bold;
    }

    /* Improve touch target size for buttons */
    .button,
    .button-primary,
    button {
        min-height: 44px;
        padding: var(--space-sm) var(--space-md);
    }

    /* FAQ rows stack cleanly */
    .faq-row {
        padding: var(--space-sm);
    }
}

@media screen and (max-width: 768px) {
    /* Bigger text for readability */
    .innerpage p {
        font-size: 15px;
    }

    /* Full-width grids collapse well */
    .bin-comparison-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Trust signal items wrap */
    .trust-item {
        min-width: 120px;
    }

    /* Main services listing pages (/services/) mobile alignments */
    .services_t02 {
        background: none !important; /* Disables block01_bg.webp repeating line */
    }

    .services_t02 .content_left,
    .services_t02 .content_right {
        float: none !important;
        width: 100% !important;
        border-right: none !important;
        padding: var(--space-md) 0 !important;
        box-sizing: border-box !important;
    }

    /* Add a clean separator border between the two stacked services in each block_shadow */
    .services_t02 .content_left {
        border-bottom: 1px solid var(--color-grey-mid) !important;
        padding-bottom: var(--space-lg) !important;
        margin-bottom: var(--space-md) !important;
    }

    /* Stack icon and text vertically and center them */
    .services_t02 .services_icon {
        float: none !important;
        display: block !important;
        margin: 0 auto var(--space-md) auto !important;
        max-width: 120px !important;
        height: auto !important;
    }

    .services_t02 .text_container {
        padding-left: 0 !important;
        text-align: center !important;
        float: none !important;
        width: 100% !important;
    }

    /* Center heading and button */
    .services_t02 h3 {
        margin-top: 0 !important;
        margin-bottom: var(--space-sm) !important;
        text-align: center !important;
    }

    .services_t02 .btn_viewmore {
        margin: var(--space-md) auto 0 auto !important;
        display: block !important;
        float: none !important;
    }

    /* Clean up the legacy block_shadow image borders on mobile and replace with modern box-shadow */
    .block_shadow {
        background: var(--color-white) !important;
        box-shadow: var(--shadow-md) !important;
        border-radius: var(--radius-md) !important;
        padding: var(--space-md) var(--space-lg) !important;
        margin-bottom: var(--space-xl) !important;
    }

    .block_shadow::before,
    .block_shadow::after {
        display: none !important; /* Hide shadow_top.webp and shadow_bottom.webp */
    }

    /* Optimize width constraints on mobile to use full width with consistent padding */
    .aboutus_main,
    .aboutus_t02,
    .aboutus_t03,
    .aboutus_t04,
    .services_t01,
    .services_t02,
    .contactus_t01,
    .contactus_t02,
    .contactus_t03,
    .contactus_t04 {
        width: 100% !important;
        box-sizing: border-box !important;
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .services_t01 .content_left {
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Form Attributes & Fieldset overrides for Mobile */
    #attributes fieldset {
        float: none !important;
        width: 100% !important;
        height: auto !important; /* Disables the height: 80px float catching bugs */
        margin-right: 0 !important;
        margin-bottom: var(--space-md) !important;
        padding: 0 !important;
    }

    #attributes label {
        width: 100% !important;
        display: block !important;
        margin-bottom: var(--space-xs) !important;
    }

    /* Make select elements responsive and full-width inside forms */
    #attributes select,
    .checkout_box select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Postcode Check alignment stacks vertically */
    .postcodebox .inputbox {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: var(--space-sm) !important;
    }
    .postcodebox input.inputbox {
        width: 100% !important;
    }

    /* Disable absolute-positioned WebP background shadows to prevent horizontal screen overflow */
    .categoryproducts > li::before,
    .categoryproducts > li::after,
    .categoryproducts2 > li::before,
    .categoryproducts2 > li::after,
    .products_list > li::before,
    .products_list > li::after,
    #products_detail::before,
    #products_detail::after {
        display: none !important;
    }

    /* Apply modern CSS native box-shadows on mobile instead of legacy image borders */
    .categoryproducts > li,
    .subcategory > li,
    .categoryproducts2 > li,
    .products_list > li,
    #products_detail {
        box-shadow: var(--shadow-sm) !important;
        border-radius: var(--radius-md) !important;
        border: 1px solid var(--color-grey-mid) !important;
    }

    /* Responsive Address Inputs in Quote Forms */
    #buy_block li input[type=text].p60 {
        width: 100% !important;
        display: block !important;
        margin-bottom: var(--space-xs) !important;
    }
    #buy_block li input[type=text].p20 {
        width: 48% !important;
        max-width: 48% !important;
        display: inline-block !important;
        margin-left: 0 !important;
        margin-right: 2% !important;
        box-sizing: border-box !important;
    }
    #buy_block li input[type=text].p20:last-child {
        margin-right: 0 !important;
        float: right !important;
    }
}

@media screen and (max-width: 479px) {
    .bin-comparison-grid {
        grid-template-columns: 1fr !important;
    }

    .trust-signals {
        flex-direction: column;
    }

    /* Fluid header menu scaling on narrow viewports to prevent layout overflow */
    #menu li:not(#nav_logo) {
        width: 50px !important;
    }
    #menu #nav_logo {
        width: 100px !important;
        height: 106px !important; /* Maintain logo aspect ratio scaling */
    }
    #menu li, #menu #nav_logo {
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}

/* --------------------------------------------------------------------------
   12. Smooth Scroll & Focus Accessibility
   -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-green-mid);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   13. Service Extra Boxes (inline upsell cards)
   -------------------------------------------------------------------------- */

.service_extra_box {
    transition: transform var(--transition-mid), box-shadow var(--transition-mid);
    border-radius: var(--radius-md) !important;
}

.service_extra_box:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   14. General Content Links — Smooth Decoration Transition
   -------------------------------------------------------------------------- */

.innerpage a:link,
.innerpage a:visited {
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.innerpage a:hover {
    text-decoration-color: var(--color-green-mid);
}

/* --------------------------------------------------------------------------
   15. Product / Listing Image Container — Hover Zoom
   -------------------------------------------------------------------------- */

.products_list .img_container img,
.bin-card img {
    transition: transform var(--transition-slow);
}

.products_list li:hover .img_container img {
    transform: scale(1.04);
}

/* --------------------------------------------------------------------------
   16. Slick Carousel — Dot & Arrow Polish
   -------------------------------------------------------------------------- */

.slick-dots li button:before {
    color: var(--color-green-dark) !important;
    opacity: 0.4;
    transition: opacity var(--transition-fast);
}

.slick-dots li.slick-active button:before {
    opacity: 1 !important;
}

.slick-prev:before,
.slick-next:before {
    color: var(--color-green-dark) !important;
}