/* ========================================================== 🌍 CLS FRONTEND — DYNAMIC LAYOUT SYSTEM ========================================================== */
/* ========================================================== 🌐 ROOT WRAPPER ========================================================== */
 .cls-custom-location-fields {

    position: relative;

    display: flex;
    flex-direction: column;

    gap: var(--cls-space-lg);

    width: 100%;

    /* 🔥 container control */
   
    /* max-width: var(--cls-layout-container-width, 680px);*/
    /* 🔥 center align */
    margin-left: auto;
    margin-right: auto;
}
/* ========================================================== 🧊 SECTION BLOCKS ========================================================== */
 .cls-location-section, .cls-map-section, .cls-delivery-datetime {
     position: relative;
}
/* ========================================================== 🧊 SECTION BLOCKS SUMMARY ========================================================== */
 .cls-delivery-summary {
     position: relative;
}


.cls-delivery-summary .cls_summary_city {
     color:red;
}
/* ========================================================== 📦 CURRENT BOX ========================================================== */
 #cls-current-box {
     display: flex;
     flex-direction: column;
     gap: var(--cls-layout-card-gap);
}
/* ========================================================== 🏙️ LOCATIO and DateN ROW ========================================================== */
 .cls-location-row, .cls-date-slot-row {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--cls-layout-grid-gap);
}
/* ========================================================== 📦 GRID COLUMNS ========================================================== */
 .cls-city-col, .cls-locality-col, .cls-date-col, .cls-slot-col {
     width: 100%;
     min-width: 0;
}
/* ========================================================== 📍 ADDRESS CONTAINER ========================================================== */
 .cls-address-container {
     display: flex;
     align-items: center;
     gap: var(--cls-layout-card-gap);
}
/* 📝 ADDRESS INPUT */
 .cls-address-text {
     flex: 1;
     min-width: 0;
}
/* 🎯 ICON ACTIONS */
 .cls-icons-outside {
     display: flex;
     align-items: center;
     gap: var(--cls-layout-grid-gap);
     flex-shrink: 0;
}
/* 🗺️ MAP WRAPPER */
 .cls-map-wrapper {
     position: relative;
}
/* 🗺️ INLINE MAP (layout part only) */
 .cls-map-inline {
     width: 100%;
     height: 340px;
}
/* 📅 DATE + SLOT */
 .cls-delivery-datetime {
     width: 100%;
}
/* 🧾 SUMMARY */
 .cls-delivery-summary {
     display: flex;
     flex-direction: column;
     gap: var(--cls-layout-card-gap);
}
/* 🧾 SUMMARY ROW */
 .cls-summary-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--cls-layout-grid-gap);
}
/* 💰 SUMMARY TOTAL */
 .cls-summary-total {
     margin-top: var(--cls-layout-grid-gap);
}
/* 📏 DISTANCE LABEL */
 .cls-distance-label {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--cls-layout-grid-gap);
     width: 100%;
     
}






/* 🗺️ MAP MODAL */
 .cls-map-modal {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: var(--cls-layout-page-padding);
}
/* 🗺️ MAP BOX */
 .cls-map-box {
     position: relative;
     width: 100%;
     max-width: var(--cls-layout-container-width);
}
/* 🗺️ MAP INNER */
 .cls-map-inner {
     width: 100%;
     height: 75vh;
     min-height: 420px;
}
/* 📍 PERMISSION MODAL */
 .cls-permission-modal {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: var(--cls-layout-page-padding);
}
/* 📦 PERMISSION BOX */
 .cls-permission-box {
     width: 100%;
     max-width: var(--cls-layout-content-width);
}
/* 🎯 MODAL ACTIONS */
 .cls-permission-actions {
     display: flex;
     align-items: center;
     gap: var(--cls-layout-grid-gap);
}


.cls-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cls-summary-row-gap);
}



/* inline */
.cls-map-inline {
    width: 100%;
    height: var(--cls-map-height);
}

/* modal */
.cls-map-modal {
    display: none;
    position: fixed;
    inset: 0;

    align-items: center;
    justify-content: center;

    padding: var(--cls-map-modal-padding);
}

/* active */
.cls-map-modal.cls-active {
    display: flex;
}

/* box */
.cls-map-box {
    position: relative;

    width: min(var(--cls-map-max-width), 96vw);
    height: min(var(--cls-map-max-height), 88vh);

    margin: auto;
}

/* inner */
.cls-map-inner {
    width: 100%;
    height: 100%;
}



/* modal */
.cls-permission-modal {
    display: none;
    position: fixed;
    inset: 0;
}

/* box */
.cls-permission-box {
    width: min(var(--cls-permission-max-width), 100%);
    margin: var(--cls-permission-margin-top) auto 0;
}

/* actions */
.cls-permission-actions {
    display: flex;
    gap: var(--cls-permission-actions-gap);
}


#cls-service-warning {
    display: none;
    position: fixed;

    left: 50%;
    bottom: var(--cls-warning-offset);

    transform: translateX(-50%);

    min-width: var(--cls-warning-min-width);
    max-width: var(--cls-warning-max-width);
}