@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

body{
	font-family: "Inter", sans-serif !important;
    margin:0;
    display:flex;
	min-height: 100dvh;
    justify-content:center;
	min-height: 100dvh;
	min-height: -webkit-fill-available;
	background-color: #0f0f0f !important;
}

#app-container{
    width:100%;
	height: 100%;
    max-width:430px;
    min-height:100dvh;
	overflow: auto;
    position:relative;
	background-color: #0F0F0F !important;
}

.navbar-wrapper{
    position:fixed;
    top:0;
    max-width:430px;
	width: 100%;
    z-index:1000;
}
html {
  height: -webkit-fill-available;
}
.offcanvas-bottom{
	max-width: 430px !important;
	width: 100%;
	margin: auto;
}
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #888 #e0e0e0;
}

/* Chrome, Safari, and Edge */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: #e0e0e0;
}

*::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}

.text-xs {
  /* font-size: clamp(13px, 1vw, 16px) !important; */
  font-size: 13px !important;
}

.text-sm {
  /* font-size: clamp(15px, 1.2vw, 18px)!important; */
  font-size: 15px !important;

}

.text-md {
  /* font-size: clamp(20px, 2vw, 28px)!important; */
  font-size: 20px !important;

}

.text-lg {
  /* font-size: clamp(24px, 2.5vw, 36px)!important; */
  font-size: 24px !important;

}

.text-xl {
  /* font-size: clamp(36px, 4vw, 56px)!important; */
  font-size: 36px !important;

}

.text-2xl {
  /* font-size: clamp(40px, 5vw, 64px)!important; */
  font-size: 40px !important;

}
option {
    background-color: #1C1C1C;
    color: #fff;
}
.golden-gradient{
    background: linear-gradient(
        to right,
        #C39130 0%,
        #EBD69D 36%,
        #C19027 90%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.golden-border-gradient {
    position: relative;
    border-radius: 30px;
}

.golden-border-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
	pointer-events: none;
    background: linear-gradient(
        to right,
        #C39130 0%,
        #EBD69D 50%,
        #C19027 100%
    );

    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
.golden-bg-gradient{
	background: linear-gradient(
        to right,
        #C39130 0%,
        #EBD69D 50%,
        #C19027 75%
    );
    border-radius: 30px;
}
.gradient-product-card{
	background: radial-gradient(
		ellipse 160% 140% at -10% -10%,
		#4E493B 0%,
		#413D31 25%,
		#322F27 50%,
		#211F1A 72%,
		#0B0A09 100%
	);
	width: 100%;
	height: 23.5rem;
}
.skeleton-card{
    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            #1A1A1A 25%,
            #2A2A2A 50%,
            #1A1A1A 75%
        );

    background-size: 200% 100%;

    animation: skeleton-loading 2.2s infinite linear;
}
.dashed-line{
    width: 100%;
    height: 1px;
	opacity: 50%;
    background: repeating-linear-gradient(
        to right,
        #909090 0px,
        #909090 6px,
        transparent 6px,
        transparent 12px
    );
}
@keyframes skeleton-loading{

    0%{
        background-position: 100% 0;
    }

    100%{
        background-position: -100% 0;
    }
}


 #loader {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

.loader-image {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* or contain */
    display: block;
	mix-blend-mode: luminosity;
}

.loading-logo-section{
	position: absolute;
    inset: 0;
	bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    z-index: 1;
}
.logo-icon,
.logo-name {
    opacity: 0;
    transform: translateY(80px);
    animation: slideUp 1000ms ease-out forwards;
}

.logo-name {
    animation-delay: 400ms; /* Starts after the logo */
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

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

.loading-content {
    position: absolute;
    inset: 0;
	bottom: 8dvh;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;

    z-index: 1;
}
.dynamic-wrapper {
    position: relative;
    overflow: hidden;
}
.static-text{
	letter-spacing: 50%;
	color: #FFFFFF;
	font-weight: 600;
	font-size: 15px;
}
#dynamicText {
    display: inline-block;
    will-change: transform, opacity;
	color: #EBD69D !important;
	font-size: 36px;
	font-family: "DM Serif Display", serif;
}

@keyframes slideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-out {
    animation: slideOut 400ms ease forwards;
}

.slide-in {
    animation: slideIn 400ms ease forwards;
}