/* =========================================================
   LOCATION TRIGGER
========================================================= */

.location-selector{

    position:relative;

    display:flex;
    align-items:center;
    gap:8px;

    padding:6px 10px;

    min-height:44px;

    border:none;
    background:transparent;

    border-radius:14px;

    cursor:pointer;

    transition:all 0.22s ease;

    font-family:Inter,sans-serif;

    flex-shrink:0;
}

.location-selector:hover{

    background:
        rgba(47,107,59,0.06);
}

/* =========================================================
   ICON
========================================================= */

.location-icon{

    width:32px;
    height:32px;

    border-radius:50%;

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

    background:
        rgba(239,68,68,0.10);

    color:#ef4444;

    font-size:14px;

    flex-shrink:0;
}

/* =========================================================
   CONTENT
========================================================= */

.location-content{

    display:flex;
    flex-direction:column;

    line-height:1.1;

    text-align:left;
}

.location-label{

    font-size:10px;
    font-weight:500;

    color:#64748b;
}

.location-country{

    margin-top:2px;

    font-size:13px;
    font-weight:700;

    color:#0f172a;
}

.location-subtext{

    margin-top:1px;

    font-size:10px;
    font-weight:500;

    color:#64748b;
}

/* =========================================================
   OVERLAY
========================================================= */

.location-modal-overlay{

    position:fixed;
    inset:0;

    background:
        rgba(15,23,42,0.45);

    backdrop-filter:blur(5px);

    opacity:0;
    visibility:hidden;

    transition:all 0.25s ease;

    z-index:1000;
}

.location-modal-overlay.active{

    opacity:1;
    visibility:visible;
}

/* =========================================================
   MODAL
========================================================= */

.location-modal{

    position:fixed;

    top:50%;
    left:50%;

    width:100%;
    max-width:380px;

    background:#ffffff;

    border-radius:24px;

    transform:
        translate(-50%, -50%)
        scale(0.95);

    opacity:0;
    visibility:hidden;

    transition:all 0.25s ease;

    z-index:1001;

    overflow:hidden;

    max-height:90vh;

    display:flex;
    flex-direction:column;

    box-shadow:
        0 24px 70px rgba(15,23,42,0.18);
}

.location-modal.active{

    opacity:1;
    visibility:visible;

    transform:
        translate(-50%, -50%)
        scale(1);
}

/* =========================================================
   HEADER
========================================================= */

.location-modal-header{

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:16px;

    padding:
        18px 18px 14px;

    border-bottom:
        1px solid rgba(226,232,240,0.8);
}

.location-modal-header h3{

    margin:0;

    font-size:18px;
    font-weight:700;

    color:#0f172a;
}

.location-close{

    width:36px;
    height:36px;

    border:none;
    background:#f8fafc;

    border-radius:50%;

    cursor:pointer;

    font-size:18px;

    color:#64748b;

    transition:all 0.2s ease;
}

.location-close:hover{

    background:#e2e8f0;

    color:#0f172a;
}

/* =========================================================
   INDIA SECTION
========================================================= */

.location-pincode-section{

    padding:
        16px 18px 10px;
}

.location-section-title{

    margin:
        0 0 14px;

    font-size:15px;
    font-weight:700;

    color:#0f172a;
}

.location-pincode-section label{

    display:block;

    margin-bottom:8px;

    font-size:13px;
    font-weight:600;

    color:#0f172a;
}

.location-pincode-box{

    display:flex;
    gap:8px;
}

.location-pincode-box input{

    flex:1;

    height:44px;

    border:
        1px solid rgba(203,213,225,0.9);

    border-radius:14px;

    padding:
        0 14px;

    font-size:14px;

    outline:none;

    transition:all 0.2s ease;
}

.location-pincode-box input:focus{

    border-color:#2f6b3b;

    box-shadow:
        0 0 0 4px rgba(47,107,59,0.10);
}

#checkPincodeBtn{

    min-width:96px;

    height:44px;

    border:none;

    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            #357a46 0%,
            #2f6b3b 100%
        );

    color:#ffffff;

    font-size:13px;
    font-weight:700;

    cursor:pointer;

    transition:all 0.22s ease;

    box-shadow:
        0 8px 18px rgba(47,107,59,0.16);
}

