:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}

.animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
.animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
.animate__fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}
.animate__animated.animate__faster {
    -webkit-animation-duration: calc(1s / 2);
    animation-duration: calc(1s / 2);
    -webkit-animation-duration: calc(var(--animate-duration) / 2);
    animation-duration: calc(var(--animate-duration) / 2);
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
.animate__fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

@-webkit-keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}
@keyframes fadeOutRight {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}
.animate__fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

.animate__animated.animate__faster {
    -webkit-animation-duration: calc(1s / 2);
    animation-duration: calc(1s / 2);
    -webkit-animation-duration: calc(var(--animate-duration) / 2);
    animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
    -webkit-animation-duration: calc(1s * 0.8);
    animation-duration: calc(1s * 0.8);
    -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
    animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
    -webkit-animation-duration: calc(1s * 2);
    animation-duration: calc(1s * 2);
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
    -webkit-animation-duration: calc(1s * 3);
    animation-duration: calc(1s * 3);
    -webkit-animation-duration: calc(var(--animate-duration) * 3);
    animation-duration: calc(var(--animate-duration) * 3);
}
/* Modern, subtle animations for Cartly */

/* Base animation variables */
:root {
  --animation-duration-fast: 0.15s;
  --animation-duration-normal: 0.25s;
  --animation-duration-slow: 0.4s;
  --animation-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Fade animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Slide animations */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation classes */
.animate-fade-in {
  animation: fadeIn var(--animation-duration-normal) var(--animation-easing);
}

.animate-fade-in-instant {
  animation: fadeIn var(--animation-duration-fast) var(--animation-easing);
}

.animate-fade-in-up {
  animation: fadeInUp var(--animation-duration-normal) var(--animation-easing);
}

.animate-fade-in-scale {
  animation: fadeInScale var(--animation-duration-normal) var(--animation-easing);
}

.animate-slide-in-right {
  animation: slideInRight var(--animation-duration-normal) var(--animation-easing);
}

.animate-slide-in-down {
  animation: slideInDown var(--animation-duration-normal) var(--animation-easing);
}

/* Speed variations */
.animate-fast {
  animation-duration: var(--animation-duration-fast) !important;
}

.animate-slow {
  animation-duration: var(--animation-duration-slow) !important;
}

/* Staggered animations for lists */
.animate-stagger > :nth-child(1) { animation-delay: 0ms; }
.animate-stagger > :nth-child(2) { animation-delay: 50ms; }
.animate-stagger > :nth-child(3) { animation-delay: 100ms; }
.animate-stagger > :nth-child(4) { animation-delay: 150ms; }
.animate-stagger > :nth-child(5) { animation-delay: 200ms; }
.animate-stagger > :nth-child(6) { animation-delay: 250ms; }
.animate-stagger > :nth-child(7) { animation-delay: 300ms; }
.animate-stagger > :nth-child(8) { animation-delay: 350ms; }
.animate-stagger > :nth-child(9) { animation-delay: 400ms; }
.animate-stagger > :nth-child(10) { animation-delay: 450ms; }

/* Interactive animations */
.hover-lift {
  transition: transform var(--animation-duration-fast) var(--animation-easing);
}

.hover-lift:hover {
  transform: translateY(-1px);
}

.hover-scale {
  transition: transform var(--animation-duration-fast) var(--animation-easing);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Focus and active states */
.focus-ring {
  transition: box-shadow var(--animation-duration-fast) var(--animation-easing);
}

.focus-ring:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Notification animations */
@keyframes notificationSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes notificationSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
}

.notification-item {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  transition: all var(--animation-duration-normal) var(--animation-easing);
}

.notification-show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.notification-hide {
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
}

/* Notification styles */
.notification-container {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.dark .notification-container {
  background: rgba(31, 41, 55, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.notification-success {
  border-left: 4px solid #10b981;
  color: #065f46;
}

.dark .notification-success {
  color: #34d399;
}

.notification-error {
  border-left: 4px solid #ef4444;
  color: #991b1b;
}

.dark .notification-error {
  color: #fca5a5;
}

.notification-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.notification-success .notification-icon {
  background: #10b981;
  color: white;
}

.notification-error .notification-icon {
  background: #ef4444;
  color: white;
}

.notification-close {
  transition: all var(--animation-duration-fast) var(--animation-easing);
  opacity: 0.6;
  border-radius: 4px;
  padding: 2px;
}

.notification-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

.dark .notification-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-stagger > * {
    animation-delay: 0ms !important;
  }
  
  .notification-item {
    transition: none !important;
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
  font-family: "PlayFair";
  src: url(/assets/PlayfairDisplay-Italic-VariableFont_wght-608217ba1f67e8dc4f5ce9f6de87586ec45c3f204dfe7c22fa42890afcfb3d92.ttf)
    format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PlayFair";
  src: url(/assets/PlayfairDisplay-VariableFont_wght-af5a0ae6e320c929206ce0eefa3de7b16c427cd0fef1d4599ce081858605c784.ttf)
    format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url(/assets/lato/Lato-Thin-e2ee3da03b502befab1ac02325ff50f6b762cc257465a9618bde891ad80c949b.ttf) format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url(/assets/lato/Lato-ThinItalic-e1c138f2e858ada537a804b7add3328e46e7c819f8c1d61e86c7b921ad15a66e.ttf) format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url(/assets/lato/Lato-Light-beda23b23dfd435f2e5a2e1c6d19457b2130f31777f6f587567fdcb93bbde4a5.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url(/assets/lato/Lato-LightItalic-09058a33202762b9e22af65faf6ba283f45575dcc90f6602f46ffff90ce15b24.ttf) format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url(/assets/lato/Lato-Regular-5a7ee76932e5355f679f70b3c2380533564dd25143a8eab609ab74743acbed70.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url(/assets/lato/Lato-Italic-8843554b577e598badb5fcda60c64ab89fcefc20b556c8e8ffe52edcb1cafc0c.ttf) format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url(/assets/lato/Lato-Bold-ede7eb46edd69275f376a6ba6882afc55e52c49df5e6e306e55698d516456c02.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url(/assets/lato/Lato-BoldItalic-ac2c5cff120da5d323b3f30dfc9d29dd11582804d97b5a6c9424bf9e761e56de.ttf) format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url(/assets/lato/Lato-Black-83b7920dd041f1e8fc0e26208d74574641530e7e612887f8de33bf68802630b4.ttf) format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url(/assets/lato/Lato-BlackItalic-b37b178bb35ef2527d72cf0435e77a68fc0c396bb039b2959b7d066047bd72a8.ttf) format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
html,
body {
    scrollbar-gutter: stable both-edges !important;
    overscroll-behavior: none;
}

.playfare {
    font-family: "Playfair";
}

.lato {
    font-family: "Lato", sans-serif;
}

.cubic-transition {
    transition-property: background-color, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

.menu-transition {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background-color: #c5c5c5;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: #505050;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.active-category {
    background-color: #9d9a9a;
    transition: background-color 0.3s ease;
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #428a84b3;
    font-weight: 600;
    color: white;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    position: absolute;
    z-index: 1;

    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltip-text.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s;
}

.modal-container {
    background-color: rgba(0, 0, 0, 0.562);
}

.card__image {
    height: 12rem;
    width: 100%;
}

@media (min-width: 600px) {
    .card__image {
        max-height: none;
    }

    .card__image img {
        height: 100%;
    }
}

.balance {
    text-wrap: balance;
}

@keyframes pulse-subtle {
    0%,
    23.07% {
        transform: scale(1);
        opacity: 1;
    }

    11.54% {
        transform: scale(1.03);
        opacity: 0.95;
    }

    23.07%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.selected {
    border: none;
    background-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 3px;
    text-decoration-style: solid;
    text-decoration-color: #ff5758;
}

.not-selected:hover {
    transform: scale(1.05);
}

.other-locales {
    transition:
        transform 0.5s ease,
        opacity 0.5s ease;
    transform-origin: bottom;
    opacity: 0;
    transform: scaleY(0);
}

.other-locales.active {
    opacity: 1;
    transform: scaleY(1);
}

/* Skeleton */

.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem;
}

.skeleton img {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.skeleton.loaded img {
    opacity: 1;
}

.skeleton::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    z-index: 10;
    background: linear-gradient(
        90deg,
        transparent 20%,
        rgba(255, 255, 255, 0.7) 50%,
        transparent 80%
    );
    background-color: #e5e7eb;
    background-size: 200% 100%;
    animation: skeleton-shimmer 2.5s infinite ease-in-out;
    border-radius: inherit;
}

.dark .skeleton::before {
    background: linear-gradient(
        90deg,
        transparent 20%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 80%
    );
    background-color: #2d3748;
    background-size: 200% 100%;
    animation: skeleton-shimmer 2.5s infinite ease-in-out;
    right: 0;
    bottom: 0;
    min-height: 100%;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

select:disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    opacity: 0.3;
}

.fixed-menu {
    @apply dark:shadow-white;

    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    max-width: 42rem;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.25),
        0 2px 4px -1px rgba(0, 0, 0, 0.343);
}

.scrollbar-hide::-webkit-scrollbar {
    display: none; /* Para navegadores basados en WebKit */
}

.scrollbar-hide {
    -ms-overflow-style: none; /* Para Internet Explorer */
    scrollbar-width: none; /* Para Firefox */
}

.open-filter {
    height: calc-size(auto);
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*


*/

@font-face {
    font-family: "PlayFair";
    src: url(/../fonts/PlayfairDisplay-VariableFont_wght.ttf) format("ttf"),
        url(/../fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf) format("ttf");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.playfare {
    font-family: "Playfair", serif;
}