/* ============================================
   UTM Link Builder - Tool styles (mk-* from premium-saas.css)
   ============================================ */

.utm-builder-tool {
    padding: var(--mk-space-2xl);
}

.utm-input-section {
    margin-bottom: 0;
}

.utm-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-space-lg);
    margin-top: var(--mk-space-lg);
}

.utm-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--mk-space-sm);
    font-size: 0.875rem;
    color: var(--mk-text-secondary);
    cursor: pointer;
}

.utm-checkbox input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--mk-primary);
}

.utm-result-section {
    padding-left: 0;
}

@media (min-width: 992px) {
    .utm-result-section {
        padding-left: var(--mk-space-lg);
        border-left: 1px solid var(--mk-border);
    }
}

.utm-result-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mk-text-main);
    margin-bottom: var(--mk-space-xs);
}

.utm-result-subtitle {
    font-size: 0.875rem;
    color: var(--mk-text-muted);
    margin-bottom: var(--mk-space-lg);
}

.utm-output {
    font-family: ui-monospace, monospace;
    font-size: 0.875rem;
    min-height: 60px;
}

.utm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-space-sm);
    margin-top: var(--mk-space-md);
}

.utm-status {
    margin-top: var(--mk-space-sm);
    min-height: 1.25rem;
}

.utm-status.is-visible {
    color: var(--mk-text-muted);
}
.utm-status.utm-status--success.is-visible {
    color: var(--mk-success, #198754);
    font-weight: 500;
}
.utm-status.utm-status--error.is-visible {
    color: var(--mk-danger, #dc3545);
}

.utm-hint--error {
    color: var(--mk-danger, #dc3545) !important;
}

/* Presets */
.utm-presets {
    margin-bottom: var(--mk-space-lg);
}
.utm-presets__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mk-text-secondary);
    margin-bottom: var(--mk-space-sm);
}
.utm-presets__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mk-space-sm);
}

/* Variants (A/B) */
.utm-variants__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mk-text-main);
    margin-bottom: var(--mk-space-xs);
}
.utm-variants__help {
    font-size: 0.8125rem;
    color: var(--mk-text-muted);
    margin-bottom: var(--mk-space-sm);
}
.utm-variants__input {
    margin-bottom: var(--mk-space-md);
    font-family: ui-monospace, monospace;
    font-size: 0.875rem;
}
.utm-variants__list {
    display: flex;
    flex-direction: column;
    gap: var(--mk-space-sm);
}
.utm-variant-row {
    display: flex;
    align-items: center;
    gap: var(--mk-space-sm);
    flex-wrap: wrap;
}
.utm-variant-url {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
    color: var(--mk-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.utm-variant-row .mk-btn {
    flex-shrink: 0;
}