/* Student Discount Plugin Styles */

/* Product page prices */
.student-discount-prices {
  margin: 20px 0;
  padding: 15px;
  background: #f7f7f7;
  border-radius: 5px;
  border-left: 4px solid #2c3e50;
}

.student-discount-prices p {
  margin: 8px 0;
  font-size: 16px;
}

.student-discount-prices .precio-basico {
  color: #333;
}

.student-discount-prices .precio-estudiante {
  color: #27ae60;
}

/* Cart page button */
.student-discount-wrapper {
  margin: 20px 0;
  padding: 15px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
}

.student-discount-toggle {
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  background: #2c3e50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.student-discount-toggle:hover {
  background: #34495e;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.student-discount-toggle.active {
  background: #27ae60;
}

.student-discount-toggle.active:hover {
  background: #229954;
}

.student-discount-loading {
  display: inline-block;
  margin-left: 10px;
  color: #666;
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .student-discount-toggle {
    width: 100%;
    padding: 15px;
  }
}

/* Hide empty price paragraphs on single product pages to avoid layout gaps */
.single-product .summary p.price:empty {
  display: none !important;
}

/* If the theme outputs a whitespace-only price node, a JS fallback may be required. */

/* Product card hover: zoom image and lift card */
@media (hover: hover) and (pointer: fine) {
  /* Ensure image wrapper hides overflow when scaling */
  .products .product .loop-image-wrap,
  ul.products li.product .loop-image-wrap,
  .botiga-wc-loop-product .loop-image-wrap,
  .products .product .woocommerce-LoopProduct-link,
  ul.products li.product .woocommerce-LoopProduct-link,
  .product .images,
  .product .woocommerce-product-gallery__image {
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Smooth transitions */
  .products .product img,
  ul.products li.product img,
  .botiga-wc-loop-product img,
  .product .images img {
    transition:
      transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 300ms ease;
    transform-origin: center center;
    will-change: transform;
  }

  /* Lift the whole card slightly and add subtle shadow */
  .products .product,
  ul.products li.product,
  .botiga-wc-loop-product {
    transition:
      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 220ms ease;
    transform-origin: center center;
    will-change: transform, box-shadow;
  }

  /* Hover state */
  .products .product:hover img,
  ul.products li.product:hover img,
  .botiga-wc-loop-product:hover img {
    transform: scale(1.08);
  }

  .products .product:hover,
  ul.products li.product:hover,
  .botiga-wc-loop-product:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
    z-index: 2;
  }
}

/* Reduce effect on small screens (touch devices) */
@media (max-width: 768px) {
  .products .product img,
  ul.products li.product img,
  .botiga-wc-loop-product img {
    transition: none;
    transform: none;
  }

  .products .product,
  ul.products li.product,
  .botiga-wc-loop-product {
    transform: none;
    box-shadow: none;
  }
}

/* Extend hover selectors to WooCommerce blocks and related/recommended sections */
@media (hover: hover) and (pointer: fine) {
  /* Block grid products (WooCommerce blocks) */
  .wc-block-grid__product img,
  .wp-block-woocommerce-products .wc-block-grid__product img,
  .wp-block-woocommerce .wc-block-grid__product img,
  .wc-block-grid__product {
    transition:
      transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 300ms ease;
    transform-origin: center center;
    will-change: transform;
  }

  .wc-block-grid__product:hover img,
  .wp-block-woocommerce-products .wc-block-grid__product:hover img,
  .wp-block-woocommerce .wc-block-grid__product:hover img {
    transform: scale(1.08);
  }

  .wc-block-grid__product:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
    z-index: 2;
  }

  /* Related / recommended products (avoid clipping) */
  .related.products,
  .woocommerce .related.products,
  .woocommerce .upsells.products,
  .woocommerce .widget_recently_viewed_products,
  .home .products,
  .widget_woocommerce_recently_viewed {
    overflow: visible !important;
  }

  .related.products li.product,
  .related .product,
  .upsells .product,
  .home .products li.product {
    overflow: visible;
    position: relative;
  }

  /* Ensure ancestor lists don't clip shadows */
  .related.products ul.products,
  .related .products,
  .woocommerce .related .products,
  .woocommerce .upsells .products,
  .upsells.products ul.products {
    overflow: visible !important;
  }

  /* Softer, more diffused shadow for related/recommended product cards */
  .related.products li.product:hover,
  .related .product:hover,
  .upsells .product:hover,
  .woocommerce .related.products li.product:hover,
  .woocommerce .upsells.products li.product:hover {
    transform: translateY(-8px);
    /* Two-layer shadow: larger diffused base + subtle surrounding shadow to avoid right-bottom bias */
    box-shadow:
      0 26px 60px rgba(16, 24, 40, 0.08),
      -8px 10px 38px rgba(16, 24, 40, 0.04);
    z-index: 20;
  }

  /* If theme wraps the image, allow the wrap to show the shadow as well */
  .related.products li.product .loop-image-wrap,
  .related.products li.product .woocommerce-LoopProduct-link,
  .related .product .loop-image-wrap,
  .upsells .product .loop-image-wrap {
    overflow: visible !important;
  }
}

