/* Copy Animation */
.dashboard-body {
    background: transparent !important; /* keep cards dark */
}

.dashboard-body:not(body) {
    /* do nothing here */
}

/* The parent of dashboard-body gets the white-ish background */
.dashboard-body {
    position: relative;
}

.dashboard-body {
    backdrop-filter: none;
}

/* Apply background to dashboard-body PARENT */
.dashboard-body {
    /* no background here */
}

.dashboard-body {
    /* no touch */
}

.dashboard-body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #f4f6f9; /* white-ish */
    z-index: -1;
}

.base-color {
    color: hsl(var(--main)) !important;
}

.copyInput {
    display: inline-block;
    line-height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.copied::after {
    position: absolute;
    top: 8px;
    right: 12%;
    width: 100px;
    display: block;
    content: "COPIED";
    font-size: 1em;
    padding: 5px 5px;
    color: #fff;
    background-color: hsl(var(--base));
    border-radius: 3px;
    opacity: 0;
    will-change: opacity, transform;
    animation: showcopied 1.5s ease;
}

@keyframes showcopied {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    50% {
        opacity: 0.7;
        transform: translateX(40%);
    }

    70% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
    }
}


.cookies-card {
    width: 520px;
    padding: 30px;
    color: #1E2337;
    position: fixed;
    bottom: 15px;
    left: 15px;
    z-index: 999999;
    transition: all .5s;
    background: #d1d1d1;
    border-radius: 5px;
}

[data-theme=light] .cookies-card {
    background-color: hsl(var(--section-bg));
}

[data-theme=light] .cookies-card p {
    font-weight: 300;
    color: hsl(var(--black)/0.7) !important;
}


.cookies-card.hide {
    bottom: -500px !important;
}

.radius--10px {
    border-radius: 10px;
}

.cookies-card__icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #6e6f70;
    color: #fff;
    font-size: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.cookies-card__content {
    margin-bottom: 0;
}

.cookies-btn {
    color: #363636;
    text-decoration: none;
    padding: 10px 35px;
    margin: 3px 5px;
    display: inline-block;
    border-radius: 999px;
}

.cookies-btn:hover {
    color: #363636;
}


@media (max-width: 767px) {
    .cookies-card {
        width: 100%;
        left: 0;
        bottom: 0;
        font-size: 14px;
        padding: 15px;
    }
}




.hover-input-popup {
    position: relative;
}

.input-popup {
    display: none;
}

.hover-input-popup .input-popup {
    display: block;
    position: absolute;
    bottom: 130%;
    left: 50%;
    width: 280px;
    background-color: #1a1a1a;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.input-popup::after {
    position: absolute;
    content: '';
    bottom: -19px;
    left: 50%;
    margin-left: -5px;
    border-width: 10px 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #1a1a1a transparent;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.input-popup p {
    padding-left: 20px;
    position: relative;
}

.input-popup p::before {
    position: absolute;
    content: '';
    font-family: 'Line Awesome Free';
    font-weight: 900;
    left: 0;
    top: 4px;
    line-height: 1;
    font-size: 18px;
}

.input-popup p.error {
    text-decoration: line-through;
}

.input-popup p.error::before {
    content: "\f057";
    color: #ea5455;
}

.input-popup p.success::before {
    content: "\f058";
    color: #28c76f;
}

.show-filter {
    display: none;
}

@media(max-width:767px) {
    .responsive-filter-card {
        display: none;
        transition: none;
    }

    .show-filter {
        display: block;
    }
}

.verification-code-wrapper {
    box-shadow: var(--box-shadow) !important;
    background-color: hsl(var(--footer-bg)) !important;
    border: 0 !important;
}

.verification-code input {
    background-color: transparent !important;
    color: hsl(var(--black)) !important;
}

.verification-code::after {
    background-color: transparent !important;
}

.verification-code span {
    background-color: transparent !important;
    border-color: hsl(var(--base)) !important;
}

.verification-code input {
    letter-spacing: 67px !important;
}


/* ==========================================================
   PURE CSS RICH ANIMATED BUTTON (NO JS)
   For .btn.btn--base
   ========================================================== */

