/* === Policy Checks Moderno y Minimalista === */
.policy-checks {
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
  align-items: flex-start;
 
}

.policy-check-text {
  color: #7b7b7b;
  font-size: 1.8vh;
  font-weight: 400;
  margin-right: 0.2vh;
  transition: color 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.policy-check-link {
  color: #7b7b7b;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.policy-check-link:hover, .policy-check-link:focus {
  color: #000;
  text-decoration: none;
}
.policy-checkbox {
  display: none;
}
.custom-checkbox {
  width: 2.2vh;
  height: 2.2vh;
  border-radius: 50%;
  border: 0.3vh solid #d1d1d6;
  background: #f8f8fa;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3vh;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.policy-checkbox:checked + .custom-checkbox {
  border-color: #4cd964;
  background: #eaffea;
}
.custom-checkbox::after {
  content: '';
  display: block;
  width: 1.1vh;
  height: 1.1vh;
  border-radius: 50%;
  background: #4cd964;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s, transform 0.18s;
}
.policy-checkbox:checked + .custom-checkbox::after {
  opacity: 1;
  transform: scale(1);
}
/* Animación de check tipo Apple */
.custom-checkbox svg {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
}
.policy-checkbox:checked + .custom-checkbox svg {
  opacity: 1;
}
/* Base & Reset */
body {
  margin: 0;
  padding: 0; 
  background-color: #DFDFDF;
  color: #000; 
  font-family: sans-serif; 
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
html {touch-action: manipulation;}

.product-title {
  transition: transform 350ms /*cubic-bezier(0.4, 0, 0.2, 1)*/;
  will-change: transform;
}

p{margin: 0;}
#Text_002 p {margin: revert;}
button {
  padding: 0;
      padding-inline: 0;
}

/* Quitar el highlight azul en móviles */
* {
  -webkit-tap-highlight-color: transparent;
}

.gmnoprint,
.gm-style-cc {
    display: none !important;
}

[class*="gmnoprint"],
[class*="gm-style-cc"] {
    display: none !important;
}

.cards-container {
  position: relative;
  height: 48.4vh;
  margin: 1.4vh;
  border-radius: 3.1vh;
  overflow: hidden;
 

}
.product-category {
  height: 48.4vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 

}

#panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
  display: none;
}

#button-container { 
  position: absolute;
  display: flex; 
  justify-content: space-between; 
  margin: 0; 
  padding: 0; 
  z-index: 9;
}
    #order-button { width: 100px; height: 40px; /*border-radius: textgui;*/ } 
    #info-button { width: 40px; height: 40px; /*border-radius: textgui;*/ }

  #order-button, #info-button {
  background-color: #cfcfcf; 
  color: #333;
  font-weight: bold;
  border: none; 
  transition: background-color 0.35s;
}
    #order-button:hover, #info-button:hover { 
    background-color: #b0b0b0; 
}

.text-box {
  display: inline-flex; 
  /*background-color:  textgui;*/ 
  /*border-radius: textgui;*/  
  padding: 0 30px 0 50px;
}
.green-dot {
  position: absolute;
  /* width: textgui;  */
  /* height: textgui; */
  /* background-color: Actualizado por script; */
  border-radius: 50%;
  top: 50%; 
  transform: translateY(-55%);
  z-index: 10
}

#Text_001, #Text_003 { font-weight: bold; } 
#Text_002 { color: #8d8d8d; }
  [id^="Text_"] {
  /* fontSize: textgui; */
  position: absolute; 
  text-align: left;
  letter-spacing: 0.5px; 
  line-height: 1.4;
  z-index: 1;
}

/* Panel sliding & layout */
.drag-handle {
  width: 40px;
  height: 5px; 
  background-color: #f4f4f4;
  margin: 15px auto;
  border-radius: 3px; 
  z-index: 10;
}

.panels-container.slide-up { transform: translateY(0%); }
  .panels-container {
  position: fixed;
  bottom: 0; 
  left: 1px; 
  right: 1px;
  transform: translateY(100vh); 
  z-index: 10;
}


