/* Metricet — UTM builder.
 *
 * Styles the shared partial (resources/views/utm/partials/builder.blade.php)
 * on both the marketing site and the panel. Self-contained: it does not lean
 * on either side's Bootstrap build. Colours come from the panel's --mt-*
 * tokens where they exist, with the same brand values as fallbacks for the
 * marketing site, which does not load metricet-ui.css.
 *
 * RTL only, so logical properties throughout.
 */
.utm-tool {
    --utm-navy: var(--mt-navy, #001233);
    --utm-blue: var(--mt-blue, #0466c8);
    --utm-blue-link: var(--mt-blue-link, #0361e4);
    --utm-sky: var(--mt-sky, #5db8fe);
    --utm-tint: var(--mt-blue-tint, #eef4ff);
    --utm-ink: var(--mt-ink, #2c3e50);
    --utm-soft: var(--mt-ink-soft, #6e7191);
    --utm-mute: var(--mt-ink-mute, #8a94a6);
    --utm-line: var(--mt-line, #e4e6ef);
    --utm-sunk: var(--mt-surface-sunk, #f2f4f6);
    --utm-surface: var(--mt-surface, #fff);
    --utm-danger: #b42318;
    --utm-danger-bg: #fef3f2;
    --utm-warn-fg: #93370d;
    --utm-warn-bg: #fffaeb;
    --utm-success-fg: var(--mt-success-fg, #067647);
    --utm-success-bg: var(--mt-success-bg, #ecfdf3);

    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1.5rem;
    direction: rtl;
    color: var(--utm-ink);
    font-family: inherit;
    text-align: start;
}
.utm-tool *, .utm-tool *::before, .utm-tool *::after { box-sizing: border-box; }
.utm-tool p { margin: 0; }
@media (max-width: 860px) { .utm-tool { grid-template-columns: minmax(0, 1fr); } }

.utm-form, .utm-result { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

/* The result column stays in view while the form is filled on desktop. */
.utm-result {
    align-self: start;
    position: sticky;
    top: 1rem;
    background: var(--utm-sunk);
    border: 1px solid var(--utm-line);
    border-radius: 14px;
    padding: 1.15rem;
    gap: .8rem;
}
@media (max-width: 860px) { .utm-result { position: static; } }

.utm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 560px) { .utm-grid { grid-template-columns: minmax(0, 1fr); } }

.utm-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }

.utm-label {
    display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
    font-size: .9rem; font-weight: 700; color: var(--utm-navy);
    margin: 0;
}
.utm-label em { font-style: normal; color: var(--utm-danger); }
.utm-label code {
    direction: ltr;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem; font-weight: 500;
    color: var(--utm-blue);
    background: var(--utm-tint);
    padding: .1rem .4rem;
    border-radius: 6px;
}

.utm-help { font-size: .78rem; line-height: 1.7; color: var(--utm-soft); }

.utm-input, .utm-output {
    width: 100%;
    font: inherit;
    font-size: .95rem;
    color: var(--utm-ink);
    background: var(--utm-surface);
    border: 1px solid var(--utm-line);
    border-radius: 10px;
    padding: .7rem .85rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* The marketing site's IRANSans has no Latin fallback of its own, so an
   address would otherwise drop to the browser's serif default. */
.utm-input[dir="ltr"] {
    text-align: left;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.utm-input::placeholder, .utm-output::placeholder { color: var(--utm-mute); opacity: 1; }
.utm-input:focus, .utm-output:focus {
    outline: none;
    border-color: var(--utm-blue);
    box-shadow: 0 0 0 3px rgba(4, 102, 200, .15);
}

/* The result is read far more than it is edited, so it is set in a face where
   every character of a URL is distinct. */
.utm-output {
    resize: vertical;
    min-height: 6.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem;
    line-height: 1.6;
    word-break: break-all;
    text-align: left;
}
.utm-output::placeholder { font-family: inherit; text-align: right; direction: rtl; }

.utm-presets { display: flex; flex-wrap: wrap; gap: .45rem; }
.utm-chip {
    font: inherit; font-size: .82rem; font-weight: 600;
    padding: .45rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--utm-line);
    background: var(--utm-surface);
    color: var(--utm-ink);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.utm-chip:hover { border-color: var(--utm-blue); color: var(--utm-blue); }
.utm-chip[aria-pressed="true"] { background: var(--utm-blue); border-color: var(--utm-blue); color: #fff; }
.utm-chip:focus-visible, .utm-btn:focus-visible, .utm-more summary:focus-visible {
    outline: 3px solid var(--utm-sky); outline-offset: 2px;
}

.utm-more { border-top: 1px dashed var(--utm-line); padding-top: .9rem; }
.utm-more summary {
    cursor: pointer;
    font-size: .85rem; font-weight: 700;
    color: var(--utm-blue);
    list-style-position: inside;
    margin-bottom: .2rem;
}
.utm-more[open] summary { margin-bottom: 1rem; }

.utm-error, .utm-hint p {
    font-size: .8rem; line-height: 1.7;
    border-radius: 8px;
    padding: .5rem .7rem;
}
.utm-error { color: var(--utm-danger); background: var(--utm-danger-bg); }
.utm-hint { display: flex; flex-direction: column; gap: .4rem; }
.utm-hint p { color: var(--utm-warn-fg); background: var(--utm-warn-bg); }
.utm-error[hidden], .utm-hint[hidden] { display: none; }

.utm-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.utm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font: inherit; font-size: .9rem; font-weight: 700;
    padding: .7rem 1.1rem;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.utm-btn svg { width: 17px; height: 17px; flex: none; }
.utm-btn:disabled { opacity: .45; cursor: not-allowed; }
.utm-btn-primary { flex: 1 1 auto; background: var(--utm-blue); color: #fff; }
.utm-btn-primary:not(:disabled):hover { background: var(--utm-blue-link); }
.utm-btn-secondary { flex: 1 1 auto; background: var(--utm-surface); color: var(--utm-blue); border-color: var(--utm-blue); }
.utm-btn-secondary:not(:disabled):hover { background: var(--utm-tint); }
.utm-btn-ghost { background: var(--utm-surface); color: var(--utm-ink); border-color: var(--utm-line); }
.utm-btn-ghost:not(:disabled):hover { border-color: var(--utm-blue); color: var(--utm-blue); }
.utm-btn.is-done { background: var(--utm-success-bg); color: var(--utm-success-fg); border-color: transparent; }

.utm-qr {
    display: flex; align-items: center; gap: 1rem;
    border-top: 1px solid var(--utm-line);
    padding-top: .9rem;
}
/* Always dark-on-white: tinted codes fail on older phone scanners. */
.utm-qr-box {
    flex: none;
    width: 132px; height: 132px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid var(--utm-line);
    border-radius: 12px;
    overflow: hidden;
}
.utm-qr-box canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.utm-qr-box canvas[hidden] { display: none; }
.utm-qr-empty {
    padding: .6rem;
    font-size: .72rem; line-height: 1.6; text-align: center;
    color: var(--utm-mute);
}
.utm-qr-empty[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .utm-tool * { transition: none !important; }
}