.close_order_modal {
   position: absolute;
   right: 20px;
   top: 20px;
}

.close_order_modal a {
   font-size: 28px;
}


.error {
   border: 2px solid red !important;
}

.hide {
   display: none !important;
}

.show {
   display: block !important;
}

/* For loading state  */

.Edit_Blue {
   color: #262362;
}

/* new css edit  */
.none {
   display: none !important;
}

.cod_event {
   pointer-events: none !important;
}

.Try_Again {
   color: red;
   text-decoration: underline;
   cursor: pointer;
}

.gray {
   color: gray;
}

.cod_disable {
   background-color: gray !important;
}

a {
   text-decoration: underline;
   cursor: pointer;
}

i {
   cursor: pointer;
}

.Show_Content {
   display: flex;
   justify-content: center;
   gap: 20px;
}

/* Add this to your stylesheet for styling the loading indicator */
.btn_otp span.loading {
   position: relative;
   margin-right: 30px;
}

.btn_otp span.loading::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 20px;
   height: 20px;
   border: 4px solid rgb(32, 139, 178);
   border-radius: 50%;
   border-top: 4px solid;
   /* animation: spin 5s linear infinite; */
}

@keyframes spin {
   0% {
      transform: translate(-50%, -50%) rotate(0deg);
   }

   100% {
      transform: translate(-50%, -50%) rotate(360deg);
   }
}

/* Loading End  */
.cod-otp-popup.is-visible {
   visibility: visible;
}

.cod-otp-popup.is-visible .modal-content {
   opacity: 1;
   visibility: visible;
   transition-delay: 0s;
}

.d-flex.checkout-btns {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 10px;
}

/* new checkout css */
.wc-block-checkout__actions_row .d-flex.checkout-btns {
   flex-wrap: nowrap;
}


.d-flex.checkout-btns button {
   flex: 0 0 100%;
   max-width: max-content;
   margin-left: auto;
}

/* new checkout css */
.wc-block-checkout__actions_row .d-flex.checkout-btns button {
   flex: 0 0 auto;
   width: 200px;
}

/* Styles for the modal backdrop */
.cod-otp-popup {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0.1, 0, 0.1, 0.1) !important;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   z-index: 1000;
   visibility: hidden;
}

.modal-content {
   -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   z-index: 1001;
   width: 600px;
   padding: 20px;
   border: none;
   border-radius: 10px;
   background: #fff;
   color: #000;
   font-family: var(--font-poppins);
   font-size: 20px;
   font-weight: bold;
   height: 100%;
   text-align: center;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   gap: 20px;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
}

.modal-content h2 {
   font-weight: bold;
   font-size: 2rem;
   font-family: var(--font-Outfit);
}

.modal-content h1 {
   font-weight: bold;
   font-size: 30px;
   font-family: var(--font-Outfit);
}

.modal-content p {
   font-size: 16px;
   font-family: var(--font-poppins);
   padding-inline: 20px;
   margin-top: 10px;
}

#Content_Data p {
   font-size: 16px;
   font-family: var(--font-poppins);
   padding: 0;
   margin: 0;
}

.modal-content_buttons {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   gap: 20px;
}

/* .modal-content_children {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } */

/* Close button styles (assuming it's inside the modal-content) */
.modal-content .btn_otp {
   background-color: #262362;
   color: #fff;
   border: none;
   padding: 10px 40px;
   border-radius: 4px;
   margin-top: 16px;
   cursor: pointer;
   font-size: 20px;
   -webkit-transition: background-color 0.2s ease;
   -o-transition: background-color 0.2s ease;
   transition: background-color 0.2s ease;
}

.modal-content .btn_otp:hover {
   background-color: #3498db;
   /* rgb(32, 139, 178) */
}

/* Center the modal on the screen */
.modal {
   position: fixed;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   -webkit-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
   overflow: hidden;
   z-index: 999999;
   display: block !important;
}

.verification-code {
   position: relative;
   text-align: center;
}

.control-label {
   display: block;
   /* margin: 40px auto; */
   font-weight: bold !important;
   font-size: 30px !important;
   font-family: inherit !important;
}

.verification-code--inputs input[type=text] {
   border: 2px solid #e1e1e1;
   width: 46px;
   height: 46px;
   padding: 10px;
   text-align: center;
   display: inline-block;
   box-sizing: border-box;
}

/* Count Down  */

/* .main-example {
   margin: 0 auto;
   width: 355px;
   text-align: center;
} */

/* .main-example .countdown-container {
   height: 130px;
} */

.main-example .time {
   border-radius: 5px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
   display: inline-block;
   text-align: center;
   position: relative;
   height: 95px;
   width: 65px;

   -webkit-perspective: 479px;
   -moz-perspective: 479px;
   -ms-perspective: 479px;
   -o-perspective: 479px;
   perspective: 479px;

   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);

   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

.main-example .count {
   background: #202020;
   color: #f8f8f8;
   display: block;
   font-family: 'Oswald', sans-serif;
   font-size: 2em;
   line-height: 2.4em;
   overflow: hidden;
   position: absolute;
   text-align: center;
   text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
   top: 0;
   width: 100%;

   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);

   -webkit-transform-style: flat;
   -moz-transform-style: flat;
   -ms-transform-style: flat;
   -o-transform-style: flat;
   transform-style: flat;
}

