/* ===== Map / misc ===== */
#contact-map {
    height: 360px;
}

@media (min-width: 1024px) {
    #contact-map {
        height: 420px;
    }
}

.leaflet-container {
    border-radius: 1rem;
}

.office-item {
    cursor: pointer
}

.office-item:hover {
    color: #2563eb
}

/* honeypot — скрыть визуально, но оставить в DOM */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Эмоджи-флаги выглядят одинаково на разных платформах */
.font-emoji {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif;
}

/* Чуть плотнее элементы телефона на узких экранах */
@media (max-width: 420px) {
    #country-select {
        padding-left: .35rem;
        padding-right: 1.6rem
    }
}


/* Phone input group */
.phone-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.phone-group select.ui-input {
    flex: 0 0 80px; /* уменьшили селект с флагом */
    padding-left: 6px;
    padding-right: 6px;
}

.phone-group input.dial {
    flex: 0 0 70px; /* код страны, фикс ширина */
    text-align: center;
}

.phone-group input.local {
    flex: 1; /* локальный номер занимает оставшееся место */
}


/* ===== Clean inputs look (scoped to the card) ===== */
.contact-card {
    --ui-bg: #fff;
    --ui-border: #e5e7eb; /* slate-200 */
    --ui-border-hover: #cbd5e1; /* slate-300 */
    --ui-text: #0f172a; /* slate-900 */
    --ui-muted: #9ca3af; /* gray-400 */
    --ui-focus: 37, 99, 235; /* rgb(37,99,235) */
    --ui-shadow: 0 8px 24px rgba(2, 6, 23, .06);
}

.contact-card .ui-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background: var(--ui-bg);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    border-radius: 0.75rem; /* rounded-xl */
    padding: 0.75rem 1rem; /* p-3 px-4 */
    line-height: 1.25;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
    box-shadow: 0 1px 0 rgba(2, 6, 23, .03);
}

.contact-card .ui-input::placeholder {
    color: var(--ui-muted);
}

.contact-card .ui-input:hover {
    border-color: var(--ui-border-hover);
}

.contact-card .ui-input:focus {
    outline: 0;
    border-color: rgb(var(--ui-focus));
    box-shadow: 0 0 0 4px rgba(var(--ui-focus), .12),
    var(--ui-shadow);
}

.contact-card .ui-input[disabled] {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

.contact-card textarea.ui-input {
    min-height: 7.5rem;
    resize: vertical;
}

.contact-card select.ui-input {
    padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
    linear-gradient(135deg, #94a3b8 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
    background-position: calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    calc(100% - 2.25rem) 0;
    background-size: 6px 6px, 6px 6px, 1px 100%;
    background-repeat: no-repeat;
}

.contact-card .ui-input.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .10), var(--ui-shadow);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.animate-fade-in {
    animation: fadeIn .25s ease-out forwards;
}