/* ---------------------------- dropdown ---------------------------- */

/* One set of values for every suggestion list on the page — the city field,
   the address field, the INN field and the search box inside the map modal.
   They used to drift apart because each place repeated its own numbers. */
:root {
    /* Matches the checkout fields in this theme (3px). A list rounded more than
       the input it hangs from reads as a separate object. */
    --ddatahints-radius: 3px;
    --ddatahints-border: #d1d5db;
    --ddatahints-border-active: #2563eb;
    --ddatahints-text: #111827;
    --ddatahints-muted: #6b7280;
    --ddatahints-accent: #1d4ed8;
    --ddatahints-accent-bg: #eff6ff;
    --ddatahints-pad-x: 12px;
    --ddatahints-font: 14px;
}

.suggestions-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

/* The library ships its own spacing on these; anything here would show up as a
   gap between the field and the list. */
.suggestions-wrapper,
.suggestions-wrapper .suggestions-input {
    margin-bottom: 0;
}

/* Modelled on the theme's own dropdown (the "Варианты доставки" select): the
   list is a separate panel sitting below the field, not a shape fused to it —
   small gap, its own border on all four sides, evenly rounded corners, and a
   soft shadow. Sharing the field's outline was the wrong idea: it never lined
   up pixel-for-pixel with the input, and every mismatch read as a defect. */
.suggestions-suggestions {
    z-index: 10000;
    margin-top: 4px;
    padding: 0;
    font: inherit;
    font-size: var(--ddatahints-font);
    color: var(--ddatahints-text);
    background: #fff;
    border: 1px solid var(--ddatahints-border);
    border-radius: var(--ddatahints-radius);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .10);
    /* Scrolls rather than clips: with ten suggestions the list can outgrow the
       space below the field, and overflow:hidden cut the last ones off with no
       way to reach them. */
    max-height: 60vh;
    overflow-y: auto;
}

/* The field keeps its own shape while the list is open — like the theme's
   select, which stays a rounded box with the menu floating below it. Only the
   border colour follows the focus, so the pair still reads as one control. */
.suggestions-wrapper.ddatahints-open input,
.wa-field-wrapper .suggestions-wrapper.ddatahints-open input {
    border-color: var(--ddatahints-border-active);
}

/* Rows separated by hairlines, like the theme's dropdown, rather than sitting
   in one undivided block. */
.suggestions-suggestion {
    padding: 10px var(--ddatahints-pad-x);
    line-height: 1.35;
    cursor: pointer;
    border-top: 1px solid #f1f3f5;
    /* A long address wraps between words rather than mid-word, and the commas
       stay attached to the part they follow. */
    overflow-wrap: break-word;
}

.suggestions-suggestions > .suggestions-suggestion:first-child {
    border-top: 0;
}

.suggestions-suggestion:hover,
.suggestions-suggestion.suggestions-selected {
    background: var(--ddatahints-accent-bg);
    color: var(--ddatahints-accent);
}

/* The library marks matched fragments; keep them readable, not shouting. */
.suggestions-suggestion strong {
    font-weight: 600;
    color: inherit;
}

/* Everything inside a suggestion stays on one flowing line. The library wraps
   the parts of an address in block-level elements, which in a narrow column —
   the admin order form is the obvious case — broke each suggestion into a
   stack of lines with the separating commas stranded on their own.
   Any depth, not just direct children: the nesting differs between library
   versions, and a "> div" rule missed it entirely in the backend. */
.suggestions-suggestions .suggestions-suggestion div,
.suggestions-suggestions .suggestions-suggestion span,
.suggestions-suggestion div,
.suggestions-suggestion span,
.suggestions-subtext,
.suggestions-subtext_inline,
.suggestions-subtext-delimiter {
    display: inline !important;
    /* The admin panel gives block elements margins of their own, which show up
       as gaps in the middle of an address once they are inline. */
    margin: 0 !important;
    padding: 0 !important;
}

.suggestions-subtext,
.suggestions-subtext_inline {
    color: var(--ddatahints-muted);
}

/* Smaller and grey sets the prompt apart from the options without another
   rule across the panel. */
.suggestions-hint {
    padding: 8px var(--ddatahints-pad-x);
    font-size: 12px;
    color: var(--ddatahints-muted);
}

