@import url('https://fonts.cdnfonts.com/css/bogle');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Bogle', sans-serif;
}

.main {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 18px 20px;
    background: #fff;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #800080;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}

.return {
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
}

.review {
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-top: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.flex {
    width: 100%;
    display: flex;
    position: relative;
    margin-top: 10rem;
    padding: 20px 50px;
}

.order-process {
    top: -100px;
    right: 0;
    position: absolute;
    width: 100%;
    background: #f2f8fd;
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: none;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    box-shadow: 0px -1px 0.125rem 0.05rem 
    rgba(0, 0, 0, 0.15);
}

.order-process img {
    margin-right: 10px;
}

.shipping {
    float: right;
}

.shipping p {
    color: #000;
    font-size: 18px;
    padding-top: .25rem;
}

.shipping-text {
    color: #2e2f32;
    font-size: 20px;
    font-weight: 700;
}

.order-container {
    position: relative;
    flex: 2.8;
    padding: 20px;
    background: #fff;
    margin-right: 30px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0px 0.0625rem 0.125rem 0.0625rem 
    rgba(0, 0, 0, 0.15);
}

.info {
    display: flex;
    color: #46474a;
    font-size: 16px;
    margin-top: 20px;
    align-items: center;
    justify-content: space-between;
}

hr {
    box-sizing: initial;
    height: 0;
    overflow: visible;
}

.divider {
    margin: 0;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
    border: 0;
    border-bottom: 0.0625rem solid #e3e4e5;
}

.edit {
    color: #2e2f32;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.3s, font-size 0.3s;
}

.edit:hover {
    color: #0071dc;
    text-decoration: none;
}

.optional h3 {
    color: #2e2f32;
    font-size: 18px;
}

.common-parent {
    display: flex;
    width: 100%; /* Make sure the common parent takes the full width */
    justify-content: space-between;
}

.payment-container {
    position: sticky;
    flex: 1.4;
    top: 6em;
    margin-top: -100px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 0.0625rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.15);
    height: 32rem; /* Add this line */
}

.p-order {
    /* Remove position absolute to let it stay in document flow */
    position: relative; /* Now it will stay where it's placed in the HTML */

    color: #74767c;
    width: 100%;
    padding: 18px 15px;
    border: none;
    cursor: pointer;
    border-bottom: 0.0625rem solid #e3e4e5;
    margin-bottom: 50px; /* You can keep this or adjust spacing as needed */
}

.btn {
    color: #fff;
    width: 100%;
    height: 3rem;
    border: none;
    border-radius: 62.5rem;
    padding: 0 1.5rem;
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 1.125rem;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    background: #800080;
    transition: all .1s cubic-bezier(.77,0,.175,1);
    white-space: nowrap;
}

.btn:hover {
    background: #045aab;
}

.privacy {
    display: flex;
    font-size: 10px;
    margin-top: 5px;
    align-items: center;
    justify-content: center;
}

.privacy a {
    color: #74767c;
    margin-left: 3px;
    margin-right: 3px;
}

.order-summary {
    margin-top: 7rem;
}

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

.sub {
    color: #2e2f32;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: .60rem;
    margin-top: .50rem;
}

.sub span {
    font-size: 14px;
    font-weight: 300;
}

.sub-price {
    color: #46474a;
    font-size: 16px;
    text-decoration: line-through;
}

.save-price {
    color: #2a8703;
    padding: 4px;
    font-size: 16px;
    background: #eaf3e6;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px; 
}

.save-price span {
    margin-top: .50rem;
}

.equal {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    text-align: right;
    margin-top: .50rem;
    margin-bottom: .50rem;
}

.divide {
    margin: 0;
    margin-bottom: 1rem;
    width: 100%;
    border: 0;
    border-bottom: 0.0625rem solid #e3e4e5;
}

.shipping {
    color: #46474a;
    font-size: 14px;
}

.fees {
    color: #2a8703;
    font-size: 14px;
}

.estimate {
    color: #000;
    font-size: 16px;
    font-weight: 700;
}

.taxes {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: .70rem;
}

.estimated {
    color: #2e2f32;
    font-size: 20px;
    font-weight: 700;
    margin-top: .20rem;
    margin-bottom: .20rem;
}

.total {
    color: #2e2f32;
    font-size: 18px;
    font-weight: 700;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
}

.payment-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.payment-card .master {
    width: 48px;
    margin-bottom: 10px;
}

.payment-card span {
    color: #2e2f32;
    font-size: 16px;
    margin-left: 16px;
    font-weight: 700;
}

.amount {
    color: #2e2f32;
    font-size: 16px;
    margin-left: 16px;
    font-weight: 700;
}

.edit-payment  {
    color: #2e2f32;
    font-size: .875rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px; 
    background: #fff;
    height: 2rem;
    padding: 0 1.8rem;
    cursor: pointer;
    border: 1px solid #2e2f32;
    border-radius: 62.5rem;
    margin-bottom: 0.5rem;
}

.edit-payment:hover {
    box-shadow: inset 0 0 0 0.0625rem #2e2f32;
    transition: all .1s cubic-bezier(.77,0,.175,1);
}

.edit-payment span {
    margin-top: .20rem;
}

/* Your existing CSS here */

@media (max-width: 768px) {
    /* Media queries for tablets and smaller screens */
    .flex {
        flex-direction: column;
        margin-top: 5rem;
    }

    .order-container {
        flex: 1; /* Adjust the flex value for order container */
        margin: 0;
    }

  
}
.payment-container {
    flex: 1;                /* Retains flexible size based on available space */
    margin-top: 20;          /* Removes the extra margin at the top */
    padding: 20px;          /* Ensure padding for content inside the container */
    height: auto;           /* Height adjusts based on content */
    background: #fff;       /* Background color */
    border-radius: 8px;     /* Smooth corners */
    box-shadow: 0px 0.0625rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.15); /* Light shadow */
}
@media (max-width: 768px) {
    .payment-container {
        margin-top: 10px;     /* Slight margin-top for smaller screens */
    }
}

