/* Room for four plans without changing the reading width of blog articles. */
.catalog-shell, #navbar { max-width: 1536px; }
footer > .max-w-7xl { max-width: 1536px; }
.catalog-plan-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.catalog-plan-grid > * { min-width: 0; }
@media (min-width: 768px) { .catalog-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .catalog-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) {
  .catalog-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #dashboard-sidebar { width: 224px; }
  .dashboard-shell { padding-left: 224px; }
  #dashboard-loading { left: 224px; }
  #main-content { padding-left: 24px; padding-right: 24px; }
}
.dashboard-plan-grid { gap: 16px; }
.plan-icon { position: absolute; top: 12px; right: 12px; width: 64px; height: 64px; object-fit: contain; pointer-events: none; user-select: none; }
.dashboard-plan-icon { right: 40px; }
/* Match the visible extent, including hands and props, rather than JPG padding. */
.plan-icon[src$="lite.png"] { transform: scale(.914); }
.plan-icon[src$="starter.png"] { transform: scale(1.014); }
.plan-icon[src$="standart.png"] { transform: scale(.921); }
.plan-icon[src$="pro.png"] { transform: scale(.917); }
/* Gentle emoji drift stays behind the popular card's content. */
.plan-has-emoji { position: relative; isolation: isolate; }
.plan-has-emoji > :not(.plan-emoji-background):not(.plan-icon):not(.absolute) { position: relative; z-index: 1; }
.plan-has-emoji > .plan-icon, .plan-has-emoji > .absolute { z-index: 2; }
.plan-emoji-background { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; user-select: none; }
.plan-floating-emoji { position: absolute; top: 0; left: var(--emoji-x); width: var(--emoji-size); height: 100%; opacity: 0; animation: plan-emoji-rise var(--emoji-duration) linear infinite; animation-delay: var(--emoji-delay); }
.plan-floating-emoji img { display: block; width: 100%; height: auto; transform: rotate(var(--emoji-tilt)); }
.plan-floating-emoji:nth-child(1) { --emoji-x: 12%; --emoji-size: 38px; --emoji-opacity: .14; --emoji-duration: 13s; --emoji-delay: -2s; --emoji-tilt: -12deg; }
.plan-floating-emoji:nth-child(2) { --emoji-x: 67%; --emoji-size: 42px; --emoji-opacity: .11; --emoji-duration: 16s; --emoji-delay: -9s; --emoji-tilt: 10deg; }
.plan-floating-emoji:nth-child(3) { --emoji-x: 38%; --emoji-size: 26px; --emoji-opacity: .08; --emoji-duration: 15s; --emoji-delay: -6s; --emoji-tilt: -8deg; }
.plan-floating-emoji:nth-child(4) { --emoji-x: 80%; --emoji-size: 28px; --emoji-opacity: .09; --emoji-duration: 18s; --emoji-delay: -14s; --emoji-tilt: 12deg; }
.plan-floating-emoji:nth-child(5) { --emoji-x: 57%; --emoji-size: 34px; --emoji-opacity: .12; --emoji-duration: 17s; --emoji-delay: -1s; --emoji-tilt: 9deg; }
.plan-floating-emoji:nth-child(6) { --emoji-x: 25%; --emoji-size: 30px; --emoji-opacity: .08; --emoji-duration: 19s; --emoji-delay: -13s; --emoji-tilt: -10deg; }
.plan-floating-emoji:nth-child(7) { --emoji-x: 45%; --emoji-size: 32px; --emoji-opacity: .14; --emoji-duration: 14s; --emoji-delay: -10s; --emoji-tilt: -7deg; }
.plan-floating-emoji:nth-child(8) { --emoji-x: 6%; --emoji-size: 26px; --emoji-opacity: .10; --emoji-duration: 17s; --emoji-delay: -6s; --emoji-tilt: 8deg; }
.plan-floating-emoji:nth-child(9) { --emoji-x: 74%; --emoji-size: 22px; --emoji-opacity: .07; --emoji-duration: 20s; --emoji-delay: -9s; --emoji-tilt: -12deg; }
@keyframes plan-emoji-rise {
  0% { transform: translateY(110%); opacity: 0; }
  12%, 78% { opacity: var(--emoji-opacity); }
  100% { transform: translateY(-18%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-floating-emoji { animation: none; display: none; }
}
.twitch-configurator { margin: 8px 0 36px; text-align: center; }
.dashboard-configurator-plans { margin-bottom: 8px; }
.dashboard-configurator-plans > .mb-6 { margin-bottom: 0; }
#plans-section:has(+ #twitch-configurator-entry:not([hidden])) { margin-bottom: 12px; }
.service-page section:has(+ .twitch-configurator) { margin-bottom: 12px; }
.twitch-configurator[hidden] { display: none !important; }
.configurator-opener { display: inline-flex; align-items: flex-end; justify-content: center; gap: 8px; max-width: 100%; padding: 8px; border: 0; background: transparent; color: var(--sk-muted, #505a63); font-size: 14px; font-weight: 400; }
.configurator-opener span { min-width: 0; }
.configurator-opener .configurator-link { color: var(--sk-ink, #191c1f); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.configurator-mascot { display: block; width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; border-radius: 8px; }
.twitch-configurator-dialog { width: min(580px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--sk-border, #e2e2e7); border-radius: 20px; color: var(--sk-ink, #191c1f); background: var(--sk-card, #fff); text-align: left; overflow-y: auto; }
.twitch-configurator-dialog::backdrop { background: rgba(25, 28, 31, .45); }
.configurator-card .catalog-dialog-header h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; text-align: left; font-size: 22px; }
.configurator-platform { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.configurator-platform img { width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; }
.configurator-form { padding: 0 24px 24px; }
.configurator-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.configurator-form label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--sk-muted, #505a63); }
.configurator-form input, .configurator-form select { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--sk-border, #e2e2e7); border-radius: 12px; background: var(--sk-card, #fff); color: var(--sk-ink, #191c1f); font-size: 14px; }
.configurator-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.configurator-modes { display: flex; gap: 8px; }
.configurator-modes button { flex: 1; padding: 10px 12px; border: 1px solid var(--sk-border, #e2e2e7); border-radius: 24px; color: var(--sk-ink, #191c1f); background: var(--sk-card, #fff); font-size: 13px; }
.configurator-modes button.selected { background: var(--sk-ink, #191c1f); color: #fff; border-color: var(--sk-ink, #191c1f); }
.configurator-hint { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--sk-muted, #505a63); }
.configurator-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 24px; }
.configurator-price { margin-right: auto; font-size: 22px; white-space: nowrap; }
.configurator-form .cta-button { width: auto; margin: 0; padding: 12px 24px; border-radius: 24px; background: #191c1f; color: #fff; font-size: 14px; font-weight: 600; }
.configurator-error { margin: 16px 0; font-size: 13px; color: #b42318; }
.configurator-form button:disabled, .configurator-form fieldset:disabled { opacity: .6; }
@media (max-width: 480px) { .configurator-form { padding: 0 16px 20px; } .configurator-modes { flex-direction: column; } }
.category-groups { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 48px; }
.category-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.category-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.category-btn .category-icon { display: block; width: 20px; height: 20px; aspect-ratio: 1; object-fit: contain; flex-shrink: 0; }
.product-heading { display: flex; align-items: center; gap: 8px; min-width: 0; }
.product-heading .product-title { min-width: 0; }
.catalog-products .product-list-item { position: relative; }
.catalog-products .product-list-item:hover, .catalog-products .product-list-item:focus-within { z-index: 41; }
.catalog-info { position: relative; display: inline-flex; vertical-align: middle; flex-shrink: 0; }
.catalog-info-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--sk-muted, #505a63); cursor: pointer; }
.catalog-info-button:hover { color: var(--sk-ink, #191c1f); }
.catalog-info-button:focus-visible { outline: 2px solid var(--sk-ink, #191c1f); outline-offset: 2px; }
.catalog-info-tooltip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 40; display: block; width: 280px; max-width: calc(100vw - 40px); padding: 14px 16px; border: 1px solid var(--sk-border, #e2e2e7); border-radius: 12px; background: var(--sk-card, #fff); color: var(--sk-ink, #191c1f); font-size: 13px; font-weight: 400; line-height: 1.6; text-align: left; overflow-wrap: anywhere; }
.catalog-info-tooltip::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.catalog-info-id, .catalog-info-description { display: block; }
.catalog-info-id { color: var(--sk-muted, #505a63); }
.catalog-info-description { margin-top: 6px; white-space: pre-wrap; }
.catalog-info-tooltip [x-cloak], .catalog-info-tooltip[x-cloak] { display: none !important; }
.dashboard-product-row { position: relative; }
.dashboard-product-row > .catalog-info { margin-right: 8px; }
.dashboard-product-row:hover, .dashboard-product-row:focus-within { z-index: 41; }
.dashboard-product-picker .catalog-info-tooltip { left: auto; right: 0; transform: none; }

.catalog-view-all { text-align: center; margin-top: 24px; }
.catalog-view-all:has([hidden]) { display: none; }
.catalog-view-all .cta-button { width: auto; margin: 0; padding: 12px 28px; }
.catalog-view-all [hidden], .catalog-products [hidden], .catalog-dialog-empty[hidden] { display: none !important; }
.catalog-products-dialog { width: min(900px, calc(100% - 32px)); max-width: none; max-height: min(800px, calc(100dvh - 48px)); margin: auto; padding: 0; border: 1px solid var(--sk-border); border-radius: 20px; background: var(--sk-soft); color: var(--sk-ink); overflow: visible; }
.catalog-products-dialog[open] { display: flex; flex-direction: column; }
.catalog-products-dialog::backdrop { background: rgba(25, 28, 31, .45); }
.catalog-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 24px 16px; flex-shrink: 0; }
.catalog-dialog-header h2 { margin: 0; font-size: 22px; font-weight: 700; text-align: left; }
.catalog-dialog-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--sk-ink); cursor: pointer; flex-shrink: 0; }
.catalog-dialog-search { padding: 0 24px 20px; flex-shrink: 0; }
.catalog-dialog-search input { width: 100%; padding: 12px 16px; border: 1px solid var(--sk-border); border-radius: 12px; background: var(--sk-card); font-size: 14px; }
.catalog-dialog-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 0 24px 24px; }
.catalog-products-dialog .product-list-item { width: 100%; min-width: 0; backdrop-filter: none; }
.catalog-products-dialog .category-content-fade { animation: none; transform: none; }
.catalog-products-dialog .catalog-info-tooltip { position: fixed; transform: none; }
.catalog-dialog-empty { padding: 20px 0; margin: 0; color: var(--sk-muted); text-align: center; font-size: 14px; }
@media (max-width: 680px) {
  .catalog-products-dialog { max-height: calc(100dvh - 32px); }
  .catalog-dialog-header { padding: 16px 16px 12px; }
  .catalog-dialog-search { padding: 0 16px 16px; }
  .catalog-dialog-body { padding: 0 16px 16px; }
}