/* The hint is a row of its own, so the option after it keeps its divider. */
.suggestions-hint + .suggestions-suggestion {
    border-top: 1px solid #f1f3f5;
}

.suggestions-nowrap {
    white-space: nowrap;
}

/* Branding is hidden only when the shop owner turns the option on. */
.ddatahints-no-promo .suggestions-promo,
.ddatahints-no-promo .suggestions-subtext_inline .suggestions-promo {
    display: none !important;
}

.ddatahints-note {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
}

.ddatahints-note-info    { color: #6b7280; }
.ddatahints-note-warning { color: #b45309; }
.ddatahints-note-error   { color: #b91c1c; }

.ddatahints-actions {
    margin-top: 6px;
}

/* Caption row: the label text and its required mark stay together on the left,
   the map button is pushed to the far end of the same line. No
   justify-content here — the caption may hold several nodes (text plus the
   required asterisk) and space-between would spread them apart.
   width:100% matters: .wa-label shrinks to its text, and without a full-width
   box there is no right edge for margin-left:auto to push the button to. */
.wa-field-wrapper .ddatahints-caption,
.ddatahints-caption {
    display: flex !important;
    width: 100%;
    box-sizing: border-box;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.ddatahints-caption .ddatahints-map-btn {
    margin-left: auto;
    white-space: nowrap;
}

.ddatahints-map-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: #2563eb;
    cursor: pointer;
    border-bottom: 1px dashed currentColor;
}

.ddatahints-map-btn:hover {
    color: #1d4ed8;
}

/* ------------------------------ map modal ------------------------------ */

.ddatahints-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, .55);
}

.ddatahints-modal__box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, .25);
}

.ddatahints-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e5e7eb;
}

.ddatahints-modal__title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.ddatahints-modal__close {
    background: none;
    border: 0;
    padding: 0 4px;
    font-size: 26px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
}

.ddatahints-modal__close:hover {
    color: #4b5563;
}

.ddatahints-modal__search {
    padding: 12px 18px;
    border-bottom: 1px solid #e5e7eb;
}

.ddatahints-modal__search input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px var(--ddatahints-pad-x);
    font: inherit;
    font-size: var(--ddatahints-font);
    color: var(--ddatahints-text);
    border: 1px solid var(--ddatahints-border);
    border-radius: var(--ddatahints-radius);
}

/* Focus is the border colour alone. An outline is painted outside the box and
   a shadow spreads past it, either of which makes the field a couple of pixels
   wider than the list below and gives away that they are two elements. */
.ddatahints-modal__search input:focus {
    outline: none;
    border-color: var(--ddatahints-border-active);
}

/* Same list, only lifted above the modal and kept shorter — it opens over the
   map, and covering all of it leaves the buyer nothing to orient by. */
.ddatahints-modal .suggestions-suggestions {
    z-index: 100001;
    max-height: 45vh;
}

.ddatahints-modal__map {
    flex: 1 1 auto;
    min-height: 340px;
}

.ddatahints-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid #e5e7eb;
}

.ddatahints-modal__addr {
    flex: 1 1 240px;
    font-size: 14px;
    line-height: 1.4;
    color: #374151;
}

.ddatahints-modal__hint {
    flex: 1 1 100%;
    font-size: 13px;
    line-height: 1.4;
    color: #b45309;
}

.ddatahints-modal__actions {
    display: flex;
    gap: 8px;
}

.ddatahints-btn {
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.ddatahints-btn--ghost {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.ddatahints-btn--ghost:hover {
    background: #f9fafb;
}

.ddatahints-btn--primary {
    background: #2563eb;
    border: 1px solid #2563eb;
    color: #fff;
}

.ddatahints-btn--primary:hover {
    background: #1d4ed8;
}

.ddatahints-btn--disabled,
.ddatahints-btn:disabled {
    background: #e5e7eb;
    border-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .ddatahints-modal { padding: 0; }
    .ddatahints-modal__box { max-width: none; height: 100%; max-height: none; border-radius: 0; }
    .ddatahints-modal__hint {
    flex: 1 1 100%;
    font-size: 13px;
    line-height: 1.4;
    color: #b45309;
}

.ddatahints-modal__actions { width: 100%; }
    .ddatahints-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ddatahints-modal * { transition: none !important; animation: none !important; }
}

/* ---------------------------- hidden fields ---------------------------- */

.ddatahints-hidden {
    display: none !important;
}