/*
 * Orbit storefront stylesheet.
 *
 * Layout and components are Tailwind utilities in the markup; the Tailwind
 * config and the shared component classes (btn, panel, input) live in
 * components/theme-head.html. This file keeps the design tokens, which both
 * layouts share, and the rules that utilities cannot express: seller rich
 * content, the runtime toasts, keyframes, the masked header band and
 * state-driven sibling selectors.
 */

/* Colors are channel triples so Tailwind can apply opacity modifiers. The
   brand colors and the neutrals are HSL: components/theme-head.html derives
   the brand colors and the surfaces from the seller's colors, the surfaces
   taking the hue of the main color. The values here are the ones it derives
   from the default main color, so the page looks the same before and after
   that script runs. The text colors are plain grays that no store changes.
   The status colors are RGB and never follow the seller; each has an ink
   variant raised to the same lightness as --primary-ink, for text on the dark
   surfaces, while the base color stays the fill behind white or dark text. */
:root {
  --primary: 283 100% 47%;
  --primary-ink: 277 100% 73.9%;
  --accent: 290 100% 50%;

  --background: 275 29% 6%;
  --footer: 274 37.1% 4.4%;
  --panel: 274 14% 12.1%;
  --surface: 274 9.7% 16.3%;
  --border: 274 7.1% 20.1%;
  --foreground: 0 0% 96.1%;
  --muted-foreground: 0 0% 74.3%;
  --subtle: 0 0% 58.5%;

  --font-display: Geist, ui-sans-serif, system-ui, sans-serif;

  --success: 65 185 91;
  --danger: 212 50 70;
  --warning: 201 150 42;
  --success-ink: 74 192 98;
  --danger-ink: 255 112 118;
  --warning-ink: 206 155 49;

  /* Text painted over --primary: white by default, black when the seller
     picks a light main color. The flip sits at CIE Lab lightness 60 rather
     than the perceptual midpoint, so a mid-bright color keeps white text. */
  --on-primary: #ffffff;
}

@supports (color: lch(from red l c h)) {
  :root {
    --on-primary: lch(from hsl(var(--primary)) calc((60 - l) * infinity) 0 0);
  }
}

[x-cloak] {
  display: none !important;
}

body.basket-open,
body.modal-open,
body.nav-open {
  overflow: hidden;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

@keyframes opacityIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toasts come from the storefront runtime through iziToast, whose stylesheet
   paints them in light pastels. Here each toast is filled with its type
   color, dark enough for white text; warning keeps a light amber under dark
   text, and info takes the store's main color with --on-primary. The fills
   are darker than the status tokens, which fail contrast under white text.
   The icon and the close button become MDI glyphs so they follow the text
   color instead of iziToast's dark PNGs. The toast clips its children so the
   progress bar follows the rounded corners, which is why its shadow moves
   from iziToast's ::after onto the toast itself. The wrapper in the selector
   outranks iziToast's two-class color rules. */
.iziToast-wrapper .iziToast {
  --toast-fill: hsl(var(--primary));
  --toast-on-fill: var(--on-primary);
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--toast-fill);
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.55);
  font-family: inherit;
}

.iziToast-wrapper .iziToast::after {
  box-shadow: none;
}

.iziToast-wrapper .iziToast.iziToast-color-green {
  --toast-fill: rgb(21 128 61);
  --toast-on-fill: #ffffff;
}

.iziToast-wrapper .iziToast.iziToast-color-red {
  --toast-fill: rgb(185 28 58);
  --toast-on-fill: #ffffff;
}

.iziToast-wrapper .iziToast:is(.iziToast-color-orange, .iziToast-color-yellow) {
  --toast-fill: rgb(217 154 30);
  --toast-on-fill: #1c1204;
}

.iziToast-wrapper .iziToast > .iziToast-body :is(.iziToast-title, .iziToast-message) {
  color: var(--toast-on-fill);
  font-family: inherit;
  font-weight: 600;
}

.iziToast-wrapper .iziToast > .iziToast-body .iziToast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--toast-on-fill);
}

.iziToast-wrapper .iziToast > .iziToast-body .iziToast-icon::before {
  font: normal normal 22px/1 "Material Design Icons";
  content: "\F02FC";
}

.iziToast-wrapper .iziToast > .iziToast-body .iziToast-icon.ico-success::before {
  content: "\F05E0";
}

.iziToast-wrapper .iziToast > .iziToast-body .iziToast-icon.ico-error::before {
  content: "\F0159";
}

.iziToast-wrapper .iziToast > .iziToast-body .iziToast-icon.ico-warning::before {
  content: "\F0026";
}

.iziToast-wrapper .iziToast > .iziToast-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--toast-on-fill);
  opacity: 0.75;
}