.main-example .count.top {
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 5px 5px 0 0;
   height: 50%;

   -webkit-transform-origin: 50% 100%;
   -moz-transform-origin: 50% 100%;
   -ms-transform-origin: 50% 100%;
   -o-transform-origin: 50% 100%;
   transform-origin: 50% 100%;
}

.main-example .count.bottom {
   background-image: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
   background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
   background-image: -o-linear-gradient(rgba(255, 255, 255, 0.1), transparent);
   border-top: 1px solid #000;
   border-bottom: 1px solid #000;
   border-radius: 0 0 5px 5px;
   line-height: 0;
   height: 50%;
   top: 50%;

   -webkit-transform-origin: 50% 0;
   -moz-transform-origin: 50% 0;
   -ms-transform-origin: 50% 0;
   -o-transform-origin: 50% 0;
   transform-origin: 50% 0;
}

.main-example .count.next {}

.main-example .label {
   font-size: normal;
   margin-top: 5px;
   display: block;
   position: absolute;
   top: 95px;
   width: 100%;
}

/* Animation start */
.main-example .count.curr.top {
   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -ms-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);
   z-index: 3;
}

.main-example .count.next.bottom {
   -webkit-transform: rotateX(90deg);
   -moz-transform: rotateX(90deg);
   -ms-transform: rotateX(90deg);
   -o-transform: rotateX(90deg);
   transform: rotateX(90deg);
   z-index: 2;
}

/* CountDown JS ~ CSS */
#flipdown {
   display: flex;
   align-items: center;
   justify-content: center;
}

#flipdown.active {
   min-height: 60px;
}

#flipdown .time {
   background-color: #000;
   color: #fff;
   padding: 5px 10px;
   border-radius: 5px;
}

#place_order_cod,
#verifyBtn {
   position: relative;
   min-height: 35px;
   min-width: 80px;
}

#place_order_cod::before,
#verifyBtn::before {
   content: '';
   position: absolute;
   font-family: 'Font Awesome 6 Free';
   font-weight: 900;
   left: 50%;
   top: 50%;
   font-size: 18px;
   transform: translate(-50%, -50%) rotate(0deg);
}

#place_order_cod.active {
   font-size: 0;
}

#place_order_cod.active::before,
#verifyBtn.active::before {
   content: '\f110';
   animation: spin 1s infinite linear;
}

@keyframes spin {
   from {
      transform: translate(-50%, -50%) rotate(0deg);
   }

   to {
      transform: translate(-50%, -50%) rotate(360deg);
   }
}

.countdown-wrapper {
   left: 50%;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
}

.countdown.flip-clock-wrapper ul {
   height: 144px;
   margin: 0 10px;
   width: 96px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.countdown.flip-clock-wrapper ul li {
   line-height: 144px;
}

.countdown.flip-clock-wrapper ul li a div div.inn {
   background-color: #607D8B;
   color: #F44336;
   font-size: 120px;
   text-shadow: 0 1px 2px #000;
}

.countdown.flip-clock-wrapper ul,
.countdown.flip-clock-wrapper ul li a div div.inn {
   border-radius: 8px;
}

.countdown.flip-clock-wrapper ul li a div.down {
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
}

.countdown.flip-clock-wrapper ul li a div.up:after {
   top: 71px;
}

.countdown .flip-clock-dot.top {
   top: 38px;
}

.countdown .flip-clock-dot.bottom {
   top: 86px;
}

.countdown .flip-clock-dot {
   height: 20px;
   left: 20px;
   width: 20px;
   background: #607D8B;
}

.countdown .flip-clock-divider {
   height: 144px;
   width: 60px;
}

.countdown .flip-clock-divider:first-child {
   width: 0;
}

.countdown .flip-clock-divider.seconds .flip-clock-label,
.countdown .flip-clock-divider.minutes .flip-clock-label {
   right: -232px;
}

.countdown .flip-clock-divider .flip-clock-label {
   color: #F44336;
   font-size: 30px;
   width: 232px;
}


/* Animation end */
.main-example .flip .count.curr.top {
   -webkit-transition: all 250ms ease-in-out;
   -moz-transition: all 250ms ease-in-out;
   -ms-transition: all 250ms ease-in-out;
   -o-transition: all 250ms ease-in-out;
   transition: all 250ms ease-in-out;

   -webkit-transform: rotateX(-90deg);
   -moz-transform: rotateX(-90deg);
   -ms-transform: rotateX(-90deg);
   -o-transform: rotateX(-90deg);
   transform: rotateX(-90deg);
}

.main-example .flip .count.next.bottom {
   -webkit-transition: all 250ms ease-in-out 250ms;
   -moz-transition: all 250ms ease-in-out 250ms;
   -ms-transition: all 250ms ease-in-out 250ms;
   -o-transition: all 250ms ease-in-out 250ms;
   transition: all 250ms ease-in-out 250ms;

   -webkit-transform: rotateX(0deg);
   -moz-transform: rotateX(0deg);
   -ms-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);
}

.main-example {
   width: 100%;
}

/* .main-example .countdown-container {
   height: 100px;
} */

.main-example .time {
   height: 70px;
   width: 48px;
}

.main-example .count {
   font-size: 1.5em;
   line-height: 70px;
}

.main-example .label {
   font-size: 0.8em;
   top: 72px;
}

/* Count css End  */
/* mobile  */

@media screen and (max-width: 599px) {
   .modal-content {
      width: 300px;
   }
}