/*
Theme Name: Cannabis Friendly
Theme URI: https://ganjabytes.ca (replace with your site or theme URI)
Description: A child theme for the Futurio Storefront theme.
Author: David Fragione
Author URI: https://ganjabytes.ca (replace with your URL)
Template: storefront
Version: 1.0.0
*/

/* Define a modern color palette */
:root {
    --color-indica-bg: #2c3e50; /* Dark navy */
    --color-indica-text: #ffffff;
    --color-sativa-bg: #f1c40f; /* Soft, warm yellow */
    --color-sativa-text: #2c3e50;
    --color-hybrid-bg: #e67e22; /* Muted orange */
    --color-hybrid-text: #ffffff;
    --color-default-bg: #27a37f; /* Fresh green */
    --color-default-text: #000000;
    --color-brand: #555;
  }
  

/* General content area adjustments */
body.single-product .content-area,
body.woocommerce-cart .content-area,
body.woocommerce-checkout .content-area,
body.woocommerce-order-received .content-area,
body.home .content-area {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0; /* Remove default margin */
}

/* Adjust primary content wrapper */
body.single-product #primary,
body.woocommerce-cart #primary,
body.woocommerce-checkout #primary,
body.woocommerce-order-received #primary,
body.home #primary {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0 auto; /* Center align the content */
box-sizing: border-box; /* Ensure padding and borders are included in width */
}

/* Flexible site main adjustments */
body.single-product .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main,
body.woocommerce-order-received .site-main,
body.home .site-main {
display: flex;
flex-direction: column;
align-items: stretch; /* Ensure child elements stretch to fill */
justify-content: flex-start;
padding: 0;
margin: 0;
gap: 0; /* Adjust spacing between child elements */
}

/* Hide sidebars on these pages */
body.single-product .sidebar,
body.woocommerce-cart .sidebar,
body.woocommerce-checkout .sidebar,
body.woocommerce-order-received .sidebar,
body.home .sidebar {
display: none;
}

/* Optional adjustments for container and wrapper elements */
body.single-product .container,
body.woocommerce-cart .container,
body.woocommerce-checkout .container,
body.woocommerce-order-received .container,
body.home .container,
body.single-product .wrapper,
body.woocommerce-cart .wrapper,
body.woocommerce-checkout .wrapper,
body.woocommerce-order-received .wrapper,
body.home .wrapper {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0 auto;
}

/* Ensure header and footer adapt to full-width layout */
body.single-product .site-header,
body.woocommerce-cart .site-header,
body.woocommerce-checkout .site-header,
body.woocommerce-order-received .site-header,
body.home .site-header,
body.single-product .site-footer,
body.woocommerce-cart .site-footer,
body.woocommerce-checkout .site-footer,
body.woocommerce-order-received .site-footer,
body.home .site-footer {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0 auto;
}

/* Container for the dropdown */
#store-location {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa;  /* Light grey background */
    color: #333;  /* Dark text color */
    border: 2px solid #ccc;  /* Border around the dropdown */
    border-radius: 4px;  /* Rounded corners */
    padding: 10px 15px;  /* Padding for space inside */
    width: 100%;  /* Full width to fit container */
    max-width: 300px;  /* Optional: set max width */
    appearance: none;  /* Remove default styling on some browsers (e.g., Webkit) */
    cursor: pointer;  /* Pointer cursor to indicate interactivity */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;  /* Smooth transition for border and box-shadow */
    font-size: 18px;
}

/* Change border color and add shadow on hover/focus */
#store-location:hover,
#store-location:focus {
    border-color: #007bff;  /* Change border color */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);  /* Light blue shadow on focus */
}

/* Styling for the placeholder option */
#store-location option:disabled {
    color: #888;  /* Light grey for placeholder */
    font-style: italic;  /* Italic style for placeholder */
    font-weight: normal;  /* Make the placeholder text not bold */
    font-size: 18px;
}

/* Styling for the options inside the dropdown */
#store-location option {
    background-color: #fff;  /* White background for options */
    color: #333;  /* Dark text color */
    padding: 10px;  /* Padding for spacing */
    font-size: 18px;  /* Larger text */
}

/* On hover over the options, change background color */
#store-location option:hover {
    background-color: #007bff;  /* Light blue background on hover */
    color: #fff;  /* White text color on hover */
}

