/* ===== mail.css ===== */
*,::after,::before {box-sizing:border-box;margin:0;padding:0}
*:focus:not(:focus-visible) {
    outline: none;
}
html {scrollbar-gutter:stable}
:root {
	--bg:#080d18;
	--surface:#0f1626;
	--border:#1c2a45;
	--accent:#00A6DE;
	--accent2:#0070f3;
	--text:#d8e4f0;
	--muted:#6b82a0;
	--radius:6px;
    --danger:#ef4444;
    --link:#4da3ff;
}
/*
body {
    background:var(--bg);
    color:var(--text);
    font:400 1rem/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    min-height:100dvh;
}
*/

body{background:var(--bg);color:var(--text);font:400 1rem/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;min-height:100dvh;overflow:visible;display:flex;flex-direction:column;align-items:stretch}
body>*{width:100%;flex-shrink:0}

.mail-container{flex:1 0 auto;display:flex;flex-direction:column}
.success-state{flex:1 0 auto;width:100%}

/* ===== HEADER ===== */
.site-header {
    border-bottom:1px solid var(--border);
    padding:22px 24px;
    display:flex;
    align-items:center;
    gap:16px;
	max-width:1580px;
	margin-inline:auto;
}
.site-header .logo {
    font-family:'Arial Black',Impact,sans-serif;
    font-size:1.6rem;
    letter-spacing:.02em;
    color:#fff;
    text-decoration:none;
    line-height:1;
}
.site-header .logo_mailSend {
    font-family:'Arial Black',Impact,sans-serif;
    font-size:1.6rem;
    letter-spacing:.02em;
    color: var(--accent);
    text-decoration:none;
    line-height:1;
}
@media screen and (max-width: 767px) {
  .logo_mailSend {
    display: none;
  }
}
.site-header .logo span {color:var(--accent)}

/* ===== HERO ===== */
.hero {padding:11px 24px 0;max-width:1250px;margin-inline:auto}
.hero-header {display:flex;align-items:center;gap:20px}
.hero h1 {
    font-family:'Arial Black',Impact,sans-serif;
    font-size:1.1rem;
    letter-spacing:.01em;
    line-height:1;
    color:#fff;
}
.hero h1 em {font-style:normal;color:var(--accent)}
.hero p {margin-top:3px;color:#bbbec3;font-size:.95rem}

/* ===== MAIN CONTAINER ===== */
.mail-container {
    max-width:650px;
    margin:12px auto;
    padding:0 15px 10px;
}

/* ===== FORM CARD ===== */
.form-card {
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 18px 4px;
	box-shadow: rgba(100, 100, 100, 0.35) 0px 5px 15px;
	position:relative;
}
.lang-toggle {
    position:absolute;
    top:7px;
    right:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:26px;
    padding:0;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:6px;
    cursor:pointer;
    transition:border-color .15s ease, transform .15s ease;
}
.lang-toggle:hover {
    border-color:var(--accent);
    transform:translateY(-1px);
}
.lang-toggle img {
    width:26px;
    height:20px;
    border-radius:2px;
    display:block;
    pointer-events:none;
}
.form-card-title {
    font-family:'Arial Black',Impact,sans-serif;
    font-size:0.9rem;
    color:#fff;
    margin-bottom:4px;
    /*letter-spacing:.01em;*/
}
.form-card-sub {
    font-size:.8rem;
    color:#c1d4ee;
    margin-bottom:10px;
    padding-bottom:8px;
    border-bottom:1px solid var(--border);
}

/* ===== FORM GROUPS ===== */
.form-group {
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:12px;
}
.form-label {
    font-size:.72rem;
    font-weight:700;
    color:#c1d4ee;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.form-control {
    width:100%;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius);
    color:var(--text);
    font-size:.85rem;
    padding:10px 13px;
    outline:none;
    transition:border-color .2s;
    font-family:inherit;
    -webkit-appearance:none;
}
.form-control:focus {border-color:var(--accent)}
.form-control::placeholder {color:var(--muted);font-size:.77rem;}
textarea.form-control {
    resize:vertical;
    min-height:130px;
    line-height:1.55;
}

/* ===== PHONE ROW ===== */
.phone-row {
    display:flex;
    gap:0;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:visible;
    transition:border-color .2s;
    position:relative;
}
.phone-row:focus-within {border-color:var(--accent)}

