/* ─── Dropdown wrapper ─────────────────────────────────────────────────────── */
.rw-currency-dropdown {
  display: flex;
  cursor: pointer;
  width: fit-content;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* ─── Trigger button ──────────────────────────────────────────────────────── */
.rw-currency-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 0.2em;
  background-color: transparent;
  border: none;
  padding: 0;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
}

body.bricks-is-frontend :focus {
  outline: none !important;
}

/* ─── Chevron arrow ───────────────────────────────────────────────────────── */
.rw-currency-dropdown__chevron {
  width: 13px;
  height: 13px;
  transition: 0.5s;
}

/* ─── Dropdown list panel ─────────────────────────────────────────────────── */
.rw-select-currency {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  background-color: white;
  z-index: 9999;
  list-style-type: none;
  padding: 1em;
  border-radius: 1em;
  margin-top: 0.5rem;
  gap: 1em;
}

/* Alignment variants */
.rw-select-currency.rw-select-currency--align-left {
  left: 0;
}
.rw-select-currency.rw-select-currency--align-right {
  right: 0;
}
.rw-select-currency.rw-select-currency--align-center {
  left: 50%;
  transform: translateX(-50%);
}

/* Alpine x-cloak (prevents dropdown flash on load) */
[x-cloak] {
  display: none !important;
}

/* Alpine enter transition classes */
.rw-dd-enter-active {
  animation: fadeInDown 0.4s ease-in-out;
}

.rw-dd-leave-active {
  animation: fadeInDown 0.4s ease-in-out reverse;
}

/* ─── Individual option ───────────────────────────────────────────────────── */
.rw-select-currency__item {
  padding: 3px 12px;
  border: solid 1px transparent;
  background-color: #f4f4f4;
  cursor: pointer;
  text-align: center;
  width: 100%;
  color: black;
  border-radius: var(--radius-full, 9999px);
  font-weight: 600;
  font-family: inherit;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: var(--spacing-5, 0.75rem);
  white-space: nowrap;
  list-style: none;
}

.rw-select-currency__item:hover {
  border: solid 1px black;
}

.rw-select-currency__item.selected {
  background-color: #fc766a;
  color: white;
}

/* ─── Dropdown animation ──────────────────────────────────────────────────── */
@keyframes fadeInDown {
  from {
    transform: translate3d(0, 30px, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* ─── Price loading states ────────────────────────────────────────────────── */
.woocommerce-Price-amount {
  position: relative;
}

.Hide {
  color: transparent;
}

/* ─── Skeleton loader ─────────────────────────────────────────────────────── */
.skeleton-box {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  overflow: hidden;
  background-color: #dddbdd;
  border-radius: 0.2em;
}
.skeleton-box::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.2) 20%,
    rgba(255, 255, 255, 0.5) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: shimmer 1s infinite;
  content: "";
}
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ─── Coin-flip loader ────────────────────────────────────────────────────── */
.currency-loader {
  right: 0;
  position: absolute;
  overflow: hidden;
  transform: translateZ(1px);
}
.currency-loader:after {
  content: attr(data-symbol);
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  text-align: center;
  line-height: 1em;
  font-size: 1.3em;
  font-weight: bold;
  background: #ffd700;
  color: #daa520;
  border: 4px double;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1);
  animation: coin-flip 4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes coin-flip {
  0%,
  100% {
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  100% {
    transform: rotateY(3600deg);
  }
}

/* ─── Tic-Toc loader ──────────────────────────────────────────────────────── */
.Tic-Toc-loader {
  position: absolute;
  width: 0.7em;
  height: 0.7em;
  left: 1.4em;
  bottom: 0.3em;
  transform: translateX(-25px);
}
.Tic-Toc-loader::before,
.Tic-Toc-loader::after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  mix-blend-mode: multiply;
  animation: rotate9 1s infinite cubic-bezier(0.77, 0, 0.175, 1);
}
.Tic-Toc-loader::before {
  background-color: #286f6f;
}
.Tic-Toc-loader::after {
  background-color: #ff8915;
  animation-delay: 0.5s;
}
@keyframes rotate9 {
  0%,
  100% {
    left: 1em;
  }
  25% {
    transform: scale(0.3);
  }
  50% {
    left: 0;
  }
  75% {
    transform: scale(1);
  }
}

/* ─── Bubble loader ───────────────────────────────────────────────────────── */
.bubble {
  position: absolute;
  display: inline-block;
  left: 0.1em;
  bottom: 0.3em;
  width: 1.4em;
  height: 1.4em;
  font-size: 0.7em;
  box-shadow:
    9px 9px 33px #d1d1d1,
    -9px -9px 33px #ffffff;
  background: linear-gradient(180deg, #fd8615 10%, #daa675 100%);
  border-radius: 50%;
  transform-origin: 50% 50%;
  animation: bubble7234 1200ms cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  display: block;
  top: 0.6em;
  left: 0.6em;
  width: 0.4em;
  height: 0.4em;
  background: #fff;
  border-radius: 50%;
}
@keyframes bubble7234 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360deg);
  }
}

/* ─── Eye loader ──────────────────────────────────────────────────────────── */
.Eye {
  display: inline-flex;
  position: absolute;
  gap: 0.2em;
  left: 0;
  bottom: 0.1em;
}
.Eye:before,
.Eye:after {
  content: "";
  height: 0.9em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #000 95%, #0000) 35% 35%/6px 6px
    no-repeat #f0a77f;
  transform: scaleX(var(--s, 1)) rotate(0deg);
  animation: l6 1s infinite linear;
}
.Eye:after {
  --s: -1;
  animation-delay: -0.1s;
}
@keyframes l6 {
  100% {
    transform: scaleX(var(--s, 1)) rotate(360deg);
  }
}

/* ─── Dots loader ─────────────────────────────────────────────────────────── */
.Dots {
  display: inline-flex;
  position: absolute;
  left: 0;
  bottom: 25%;
  width: 1.8em;
  aspect-ratio: 4;
  background: radial-gradient(circle closest-side, #fd8615 90%, #0000) 0 /
    calc(100% / 3) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: l1 1s steps(4) infinite;
}
@keyframes l1 {
  to {
    clip-path: inset(0 -34% 0 0);
  }
}

/* ─── Spinner loader ──────────────────────────────────────────────────────── */
.Spinner {
  position: absolute;
  display: inline-block;
  left: 0.1em;
  bottom: 0.3em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 3px solid #286f6f50;
  border-top-color: transparent;
  animation: regispinner 1.2s linear infinite;
}
@keyframes regispinner {
  to {
    transform: rotate(360deg);
  }
}

/* ─── Blink loader ────────────────────────────────────────────────────────── */
.blink_me {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .rw-select-currency {
    flex-direction: row;
  }
}