/* Optional: Custom arrow icon (using pseudo-element) */
#store-location::after {
    content: " ▼";
    font-size: 14px;
    color: #007bff;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Optional: Styling for the dropdown container (optional, if needed) */
.widget {
    position: relative;  /* Make sure dropdown arrow doesn't overlap */
}

/* Basic Styles */
.sidebar-wrapper {
    position: relative;
}

#toggle-sidebar {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
}

#toggle-sidebar:hover {
    background-color: #005780;
}

/* Sidebar Initial State (Hidden on Small Screens) */
#product-archive-sidebar {
    position: fixed;
    top: 0;
    left: -300px; /* Hidden to the left */
    width: 300px;
    height: 100%;
    background-color: #f9f9f9;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    padding: 15px;
    transition: left 0.3s ease;
    z-index: 9998;
    overflow-y: auto;
}

/* Show Sidebar When Active */
#product-archive-sidebar.active {
    left: 0;
}

/* Main Content Adjustment (Optional) */
body.sidebar-open {
    margin-left: 300px;
    transition: margin-left 0.3s ease;
}

/* Ensure the Sidebar is Always Visible on Larger Screens */
@media (min-width: 768px) {
    #product-archive-sidebar {
        position: relative;
        left: 0;
        height: auto;
        box-shadow: none;
    }
    #toggle-sidebar {
        display: none; /* Hide toggle button on larger screens */
    }
}







/* Styling for THC and CBD Filters */
.thc-cbd-filters {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.thc-cbd-filters h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

#thc-slider, #cbd-slider {
    margin: 15px 0;
}

#thc-min, #thc-max, #cbd-min, #cbd-max {
    font-size: 14px;
    font-weight: bold;
}

button#reset-filters {
    display: inline-block;
    padding: 8px 16px;
    margin-top: 10px;
    font-size: 14px;
    color: #fff;
    background-color: #007cba;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

button#reset-filters:hover {
    background-color: #005a8c;
}

/* Slider Handle Styling */
.ui-slider .ui-slider-handle {
    width: 20px;
    height: 20px;
    background-color: #007cba;
    border: 1px solid #005a8c;
    border-radius: 50%;
    cursor: pointer;
}

.ui-slider .ui-slider-handle:hover {
    background-color: #005a8c;
}

/* Slider Track Styling */
.ui-slider-range {
    background-color: #007cba;
    border-radius: 4px;
}

/* Sidebar Wrapper */
.elementor-widget-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Section Title */
.wp-block-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Checkbox List */
.wc-block-checkbox-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.wc-block-checkbox-list li {
    margin-bottom: 12px;
}

/* Checkbox Item */
.wc-block-components-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Checkbox Label */
.wc-block-components-checkbox__label {
    font-size: 1rem;
    color: #555;
    transition: color 0.3s ease;
}

.wc-block-components-checkbox__label:hover {
    color: #0073e6; /* Accent color on hover */
}

/* Hover Checkbox Background */
.wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark {
    fill: #0073e6; /* Change checkmark color */
}

.wc-block-components-checkbox__input:focus + .wc-block-components-checkbox__mark {
    outline: 2px solid #0073e6; /* Focus outline for accessibility */
}

/* Slider Container */
.ui-slider {
    width: 100%;
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Slider Range */
.ui-slider-range {
    background: #0073e6;
    border-radius: 4px;
}

/* Slider Handles */
.ui-slider-handle {
    background: #fff;
    border: 2px solid #0073e6;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Reset Button */
#reset-filters {
    background-color: #0073e6;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 20px;
    transition: background-color 0.3s ease;
}

#reset-filters:hover {
    background-color: #005bb5; /* Darker blue on hover */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .elementor-widget-container {
        gap: 10px;
    }
    
    .wp-block-heading {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    
    .wc-block-components-checkbox__label {
        font-size: 0.9rem;
    }
}
/* Show More Link Font */
.show-more button {
    font-family: 'Helvetica Neue', sans-serif; /* Change to your preferred font */
    font-size: 1rem;
    font-weight: 600;
    color: #0073e6; /* Accent color */
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Hover Effect for Show More */
.show-more button:hover {
    color: #005bb5; /* Darker blue on hover */
    transform: translateX(5px); /* Small shift to the right on hover */
}