/*
 * designer-gantungan_balon.css — the "Gantungan Nama Balon" designer (partials/designers/gantungan_balon.php,
 * assets/js/designer-gantungan_balon.js). Scoped to .designer-gantungan_balon; the tabs, font cards, colour
 * pop-over, hint chip, warnings and price line are the shared rl-* styles of designer-gantungan_nama.css.
 */
.designer-gantungan_balon.rl-tabbed .gb-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.designer-gantungan_balon .gb-icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.designer-gantungan_balon .gb-icon > span { padding: 8px 4px 6px; gap: 2px; }
.designer-gantungan_balon .gb-icon canvas { width: 30px; height: 30px; color: #e0559a; }
.designer-gantungan_balon .gb-icon-none { display: grid; place-items: center; width: 30px; height: 30px; font-style: normal; font-size: 1.3rem; color: var(--muted); }
.designer-gantungan_balon .gb-icon small { font-size: .74rem; }
.designer-gantungan_balon .gb-note { align-items: flex-start; }
.designer-gantungan_balon .gb-note .icon { margin-top: 2px; }
.designer-gantungan_balon [data-gb-two][hidden], .designer-gantungan_balon [data-gb-one][hidden],
.designer-gantungan_balon [data-gb-outline][hidden], .designer-gantungan_balon [data-gb-bare][hidden] { display: none; }

/* a soft pink-lavender studio behind the glossy balloons */
.designer-gantungan_balon .designer-canvas { background: radial-gradient(120% 95% at 50% 0%, #ffffff 0%, #fbf3fa 52%, #efe3f6 100%); }

@media (max-width: 900px) {
    .designer-gantungan_balon .designer-canvas { aspect-ratio: 1 / 1; max-height: 58vh; }
    .designer-gantungan_balon .designer-buy { position: sticky; bottom: 0; z-index: 5; background: var(--surface); padding: 0 8px 12px; margin: 0 -8px;
        box-shadow: 0 -12px 18px -14px rgba(40, 20, 80, .35); }
}