/*! IMPORTANT :: GOS Owner & Overrides classes (depends on Template styles.css) */

/* ==================================================
 * GOS Page Loader (owner)
 * - No wave text (static)
 * - Background shows through + blur (glass overlay)
 * - Curtain animation kept but NON coprente
 * ================================================== */

:root{
  /* Material-like easing */
  --gos-ease-material: cubic-bezier(.4,0,.2,1);
  --gos-ease-material-emph: cubic-bezier(.2,0,0,1);

  /* Colors */
  --gos-loader-anth: #1f1f1f;

  /* Loader overlay tuning */
  --gos-loader-overlay: rgba(255,255,255,.35);
  --gos-loader-overlay-dark: rgba(0,0,0,.35);

  /* Curtain tuning (light layer used only for reveal) */
  --gos-loader-curtain: rgba(255,255,255,.15);
  --gos-loader-curtain-dark: rgba(0,0,0,.18);

  /* Glass box tuning */
  --gos-loader-box-bg: rgba(255,255,255,.75);
  --gos-loader-box-bg-dark: rgba(15,15,15,.75);
  --gos-loader-box-border: rgba(0,0,0,.10);
  --gos-loader-box-border-dark: rgba(255,255,255,.14);

  /* Blur intensity */
  --gos-loader-blur: 10px;
  --gos-loader-box-blur: 12px;
  
  /* Scrollbar Color */
/*  --scrollbar-thumb-color: rgba(--color-red-50);*/
}

/* lock scroll while loader active */
html.gos-loading,
body.gos-loading{
  overflow: hidden;
}

html.gos-loading, body.gos-loading { overflow: hidden; }

/* ensure loader always on top */
.gos-page-loader { z-index: 99999; }

/* page demo layout background */
.page-bg{
  min-height: 100vh;
}

/* Overlay */
.gos-page-loader{
  position: fixed;
  inset: 0;
  z-index: 99999;

  /* real centering */
  display: grid;
  place-items: center;

  /* show page beneath + blur */
  background: var(--gos-loader-overlay);
  backdrop-filter: blur(var(--gos-loader-blur));
  -webkit-backdrop-filter: blur(var(--gos-loader-blur));

  transition: opacity .22s var(--gos-ease-material), visibility .22s var(--gos-ease-material);
  opacity: 1;
  visibility: visible;
}

/* dark mode overlay */
.dark .gos-page-loader{
  background: var(--gos-loader-overlay-dark);
}

.gos-page-loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Curtain layer: reveal verticale (top->bottom)
 * NOTA: ora è molto leggero, non blocca la percezione del contenuto sotto
 */
.gos-page-loader__curtain{
  position: absolute;
  inset: 0;
  background: var(--gos-loader-curtain);
  transform-origin: top;
  transform: scaleY(1);
  will-change: transform;
  z-index: 0;
}

.dark .gos-page-loader__curtain{
  background: var(--gos-loader-curtain-dark);
}

/* animation states */
.gos-page-loader.is-enter .gos-page-loader__curtain{
  animation: gos-curtain-open .62s var(--gos-ease-material-emph) forwards;
}
.gos-page-loader.is-leave .gos-page-loader__curtain{
  transform: scaleY(0);
  transform-origin: bottom;
  animation: gos-curtain-close .52s var(--gos-ease-material-emph) forwards;
}

@keyframes gos-curtain-open{
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
@keyframes gos-curtain-close{
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

/* Center wrapper */
.gos-page-loader__center{
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  text-align: center;
}

/* Logo */
.gos-page-loader__logo{
  max-width: 84px;
  height: auto;
  opacity: .88;
  display: block;
}

/* Glass box */
.gos-page-loader__box{
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: .75rem;

  padding: .9rem 1.1rem;
  border-radius: .95rem;

  background: var(--gos-loader-box-bg);
  border: 1px solid var(--gos-loader-box-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);

  backdrop-filter: blur(var(--gos-loader-box-blur));
  -webkit-backdrop-filter: blur(var(--gos-loader-box-blur));
}

.dark .gos-page-loader__box{
  background: var(--gos-loader-box-bg-dark);
  border-color: var(--gos-loader-box-border-dark);
}

/* Text (STATIC: no wave) */
.gos-page-loader__text{
  font-size: .95rem;
  font-weight: 600;
  color: var(--gos-loader-anth);
  line-height: 1.1;
}
.dark .gos-page-loader__text{
  color: #e5e5e5;
}

/* Optional subtle “working” feedback: animated dots (NOT wave) */
.gos-page-loader__text::after{
  content: "…";
  display: inline-block;
  width: 1.2em;
  overflow: hidden;
  vertical-align: bottom;
  animation: gos-dots 1.1s steps(4,end) infinite;
}
/*
@keyframes gos-dots{
  0%   { width: 0; }
  100% { width: 1.2em; }
}
*/

/* ==================================================
 * GOS Page Loader – Orbit (4-dot sync)
 * ================================================== */

.gos-page-loader__spinner{
  position: relative;
  height: 24px;
  width: 24px;

  color: var(--gos-loader-anth);

  animation: gos-orbit-rot 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}

.dark .gos-page-loader__spinner{
  color:#e5e5e5;
}

@keyframes gos-orbit-rot{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* DOT LEFT -> RIGHT */
.gos-page-loader__spinner::before{
  content:"";
  position:absolute;
  top:0; left:0; bottom:0; right:auto;
  margin:auto;
  width:4px; height:4px;
  background: currentColor;
  border-radius:50%;
  animation: gos-orbit-x 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@keyframes gos-orbit-x{
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(20px, 0, 0) scale(.6); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* DOT RIGHT -> LEFT */
.gos-page-loader__spinner::after{
  content:"";
  position:absolute;
  top:0; left:auto; bottom:0; right:0;
  margin:auto;
  width:4px; height:4px;
  background: currentColor;
  border-radius:50%;
  animation: gos-orbit-x-rev 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@keyframes gos-orbit-x-rev{
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-20px, 0, 0) scale(.6); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* wrapper for vertical dots */
.gos-page-loader__spinner > span{
  position:absolute;
  inset:0;
  display:block;
  height:24px;
  width:24px;
}

/* DOT TOP -> DOWN */
.gos-page-loader__spinner > span::before{
  content:"";
  position:absolute;
  top:0; left:0; bottom:auto; right:0;
  margin:auto;
  width:4px; height:4px;
  background: currentColor;
  border-radius:50%;
  animation: gos-orbit-y 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@keyframes gos-orbit-y{
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(0, 20px, 0) scale(.6); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* DOT BOTTOM -> UP */
.gos-page-loader__spinner > span::after{
  content:"";
  position:absolute;
  top:auto; left:0; bottom:0; right:0;
  margin:auto;
  width:4px; height:4px;
  background: currentColor;
  border-radius:50%;
  animation: gos-orbit-y-rev 2s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
}
@keyframes gos-orbit-y-rev{
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(0, -20px, 0) scale(.6); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ==================================================
 * Reduced motion
 * ================================================== */
@media (prefers-reduced-motion: reduce){
  .gos-page-loader__curtain{ animation:none !important; transform: scaleY(0); }
  .gos-page-loader.is-leave .gos-page-loader__curtain{ transform: scaleY(1); }

  .gos-page-loader__spinner,
  .gos-page-loader__spinner::before,
  .gos-page-loader__spinner::after,
  .gos-page-loader__spinner > span::before,
  .gos-page-loader__spinner > span::after{
    animation: none !important;
  }

  .gos-page-loader__text::after{
    animation: none !important;
    width: auto;
  }
}

/* ==================================================
 * GOS Button Spinner (owner)
 * ================================================== */

.gos-btn--loading{
  pointer-events: none;
  opacity: .85;
}

.gos-btn-spinner{
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  animation: gos-spin 0.75s linear infinite;
}

@keyframes gos-spin{
  to { transform: rotate(360deg); }
}

/* ==================================================
 * GOS Toast Progress (override)
 * ================================================== */

.kt-toast {
  pointer-events: auto;
  position: fixed;
  z-index: 9999;
  width: calc(var(--spacing) * 76);
  max-width: 95%;
  overflow: hidden;
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  opacity: 0;
  animation: kt-toast-in 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1),	opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  /*font-weight:600;*/
  backdrop-filter: blur(10px);
}

.kt-toast-progress{
  position: fixed;
  inset-inline-start: calc(var(--spacing) * 0);
  bottom: calc(var(--spacing) * 0);
  height: 2px;
  width: 100%;
  background-color: var(--primary);
  transform-origin: left;
  animation: kt-toast-progress-line linear forwards;
}
.kt-toast-progress.bg-success{
  background-color: var(--color-green-500, var(--kt-success, #22c55e));
}
.kt-toast-progress.bg-warning{
  background-color: var(--color-yellow-500, var(--kt-warning, #f59e0b));
}
.kt-toast-progress.bg-danger{
  background-color: var(--destructive, var(--kt-danger, #ef4444));
}
.kt-toast-progress.bg-info{
  background-color: var(--color-violet-500, var(--kt-info, #8b5cf6));
}
.kt-toast-progress.bg-primary{
  background-color: var(--primary, var(--kt-primary, #3b82f6));
}
.kt-toast-progress.bg-secondary{
  background-color: var(--color-zinc-500, var(--kt-secondary, #d4d4d8));
}

/* ==================================================
 * @layer utilities (override)
 * ================================================== */
 
 .kt-drawer-backdrop {
  position: fixed;
  inset: calc(var(--spacing) * 0);
  background-color: color-mix(in srgb, #fff 30%, transparent);
}
  @supports (color: color-mix(in lab, red, red)) {
.kt-drawer-backdrop {
    background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
}
  }
  
/* ==================================================
 * Extra @layer utilities
 * ================================================== */

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (width >= 64rem) {
.lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (width >= 64rem) {
.lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.h-\[156px\] {
  height: 156px;
}
.border-red-600 {
  border-color: var(--color-red-600);
}
.bg-white\/90 {
  background-color: color-mix(in srgb, #fff 90%, transparent);
}
  @supports (color: color-mix(in lab, red, red)) {
.bg-white\/90 {
    background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
}
.text-\[9px\] {
  font-size: 9px;
}
.me-\[-2px\] {
  margin-inline-end: -2px;
}
.me-\[-3px\] {
  margin-inline-end: -3px;
}
.me-\[-4px\] {
  margin-inline-end: -4px;
}
.ps-\[8px\] {
  padding-inline-start: 8px;
}
.ps-\[12px\] {
  padding-inline-start: 12px;
}
.ps-\[12\.5px\] {
  padding-inline-start: 12.5px;
}
.before\:start-\[18px\]::before {
  content: var(--tw-content);
  inset-inline-start: 18px;
}
.before\:start-\[22px\]::before {
  content: var(--tw-content);
  inset-inline-start: 22px;
}
.-start-\[4px\] {
  inset-inline-start: calc(4px * -1);
}
.-start-\[5px\] {
  inset-inline-start: calc(5px * -1);
}
.bg-\[length\:60\%\] {
  background-size: 60%;
}
.\[background-position\:165\%_30\%\] {
  background-position: 165% 30%;
}
.\[background-position\:121\%_60\%\] {
  background-position: 121% 60%;
}
.border-destructive {
  border-color: var(--destructive);
}