.iziToast-wrapper .iziToast > .iziToast-close::before {
  font: normal normal 16px/1 "Material Design Icons";
  content: "\F0156";
}

.iziToast-wrapper .iziToast > .iziToast-close:hover,
.iziToast-wrapper .iziToast > .iziToast-close:focus-visible {
  opacity: 1;
}

.iziToast-wrapper .iziToast > .iziToast-progressbar {
  background: color-mix(in srgb, var(--toast-on-fill) 12%, transparent);
}

.iziToast-wrapper .iziToast > .iziToast-progressbar > div {
  height: 3px;
  border-radius: 0;
  background: color-mix(in srgb, var(--toast-on-fill) 45%, transparent);
}

/* Background band behind the hero: the store image at low opacity or, without
   one, a wash of the main color. The mask dissolves the whole band, particles
   included, into the page background, so no edge is left at its bottom. The
   image and the particles are blurred unless the seller turns header_blur
   off, which renders the band as .headerbg--sharp. */
.headerbg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 480px;
  overflow: hidden;
  --headerbg-blur: 6px;
  -webkit-mask-image: linear-gradient(#000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 35%, transparent 100%);
}

.headerbg > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  filter: blur(var(--headerbg-blur));
  /* A blurred edge fades toward transparent; the overscale pushes it past the
     band's clipped edges. */
  transform: scale(1.1);
}

.headerbg--sharp {
  --headerbg-blur: 0px;
}

/* Full-width pages (the cart) keep a shorter band behind the top bar and the
   page title, and the header leaves room so the panels start where the band
   has faded out; over the image they would lose contrast. */
.headerbg--short {
  height: 340px;
}

.headerbg--plain {
  background:
    radial-gradient(ellipse 70% 90% at 50% 0%, hsl(var(--primary) / 0.48) 0%, hsl(var(--primary) / 0.18) 50%, transparent 100%),
    linear-gradient(hsl(var(--primary) / 0.18), transparent);
}

#tsparticles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* Blurred on the element itself rather than by a backdrop-filter overlay:
     Chrome composites an animated canvas above such an overlay. */
  filter: blur(var(--headerbg-blur));
}

#tsparticles > canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Filled buttons carry a light sheen that crosses them on hover. A card that
   is a link as a whole (group) runs the sheen of the button inside it, and the
   band atop the category panel runs it while the pointer is on the panel. */
:is(.btn-primary, .btn-discord, .category-band)::after {
  content: "";
  position: absolute;
  top: -80px;
  left: -85px;
  width: 50px;
  height: 200px;
  background: #fff;
  opacity: 0.2;
  filter: blur(2px);
  transform: rotate(30deg);
  transition: left 850ms cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}

:is(.btn-primary, .btn-discord):not(:disabled):hover::after,
.group:hover .btn-primary::after,
.group:focus .btn-primary::after,
.category-panel:hover .category-band::after {
  left: 130%;
}

@media (prefers-reduced-motion: reduce) {
  :is(.btn-primary, .btn-discord, .category-band)::after {
    display: none;
  }
}

/* Hero widgets: one line tall and clipped. With a status line present, the
   action waits below it and both move up on hover, so the status fades out
   upward while the action fades in from below. Without one, the action simply
   stays put. */
