/* Alerts, Dialogs */
.dialog { position: absolute; width: 100%; height: 100%; top: 0; z-index: 10; }
.dialog:before { content: ''; position: fixed; width: 100%; height: 100%; background-color: rgba(0,39,74,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dialog .dialog-wrap { position: absolute; width: 400px; padding: 30px; display: flex; flex-direction: column; gap: 12px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 20px; background-color: rgba(224,224,224,.8); box-shadow: 0 20px 30px -8px rgba(0,15,43,.3); }
.dialog .dialog-wrap.long {top: unset; transform: translate(-50%);}

.dialog .ico-close { position: absolute; right: 20px; top: 20px; font-family: siteicons; font-size: 18px; text-align: center; color: var(--text); font-style: normal; transition: transform .1s ease-out; cursor: pointer; z-index: 3; }
.dialog .ico-close:before { content: '\004b'; }
.dialog .ico-close:hover { transform: rotate(90deg); }
.dialog h2 { margin: 5px 0 4px; }
.dialog input { width: calc(100% - 40px); padding: 18px 20px; border: none; outline: none; border-radius: 6px; font-size: 16px; background-color: var(--bg-gray); color: var(--text); }
.dialog input::placeholder { color: var(--text-gray); }
.dialog .flex { position: relative; width: 100%; display: flex; gap: 10px; }

.dialog .item { position: relative; display: flex; width: calc(100% - 100px); flex-direction: column; padding: 10px 40px 10px 60px; border-radius: 6px; background-color: var(--bg-gray); cursor: pointer; user-select: none; }
.dialog .item.active { z-index: 3; }
.dialog .item span { font-size: 13px; color: var(--text-gray); }
.dialog .item b { font-size: 16px; font-weight: 600; color: var(--text); }
.dialog .item.active:after { transform: rotate(180deg); }
.dialog .item:before {position: absolute;font-family: siteicons;font-size: 22px;left: 20px;top: 14px;color: var(--text-gray);}
.dialog .item.list:after { content: '\0043'; position: absolute; font-family: siteicons; font-size: 14px; right: 20px; top: 22px; color: var(--text-gray); transition: transform .1s ease-out; }
.dialog .item.item-make:before { content: '\0057'; }
.dialog .item.item-model:before { content: '\006a'; }
.dialog .item.item-location:before { content: '\0059'; }
.dialog .item.item-year:before { content: '\0058'; }
.dialog .item ul { display: none; }
.dialog .item.active ul { display: flex; position: absolute; margin: -4px 0 0 -54px; width: calc(100% - 20px); max-height: 300px; padding: 0; background-color: var(--bg-gray); white-space: nowrap; flex-direction: column; border: 5px solid var(--bg-gray); border-radius: 8px; box-shadow: 0 35px 60px -10px rgba(0,0,0,0.7); overflow: hidden; overflow-y: auto; z-index: 1; }
.dialog .item.active ul::-webkit-scrollbar {width: 10px; height: 10px;}
.dialog .item.active ul::-webkit-scrollbar-track-piece {background-color: var(--bg-gray);}
.dialog .item.active ul::-webkit-scrollbar-thumb {height: 12px; background: var(--bg-blue); border-radius: 5px;}
.dialog .item p {font-size: 14px;padding: 12px 20px;margin: 0;color: var(--text);cursor: pointer;}
.dialog .item p:hover { background-color: var(--rgba-1); }
.dialog .item.disable {background-color: var(--bg-gray);}
.dialog .item.disable b { color: var(--text-gray); }

.dialog .main { position: relative; display: flex; align-items: center; justify-content: center; width: calc(100% - 100px); height: 32px; padding: 10px 50px; font-weight: bold; font-size: 16px; color: var(--text); border-radius: 10px; cursor: pointer; user-select: none; cursor: pointer; transition: .1s ease-out; outline: 3px solid var(--text); }
.dialog .main:hover,
.dialog .main.active { outline: none; background-color: var(--bg-blue); color: var(--bg-opposite); }
.dialog .main .mark {position: relative; display: inline-block; padding: 2px 8px; background-color: var(--bg-blue); margin: 0 5px; color: var(--text); border-radius: 4px; font-size: 12px;}
.dialog .main:hover .mark { background-color: var(--bg); }

.dialog .button { position: relative; display: flex; align-items: center; justify-content: center; width: calc(100% - 100px); height: 32px; padding: 10px 50px; font-weight: bold; font-size: 16px; color: var(--text); border-radius: 10px; cursor: pointer; user-select: none; cursor: pointer; transition: .1s ease-out; outline: 3px solid var(--text); }
.dialog .button:hover,
.dialog .button.active { outline: none; background-color: var(--bg-blue); color: var(--bg-opposite); }

.dialog .select { position: relative; width: calc(100% - 20px); padding: 4px 10px; display: flex; border-radius: 8px; outline: 2px solid var(--rgba-2); align-items: center; gap: 10px; justify-content: space-around; }
.dialog .select .question { font-size: 15px; font-weight: bold; }
.dialog .select .answer { display: flex; gap: 10px; }
.dialog .select .answer b {position: relative;width: 20px;height: 20px;padding: 12px;display: flex;border-radius: 6px;cursor: pointer;font-size: 15px;align-items: center;justify-content: center;text-align: center;}
.dialog .select .answer b:hover { background-color: var(--bg-blue); color: var(--text); }
.dialog .select .answer b.active { background-color: var(--bg-gray); color: var(--text); }
.dialog .description { font-size: 15px; margin-top: 10px; }

.dialog .check-wrap { position: relative; width: 100%; display: inline-block;}
.dialog .check-wrap input { display: none;}
.dialog .check-wrap label {position: relative;padding-left: 34px;width: calc(100% - 40px);height: 100%;display: flex;flex-direction: column;justify-content: center;cursor: pointer;user-select: none;}
.dialog .check-wrap label:before { content: '\004e'; position: absolute; left: 2px; font-family: siteicons; font-size: 22px; width: 22px; height: 22px;}
.dialog .check-wrap input:checked + label:before { content: '\004d'; }
.dialog .check-wrap input.red-outline + label:before { color: red; }
.dialog .check-wrap input.red-outline:checked + label:before { color: black; }
.dialog .check-wrap label b { font-size: 14px; font-weight: normal; color: var(--text);}
.dialog .check-wrap label i { font-size: 12px; font-style: normal; color: var(--text-gray);}
.dialog .check-wrap label a { color: var(--text-blue); }

.dialog .buttons-message {display: flex;width: 100%;justify-content: space-around;align-items: center;gap: 10px;}
.dialog .buttons-message div {position: relative;width: 94px;height: 94px;display: flex;flex-direction: column;align-items: center;gap: 10px;justify-content: center;background-color: var(--bg);border-radius: 16px;cursor: pointer;outline: 2px solid var(--text);}
.dialog .buttons-message div img {width: 34px;aspect-ratio: 1;user-select: none;}
.dialog .buttons-message div span {position: relative;width: 100%;font-size: 13px;text-align: center;font-family: Arial;font-weight: bold;user-select: none;}
.dialog .buttons-message div:hover {background-color: var(--bg-blue);}
.dialog .buttons-message .whatsapp:before,
.dialog .buttons-message .telegram:before,
.dialog .buttons-message .mail:before { position: relative; width: 34px; aspect-ratio: 1;user-select: none; font-size: 34px; font-family: siteicons; }
.dialog .buttons-message .whatsapp:before { content: '\0079'; }
.dialog .buttons-message .telegram:before { content: '\0076'; }
.dialog .buttons-message .mail:before { content: '\0074'; }

.dialog .red-outline { outline: 1px solid red; }

[theme-dark] .dialog .dialog-wrap { background-color: rgba(0,12,25,.8); }

@media screen and (max-width: 480px) {
.dialog .dialog-wrap { width: calc(100% - 80px); padding: 30px; }
}

@media screen and (max-width: 430px) {
.dialog .dialog-wrap { width: calc(100% - 60px); padding: 20px; top: 10px; transform: translate(-50%, 0); }
.dialog .flex { flex-direction: column; }
}