/*
 * Widget Hồ sơ pháp lý sản phẩm.
 * Tự chứa biến riêng: file này cũng được nạp vào shadow DOM trên site đại lý và
 * trang iframe, nơi không có token --erp-color-* của ERP.
 */
.ivar-legal,
.ivar-legal__dialog,
.ivar-legal-embed {
    --ivl-accent: #0f766e;
    --ivl-accent-soft: #e3f2ef;
    --ivl-fg: #14211f;
    --ivl-muted: #5b6b68;
    --ivl-line: #dbe3e1;
    --ivl-surface: #ffffff;
    --ivl-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ivl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ivl-radius: 0; /* góc vuông — đổi một chỗ này nếu muốn bo lại */
}

.ivar-legal { display: inline-block; max-width: 100%; margin: 6px 0; font-family: var(--ivl-font); }
.ivar-legal *, .ivar-legal__dialog * { box-sizing: border-box; }

/* CTA */
.ivar-legal__cta {
    display: inline-grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 10px;
    max-width: 100%;
    margin: 0;
    padding: 8px 12px 8px 10px;
    border: 1px solid color-mix(in srgb, var(--ivl-accent) 45%, transparent);
    border-radius: var(--ivl-radius);
    background: var(--ivl-surface);
    color: var(--ivl-fg);
    font: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ivar-legal__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .35); background: var(--ivl-surface); color: var(--ivl-fg); }
.ivar-legal__cta:focus-visible { outline: 2px solid var(--ivl-accent); outline-offset: 2px; }
.ivar-legal__cta-icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--ivl-radius);
    background: var(--ivl-accent-soft);
    color: var(--ivl-accent);
}
.ivar-legal__cta-icon svg { width: 18px; height: 18px; }
.ivar-legal__cta-title { grid-column: 2; font-size: 13.5px; font-weight: 600; }
.ivar-legal__cta-sub { grid-column: 2; font-size: 12px; color: var(--ivl-muted); font-variant-numeric: tabular-nums; }
.ivar-legal__cta-arrow { grid-column: 3; grid-row: 1 / span 2; color: var(--ivl-muted); }

/* Dialog */
.ivar-legal__dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: var(--ivl-radius);
    background: var(--ivl-surface);
    color: var(--ivl-fg);
    font-family: var(--ivl-font);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5);
}
.ivar-legal__dialog::backdrop { background: rgba(8, 20, 18, .55); }

/* Panel — dùng chung cho dialog, iframe, preview admin */
.ivar-legal__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; font-size: 14.5px; line-height: 1.5; color: var(--ivl-fg); }
.ivar-legal--inline .ivar-legal__panel { border: 1px solid var(--ivl-line); border-radius: var(--ivl-radius); background: var(--ivl-surface); }
.ivar-legal--inline { display: block; }
.ivar-legal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--ivl-line); }
.ivar-legal__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ivl-fg); text-transform: none; letter-spacing: normal; }
.ivar-legal__title b { color: var(--ivl-accent); }
.ivar-legal__close {
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ivl-line);
    border-radius: var(--ivl-radius);
    background: transparent;
    color: var(--ivl-fg);
    font: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.ivar-legal__close:focus-visible { outline: 2px solid var(--ivl-accent); outline-offset: 2px; }
/* max-content: thân cao cố định thì hàng auto bị bóp, bảng (overflow: hidden) bị cắt thay vì cuộn */
.ivar-legal__body { overflow-y: auto; padding: 16px 18px; display: grid; grid-auto-rows: max-content; gap: 14px; }
.ivar-legal__product { display: grid; gap: 2px; }
.ivar-legal__product strong { font-size: 16px; }
.ivar-legal__product span { font-family: var(--ivl-mono); font-size: 12px; color: var(--ivl-muted); }
.ivar-legal__rows {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    margin: 0;
    border: 1px solid var(--ivl-line);
    border-radius: var(--ivl-radius);
    overflow: hidden;
}
.ivar-legal__rows dt,
.ivar-legal__rows dd { margin: 0; padding: 10px 14px; border-top: 1px solid var(--ivl-line); }
.ivar-legal__rows dt:first-of-type,
.ivar-legal__rows dt:first-of-type + dd { border-top: 0; }
.ivar-legal__rows dt { color: var(--ivl-muted); font-size: 13.5px; font-weight: 400; }
.ivar-legal__rows dd { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.ivar-legal__v--code { font-family: var(--ivl-mono); color: var(--ivl-accent); }
.ivar-legal__rows dd a { color: var(--ivl-accent); text-decoration: underline; }
.ivar-legal__foot { padding: 9px 18px; border-top: 1px solid var(--ivl-line); font-size: 12px; color: var(--ivl-muted); }

/* Trang iframe */
body.ivar-legal-embed { margin: 0; padding: 12px; background: transparent; font-family: var(--ivl-font); }

@media (max-width: 640px) {
    .ivar-legal__dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--ivl-radius); max-height: 88vh; }
    .ivar-legal__rows { grid-template-columns: minmax(0, 1fr); }
    .ivar-legal__rows dd { border-top: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ivar-legal__cta { transition: none; }
    .ivar-legal__cta:hover { transform: none; }
}