@media (max-width: 480px) {
    .payment-container {
        margin-top: 5px;      /* Even less margin-top for very small screens */
    }
}
@media (max-width:320px) {
    /* Media queries for phones and smaller screens */
    .order-process {
        position: relative;
        top: 0;
        margin-top: 1rem;
    }

    .edit-payment {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    /* Adjust container width to fit the screen */
    .common-parent {
        flex-direction: column;
    }

    .flex, .order-container, .payment-container {
        width: 100%;
    }
}
.info {
    margin-bottom: 20px;
    width: 100%;
}

.info h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.info form input {
    width: 90%; /* Reduced width of input fields */
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

.info form button {
    width: 90%; /* Reduced width of button */
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.info form button:hover {
    background-color: #45a049;
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
    .info form input,
    .info form button {
        font-size: 0.9rem;
        padding: 8px;
        width: 95%; /* Make inputs more flexible on smaller screens */
    }
}

/* Mobile-first styles */
@media (max-width: 480px) {
    .info form input,
    .info form button {
        padding: 12px;
        font-size: 1rem;
        width: 95%; /* Ensure input fields don't take up the whole width */
    }

    .info h3 {
        font-size: 1.2rem;
    }
}

/* Highlight invalid fields */
.invalid {
    border-color: red;
}
#payment-method {
    width: 100%;  /* Make it full width */
    padding: 10px 15px; /* Add padding for larger clickable area */
    font-size: 16px; /* Increase font size */
    border-radius: 5px; /* Add border radius for rounded corners */
    border: 1px solid #ddd; /* Border to match with form design */
    background-color: #f9f9f9; /* Slight background color */
}
@media screen and (max-width: 768px) {
    #payment-method {
        font-size: 14px; /* Reduce font size on smaller screens */
        padding: 8px 12px; /* Adjust padding on smaller screens */
    }
}

@media screen and (max-width: 480px) {
    #payment-method {
        font-size: 12px; /* Further reduce font size on very small screens */
        padding: 6px 10px; /* Adjust padding for very small screens */
    }
}
input, select {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Add a class for invalid input */
input.invalid, select.invalid {
    border-color: red;
}

/* Styling for the error messages */
.error-message {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}

/* Styling for the overall form */
.info form input, .info form select {
    font-size: 16px;
}