/* .wfacp_global_checkout_wrap .wfacp-left-panel .wfacp-row {
	display: flex;
	flex-direction: column-reverse;
}
#identity-consent_field {
	position: relative !important;
	order: 3;
}
#secret_id_field {
	padding: 0 !important;
	margin: 0 !important;
} */
#openPopup {
	text-transform: capitalize;
}
.ddt-option {
	text-transform: capitalize !important;
}
.ddt-delivery-date-title {
	text-transform: unset !important;
}
.ddt-delivery-date-title-main {
	text-transform: capitalize !important;
}
.ddt-delivery-date-wrapper {
	text-transform: capitalize;
}
.ddt-title {
	text-transform: capitalize !important;
}


.ddt-loader-main {
	display:none;
}

.ddt-loader-main {
	position: relative;
}
.ddt-loader {
	position: absolute;
  left: 35%;
  top: 20px;
  width: 50px;
  --b: 8px; 
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%,#00414E) content-box;
  -webkit-mask:
    repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
    radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
  animation:l4 1s infinite steps(10);
}
@keyframes l4 {to{transform: rotate(1turn)}}




/* close-popop  */
.ddt-popup-container {
	position: relative;
}
.ddt-popup-close {
	position: absolute;
	top: -42px !important;
	right: 0px !important;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none !important;
	background: #f3f4f6;
	color: #074E59 !important;
	font-size: 20px !important;
	cursor: pointer !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .2s;
}
.ddt-popup-close:hover {
	background-color: #fff !important;
}


