.zoddak-page-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; 
  width: 100%;
  padding: 5px 20px;
  box-sizing: border-box;
  background-color: inherit;
  .card-preview i,
  .card-preview .fa,
  .card-preview .fas,
  .card-preview .far,
  .card-preview .fab {
      font-family: "Font Awesome 6 Free" !important;
      font-weight: 900 !important;
  }
  .lang-selector {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 10px;
    font-family: inherit;
    width: var(--page-width);

  }

  .lang-selector .lang-switcher-label {
    font-size: 15px;
    font-weight: 600;
    color: #444;
  }

  .lang-selector #langSwitcher {
    appearance: none;
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    padding: 6px 32px 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    justify-content: flex-end;
  }

  .lang-selector #langSwitcher {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 20 20' fill='%23666' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 7L10 11.5L14.5 7' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
  }

  .lang-selector #langSwitcher:hover {
    border-color: #999;
  }

  .lang-selector #langSwitcher:focus {
    border-color: #0073aa;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.25);
  }

  @media (max-width: 480px) {
    .lang-selector {
      justify-content: center;
    }
  }

  .powered-by-zoddak{
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 10px;
  }
  .powered-by-zoddak span{
    font-size: 13px;
    font-style: italic;
    opacity: 0.8;
  }
  .powered-by-zoddak img{
    width: 4%;
    height: 16px;
    cursor: pointer;
    transition: transform 0.2s ease-out;
  }
  .powered-by-zoddak img:hover{
    transform: translateY(-4px);
  }
  .search-menu-preview {  
    width: 100%;
    max-width: var(--page-width, 1200px);
    background-color: var(--filter-bg);
    border-radius: var(--border-radius);
    padding: 9px 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    font-family: inherit !important;
    margin-bottom: 2rem;
  }
  
  .filters-toggle {
    display: none;
    background: #000;
    color: #fff;
    padding: 8px 14px;
    border: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    transition: background 0.3s;
  }
  
  .filters-toggle:hover {
    background: #222;
  }
  
  .filters-toggle i {
    margin-left: 6px;
    transition: transform 0.3s ease;
  }
  
  .filters-container {
    max-height: none;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 1;
  }
  
  .filters-container.collapsed {
    max-height: 0;
    opacity: 0;
  }
  .search-menu-preview h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .filter-selector-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap; 
  }
  #orderBy {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: 1 1 180px;
  
    max-width: 225px;
    
  }
  #orderBy .search-button{
  
    background-color: var(--filter-btn);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: var(--border-radiuss);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  #orderBy .search-button:hover{
    background-color: var(--filter-btn);
  
  }
  
  #orderBy #order_by {
    width: 58%;
    height: 100%;
  }
  
  .filter-selector {
    flex: 1 1 0;
    min-width: 130px; 
  }
  
  .filter-selector label {
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    margin-bottom: 6px;
  }
  
  /* === INPUTS Y SELECTS === */
  .filter-selector select,
  .filter-selector input[type="text"],
  .reference-input,
  #areaDropdown {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    color: rgb(154, 152, 152);
    display: flex;
    height: 35px;
    position: relative;
  }
  #areaDropdown{
    cursor: pointer;
    display: flex;
    justify-content: space-between;
  }
  #areaDropdown span{
    align-self: center;
  }
  .filter-selector select:focus,
  .filter-selector input[type="text"]:focus {
    border-color: #00e394;
    box-shadow: 0 0 3px rgba(0, 227, 148, 0.5);
    outline: none;
  }
  
  /* === BLOQUE DE REFERENCIA (INPUT + BOTÓN) === */
  .reference-row {
    margin-bottom: 25px;
  }
  
  .reference-search-container {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .placeholder{
    background-color: transparent !important;
    color: gray !important;
  }
  .reference-search-container .reference-input {
    flex: 1;
  }
  
  .reference-search-container .search-button {
    background-color: var(--filter-btn);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .reference-search-container .search-button:hover {
    background-color: var(--filter-btn);
  }
  
  /* === BOTONES FINALES (RESET / SEARCH) === */
  .search-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 20px;
  }
  
  .search-form-buttons .search-button{
    border: none;
    padding: 10px 24px;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
  }
  .search-form-buttons .reset-button {
    border: none;
    padding: 10px 24px;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, color 0.2s ;
    color: black !important;
    background-color: var(--filter-reset);
    text-decoration: none;
  }
  
  .search-form-buttons .search-button {
    background-color: var(--filter-btn);
    color: #fff;
  }
  .search-form-buttons .search-button:hover {
    background-color: var(--filter-btn);
    transform: translateY(-1px);
  }
  
  .search-form-buttons .reset-button:hover {
      background-color: color-mix(in srgb, var(--filter-reset) 90%, black);
    
  }
  
  
  .properties-container{
    max-width: var(--page-width) !important;
    margin-top: 0;
    font-family: inherit !important;
  }
  .properties-container.horizontal-layout{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
  }
  .properties-container.vertical-layout {
    display: grid;
    gap: 10px;
    align-items: stretch;
    row-gap: 2rem;
    grid-auto-rows: 1fr;
  }
  .card-preview.large.vertical{
    height: 500px;
  }
  .card-preview.large.vertical .container-info .property-info .grid-templates .grid .value{
    font-size: 1rem;
  }
  .properties-container.vertical-layout.layout-small:has(.card-preview.large.vertical){
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    .card-preview{
      .property-loc{
        font-size: 17px;
      }
    }
  }
  
  .properties-container.vertical-layout.layout-medium:has(.card-preview.large.vertical){
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    .card-preview{
      .property-loc{
        font-size: 20px;
      }
    }
  }
  .properties-container.vertical-layout.layout-large:has(.card-preview.large.vertical){
    grid-template-columns: repeat(3, 1fr);
    .card-preview{
      .property-loc{
        font-size: 20px;
      }
    }
  }
  .properties-container.vertical-layout.layout-total:has(.card-preview.large.vertical){
    grid-template-columns: repeat(4, 1fr);
    .card-preview{
      .property-loc{
        font-size: 20px;
      }
    }
  }
  .card-preview.medium .property-loc{
     font-size: 1.1rem;
    line-height: 1.2;
  }
  
  .properties-container.vertical-layout.layout-small:has(.card-preview.medium.vertical){
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    .card-preview{
      height: 476px;
      .property-loc{
        font-size: 17px;
      }
  
    }
  }
  
  .properties-container.vertical-layout.layout-medium:has(.card-preview.medium.vertical){
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    .card-preview{
      height: 470px;
      .container-info{
        justify-content: flex-start;
        .property-loc{
          font-size: 17px;
        }
      }
    }
  }
  .properties-container.vertical-layout.layout-large:has(.card-preview.medium.vertical){
    grid-template-columns: repeat(4, 1fr);
    .card-preview{
      height: 470px;
      .container-info{
        justify-content: flex-start;
        .property-loc{
          font-size: 16px;
        }
      }
    }
  }
  .properties-container.vertical-layout.layout-total:has(.card-preview.medium.vertical){
    grid-template-columns: repeat(5, 1fr);
    .card-preview{
      height: 470px;
      .container-info{
        justify-content: flex-start;
        .property-loc{
          font-size: 15px;
        }
      }
    }
  }
  .card-preview.small.vertical{
    height: 385px;
    .container-info{
      .property-loc{
        font-size: 0.9rem;
        line-height: 1.1;
      }
    }
  }
  .card-preview.small.vertical .container-info .property-info .grid-templates .value{
    font-size: 12px;
  }
  .properties-container.vertical-layout.layout-small:has(.card-preview.small.vertical){
    grid-template-columns: repeat(3, 1fr);
    .card-preview{
      height: 437px;
      .price .value{
        font-size: 0.8rem;
      }
      .container-info .property-info .grid-templates{
        gap: 1px;
      }
    }
  }
  .properties-container.vertical-layout.layout-medium:has(.card-preview.small.vertical){
    grid-template-columns: repeat(4, 1fr);
    .card-preview{
      height: 437px;
      .price .value{
        font-size: 0.8rem;
      }
      .container-info .property-info .grid-templates{
        gap: 1px;
      }
    }
  }
  .properties-container.vertical-layout.layout-large:has(.card-preview.small.vertical){
    grid-template-columns: repeat(5, 1fr);
    .card-preview{
      .container-img{
        height: 54%;
      }
      .price .value{
        font-size: 0.8rem; 
      }
    }
  }
  .properties-container.vertical-layout.layout-total:has(.card-preview.small.vertical){
    grid-template-columns: repeat(6, 1fr);
    .card-preview{
      .price .value{
        font-size: 0.8rem;
      }
      .view-details-button{
        margin-bottom: 1rem;
        width: fit-content;
      }
    }
  }
  .card-preview.vertical .container-info .property-info .grid-templates{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
      justify-items: start; /* 🔹 alinea el contenido de cada celda a la izquierda */
    justify-content: start; /* 🔹 asegura que las columnas se mantengan pegadas al inicio */
    /* align-items: start; */
  }
  
  .total-items-and-order{
    width: var(--page-width);
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  
  .total-items-and-order span{
    font-size: 15px;
  }
  .total-items-and-order .label{
    font-weight: bold;
    margin-right: 8px;
  }
  .card-preview {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    transition: transform 0.2s ease;
    cursor: pointer;
    .grid-templates.vertical{
      .grid{
        display: flex;
        flex-direction: column;
        margin-top: 5px;
      }
      #plotArea{
        display: none;
      }
      /* .icon{
        display: none;
      } */
    }
    .info-and-icon{
      display: flex;
      gap: 6px;
      align-items: center;
    }
  }
  .card-preview.vertical:hover{
    z-index: 5;
    transform: translateY(-10px);
  }
  .card-preview.horizontal:hover{
    z-index: 5;
    transform: translateX(10px);
  }
  /* .card-preview.vertical:hover .container-info .line-hor{
        transform: scaleX(0.5);
  
  } */
  .card-preview.horizontal{
    display: flex;
    flex-direction: row;
    width: 100%;
    background-color: var(--card-bg, #e9e9e9);
  
    .property-loc{
      font-size: 1rem;
      margin-bottom: 0;
      margin-top: 0.5rem ;
    }
  }
  .properties-container.horizontal-layout.layout-small:has(.card-preview.large.horizontal){
    .card-preview{
      height: 200px;
      .property-info{
        flex-direction: row;    
        justify-content: space-between;
        .grid-templates{
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          row-gap: 0;
          column-gap: 3rem;
        }
        .units-box{
          display: flex;
          flex-direction: column;
          align-self: end;
        }
      }
    }
  }
  .properties-container.horizontal-layout.layout-medium:has(.card-preview.large.horizontal){
    .property-info{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .grid-templates{
        display: flex;
        gap: 2rem;
      }
    }
    .units-box{
      justify-content: end;
    }
  }
  .properties-container.horizontal-layout.layout-large:has(.card-preview.large.horizontal){
    .property-info{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .grid-templates{
        display: flex;
        gap: 2rem;
      }
    }
    .units-box{
      justify-content: end;
    }
  }
  .properties-container.horizontal-layout.layout-total:has(.card-preview.large.horizontal){
    .property-info{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .grid-templates{
        display: flex;
        gap: 2rem;
      }
    }
    .units-box{
      justify-content: end;
    }
  }
  .properties-container.horizontal-layout.layout-small:has(.card-preview.medium.horizontal){
    .card-preview{
      height: 150px;
      .container-info{
        #priceOut{
          .value{
            font-weight: bold;
          }
          .icon{
            font-size: 15px;
          }
        }
        .property-info{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .grid-templates{
            display: flex;
            flex-direction: row;
            gap: 1.5rem;
            .grid{
              .label{
                font-size: 14px;
              }
              .value{
                font-size: 13px;
              }
              .icon{
                font-size: 15px;
              }
            }
          }
          
        }
        .units-box{
          justify-content: end;
        }
      }
    }
  }
  .properties-container.horizontal-layout.layout-medium:has(.card-preview.medium.horizontal){
    .card-preview{
      height: 150px;
      .container-info{
        #priceOut{
          .value{
            font-weight: bold;
            font-size: 17px;
          }
          .icon{
            font-size: 15px;
          }
        }
        .property-info{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .grid-templates{
            display: flex;
            flex-direction: row;
            gap: 2rem;
            .grid{
              .label{
                font-size: 16px !important;
              }
              .value{
                font-size: 16px !important;
              }
            }
          }
          
        }
        .units-box{
          justify-content: end;
          .label{
                font-size: 16px !important;
              }
              .value{
                font-size: 16px !important;
              }
        }
      }
    }
  }
  .properties-container.horizontal-layout.layout-large:has(.card-preview.medium.horizontal){
    .card-preview{
      height: 150px;
      .container-info{
        #priceOut{
          display: flex;
          align-items: center;
          gap: 0.5rem;
          .value{
            font-weight: bold;
            font-size: 18px;
          }
          .icon{
            font-size: 15px;
          }
        }
        .property-info{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .grid-templates{
            display: flex;
            flex-direction: row;
            gap: 3.5rem;
            .grid{
              .label{
                font-size: 17px;
              }
              .value{
                font-size: 17px;
              }
            }
          }
          
        }
        .units-box{
          justify-content: end;
          .label{
            font-size: 17px;
          }
          .value{
            font-size: 17px;
          }
        }
      }
    }
  }
  .properties-container.horizontal-layout.layout-total:has(.card-preview.medium.horizontal){
    .card-preview{
      height: 150px;
      .container-info{
        #priceOut{
          .value{
            font-weight: bold;
            font-size: 17px;
          }
          .icon{
            font-size: 15px;
          }
        }
        .property-info{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .grid-templates{
            display: flex;
            flex-direction: row;
            gap: 4.5rem;
            .grid{
              .label{
                font-size: 17px;
              }
              .value{
                font-size: 17px;
              }
            }
          }
          
        }
        .units-box{
          justify-content: end;
          .label{
            font-size: 17px;
          }
          .value{
            font-size: 17px;
          }
        }
      }
    }
  }
  .card-preview.horizontal .container-info .property-info .grid-templates .grid{
    display: flex;
    flex-direction: column;
  }
  .card-preview.small.horizontal{
    height: 120px;
    .property-loc{
      font-size: 18px;
    }
    .container-info{
      justify-content: space-between;
      height: 88%;
      .property-info .grid-templates{
        font-size: 15px;
        .label{
          font-size: 15px;
        }
        .value{
          font-size: 15px;
        }
      }
    }
  }
  .card-preview.medium.horizontal{
    height: 170px;
    .property-loc{
      font-size: 20px;
    }
    .container-info {
      justify-content: space-between;
      height: 92%;
      .property-info{ 
        gap: 52px;
        .grid-templates{
          font-size: 17px;
          #price-in{
            display: none;
          }
          .label{
            font-size: 15px;
          }
          .value{
            font-size: 15px;
          }
        }
      }
    }
  }
  .card-preview.large.horizontal{
    height: 170px;
    .property-loc{
      font-size: 25px;
    }
    .container-info {
      justify-content: space-between;
      #priceOut{
        display: flex;
        align-items: center;
        gap: 0.5rem;
        .span-info{
          .value{
            font-size: 18px;
          }
        }
        .value{
          font-size: 18px;
          font-weight: bold;
        }
        .icon{
          font-size: 15px;
        }
      }
      .property-info{
        .grid-templates{
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          font-size: 17px;
          #price-in{
            display: none;
          }
          .label{
           font-size: 16px;
          }
          .value{
            font-size: 16px;
          }
        }
      }
      .view-details-button{
        bottom: -4rem;
      }
    }
  }
  
  .card-preview.small.vertical,
  .card-preview.medium.vertical,
  .card-preview.large.vertical {
    width: 100%;
    #priceOut{
      display: none;
    }
  }
  
  
  .card-preview.horizontal .container-img {
    width: 40%;
    height: auto;
    img{
        object-fit: cover;
  
    }
  }
  
  
  .card-preview.horizontal .container-info {
    display: flex;
    flex-direction: column;
    justify-content: start;
    flex-grow: 1;
    padding: 7px 22px;
    position: relative;
    gap: 0;
  }
  .card-preview.horizontal .property-info{
    display: flex;
    flex-direction: column;
  }
  
  
  
  .card-preview.horizontal .container-info .property-info .units-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .label{
      font-size: 15px;
    }
    .value{
      width: fit-content;
      font-size: 14px;
    }
  }
  
  
  .card-preview.vertical{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  .card-preview.vertical .container-img {
    flex-shrink: 0;
    height: 60%;
    overflow: hidden;
    position: relative;
  }
  .card-preview.vertical .container-info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .card-preview .container-img .stage-badge {
    position: absolute;
    padding: 6px 11px !important;
    border-radius: var(--border-radius) !important;
    left: 0px;
    top: 0;
    height: 7% !important;
    justify-content: center;
    background-color: #0003;
    backdrop-filter: blur(4px);
    display:inline-flex;align-items:center;gap:6px;
    font-size:12px !important;
    color:white; 
    font-weight: 600 !important; 
    width:fit-content
  }
  .stage-badge .stage-dot {
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    background-color: currentColor;
  }
  .stage-badge .stage-dot.completed{
      animation: pulseDot 1.6s ease-in-out infinite;
  }
  
  @keyframes pulseDot {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0;
      transform: scale(0.9);
    }
  }
  
  .card-preview .container-info {
    display: flex;
    flex-direction: column;
    justify-content: start;
    flex-grow: 1;
    padding: 15px 20px;
    text-align: left;
    background-color: var(--card-bg);
  
  }
  
  .card-preview .container-info .price .value{
    font-size: 15px;
    font-weight: bold;
  }
  .card-preview.horizontal .container-info .line-hor{
    width: 100%;
    display: flex;
    justify-self: start;
    color: var(--line-color);
    transition: width 0.2s ease;
    background-color: var(--line-color);
    margin: 2px;
    /* height: 2px; */
  }
  .card-preview.small.horizontal .container-info .property-info .label{
    font-size: 14px;
  }
  .card-preview.medium.horizontal .container-info .property-info .label{
    font-size: 15px;
  }
  .card-preview.large.horizontal .container-info .property-info .label{
    font-size: 18px;
  }
  .card-preview.vertical .container-info div .line-hor{
    width: 100%;
    display: block;
    color: var(--line-color);
    background-color: var(--line-color);
    transform-origin: left;
    transition: width 0.2s ease;
    /* height: 2px; */
    margin-top: 0 !important;
    margin-bottom: 11px !important;
    height: 1px;
  }
  .card-preview.horizontal .container-img .prop-ref{
    position: absolute;
    z-index: 5;
    box-shadow: 0px 0px 12px #2c2a2a4b;
    top: 0;
    right: 24px;
  
  }
  .card-preview .container-img .prop-ref{
    position: absolute;
    background-color: var(--type-btn-bg, #070100);
    color: var(--tag-color, #ffffff);
    padding: 4px 10px;
    border-radius: var(--border-radius);
    font-size: 12px;
    text-transform: uppercase;
    top: 4px;
    right: 4px;
    box-shadow: 0px 0px 12px #2c2a2aba;
    font-weight: bold;
    margin: 0;
  }
  
  .container-info .property-box-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    color: gray;
    font-size: var(--text-size);
    height: 2rem;
  }
  
  .container-info .property-loc {
    font-size: 17px;
    font-weight: bold;
    color: #333;
    width: fit-content;
  }
  
  /* Bloque inferior con datos */
  .card-preview.vertical .container-info .property-info {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    justify-content: start;
    gap: 5px;
  }
  .price .span-info{
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  
  .container-info .property-info .value {
    color: #444;
    font-weight: 600;
    width: fit-content;
  }
  .container-info .property-info .label{
    color: gray;
    font-weight: bold;
    background-color: transparent;
    padding: 0px 0px !important;
  }
  .container-info .property-info span{
    font-size: var(--text-size);
  }
  .card-preview .container-info .view-details-button {
    display: inline-block;
    text-align: center;
    background-color: var(--btn-details, #070100);
    color: #fff;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    margin-top: 15px;
    width: 26%;
    align-self: center;
    font-size: 1rem;
  }
  .card-preview.horizontal .container-info .view-details-button{
    font-size: 12px;
    width: fit-content;
    position: absolute;
    bottom: -1rem;
  }
  .card-preview.vertical .container-info .view-details-button{
    font-size: 0.7rem;
    width: fit-content;
    margin-bottom: 1rem ;
  }
  .card-preview.horizontal .container-info .property-info .grid .span-info, 
  .card-preview.vertical .container-info .property-info .grid .span-info{
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .card-preview.horizontal .container-info .property-info .grid .span-info i, 
  .card-preview.vertical .container-info .property-info .grid .span-info i {
    align-self: center;
  }
  .card-preview.medium.vertical .container-info .property-info .grid{
    font-size: 0.9rem;
  }
  .card-preview.large.vertical .container-info .property-info .grid{
    font-size: 1rem;
  }
  .container-info .property-info .grid{
    display: flex;
  }
  
  .card-preview.vertical .container-info .property-box-type,
  .card-preview.vertical .container-info .property-loc{
    margin: 0;
  }
  
  .card-preview.vertical .container-info .property-box-type .prop-ref,
  .card-preview.vertical .container-info .property-box-type .prop-type{
    margin: 0;
  }
  .card-preview.vertical .container-info .property-box-type .prop-ref{
    font-size: 0.8rem;
    background-color: rgb(162, 159, 159);
    border-radius: var(--border-radius);
    padding: 4px;
    color: white;
    box-shadow: 0px 0px 4px #2c2a2aba;
    font-weight: bold;
  }
  .card-preview .boxDetails{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .card-preview.horizontal .boxDetails{
    justify-content: end;
  }
  @media (max-width:768px){
    .powered-by-zoddak{
      width: 100%;
      align-items: center;
      display: flex;
      justify-content: flex-end;
      gap: 4px;
    }
    .powered-by-zoddak span{
      font-size: 13px;
      font-style: italic;
    }
    .powered-by-zoddak img{
      width: 15%;
    }
    .total-items-and-order{
      max-width: 100%;
    }
    .total-items-and-order .total-items{
      display: flex;
      flex-direction: column;
    }
    .total-items-and-order .total-items span{
      font-size: 12px;
    }
    .total-items-and-order #orderBy{
      max-width: 200px;
    }
    .properties-container.vertical-layout.size-small,
    .properties-container.vertical-layout.size-medium,
    .properties-container.vertical-layout.size-large,
    .properties-container.vertical-layout.layout-large,
    .properties-container.vertical-layout.layout-medium,
    .properties-container.vertical-layout.layout-small,
    .properties-container.vertical-layout.layout-total{
      grid-template-columns: repeat(1, 1fr) !important;
    }
    .card-preview.horizontal{
      display: flex;
      flex-direction: column;
      height: 308px !important;
      .container-img{
        width: 100%;
        height: 40%;
        .prop-ref{
          top: 2px;
          right: 2px;
        }
      }
      .container-info{
        /* justify-content: flex-start !important; */
        #priceOut{
          .value, fa{
            font-size: 15px !important;
          }
          .span-info{
            span{
              font-size: 15px !important;
            }
          }
        }
        .property-info{
          gap: 33px !important;
          .grid-templates.horizontal{
            display: grid !important;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px !important;
            .grid{
              .value{
                font-size: 12px !important;
              }
              .label{
                font-size: 13px !important;
              }
            }
          }
          .units-box{
            .label{
                font-size: 13px !important;
            }
            .span-info .value{
                font-size: 12px !important;
  
            }
          }
        }
      }
    }
    /* .card-preview.small.horizontal .container-info .view-details-button{
      font-size: 0.7rem;
      width: fit-content;
    } */
    .card-preview.horizontal .container-info .property-info .grid{
      font-size: 0.7rem;
    }
    .card-preview.small.horizontal{
      height: 15rem;
    }
    .filters-toggle {
      display: inline-block;
    }
  
    .filters-container {
      max-height: 0;
      opacity: 0;
    }
  
    .filters-container.active {
      max-height: 1000px; /* suficiente para que quepa todo */
      opacity: 1;
    }
  
    .filters-toggle.active i {
      transform: rotate(180deg);
    }
     /* Permite que los selectores bajen de línea */
    .filter-selector-row {
      flex-wrap: wrap;
      gap: 15px;
    }
  
    /* Cada campo ocupa el 100% en móvil */
    .filter-selector {
      flex: 1 1 100%;
      min-width: unset;
    }
  
    /* Ajusta el margen inferior del título */
    .search-menu-preview h3 {
      margin-bottom: 10px;
      text-align: center;
    }
  
    /* Centra los botones de acción */
    .search-form-buttons {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 15px;
    }
  
    .search-form-buttons a,
    .search-form-buttons button {
      width: 48%;
      min-width: 120px;
    }
  
    /* Ajusta paddings generales */
    .search-menu-preview {
      padding: 15px;
    }
  }
  .custom-multiselect {
    position: relative;
    width: 100%;
  }
  
  /* .custom-multiselect .dropdown-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
    height: 20px;
    top: 7px;
    position: relative;
  } */
  
  .custom-multiselect .dropdown-btn:hover {
    border-color: #999;
  }
  
  .custom-multiselect .dropdown-btn .placeholder {
    color: rgb(154, 152, 152);
    font-size: 14px;
    justify-content: flex-start;
    display: flex !important;
    width: 100%;
  }
  
  .custom-multiselect .arrow {
    font-size: 12px;
    color: #555;
    margin-left: 8px;
  }
  
  .custom-multiselect .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    width: 274px;
    max-height: 275px;
    overflow-y: auto;
    top: 37px;
    left: -50px;
    margin-top: 5px;
    z-index: 999;
    .buttons{
      display: flex;
      flex-direction: row;
      width: 100%;
      .btn-select{
        border: none;
        border-radius: var(--border-radius);
        background-color: black;
        color: white;
        cursor: pointer;
        padding: 4px;
        width: 100%;
      }
      .btn-deselect{
        border: none;
        padding: 4px;
        border-radius: var(--border-radius);
        width: 100%;
        color: white;
        cursor: pointer;
        background-color: rgb(81, 79, 79);
      }
    }
    .dropdown-items{
      padding: 9px;
    }
  
  }
  
  .custom-multiselect .dropdown-content.active {
    display: block;
  }
  
  .custom-multiselect .group {
    margin-bottom: 10px;
    .town{
      position: relative;
      color: var(--type-btn-bg);
      padding: 7px;
      border-radius: var(--border-radius);
      font-weight: bold;
      cursor: pointer;
    }
  }
  .custom-multiselect .group .town::before{
    position: absolute;
    content: '';
    background-color: var(--type-btn-bg);
    width: 4px;
    height: 100%;
    left: 0;
    top: 0;
  }
  .custom-multiselect .group strong {
    display: block;
    margin-bottom: 5px;
    color: #444;
    font-size: 14px;
  }
  
  .custom-multiselect label {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #333;
    cursor: pointer;
  }
  
  .custom-multiselect input[type="checkbox"] {
    margin-right: 6px;
  }
  
  .custom-multiselect .selected-items {
    color: #000;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
  }
  
  /* === Estilo elegante con “tick” en lugar de checkbox === */
  .custom-multiselect .dropdown-items label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
    font-size: 13px;
    color: #333;
    transition: color 0.2s ease;
  }
  
  /* Oculta el checkbox nativo */
  .custom-multiselect .dropdown-items input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    position: absolute;
  }
  
  /* Deja espacio reservado a la izquierda para el tick */
  .custom-multiselect .dropdown-items label::before {
    content: "";
    display: inline-block;
    width: 16px;
    text-align: center;
  }
  
  
  /* Cambia el color del texto del elemento seleccionado */
  .custom-multiselect .dropdown-items input[type="checkbox"]:checked ~ span,
  .custom-multiselect .dropdown-items input[type="checkbox"]:checked + * {
    color: var(--type-btn-bg, #c59e1c);
    font-weight: 600;
  }
  /* Oculta el checkbox nativo */
  .custom-multiselect .dropdown-items input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
  }
  
  /* Deja espacio para el tick en el label */
  .custom-multiselect .dropdown-items label {
    position: relative;
    padding-left: 20px; /* espacio para el ✔ */
    cursor: pointer;
    font-size: 13px;
    color: #333;
    display: block;
  }
  
  
  /* Opcional: cambia el color del texto del seleccionado */
  .custom-multiselect .dropdown-items input[type="checkbox"]:checked + label {
    color: var(--type-btn-bg, #c59e1c);
    font-weight: 600;
  }
  
  
  
  /* ====== MULTISELECT: tick a la derecha ====== */
  
  /* Oculta el checkbox pero mantiene clic en el label */
  .custom-multiselect .dropdown-items label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  /* Label base */
  .custom-multiselect .dropdown-items label {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    padding-right: 20px;
    transition: color 0.2s ease;
  }
  
  .custom-multiselect .dropdown-items label::after {
    content: "";
    position: absolute;
    right: 0;
    top: 2px;
    width: 16px;
    text-align: center;
  }
  
  .custom-multiselect .dropdown-items label:has(input[type="checkbox"]:checked)::after {
    content: "✔";
    color: var(--type-btn-bg, #c59e1c);
    font-weight: 700;
    font-size: 14px;
  }
  .pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    font-family: inherit;
  }
  
  .pagination {
    font-weight: 400;
    color: #666;
    text-decoration: none;
    padding: 0.35rem 0.65rem;
    border-radius: var(--border-radius);
    transition: all 0.25s ease;
    user-select: none;
  }
  
  .pagination.arrow {
    color: var(--current-page-color);
    font-size: 1rem;
    opacity: 0.7;
  }
  
  .pagination.arrow:hover {
    opacity: 1;
    transform: translateY(-1px);
  }
  
  .pagination.current {
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    background: var(--current-page-color);
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .pagination.other {
    color: var(--current-page-color);
  }
  
  .pagination.other:hover {
    background: rgba(122, 162, 46, 0.1);
    color: var(--current-page-color);
    transform: translateY(-1px);
  }
  
  .pagination-info {
    display: block;
    text-align: center;
    margin-top: 0.4rem;
    color: #777;
    font-size: 0.9rem;
  }
}