/* ==========================================================================
   s15-contrast.css  (RelaxBox store, Mount2 template 268143)
   Added 2026-10-10 by s15 "store look". Loaded LAST from head.twig, after
   shared.css, dark.css, generic.css and the inline :root colour block.
   Revert: remove the one <link> line for this file from head.twig
   (see scripts/tebex-theme/README.md). Nothing else depends on it.
   NOTE: Tebex renders template CSS through Twig, so never write a curly
   brace followed by a hash or a second curly brace in this file.
   ========================================================================== */

/* ---- 1. Palette: darker panels, brighter text, brand blue pushed apart ---- */
:root {
  --c-bg: #050B10;
  --c-sidebar: #02070B;
  --c-sidebar-rgb: 2, 7, 11;

  --c-block: #08131A;
  --c-block-border: #22404F;
  --c-block-dark: #050C11;
  --c-block-dark-border: #142A36;
  --c-block-inner: #0D1C26;
  --c-block-inner-hover: #163042;

  --c-text: #C4D3DD;             /* was #708490 */
  --c-text-highlighted: #E3EEF5; /* was #ACC7D7 */
  --c-text-light: #FFFFFF;

  /* s15 tokens */
  --s15-text-strong: #EEF3F7;
  --s15-price: #5FD0FF;
  --s15-link: #6FCBFF;
  --s15-buy: #24A3FF;
  --s15-buy-hover: #67C3FF;
  --s15-buy-active: #0089FF;
  --s15-buy-label: #021120;

  /* Tebex legal footer: official variables (font size is locked by Tebex) */
  --tebex-legal-footer-text-color: #EEF3F7;
  --tebex-legal-footer-background-color: #02070B;
  --tebex-legal-footer-border-color: #22404F;
  --tebex-legal-footer-logo-color: #C4D3DD;
}

/* ---- 2. Buy / add-to-basket / checkout: the highest-contrast thing ---- */
.button-primary,
.button-primary:visited {
  background-color: var(--s15-buy);
  color: var(--s15-buy-label);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18) inset, 0 4px 14px -4px rgb(36 163 255 / 0.55);
}
.button-primary i { color: inherit; }
.button-primary:hover,
.button-primary:focus-visible {
  background-color: var(--s15-buy-hover);
  color: var(--s15-buy-label);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35) inset, 0 8px 24px -4px rgb(36 163 255 / 0.75);
  text-decoration: none;
}
.button-primary:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}
.button-primary:active {
  background-color: var(--s15-buy-active);
  color: var(--s15-buy-label);
}