/* end */
.ddt-delivery-date-title-main {
	font-size: 15px !important;
	font-weight: 500 !important;
	border-bottom: 1px solid #dfdfdf !important;
	margin-bottom: 20px !important;
	padding-bottom: 10px !important;
	 text-align:left !important;
}
#wfacp-e-form label {
	display: inline-block !important;
	max-width: 100%;
	margin-bottom: 5px !important;
	font-weight: 400;
}
 .ddt-popup-container * , .ddt-wrapper *{
     font-family:  Sans-serif !important;
 }

 .ddt-wrapper {
     width: 100%;
     background-color: white;
     border-radius: 12px;
     margin-bottom: 15px;
 }

 .ddt-title {
     margin-bottom: 16px;
     font-size: 18px;
     font-weight: 600 !important;
     display: flex;
     align-items: center;
     gap: 8px;
     color: #074E59 !important;
 }

 .ddt-title svg {
     width: 24px;
     height: 24px;
 }

 .ddt-options-container {
     display: flex;
     gap: 16px;
 }

 .ddt-option {
     flex: 1;
     border: 2px solid #d1d5db;
     border-radius: 12px;
     padding: 16px;
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .ddt-option.active {
     border-color: #074E59;
     color: #074E59;
 }

 .ddt-option:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }

 .ddt-option-header {
     font-size: 13px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 10px;
 }

 .ddt-option-header svg {
     width: 16px;
     height: 16px;
 }

 .ddt-option strong {
     display: block;
     font-size: 14px;
     margin-bottom: 4px;
 }

 .ddt-option p {
     font-size: 14px;
     line-height: 1.4;
     color: rgb(65, 71, 72);
 }

 .ddt-icn {
     width: 30px;
     height: 30px;
 }

 .ddt-calendar-option {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
 }

 .ddt-calendar-option svg {
     width: 28px;
     height: 28px;
 }

 .ddt-calendar-option strong {
     font-size: 12px;
     line-height: 23px;
     text-align: center;
     color: #1B4759;
 }

 .ddt-popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     display: none;
     justify-content: center;
     align-items: flex-start;
     padding-top: 40px;
     overflow-y: auto;
     z-index: 100;
     align-items: center;
 }

 .ddt-popup-container {
     background-color: white;
     width: 800px;
     padding: 24px;
     border-radius: 12px;
     margin-bottom: 40px;
 }

 .ddt-delivery-date-wrapper {
     max-width: 768px;
     margin: 0 auto;
     background-color: white;
     padding: 0px 24px 0px 24px;
 }

 .ddt-delivery-date-title {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 16px;
     text-align: left !important;
 }

 .ddt-date-options {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     margin-bottom: 24px;
 }

 .ddt-date-option {
     border: 1px solid #d1d5db;
     border-radius: 8px;
     padding: 16px;
     text-align: center;
     cursor: pointer;
 }

 .ddt-date-option.selected {
     border-color: #007c90;
 }

 .ddt-date-option p:first-child {
     font-weight: 600;
     margin-bottom: 4px;
 }

 .ddt-selected-date {
     font-size: 14px;
     color: rgb(50, 56, 62);
     margin-top: 4px;
     font-weight: 600;
 }

 .ddt-date-option {
     transition: box-shadow 0.3s ease, transform 0.3s ease;
 }

 .ddt-date-option:hover {
     box-shadow: 0 0px 11px rgba(0, 0, 0, 0.2);
     transform: translateY(-2px);
 }


 .ddt-calendar-section {
     max-width: 768px;
     margin: 0 auto;
     background-color: white;
     padding: 0px 24px 24px 24px;;
 }

 .ddt-calendar-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 12px;
     padding-bottom: 8px;
     border-bottom: 1px solid #f7f7f7;
 }

 .ddt-calendar-header h4 {
     font-weight: 600;
 }

 .ddt-nav-button {
     background: #a3a3a31a;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 10px;
 }

 .ddt-week-days {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     text-align: center;
     font-weight: 600;
     font-size: 14px;
     margin-bottom: 8px;
 }

 .ddt-calendar-days {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 8px;
     text-align: center;
     font-size: 14px;
 }

 .ddt-calendar-day {
     padding: 8px;
     border-radius: 4px;
     cursor: pointer;
 }

 .ddt-calendar-day:hover {
     background-color: #e5e7eb;
     color: #000;
 }

 .ddt-calendar-day.selected {
     background-color: #0b586d;
     color: white;
 }

 .ddt-calendar-day.disabled {
     color: #d1d5db;
     cursor: not-allowed;
 }

 .ddt-calendar-day.disabled:hover {
     background-color: transparent;
 }

 .ddt-time-section {
     margin-top: 16px;
 }

 .ddt-time-label {
     display: block;
     margin-bottom: 8px;
     font-size: 14px;
     font-weight: 500;
 }

 .ddt-required {
     color: #ef4444;
 }

 .ddt-time-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
     margin-bottom: 12px;
 }

 .ddt-time-box {
     display: flex !important;
     justify-content: space-between !important;
     align-items: center !important;
     border: 1px solid #eaeaea !important;
     border-radius: 8px !important;
     padding: 12px !important;
 }

 .ddt-time-box.unavailable {
     color: #9ca3af;
     cursor: not-allowed;
 }

 .ddt-time-box.selectable {
     cursor: pointer;
     transition: all 0.2s ease;
 }

 .ddt-time-box.selectable:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     transform: translateY(-1px);
 }

 .ddt-unavailable-text {
     color: #ef4444;
     font-size: 12px;
     font-style: normal;
 }

 .ddt-time-price {
     font-weight: 400;
     font-size: 13px;
 }

 .ddt-time-radio:checked+.ddt-time-box.selectable {
     border-color: #1B4759 !important;
     background-color: #fff !important;
     color: #1B4759 !important;
 }

 .ddt-time-radio {
     display: none !important;
 }

 .ddt-time-radio:checked+.ddt-time-box.selectable {
     border-color: #3b82f6;
     background-color: #f0f9ff;
 }

 .ddt-divider {
     margin: 16px 0;
     border-top: 1px solid #d1d5db;
 }

 .ddt-action-buttons {
     display: flex;
     justify-content: flex-end;
     gap: 12px;
     margin-top: 20px;
 }

 .ddt-btn {
     padding: 10px 20px;
     border-radius: 8px;
     border: none;
     font-weight: 500;
     cursor: pointer;
     transition: opacity 0.2s;
 }

 .ddt-btn:hover {
     opacity: 0.9;
 }

 .ddt-btn-primary {
     background-color: #074E59;
     color: white;
 }

 .ddt-closePopup {
     background-color: #fff;
     border: 2px solid #074E59;
     color: #074E59;
 }