#checkPincodeBtn:hover{

    transform:translateY(-1px);
}

/* =========================================================
   RESULT
========================================================= */

.pincode-result{

    margin-top:12px;

    min-height:18px;

    font-size:12px;
    font-weight:600;

    line-height:1.5;
}

.pincode-result.success{

    color:#2f6b3b;
}

.pincode-result.error{

    color:#dc2626;
}

/* =========================================================
   DIVIDER
========================================================= */

.location-divider{

    position:relative;

    margin:
        10px 18px 10px;

    text-align:center;
}

.location-divider::before{

    content:"";

    position:absolute;

    top:50%;
    left:0;

    width:100%;
    height:1px;

    border-top:
        1px dashed rgba(148,163,184,0.45);
}

.location-divider span{

    position:relative;

    display:inline-block;

    padding:
        0 10px;

    background:#ffffff;

    font-size:11px;
    font-weight:600;

    color:#64748b;
}

/* =========================================================
   SEARCH
========================================================= */

.location-search-wrapper{

    position:relative;

    padding:
        8px 18px;
}

.location-search-wrapper i{

    position:absolute;

    top:50%;
    left:34px;

    transform:translateY(-50%);

    color:#94a3b8;
}

.location-search-input{

    width:100%;

    height:44px;

    border:
        1px solid rgba(203,213,225,0.9);

    border-radius:14px;

    padding:
        0 14px 0 42px;

    font-size:14px;

    outline:none;

    transition:all 0.2s ease;
}

.location-search-input:focus{

    border-color:#2f6b3b;

    box-shadow:
        0 0 0 4px rgba(47,107,59,0.10);
}

/* =========================================================
   COUNTRY LIST
========================================================= */

.location-country-list{

    flex:1;

    min-height:0;

    max-height:160px;

    overflow-y:auto;

    padding:
        0 10px 10px;

    display:none;
}

.location-country-list.active{

    display:block;
}

.country-item{

    width:100%;

    display:flex;
    align-items:center;
    gap:10px;

    padding:
        10px 12px;

    border:none;
    background:transparent;

    border-radius:12px;

    cursor:pointer;

    font-size:14px;
    font-weight:600;

    color:#0f172a;

    transition:all 0.18s ease;
}

.country-item:hover{

    background:
        rgba(47,107,59,0.06);
}

.country-item.active{

    background:
        rgba(47,107,59,0.10);

    color:#2f6b3b;
}

/* =========================================================
   FOOTER
========================================================= */

.location-modal-footer{

    padding:
        10px 18px 18px;
}

.location-save-btn{

    width:100%;

    height:44px;

    border:none;

    background:#2f6b3b;

    color:#ffffff;

    border-radius:14px;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:all 0.22s ease;
}

.location-save-btn:hover{

    background:#244d2d;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px){

    .location-modal{

        top:auto;
        left:0;
        bottom:0;

        width:100%;
        max-width:none;

        border-radius:
            24px 24px 0 0;

        transform:
            translateY(100%);
    }

    .location-modal.active{

        transform:
            translateY(0);
    }
}

/* =========================================================
   MOBILE LOCATION MODAL FIX
========================================================= */

@media (max-width:767px){

    .location-modal{

        width:92%;

        max-width:92%;

        max-height:88vh;
    }

    .location-modal-header{

        padding:16px;
    }

    .location-modal-header h3{

        font-size:16px;
    }

    .location-pincode-section{

        padding:14px 16px 8px;
    }

    .location-section-title{

        font-size:14px;
    }

    .location-pincode-box{

        gap:6px;
    }

    .location-pincode-box input{

        height:42px;

        font-size:13px;
    }

    #checkPincodeBtn{

        min-width:88px;

        height:42px;

        font-size:13px;
    }

    .location-search-wrapper{

        padding:8px 16px;
    }

    .location-search-input{

        height:42px;

        font-size:13px;
    }

    .country-item{

        padding:8px 10px;

        font-size:13px;
    }

    .location-country-list{

        max-height:260px;
    }

    .location-save-btn{

        height:42px;

        font-size:13px;
    }
}