:root {
  --skeleton-base: rgba(170, 170, 170, 0.28);
  --skeleton-glow: rgba(255, 255, 255, 0.55);
  --skeleton-radius: 14px;
  --skeleton-speed: 1600ms;
}
/*---------------DRESSUP-----------------*/
#container-options {
  position: relative;
}

.skeleton-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 999;
  pointer-events: none;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 10px;
  padding: 10px;

  align-content: start;
}

.skeleton-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--skeleton-radius);
  background: var(--skeleton-base);
  height: var(--option-item-size);
}

.skeleton-tile::after {
  content: "";
  position: absolute;
  inset: 0;

  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    var(--skeleton-glow) 50%,
    rgba(255, 255, 255, 0)
  );

  transform: translateX(-100%);
  animation: skeleton-shimmer var(--skeleton-speed) infinite;
}

@keyframes skeleton-shimmer {
  to { transform: translateX(100%); }
}

.option-item.thumb-pending {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.option-item.thumb-pending img {
  opacity: 0;
}

.option-item.thumb-ready img {
  opacity: 1;
  transition: opacity 120ms linear;
}

.option-item.thumb-pending.is-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
 background-image: linear-gradient(
    89deg, rgba(255, 255, 255, 0), 
    #2323230d 50%,
    rgba(255, 255, 255, 0)
  );
  transform: translateX(-100%);
  animation: opt-shimmer 2000ms infinite;
  pointer-events: none;
}

@keyframes opt-shimmer {
  to { transform: translateX(100%); }
}
/*---------------BADGES-----------------*/
.badge-item.thumb-pending {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.badge-item.thumb-pending img {
  opacity: 0;
}

.badge-item.thumb-ready img {
  opacity: 1;
  transition: opacity 120ms linear; 
}

.badge-item.thumb-pending::after {
  content: "";
  position: absolute;
  inset: 0;

 background-image: linear-gradient(
    89deg, rgba(255, 255, 255, 0), 
    #2323230d 50%,
    rgba(255, 255, 255, 0)
  );
  transform: translateX(-100%);
  animation: opt-shimmer 2000ms infinite;
  pointer-events: none;
}
/*---------------LOGIN-----------------*/
.login-submit.btn-loading {
  position: relative;
  overflow: hidden;
}

.login-submit.btn-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0; 

  background-image: linear-gradient(
    90deg, rgba(255, 255, 255, 0),
    var(--pink-click) 50%,
    rgba(255, 255, 255, 0)
  );

  transform: translateX(-100%);
  animation: btn-skel var(--skeleton-speed, 1600ms) infinite;
}

.login-submit.btn-loading span {
  position: relative;
  z-index: 1;
}

@keyframes btn-skel {
  to { transform: translateX(100%); }
}