.popup-content-guests {
    border-radius: 1.25vw;
    width: 90%;
    max-width: 32vw;
    padding: 2vw;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); */
    text-align: center;
}

.popup-step {
    animation: fadeIn 0.5s ease-out forwards;
}

.popup-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0vw;
    margin-bottom: 1.5vh;
}

.popup-header img {
    width: 4vw;
}

.popup-header h1 {
    color: var(--white);
    font-size: 2.2vw;
    font-family: "Poppins Regular";
    font-style: normal;
    font-weight: 600;
}

.popup-header p {
    max-width: 95%;
    color: var(--white);
    margin: 0.5vw 0vw;
}

.popup-header .regular-14 {
    font-size: 1.3vw;
    width: 23.5vw;
    line-height: 3vh;
    font-style: normal;
    font-weight: 400;
}

.popup-header .regular-12 {
    font-size: 0.7vw;
    width: 16vw;
    margin-top: -0.5vh;
    font-style: normal;
    font-weight: 100;
}

.counter-content {
    display: flex;
    flex-direction: column;
    gap: 3vw;
}

.counter-section {
    background-color: #fdfdfb;
    border-radius: 1vw;
    padding: 1.5vw;
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    width: 100%;
}

.counter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.counter-item .labels {
    text-align: left;
    line-height: 3.5vh;
}

.counter-item .controls {
    display: flex;
    align-items: center;
    gap: 2.5vw;
}

.control-btn {
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
    border: 1px solid #6f6b4d;
    background-color: transparent;
    font-size: 1.5vw;
    cursor: pointer;
}

.control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ada-section {
    display: flex;
    align-items: center;
    gap: 1.8vw;
    background-color: #fdfdfb;
    border-radius: 1vw;
    padding: 1vw 1.5vw;
    margin-top: 1vw;
    text-align: left;
    width: 100%;
    height: 6.5vh;
    margin-bottom: -1vh;
}

.ada-section span {
    font-size: 0.69vw;
    width: 16vw;
    line-height: 2vh;
}

.ada-checkbox {
    width: 1.6vw;
    height: 1.6vw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #f3e8e8;
}

.ada-checkbox img {
    width: 1.5vw;
    visibility: hidden;
    /* Oculto por defecto */
}

.ada-checkbox.checked img {
    visibility: visible;
}

.ada-icon {
    margin-left: auto;
    width: 2.5vw;
}

.popup-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5vw;
    flex-direction: row;
}

/* Estilos para el Paso 2: Resumen */
.summary-section {
    background-color: #fdfdfb;
    border-radius: 1vw;
    padding: 1.5vw 2vw;
}

.total-guests-circle {
    width: 6vw;
    height: 6vw;
    border-radius: 50%;
    background-color: #aaa18c1a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5vw;
    font-size: 2.5vw;
    font-family: "Poppins Bold";
}

.summary-details {
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    background: #f7f4ed9c;
    width: 24vw;
    height: 20.5vh;
    padding: 1.8vw 1.2vw;
}

.summary-item {
    display: flex;
    justify-content: space-between;
}

.black-button,
.white-button {
    color: var(--white);
    padding: 0.4vw 2vw;
    height: 4.8vh;
}

.black-button {
    width: 18vw;
    font-size: 1.4vw;
    font-weight: 100;
    font-style: normal;
    font-family: "Poppins Regular";
}

.popup-content-guests .white-button {
    background: #ffffff00;
    border: 1.5px solid #595d62;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    color: #010101;
}

.label-gray {
    color: #4a5565;
}

#summary-total {
    color: #aaa18c;
}

.text-footer {
    margin-bottom: -1vh;
    height: 1.4vw;
    font-size: 0.8vw;
}

@media (max-width: 1440px) {}

@media (max-width: 1280px) {}

@media (max-width: 1024px) {

    .popup-content-guests .white-button,
    .popup-content-guests .black-button {
        height: 3.8vh;
    }
}