/* Center the header search visually between logo and icons.
     Use absolute centering relative to `.site-header-inner` so the search
     appears centered even when the theme puts the search markup in the
     right column. Limits avoid overlapping logo/icons. */
.site-header-inner {
  position: relative;
}

.header-search-center--wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: calc(100% - 360px); /* reserve more space so search is shorter */
  display: flex;
  justify-content: center;
  pointer-events: none; /* allow clicks to pass through empty areas */
  z-index: 40;
}

.header-search-always {
  width: 100%;
  max-width: clamp(
    220px,
    40vw,
    640px
  ); /* limit length so it never becomes too long */
  pointer-events: auto; /* enable interaction inside the search box */
}

.header-search-always .search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  /* transparent background with colored border as requested */
  background: transparent;
  padding: 0px 8px; /* smaller vertical height */
  border-radius: 22px;
  height: 45px; /* fixed, much smaller total height */
  border: 2px solid #ff2b53;
  box-shadow: none;
  position: relative; /* allow absolutely positioned submit inside */
}

.header-search-always .search-field {
  border: none;
  outline: none;
  flex: 1 1 auto;
  font-size: 14px; /* smaller */
  /* leave extra right padding so input text doesn't go under the button */
  padding: 0 48px 0 20px; /* right padding reserves space for magnifier */
  height: 24px; /* keep input comfortably clickable */
  background: transparent;
}