.products-panel {
  background-color: #f4f4f4;
  border-radius: 4.5vh 4.5vh 0 0;
  width: 100vw;
  height: 100vh;
  max-width: 61vh;
  max-height: 71vh;
  margin: auto;  
  position: relative; 
  overflow: hidden;
}

.panel-content::-webkit-scrollbar { display: none; }
  .panel-content {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
}


.panel-footer {
  position: absolute;
  bottom: 0;
  left: 0; 
  right: 0;
  min-height: 15vh;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: #f4f4f4;
  z-index: 10;
}


.panel-footer .panel-instructions {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 11.5vh;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.8vh;
  color: #7b7b7b;
  box-sizing: border-box;
  padding: 0 2vh;
  flex-direction: column;
  max-width: 50vh;
 
}

.total-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    padding: 0 4vh;
  
    margin: 1vh 0;
}

#total-price {
    font-size: 2.3vh;
  
    color: #7b7b7b;
    margin: 0;
    text-align: center;
    width: 35%;
    white-space: nowrap;
}


.panel-footer .dot-indicator {
  position: absolute;
  bottom: 80%;
  left: 50%;
  width: 1.1vh;
  height: 1.1vh;
  border-radius: 50%;
  display: block;
}

.product-item {
  display: flex;
  position: absolute;
  border-radius: 3.1vh;
  cursor: pointer;
  background-color: #e9e9e9; 
  overflow: hidden;
  transition: height 350ms 15ms, opacity 250ms 70ms;
}

.product-item.expanded {
  transition: height 250ms, opacity 350ms;
}

.product-item.animating { pointer-events: none; }

.vertical-buttons {
  flex-direction: column;
  position: absolute;
  top: 2.6vh;
  right: 2.6vh; 
  display: flex;
  gap: 1.2vh;
  z-index: 10;
  align-items: center; /* Centra los botones verticalmente */
  justify-content: center; /* Centra los botones verticalmente */
}

