/* =========================================================
IRAN LOCATION FIELDS
====================

Supports:

#province       → استان
#city           → شهر
#birthPlace     → محل تولد
#birthPlace-ID  → محل صدور

========================================================= */

/* =========================================================
NATIVE PROVINCE + CITY FIELDS
========================================================= */

#province,
#city {

 
width: 100%;

box-sizing: border-box;

direction: rtl;
text-align: right;

font-family: inherit;

cursor: pointer;
 

}

/* =========================================================
CITY DISABLED STATE
========================================================= */

#city:disabled {

 
cursor: not-allowed;

opacity: 0.55;
 

}

/* =========================================================
NATIVE SELECT OPTIONS
========================================================= */

#province option,
#city option {

 
direction: rtl;

text-align: right;

background: #0b0b0b;

color: #fff;
 

}

/* =========================================================
BIRTHPLACE CUSTOM DROPDOWN FIELD

Applies to:

#birthPlace
#birthPlace-ID
========================================================= */

.birthplace-field,
.birthplace-id-field {

 
position: relative;
 

}

/* =========================================================
CUSTOM CITY DROPDOWN
========================================================= */

.city-dropdown {

 
position: absolute;

top: calc(100% + 6px);

right: 0;

width: 100%;

max-height: 330px;

box-sizing: border-box;

background: #0b0b0b;

border: 1px solid rgba(162, 28, 67, 0.35);

border-radius: 10px;

overflow: hidden;

z-index: 9999;

opacity: 0;

visibility: hidden;

pointer-events: none;

transform: translateY(-6px);

transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;

box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.35);
 

}

/* =========================================================
OPEN
========================================================= */

.city-dropdown.open {

 
opacity: 1;

visibility: visible;

pointer-events: auto;

transform: translateY(0);
 

}

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

.city-search-wrapper {

 
position: sticky;

top: 0;

padding: 7px;

box-sizing: border-box;

background: #0b0b0b;

border-bottom:
    1px solid rgba(255, 255, 255, 0.08);

z-index: 2;
 

}

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

.city-search {

 
width: 100%;

height: 38px;

padding: 0 12px;

box-sizing: border-box;

direction: rtl;

text-align: right;

color: #fff;

background:
    rgba(255, 255, 255, 0.06);

border:
    1px solid rgba(255, 255, 255, 0.10);

border-radius: 7px;

outline: none;

font-family: inherit;

font-size: 13px;
 

}

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

.city-search::placeholder {

 
color:
    rgba(255, 255, 255, 0.42);
 

}

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

.city-search:focus {

 
border-color: #a21c43;

background:
    rgba(191, 215, 48, 0.05);
 

}

/* =========================================================
CITY LIST
========================================================= */

.city-list {

 
max-height: 270px;

overflow-y: auto;

direction: rtl;
 

}

/* =========================================================
SCROLLBAR
========================================================= */

.city-list::-webkit-scrollbar {

 
width: 5px;
 

}

.city-list::-webkit-scrollbar-track {

 
background: transparent;
 

}

.city-list::-webkit-scrollbar-thumb {

 
background:
    rgba(215, 115, 48, 0.45);

border-radius: 10px;
 

}

/* =========================================================
CITY OPTION
========================================================= */

.city-option {

 
display: flex;

align-items: center;

justify-content: space-between;

gap: 12px;

min-height: 42px;

padding: 7px 12px;

box-sizing: border-box;

cursor: pointer;

direction: rtl;

border-bottom:
    1px solid rgba(255, 255, 255, 0.035);

transition:
    background 0.15s ease,
    color 0.15s ease;
 

}

/* =========================================================
LAST OPTION
========================================================= */

.city-option:last-child {

 
border-bottom: none;
 

}

/* =========================================================
OPTION HOVER
========================================================= */

.city-option:hover {

 
background:
    rgba(215, 67, 48, 0.10);
 

}

/* =========================================================
OPTION ACTIVE
========================================================= */

.city-option:active {

 
background:
    rgba(215, 87, 48, 0.18);
 

}

/* =========================================================
CITY NAME
========================================================= */

.city-name {

 
color: #fff;

font-size: 13px;

white-space: nowrap;
 

}

/* =========================================================
PROVINCE NAME
========================================================= */

.city-province {

 
color:
    rgba(255, 255, 255, 0.38);

font-size: 10px;

white-space: nowrap;
 

}

/* =========================================================
NO RESULTS
========================================================= */

.city-no-results {

 
display: none;

padding: 18px 10px;

text-align: center;

direction: rtl;

color:
    rgba(255, 255, 255, 0.45);

font-size: 12px;
 

}

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

@media (max-width: 576px) {

 
.city-dropdown {

    max-height: 300px;

}


.city-list {

    max-height: 240px;

}


.city-option {

    min-height: 40px;

    padding: 6px 10px;

}


.city-name {

    font-size: 12px;

}


.city-province {

    font-size: 9px;

}


.city-search {

    height: 36px;

    font-size: 12px;

}

}