/**
Theme Name: strelza_child_theme
Author: Moony Graphos
Author URI: https://moonygraphos.com
Description: A child theme for the Strelza website to keep the main theme separate from the base Astra theme.
Features main css customisations for unique animations and interactions.
Features custom php to help with specific backend operations.

To be used so the website doesn\'t break when there is a major update to the various packages and the themes.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: strelza_child_theme
Template: astra
*/

/* Base Style Killer */
/* Reset body to kill default margins */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    /* Prevents horizontal "wobble" on Safari mobile */
    overflow-x: hidden; 
}

/* --- GLOBAL MARGIN KILLER --- */
h1, h2, h3, h4, h5, h6, p, figure {
    margin: 0 !important;
    padding: 0 !important;
}

/* Kills Elementor's default 20px widget spacing */
.elementor-widget {
    margin-bottom: 0 !important;
}

/* Kills Astra's entry content spacing */
.entry-content > *, 
.entry-content {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* Targets the widget wrapper you added the class to */
.clickable-icon {
    cursor: pointer !important;
}

/* Ensures the icon inside also inherits it */
.clickable-icon i, 
.clickable-icon svg {
    cursor: pointer;
}

/* Remove outline on mouse click, but keep it for keyboard tabbing */
:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* --- INSIGHT TILE RESET (NO MARGINS) --- */
/* Hide all tiles by default to prevent layout flash */
/* Show all tiles everywhere by default */
.insight-tile {
    display: flex; 
    opacity: 1;
}

/* Hide them ONLY in the main grid, but DON'T use !important here */
#main-insight-grid .insight-tile {
    display: none; 
    opacity: 0;
}

/* Maintain your existing spacing fixes */
.insight-tile .elementor-widget-image,
.insight-tile .elementor-widget-heading,
.insight-tile .elementor-widget-text-editor,
.insight-tile .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

.insight-tile h2.elementor-heading-title,
.insight-tile .elementor-widget-text-editor p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important; 
}

.insight-tile .elementor-widget-heading { margin-top: 12px !important; }
.insight-tile .elementor-widget-text-editor { margin-top: 12px !important; }

/* Only hide tiles if the URL actually contains a filter */
body:has([query*="filter"]) .insight-tile {
	display: none;
}

#load-more-btn { display: none; }
/* ------------- */

/* Target all bold elements and force the weight */
b, strong, .has-inline-color strong, .ast-strong {
    font-weight: 600 !important;
}