.control-btn {
  width: 4.4vh;
  height: 4.4vh;
  border-radius: 50%;
  margin: 0;
  border: none; 
  cursor: pointer; 
  font-weight: bold;
  color: #000; 
  display: flex;
  align-items: center; 
  justify-content: center;
  transition: background-color 450ms /*cubic-bezier(0.4, 0, 0.2, 1)*/; 
}
.product-item.collapsed .control-btn { background-color: #f4f4f4 ; }
.product-item.expanded .control-btn { background-color: #e9e9e9 ; }

.control-btn svg {
  display: block;
  margin: auto;
  stroke: #414141; /* Asegura el color del trazo */
  width: 30%;
  height: 30%;
  pointer-events: none;
}



.product-wrapper {
  width: 100%; 
  position: relative;
  display: flex; 
  flex-direction: column;
  z-index: 5;
}

.product-image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.product-item.collapsed .product-image-wrapper {
  position: absolute; 
  width: 10vh;
  height: 10vh;
  margin: 0;
  top: 50%;
  left: 2.6vh;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.product-item.expanded .product-image-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 25vh;
  width: 25vh;
  margin: 0 auto;
  transform: translateY(-70%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.product-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Collapsed state */
.product-item.collapsed {
  align-items: stretch;
  height: 15.2vh;
  position: relative;
  

}
.product-item.expanded {
  align-items: stretch;
  height: 48.4vh;
  position: relative;


}

.product-item.collapsed .product-wrapper {
  display: block;
  position: relative;
}

.product-title-container {
  position: absolute;
  top: 0;
  z-index: 2;
}

.product-item.collapsed .compact-title {
  padding-left: 14vh;
  align-items: flex-start;
  display: flex;
}

.product-info-wrapper {
  position: absolute;
  bottom: 0;
  z-index: 2;
  position: relative;
  width: 100%;
  height: 100%;
}

.product-item.collapsed .compact-info {
  padding-left: 14vh;
  display: flex;
  align-items: flex-end;
}

.compact-title,.expanded-title, 
.compact-info,.expanded-info { 
  display: none;
}

.product-item.collapsed .compact-title,
.product-item.collapsed .compact-info {
  display: flex !important;
  
}

.product-item.expanded .expanded-title,
.product-item.expanded .expanded-info {
  display: flex !important;
 
}
/* --- Apilar info compacta y expandida para transición suave --- */
.compact-info, .expanded-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* Quitar height: 100% para que solo ocupen su propio contenido */
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  flex: 1 1 0;
  transition: opacity 200ms /*cubic-bezier(0.4, 0, 0.2, 1)*/;
}
.compact-info {
  padding: 0 0 4.1vh 14vh;
  top: 10.5vh;
}
.expanded-info {
  padding: 0;
}

.product-item.expanded .compact-info,
.product-item.expanded .expanded-info {
  transition: opacity 350ms 100ms/*cubic-bezier(0.4, 0, 0.2, 1)*/;
}
.product-item.collapsed .compact-info {
  opacity: 1;
  pointer-events: auto;
}
.product-item.expanded .expanded-info {
  opacity: 1;
  pointer-events: none;
}

.product-item.expanded .compact-info {
  opacity: 0;
  pointer-events: auto;
}

.product-item.collapsed .expanded-info {
  opacity: 0;
  pointer-events: none;
}

/* Expanded state */
.product-item.expanded .product-title-container {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  text-align: center; 
  order: -1;
  z-index: 2;
}

/* Counter badge */
.product-counter {
  position: absolute;
  border-radius: 50%;
  background: var(--counter-bg, #f4f4f4);
  color: var(--counter-color, #333);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  width: 4vh;
  height: 4vh;
  top: 60%;
  left: -10%;
  font-size: 2vh;
  transition: all 0.35s /*cubic-bezier(0.4, 0, 0.2, 1)*/, opacity 0.35s 350ms /*cubic-bezier(0.4, 0, 0.2, 1)*/;
  z-index: 10;
}
.product-item.has-count .product-counter {
  opacity: 1;
  top: 60%;
  left: 8.8vh;
}
.product-item.expanded .product-counter {
  opacity: 0;
  transition: opacity 150ms;
}

.info-columns-separator {
  width: 2px; background-color: #dbdbdb; margin: 0.5vh 2vh;
}

/* Title styles */
.compact-title { padding-top: 4.7vh;}
.product-title { color: #151515; }

.product-title.compact {
  font-size: 2vh; text-align: left;
}
.product-title.expanded {
  font-size: 3.5vh; text-align: center;
}
.expanded-title {
  padding-top: 2.5vh;
  width: max-content; 
  margin: auto;
  
}

/* Info sections */
.compact-info { padding-bottom: 4.7vh; }

.column-value {
  font-size: 4vh;
  color: #151515; 
}
.product-price.compact {
font-size: 2vh;
color: #8d8d8d;
}
.column-value.desc{
font-size: 1.8vh;  
color: #151515; 
}

.column-label {
  font-size: 1.8vh;
  padding-right: 1vh; 
  color: #8d8d8d;
}

.info-columns {
  display: flex; 
  width: 100%; 
  padding: 3.5vh; 
  position: relative;
  align-items: flex-end; 
}

.info-column {
  position: relative;
  display: flex; 
  flex-direction: column; 
  height: 8vh;
  align-items: flex-start;
  justify-content: space-between;
}

.info-columns-separator {
  width: 0.2vh;
  background-color: #dbdbdb;
  margin: 0.5vh 2vh;
  align-self: stretch;
}


.white-background-box {
  position: absolute;
  top: 0.4vh;
  left: 0.5vh;
  right: 0.5vh;
  height: 33vh;
  background-color: transparent;
  border-radius: 2.6vh;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;


}

.white-background-fill {
  width: 100%;
  background-color: #f4f4f4;
  border-radius: inherit;
  transform-origin: top center;
  opacity: 0;
  transition:
    height 200ms  /*cubic-bezier(0.4, 0, 0.2, 1)*/,
    opacity 350ms;
}

.product-item.expanded .white-background-fill {
  transition:
    height 300ms /*cubic-bezier(0.4, 0, 0.2, 1)*/;
}


.product-item.expanded .white-background-fill {
  height: 100%;
  opacity: 1;
}

.product-item.collapsed .white-background-fill {
  height: 0%;
  opacity: 0;
}

#product-categories {
  margin-bottom: 0;
  padding-bottom: 0;
}

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(223, 223, 223);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.loading-logo-container {
    width: 10vh;
    height: 10vh;
    position: relative;
}

#weeif-logo {
    width: 100%;
    height: 100%;
    /* Logo completamente estático - sin animaciones */
}

/* === Estilos del Logo SVG === */
.logo-path {
    fill: #00000000;
}

.logo-base {
    fill: none;
    stroke: #acacac;
    stroke-width: 50;
    stroke-opacity: 0.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logo-outline {
    fill: none;
    stroke: #bbbbbb;
    stroke-width: 50;
    stroke-dasharray: 800 15000;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: loadingLoop 10s linear infinite;
}

@keyframes loadingLoop {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -15800;
    }
}






.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}


#map-content {
    width: calc(100% - 4vh);
    height: 47.8vh;
  
    margin: 2vh;
    box-sizing: border-box;
    border-radius: 2.5vh;
    overflow: hidden;
}

#continue-button {
  background-color: #e9e9e9;
  font-size: 2vh;
  font-weight: bold;
  color: #494949;
  border: none;
  border-radius: 7vh;
  width: 25vh;
  height: 7vh;
}

#back-button {
  background-color: #e9e9e9;
  border: none;
  border-radius: 7vh;
  width: 7vh;
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #494949;
}
#back-button svg {
  width: 40%;
  height: 40%;
  display: block;
  margin: auto;
  margin-left: 2vh; 
}