.ddt-btn.ddt-btn-primary.ddt-closePopup:hover {
	background-color: #fff !important;
	color: rgb(7, 78, 89) !important;
}
.ddt-btn-primary:hover {
	background-color: #074E59 !important;
	color: white !important;
}
 .ddt-date-section {
     display: none;
 }

 .ddt-date-section.active {
     display: block;
 }

 .ddt-icon {
     stroke: #074E59;
     stroke-width: 1.8;
     fill: none;


 }

 .ddt-arrow-icon {
     stroke: currentColor;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
 }



 .ddt-date-option label {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

.ddt-date-option.active p,
.ddt-date-option.selected p {
    color: #1B4759 !important;
}

 #ddt-tomorrow p {
	margin: 5px !important;
	font-size: 12px;
}
#ddt-today {
	align-items: center !important;
	align-content: center;
}
#ddt-today p {
	margin: 4px !important;
	font-size: 12px;
}
#ddt-other-content svg {
	width: 27px !important;
	height: 27px !important;
}
.ddt-arrow-icon {
	color: #cccaca !important;
}
.ddt-nav-button:hover{
    background-color: #a3a3a31a;
}
.ddt-nav-button:focus {
    background-color: #a3a3a31a !important;
}
.ddt-btn.ddt-btn-primary.ddtp_conformSelectedSlots:focus{
    background-color: #074E59;
}
#selectedDate{
    font-size: 12px !important;
}
@media (max-width: 804px) {

    /* Overlay spacing */
    .ddt-popup-overlay {
        padding: 16px;
        align-items: flex-start;
    }

    /* Popup container */
    .ddt-popup-container {
        width: 100%;
        max-width: 100%;
        padding: 16px;
        border-radius: 12px;
        margin: 0 auto;
    }

    /* Inner wrappers */
    .ddt-delivery-date-wrapper,
    .ddt-calendar-section {
        padding: 0;
        max-width: 100%;
    }

    /* Date cards → stacked */
    .ddt-date-options {
        /* grid-template-columns: 1fr; */
        gap: 12px;
    }

    .ddt-date-option {
        padding: 14px;
    }

    .ddt-date-option p {
        font-size: 13px;
    }

    /* Calendar header */
    .ddt-calendar-header {
        padding-bottom: 6px;
    }

    .ddt-calendar-header h4 {
        font-size: 14px;
    }

    /* Week days */
    .ddt-week-days,
    .ddt-calendar-days {
        font-size: 12px;
        gap: 6px;
    }

    .ddt-calendar-day {
        padding: 6px;
    }

    /* Time grid → single column */
    .ddt-time-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ddt-time-box {
        padding: 10px !important;
        font-size: 13px;
    }

    .ddt-unavailable-text {
        font-size: 11px;
    }

    /* Buttons → full width */
    .ddt-action-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .ddt-btn {
        width: 100%;
        text-align: center;
    }

    /* Titles */
    .ddt-delivery-date-title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .ddt-time-label {
        font-size: 13px;
    }

    /* SVG icon size */
    #ddt-other-content svg {
        width: 24px !important;
        height: 24px !important;
    }

 .ddt-wrapper {
	padding: 20px;
}
	#deliveryOptions {
	flex-direction: column;
}

    /* Calendar card center fix */
    .ddt-calendar-option {
        justify-content: center;
        text-align: center;
    }
    #popup {
	align-content: center;
	align-items: center;
}

/* 	.ddt-closePopup {
	display: none !important;
} */
}