#country-trigger {
    display:flex;
    align-items:center;
    gap:6px;
    padding:9px 10px 9px 12px;
    cursor:pointer;
    border:solid var(--border);
	border-width: 0 1px 0px 0px;
    background:transparent;
    color:var(--text);
    font-size:.88rem;
    font-family:inherit;
    border-radius:0;
    outline:none;
    white-space:nowrap;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    flex-shrink:0;
}
#country-trigger:hover {background:rgba(255,255,255,.04)}

#country-flag {
    width:22px;
    height:16px;
    object-fit:cover;
    border-radius:2px;
    display:block;
}
#country-code-display {
    font-size:.85rem;
    color:var(--text);
    min-width:38px;
}
.caret-icon {
    width:8px;
    opacity:.5;
    transition:transform .2s;
    flex-shrink:0;
}
#country-trigger.open .caret-icon {transform:rotate(180deg)}

#mobNumber {
    flex:1;
    background:transparent;
    border:none;
    outline:none;
    color:var(--text);
    font-size:.9rem;
    padding:10px 13px;
    font-family:inherit;
    min-width:0;
}
#mobNumber::placeholder {color:var(--muted);font-size:.77rem;}

/* ===== COUNTRY DROPDOWN ===== */
#country-dropdown {
    display:none;
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    width:280px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    z-index:500;
    box-shadow:0 8px 32px rgba(0,0,0,.5);
    overflow:hidden;
}
#country-dropdown.open {display:block}

#country-search {
    width:100%;
    background:var(--bg);
    border:none;
    border-bottom:1px solid var(--border);
    color:var(--text);
    font-size:.85rem;
    padding:9px 12px;
    outline:none;
    font-family:inherit;
}
#country-search::placeholder {color:var(--muted);font-size:.77rem;}

#country-list {
    max-height:220px;
    overflow-y:auto;
    overscroll-behavior:contain;
}
.country-item {
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px 12px;
    cursor:pointer;
    font-size:.8rem;
    color:var(--text);
    transition:background .12s;
}
.country-item:hover {background:rgba(255,255,255,.06)}
.country-item img {
    width:22px;
    height:16px;
    object-fit:cover;
    border-radius:2px;
    flex-shrink:0;
}
.country-item span {flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.country-item .dial {color:var(--muted);font-size:.8rem;flex-shrink:0}

/* ===== QUICK RESPONSE ===== */
.quick-label {
    font-size:.72rem;
    font-weight:700;
    color:#c1d4ee;
    text-transform:uppercase;
    letter-spacing:.01em;
    margin-bottom:2px;
}
.quick-btns {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
	justify-content: center;
	align-items: center;
}
.quick-btn {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 8px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--muted);
    font-size:.82rem;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
    transition:all .15s;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
}
.quick-btn svg {width:16px;height:16px;flex-shrink:0;opacity:.7}
.quick-btn:hover {border-color:var(--accent);color:var(--text)}
.quick-btn.selected {
    border-color: var(--btn-brand);
    color: #fff;
    background: var(--btn-brand);
}

@media (hover: hover) and (pointer: fine) {
  .quick-btn.selected {
	color: #000;
  }
}