#address-input, #phone-input {
  width: 75%;
  padding: 2.2vh;
  font-size: 2vh;
  margin: 2vh;
  font-weight: bold;
  letter-spacing: 0.2vh;
  border-radius: 4vh;
  background-color: #e9e9e9;
  border: none;
  color: #979797;
  text-align: center;
}


#address-input:focus, #phone-input:focus {
  outline: none;
  border: none;
  
}

#phone-content p, #address-content p {
  color: #7b7b7b;
  margin: 1.5vh;
  font-size: 1.8vh;
}

.steps-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vh;
    margin-top: 2.3vh;
    
}

.step-dot {
    width: 1vh;
    height: 1vh;
    border-radius: 50%;
    background: #cccccc;
    display: inline-block;
    opacity: 0.6;
    transition: background 0.25s, opacity 0.25s, transform 0.25s;
 
}

.step-dot.active {
    background: #cccccc;
    opacity: 1;
    transform: scale(1);
  
    animation: stepDotFadeIn 0.4s cubic-bezier(0.4,0,0.2,1);
}

@keyframes stepDotFadeIn {
    0% { opacity: 0.2; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* Estilos para los SVG de los formularios de dirección y teléfono */
#phone-content svg,
#address-content svg {
  display: block;
  margin: 5vh auto auto;
  width: 7vh;
  height: 7vh;
  fill: #cccccc;
  opacity: 0;
  transform: scale(0.92) translateY(18px);
  animation: svgModernFadeIn 0.7s cubic-bezier(0.4,0,0.2,1) 0.1s forwards;
}




@keyframes svgModernFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(18px);
    filter: blur(2px);
  }
  60% {
    opacity: 1;
    transform: scale(1.04) translateY(-2px);
    filter: blur(0.5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

.card-fields {
  padding: 2.5vh 5vh;
  margin-top: auto;
}

.credit-card-visual {
  background: #171717;
  border-radius: 2.6vh;
  margin: 0.5vh;
  width: calc(100% - 1vh);
  height: 33vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
}

/* Tarjeta de pago en efectivo */
.credit-card-visual.efectivo {
  background: #B3CEA9;
  background-image: url('../assets/Img/BackCash.png');
  background-size: cover;
  background-repeat: no-repeat; 
}
.credit-card-visual.efectivo .card-title {
  color: #23583f9c;
}


.payment-card-container {
  background: #e9e9e9;
  border-radius: 3.1vh;
  height: 48.4vh;
  width: calc(100% - 2.8vh);
  margin: 1.4vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-label {
  color: rgba(255,255,255,0.5);
  font-size: 1.5vh;
  letter-spacing: 0.3vh;
  text-align: left;
}

.document-fields label,
.document-fields p {
  color: #7b7b7b;
  font-size: 1.8vh;
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.card-row > div,
.card-row .cvv-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: auto ;
  min-width: 0;
  max-width: 50%;
  flex: 1 1 auto;
}

.card-row .cvv-field {
  max-width: 5vh;
  min-width: 2.5vh;
  flex: 0 0 auto;
}

.card-fields input[type="text"],
.card-row input[type="text"],
#card-number {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  letter-spacing: 0.3vh;
  color: rgba(255,255,255,0.5);
  font-size: 2.3vh;
  padding: 1.2vh 4vh 1.8vh 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.card-fields input[type="text"]::placeholder,
.card-row input[type="text"]::placeholder,
#card-number::placeholder {
  color: rgba(255,255,255,0.1);
  text-align: left;
}

#card-number {
  font-size: 2.7vh;
  display: block;
  margin-bottom: 2vh;
}

.card-row > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-fields > label {
  text-align: left;
  display: block;
}

/* --- NUEVO: Para poner tipo y número de documento en una fila --- */
.document-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.document-row > div {
  flex: 0 0 auto;
  width: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 55%;
}
.document-row > div:last-child {
  max-width: 45%;
  width: 100%;
}

.document-row label {
  margin-bottom: 0.5vh;
  font-size: 1.7vh;
  color: #151515;
  font-weight: 500;
  text-align: left;
}

.document-row input[type="text"] {
  width: 100%;
  font-size: 2vh;
  color: #979797;
  background: none;
  border: none;
  outline: none;
  padding: 0.5vh 0;
  margin: 0;
}

.document-row input[type="text"]::placeholder {
  color: #979797;
  opacity: 1;
  font-weight: 400;
}

.document-row select {
  font-size: 2vh;
  color: #979797;
  background: none;
  border: none;
  padding: 0.5vh 2.5vh 0.5vh 0;
  margin: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 0.7vh;
  background-size: 2vh 2vh;
  /* SVG flecha minimalista */
  background-image: url("data:image/svg+xml;utf8,<svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4 7L9 12L14 7' stroke='%23979797' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.document-row select:focus,
.document-row input[type="text"]:focus {
  outline: none;
  border-color: #cccccc;
}

/* Opacidad 50% en inputs de tarjeta si tienen valor y no están en focus */
#card-number:not(:focus):not(:placeholder-shown),
#expiry-date:not(:focus):not(:placeholder-shown),
#cvv:not(:focus):not(:placeholder-shown) {
  opacity: 0.5;
  transition: opacity 0.2s;
}

.document-fields {
  width: 100%;
  display: flex;
  padding: 0 3vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
}

.card-header {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 3.5vh;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.card-title {
  color: #b8b8b8;
  font-size: 2.5vh;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: auto;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
}



/* Alertas tipo píldora */
.custom-alert {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff9a;
  color: #363636;
  font-size: 2vh;
  padding: 2vh 4vh;
  border-radius: 7vh;
  box-shadow: 0 1vh 5vh 0 rgba(0, 0, 0, 0.041);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
  backdrop-filter: blur(1.5vh) saturate(2.2);
  -webkit-backdrop-filter: blur(1.5vh) saturate(2.2);
  text-align: center;
  /* Propiedades para texto de una sola línea sin cortes */
  white-space: nowrap;
  max-width: none;
  width: auto;
  min-width: 14vh;
  display: inline-block;
  word-break: normal;
  overflow: visible;
}
.custom-alert.custom-alert-show {
  top: 2.4vh;
  opacity: 1;
  pointer-events: auto;
}





.cash-fields {
  width: 100%;
  display: flex;
  padding: 0 3vh;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
}

.cash-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5vh;
  align-items: flex-start;
}

.cash-row > div {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* Limita el ancho al del padre cash-fields */
  width: 100%;
  overflow-wrap: break-word;
}

.cash-row label {
  margin-bottom: 0.5vh;
  font-size: 1.7vh;
  color: #151515;
  font-weight: 500;
  text-align: left;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.cambio-para-text {
  font-size: 1.7vh;
  color: #979797;
  margin: 0;
  padding: 1vh 0 0 0;
  text-align: left;
  line-height: 1.4;
  word-break: break-word;
  max-width: 90%;
  box-sizing: border-box;
  
}


/* === RESUMEN DE PEDIDO === */

.resumen-main-box {
    background: #e9e9e9;
    border-radius: 2.5vh 2.5vh 3.5vh 3.5vh;
    margin: 2vh;
    height: 47.8vh;
    display: flex;
    flex-direction: column;
}
.resumen-precio-total {
  margin: 3vh;
  padding-top: 2vh;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.5vh;
}
.resumen-precio-label {
  font-size: 2vh;
  color: #888;
  text-align: left;
  white-space: nowrap;
}
.resumen-precio-num {
  font-size: 3.5vh;
  font-weight: bold;
  color: #222;
  text-align: left;
}
.resumen-precio-extra {
  font-size: 1.8vh;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.resumen-box-negra {
    position: absolute;
    bottom: 0;
    left: 2vh;
    right: 2vh;
    background: #181818;
    border-radius: 2vh;
    padding: 3.5vh 5vh;
    margin: 2vh;
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    height: 20vh;
 
}
.resumen-box-titulo {
  font-size: 2.2vh;
  text-align: left;
  color: #6A6A6A;
  white-space: nowrap;
}
.resumen-box-titulo-bottom {
  font-size: 2.2vh;
  text-align: left;
  color: #6A6A6A;
  white-space: nowrap;
  position: absolute;
  top: 100%;
}
.resumen-box-row {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5vh;
  right: 5vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 100%; /* Ocupa todo el alto del cuadro negro */
}
.resumen-producto-cantidad {
  font-size: 9vh;

}
.resumen-producto-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  flex: 1;
  text-align: right;
  min-width: 0;
  word-break: break-word;
  gap: 1vh;
}
.resumen-producto-direccion {
  font-size: 1.8vh;
  color: #fff;
  font-weight: 400;
  margin-bottom: 2px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  unicode-bidi: plaintext;
}
.resumen-producto-metodo {
  font-size: 1.8vh;
  color: #6db6ff;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  unicode-bidi: plaintext;
}


/* Contenedor gris para los 3 puntitos */
.resumen-dots-container {
  position: absolute;
  bottom: 3.5vh;
  left: 5vh;
  background-color: #333;
  border-radius: 1.5vh;
  padding: 1vh 1.5vh;
}

/* Estilos para los 3 puntitos */
.resumen-dots {
  display: flex;
  gap: 0.5vh;
  z-index: 10;
}

.resumen-dots .dot {
  width: 0.6vh;
  height: 0.6vh;
  background-color: #868686;
  border-radius: 50%;
}



/* Lista de productos del carrito */
.resumen-productos-lista {
  position: absolute;
  top: 100%;
  margin-top: 5vh;
  color: #6A6A6A;
  font-size: 2vh;
  text-align: left;

}

/* Mostrar la lista cuando tenga la clase 'visible' */
.resumen-productos-lista.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Item individual de producto en el resumen */
.resumen-producto-item {
  display: table-row;
}

/* Contenedor para cantidad y nombre (lado izquierdo) */
.resumen-producto-info-izq {
  display: table-cell;
  vertical-align: middle;
}

.resumen-producto-cantidad-item {
  margin-right: 1vh;
 
}

/* Nombre del producto */
.resumen-producto-nombre {
  margin-right: 3vh;
}

/* Precio del producto (lado derecho) */
.resumen-producto-precio {
  display: table-cell;
  vertical-align: middle;
  text-align: right;

  padding-left: 2vh;
}