/*
 Theme Name:   Materialis Child
 Template:     materialis
 Version:      1.0
*/

/* ===============================
   Import Parent Theme Styles
   =============================== */
@import url("../materialis/style.css");

/* ===============================
   WooCommerce Product Grid and Button Alignment
   =============================== */
ul.products li.product,
.wc-block-grid__products .wc-block-grid__product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    padding: 1rem;
    width: 100%;
}

ul.products li.product .woocommerce-loop-product__link,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-link {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

ul.products li.product .ope-card-product-tile,
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.2em;
}

ul.products li.product .add_to_cart_button,
.wc-block-grid__products .wc-block-grid__product .add_to_cart_button {
    margin-top: auto;
    align-self: stretch;
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

ul.products li.product .add_to_cart_button:hover,
.wc-block-grid__products .wc-block-grid__product .add_to_cart_button:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

ul.products.columns-3,
.wc-block-grid.has-3-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 0 auto;
    max-width: 1200px;
}

ul.products li.product img,
.wc-block-grid__products .wc-block-grid__product img {
    max-width: 100%;
    height: auto;
}

nav.woocommerce-pagination {
    text-align: center;
    margin-top: 20px;
}

nav.woocommerce-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: 5px;
}

nav.woocommerce-pagination ul li {
    display: inline-block;
}

nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span.current {
    display: inline-block;
    padding: 8px 12px;
    background: #f8bbd0;
    color: #222;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
}

nav.woocommerce-pagination ul li a:hover {
    background: #d81b60;
    color: #fff;
}

nav.woocommerce-pagination ul li span.current {
    background: #d81b60;
    color: #fff;
}

ul.products li.product a[rel="tag"],
.wc-block-grid__products .wc-block-grid__product a[rel="tag"] {
    background-color: #cce5ff;
    color: #004085;
    padding: 2px 6px;
    font-size: 0.75rem;
    border-radius: 4px;
    margin-top: 0.5em;
    text-decoration: none;
}

ul.products li.product a[rel="tag"]:hover,
.wc-block-grid__products .wc-block-grid__product a[rel="tag"]:hover {
    background-color: #b8daff;
    color: #00356b;
}

/* ===============================
   WooCommerce Blocks: Pickup/Delivery Option Styling
   =============================== */
.wc-block-components-radio-control__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wc-block-components-radio-control__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid #aaa;
    border-radius: 6px;
    cursor: pointer;
    background-color: #fafafa;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    user-select: none;
    position: relative;
    font-size: 1rem;
    line-height: 1.4;
}

.wc-block-components-radio-control__option:hover {
    background-color: #eee;
    border-color: #555;
}

.wc-block-components-radio-control__option-checked {
    background-color: #e0f5e9;
    border: 2px solid #2e7d32;
    font-weight: 700;
    color: #1b5e20;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
}

.wc-block-components-radio-control__label {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.wc-block-components-radio-control__description {
    font-size: 0.875rem;
    color: #555;
    margin-top: 2px;
}

.wc-block-components-radio-control__option-layout {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ===============================
   Billing & Shipping Address Styling
   =============================== */
.wc-block-components-address-card,
.wc-block-components-address-form {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.wc-block-checkout__shipping-method-option:focus {
    outline: 2px solid #c2185b;
    outline-offset: 2px;
}

.wc-block-checkout__shipping-method-option-icon {
    width: 24px;
    height: 24px;
    fill: #666;
}

/* ===============================
   "Nastavi sa kupovinom" Button Styling
   =============================== */
a.wc-backward,
.woocommerce a.button.wc-backward,
.woocommerce .return-to-shop a,
.return-to-shop a,
.stylize-cart-back a {
    display: inline-block;
    background-color: #c2185b;
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease;
    text-align: center;
}

a.wc-backward:hover,
.woocommerce a.button.wc-backward:hover,
.woocommerce .return-to-shop a:hover,
.return-to-shop a:hover,
.stylize-cart-back a:hover {
    background-color: #a0154b;
}

/* ===============================
   Remove Extra WooCommerce Clutter
   =============================== */
.woocommerce-breadcrumb,
.breadcrumb,
.breadcrumbs,
.storefront-breadcrumb,
.cart-contents-content,
.materialis-cart-widget,
.header-cart,
.page-header,
.woocommerce-page-title,
.archive.woocommerce .page-title,
.materialis-shop-header,
.woocommerce-products-header,
.woocommerce-products-header__title,
.woocommerce-notices-wrapper,
.woocommerce-result-count {
    display: none !important;
}

/* ===============================
   Sticky Header Layout and Logo/Menu Placement
   =============================== */
.materialis-sticky-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: rgba(100, 150, 100, 0.9);
    backdrop-filter: blur(3px);
    padding: 10px 20px;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.materialis-sticky-header.materialis-header-shrink {
    background-color: rgba(100, 150, 100, 1) !important;
}

.materialis-sticky-header .custom-logo-link {
    margin-right: auto;
}

.custom-logo-link img.custom-logo {
    max-width: 150px;
    height: auto;
}

#main_menu {
    display: flex;
    gap: 20px;
    background-color: rgba(100, 150, 100, 1);
    padding: 10px 20px;
    border-radius: 6px;
}

#main_menu > li {
    list-style: none;
}

#main_menu > li > a,
#main_menu .sub-menu li a {
    color: #333333;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 12px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

#main_menu > li > a:hover,
#main_menu .sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #555555 !important;
    border-radius: 4px;
}