.btn.btn--base {
    position: relative;
    overflow: hidden;
    border: none !important;
    padding: 15px 38px !important;
    border-radius: 14px !important;

    /* Premium emerald gradient */
    background: linear-gradient(135deg, #0C9F6A, #15C98A, #0FAE7C);
    background-size: 250% 250%;
    animation: gradMove 7s ease infinite;

    color: #fff !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.45);
    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.25),
        0 0 0 rgba(255,255,255,0.2);

    transition: transform .3s ease, box-shadow .3s ease;
}

/* animated gradient */
@keyframes gradMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hover elevate */
.btn.btn--base:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 35px rgba(0,0,0,0.35),
        0 0 18px rgba(15,200,120,0.45);
}

/* ------------------------------------------
   PARTICLES (pure CSS, no JS)
   ------------------------------------------ */

.btn.btn--base::before,
.btn.btn--base::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* FIRST PARTICLE LAYER — bubbles */
.btn.btn--base::before {
    background:
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.30) 0px, transparent 18px),
        radial-gradient(circle at 70% 20%, rgba(255,255,255,0.25) 0px, transparent 20px),
        radial-gradient(circle at 40% 50%, rgba(255,255,255,0.18) 0px, transparent 16px),
        radial-gradient(circle at 85% 65%, rgba(255,255,255,0.22) 0px, transparent 14px),
        radial-gradient(circle at 10% 30%, rgba(255,255,255,0.15) 0px, transparent 12px);

    background-size: 200% 200%;
    opacity: 0;
    transition: opacity .4s ease;
}

/* SECOND PARTICLE LAYER — diamonds */
.btn.btn--base::after {
    background:
        radial-gradient(circle at 25% 35%, rgba(255,255,255,0.55) 0px, transparent 8px),
        radial-gradient(circle at 80% 75%, rgba(255,255,255,0.45) 0px, transparent 10px),
        radial-gradient(circle at 60% 20%, rgba(255,255,255,0.60) 0px, transparent 7px);

    background-size: 180% 180%;
    opacity: 0;
    transition: opacity .4s ease;
}

/* Hover: activate particles */
.btn.btn--base:hover::before {
    opacity: 1;
    animation: particleFloat1 4s linear infinite;
}

.btn.btn--base:hover::after {
    opacity: 1;
    animation: particleFloat2 5.2s linear infinite;
}

/* Bubble drift animation */
@keyframes particleFloat1 {
    0% { background-position: 0% 100%; }
    50% { background-position: 100% 0%; }
    100% { background-position: 0% 100%; }
}

/* Sparkle/diamond drift animation */
@keyframes particleFloat2 {
    0% { background-position: 100% 0%; }
    50% { background-position: 0% 100%; }
    100% { background-position: 100% 0%; }
}