/* ---- 3. Prices ---- */
.package-price,
.actions-price,
.basket .basket-item .price,
.basket-total-amount,
.basket-number {
  color: var(--s15-price);
  font-weight: 700;
}
.package-original-price { color: #FF7A7A; font-weight: 500; }

/* ---- 4. Body text and panels ---- */
.store-product-full .descr,
.community-goal-desc,
.feature-text,
.feature-desc {
  color: var(--c-text);
}

/* Home "Welcome / Refund Policy / Support / Delivery / Privacy" block.
   The store description carries inline blue colours, so !important is needed. */
.text-block {
  background-color: var(--c-sidebar);
  border: 1px solid var(--c-block-border);
  color: var(--s15-text-strong);
}
.text-block span[style],
.text-block strong,
.text-block u {
  color: inherit !important;
}
.text-block h1, .text-block h2, .text-block h3 {
  color: #FFFFFF;
}
.text-block h3 { font-size: 18px; }
.text-block h4, .text-block p, .text-block li {
  color: var(--s15-text-strong);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
}
.text-block a,
.text-block a span[style],
.text-block a strong {
  color: var(--s15-link) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-block a:hover,
.text-block a:hover span[style] {
  color: #FFFFFF !important;
}

/* ---- 5. Theme footer ---- */
.footer {
  background-color: var(--c-sidebar);
  border: 1px solid var(--c-block-border);
}
.footer .disclaimer {
  color: var(--s15-text-strong);
  font-size: 14px;
  line-height: 1.5;
}
.footer .payment-method { color: var(--c-text); }
.footer .payment-method:hover { color: #FFFFFF; }

/* ---- 6. Home category tiles: bigger icons, category-colour glow ---- */
.home-grid-item { --cat: #5FD0FF; }
.home-grid-item[href$="/season-6"]      { --cat: #FFB627; }
.home-grid-item[href$="/2680695"]       { --cat: #FF9A3C; }
.home-grid-item[href$="/rank-upgrades"] { --cat: #C86BFF; }
.home-grid-item[href$="/gems"]          { --cat: #2EE67A; }
.home-grid-item[href$="/boosts"]        { --cat: #D8E6FF; }
.home-grid-item[href$="/keys"]          { --cat: #FFD23F; }
.home-grid-item[href$="/cosmetics-2"]   { --cat: #7AE8FF; }
.home-grid-item[href$="/potions"]       { --cat: #FF6B8B; }

.home-grid-item {
  height: 112px;              /* was 96px: room for the 1.5x icon */
  border-color: var(--c-block-border);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}
.home-grid-item:hover,
.home-grid-item:focus-visible {
  border-color: var(--cat);
  box-shadow: 0 0 0 1px var(--cat), 0 10px 28px -8px var(--cat);
}
.home-category-title {
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 12px rgb(0 0 0 / 0.75);
}
.home-category-img {
  /* was max-width 100px, scale(0.9), pushed 20% below / 10% left of the tile
     (about 68px showed). Now 104px, fully inside the tile. */
  max-width: 104px;
  width: 104px;
  height: 104px;
  object-fit: contain;
  left: -4px;
  bottom: auto;
  top: 50%;
  margin-top: -52px;
  transform: none;
  rotate: 8deg;
  scale: 1;
  filter: drop-shadow(0 4px 10px rgb(0 0 0 / 0.6));
  transition: rotate 0.45s ease, scale 0.45s ease, filter 0.3s ease;
}
.home-grid-item:hover .home-category-img,
.home-grid-item:focus-visible .home-category-img {
  transform: none;
  rotate: 0deg;
  scale: 1.08;
  filter: drop-shadow(0 0 14px var(--cat)) drop-shadow(0 4px 10px rgb(0 0 0 / 0.5));
}

/* Motion only when the visitor has not asked for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .home-grid-item {
    animation: s15-tile-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease, translate 0.3s ease;
  }
  .home-grid-item:nth-child(2)  { animation-delay: 0.06s; }
  .home-grid-item:nth-child(3)  { animation-delay: 0.12s; }
  .home-grid-item:nth-child(4)  { animation-delay: 0.18s; }
  .home-grid-item:nth-child(5)  { animation-delay: 0.24s; }
  .home-grid-item:nth-child(6)  { animation-delay: 0.30s; }
  .home-grid-item:nth-child(7)  { animation-delay: 0.36s; }
  .home-grid-item:nth-child(8)  { animation-delay: 0.42s; }
  .home-grid-item:nth-child(9)  { animation-delay: 0.48s; }
  .home-grid-item:nth-child(n+10) { animation-delay: 0.54s; }
  .home-grid-item:hover,
  .home-grid-item:focus-visible { translate: 0 -4px; }

  .home-category-img { animation: s15-float 4.8s ease-in-out infinite; }
  .home-grid-item:nth-child(2n) .home-category-img { animation-delay: -1.2s; }
  .home-grid-item:nth-child(3n) .home-category-img { animation-delay: -2.4s; }
  .home-grid-item:nth-child(4n) .home-category-img { animation-delay: -3.6s; }

  .button-primary { transition: background-color 0.2s ease, box-shadow 0.2s ease, translate 0.15s ease; }
  .button-primary:hover { translate: 0 -1px; }
  .button-primary:active { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-grid-item,
  .home-category-img,
  .home-grid-item .home-category-title i,
  .button-primary {
    animation: none !important;
    transition: none !important;
    translate: none !important;
  }
  .home-grid-item:hover .home-category-title i { transform: none; }
}
@keyframes s15-tile-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes s15-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}