@media (max-width: 768px) {
    .popup-content-guests {
        max-width: 90%;
        height: auto;
    }

    .popup-content-guests .popup-header img {
        width: 3rem;
    }

    .popup-header h1 {
        font-size: 1.9rem;
        margin-bottom: 2rem;
    }

    .popup-header p.regular-14 {
        font-size: 1.10rem;
        width: 70%;
        line-height: normal;
        margin-bottom: 1rem;
    }

    .popup-header p.regular-12 {
        font-size: 0.70rem;
        width: 55%;
        line-height: normal;
    }

    .counter-section {
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .counter-section .regular-14 {
        font-size: 1.2rem;
    }

    .counter-section .control-btn {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.4rem;
    }

    .counter-section span.regular-16 {
        font-size: 1.4rem;
    }

    .ada-section {
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .ada-section .ada-checkbox {
        width: 2rem;
        height: 2rem;
    }

    .ada-section .ada-checkbox img {
        width: 2rem;
    }

    .ada-section span {
        font-size: 0.70rem;
        width: 80%;
    }

    .ada-section .ada-icon {
        width: 2rem;
    }

    .popup-content-guests .white-button,
    .popup-content-guests .black-button {
        height: 3.8vh;
        border-radius: 1rem;
    }

    .popup-content-guests .white-button {
        width: 20%;
    }

    .popup-content-guests .black-button {
        width: 70%;
        font-size: 1rem;
    }

    #step-2-summary .popup-header img {
        width: 4.5rem;
    }

    #step-2-summary .summary-section {
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    #step-2-summary .summary-section .total-guests-circle {
        width: 4rem;
        height: 4rem;
        font-size: 2.2rem;
    }

    #step-2-summary .summary-section p.regular-14 {
        font-size: 1.2rem;
        margin: 2rem 0;
    }

    #step-2-summary .summary-section .summary-details {
        gap: 1.2rem;
        width: 100%;
        height: 12.5vh;
        justify-content: center;
        border-radius: 1rem;
        padding: 1rem 1.2rem;
    }

    #step-2-summary .summary-section .summary-details .regular-14 {
        font-size: 1.2rem;
    }

    #step-2-summary .summary-section .text-footer {
        font-size: 0.90rem;
        margin: 1.4rem 0 0;
        line-height: normal;
    }
}

@media (max-width: 480px) {
    .popup-content-guests {
        width: 90%;
        height: auto;
    }

    .popup-content-guests .popup-header img {
        width: 3rem;
    }

    .popup-header h1 {
        font-size: 1.9rem;
        margin-bottom: 2rem;
    }

    .popup-header p.regular-14 {
        font-size: 1.10rem;
        width: 70%;
        line-height: normal;
        margin-bottom: 1rem;
    }

    .popup-header p.regular-12 {
        font-size: 0.70rem;
        width: 55%;
        line-height: normal;
    }

    .counter-section {
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .counter-section .regular-14 {
        font-size: 1.2rem;
    }

    .counter-section .control-btn {
        width: 2.8rem;
        height: 2.8rem;
        font-size: 1.4rem;
    }

    .counter-section span.regular-16 {
        font-size: 1.4rem;
    }

    .ada-section {
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    .ada-section .ada-checkbox {
        width: 2rem;
        height: 2rem;
    }

    .ada-section .ada-checkbox img {
        width: 2rem;
    }

    .ada-section span {
        font-size: 0.70rem;
        width: 80%;
    }

    .ada-section .ada-icon {
        width: 2rem;
    }

    .popup-content-guests .white-button,
    .popup-content-guests .black-button {
        height: 3.8vh;
        border-radius: 1rem;
    }

    .popup-content-guests .white-button {
        width: 20%;
    }

    .popup-content-guests .black-button {
        width: 70%;
        font-size: 1rem;
    }

    #step-2-summary .popup-header img {
        width: 4.5rem;
    }

    #step-2-summary .summary-section {
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }

    #step-2-summary .summary-section .total-guests-circle {
        width: 4rem;
        height: 4rem;
        font-size: 2.2rem;
    }

    #step-2-summary .summary-section p.regular-14 {
        font-size: 1.2rem;
        margin: 2rem 0;
    }

    #step-2-summary .summary-section .summary-details {
        gap: 1.2rem;
        width: 100%;
        height: 12.5vh;
        justify-content: center;
        border-radius: 1rem;
        padding: 1rem 1.2rem;
    }

    #step-2-summary .summary-section .summary-details .regular-14 {
        font-size: 1.2rem;
    }

    #step-2-summary .summary-section .text-footer {
        font-size: 0.90rem;
        margin: 1.4rem 0 0;
        line-height: normal;
    }
}