/*
 * designer-tag_tas.css — the "Label Bagasi & Tag Nama" designer (lib/products/tag_tas.php): preset buttons, icon chips,
 * the 3-tab bar and the stage background. Tabs, font cards, warnings, the price breakdown and the colour pop-over come
 * from designer-gantungan_nama.css (rl-* classes). Scoped to .designer-tag_tas (all designer CSS loads on every designer page).
 */
.designer-tag_tas.rl-tabbed .rl-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.designer-tag_tas .tt-presets { border-top: 0; }
.designer-tag_tas .tt-preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
.designer-tag_tas .tt-preset-row .btn.is-on { border-color: var(--accent); background: var(--tint-1); color: var(--accent-text); }

.designer-tag_tas .tt-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.designer-tag_tas .tt-icon { position: relative; cursor: pointer; }
.designer-tag_tas .tt-icon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.designer-tag_tas .tt-icon > span { display: grid; justify-items: center; gap: 2px; min-width: 52px; padding: 6px 4px; border: 1px solid var(--line-2);
    border-radius: 12px; background: var(--surface); color: var(--ink-2); transition: border-color .12s, background .12s; }
.designer-tag_tas .tt-icon i { display: grid; place-items: center; width: 24px; height: 24px; font-style: normal; font-size: 1.1rem; color: var(--ink); }
.designer-tag_tas .tt-icon small { font-size: .7rem; font-weight: 600; }
.designer-tag_tas .tt-icon:hover > span { border-color: var(--accent); }
.designer-tag_tas .tt-icon input:checked + span { border-color: var(--accent); background: var(--tint-1); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-text); }
.designer-tag_tas .tt-icon input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

.designer-tag_tas .designer-canvas { background: radial-gradient(120% 95% at 50% 0%, #ffffff 0%, #eef6ff 55%, #dde9fb 100%); }
@media (max-width: 900px) {
    .designer-tag_tas .designer-canvas { aspect-ratio: 1 / 1; max-height: 58vh; }
}
@media (max-width: 420px) {
    .designer-tag_tas .tt-icon > span { min-width: 46px; }
}