@font-face{
    font-family:Neue-Bold;
    src:url(/assets/webfonts/Neue-Bold.ttf) format("opentype"),
}

@font-face{
    font-family:Neue-Regular;
    src:url(/assets/webfonts/Neue-Regular.otf) format("opentype"),
}

@keyframes general{
    0%{
        opacity:0;
        transform:scale(99%) translateY(-20px)
    }
    to{
        opacity:1;
        transform:scale(100%) translateY(0)
    }
}

.general-animation{
    animation:general .7s cubic-bezier(.215,.61,.355,1)
}

.font-onest {
    font-family: "Onest", sans-serif;
    font-optical-sizing: auto;
    font-weight: auto;
    font-style: normal;
}

.font-\[Neue-Bold\]{
    font-family:Neue-Bold
}
.font-\[Neue-Regular\]{
    font-family:Neue-Regular
}

.smooth {
    transition: all .8s cubic-bezier(.215,.61,.355,1)
}

@keyframes reve {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(98%)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(100%)
    }
}

@keyframes dropdownUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(100%)
    }

    to {
        opacity: 0;
        transform: translateY(-20px) scale(98%)
    }
}

.tooltip-enter-active {
    animation: reve .5s cubic-bezier(.215, .61, .355, 1)
}

.tooltip-leave-active {
    animation: dropdownUp .5s cubic-bezier(.175, .885, .32, 1.275)
}

p {
    cursor: default;
}

.active-nav-button {
    background: linear-gradient(125.95deg,#6d6a6c2e 18.13%,#55515533 71.02%) !important;
    outline-color: rgb(137 106 236 / 0.1) !important;
    outline-offset: -1px !important;
    outline-width: 1px !important;
    outline-style: solid !important;
    color: rgb(137 106 236) !important;
    opacity: 100 !important;
}


.fade-in {
    animation: fadeIn 0.3s forwards;
}

.fade-out {
    animation: fadeOut 0.3s forwards;
}

.ellipsis-animation {
    animation: fadeIn 1s;
}

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

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

@keyframes smoothFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.price-animation {
    animation: smoothFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.price-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.price-container .line-through {
    text-decoration: line-through;
    color: #d1d5db; 
}

.price-container .text-green-500 {
    font-size: 1.25rem;
    font-weight: bold;
}

.price-container .bg-green-200 {
    background-color: #bbf7d0; 
    color: #065f46; 
    font-size: 0.75rem; 
    font-weight: 600; 
    padding: 0.125rem 0.625rem; 
    border-radius: 0.375rem;
}

#purchaseModal {
    padding: 1rem; 
}

#modalContent {
    width: 80vw; 
    max-width: 800px; 
    height: auto; 
    border-radius: 1rem; 
    padding: 2rem; 
}

#modalDescription pre {
    white-space: pre-wrap;
    font-family: inherit;
    color: inherit;
    margin: 0; 
}
@media (max-width: 768px) {
    #purchaseModal {
        padding: 0;
    }

    #modalContent {
        width: 100%;
        max-width: none;
        height: 100vh;
        border-radius: 0; 
        padding: 1rem; 
        overflow-y: auto; 
    }
    .login-image {
        display: none;
        
    }
    .login-method {
        font-size: 0.7rem; 
        padding: 0.25rem 0.5rem;
        max-width: 100px;
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
      }
    
      td {
        padding: 0.5rem;
      }
    
      .login-table {
        display: flex;
        flex-direction: column;
      }
}


.active-menu {
    display: block;
    width: 100%;
    height: 100vh;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    transform: translateY(0);
    z-index: 50;
    padding: 0 !important;
    background: #131313;
}

.menu-mobile {
    display: none;
    position: fixed;
    inset: 0;
    background: #131313;
    z-index: 50;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    transform: translateY(-100%);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.avatar-container {
    width: 86px;
    height: 86px;
    background: linear-gradient(45deg, #896aec, #ff8e05);
    padding: 3px;
    border-radius: 50%;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center; 
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); 
}