/* Press effect */
.btn.btn--base:active {
    transform: translateY(1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
/* ==========================================================
   PREMIUM LOGO ANIMATION (NO JS)
   For .navbar-brand.logo
   ========================================================== */

/* Base logo styling */
.navbar-brand.logo {
    position: relative;
    display: inline-block;
    transform-origin: center;
    transition: transform 0.35s ease;
}

/* Hover scale-up effect (luxury, smooth) */
.navbar-brand.logo:hover {
    transform: scale(1.14);
}

/* -----------------------------
   GOLD DROPLET PARTICLE LAYER 1
   ----------------------------- */
.navbar-brand.logo::after {
    content: "";
    position: absolute;
    right: -6px;
    top: -6px;

    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #ffd700 0%, #e0b300 60%, rgba(255,215,0,0) 100%);
    border-radius: 50%;

    opacity: 0;
    transform: translateY(0);

    /* Animation settings */
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* -----------------------------
   GOLD DROPLET PARTICLE LAYER 2
   ----------------------------- */
.navbar-brand.logo::before {
    content: "";
    position: absolute;
    right: 2px;
    top: -4px;

    width: 7px;
    height: 7px;
    background: radial-gradient(circle, #ffe066 0%, #d1a800 70%, transparent 100%);
    border-radius: 50%;

    opacity: 0;
    transform: translateY(0);

    /* Animation settings */
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* HOVER — Activate gold droplets */
.navbar-brand.logo:hover::after {
    animation: goldDrop1 1.2s ease forwards;
    opacity: 1;
}

.navbar-brand.logo:hover::before {
    animation: goldDrop2 1.4s ease forwards;
    opacity: 1;
}

/* ==========================================================
   KEYFRAMES: GOLD DROP MOVEMENT
   ========================================================== */

@keyframes goldDrop1 {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    40% {
        transform: translateY(12px) scale(0.92);
        opacity: 1;
    }
    70% {
        transform: translateY(22px) scale(0.75);
        opacity: 0.85;
    }
    100% {
        transform: translateY(34px) scale(0.5);
        opacity: 0;
    }
}

@keyframes goldDrop2 {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.9;
    }
    40% {
        transform: translateY(10px) scale(0.9);
        opacity: 0.9;
    }
    80% {
        transform: translateY(20px) scale(0.7);
        opacity: 0.5;
    }
    100% {
        transform: translateY(30px) scale(0.5);
        opacity: 0;
    }
}


/* Snowfall effect */
.footer-area {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  min-height: 360px;
  background-color: #000000;
  background-origin: border-box;
  background-clip: border-box;
  background-image:
    radial-gradient(#111 60%, transparent 61%),
    radial-gradient(#111 60%, transparent 61%),
    linear-gradient(#f97316, #f97316),
    radial-gradient(#111 60%, transparent 61%),
    radial-gradient(#111 60%, transparent 61%),
    radial-gradient(#111 60%, transparent 61%),
    linear-gradient(#ef4444, #ef4444),
    linear-gradient(#111, #111),
    linear-gradient(#111, #111),
    radial-gradient(closest-side, #ffffff 98%, transparent 100%),
    radial-gradient(closest-side, #ffffff 98%, transparent 100%),
    radial-gradient(closest-side, #ffffff 98%, transparent 100%),
    radial-gradient(#111 60%, transparent 61%),
    radial-gradient(#111 60%, transparent 61%),
    linear-gradient(#f97316, #f97316),
    radial-gradient(#111 60%, transparent 61%),
    radial-gradient(#111 60%, transparent 61%),
    radial-gradient(#111 60%, transparent 61%),
    linear-gradient(#ef4444, #ef4444),
    linear-gradient(#111, #111),
    linear-gradient(#111, #111),
    radial-gradient(closest-side, #ffffff 98%, transparent 100%),
    radial-gradient(closest-side, #ffffff 98%, transparent 100%),
    radial-gradient(closest-side, #ffffff 98%, transparent 100%),
    radial-gradient(#111 60%, transparent 61%),
    radial-gradient(#111 60%, transparent 61%),
    linear-gradient(#f97316, #f97316),
    radial-gradient(#111 60%, transparent 61%),
    radial-gradient(#111 60%, transparent 61%),
    radial-gradient(#111 60%, transparent 61%),
    linear-gradient(#ef4444, #ef4444),
    linear-gradient(#111, #111),
    linear-gradient(#111, #111),
    radial-gradient(closest-side, #ffffff 98%, transparent 100%),
    radial-gradient(closest-side, #ffffff 98%, transparent 100%),
    radial-gradient(closest-side, #ffffff 98%, transparent 100%),
    linear-gradient(to top, transparent 0, transparent 120px);
  background-size:
    5px 5px,
    5px 5px,
    10px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    42px 8px,
    60px 6px,
    44px 22px,
    36px 36px,
    56px 56px,
    80px 80px,
    5px 5px,
    5px 5px,
    10px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    42px 8px,
    60px 6px,
    44px 22px,
    36px 36px,
    56px 56px,
    80px 80px,
    5px 5px,
    5px 5px,
    10px 4px,
    4px 4px,
    4px 4px,
    4px 4px,
    42px 8px,
    60px 6px,
    44px 22px,
    36px 36px,
    56px 56px,
    80px 80px,
    100% 120px;
  background-position:
    left 72px bottom 146px,
    left 86px bottom 146px,
    left 80px bottom 140px,
    left 78px bottom 112px,
    left 78px bottom 98px,
    left 78px bottom 84px,
    left 59px bottom 124px,
    left 50px bottom 156px,
    left 60px bottom 168px,
    left 62px bottom 120px,
    left 52px bottom 78px,
    left 40px bottom 20px,
    left -9999px top -9999px,
    left -9999px top -9999px,
    left -9999px top -9999px,
    left -9999px top -9999px,
    left -9999px top -9999px,
    left -9999px top -9999px,
    left -9999px top -9999px,
    left -9999px top -9999px,
    left -9999px top -9999px,
    left -9999px top -9999px,
    left -9999px top -9999px,
    left -9999px top -9999px,
    right 86px bottom 146px,
    right 72px bottom 146px,
    right 80px bottom 140px,
    right 78px bottom 112px,
    right 78px bottom 98px,
    right 78px bottom 84px,
    right 59px bottom 124px,
    right 50px bottom 156px,
    right 60px bottom 168px,
    right 62px bottom 120px,
    right 52px bottom 78px,
    right 40px bottom 20px,
    left 0 bottom 0;
  background-repeat: no-repeat;
  isolation: isolate;
}

.footer-area::before,
.footer-area::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
}

.footer-area::before {
  z-index: 10;
  content: "❅";
  position: absolute;
  inset: 0;
  color: #ffffff;
  font-size: 16px;
  opacity: .75;
  filter: blur(.6px);
  font-family: system-ui, "Segoe UI Symbol", Arial, sans-serif;
  text-shadow:
    5vw 8vh currentColor,
    15vw 12vh currentColor,
    25vw 6vh currentColor,
    35vw 14vh currentColor,
    45vw 4vh currentColor,
    55vw 16vh currentColor,
    65vw 5vh currentColor,
    75vw 10vh currentColor,
    85vw 7vh currentColor,
    95vw 11vh currentColor,
    10vw 42vh currentColor,
    20vw 50vh currentColor,
    30vw 46vh currentColor,
    40vw 56vh currentColor,
    50vw 48vh currentColor,
    60vw 60vh currentColor,
    70vw 52vh currentColor,
    80vw 58vh currentColor,
    90vw 54vh currentColor,
    98vw 62vh currentColor,
    12vw 78vh currentColor,
    28vw 70vh currentColor,
    44vw 86vh currentColor,
    60vw 74vh currentColor,
    76vw 92vh currentColor,
    92vw 88vh currentColor;
  transform: translateY(0) translateX(0);
  will-change: transform;
  animation: snow-glyph-1 20s linear infinite;
}

.footer-area::after {
  z-index: 11;
  content: "❅";
  position: absolute;
  inset: 0;
  color: #ffffff;
  font-size: 20px;
  opacity: .95;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.35));
  font-family: system-ui, "Segoe UI Symbol", Arial, sans-serif;
  text-shadow:
    4vw 18vh currentColor,
    12vw 6vh currentColor,
    20vw 24vh currentColor,
    28vw 8vh currentColor,
    36vw 20vh currentColor,
    44vw 10vh currentColor,
    52vw 4vh currentColor,
    60vw 14vh currentColor,
    68vw 7vh currentColor,
    76vw 12vh currentColor,
    8vw 46vh currentColor,
    18vw 54vh currentColor,
    29vw 62vh currentColor,
    40vw 70vh currentColor,
    51vw 78vh currentColor,
    62vw 86vh currentColor,
    73vw 80vh currentColor,
    84vw 66vh currentColor,
    94vw 74vh currentColor;
  transform: translateY(0) translateX(0);
  will-change: transform;
  animation: snow-glyph-2 14s linear infinite;
}

/* Removed hover push effect */

/* Pure CSS glyph snowfall */
@keyframes snow-glyph-1 {
  0%   { transform: translateY(-100%) translateX(-10px); }
  50%  { transform: translateY(0)      translateX(10px); }
  100% { transform: translateY(100%)  translateX(-10px); }
}

@keyframes snow-glyph-2 {
  0%   { transform: translateY(-100%) translateX(14px); }
  50%  { transform: translateY(0)      translateX(-14px); }
  100% { transform: translateY(100%)  translateX(14px); }
}

@keyframes wind {
  0%   { transform: translateZ(0) translateX(-18px); }
  50%  { transform: translateZ(0) translateX(18px); }
  100% { transform: translateZ(0) translateX(-18px); }
}

@keyframes windBack {
  0%   { transform: translateZ(0) translateX(-10px); }
  50%  { transform: translateZ(0) translateX(10px); }
  100% { transform: translateZ(0) translateX(-10px); }
}



@keyframes flickerFar {
  0%   { opacity: .60; }
  50%  { opacity: .72; }
  100% { opacity: .60; }
}

@keyframes flickerNear {
  0%   { opacity: .84; }
  50%  { opacity: .97; }
  100% { opacity: .84; }
}