/* ================================================================== 
STRUCTURE & RESPONSIBILITIES
==================================================================== */
/*
{- paymentInfo page start - cart page end
  - paymentInfo page titles
  - paymentInfo page container
    - payment details
    - payment checkout details
  - payment page breakpoints
}
*/
/* ==================================================================== */



/* paymentInfo page start */
.paymentInfo-section {
    margin-top: 3rem;
}

.paymentInfo-section-flex {
    gap: 3rem;
}

/* paymentInfo page titles start */
.paymentInfo-page-titles {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.paymentInfo-title {
    font-size: 2.3rem;
    font-weight: 500;
    border-bottom: 2px solid black;
    padding-bottom: 3rem;
}

.paymentInfo-subtitle {
    font-size: 1.4rem;
    color: #000000;
}

/* paymentInfo page container start */
.paymentInfo-page-container {
    display: flex;
    justify-content: space-between;
    gap: 7rem;
    width: 100%;
    margin-top: 2rem;
}


/* payment details start */
.payment-details {
    flex: 5;
    display: flex;
    flex-direction: column;
}

.payment-item {
    width: 100%;
    margin-bottom: 5rem;
}

.payment-item-credit-card {
    margin-bottom: 4rem;
}

.payment-option-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background-color: transparent;
}

.payment-check-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid #636060;
    border-radius: 50%;
}

.payment-check-box-dot {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background-color: black;
    opacity: 0;
    pointer-events: none;
}

.payment-check-box-dot.open {
    opacity: 1;
    pointer-events: auto;
}

.payment-item-option {
    font-size: 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.payment-item-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.payment-item-credit-card-form {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    margin-top: 1rem;
}

.payment-item-credit-card-form.open {
    max-height: 1000px;
    opacity: 1;
}

.payment-item-credit-form-input {
    margin-top: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem
}

.payment-item-credit-form-item {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-left: 2rem;
}

.payment-item-credit-form-item input {
    border: 1px solid rgb(114, 113, 113);
    width: 100%;
    height: 5.5rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    z-index: 3;
    background-color: transparent;
    font-size: 1.5rem;
}

.payment-item-credit-form-item input:focus-within {
    border: 1px solid #000000;
    box-shadow: 0 0 2.5px #a6b1ff;
}

.payment-item-credit-icon {
    position: absolute;
    right: 4rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #999;
}

.payment-item-comments {
    width: 100%;
    ;
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
}

.payment-item-comments textarea {
    width: 100%;
    resize: vertical;
    max-height: 20rem;
    min-height: 13rem;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(114, 113, 113);
    height: 10rem;
    font-size: 1.5rem;
    margin-top: 2rem;
}

.payment-item-comments textarea:focus-within {
    border: 1px solid #000000;
    box-shadow: 0 0 2.5px #a6b1ff;
}

.payment-item-submit-button {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.payment-agreement {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

.payment-agreement input {
    width: 1.5rem;
    height: 1.5rem;
}

.payment-agreement span {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.payment-agreement span a {
    color: black;
    text-decoration: underline;
}

.payment-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
    border-radius: 0.5rem;
    background-color: #FF4259;
    color: white;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

@media(pointer: fine) {
    .payment-submit-btn:hover {
        opacity: 0.8;
    }
}

@media(pointer: coarse) {
    .payment-submit-btn:active {
        opacity: 0.8;
    }
}





/* Hidden state (closed) */
.payment-thank-you-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    z-index: 1000;
    padding: 3rem;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Visible state (open) */
.payment-thank-you-popup.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto; /* Enable interaction */
}

.payment-thank-you-popup-flex{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.thank-you-text{
    font-size: 1.7rem;
    font-weight: 500;
}
.submission-text{
    font-size: 1.3rem;
    white-space: nowrap;
}
.thank-you-ok-btn{
    background-color: black;
    color: white;
    width: 6rem;
    height: 2.8rem;
    border-radius: 0.5rem;
    font-size: 1.4rem;
}
/* payment details end */



/* payment checkout details start */
.payment-checkout-details {
    flex: 1.8;
    background-color: rgb(255, 255, 255);
    border: 1px solid #dfdfdf;
    height: fit-content;
    position: sticky;
    top: 10rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    border-radius: 1rem;
}

.payment-page-checkout-title {
    font-size: 1.8rem;
    font-weight: 500;
    border-bottom: 1px solid #A39999;
    padding-bottom: 2.5rem;
}

.payment-page-checkout-content {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.payment-page-checkout-subtotal,
.payment-page-checkout-delivery,
.payment-page-checkout-total {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 500;
}

.payment-page-checkout-border-line {
    border-bottom: 1px solid #A39999;
    width: 100%;
}

/* payment checkout details end */
/* paymentInfo page container end */

/* payment page breakpoints start */
@media(max-width: 1050px) {
    .payment-checkout-details {
        flex: 2.5;
    }
}

@media(max-width: 1000px) {
    .paymentInfo-page-container {
        gap: 5rem;
    }
}

@media(max-width: 800px) {
    .paymentInfo-page-container {
        flex-direction: column-reverse;
    }

    .payment-item-credit-form-item {
        padding: 0;
    }

    .payment-checkout-details {
        position: static;
    }
}

@media(max-width: 460px) {
    .payment-item-credit-form-item {
        flex-direction: column;
    }
}

/* payment page breakpoints end */

/* paymentInfo page end */