/*
Theme Name: Astra Child
Theme URI: https://wp-themes.com/astra
Author: Software Solutions House
Author URI: https://www.softwaresolutionshouse.com
Template: astra
License: GNU General Public License v3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Version: 1.0.0
Text Domain: astra-child
Description: Astra Child theme.
This theme, like WordPress, is licensed under the GPL.
*/


/******************************************
                Fix and Overrides
******************************************/


/* Fixed main menu bg color */

/* ul#ast-hf-menu-1 {
    background-color: transparent;
} */


/* Override anchor color */

/* a,
.page-title {
    color: var(--ast-global-color-0);
} */


/* Logo spacing and image size */

/* .ast-logo-title-inline .ast-site-identity {
    padding: 0;
}

.ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo img {
    max-width: 50px;
    width: 50px;
}

.ast-logo-title-inline .site-logo-img {
    padding-right: 6px !important;
} */


/******************************************
                Home page
******************************************/

@media screen and (min-width: 820px) {
    .verto-testimonials {
        .slick-list {
            overflow: inherit;
        }
    }
}

/* Testimonials */
.verto-testimonials {
   box-sizing: border-box;
    transition-property: box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease;
    .slick-list {
        /* overflow: inherit; */
        .slick-slide {
            box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
            padding: 30px;
            margin-top: 15px !important;
            margin-bottom: 15px !important;
            margin-left: 15px;
            margin-right: 15px;
            overflow: visible;
            order: initial;
            border-radius: 20px;
            border-color: inherit;
            background-color: var(--ast-global-color-5);
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            flex-wrap: nowrap;
            row-gap: 20px;
            column-gap: 20px;
        }
    }
} 

/* logo */
/* .site-description {
    max-width: 130px;
    line-height: 1.01 !important;
    font-size: 16px !important;
    font-weight: 600;
} */





/******************************************
                General Style
******************************************/

.d-none {
    display: none;
}

/******************************************
                Single product page
******************************************/

/* Remove margin from primary container */
.ast-separate-container #primary {
    margin-top: 0 !important;
}
@media (max-width: 768px) {
    .ast-separate-container #primary {
        padding-top: 0 !important;
    }
}



@media (max-width: 768px) {
    .woocommerce-product-details__short-description {
        margin-bottom: 30px !important;
        border-bottom: 1px solid var(--ast-border-color);
    }
}

/*
 * Product Tabs Under Image Gallery - Keep in Left Column
 *******************************************************
 */
.woocommerce div.product .woocommerce-tabs {
    clear: none !important;
    width: auto !important;
    max-width: 100%;
    padding: 0;
    margin-bottom: 0 !important;
    float: left !important;
}

/* On desktop, tabs stay in left column with gallery */
@media (min-width: 769px) {
    .ast-separate-container .ast-woocommerce-container {
        padding: 3.34em 2.4em !important;
    }
    .woocommerce div.product .woocommerce-tabs {
        width: 48% !important;
        max-width: 48%;
    }
    
    .woocommerce div.product .summary.entry-summary {
        float: right !important;
        width: 48% !important;
        clear: none !important;
    }
}

/* On mobile, full width */
@media (max-width: 768px) {
    .woocommerce div.product .woocommerce-tabs {
        width: 100% !important;
        float: none !important;
    }
    
    .woocommerce div.product .summary.entry-summary {
        width: 100% !important;
        float: none !important;
    }
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 1.5rem 0;
    border-bottom: 2px solid #e0e0e0;
    list-style: none;
    display: flex;
    gap: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 0.75rem 1.5rem;
    color: #666;
    font-weight: 500;
    display: block;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: #DCA54A;
    background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #DCA54A;
    border-bottom-color: #DCA54A;
    background: transparent;
}

.woocommerce div.product .woocommerce-tabs .panel {
    padding: 1rem 0;
}
.woocommerce-js div.product section.related.products{
    display: inline-table;
    border-top: 1px solid var(--ast-border-color);
    padding-top: 20px;
    clear: both;
    width: 100%;
}


/*
 * Product Totals & Payment Styling (Sticky via JS)
 ***************************************************
 */
