/* Brand gradients A–Z (includes/brands-az.php). */

.az-tools { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 18px; }
.az-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 760px; }
.az-letters a, .az-letters span {
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px;
	font-size: 14px; font-weight: 700; text-decoration: none !important;
}
.az-letters a { background: rgba(255, 255, 255, .8); color: #111 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.az-letters a:hover { background: #111; color: #fff !important; }
.az-letters span { color: rgba(17, 17, 17, .25); }
#az-filter { width: min(360px, 100%); border-radius: 999px !important; padding: 11px 18px !important; background: #fff !important; text-align: center; }

.az-list { margin-top: 12px; }
.az-sec { padding: 28px 0 8px; border-top: 1px solid #F0F0F0; scroll-margin-top: 110px; }
.az-sec:first-child { border-top: 0; }
.az-sec[hidden], .az-brand[hidden], .az-none[hidden] { display: none !important; }
.az-letter { font-size: 34px !important; font-weight: 800 !important; letter-spacing: -.03em !important; margin: 0 0 14px !important; color: #111 !important; }
.az-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.az-brand { padding: 14px 16px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 18px; background: #fff; }
.az-brand h3 { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 8px !important; color: #111 !important; }
.az-brand ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.az-brand li { margin: 0; }
.az-brand a {
	display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px;
	background: #F6F6F8; font-size: 12.5px; font-weight: 600; color: #333 !important; text-decoration: none !important;
}
.az-brand a:hover { background: #EDEDF2; color: #111 !important; }
.az-brand a i { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.az-none { text-align: center; padding: 40px 0; color: #6E6E78; }

html[data-theme="dark"] .az-letters a { background: rgba(30, 30, 40, .8); color: #EDEDF2 !important; }
html[data-theme="dark"] .az-letters a:hover { background: #fff; color: #111 !important; }
html[data-theme="dark"] .az-letters span { color: rgba(255, 255, 255, .22); }
html[data-theme="dark"] #az-filter { background: #15151D !important; }
html[data-theme="dark"] .az-sec { border-color: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .az-letter, html[data-theme="dark"] .az-brand h3 { color: #EDEDF2 !important; }
html[data-theme="dark"] .az-brand { background: #15151D; border-color: rgba(255, 255, 255, .09); }
html[data-theme="dark"] .az-brand a { background: #1D1D27; color: #D4D4DE !important; }
html[data-theme="dark"] .az-brand a:hover { background: #262633; color: #fff !important; }
html[data-theme="dark"] .az-none { color: #9393A3; }