/**
 * @fileoverview Producto Brazalete QR Specific Styles
 * 
 * This file contains CSS styles that are unique to the producto-brz.php template.
 * These styles are not shared with other templates and are specific to this product page.
 * 
 * Used by: templates/ve/producto-brz.php
 */

/* Swiper Slider Styles - Unique to producto-brz.php */
.swiper-wrapper,
.swiper-slide {
    height: initial;
}

.swiper-pagination {
    position: initial;
}

.swiper-pagination-bullet {
    width: calc(20% - 10px);
    height: initial;
    opacity: 1;
    border-radius: 4px;
    border: 1px solid #eee;
    margin: 5px !important;
    background-color: transparent;
}

.swiper-pagination-bullet-active {
    border-color: var(--themecolor);
}

/* BCV Widget Styles - Unique to producto-brz.php */
.scaem-widget-bcv {
    border: 1px solid #eee;
}

.scaem-onlineoption-content.titulo-bcv {
    border-color: transparent;
    padding-bottom: 0px;
}

.scaem-onlineoption-content.tasas-bcv {
    border-color: transparent;
    padding-top: 0;
}

.ref-bcv {
    padding: 10px 0px;
}

.ref-bcv img {
    height: 20px
}

.ref-bcv p {
    font-size: 10px;
    margin-bottom: 0;
}

.ref-bcv.bcv-actualizado {
    border-top: 1px solid #eee;
}

/* Specifications Table Styles - Unique to producto-brz.php */
@media (min-width: 1000px) {
    .tabla-especificaciones li > em {
        display: inline-block;
        width: calc(100% - 430px);
        float: right;
    }
}

.tabla-especificaciones.tabla-modal li > em {
    display: block;
    width: 100%;
    float: left;
}

/* Special Projects Button - Unique to producto-brz.php */
.proyectos-container {
    position: relative;
    margin-top: -40px;
    display: flex;
    justify-content: end;

}

.proyectos-especiales-btn {
    cursor: pointer;
}

@media (max-width:900px) {
    .proyectos-container {
        margin-top: 0;
    }
}

/* Medical Cases Checkbox - Unique to producto-brz.php */
.cont-casos {
    display: inline-block;
    float: right;
}

.cont-casos input[type='checkbox'] {
    display: none;
}

.cont-casos input[type='checkbox'] + label {
    color: var(--secthemecolor);
    border: 1px solid var(--secthemecolor);
    border-radius: 4px;
    padding: 3px 5px;
    display: inline-block;
    cursor: pointer;
}

.cont-casos input[type='checkbox']:checked + label {
    color: #fff;
    border: 1px solid var(--secthemecolor);
    background-color: var(--secthemecolor);
    border-radius: 4px;
    padding: 3px;
    display: inline-block;
}

@media (max-width:900px) {
    .cont-casos label {
        font-size: 12px;
    }
}

/* Loading Spinner Animation - Unique to producto-brz.php */
.fa-spinner {
    animation: loader 1.5s infinite;
}

@keyframes loader {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}

/* Product Description Section - Unique to producto-brz.php */
#descripcion-producto {
    margin-top: 50px;
}

@media (max-width: 900px) {
    #descripcion-producto {
        padding: 10px;
    }
}

/* Cost Display - Unique to producto-brz.php */
#costos {
    display: inline-block;
    padding-left: 10px;
    color: #767676;
}

#costos span {
    display: block;
    line-height: 16px;
}

#costos #costo-u {
    text-decoration: line-through;
}

/* Product Price Display - Unique to producto-brz.php */
.scaem-product-price {
    display: inline-block;
    margin-bottom: 0;
}

.scaem-product-price-small {
    display: block;
    font-size: 24px;
    margin: 0;
}

.scaem-product-price-note {
    display: block;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--terthemecolor);
    margin: 0;
}

.detail-border {
    border-left: 2px solid var(--dark-fade-1-op-2);
    padding: 10px;
}

/* Discount Section - Unique to producto-brz.php */
.tramita-descuento {
    display: none;
    margin-top: 20px;
}

.tramita-descuento .scaem-btn {
    font: 400 14px/20px Poppins, Arial, Helvetica, sans-serif;
    padding: 5px 10px;
    margin-top: 10px;
    display: block;
    opacity: 0;
}

.tramita-descuento #compromiso.compromiso {
    opacity: 1;
    background-color: #1abc9c;
}

.tramita-descuento #compromiso.compromiso span {
    display: none;
}

.tramita-descuento #compromiso.compromiso .compromiso {
    display: inline-block;
}

.tramita-descuento #compromiso.sin-compromiso {
    opacity: 1;
}

.tramita-descuento #compromiso.sin-compromiso span {
    display: inline-block;
}

.tramita-descuento #compromiso.sin-compromiso .compromiso {
    display: none;
}

@media (max-width: 900px) {
    .tramita-descuento input[type=button] {
        width: 100%;
    }
}

/* Product Action Buttons - Moved to shared-styles.css */

/* Promo Label Spacing - Unique to producto-brz.php */
#promo2 + label {
    margin-top: 10px;
}

/* Select Option Styling - Unique to producto-brz.php */
select option {
    font-weight: bold;
    color: var(--terthemecolor);
}

select option span {
    font-weight: lighter;
    color: #767676;
}

/* Content Overflow - Unique to producto-brz.php */
.scaem-docsingle-content {
    overflow: visible;
}

/* Color Selection - Hide checkboxes for single product (quantity = 1) */
#cantidad[value="1"] ~ * .scaem-product-filter[type='checkbox'] {
    display: none !important;
}

/* Color Selection - Show checkboxes for multiple products (quantity > 1) */
#cantidad:not([value="1"]) ~ * .scaem-product-filter[type='checkbox'] {
    display: block !important;
}

/* Alternative approach - Hide checkboxes by default, show when quantity > 1 */
.scaem-product-filter[type='checkbox'] {
    display: none !important;
}

/* Show checkboxes when quantity is not 1 */
body:has(#cantidad:not([value="1"])) .scaem-product-filter[type='checkbox'] {
    display: block !important;
}

/* Ensure color blocks are visible and properly styled */
.cont-color {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 10px;
}

.cont-color .color {
    margin-right: 0px !important;
    margin-top: 3px;
    margin-bottom: 3px !important;
    cursor: pointer;
}

.color div {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.color div span {
    mix-blend-mode: difference;
    color: #fff;
    font-weight: bold;
}

/* Selected state for colors */
.scaem-product-filter[type='checkbox']:checked + label.color div {
    border: 2px solid var(--themecolor);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}