.materialis-sticky-header #main_menu a {
    color: #333333 !important;
}

.materialis-sticky-header #main_menu a:hover {
    color: #555555 !important;
}

#main_menu .sub-menu {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 150px;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}

#main_menu .sub-menu li a {
    color: #333333 !important;
    font-weight: 500;
    padding: 8px 12px;
    display: block;
}

#main_menu .sub-menu li a:hover {
    background-color: #e0f5e9;
    color: #1b5e20 !important;
}

/* ===============================
   Header Motto and Buttons
   =============================== */
.header-subtitle2 {
    background-color: rgba(100, 150, 100, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 7px;
    display: none;
}

@media (max-width: 767px) {
    .header-subtitle2 {
        display: block;
    }

    .align-holder,
    a.button.color1,
    a.button.white.outline {
        display: none;
    }
}

@media (min-width: 768px) {
    .align-holder,
    a.button.color1,
    a.button.white.outline {
        display: block;
    }
}

a.button.color1 {
    background-color: #5D8AA8;
    border-color: #5D8AA8;
    color: white;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

a.button.color1:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* ===============================
   Search Input Fix (Header)
   =============================== */
.dgwt-wcas-search-input {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    opacity: 1 !important;
    background-color: #fff !important;
}

/* ===============================
   Footer Styling and Icons
   =============================== */
.footer-bg-accent {
    background-color: #000 !important;
    color: #eee;
}

a.social-icon {
    padding: 8px;
    display: inline-block;
}

p.copyright {
    visibility: hidden;
    position: relative;
}

p.copyright::before {
    content: "© 2025 SmartNest. Sva prava zadržana.";
    visibility: visible;
    position: absolute;
    left: 0;
    color: #eee;
}

@media (max-width: 767px) {
    .footer-bg-accent {
        text-align: center;
    }

    p.copyright::before {
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
}

.mdi.mdi-instagram {
    font-size: 28px;
}

.footer-bg-accent .mdi.mdi-instagram {
    font-size: 45px;
    color: #fff;
}

/* ===============================
   Navigation Wrapper Background
   =============================== */
.navigation-wrapper {
    background-color: #f5f0e6;
}

/* Container to limit width and center */
.custom-product-grid {
  max-width: 1200px; /* or whatever max width fits your design */
  margin: 0 auto;
  padding: 1rem;
}

/* WooCommerce product grid tweaks */
.custom-product-grid ul.products {
  display: flex !important;
  gap: 1.5rem; /* space between cards */
  justify-content: center; /* center the grid */
  flex-wrap: nowrap; /* keep 3 in one row */
}

/* Individual product cards */
.custom-product-grid ul.products li.product {
  flex: 1 1 30%; /* flexible width, roughly 3 per row */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 1rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
}

.custom-product-grid ul.products li.product:hover {
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Make product image fill card width and maintain aspect ratio */
.custom-product-grid ul.products li.product img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 1rem;
}

/* Center product title & price */
.custom-product-grid ul.products li.product .woocommerce-loop-product__title,
.custom-product-grid ul.products li.product .price {
  text-align: center;
  margin: 0.25rem 0;
}

/* Add consistent spacing around buttons if any */
.custom-product-grid ul.products li.product .button {
  margin-top: auto;
  align-self: center;
}

@media (max-width: 768px) {
  .custom-product-grid ul.products {
    flex-wrap: wrap;
  }
  .custom-product-grid ul.products li.product {
    flex: 1 1 100%; /* full width on small screens */
    max-width: 400px; /* optional max-width */
    margin: 0 auto 1.5rem;
  }
}

@media (max-width: 767px) {
  .custom-product-grid ul.products {
    flex-wrap: wrap !important;  /* allow wrapping */
    justify-content: center !important;
  }
  
  .custom-product-grid ul.products li.product {
    flex: 1 1 100% !important;   /* full width */
    max-width: 400px;            /* optional max width for readability */
    margin: 0 auto 1.5rem !important; /* center with spacing below */
  }
}