/* Right sidebar of the guides / category page. Sizes come from typography.css, colours from the logo (--brand). */
.bside { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 22px; }

.bside-card { background: #fff; border: 1px solid #eceef5; border-radius: 20px; padding: 22px 22px 20px; box-shadow: 0 1px 2px rgba(20, 23, 43, .04), 0 10px 30px rgba(20, 23, 43, .05); }
:root body .bside-title { margin: 0 0 16px; padding-bottom: 12px; position: relative; font-size: var(--fs-h4); font-weight: var(--fw-heading); line-height: 1.25; color: #14172b; }
.bside-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand, #d41478), #ff6aa2); }

/* search */
.bside-search { position: relative; display: flex; }
.bside-search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8a90a8; pointer-events: none; }
.bside-search input { flex: 1; min-width: 0; height: 46px; padding: 0 56px 0 40px; border: 1px solid #e3e6f0; border-radius: 12px; background: #f8f9fc; color: #14172b; font-size: var(--fs-body); outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.bside-search input:focus { background: #fff; border-color: var(--brand, #d41478); box-shadow: 0 0 0 4px rgba(var(--brand-rgb, 212, 20, 120), .12); }
.bside-search button { position: absolute; right: 5px; top: 5px; width: 36px; height: 36px; border: 0; border-radius: 9px; background: linear-gradient(135deg, var(--brand, #d41478), #f0588b); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(var(--brand-rgb, 212, 20, 120), .3); transition: transform .2s ease; }
.bside-search button:hover { transform: translateX(2px); }

/* categories */
.bside-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
:root body .bside-cats a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; color: #3b4160; font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 1.3; transition: background .2s ease, color .2s ease, transform .2s ease; }
.bside-cats a em { flex: none; min-width: 34px; text-align: center; padding: 2px 9px; border-radius: 999px; background: #f0f2f8; color: #6b7190; font-style: normal; font-size: var(--fs-small); font-weight: 600; transition: all .2s ease; }
:root body .bside-cats a:hover { background: #f6f7fb; color: var(--brand, #d41478); transform: translateX(3px); }
:root body .bside-cats a.active { background: var(--brand, #d41478); color: #fff; box-shadow: 0 8px 18px rgba(var(--brand-rgb, 212, 20, 120), .28); }
.bside-cats a.active em { background: rgba(255, 255, 255, .25); color: #fff; }
:root body .bside-cats a.active:hover { transform: none; color: #fff; background: var(--brand, #d41478); }

@media (max-width: 991px) { .bside { position: static; margin-top: 12px; } }