.header-search-always .search-submit {
  background: transparent;
  border: none;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Show only the magnifier inside the bubble, remove any gray background,
   and hide the native clear/X decorations from search inputs. */
.header-search-always .search-form > .search-submit {
  position: absolute;
  /* move slightly more to the left (further into the input) */
  right: 14px;
  /* lower the icon a few pixels using a pixel offset to center vertically */
  top: calc(50% + -2.5px);
  transform: translateY(-50%);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  color: #ff2b53 !important; /* match border color */
  pointer-events: none; /* disabled by default */
  cursor: default;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  transition:
    opacity 120ms ease,
    transform 80ms ease,
    color 120ms ease;
  box-sizing: content-box;
  overflow: visible;
}

/* Enabled state when form has value (set by JS) */
.header-search-always .search-form.has-value > .search-submit,
.header-search-always .search-form .sd-search-enabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Remove any focus outline on the button */
.header-search-always .search-form > .search-submit:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Hide native browser clear (X) and decorations for search inputs */
.header-search-always .search-field::-webkit-search-cancel-button,
.header-search-always .search-field::-webkit-search-decoration,
.header-search-always .search-field::-ms-clear,
.header-search-always .search-field::-ms-reveal,
.header-search-always .search-field::-webkit-clear-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Ensure the input itself doesn't show native decorations */
.header-search-always .search-field {
  -webkit-appearance: none;
  appearance: none;
}

/* Additional rules: ensure any remaining clear/reset buttons (theme or plugin added)
   are hidden and remove any background-image/icon that could act as a clear control. */
.header-search-always .search-field {
  background-image: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.header-search-always .search-form button[type='reset'],
.header-search-always .search-form .search-clear,
.header-search-always .search-form .search-reset,
.header-search-always .search-form .clear,
.header-search-always .search-form .search-remove,
.header-search-always .search-form .autocomplete-clear {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hide any buttons/links inside the form that are not the submit (magnifier).
   This covers theme/plugin variations that add extra clear/reset controls. */
.header-search-always .search-form button:not(.search-submit),
.header-search-always .search-form a:not(.search-submit),
.header-search-always .search-form [class*='clear'],
.header-search-always .search-form [class*='reset'] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Firefox-specific clear pseudo-elements (if present) */
.header-search-always .search-field::-moz-clear,
.header-search-always .search-field::-moz-search-clear {
  display: none !important;
}

/* Some themes add an inner SVG or pseudo-element for a clear icon — hide any
   pseudo-elements on the input to be safe. */
.header-search-always .search-field::after,
.header-search-always .search-field::before {
  display: none !important;
  content: none !important;
}

/* Focus state: slightly stronger border to show focus */
.header-search-always .search-form:focus-within {
  box-shadow: 0 6px 22px rgba(255, 43, 83, 0.08);
  border-color: #ff2b53;
}

/* Ensure the label wrapper grows and the input fills the available bubble */
.header-search-always .search-form > label {
  flex: 1 1 auto;
  min-width: 0; /* allow flex children to shrink correctly */
  margin: 0;
  display: block;
}

.header-search-always .search-form > label .search-field,
.header-search-always .search-form input.search-field {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  border: none !important;
  background: transparent !important;
  padding: 0 6px !important;
  height: 24px !important;
  line-height: 24px !important;
}

/* Prevent the submit button from shrinking the input area */
.header-search-always .search-form > .search-submit {
  flex: 0 0 auto;
}

/* Remove possible theme outline/border on focus and keep compact height */
.header-search-always .search-field:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure cart/icons stay above header search if needed */
.site-header-cart,
.header-wishlist-icon,
.wc-account-link {
  position: relative;
  z-index: 60;
}

/* Tighten max width on medium screens to avoid overlap */
@media (max-width: 1200px) {
  .header-search-center--wrap {
    max-width: calc(100% - 200px);
  }
}

@media (max-width: 1024px) {
  .header-search-center--wrap {
    max-width: calc(100% - 160px);
  }
  .header-search-always {
    max-width: 720px;
  }
}

@media (max-width: 768px) {
  /* hide always-open centered search on small screens, rely on theme's mobile search */
  .header-search-always {
    display: none;
  }
  .header-search-center--wrap {
    display: none;
  }
}

/* Ensure the icon SVG inside the button doesn't show a black square. */
.header-search-always .ws-svg-icon,
.header-search-always .search-submit .ws-svg-icon {
  background: transparent !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: inherit !important;
}
.header-search-always .ws-svg-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor !important;
  stroke: none !important;
  /* nudge SVG down slightly so it visually centers with the input text */
  transform: translateY(1px);
}

/* Hide any cancel/close SVGs or elements injected next to the magnifier
   inside the submit button so only the magnifier remains visible. */
.header-search-always .search-submit .icon-cancel,
.header-search-always .search-submit i.icon-cancel,
.header-search-always .search-submit .ws-svg-icon.icon-cancel,
.header-search-always .search-submit .ws-svg-icon .icon-cancel,
.header-search-always .search-submit .ws-svg-icon.icon-cancel svg,
.header-search-always .search-submit .icon-cancel svg {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Also hide any second .ws-svg-icon siblings (defensive) except the first one */
.header-search-always .search-submit .ws-svg-icon + .ws-svg-icon {
  display: none !important;
}

/* Make the search longer on wide screens */
@media (min-width: 1400px) {
  .header-search-always {
    max-width: 900px; /* reduce extreme width on very wide screens */
  }
}

/* Explicit breakpoints to ensure search returns to original size at normal zoom
   and becomes compact below 711px. Many browsers change the CSS viewport
   width when user zooms, so these media queries will toggle sizes accordingly. */
@media (min-width: 711px) {
  .header-search-center--wrap {
    max-width: calc(100% - 360px);
  }
  .header-search-always {
    max-width: 880px; /* original desktop bubble */
  }
  .header-search-always .search-form {
    height: 45px;
  }
  .header-search-always .search-field {
    font-size: 14px;
    padding: 0 48px 0 20px;
    height: 24px;
  }
  .header-search-always .search-form > .search-submit {
    right: 14px;
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 710px) {
  /* compact search for small viewports / high zoom */
  .header-search-center--wrap {
    max-width: calc(100% - 200px);
  }
  .header-search-always {
    max-width: 360px;
  }
  .header-search-always .search-form {
    height: 34px;
  }
  .header-search-always .search-field {
    font-size: 11px;
    padding: 0 34px 0 10px;
    height: 16px;
  }
  .header-search-always .search-form > .search-submit {
    right: 8px;
    width: 28px;
    height: 28px;
  }
}

/* Brand tile base styles */
.brand-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
  position: relative;
}

.wp-block-column > a.brand-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.brand-caption {
  margin: 0;
  padding: 16px 12px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 1px;
  background: #ff2b53;
  color: #fff;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

/* Focus styles for columns made clickable by the plugin */
.wp-block-column[role='link'] {
  outline: none;
}

/* Base shadows and transitions for brand tiles */
.wp-block-column[role='link'],
.brand-tile {
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14) !important;
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 240ms ease !important;
  transform-origin: center center;
  will-change: transform, box-shadow;
}

/* Images inside brand tiles - inherit parent transform */
.wp-block-column[role='link'] img,
.brand-tile img {
  transition:
    transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 300ms ease;
  transform-origin: center center;
  will-change: transform;
  transform: none !important;
}

/* Hover and focus effects for desktop */
@media (hover: hover) and (pointer: fine) {
  .wp-block-column[role='link']:hover,
  .wp-block-column[role='link']:focus,
  .wp-block-column[role='link']:focus-within,
  .brand-tile:hover,
  .brand-tile:focus {
    transform: translateY(-8px) scale(1.06) !important;
    box-shadow:
      0 50px 140px rgba(16, 24, 40, 0.24),
      0 20px 60px rgba(16, 24, 40, 0.16),
      0 8px 24px rgba(16, 24, 40, 0.1);
    z-index: 60 !important;
  }
}

/* Reduce effects on touch / small screens */
@media (max-width: 768px) {
  .wp-block-column[role='link'],
  .brand-tile {
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12) !important;
    transition: none;
    transform: none;
  }

  .wp-block-column[role='link'] img,
  .brand-tile img {
    transition: none;
    transform: none;
  }
}

/* Escalar header top (banner) y mid (logo + búsqueda + carrito) según zoom/pantalla */
@media (max-width: 1400px) {
  /* Banner rosado más compacto */
  .bhfb-above_header_row .header-html {
    font-size: 12px;
    padding: 6px 14px;
  }

  /* Logo un poco más pequeño */
  .bhfb-main_header_row .custom-logo,
  .bhfb-main_header_row .site-branding img {
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
  }

  /* Búsqueda: reducir ancho máximo */
  .header-search-always {
    max-width: 720px;
  }
  .header-search-always .search-form {
    height: 42px;
  }
}

@media (max-width: 1200px) {
  .bhfb-above_header_row .header-html {
    font-size: 11px;
    padding: 4px 12px;
  }

  .bhfb-main_header_row .custom-logo,
  .bhfb-main_header_row .site-branding img {
    max-width: 120px !important;
    width: auto !important;
    height: auto !important;
  }

  .header-search-always {
    max-width: 600px;
  }
  .header-search-always .search-form {
    height: 38px;
  }
  .header-search-always .search-field {
    font-size: 13px;
  }
}

@media (max-width: 1000px) {
  .bhfb-above_header_row .header-html {
    font-size: 10px;
    padding: 3px 10px;
  }

  .bhfb-main_header_row .custom-logo,
  .bhfb-main_header_row .site-branding img {
    max-width: 100px !important;
    width: auto !important;
    height: auto !important;
  }

  .header-search-always {
    max-width: 480px;
  }
  .header-search-always .search-form {
    height: 36px;
  }
  .header-search-always .search-field {
    font-size: 12px;
  }

  /* Icono del carrito también más pequeño */
  .site-header-cart .ws-svg-icon svg {
    width: 20px;
    height: 20px;
  }
}