@media (min-width: 769px) {
    .wapf-product-totals{
        position: fixed;
        top: 20%;
        right: 0;
        z-index: 1000;
        width: 300px!important;
        background: #fff;
        border: 2px solid #e0e0e0;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        transition: box-shadow 0.3s ease;
        border-top: 3px solid #DCA54A;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
    /* width: 80%!important; */
    margin-left: auto;
}


/* 
 * Field Container Spacing
 ***************************************************
 */
@media (min-width: 769px) {
    .wapf-wrapper {
        background: #fff;
        padding: 1.5rem;
        border-radius: 0;
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
}

/*
 * Product Meta (Category & Tags) - Visual Reorder with Flexbox
 ***************************************************
 */


/* Product Meta Styling */
.product_meta {
    margin: 1.5rem 0;
    padding: 1rem;
    border-top: 1px solid var(--ast-border-color);
    background: var(--ast-global-color-4);
}


/*
 * WAPF Image Swatches - Modern Flat Design
 ***************************************************
 */
.wapf-field-label {
    margin-bottom: 0.75rem;
    
    label {
        font-weight: 600;
        font-size: 1rem;
        color: #333;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
}

/* Image Swatch Wrapper */
.wapf-image-swatch-wrapper,
.wapf-swatch-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

/* Individual Swatch - Flat Design */
.wapf-swatch {
    position: relative;
    border: 1px solid #d0d0d0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    /* Remove default styles */
    box-shadow: none !important;
    
    &:hover {
        border-color: #DCA54A !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(220, 165, 74, 0.2) !important;
    }
    
    /* Hide the radio input */
    input[type="radio"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    
    /* Image container */
    img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
        background: #f5f5f5;
        border-radius: 0;
        flex-shrink: 0;
    }
    
    /* Label - Fixed height for consistency */
    .wapf-swatch-label {
        padding: 0.75rem;
        text-align: center;
        font-size: 0.9rem;
        font-weight: 500;
        color: #333;
        background: #fff;
        min-height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        
        .wapf-pricing-hint {
            display: block;
            margin-top: 0.25rem;
            font-size: 0.85rem;
            color: #DCA54A;
            font-weight: 600;
            min-height: 1.2em;
        }
    }
}

/* Checked/Selected State */
.wapf-swatch.wapf-checked {
    border: 2px solid #DCA54A !important;
    background: #fffbf5 !important;
    box-shadow: 0 4px 16px rgba(220, 165, 74, 0.25) !important;
    
    &::after {
        content: '✓';
        position: absolute;
        top: 8px;
        right: 8px;
        background: #ffc904;
        color: #333;
        width: 28px;
        height: 28px;
        border-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 16px;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .wapf-swatch-label {
        color: #DCA54A;
        font-weight: 600;
    }
}

/* Color Swatches - Flat Style */
.wapf-swatch--color {
    min-height: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    
    .wapf-color {
        width: 50px !important;
        height: 50px !important;
        border-radius: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 3px solid #fff;
    }
    
    .wapf-ttp {
        font-size: 0.85rem;
        font-weight: 500;
        color: #666;
    }
    
    &.wapf-checked {
        border: 2px solid #DCA54A !important;
        
        .wapf-color {
            border-color: #DCA54A;
            box-shadow: 0 4px 12px rgba(220, 165, 74, 0.3);
        }
        
        .wapf-ttp span {
            color: #DCA54A;
            font-weight: 600;
        }
    }
}

/* Responsive Grid */
@media (max-width: 768px) {
    .wapf-image-swatch-wrapper,
    .wapf-swatch-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.75rem;
    }
    
    .wapf-swatch img {
        height: 90px;
    }
}

@media (max-width: 480px) {
    .wapf-image-swatch-wrapper,
    .wapf-swatch-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Select Dropdown Styling */
.wapf-field-input select.wapf-input,
.wapf-field-input input[type="text"].wapf-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    font-size: 1rem;
    color: #333;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
        border-color: #DCA54A;
    }
    
    &:focus {
        outline: none;
        border-color: #DCA54A;
        box-shadow: 0 0 0 3px rgba(220, 165, 74, 0.1);
    }
}

/* Text Input Styling */
.wapf-field-input input[type="text"].wapf-input {   
    &::placeholder {
        color: #999;
    }
}

/******************************************
            Number plate builder
******************************************/




/*************************************************************
 * SHOP PAGE - MODERN AUTOMOTIVE DESIGN
 * Sporty, bold styling for number plate products
 *************************************************************/

 .woocommerce-shop {
    #secondary, 
    #primary {
        margin: 0 !important;
        padding-top: 20px;
    }

    #primary {
        background: var(--ast-global-color-5);
        padding-left: 20px;
        padding-right: 20px;
    }

    #secondary {
        padding: 2rem 1rem;
    }
    .ast-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Shop Header & Layout */
.woocommerce-products-header__title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.woocommerce-breadcrumb a:hover {
    color: var(--ast-global-color-0);
}

/* Result Count & Ordering */
.woocommerce-result-count {
    font-weight: 600;
    color: #666;
    font-size: 0.95rem;
}

.woocommerce-ordering select {
    border: 2px solid #e0e0e0;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 0;
    border: 1px solid var(--ast-border-color)!important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus {
    border-color: #ffc904;
    outline: none;
}

/*************************************************************
 * SIDEBAR FILTERS - MODERN & CLEAN
 *************************************************************/

.widget-area.secondary {
    background: var(--ast-global-color-5);
}

/* Filter Headings */
.widget h3.wp-block-heading,
.widget h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid #ffc904;
}

/* Filter Widget Containers */
/* Category Filter Checkboxes */
.wc-block-product-filter-checkbox-list__item {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    border-radius: 0;
    /* transition: background 0.2s ease; */
}

.wc-block-product-filter-checkbox-list__item:hover {
    background: #f9f9f9;
}

.wc-block-product-filter-checkbox-list__label {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    color: #333;
}

.wc-block-product-filter-checkbox-list__input-wrapper {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 0.75rem;
}

