/**
 	Theme Name: WebfulBox
	Description: WebfulBox WordPress theme is best WordPress theme suitable for many types of business fields. Doctors and clinics can use this WebfulBox WordPress theme to further fialize their medical WordPress website.
	Author: Webful Creations
	Author URI: https://www.webfulcreations.com/
	Theme URI: https://www.webfulcreations.com/products/
	Version: 1.3
	License: GNU General Public License v3 or later
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Tags: one-column, two-columns, right-sidebar, custom-colors, custom-header, custom-menu, featured-images, post-formats, translation-ready, left-sidebar
	Text Domain: webfulbox
*/

/*-------------------------------------------------------------------------------------------------------------  

	- Main CSS file is inside 
	- asses/css/theme-style.css
	
	- Table Content For CSS is also in 
	- assets/css/theme-style.css
	
	- Mobile or Tablet CSS is in Folder
	- assets/css/mobile-tab.css

	- Note: Below this line you can add your CSS 

-------------------------------------------------------------------------------------------------------------*/

/* =========================================================
   PRO E-COMMERCE REDESIGN (VERSION 2)
   ========================================================= */

/* --- 1. Top Bar: Results Count & Sorting --- */
p.woocommerce-result-count {
    color: #718096;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 25px;
}

form.woocommerce-ordering select {
    padding: 10px 35px 10px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fafc;
    color: #2d3748;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: all 0.2s ease;
}

form.woocommerce-ordering select:focus {
    outline: none;
    border-color: #d83b3b;
    box-shadow: 0 0 0 3px rgba(216, 59, 59, 0.15);
}

/* --- 2. Product Grid Cards (FIXED OVERLAP & HEIGHTS) --- */
.product-wrapper {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid #f0f4f8;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Layout fixes */
    display: flex;
    flex-direction: column;
    margin-bottom: 30px; /* Fixes the vertical overlapping rows */
    height: calc(100% - 30px); /* Keeps cards equal height in the grid */
    min-height: 100%;
}

.product-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #e2e8f0;
}

/* Fixed Image Area (Uniform sizes for iPads and iMacs) */
.product-wrapper img {
    width: 100%;
    height: 200px; /* Forces all images to take up the exact same height */
    object-fit: contain; /* Prevents stretching */
    background: #ffffff;
    padding: 20px;
    border-bottom: 1px solid #f4f7fa;
    transition: transform 0.4s ease;
    box-sizing: border-box;
}

.product-wrapper:hover img {
    transform: scale(1.04);
}

/* Text & Button Area */
.product-text {
    padding: 20px;
    text-align: center;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

.product-text h6.loop-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
}

.product-text h6.loop-title a {
    color: #1a202c;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-text h6.loop-title a:hover {
    color: #d83b3b;
}

/* Brought the Button back! */
.product-text .button {
    display: block;
    width: 100%;
    background-color: #d83b3b;
    color: #ffffff !important;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border: none;
    transition: background-color 0.2s, transform 0.1s;
    text-align: center;
    margin-top: auto; /* Pushes the button to the very bottom of the card */
}

.product-text .button:hover {
    background-color: #b92b2b;
}

/* --- 3. Sidebar Widgets (FIXED DOUBLE-BOX ISSUE) --- */
.sidebar .widget {
    background: #ffffff !important;
    padding: 0px !important;
    border-radius: 14px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f4f8;
    margin-bottom: 30px;
}

/* Search Field */
.widget_product_search .search_form {
    display: flex;
    position: relative;
    margin: 0;
}

.widget_product_search .search-field {
    width: 100%;
    padding: 12px 45px 12px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 14px;
    transition: all 0.3s;
}

.widget_product_search .search-field:focus {
    outline: none;
    border-color: #d83b3b;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(216, 59, 59, 0.1);
}

.widget_product_search button {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background: #d83b3b;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0 16px;
    cursor: pointer;
    transition: background 0.2s;
}

/* Categories List Formatting */
.widget_product_categories .widget-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0px;
    padding-bottom: 12px;
    border-bottom: 2px solid #edf2f7;
}

.widget_product_categories ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

/* Perfectly aligns the text to left and pill to right */
.widget_product_categories ul li {
    padding: 8px 0;
    border-bottom: 1px solid #f7fafc;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.widget_product_categories ul li:last-child {
    border-bottom: none;
}

.widget_product_categories ul li a {
    color: #4a5568;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
    flex-grow: 1;
}

.widget_product_categories ul li a:hover,
.widget_product_categories ul li.current-cat > a {
    color: #d83b3b;
}

.widget_product_categories .count {
    background: #edf2f7;
    color: #4a5568;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    margin-left: 10px;
}

.widget_product_categories ul.children {
    width: 100%;
    padding-left: 15px;
    margin-top: 8px;
    border-left: 2px solid #edf2f7;
}

/* Hide theme's default arrows if they show up */
.widget_product_categories ul li::before {
    display: none !important;
}

/* --- 4. Pagination --- */
.pagination-container ul.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 40px 0 20px 0;
    margin: 0;
}

.pagination-container ul.pagination li a,
.pagination-container ul.pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
}

.pagination-container ul.pagination li a:hover {
    background: #f8fafc;
    border-color: #cbd5e0;
    color: #1a202c;
}

.pagination-container ul.pagination li span.current {
    background: #d83b3b;
    color: #ffffff;
    border-color: #d83b3b;
}

.pagination-container ul.pagination li span.dots {
    border: none;
    background: transparent;
}
.product-wrapper .product-text .button {
    display: none !important;
}

    .grid-padding-x>.cell {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .grid-padding-y>.cell {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }