@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
@import url("engine.css");

:root {
  --wa-font-sans: 'Figtree', sans-serif;
}

:not(:defined) {
  visibility: hidden;
}

.wa-light a.wa-dark {
  display: none;
}

.wa-dark a.wa-light {
  display: none;
}

.wa-light wa-page::part(main-content) {
  background-color: var(--wa-color-surface-default);
}

.wa-light [slot="navigation-header"],
.wa-light [slot="navigation"],
.wa-light [slot="navigation-footer"],
html.wa-light wa-page {
  background-color: var(--wa-color-neutral-95);
}

.topbar {
  margin: var(--wa-space-s);
  padding: var(--wa-space-s);
  border-radius: var(--wa-border-radius-l);
  position: sticky;
  top: var(--wa-space-s);
  z-index: 50;
}

.topbar-2 {
  padding: var(--wa-space-s) var(--wa-space-m);
  border-radius: var(--wa-border-radius-m);
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  font-size: var(--wa-font-size-s);
}

wa-page {
  --menu-width: 21rem;
}

[slot="navigation-header"],
[slot="navigation"],
[slot="navigation-footer"] {
  width: 100%;
  background-color: #18181B;
  flex-shrink: 0;
}

[slot="navigation"] wa-details::part(base),
[slot="navigation"] wa-details::part(header) {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

[slot="navigation"] wa-details::part(content) {
  padding: var(--wa-space-l) 0 !important;
}

[slot="navigation"] wa-details::part(summary-icon) {
  display: none !important;
}

wa-page::part(menu),
wa-page::part(navigation) {
  overflow-y: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

[slot="navigation"] {
  flex-grow: 1 !important;
  overflow-y: auto !important;
  flex-shrink: 1 !important;
}

[slot="navigation-header"] {
  position: relative !important;
  z-index: 10 !important;
}

.main-footer-internal {
  padding: var(--wa-space-l) 0;
}

html, body, wa-page {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden !important;
  background-color: #18181B;
}

wa-page::part(main) {
  overflow-y: hidden !important; 
  padding-bottom: 0 !important;
  height: 100vh;
  display: flex !important;
  flex-direction: column !important;
}

wa-page::part(main-content) {
  background-color: #09090B;
  border-radius: var(--wa-border-radius-l);
  margin: var(--wa-space-m) var(--wa-space-m) var(--wa-space-m) 0 !important; 
  flex: 1;
  min-height: 0 !important; 
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.my-custom-scroller {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0 var(--wa-space-l);
}

.my-custom-scroller::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

* {
  scrollbar-width: none !important;
}
[slot="main-header"] {
  background-color: color-mix(in rgba,#18181B 75%,transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--wa-border-radius-l);
  margin: var(--wa-space-s);
  padding: var(--wa-space-m) var(--wa-space-l);
  z-index: 50;
}

[slot="navigation-header"] img {
  max-height: 50px;
  object-fit: cover;
}

wa-button.nav-item {
  width: 100%;
}

wa-button.nav-item::part(base) {
  justify-content: flex-start;
}

wa-button.nav-item::part(label) {
  flex: 1;
  text-align: left;
}

.shortstory-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.shortstory-grid wa-card, 
.shortstory-grid wa-card::part(base) {
  background-color: rgba(23, 23, 26, 0.5);
  --wa-panel-background-color: rgba(23, 23, 26, 0.5);
  border-color: rgba(35, 35, 39, 0.7);
}

.wa-light .shortstory-grid wa-card, 
.wa-light .shortstory-grid wa-card::part(base) {
  background-color: transparent;
  --wa-panel-background-color: transparent;
  border-color: var(--wa-color-surface-border);
}

.shortstory-card {
  width: 100%;
  position: relative;
  --spacing: var(--wa-space-s);
}

.shortstory-card wa-rating, 
.shortstory-card wa-rating::part(base) {
  --symbol-size: 12px !important;
  font-size: 12px !important;
}

.link-category {
  font-size: 0 !important;
}
.link-category a:first-of-type {
  font-size: var(--wa-font-size-s) !important;
}
.link-category a:nth-of-type(n+2) {
  display: none !important;
}

.shortstory-image-wrapper {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--wa-border-radius-m);
}

.shortstory-meta-overlay {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, calc(-100% + 6px));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  gap: var(--wa-space-xs);
  padding: 0 var(--wa-space-m) var(--wa-space-s) var(--wa-space-m);
  background-color: #101012;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0 0 var(--wa-border-radius-m) var(--wa-border-radius-m);
  width: max-content;
  max-width: 95%;
  z-index: 10;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

.wa-light .shortstory-meta-overlay {
  background-color: var(--wa-color-surface-default);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.shortstory-card:hover .shortstory-meta-overlay,
.shortstory-image-wrapper:focus-within .shortstory-meta-overlay {
  transform: translate(-50%, 0);
}

.shortstory-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.shortstory-card h3 { margin-bottom: 0;}

.shortstory-card.is-premium {
  position: relative;
  z-index: 1;
}

.shortstory-card.is-premium::part(base) {
  border-color: transparent !important;
}

@property --premium-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.shortstory-card.is-premium::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: var(--wa-border-radius-m);
  padding: 1px;
  background: conic-gradient(
      from var(--premium-angle), 
      rgba(35, 35, 39, 0.7) 0deg, 
      rgba(35, 35, 39, 0.7) 120deg, 
      var(--wa-color-warning-50) 180deg, 
      rgba(35, 35, 39, 0.7) 240deg, 
      rgba(35, 35, 39, 0.7) 360deg
  );
  
  animation: premiumSpin 2s linear infinite;
  
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  
  z-index: -1;
  pointer-events: none;
}

.wa-light .shortstory-card.is-premium::before {
  background: conic-gradient(
      from var(--premium-angle), 
      var(--wa-color-surface-border) 0deg, 
      var(--wa-color-surface-border) 120deg, 
      var(--wa-color-warning-50) 180deg, 
      var(--wa-color-surface-border) 240deg, 
      var(--wa-color-surface-border) 360deg
  );
}

@keyframes premiumSpin {
  0%   { --premium-angle: 0deg; }
  100% { --premium-angle: 360deg; }
}

.card-media-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
}

.premium-badge {
  position: absolute;
  top: var(--wa-space-s);
  right: var(--wa-space-s);
  z-index: 2;
  box-shadow: var(--wa-shadow-l);
}

.disc-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  color: white;
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 16px;
  font-size: 2.5rem;
  backdrop-filter: blur(4px);
  z-index: 5;
}

.link-category a {
  text-decoration: none;
}

.link-category a:not(:first-child) {
  margin-left: var(--wa-space-s);
  color: var(--wa-color-yellow-80);
}

.link-category a:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: var(--wa-font-size-s);
  height: var(--wa-font-size-s);
  margin-right: var(--wa-space-2xs);
  vertical-align: calc(var(--wa-space-3xs) * -1);
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.4 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.4 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}