.hero-widget__status,
.hero-widget__action {
  display: block;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.hero-widget__status[hidden] {
  display: none;
}

.hero-widget__status:not([hidden]) + .hero-widget__action {
  position: absolute;
  inset: 0 0 auto;
  transform: translateY(100%);
  opacity: 0;
}

.hero-widget:hover .hero-widget__status,
.hero-widget:focus-visible .hero-widget__status {
  transform: translateY(-100%);
  opacity: 0;
}

.hero-widget:hover .hero-widget__status:not([hidden]) + .hero-widget__action,
.hero-widget:focus-visible .hero-widget__status:not([hidden]) + .hero-widget__action {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-widget__status,
  .hero-widget__action {
    transition: opacity 0.25s ease-out;
  }

  .hero-widget:hover .hero-widget__status,
  .hero-widget:focus-visible .hero-widget__status,
  .hero-widget__status:not([hidden]) + .hero-widget__action {
    transform: none;
  }
}

.toggle-icon > .mdi::before {
  display: inline-block;
  transition: transform 0.5s;
}

.navigation__item.open .toggle-icon > .mdi::before {
  transform: rotate(-180deg);
}

/* The top donators script hides leftover podium slots with .invisible; here
   that also takes them out of the flow. Every slot sits in a fixed column, so
   the others keep their place. */
.donator-slot.invisible {
  display: none;
}

/* Podium tints: silver and bronze on the top edge and label of the lower
   steps, and first place standing on a solid step in the main color. */
.podium-place--2 { --place: #cbd5e1; }
.podium-place--3 { --place: #fb923c; }

.podium-step {
  border-top: 3px solid var(--place);
  background: hsl(var(--surface));
  color: var(--place);
}

.podium-place--1 .podium-step {
  border-top: 0;
  background: hsl(var(--primary));
  color: var(--on-primary);
}

/* Order page item rows: the table keeps its cells apart by border spacing, so
   the row corners are rounded on the first and last cell. */
.checkout-table {
  border-collapse: separate;
  border-spacing: 0 8px;
}

.checkout-table :is(th, td) {
  background: hsl(var(--surface));
}

.checkout-table tr > :first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.checkout-table tr > :last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Seller rich content. Tailwind preflight strips heading and list styles, so
   editor HTML (pages, product descriptions, payment instructions) gets them
   back here. */
.rich-content {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.rich-content > :first-child {
  margin-top: 0;
}

.rich-content p {
  margin: 0 0 14px;
}

.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4 {
  color: hsl(var(--foreground));
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: pretty;
  margin: 28px 0 10px;
}

.rich-content h1 {
  font-size: 1.6em;
}

/* The seeded store pages use h2 and h3 as section labels: heavy spaced
   capitals, so a section stands out from the running text. */
.rich-content h2,
.rich-content h3 {
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  margin: 32px 0 8px;
}

.rich-content h2 {
  font-size: 1.45em;
}

.rich-content h3 {
  font-size: 1.25em;
}

.rich-content h4 {
  font-size: 1em;
}

.rich-content a {
  color: hsl(var(--primary-ink));
  text-underline-offset: 3px;
}

.rich-content a:hover {
  color: hsl(var(--accent));
  text-decoration: underline;
}

.rich-content b,
.rich-content strong {
  color: hsl(var(--foreground));
  font-weight: 600;
}

.rich-content ul,
.rich-content ol {
  margin: 0 0 14px;
  padding-left: 24px;
}

.rich-content ul {
  list-style: disc outside;
}

.rich-content ol {
  list-style: decimal outside;
}

.rich-content li {
  display: list-item;
}

.rich-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.rich-content iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
}

.rich-content hr {
  margin: 20px 0;
  border-top: 1px solid hsl(var(--border));
}

.rich-content blockquote {
  margin: 0 0 14px;
  padding: 8px 16px;
  border-left: 3px solid hsl(var(--primary));
  border-radius: 0 8px 8px 0;
  background: rgba(0, 0, 0, 0.1);
}

.rich-content pre,
.rich-content code {
  padding: 2px 6px;
  border-radius: 4px;
  background: hsl(var(--background));
  font-size: 0.9em;
}

.rich-content table {
  width: 100%;
  margin-bottom: 14px;
  border-collapse: collapse;
}

.rich-content th,
.rich-content td {
  padding: 6px 8px;
  border: 1px solid hsl(var(--border));
}

/* Content components written by the store editor. Each tone maps to this
   theme's palette; a button or callout without a tone uses the main color.
   --tone fills buttons and marks callouts, --tone-ink colors toned headings. */
.rich-content {
  --tone: hsl(var(--primary));
  --tone-ink: hsl(var(--primary-ink));
  --tone-hover: hsl(var(--primary) / 0.85);
  --on-tone: var(--on-primary);
}

.rich-content [data-tone="success"] {
  --tone: rgb(var(--success));
  --tone-ink: rgb(var(--success-ink));
  --tone-hover: rgb(var(--success) / 0.85);
  --on-tone: hsl(var(--background));
}

.rich-content [data-tone="warning"] {
  --tone: rgb(var(--warning));
  --tone-ink: rgb(var(--warning-ink));
  --tone-hover: rgb(var(--warning) / 0.85);
  --on-tone: hsl(var(--background));
}

.rich-content [data-tone="danger"] {
  --tone: rgb(var(--danger));
  --tone-ink: rgb(var(--danger-ink));
  --tone-hover: rgb(var(--danger) / 0.85);
  --on-tone: hsl(var(--foreground));
}

.rich-content :is(h1, h2, h3)[data-tone] {
  color: var(--tone-ink);
}

.rich-content a[data-variant="button"] {
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin: 4px 8px 4px 0;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: var(--tone);
  color: var(--on-tone);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 0.2s;
}

.rich-content a[data-variant="button"]:hover,
.rich-content a[data-variant="button"]:focus {
  background: var(--tone-hover);
  color: var(--on-tone);
  text-decoration: none;
}

.rich-content a[data-variant="button"]:focus-visible {
  outline: 2px solid var(--tone);
  outline-offset: 2px;
}

.rich-content [data-callout] {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--tone);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.rich-content [data-callout] > :first-child {
  margin-top: 0;
}

.rich-content [data-callout] > :last-child {
  margin-bottom: 0;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}