.quick-btn[data-channel="wa"].selected    { --btn-brand: #25D366; }
.quick-btn[data-channel="telegram"].selected { --btn-brand: #2AABEE; }
.quick-btn[data-channel="viber"].selected { --btn-brand: #7360F2; }
.quick-btn[data-channel="sms"].selected   { --btn-brand: var(--accent); }
/*
.quick-btn[data-channel="wa"].selected    { --btn-brand: #20AB54; }
.quick-btn[data-channel="telegram"].selected { --btn-brand: #1E89C0; }
.quick-btn[data-channel="viber"].selected { --btn-brand: #5747C7; }
.quick-btn[data-channel="sms"].selected   { --btn-brand: #0f9c8a; }
*/

.quick-btn.selected svg {opacity:1}

input[type="hidden"].qb-input {display:none}

/* ===== FILE UPLOAD ===== */
.file-upload-area {
    margin-bottom:10px;
}
.file-upload-label {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 8px;
    background:var(--bg);
    border:1px dashed var(--border);
    border-radius:var(--radius);
    color:var(--muted);
    font-size:.85rem;
    cursor:pointer;
    transition:border-color .2s,color .2s;
    -webkit-tap-highlight-color:transparent;
}
.file-upload-label:hover {border-color:var(--accent);color:var(--text)}
.file-upload-label svg {flex-shrink:0}
#files {display:none}

.preview-container {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
	justify-content: center;
	align-items: center;
}
.preview-wrapper {
    position:relative;
    width:80px;
    height:80px;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--border);
    background:#000;
}
@media(max-width:520px) {
    .preview-wrapper { 
		width:75px;
		height:75px
	}
}
.preview-wrapper img {
    width:100%;
    height:100%;
    object-fit:cover;
    cursor:pointer;
    transition:opacity .2s;
border: 1px solid #ccc;
  border-radius: 5px;
}
.preview-wrapper img:hover {opacity:.8}

@keyframes badimage {
  0% {
    border: 2px solid red;
  }
  50% {
    border-color: transparent;
  }
  100% {
    border: 2px solid red;
  }
}

.badimage {
  animation: badimage 1s infinite;
}

.remove-btn {
    position:absolute;
    top:2px;
    right:2px;
    width:22px;
    height:22px;
/*    background:rgba(239,68,68,.85);
    border:none;
    border-radius:50%;
*/
    color:#fff;
    font-size:.65rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}
.remove-btn:hover {/*background:var(--danger)*/}

/* ===== IMAGE LIGHTBOX ===== */
.img-lightbox {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);
    z-index:9000;
    align-items:center;
    justify-content:center;
}
.img-lightbox.active {display:flex}

.lightbox-inner {
    position:relative;
    display:inline-flex;
}
.lightbox-inner img {
    max-width:80vw;
    max-height:80vh;
    border-radius:8px;
    object-fit:contain;
    cursor:zoom-out;
    display:block;
	border: 2px solid var(--accent);
}
.lightbox-close-btn {
    position:absolute;
    top:-14px;
    right:-14px;
    width:28px;
    height:28px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:9001;
    opacity:.85;
    transition:opacity .2s, transform .2s;
}
.lightbox-close-btn:hover {opacity:1;transform:scale(1.12)}
.lightbox-close-btn svg {width:28px;height:28px;display:block}

/* ===== SUBMIT BUTTON ===== */
.btn-submit {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:8px 14px;
    background:var(--accent);
    color:#080d18;
    border:none;
    border-radius:var(--radius);
    font-size:.88rem;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
    transition:background .2s,opacity .2s;
    -webkit-tap-highlight-color:transparent;
    width: auto;
    white-space: nowrap;
}
.file-upload-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

@media (max-width: 520px) {
    .file-upload-row {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-submit {
        width: 100%;
    }
}
.btn-submit:hover {background:#00c8ae}
.btn-submit:disabled {opacity:.45;cursor:not-allowed}
.btn-submit svg {flex-shrink:0}

/* ===== PROGRESS OVERLAY ===== */
.send-overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(8,13,24,.75);
    z-index:8000;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:16px;
}
.send-overlay.active {display:flex}
.send-spinner {
  width: 120px;
  height: 120px;
  border: 12px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin {to {transform:rotate(360deg)}}
.send-overlay p {
  color: var(--muted);
  font-size: .8rem;
  font-weight: bold;
  position: absolute;
}

/* ===== SUCCESS STATE ===== */
.success-state {
    display:none;
    text-align:center;
    padding:32px 16px;
}
.success-state.active {display:block}
.success-icon {
    width:56px;
    height:56px;
    background:rgba(0,166,222,.12);
    border:2px solid var(--accent);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 16px;
}
.success-state h3 {color:#fff;font-size:1.05rem;margin-bottom:8px}
.success-state p {color:var(--muted);font-size:.875rem;margin-bottom:20px}
.btn-reset {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 20px;
    background:rgba(0,166,222,.1);
    border:1px solid var(--accent);
    border-radius:var(--radius);
    color:#fff;
    font-size:.875rem;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
    transition:background .2s;
}
.btn-reset:hover {background:rgba(0,166,222,.2)}

/* ===== ALERT MODAL ===== */
.alert-modal {
    display:none;
    position:fixed;
    inset:0;
    z-index:10001;
    align-items:center;
    justify-content:center;
}
.alert-modal.active {display:flex}
.alert-box-inner {
    background:var(--surface);
    border:2px solid var(--danger);
    border-radius:12px;
    padding:28px 32px;
    max-width:400px;
    width:calc(100% - 40px);
    text-align:center;
    position:relative;
    z-index:10002;
}
.alert-box-inner p {
    color:var(--text);
    font-size:.9rem;
    margin-bottom:18px;
    line-height:1.6;
}

/* ===== RUSSIAN ALERT ===== */
.ru-overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(8,13,24,.92);
    z-index:9999;
    align-items:center;
    justify-content:center;
}
.ru-overlay.active {display:flex}
.ru-box {
    background:var(--surface);
    border:2px solid var(--danger);
    border-radius:12px;
    padding:28px 32px;
    max-width:400px;
    width:calc(100% - 40px);
    text-align:center;
}
.ru-box p {color:var(--text);font-size:.9rem;margin-bottom:18px;line-height:1.6}
.ru-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 22px;
    background:var(--danger);
    color:#fff;
    border:none;
    border-radius:var(--radius);
    font-size:.9rem;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    transition:opacity .2s;
    margin:4px;
}
.ru-btn.secondary {background:var(--bg);border:1px solid var(--border);color:var(--muted)}
.ru-lang {
    display:inline-flex;
    margin-bottom:12px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
}
.ru-lang button {
    padding:5px 14px;
    background:none;
    border:none;
    color:var(--muted);
    font-size:.8rem;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    transition:background .15s,color .15s;
}
.ru-lang button.active {background:var(--border);color:var(--text)}

.successButtonSort {
  display: inline-grid;
  vertical-align: center;
  gap: 12px;
}

/* ===== FOOTER ===== */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px;
  font-size: .8rem;
  max-width: 1580px;
  margin-inline: auto;
  text-align: center;
  color: var(--muted);
}
.site-footer a {color:#f5fffe;text-decoration:none}
.footer-links {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.footer-links a,.address-btn {
    color:var(--muted);
    text-decoration:none;
    font-size:.8rem;
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    transition:color .2s;
}
.footer-links a:hover,.address-btn:hover {color:#fff;text-decoration:none}
.footer-links .sep {color:var(--border)}

/* ===== CONTACT MODAL (same as logs) ===== */
.logs_backdrop {
    position:fixed;inset:0;
    background:rgb(5 12 20 / .7);
    z-index:9999;
    opacity:0;visibility:hidden;
    transition:opacity .3s ease;
}
.logs_backdrop.active {opacity:1;visibility:visible}
.contact-modal {
    position:fixed;top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:var(--surface);
    border:3px solid var(--accent);
    border-radius:12px;
    padding:12px 24px 14px;
    z-index:10000;
    max-width:570px;
    width:calc(100% - 40px);
    box-shadow:0 32px 80px rgb(0 0 0 / .7);
    opacity:0;visibility:hidden;
    transition:opacity .3s ease;
}
.contact-modal.active {opacity:1;visibility:visible}
.contact-modal h3 {font-size:1rem;color:#fff;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.contact-modal p {font-size:.875rem;color:var(--text);line-height:1.7;margin-bottom:5px}
.contact-modal a {color:var(--link);text-decoration:none}
.modal-close {
    position:absolute;top:10px;right:10px;
    width:28px;height:28px;
    background:var(--border);border:none;border-radius:50%;
    color:var(--text);font-size:1.1rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s,color .2s;line-height:1;
}
.modal-close:hover {background:rgb(239 68 68 / .2);color:#ef4444}
.popupSocialIcons {
    display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:8px;margin-top:10px;
}
.socialicons {width:36px;height:36px;flex-shrink:0}

/* ===== RESPONSIVE ===== */
@media(max-width:520px) {
    .form-card {padding:10px 16px 5px}
    .lang-toggle {top:8px;right:9px}
    .mail-container {padding:0 12px 32px}
    .quick-btns {gap:6px}
    .quick-btn {padding:6px 11px;font-size:.78rem}
    #country-dropdown {width:260px}
}

@media(max-width:520px) {
    .hideOnMob {display:none}
}

.message-wrapper {
    position: relative;
}

.message-wrapper textarea {
    padding-bottom: 10px; /* დამატებითი სივრცე thumbnails-ისთვის */
}

.preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: absolute;
    bottom: 8px;
    right: 8px;
    /* flex-direction: row-reverse; — თუ მარჯვნიდან დალაგება გინდა */
}