.wc-block-product-filter-checkbox-list__input {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: #ffc904;
}

.wc-block-product-filter-checkbox-list__text {
    flex: 1;
    font-size: 0.95rem;
}

.wc-block-product-filter-checkbox-list__count {
    font-weight: 600;
    color: #999;
    font-size: 0.85rem;
}

/* Tag Filter Radio Buttons */
.product-tag-filter-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tag-filter-item {
    margin-bottom: 0.75rem !important;
    padding: 0.5rem;
    border-radius: 0;
    transition: background 0.2s ease;
}

.tag-filter-item:hover {
    background: #f9f9f9;
}

.tag-filter-item label {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    gap: 0.75rem !important;
    font-weight: 500;
}

.tag-filter-item input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #ffc904;
}

.tag-name {
    flex: 1;
    font-weight: 500 !important;
    color: #333;
    font-size: 0.95rem;
}

.tag-count {
    color: #999 !important;
    font-size: 0.85rem !important;
    font-weight: 600;
}

/* Mobile Filter Button */
.wc-block-product-filters__open-overlay {
    display: none;
    width: 100%;
    padding: 1rem;
    background: #111;
    color: #fff;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease;
}

.wc-block-product-filters__open-overlay:hover {
    background: #ffc904;
    color: #111;
}

/*************************************************************
 * PRODUCT GRID - SPORTY CARD DESIGN
 *************************************************************/

.products {
    display: grid !important;
    gap: 2rem !important;
    margin-top: 2rem !important;
    
    /* Product Card */
    li.product {
        background: #fff;
        border: 1px solid var(--ast-border-color)!important;
        padding: 0;
        margin: 0 !important;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #ffc904 0%, #DCA54A 100%);
            transform: scaleX(0);
            transition: transform 0.4s ease;
        }
        &:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
            border-color: #ffc904;
            background: var(--ast-global-color-0) !important;
            color: #111 !important;
            border-color: var(--ast-global-color-0) !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 201, 4, 0.4);
            &::before {
                transform: scaleX(1);
            }
            .astra-shop-thumbnail-wrap img {
                transform: scale(1.08);
            }
           
      
        }/* Featured Badge */
        &.featured {
            border-color: var(--ast-global-color-0);
            &::after {
                content: 'FEATURED';
                position: absolute;
                top: 1rem;
                right: -2.5rem;
                background: var(--ast-global-color-0);
                color: #111;
                padding: 0.4rem 3rem;
                font-size: 0.7rem;
                font-weight: 800;
                letter-spacing: 1px;
                transform: rotate(45deg);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            }
        }
        /* Product Image */
        .astra-shop-thumbnail-wrap {
            position: relative;
            overflow: hidden;
            background: #f8f8f8;
            & img {
                width: 100%;
                height: auto;
                transition: transform 0.5s ease;
                margin: 0 !important;
            }
        }

        /* Product Summary Wrapper */
        .astra-shop-summary-wrap {
            padding: 1.5rem;

            /* Category Badge */
            .ast-woo-product-category {
                display: inline-block;
                background: #ffc904;
                color: #000 !important;
                border: 3px solid #000;
                border-style: double;
                padding: 0.4rem 1rem;
                font-size: 0.75rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1px;
                margin-bottom: 0.75rem;
                border-radius: 8px;
                opacity: 1 !important;
            }
        }
        /* Product Title */
        .woocommerce-loop-product__title {
            font-size: 1.15rem;
            font-weight: 700;
            color: #111;
            margin: 0.75rem 0 !important;
            line-height: 1.3;
            transition: color 0.3s ease;
        }
        /* Price Styling */
        .price {
            font-size: 1.5rem !important;
            font-weight: 800 !important;
            color: #111 !important;
            margin: 1rem 0 !important;
            .woocommerce-Price-amount {
                color: var(--ast-global-color-0) !important;
            }
        }
        /* Select Options Button */
        .button {
            width: 100%;
            padding: 1rem !important;
            background: #111 !important;
            color: #fff !important;
            border: 2px solid #111 !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 1px !important;
            font-size: 0.9rem !important;
            transition: all 0.3s ease !important;
            border-radius: 0 !important;
        }    
    }
}

/*************************************************************
 * PAGINATION - SPORTY STYLE
 *************************************************************/

.woocommerce-pagination {
    margin: 3rem 0;
    text-align: center;
}


/*************************************************************
 * RESPONSIVE DESIGN
 *************************************************************/

@media (max-width: 1024px) {
    .products {
        gap: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .woocommerce-products-header__title {
        font-size: 2rem;
    }
    
    .products {
        gap: 1.5rem !important;
        li.product.featured::after {
            font-size: 0.65rem;
            padding: 0.3rem 2.5rem;
        }
    }
    
    .wc-block-product-filters__open-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }    
}

@media (max-width: 480px) {
    .woocommerce-products-header__title {
        font-size: 1.75rem;
    }
    
    .products li.product .price {
        font-size: 1.3rem !important;
    }
    
    .woocommerce-loop-product__title {
        font-size: 1rem;
    }
}