/* ══════════════════════════════════════════════════════
   Category display variants — tiles / circles / chips / cards
   Colors derive from --app-color set at :root in header.
   ══════════════════════════════════════════════════════ */
:root { --cat-color: var(--app-color, #6366f1); }

/* ══════ TILES (grid squares) ══════ */
.cat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 4px 0; }
@media (max-width: 991px) { .cat-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .cat-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.cat-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px 8px; background: #fff; border: 1px solid #eef2ff; border-radius: 14px; text-decoration: none; transition: all .2s ease; min-height: 100px; }
.cat-tile:hover { transform: translateY(-3px); border-color: var(--cat-color); box-shadow: 0 8px 22px rgba(0,0,0,.08); text-decoration: none; }
.cat-tile-icon { width: 48px; height: 48px; border-radius: 10px; margin-bottom: 8px; object-fit: cover; background: linear-gradient(135deg,#f3f4f6,#e5e7eb); }
.cat-tile-name { font-size: 12px; font-weight: 600; color: #374151; line-height: 1.3; }
.cat-tile:hover .cat-tile-name { color: var(--cat-color); }

/* ══════ CIRCLES ══════ */
.cat-circles { display: flex; gap: 14px; padding: 8px 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cat-circles::-webkit-scrollbar { display: none; }
.cat-circle-item { flex: 0 0 auto; text-align: center; text-decoration: none; min-width: 78px; transition: transform .15s ease; }
.cat-circle-item:hover { transform: translateY(-2px); text-decoration: none; }
.cat-circle-wrap { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 8px; padding: 3px; background: linear-gradient(135deg, var(--cat-color), color-mix(in srgb, var(--cat-color) 60%, #000)); box-shadow: 0 6px 14px rgba(0,0,0,.12); position: relative; overflow: hidden; }
.cat-circle-wrap::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.cat-circle-icon { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.cat-circle-name { font-size: 11px; font-weight: 600; color: #4b5563; line-height: 1.3; }
.cat-circle-item:hover .cat-circle-name { color: var(--cat-color); }

/* ══════ CHIPS (pill buttons) ══════ */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 4px; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; font-size: 13px; font-weight: 600; color: #4b5563; text-decoration: none; transition: all .15s ease; }
.cat-chip:hover { background: var(--cat-color); color: #fff; border-color: transparent; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.cat-chip-icon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.cat-chip:hover .cat-chip-icon { filter: brightness(1.1); }

/* ══════ CARDS (big colorful cards) ══════ */
.cat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 4px 0; }
@media (max-width: 991px) { .cat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .cat-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
.cat-card { position: relative; display: flex; align-items: flex-end; height: 140px; border-radius: 14px; overflow: hidden; padding: 14px; text-decoration: none; color: #fff; transition: all .25s ease; background-color: var(--cat-color); background-size: cover; background-position: center; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.18); text-decoration: none; color: #fff; }
.cat-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.65) 100%); z-index: 1; }
.cat-card-name { position: relative; z-index: 2; font-size: 15px; font-weight: 800; line-height: 1.2; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.cat-card-arrow { position: absolute; top: 14px; inset-inline-end: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.25); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 2; color: #fff; font-size: 14px; font-weight: 700; }

/* ══════ DEFAULT SQUARES (traditional grid) ══════ */
.cat-squares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 4px 0; }
@media (max-width: 991px) { .cat-squares { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .cat-squares { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.cat-square { display: block; text-decoration: none; text-align: center; transition: transform .2s ease; }
.cat-square:hover { text-decoration: none; transform: translateY(-3px); }
.cat-square-media { aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; margin-bottom: 8px; background: linear-gradient(135deg,#f3f4f6,#e5e7eb); box-shadow: 0 4px 14px rgba(0,0,0,.06); transition: box-shadow .2s ease; }
.cat-square:hover .cat-square-media { box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.cat-square-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.cat-square:hover .cat-square-media img { transform: scale(1.08); }
.cat-square-name { font-size: 13px; font-weight: 700; color: #374151; display: block; line-height: 1.3; }
.cat-square:hover .cat-square-name { color: var(--cat-color); }

/* ══════ STRIPS (horizontal draggable) ══════ */
.cat-strips-wrap { position: relative; padding: 4px 0; }
.cat-strips { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; user-select: none; }
.cat-strips::-webkit-scrollbar { display: none; }
.cat-strips.is-dragging { scroll-behavior: auto; }
.cat-strips.is-dragging a { pointer-events: none; }
.cat-strip { flex: 0 0 240px; display: flex; align-items: center; gap: 12px; padding: 10px; background: #fff; border-radius: 14px; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.06); transition: all .2s ease; border: 1px solid transparent; }
.cat-strip:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.12); border-color: var(--cat-color); }
.cat-strip-thumb { width: 60px; height: 60px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg,#f3f4f6,#e5e7eb); }
.cat-strip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cat-strip-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cat-strip-name { font-size: 14px; font-weight: 700; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-strip-arrow { color: var(--cat-color); font-size: 20px; font-weight: 800; opacity: .5; transition: all .2s ease; flex-shrink: 0; }
.cat-strip:hover .cat-strip-arrow { opacity: 1; transform: translateX(-3px); }
[dir="ltr"] .cat-strip:hover .cat-strip-arrow { transform: translateX(3px); }
@media (max-width: 575px) { .cat-strip { flex: 0 0 200px; } }