/**
 * Theme Name:     OTPro Shop
 * Author:         CodyS
 * Template:       astra
 * Text Domain:	   otpro-shop
 * Description:    Astra is fast, fully customizable & beautiful WordPress theme suitable for blog, personal portfolio, business website and WooCommerce storefront. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with Schema.org code integrated and is Native AMP ready so search engines will love your site. It offers special features and templates so it works perfectly with all page builders like Elementor, Beaver Builder, Visual Composer, SiteOrigin, Divi, etc. Some of the other features: # WooCommerce Ready # Responsive # RTL & Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and WooCommerce ready theme that you can use for building any kind of website!
 */

/* Fix product grid alignment */

.woocommerce ul.products,
.search-results .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    padding: 20px;
}

.woocommerce ul.products li.product,
.search-results .woocommerce ul.products li.product {
    width: calc(25% - 20px); /* 4 columns */
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.woocommerce ul.products li.product img,
.search-results .woocommerce ul.products li.product img {
    max-height: 200px;
    width: 100%;
    object-fit: contain; /* Prevent stretching or cropping */
    display: block;
    margin: 0 auto;
}


.woocommerce ul.products li.product:hover {
    transform: scale(1.03); /* Slight zoom effect on hover */
}

/* Fix image placeholders */
.woocommerce ul.products li.product img {
    max-height: 150px; /* Image size control */
    width: auto;
    object-fit: contain;
    margin-bottom: 0 auto;
}

/* Align category list */
.woocommerce-widget-layered-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-widget-layered-nav-list li {
    margin-bottom: 10px;
}

/*login UI Fields*/
/* Center the form container */
#tab-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full page height */
    background-color: #f9f9f9; /* Light background for contrast */
}

/* Style the form wrapper */
.tab-content {
    background: #ffffff; /* White background for the form */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 30px; /* Internal padding */
    width: 400px; /* Fixed width for a clean layout */
}

/* Style the tab controls (Sign In/Sign Up buttons) */
.tab-controls {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.tab-controls .tab-button {
    flex: 1;
    text-align: center;
    padding: 10px 15px;
    border: none;
    background: #f4f4f4; /* Inactive tab color */
    color: #333; /* Text color */
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px 8px 0 0; /* Rounded top corners */
    transition: all 0.3s;
}

.tab-controls .tab-button.active {
    background: #006f8a; /* Active tab color */
    color: #ffffff; /* Active text color */
}

/* Style the table layout */
form table {
    width: 100%; /* Take up full width */
    border-spacing: 0;
    margin-bottom: 20px;
}

form table td {
    padding: 10px;
    font-size: 14px;
    color: #333;
}

form table input[type="text"],
form table input[type="email"],
form table input[type="password"] {
    width: 100%; /* Full width inputs */
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 4px;
    margin-top: 5px;
}

/* Style the buttons */
form button {
    background: #006f8a; /* Button color */
    color: #ffffff; /* Text color */
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    width: 100%; /* Full width button */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

form button:hover {
    background: #004e63; /* Darker shade on hover */
}

/* Show Password and Remember Me styling */
form input[type="checkbox"] {
    margin-right: 5px;
}

/* Lost password link */
.lost_password {
    text-align: center;
    margin-top: 10px;
}

.lost_password a {
    color: #006f8a;
    text-decoration: none;
}

.lost_password a:hover {
    text-decoration: underline;
}

/* Changes made */

/* Container adjustments */
.woocommerce .products {
    background-color: transparent; /* Keep color consistent */
    padding: 10px;
}

.woocommerce .product {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for effect */
    padding: 15px;
    transition: transform 0.3s ease-in-out;
}

.woocommerce .product:hover {
    transform: scale(1.02); /* Slight scale effect on hover */
}


.sidebar {
    background-color: #f9f9f9; /* Add subtle background */
    padding: 20px;
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    .woocommerce ul.products li.product {
        width: 100%; /* Full width on mobile */
        margin-bottom: 20px;
    }

    .woocommerce .sidebar {
        margin-bottom: 20px; /* Adds spacing for sidebar on mobile */
    }
}

.woocommerce .sidebar {
    background-color: #f9f9f9;
    padding: 30px; /* Adds space inside the sidebar */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for separation */
    margin-right: 20px; /* Adds spacing between sidebar and product grid */
}

/* Sidebar Category List Styling */
.woocommerce .sidebar ul {
    padding-left: 0;
}

.woocommerce .sidebar li {
    list-style: none;
    margin-bottom: 12px;
}

form button:focus {
    outline: 2px solid #004e63; /* Add focus state */
    outline-offset: 2px;
}


@media (prefers-reduced-motion: reduce) {
    .woocommerce .product:hover {
        transform: none;
    }
}

/* Related Products Section - 4 Columns Layout */
.related.products ul.products,
.upsells.products ul.products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    padding: 20px;
}

.related.products ul.products li.product,
.upsells.products ul.products li.product {
    width: calc(25% - 20px); /* 4 columns */
    padding: 10px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.related.products ul.products li.product img,
.upsells.products ul.products li.product img {
    max-height: 150px; /* Reduce height for better proportion */
    width: auto;
    object-fit: contain; /* Prevent cropping */
    margin: 0 auto;
}



/* Adjust for mobile view */
@media screen and (max-width: 768px) {
    .related.products ul.products li.product,
    .upsells.products ul.products li.product {
        width: 100% !important; /* Full width on mobile */
    }
}

/* Single Product Image Container */
.woocommerce div.product div.images {
    max-width: 60%; /* Shrink container width */
    margin: 0 auto;
    text-align: center;
}

.woocommerce div.product div.images img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 300px; /* Limit height */
    object-fit: contain; /* Prevent stretching or cropping */
}

/* Reduce the size of large images */
img.attachment-large.size-large {
    width: auto; /* Set width as needed, e.g., 100% for responsiveness */
    max-width: 100%; /* Prevent overflow */
    height: auto; /* Maintain aspect ratio */
    max-height: 200px; /* Set a maximum height */
    object-fit: contain; /* Ensure the image fits within the bounds without cropping */
    margin: 0 auto; /* Center align the image if necessary */
}


/* Search Results - Fix image size and container layout */
.search-results .woocommerce ul.products li.product {
    width: calc(25% - 20px); /* 4 columns */
    margin-bottom: 20px;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.search-results .woocommerce ul.products li.product img {
    width: auto; /* Allow width to adjust */
    max-width: 100%; /* Prevent overflow */
    height: auto; /* Maintain natural aspect ratio */
    max-height: 150px; /* Set a height limit */
    object-fit: contain; /* Ensure no cropping or distortion */
    display: block;
    margin: 0 auto; /* Center the image */
}

.search-results .woocommerce ul.products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    padding: 20px;
}


@media screen and (max-width: 768px) {
    .search-results .woocommerce ul.products li.product {
        width: 100%; /* Single column on mobile */
    }
}

.search-bar-section {
    padding: 20px;
    margin-bottom: 15px;
}

.search-bar, .category-dropdown {
    margin: 10px 0;
}

.search-bar-section {
    background-color: #f9f9f9; /* Light gray */
    border-radius: 8px; /* Rounded corners */
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}


.category-dropdown-button:hover {
    background-color: #004e63; /* Darker shade on hover */
}

.search-bar input::placeholder, .category-dropdown select {
    font-size: 14px;
    color: #888;
}

#search-section {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#category-section {
    background-color: #ffffff; /* Background color */
    padding: 20px; /* Spacing inside */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin-bottom: 20px; /* Space below */
    text-align: center; /* Align content */
}

