/*
 * designer-manik_huruf.css — the "Manik Huruf Ceria" designer (lib/products/manik_huruf.php): icon-bead 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 (the rl-* classes, loaded on every designer page).
 * Everything here is scoped to .designer-manik_huruf (all designer stylesheets load on every designer page).
 */
.designer-manik_huruf.rl-tabbed .rl-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }


.designer-manik_huruf .mh-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.designer-manik_huruf .mh-icon { position: relative; cursor: pointer; }
.designer-manik_huruf .mh-icon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.designer-manik_huruf .mh-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-manik_huruf .mh-icon i { display: grid; place-items: center; width: 24px; height: 24px; font-style: normal; font-size: 1.1rem; color: var(--ink); }
.designer-manik_huruf .mh-icon small { font-size: .7rem; font-weight: 600; }
.designer-manik_huruf .mh-icon:hover > span { border-color: var(--accent); }
.designer-manik_huruf .mh-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-manik_huruf .mh-icon input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

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