/* Removes outer spacing from the list container */
ul, ol {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

ul li, ol li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.elementor-widget-text-editor ul, 
.elementor-widget-text-editor ol {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.entry-content strong, 
.entry-content b, 
#main strong, 
#main b,
.ast-single-post strong,
article strong {
    font-weight: 500 !important;
}

/* ---ICON FIX--- */
/* 1. THE MAIN WRAPPER (STACKING THE CONTACTS) */
/* This ensures the list goes top-to-bottom */
.elementor-element-45156a5.e-con {
    flex-direction: column !important;
    display: flex !important;
    gap: 24px !important; /* Space between each phone/email row */
}

/* 2. THE INDIVIDUAL ROWS (ICON + TEXT ALIGNMENT) */
/* Targets the sub-containers to align icon and text horizontally */
.elementor-element-45156a5 .e-con-child {
    display: flex !important;
    flex-direction: row !important; /* Keep icon and text side-by-side */
    align-items: center !important;   /* THE FIX: Vertical centering */
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. KILL THE ICON GHOST MARGINS */
.elementor-widget-icon, 
.elementor-icon-wrapper, 
.elementor-icon {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1 !important;
}

/* 4. KILL HEADING BASELINE GAP */
.elementor-widget-heading .elementor-heading-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important; /* Prevents text from pushing the icon down */
}

/* --- CUSTOM HEADER FIXES --- */

/* 1. Hide on Desktop */
@media (min-width: 922px) {
    .ast-header-break-point #ast-desktop-header .mobile-only-item,
    .mobile-only-item {
        display: none !important;
    }
}

/* 2. Force Show on Mobile */
@media (max-width: 921px) {
    /* 1. Reset the List Item */
    li.mobile-only-item {
        display: block !important;
        margin: 0 !important; /* Kills the 'push' below the item */
        padding: 0 !important;
    }

    /* 2. Reset and Rebuild the Link */
    li.mobile-only-item a {
        color: #F27E20 !important;
        font-weight: 500 !important;
        
        /* THE FIX: Force specific height/padding to override Astra */
        padding-top: 18px !important; 
        padding-bottom: 18px !important; 
        
        /* Ensures the link behaves as a solid block */
        display: flex !important;
        align-items: center;
        justify-content: flex-start; /* Or center if you want it aligned like a button */
        
        line-height: 1 !important;
    }
}

@media (max-width: 921px) {
    /* 1. Add the "tail" space to the bottom of the menu list */
    ul#ast-hf-mobile-menu {
        padding-bottom: 24px !important; /* Adjust this to grow/shrink the background */
    }

}



/* --- CUSTOM HEADER FIXES --- */

/* ---FOOTER--- */
/* 1. Target the row container to allow "space-between" */
.site-below-footer-inner-wrap.ast-builder-grid-row {
    max-width: 1128px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important; /* Pushes content to far left and far right */
    align-items: center !important;
    width: 100% !important;
}

/* 2. Target the Left Side (Icons) */
.site-footer-below-section-1 {
    display: flex !important;
    justify-content: flex-start !important;
    flex: 1;
}

/* 3. Target the Right Side (Copyright & Policy) */
.site-footer-below-section-2 {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 24px !important; /* Space between copyright and policy */
    flex: 1;
}

/* Ensure individual elements don't force a wrap */
.site-below-footer-wrap .ast-footer-copyright,
.site-below-footer-wrap .footer-widget-area {
    margin: 0 !important;
    white-space: nowrap !important;
}

/* --- 2. ABOVE FOOTER (Menu & HTML Stack) --- */
.site-above-footer-wrap {
    margin: 96px 0 0 0 !important;
    padding: 0 !important;
}

.site-above-footer-inner-wrap.ast-builder-grid-row {
    max-width: 1128px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important; 
    align-items: flex-start !important;
}

/* Menu (Top) */
.site-above-footer-wrap [data-section="section-footer-menu"] {
    padding-bottom: 24px !important;
    margin-bottom: 0 !important; /* Margin moved to padding of element below */
}

.site-above-footer-wrap .astra-footer-horizontal-menu {
    justify-content: flex-start !important;
    padding: 0 !important;
}

/* 1. Force the individual section wrappers to fill the entire row */
.site-above-footer-inner-wrap .site-footer-above-section-1,
.site-above-footer-inner-wrap .ast-builder-grid-row-container-inner {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important; /* Prevents the 'column' from shrinking */
}

/* 2. Target the Menu element specifically to ensure it spans 100% */
.site-above-footer-wrap [data-section="section-footer-menu"] {
    width: 100% !important;
    display: block !important;
}

/* 3. Ensure the UL inside stretches to allow left/right alignment */
.site-above-footer-wrap .astra-footer-horizontal-menu {
    width: 100% !important;
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* HTML/Widget (Bottom) */
.site-above-footer-wrap .footer-widget-area-inner {
    width: 100% !important;
    border-top: 1px solid #FFF3EA !important;
    padding-top: 24px !important;
}

/* --- 3. MAIN FOOTER (MISSING CODE - ADD THIS IF NEEDED) --- */
.site-primary-footer-wrap {
    /* Add styling here if you have a middle footer section */
		border-top: 0px !important;
}

/* --- 4. RESPONSIVE --- */
@media (max-width: 769px) {
    /* Ensure the UL is actually a flex container */
    .site-above-footer-wrap ul.ast-nav-menu {
        display: flex !important;
        flex-direction: column !important; /* Vertical stack for mobile */
				align-items: flex-start !important;
        gap: 24px !important; /* This now controls the vertical space */
        padding: 0 !important;
        margin: 0 !important;
    }
	
		.site-above-footer-wrap .footer-custom-container {
        padding-top: 48px !important;
				padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ensure the parent widget area also doesn't have stray padding */
    .site-above-footer-wrap .footer-widget-area-inner {
        padding: 0 !important;
    }

    /* Remove the 'fake' gap created by Astra's default link padding */
    .site-above-footer-wrap .ast-nav-menu li a {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important; 
        display: block !important;
    }

    /* Remove margin from the list items */
    .site-above-footer-wrap .ast-nav-menu li {
        margin: 0 !important;
    }
}

/* --- CONSOLIDATED BELOW FOOTER FIX --- */

/* 1. Desktop Layout (Bigger than Tablet) */
@media (min-width: 922px) {
    .site-below-footer-inner-wrap.ast-builder-grid-row {
        max-width: 1128px !important;
        margin: 0 auto !important; /* Centers the 1128px container */
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important; /* Pushes content to far left and right */
        align-items: center !important;
    }

    /* Target the Icon Section (Left) */
    .site-footer-below-section-1 {
        display: flex !important;
        justify-content: flex-start !important;
    }

    .footer-social-inner-wrap {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important; /* Fixed 12px gap for icons on desktop */
    }

    /* Target the Text Section (Right) */
    .site-footer-below-section-2 {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important; /* Pushes text to the right edge */
        align-items: center !important;
        gap: 24px !important;
        text-align: right !important; /* Forces right alignment for internal text */
    }

    .site-footer-below-section-2 .ast-footer-copyright,
    .site-footer-below-section-2 .footer-widget-area {
        text-align: right !important;
        margin: 0 !important;
    }
}

/* 2. Mobile & Tablet Layout */
@media (max-width: 921px) {
    /* Reset padding for flush-left look */
    .site-below-footer-wrap,
    .ast-builder-grid-row-container-inner,
    .site-below-footer-inner-wrap.ast-builder-grid-row,
    .site-footer-below-section-1,
    .site-footer-below-section-2,
    .footer-social-inner-wrap,
    .ast-builder-grid-row .site-footer-section {
        padding-left: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
    }

    .site-below-footer-inner-wrap.ast-builder-grid-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 32px !important;
    }

    /* Social Icons: Row with 12px gap */
    .footer-social-inner-wrap {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .footer-social-inner-wrap .ast-builder-social-element {
        margin: 0 !important;
    }

    /* Copyright & Policy: Stack vertically and stay left */
    .site-footer-below-section-2 {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 12px !important;
        text-align: left !important;
    }

    .site-below-footer-wrap .ast-footer-copyright,
    .site-below-footer-wrap .footer-widget-area {
        white-space: normal !important;
        text-align: left !important;
    }
}
/* ---FOOTER--- */

/* --- 1. GLOBAL TEXT & SVG FIXES --- */
.elementor-widget-text-editor p:last-child { 
    margin-bottom: 0px; 
}

/* Specific SVG handling to prevent "explosive" sizing */
.sector-hover-card svg {
    width: 100% !important;
    height: 100% !important;
}

/* --- 2. THE CARD CONTAINER (THE SIZE FIX) --- */
/* This forces the <a> tag to behave like a Block/Flex container */
.sector-hover-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    text-decoration: none !important;
    align-items: stretch;
    isolation: isolate; /* Forces the stacking context to clip the child */
}

.sector-hover-card .img-hover-container {
    overflow: hidden !important;
    position: relative;
    width: 100% !important;
    /* Fixes Safari overflow bugs */
    -webkit-mask-image: -webkit-radial-gradient(white, black); 
}

/* --- 3. BUTTON & ICON ANIMATIONS --- */
.button-main,
.button-main .elementor-button-text {
    /* Added missing colon and transition property */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.button-main .elementor-button-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transform-origin: center center !important;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.button-main .elementor-button:hover .elementor-button-icon {
    transform: rotate(180deg) !important;
}

.button-main .elementor-button-icon svg {
    margin: 0 !important;
    display: block !important;
}

/* --- 4. IMAGE CORE & HOVER --- */
.sector-hover-card .elementor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.sector-hover-card:hover .elementor-image img {
    transform: scale(1.1);
}

/* --- 5. TYPOGRAPHY HOVER --- */
.sector-hover-card .elementor-heading-title {
    transition: color 0.4s ease !important;
}

.sector-hover-card:hover .elementor-heading-title {
    color: #F27E20 !important; /* Strelza Accent Orange */
}

/* --- 6. ARROW ROTATION (AGGRESSIVE SPECIFICITY) --- */
.sector-hover-card .arrow-icon .elementor-widget-container img {
    transition: transform 0.2s ease-in-out, filter 0.2s ease !important;
    display: block !important;
    transform-origin: center center !important;
}

.sector-hover-card:hover .arrow-icon .elementor-widget-container img {
    transform: rotate(180deg) !important;
    /* Inverts black to #F27E20 Orange */
    filter: invert(45%) sepia(93%) saturate(675%) hue-rotate(349deg) brightness(106%) contrast(90%) !important;
}

/* Specificity: Targets the icon ONLY when BOTH classes are present */
.button-main.button-special .elementor-button:hover .elementor-button-icon {
    transform: rotate(0deg) !important;
}

/* Optional: If you want to stop the text from shifting as well */
.button-main.button-special .elementor-button:hover .elementor-button-text {
    transform: none !important;
}

/* ---Testimonial Card--- */
/* 1. Global Height & Wrap Fix */
.slider-card, 
.slider-card * {
    white-space: normal !important; /* Force text wrapping on everything */
    flex-wrap: wrap !important;     /* Force containers to wrap content */
}

/* 2. Fix the Elementor Text Editor specifically */
.slider-card .elementor-widget-text-editor,
.slider-card .elementor-text-editor {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important; /* Break flex behavior if it's causing the "one-line" issue */
}

/* 3. Viewport and Track */
.slider-viewport {
    max-width: 100%; /* Stretch to full width */
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.slider-card {
    flex: 0 0 100% !important; 
    width: 100% !important;
    margin: 0 !important; /* Added to ensure perfect 100% fit */
}

.slider-track {
    display: flex;
    gap: 0;
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth sliding */
}

.slider-viewport:hover .slider-track {
    /* JS handles the actual pause, this is just for CSS safety */
}

/* Dot Navigation Styling */
.slider-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 0px !important;
    width: 100% !important;
    height: 6px !important;
    z-index: 10 !important;
    position: relative !important;
}

.dot {
    width: 6px !important;
    height: 6px !important;
    background-color: #FFF3EA !important; /* Light grey */
    border-radius: 50% !important;
    cursor: pointer !important;
}

.dot.is-active {
    background-color: #F27E20 !important; /* Your brand orange */
}

/* 5. Mobile Override */
@media (max-width: 1024px) {
    .slider-viewport {
        max-width: 100%;
        /* REMOVED: overflow-x: auto and scroll-snap */
        overflow: hidden; 
        padding: 0; /* Align with desktop for JS consistency */
    }

    .slider-track {
        /* Ensure the track doesn't try to wrap on mobile */
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .slider-card {
        /* Force cards to be exactly 100% of the viewport width */
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* ---TESTIMONIAL CARD--- */

/* ---PROJECT PAGE--- */
/* Container Reset */
.project-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* Base Tile Styling */
.project-grid-wrapper .project-tile {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Desktop: 3 Columns (subtracting 2/3 of total gap space) */
@media (min-width: 1025px) {
    .project-grid-wrapper .project-tile {
        width: calc(33.333% - 16px);
    }
}

/* Tablet: 2 Columns (subtracting 1/2 of total gap space) */
@media (max-width: 1024px) and (min-width: 768px) {
    .project-grid-wrapper .project-tile {
        width: calc(50% - 12px);
    }
}

/* Mobile: 1 Column */
@media (max-width: 767px) {
    .project-grid-wrapper .project-tile {
        width: 100%;
    }
}

/* Base state: Hidden */
.project-tile.is-hidden {
    display: none !important;
}

/* Base state: Visible (Flex) */
.project-tile.is-visible {
    display: flex !important;
}
/* ---PROJECT PAGE--- */

.filter-btn.is-active .elementor-button {
    color: #F27E20 !important;
}

/* ---INSIGHT PAGE--- */
/* --- SHARED LAYOUT & GRID --- */
.insight-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
}

.insight-tile {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    text-decoration: none !important;
}

/* Responsive Column Math */
@media (min-width: 1025px) { .insight-tile { width: calc(33.333% - 16px); } }
@media (max-width: 1024px) and (min-width: 768px) { .insight-tile { width: calc(50% - 12px); } }
@media (max-width: 767px) { .insight-tile { width: 100%; } }

/* Filter States */
.insight-tile.is-hidden { display: none !important; }
.insight-tile.is-visible { display: flex !important; }

/* --- BRAND TYPOGRAPHY --- */

/* Heading Styling (Work Sans) */
.insight-tile .elementor-heading-title {
    font-family: "Work Sans", Sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: -0.18px !important;
    text-decoration: none !important;
    margin: 15px 0 10px 0 !important;
    color: #2B3036; /* Keeps brand primary color initially */
}

/* Description Styling (Global Elementor Vars) */
.insight-tile .elementor-widget-text-editor .elementor-widget-container {
    font-family: var(--e-global-typography-649113f-font-family), Sans-serif;
    font-size: var(--e-global-typography-649113f-font-size);
    font-weight: var(--e-global-typography-649113f-font-weight);
    line-height: var(--e-global-typography-649113f-line-height);
    letter-spacing: var(--e-global-typography-649113f-letter-spacing);
    color: var(--e-global-color-secondary);
    text-decoration: none !important;
}

/* --- INTERACTION & ANIMATION --- */
.insight-tile .elementor-widget-image {
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Ensures 1:1 ratio */
}

.insight-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.insight-tile:hover img {
    transform: scale(1.1);
}

.insight-tile:hover .elementor-heading-title {
    color: #F27E20 !important; /* Strelza Accent Color */
    transition: color 0.3s ease;
}
/* ---INSIGHT PAGE--- */

/* ---CAREERS--- */
.job-filter-section {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 50px; /* Adjust this if you have a sticky header */
    height: fit-content; /* Critical: Prevents the container from stretching */
    align-self: flex-start; /* Required for sticky inside flex columns */
    z-index: 100;
}
/* ---CAREERS--- */

/* ---WP-FORMS--- */
/* --- Brand Variables --- */
:root {
    --wpf-primary: #2B3036;
    --wpf-accent: #F27E20; 
    --wpf-border: #F0EBE8;
    --wpf-bg: #ffffff;
    --wpf-radius: 0px;
    --wpf-font: 'Work Sans', sans-serif;
    
    /* Precision Spacing Variables */
    --wpf-label-gap: 6px;
    --wpf-field-gap: 24px;
}

/* --- Global Form Typography --- */
.wpforms-container, 
.wpforms-form input, 
.wpforms-form textarea, 
.wpforms-form label,
.wpforms-form button {
    font-family: var(--wpf-font) !important;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

/* --- Field-to-Field Spacing (24px) --- */
/* This controls the gap between the rows/flex items in the form */
.wpforms-form .wpforms-field {
    margin-bottom: var(--wpf-field-gap) !important;
    padding: 0 !important;
}

/* --- Label-to-Input Spacing (6px) --- */
.wpforms-form .wpforms-field-label {
    font-weight: 500;
    font-size: 14px;
    display: block;
    color: var(--wpf-primary);
    margin-bottom: var(--wpf-label-gap) !important; 
    padding-bottom: 0 !important;
}

/* --- Field below the divider --- */
.wpforms-form .wpforms-field.below-divider {
    /* Reset the global gap so we don't double up */
    margin-top: 0 !important; 
    padding-top: var(--wpf-field-gap) !important; 
    clear: both !important;
}

/* --- Field below the divider --- */
.wpforms-form .wpforms-field.below-divider {
    /* Reset the global gap so we don't double up */
    margin-top: 0 !important; 
    padding-top: 0 !important; 
    clear: both !important;
}

/* --- The Submit Button Row --- */
.wpforms-form .wpforms-submit-container {
    /* WPForms puts a margin-bottom on the LAST field. 
       We reset this to ensure exactly 24px spacing. */
    margin-top: 0 !important;
    padding-top: var(--wpf-field-gap) !important;
    display: block !important;
    clear: both !important;
}

/* --- The Submit Button (360px & Left Aligned) --- */
/* --- THE SUBMIT BUTTON (HIGH-PRIORITY OVERRIDE) --- */
/* We target the container + the button to beat Astra/WPForms specificity */
div.wpforms-container-full .wpforms-form button[type=submit],
div.wpforms-container-full .wpforms-form button[type=submit]:hover,
div.wpforms-container-full .wpforms-form button[type=submit]:active,
div.wpforms-container-full .wpforms-form button[type=submit]:focus {
    /* Layout & Box Model */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 360px !important;
    height: 56px !important;
    padding: 0 24px !important;
    border: none !important;
    outline: none !important;
    
    /* Visuals (Kills Dimming/Transitions) */
    opacity: 1 !important;
    filter: none !important; 
    box-shadow: none !important;
    transition: none !important; 
    transform: none !important; /* Kills Astra's hover "lift" */
    
    /* Typography */
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

/* --- THE COLORS & OVERLAY KILLER --- */
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: var(--wpf-primary) !important;
    color: #ffffff !important;
}

div.wpforms-container-full .wpforms-form button[type=submit]:hover {
    /* Set the solid color and ensure NO other background properties exist */
    background-color: var(--wpf-accent) !important;
    background-image: none !important; 
    color: #ffffff !important;
}

/* Kills hidden "shading" layers that cause dimming */
div.wpforms-container-full .wpforms-form button[type=submit]::before {
    display: none !important;
    content: none !important;
}

/* Reinforce the opacity on the specific hover state */
div.wpforms-container-full .wpforms-form button[type=submit]:hover {
    opacity: 1 !important;
    filter: brightness(100%) !important;
}

/* --- THE ARROW (FIXED POSITION) --- */
div.wpforms-container-full .wpforms-form button[type=submit]::after {
    content: '' !important;
    margin-left: 10px !important;
    display: flex !important;
    width: 20px !important;
    height: 20px !important;
    
    background-color: #ffffff !important;
    -webkit-mask-image: url('https://strelza.com/wp-content/uploads/2026/02/Long-Arrow-Icon-Monochrome.svg');
    mask-image: url('https://strelza.com/wp-content/uploads/2026/02/Long-Arrow-Icon-Monochrome.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    
    transform-origin: center center !important;
    transition: none !important; 
    transform: rotate(0deg) !important;
}

div.wpforms-container-full .wpforms-form button[type=submit]:hover::after {
    transform: rotate(-180deg) !important;
    background-color: #ffffff !important;
}

/* --- Input & Textarea Refinement --- */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea {
    background-color: var(--wpf-bg) !important;
    border: 1px solid var(--wpf-border) !important;
    border-radius: var(--wpf-radius) !important;
    padding: 10px 12px !important;
}

/* --- Smart Phone Field Add-on Override --- */

/* 1. Target the specific input class used by the addon */
input.iti__tel-input {
    background-color: var(--wpf-bg) !important;
    border: 1px solid var(--wpf-border) !important;
    border-radius: var(--wpf-radius) !important;
    
    /* Matching your height/padding from other fields */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-right: 12px !important;
    /* Note: We do NOT force padding-left to 12px to keep space for the flag */
    
    font-family: var(--wpf-font) !important;
    font-size: 16px !important;
    color: var(--wpf-primary) !important;
    width: 100% !important;
    transition: border-color 0.3s ease !important;
}

/* 2. Hover and Focus States */
input.iti__tel-input:hover {
    border-color: #999 !important; /* Subtle hover state */
}

input.iti__tel-input:focus {
    border-color: var(--wpf-accent) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 3. Adjust the Flag Dropdown Border (Optional) */
/* If the line between the flag and the number looks off, use this: */
.iti__selected-flag {
    border-right: 0px none !important; /* Removes internal divider if desired */
    background-color: transparent !important;
}

/* --- STRICT BRAND ALIGNMENT: DROPDOWNS, NUMBERS, & UPLOADS --- */
/* --- 1. THE MODERN SELECT (CHOICES.JS) FIX --- */
/* We target the div that WPForms actually shows to the user */
.wpforms-field-select-style-modern .choices__inner,
.wpforms-field-select-style-modern .choices__list--dropdown {
    background-color: var(--wpf-bg) !important;
    border: 1px solid var(--wpf-border) !important;
    border-radius: 0 !important; /* Forces the sharp corner */
    box-shadow: none !important;
}

/* Match the height and vertical alignment of the modern dropdown */
.wpforms-field-select-style-modern .choices__inner {
    height: 43px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
}

/* Fix the dropdown "pop-out" list corners */
.wpforms-field-select-style-modern .choices__list--dropdown {
    margin-top: -1px !important; /* Merge border with top input */
}

/* --- 2. THE NUMBER FIELD --- */
.wpforms-form input[type="number"] {
    background-color: var(--wpf-bg) !important;
    border: 1px solid var(--wpf-border) !important;
    border-radius: 0 !important;
    height: 43px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* Remove number arrows (spinners) */
.wpforms-form input[type="number"]::-webkit-inner-spin-button,
.wpforms-form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- 3. FOCUS STATES --- */
.wpforms-field-select-style-modern .is-focused .choices__inner,
.wpforms-form input[type="number"]:focus {
    border-color: var(--wpf-accent) !important;
}

/* Hide the input field and description, keeping only the label */
.custom-divider input, 
.custom-divider .wpforms-field-description {
    display: none !important;
}

/* Style the label as a clean Section Header */
.custom-divider label.wpforms-field-label {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 28px;
    letter-spacing: -0.6px;
    color: #000;
    margin: 35px 0 15px 0; /* Top spacing for section break */
    padding: 0;
}

@media only screen and (max-width: 768px) {
    /* Target WPForms Grid Columns */
    .wpforms-form .wpforms-field.wpforms-list-inline-columns .wpforms-list-inline-column,
    .wpforms-form .wpforms-field.wpforms-two-columns,
    .wpforms-form .wpforms-field.wpforms-three-columns,
    .wpforms-form .wpforms-field.wpforms-one-half,
    .wpforms-form .wpforms-field.wpforms-one-third,
    .wpforms-form .wpforms-field.wpforms-two-thirds {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        float: none !important;
        clear: both !important;
    }

    /* Force the field container to release any flex layouts */
    .wpforms-field-container {
        display: block !important;
    }

    /* Ensure the phone field doesn't exceed screen width */
    .wpforms-pcafe-smart-phone-field {
        width: 100% !important;
    }
}

/* 1. Collapse the main form container after success */
.wpforms-confirmation-container-full {
    margin-top: 0 !important;
    padding-top: 20px !important; /* Small padding for the message */
    padding-bottom: 20px !important;
    min-height: 0 !important; 
}

/* 2. Kill the ghost padding from the submit container */
.wpforms-confirmation-container-full ~ .wpforms-submit-container,
.wpforms-form:has(.wpforms-confirmation-container-full) .wpforms-submit-container {
    display: none !important;
}

/* 3. Ensure the Elementor Widget itself doesn't have a fixed height */
.elementor-widget-wpforms {
    height: auto !important;
}

.wpforms-confirmation-container-full {
    background: var(--wpf-bg) !important;
    border: 1px solid var(--wpf-border) !important;
    font-family: var(--wpf-font) !important;
    color: var(--wpf-primary) !important;
    font-size: 16px;
    text-align: center;
}

/* 1. Prevent the row jump */
#wpforms-4972-field_11-container {
    width: 45% !important;
    float: left !important;
    clear: none !important;
    display: flex !important;
    flex-direction: column !important; /* Stack label and input */
}

/* 2. Target the input to keep the text on the same line as the button */
#wpforms-4927-field_11-container input[type="file"],
#wpforms-4972-field_11-container input[type="file"] {
    width: 100% !important;
    display: block !important;
    font-family: var(--wpf-font) !important;
    font-size: 14px !important;
    color: var(--wpf-primary) !important;
    white-space: nowrap !important; /* Forces text to stay on one line */
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Adds '...' if filename is too long */
}

/* 3. Style the button specifically to save space */
#wpforms-4927-field_11-container input[type="file"]::-webkit-file-upload-button,
#wpforms-4972-field_11-container input[type="file"]::-webkit-file-upload-button {
    background-color: var(--wpf-primary) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 8px !important;
    margin-right: 06px !important;
    border-radius: var(--wpf-radius) !important;
    font-family: var(--wpf-font) !important;
	font-weight: 500 !important;
    cursor: pointer !important;
}

* 1. Chrome, Safari, and Edge Hover */
#wpforms-4927-field_11-container input[type="file"]:hover::-webkit-file-upload-button,
#wpforms-4972-field_11-container input[type="file"]:hover::-webkit-file-upload-button {
    background-color: var(--wpf-accent) !important; /* Your brand orange */
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

/* 2. Firefox Hover */
#wpforms-4927-field_11-container input[type="file"]:hover::file-selector-button,
#wpforms-4972-field_11-container input[type="file"]:hover::file-selector-button {
    background-color: var(--wpf-accent) !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

/* 3. Smooth transition for the base state (Add this to your existing button CSS) */
#wpforms-4972-field_11-container input[type="file"]::-webkit-file-upload-button,
#wpforms-4972-field_11-container input[type="file"]::-webkit-file-upload-button {
    transition: background-color 0.3s ease !important;
}
/* ---WP-FORMS--- */