/* ==========================================
   TSOWQ PHONE COMPONENT
========================================== */

.ts-phone {
    position: relative;
    width: 100%;
}

.ts-phone-input {
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    overflow: hidden;
    transition: .25s;
}

.ts-phone-input:hover{
    border-color:#2563eb;
}

.ts-phone-input:focus-within{
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.ts-phone-country{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 14px;
    cursor:pointer;
    user-select:none;
    border-left:1px solid #ececec;
    background:#fafafa;
    height:100%;
    min-width:120px;
}

.ts-phone-country:hover{
    background:#f4f6fb;
}

.ts-phone-flag{
    width:24px;
    height:18px;
    object-fit:cover;
    border-radius:2px;
    border:1px solid #ddd;
}

.ts-phone-code{
    font-size:14px;
    font-weight:700;
    color:#111827;
}

.ts-phone-arrow{
    margin-right:auto;
    font-size:11px;
    color:#777;
    transition:.25s;
}

.ts-phone.open .ts-phone-arrow{
    transform:rotate(180deg);
}

.ts-phone input{
    flex:1;
    height:100%;
    border:none;
    outline:none;
    padding:0 15px;
    font-size:15px;
    background:#fff;
    direction:ltr;
}

.ts-phone input::placeholder{
    color:#9ca3af;
}

/* ===========================
   DROPDOWN
=========================== */

.ts-phone-dropdown{
    position:absolute;
    top:65px;
    right:0;
    left:0;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:14px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    display:none;
    z-index:999;
    overflow:hidden;
}

.ts-phone.open .ts-phone-dropdown{
    display:block;
}

.ts-phone-search{
    padding:12px;
    border-bottom:1px solid #eee;
}

.ts-phone-search input{
    width:100%;
    height:42px;
    border:1px solid #ddd;
    border-radius:10px;
    padding:0 12px;
    outline:none;
}

.ts-phone-search input:focus{
    border-color:#2563eb;
}

.ts-phone-list{
    max-height:320px;
    overflow:auto;
}

.ts-phone-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    cursor:pointer;
    transition:.2s;
}

.ts-phone-item:hover{
    background:#f4f7ff;
}

.ts-phone-item img{
    width:24px;
    height:18px;
    object-fit:cover;
    border:1px solid #ddd;
}

.ts-phone-name{
    flex:1;
    font-size:14px;
    color:#111827;
}

.ts-phone-dial{
    color:#6b7280;
    font-weight:600;
}

/* ===========================
   STATUS
=========================== */

.ts-phone-error{

    margin-top:8px;
    font-size:13px;
    color:#dc2626;
    display:none;

}

.ts-phone-success{

    margin-top:8px;
    font-size:13px;
    color:#16a34a;
    display:none;

}

.ts-phone.invalid .ts-phone-input{

    border-color:#dc2626;

}

.ts-phone.valid .ts-phone-input{

    border-color:#16a34a;

}

/* ===========================
   SCROLL
=========================== */

.ts-phone-list::-webkit-scrollbar{

    width:8px;

}

.ts-phone-list::-webkit-scrollbar-thumb{

    background:#d1d5db;
    border-radius:20px;

}

.ts-phone-list::-webkit-scrollbar-thumb:hover{

    background:#9ca3af;

}

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

@media(max-width:768px){

    .ts-phone-country{

        min-width:95px;
        padding:0 10px;

    }

    .ts-phone-code{

        font-size:13px;

    }

    .ts-phone input{

        font-size:14px;

    }

}

.ts-progress-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin-bottom:30px;

}

.ts-progress-header > div:first-child{

    flex:1;

}

.ts-progress-circle{

    position:relative;

    width:110px;

    height:110px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

}

.ts-progress-circle svg{

    position:absolute;

    inset:0;

    transform:rotate(-90deg);

}

.ts-circle-bg{

    fill:none;

    stroke:#edf1f7;

    stroke-width:8;

}

.ts-circle-value{

    fill:none;

    stroke:#2563eb;

    stroke-width:8;

    stroke-linecap:round;

    stroke-dasharray:302;

    transition:.4s;

}

.ts-circle-text{

    position:absolute;

    top:50%;

    left:50%;

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

    font-size:22px;

    font-weight:700;

    color:#111827;

    z-index:2;

}

.ts-profile-divider{

    margin:28px 0;

    border:none;

    border-top:1px solid #edf1f7;

}