/**
 * Step Kit OS Front-end Styles
 * 
 * @package   Step_Kit_OS
 * @version   1.0.0
 */

/* Simulator button styles */
.simulator-button {
  display: inline-block;
  margin: 10px 0;
  padding: 10px 20px;
  background-color: #2271b1;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.simulator-button:hover {
  background-color: #135e96;
  color: #fff;
}

/* Iframe container styles */
.custom-iframe-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

#custom_iframe {
  width: 100%;
  min-height: 600px;
  border: none;
  overflow: hidden;
}

/* Responsive iframe styles */
@media screen and (max-width: 768px) {
  #custom_iframe {
    min-height: 500px;
  }
}

@media screen and (max-width: 480px) {
  #custom_iframe {
    min-height: 400px;
  }
}

/* Custom meta data styles in cart */
.woocommerce-cart-form .product-name dl.variation dt,
.woocommerce-checkout .product-name dl.variation dt {
  float: left;
  margin-right: 5px;
  font-weight: 600;
}

.woocommerce-cart-form .product-name dl.variation dd,
.woocommerce-checkout .product-name dl.variation dd {
  margin-bottom: 5px;
}

/* Error messages */
.step-kit-os-error {
  padding: 10px;
  margin: 10px 0;
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}

/* Success messages */
.step-kit-os-success {
  padding: 10px;
  margin: 10px 0;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
}

/* Step Kit OS Frontend Styles */

/* Only apply these styles when iframe is present */
body.has-iframe,
body.has-iframe html {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#custom_iframe {
  width: 100vw !important;
  height: 100vh !important;
  border: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-width: none !important;
  z-index: 999999 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.woocommerce table.shop_table td.product_meta .wc-item-meta {
  margin-bottom: 0; /* Remove extra space */
}

/* Conditional hiding of size/tamanho attributes based on showTamanho flag */
/* This allows hiding WooCommerce's variation display when showTamanho is false */
.step-kit-hide-tamanho dl.variation dt,
.step-kit-hide-tamanho dl.variation dd {
  display: none !important;
}

.step-kit-hide-tamanho .wc-item-meta .wc-item-meta-label,
.step-kit-hide-tamanho .wc-item-meta .wc-item-meta-value {
  display: none !important;
}

/* Hide specific variation attributes containing size/tamanho */
dl.variation dt:contains("Tamanho"),
dl.variation dt:contains("Size"),
dl.variation dt:contains("size") {
  display: none !important;
}

dl.variation dt:contains("Tamanho") + dd,
dl.variation dt:contains("Size") + dd,
dl.variation dt:contains("size") + dd {
  display: none !important;
}

/* Only hide the second instance of size display */
.wc-block-components-product-details:not(:first-child)
  .wc-block-components-product-details__tamanho,
.wc-block-components-product-details:not(:first-child)
  div[class*="product-details__tamanho"] {
  display: none !important;
}

.wc-block-components-product-metadata__description {
  display: none; /* Hide the description div */
}

/* Center text in simulator button */
.elementor-element-d4aa4d3 .simulator-button,
.elementor-element-354e578 .simulator-button,
.elementor-element-53b3cce .simulator-button,
.elementor-element-5925763 .simulator-button {
  text-align: center !important;
  display: block !important;
}

/* Hide duplicate price in product quantity holder */
.product-quantity-holder .product-price {
  display: none !important;
}

/* Club-specific styles */

/* Generic club iframe styles */
.step-kit-iframe {
  width: 100%;
  min-height: 600px;
  border: none;
  overflow: hidden;
}

/* Generic club button styles */
.step-kit-button {
  display: inline-block;
  margin: 10px 0;
  padding: 10px 20px;
  background-color: #2271b1;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.step-kit-button:hover {
  background-color: #135e96;
  color: #fff;
}

/* Club-specific styles will be dynamically generated based on club settings */
/* Users can add custom CSS for their specific clubs in their theme's style.css */

/* Responsive styles for club iframes */
@media screen and (max-width: 768px) {
  .step-kit-iframe {
    min-height: 500px;
  }
}

@media screen and (max-width: 480px) {
  .step-kit-iframe {
    min-height: 400px;
  }
}

/* Hide scrollbars across all browsers */
/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  display: none !important;
}

/* Firefox */
html {
  scrollbar-width: none !important;
}

/* Internet Explorer and Edge (legacy) */
body {
  -ms-overflow-style: none !important;
}

/* Hide scrollbars on specific elements */
.custom-iframe-container,
#custom_iframe,
.step-kit-iframe,
body.has-iframe,
body.has-iframe html {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.custom-iframe-container::-webkit-scrollbar,
#custom_iframe::-webkit-scrollbar,
.step-kit-iframe::-webkit-scrollbar,
body.has-iframe::-webkit-scrollbar,
body.has-iframe html::-webkit-scrollbar {
  display: none !important;
}