.text-muted {
  color: var(--wa-color-gray-60);
}

.wa-color-danger {
  color: var(--wa-color-red-60);
}

.wa-color-brand {
  color: var(--wa-color-blue-70);
}

wa-button.facebook::part(base) {
	background-color: #1877F2;
	border-color: #1877F2;
	color: #ffffff;
}
wa-button.facebook::part(base):hover {
	background-color: #166fe5;
	border-color: #166fe5;
}
wa-button.google::part(base) {
	background-color: #DB4437;
	border-color: #DB4437;
	color: #ffffff;
}
wa-button.google::part(base):hover {
	background-color: #c5392d;
	border-color: #c5392d;
}

.img-bg {
	position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  background-size: cover;
  background-position: center;
  filter: blur(25px) brightness(0.35);
  z-index: 0;
}

.img-full {
  margin-right: 0.5rem;
  border-radius: var(--wa-border-radius-l) !important;
  max-width: 600px;
}

.fullstory-text {
  color: #FFFFFF !important;
}

wa-copy-button::part(button) {
  width: var(--wa-input-height-large, 3rem);
  height: var(--wa-input-height-large, 3rem);
  font-size: 1.25rem;
  border: 1px solid var(--wa-input-border-color);

}

.related-carousel {
	--aspect-ratio: auto; 
	--slides-per-page: 2;
	--slide-gap: var(--wa-space-xl);
	margin: 1rem 0;
}

@media (max-width: 480px) { .related-carousel { --slides-per-page: 1; } }
@media (min-width: 768px) { .related-carousel { --slides-per-page: 3; } }
@media (min-width: 992px) { .related-carousel { --slides-per-page: 4; } }

.top-carousel {
	--aspect-ratio: auto; 
}

[slot="main-footer"] a {
	text-decoration: none;
	color: #FFF;
  font-weight: 500;
}

[slot="main-footer"] a:hover {
	text-decoration: underline;
}

.info-banner {
	padding: var(--wa-space-l);
	background: radial-gradient(circle at center, var(--wa-color-brand-fill-quiet), var(--wa-color-brand-fill-normal));
}

.wa-text-center {
  text-align: center;
}

div[id^="paypal-button-container"] {
  color-scheme: light !important;
  background: transparent !important;
}

wa-avatar {
  background-color: transparent !important;
  box-shadow: none !important;
}

.topbar wa-details {
  display: none !important;
}

[slot="navigation-footer"] .wa-cluster wa-button:last-of-type {
  display: none !important;
}

[slot="navigation-footer"] .quick-actions-cluster {
  gap: var(--wa-space-3xs) !important;
}

.topbar .quick-actions-cluster {
  gap: var(--wa-space-xs) !important;
}

.category-grid {
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

[slot="navigation"] .category-grid wa-button {
  position: relative;
  width: 100%;
}
[slot="navigation"] .category-grid wa-badge {
  position: absolute;
  right: var(--wa-space-s);
  top: 30%;
  transform: translateY(-50%);
  pointer-events: none;
}

.placeholder {
  background-color: transparent;
  border: dashed var(--wa-border-width-m) var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  min-block-size: 120px;
}