#category-section select {
    width: 80%; /* Dropdown width */
    padding: 10px; /* Dropdown padding */
    font-size: 16px; /* Font size */
    border: 1px solid #ccc; /* Border color */
    border-radius: 5px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background */
}

#category-section select:hover,
#category-section select:focus {
    border-color: #0073aa; /* Border on hover/focus */
    background-color: #ffffff; /* Background on hover/focus */
}

#category-section button {
    background-color: #006f8a; /* Button color */
    color: #ffffff; /* Text color */
    padding: 10px 20px; /* Button padding */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    margin-top: 10px; /* Space above button */
    transition: background-color 0.3s ease;
}

#category-section button:hover {
    background-color: #004e63; /* Darker color on hover */
}

/*Search Page*/
body.search-results, 
#primary {
    background-color: #ffffff !important; /* White background */
    color: #000000; /* Black text for better contrast */
}

/* Style the search results grid */
.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 20px; /* Space between items */
    padding: 20px; /* Add padding inside the container */
    background-color: #ffffff; /* Ensure grid area background is white */
}

/* Style individual search result items */
/* Style individual search result items */
.search-item {
    background-color: #ffffff; /* White background for the container */
    padding: 15px; /* Internal padding */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for search items */
.search-item:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* More pronounced shadow on hover */
}

/* Style the search item image */
.search-item img {
    max-width: 100%; /* Ensure image doesn't overflow */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px; /* Space below image */
    border-radius: 4px; /* Optional rounded corners for images */
    display: block; /* Ensure consistent alignment */
    margin-left: auto;
    margin-right: auto; /* Center the image */
}

/* Style the search item title */
.search-item h2 {
    font-size: 18px; /* Adjust font size */
    color: #003366; /* Dark blue title color */
    margin: 10px 0; /* Space around title */
    text-align: center; /* Center align title */
}

/* Style the search item excerpt */
.search-item p {
    font-size: 14px; /* Adjust font size for excerpt */
    color: #666; /* Light gray text color */
    margin-bottom: 0; /* Remove extra space below */
    text-align: center; /* Center align excerpt */
}

/* Style pagination */
.search-results-grid + .pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination a {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    background-color: #003366; /* Dark blue */
    color: #ffffff;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.pagination a:hover {
    background-color: #005f99; /* Slightly lighter blue */
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .search-results-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
        gap: 10px; /* Reduce gap for smaller screens */
    }

    .search-item h2 {
        font-size: 16px; /* Smaller font size on mobile */
    }

    .search-item p {
        font-size: 12px; /* Smaller font size on mobile */
    }
}

body.product-category .woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 20px;
}

body.product-category .woocommerce ul.products li.product {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    transition: transform 0.3s ease;
}

body.product-category .woocommerce ul.products li.product:hover {
    transform: scale(1.03); /* Slight hover effect */
}

body.product-category .woocommerce ul.products li.product img {
    max-height: 200px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* === Custom Login Styles === */
#tab-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f9f9f9;
}

.tab-controls {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tab-button {
    padding: 10px 20px;
    border: none;
    background-color: #f4f4f4;
    cursor: pointer;
    font-weight: bold;
    margin-right: 5px;
    border-radius: 8px 8px 0 0;
}

.tab-button.active {
    background-color: #006f8a;
    color: white;
}

.tab-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 400px;
}

form table {
    width: 100%;
    border-spacing: 0;
    margin-bottom: 20px;
}

form table input[type="text"],
form table input[type="email"],
form table input[type="password"] {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin-top: 5px;
}

form button {
    background-color: #006f8a;
    color: white;
    padding: 10px 15px;
    width: 100%;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

form button:hover {
    background-color: #004e63;
}

.lost_password {
    text-align: center;
}