/* main.css */
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Variable.ttf');
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/Manrope-VariableFont_wght.ttf');
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-VariableFont_wght.ttf');
}

@font-face {
  font-family: 'Phosphor';
  src: url('./assets/icons/Phosphor.woff2') format('woff2'),
       url('./assets/icons/Phosphor.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Phosphor-Fill';
  src: url('./assets/icons/Phosphor-Fill.woff2') format('woff2'),
       url('./assets/icons/Phosphor-Fill.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



  :root {
    --whit:#ecf0f3;
    --ph: #e6e7e9e1;
    --shad:#0000004d;
    /* Blues */
    --hl-blue:#36c1fb; /*highlight*/
    --dk-blue: #1d2939; /* dark blue */
    --glassback: #01263bce; /* dark glassy blue */
    --bg: #101828; /* darker blue */
    --backlight:#001b2798;
    --inblue:#05162028; /* blue background for text inputs */
    --inblue2:#05162041; /* blue background for text inputs */
    --shadblue:#377396ce; /* shadow blue */
    --blue-dk: #37c1fb; /* Dark blue */
    --cyan-vb: #A0F8F8; /* Vibrant cyan */
  
    /* Yellows */
    --yellow-sh: #EFB905; /* Shadow yellow */
    --yellow-lt: #FEE356; /* Light yellow */
    --yellow-md: #FDD41C; /* Normal yellow */
  
    /* Blacks */
    --dblack: #00060a; /* Dark black */
  
    /* Greens (Success) */
    --newG:#44f03c; /* light green new ui DRopay */
    --green-lt: #2DCE89; /* Light green for success highlights */
    --green-md: #28A745; /* Main green for success */
    --green-dk: #1F7A31; /* Dark green for strong emphasis */
  
    /* Reds (Error) */
    --red-lt: #F86C6B; /* Light red for error highlights */
    --red-md: #DC3545; /* Main red for error */
    --red-dk: #B02A37; /* Dark red for strong emphasis */
  
    /* Grays */
    --gray-lt: #f0f0f0; /* Light gray */
    --gray-md: #b0b0b0; /* Medium gray */
    --gray-dk: #505050; /* Dark gray */

    --tgray1:#b0b0b05d;
    --tgray2:#ecf0f33d;
  
    /* Whites */
    --white: #ffffff; /* Pure white */
    --txt: #fffdff; /* Warm white */
    --text-light: #e9f1ff;
    --text-dim: #b6c3d6;
    --blurS: 2px;

    /* root.css for padding and font-size*/
  /* 🧱 Padding / Spacing Scale */
  --p-xxs: 0.25rem;   /* 4px */
  --p-xs: 0.5rem;     /* 8px */
  --p-sm: 0.75rem;    /* 12px */
  --p-md: 1rem;       /* 16px */
  --p-lg: 1.5rem;     /* 24px */
  --p-xl: 2rem;       /* 32px */
  --p-2xl: 3rem;      /* 48px */
  --p-3xl: 4rem;      /* 64px */

  /* 🔤 Font Size Scale (similar to Tailwind) */
  --fs-xxs: 0.625rem;  /* 10px */
  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.25rem;    /* 20px */
  --fs-2xl: 1.5rem;    /* 24px */
  --fs-3xl: 1.875rem;  /* 30px */
  --fs-4xl: 2.25rem;   /* 36px */
  --fs-5xl: 3rem;      /* 48px */
  --fs-6xl: 3.75rem;   /* 60px */

  /* 🟣 Border Radius Scale */
  --br-none: 0;
  --br-xs: 0.125rem;  /* 2px */
  --br-sm: 0.25rem;   /* 4px */
  --br-md: 0.375rem;  /* 6px */
  --br-lg: 0.5rem;    /* 8px */
  --br-xl: 0.75rem;   /* 12px */
  --br-2xl: 1rem;     /* 16px */
  --br-3xl: 1.5rem;   /* 24px */
  --br-full: 9999px;  /* circle */
    
  --varpad1: 1%;
  --flexImgSize:12vmin;

  }
  

/* ANIMATIONS */
*{
  border:none;
  outline:none;
  -webkit-user-select: none;
  user-select:none;
  caret-color:var(--shadblue);
}
/*animations*/
@keyframes onwarn{
  from{
      opacity:0.5;
      background-color:var(--red-lt);
  }
  to{ opacity:1;
      background-color:var(--red-md);
  }
}
@keyframes onclick{
  from{
      background-color:var(--hl-blue);
  }
  to{
      background-color:var(--blue-dk);
  }
}
@keyframes onlink{
  from{
      color:var(--cyan-vb);
  }
  to{
      color:var(--shadblue);
  }
}
@keyframes fadein{
  from{
      opacity:0.25;
  }
  to{
      opacity:1;
  }
}
@keyframes bounce {
    0%{
    position: fixed;
    left: 28%;
      opacity: 0.001;
      top: -10em;
      box-shadow: none;
    }
    15%{
        position: fixed;
    left: 28%;
      opacity: 0.01;
      top:-8em;
    }
    30%{
        position: fixed;
    left: 28%;
      opacity: 0.05;
      top:-9em;
    }
    45%{
        position: fixed;
    left: 28%;
      opacity: 0.1;
      top:-6em;
      box-shadow: 2px 55px 1px var(--shad);
    }
    60%{
        position: fixed;
    left: 28%;
      opacity: 0.15;
      top: -7em;
      box-shadow: 2px 25px 5px var(--shad);
    }
    75%{
        position: fixed;
    left: 28%;
      opacity:0.3;
      top: -2em;
      box-shadow: 2px 17px 12px var(--shad);
    }
    90%{
        position: fixed;
    left: 28%;
      opacity:0.6;
      top: -3em;
      box-shadow: 2px 25px 15px var(--shad);
    }
    100%{
      top: 0em;
      opacity: 1;
      position: relative;
    }
    }
    @keyframes dance {
      0%{
        white-space: nowrap;
        width: 10%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-ellipsis:end;
        visibility: visible;
      }
      20%{
        white-space: nowrap;
        width: 20%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-ellipsis:end;
        visibility: visible;
      }
      40%{
        white-space: nowrap;
        width: 40%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-ellipsis:end;
        visibility: visible;
      }
      60%{
        white-space: nowrap;
        width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-ellipsis:end;
        visibility: visible;
      }
      100%{
        width: 100%;
      }
      100%{
        width: 100%;
        visibility: visible;
      }
    }
    @keyframes bounceIn {
        from {
          opacity: 0;
          transform: scale(0.8) translateY(10px);
        }
        to {
          opacity: 1;
          transform: scale(1) translateY(0);
        }
      }
      @keyframes slide{
        from {
          opacity: 0.7;
          transform: translateY(100%);
        }
        to {
          opacity: 1;
          transform: translateY(0%);
        }
      }
      @keyframes rota{
        from{
         transform: scale(0.9) rotate(180deg);
        }
        to{
         transform: scale(1) rotate(-180deg);
        }
      }
      @keyframes cwhite{
        0%{
          transform: scale(0.5);
          right: -19%;
          bottom: 12%;
        }
        25%{
          transform: scale(0.75);
          right: -15%;
          bottom: 10%;
        }
        50%{
          transform: scale(0.85);
          right: -19%;
          bottom: 12%;
        }
        75%{
          transform: scale(0.75);
          right: -11%;
          bottom: 7%;
        }
        100%{
          transform: scale(1);
          right: -7%;
          bottom: 2%;
        }
      }
      @keyframes cdark{
        0%{
          transform: scale(0.5);
          left: -17%;
          bottom: -21%;
        }
        25%{
          transform: scale(0.75);
          left: -12%;
          bottom: -16%;
        }
        50%{
          transform: scale(0.85);
          left: -17%;
          bottom: -21%;
        }
        75%{
          transform: scale(0.75);
          left: -9%;
          bottom: -13%;
        }
        100%{
          transform: scale(1);
          left: -7%;
          bottom: -11%;
        }
      }

      @keyframes rotx{
        0%{
         transform: scale(0.5) rotate(-45deg);
        }
        15%{
          transform: scale(0.65);
        }
        30%{
          transform: scale(0.5);
        }
        45%{
          transform: scale(0.65) rotate(15deg);
        }
        60%{
         transform: scale(0.55) rotate(-30deg);
        }
        75%{
          transform: scale(0.8) rotate(45deg);
        }
        100%{
          transform: scale(1) rotate(0deg);
        }
      }
      
      @keyframes goody {
        0%{
          border: 2px solid;
        }
        40%{
          border: 8px solid;
        }
        50%{
          border: 10px solid;
        }
        60%{
          border: 8px solid;
        }
        100%{
          border: 10px solid;
        }
        100%{
          border: 0px solid;
        }
      }
      /* 🔮 Animation keyframes */
@keyframes glowRotate {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 0 20px var(--hl-blue);
  }
  25% {
    background-position: 300% 50%;
    box-shadow: 0 0 20px var(--cyan-vb);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 0 40px var(--shadblue);
  }
  75% {
    background-position: 250% 50%;
    box-shadow: 0 0 20px var(--backlight);
  }
  100% {
    background-position: 0% 50%;
    box-shadow: 0 0 20px var(--blue-dk);
  }
}
@keyframes bgRotate1 {
  0%{
    background-image: url('assets/img/firstblack.jpg');
    background-position: 60%;
  }
  25%{
    background-image: url('assets/img/firstblack.jpg');
    background-position: 20%;
  }
  50%{
    background-image: url('assets/img/secondblack.jpg');
    background-position: 20%;
  }
  75%{
    background-image: url('assets/img/firstblack.jpg');
    background-position: 80%;
  }
  100%{
    background-image: url('assets/img/firstblack.jpg');
    background-position: center;
  }
}
/* Horizontal wave shimmer */
@keyframes waveMove {
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 200%;
  }
}

/* Subtle glow pulsation */
@keyframes waveGlow {
  0% {
    opacity: 0.8;
    transform: scaleY(1);
  }
  100% {
    opacity: 1;
    transform: scaleY(1.05);
  }
}
   
      ::selection, input::selection{
        background-color:var(--blue-dk);
        color:var(--bg);
      }

body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  display: flex;
  font-size: .9em;
  font-size: clamp(var(--fs-sm) , 2vw , var(--fs-3xl));
  justify-items: center;
  text-align: center;
  box-sizing: border-box;
  line-height: 1.6;
}
html{
  -webkit-font-smoothing: antialiased;
}

/* Base icon class for regular icons */
.ph {
  font-family: 'Phosphor';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Example usage classes (you’ll already have these if copied from Phosphor pack) */
.ph-wallet::before { content: '\e900'; }
.ph-house::before { content: '\e901'; }
/* ...more icons */

/* Base icon class for fill icons */
.ph-fill {
  font-family: 'Phosphor-Fill';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}



.loader-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--backlight);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2000;
}

.loader-screen .splogo {
  width: 25vmin;
  margin: var(--p-xs) auto;
}

.loader-screen h3{
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-lg);
  margin: var(--p-sm) auto;
}

/* The glowing wave layer */
.wave {
  position: absolute;
  bottom: 1%;
  width: 200%;
  height: 25px;
  background: linear-gradient(
  90deg,
  #0a1f44,
  #007bff,
  #00f7ff,
  #003366,
  #0a1f44
);
  background-size: 200% 100%;
  border-radius: 50% 50% 0 0;
  filter: blur(12px) brightness(1.1);
}

   
.glo,#bxd{
        padding: 0%;
        margin: 0;
        box-sizing: border-box;
      }
      #logcarda{
        margin: 2%;
        padding: 3%;
        display: none;
      }
      .glochild{
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background-color: var(--blue-dk);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        position: absolute;
      }
      .circle{
        width: 63vmin;
        height: 63vmin;
        border-radius: 50%;
        position: fixed;
      }

      .circle.dark{
        background-color: var(--dk-blue);
        left: -7%;
        bottom: -11%;
        z-index: 3;
        animation: cdark 1.2s cubic-bezier(0, 0, 0.2, 1);
      }
      .circle.white{
        background-color: var(--txt);
        right: -7%;
        bottom: 2%;
        z-index: 2;
        animation: cwhite 1.2s cubic-bezier(0, 0, 0.2, 1);
      }
      .viz{
        transform: scale(5);
        transition: transform 2s ease;
      }
      .appname{
        font-size: 2.35rem;
        font-family: "Space Grotesk", sans-serif;
        font-weight: bolder;
        animation: dance 1.5s .35s ease-in;
      }
      .splogo{
        width: 15vmin;
        background-color: transparent;
        height: auto;
        src: url('assets/img/darklogo.png');
        animation: bounce 2.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        object-fit: fill;
      }
      #mainlay{
        margin: 0;
        width: 100dvw;
        height: 100dvh;
        box-sizing: border-box;
        padding: 0;
        background-color: var(--bg);
      }

.glowbg{
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100dvw;
  height: 100dvh;
  margin: 0;  padding: 0;
  background-image: url('assets/img/firstblack.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  animation: bgRotate1 20s .2s ease-in-out infinite;
}

.glowbgChild{
  box-sizing: border-box;
  overflow-y: scroll;
  scroll-behavior: smooth;
  display: flex;
  justify-content: center;
  padding: var(--p-lg);
  width: 100%;
  height: 100%;
}

.loginCard {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: fit-content;
  min-width: 40dvw;
  max-width: 420px;
  padding: var(--varpad1);
  border-radius: 24px;
  background-image: linear-gradient(
    135deg,
    var(--blue-dk),
    var(--hl-blue),
    var(--shadblue)
  );
  border: none;
  box-sizing: border-box;
  box-shadow: 2px 24px 20px var(--inblue);
  background-size: 300% 300%;
  will-change: background-position, box-shadow;
  animation: glowRotate 8s ease-in-out infinite;
  transition: all 0.3s ease;
}

.loginCard:hover{
  transform: scale(1.03);
}

.formParent{
  width: 100%;
  height: 100%;
  border-radius: 21px;
  background-image: linear-gradient( to bottom right , var(--dk-blue), var(--bg));
  box-sizing: border-box;
  padding: var(--p-md);
  overflow: scroll;
}

.formSpan{
  box-sizing: border-box;
  width: 100%;
  font-size: var(--fs-xs);
  font-family: 'Manrope', sans-serif;
  color: var(--hl-blue);
  font-weight: bold;
  text-align: right;
  padding: var(--varpad1);
  transition: all .35s ease-in-out;
}

.formSpan:hover{
  transform: scale(1.1), translateY(-5%);
  color: var(--cyan-vb);
}


.cursor-pointer{
  cursor: pointer;
}
.text-left{
  text-align: left;
} 
.text-sm{
  font-size: var(--fs-sm);
}

.formLogin{
  display: flex;
  flex-direction: column;
  gap: var(--p-xxs);
  box-sizing: border-box;
  padding: var(--p-xxs);
}

.inputField {
  box-sizing: border-box;
  width: 98%;
  padding: var(--p-xs);
  font-size: var(--fs-sm);
  font-family: 'Inter', sans-serif;
  color: var(--hl-blue);
  background: rgba(12, 18, 30, 0.85); /* translucent dark glassy bg */
  border: 1px solid rgba(80, 140, 255, 0.2);
  border-radius: var(--br-full);
  outline: none;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

.inputFieldParent{
  display: flex;
  width: 98%;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  gap: 2%;
  background: rgba(12, 18, 30, 0.85); /* translucent dark glassy bg */
  border: 1px solid rgba(80, 140, 255, 0.2);
  border-radius: var(--br-full);
  outline: none;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  font-size: var(--fs-sm);
}

.inputFieldParent .inputFieldChild{
  box-sizing: border-box;
  width: 85%;
  padding: var(--p-xs);
  font-size: var(--fs-sm);
  font-family: 'Inter', sans-serif;
  color: var(--hl-blue);
  background: transparent; /* translucent dark glassy bg */
  outline: none;
}

.inputFieldParent i{
  display: inline-flex;
  padding: 2%;
  margin: 1%;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: var(--hl-blue);
  color: var(--bg);
  box-shadow: 1px 2px 4px var(--backlight);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

label{
  display: flex;
  width: 100%;
  padding: var(--p-xs);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  text-align: left;
  box-sizing: border-box;
}


/* ✨ When typing */
.inputField:focus,.inputFieldParent:focus {
  border-color: var(--hl-blue);
  background: rgba(18, 26, 46, 0.95);
  box-shadow: 0 0 12px var(--inblue), inset 0 0 10px rgba(0, 0, 0, 0.4);
  color: #eaf6ff;
}

/* 💬 Placeholder style */
.inputField::placeholder,.inputFieldChild::placeholder {
  color: rgba(200, 220, 255, 0.4);
  letter-spacing: 0.3px;
  transition: color 0.3s ease;
}

/* On focus, fade placeholder slightly */
.inputField:focus::placeholder,.inputFieldChild:focus::placeholder {
  color: rgba(200, 220, 255, 0.25);
}

/* Optional hover glow */
.inputField:hover,.inputFieldParent:hover {
  border-color: var(--cyan-vb);
  box-shadow: 0 0 10px rgba(50, 200, 255, 0.2);
}

.logoHead {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: var(--p-xxs);
  width: 100%;
  box-sizing: border-box;

  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(var(--fs-2xl), 2vw, var(--fs-4xl));

  background-image: linear-gradient(
    135deg,
    var(--hl-blue),var(--cyan-vb),
    var(--blue-dk),var(--shadblue)
  );
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  /* Optional glow to make it pop */
  text-shadow: 0 0 20px rgba(0, 140, 255, 0.2);
}

.logoHead img{
  width: clamp(8vmin,2vw,10vmin);
  height: auto;
  object-fit: fill;
}

.btn, .navbtn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--p-sm);
  box-sizing: border-box;

  padding: var(--p-sm);
  margin: var(--p-xxs) 0;
  font-family: var(--font-heading, 'Manrope', sans-serif);
  font-weight: 600;
  font-size: var(--fs-base);

  border-radius: var(--br-full);
  border: none;
  outline: none;
  cursor: pointer;

  color: var(--text-light);
  background: none;
  transition: all 0.3s ease;
  -webkit-user-select: none;
  user-select: none;
}

.btn.full {
  width: 100%;
  display: flex;
  justify-content: center;
}


.btn.primary {
  background: linear-gradient(
    135deg,
    var(--blue-dk),
    var(--hl-blue),
    var(--shadblue)
  );
  box-shadow: 0 4px 20px var(--inblue);
  color: var(--bg);
}

.btn.primary:hover {
  background: linear-gradient(
    135deg,
    var(--hl-blue),
    var(--cyan-vb),
    var(--shadblue)
  );
  box-shadow: 0 6px 30px rgba(0, 180, 255, 0.25);
  transform: translateY(-2px);
}

.btn.secondary {
  background: linear-gradient(
    135deg,
    #0e223c,
    var(--shadblue)
  );
  color: var(--text-dim);
  border: 1px solid rgba(0, 150, 255, 0.25);
}

.btn.secondary:hover {
  background: linear-gradient(
    135deg,
    var(--shadblue),
    var(--blue-dk)
  );
  color: var(--text-light);
  border-color: rgba(0, 180, 255, 0.35);
}

.btn.accent,.navbtn.active {
  background: linear-gradient(
    135deg,
    var(--cyan-vb),
    var(--hl-blue)
  );
  color: var(--bg);
  box-shadow: 0 0 12px rgba(0, 170, 255, 0.3);
}

.btn.accent:hover {
  background: linear-gradient(
    135deg,
    var(--hl-blue),
    var(--cyan-vb)
  );
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.4);
  transform: scale(1.03);
}

.btn.outline, .navbtn {
  background: linear-gradient(
    135deg,
    rgba(0, 120, 255, 0.08),
    rgba(0, 180, 255, 0.12)
  );
  border: 1.5px solid rgba(0, 160, 255, 0.35);
  color: var(--hl-blue);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.05),
    0 0 12px rgba(0, 150, 255, 0.1);
  transition: all 0.3s ease;
}

.btn.outline:hover,.navbtn:hover {
  background: linear-gradient(
    135deg,
    rgba(0, 160, 255, 0.15),
    rgba(0, 200, 255, 0.22)
  );
  border-color: rgba(0, 180, 255, 0.45);
  color: var(--cyan-vb);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.08),
    0 0 16px rgba(0, 180, 255, 0.25);
  transform: translateY(-1px);
}

.btn.outline:active,.navbtn:active {
  transform: scale(0.98);
  box-shadow: 0 0 8px rgba(0, 180, 255, 0.15);
}


.btn:active {
  transform: scale(0.97);
  box-shadow: 0 0 10px rgba(0, 140, 255, 0.3);
}

.loginFoot{
  display: flex;
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
  padding: var(--p-md);
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-xs);
  font-weight: bold;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}
.alert{
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80vmin;
  height: fit-content;
  max-height: 90dvh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  box-sizing: border-box;
  border-radius: var(--br-2xl);
  padding: var(--p-sm);
  gap: var(--p-xs);
  text-align: left;
  z-index: 2000;
  position: fixed;

  background-image: linear-gradient( to bottom right , var(--dk-blue), var(--bg));
  border: 0.875vmin solid var(--blue-dk);
  box-shadow: 7px 15px 20px var(--bg);

  top: 50%; /* Position from the top */
  left: 50%; /* Position from the left */
  transform: translate(-50%, -50%); /* Center the element based on its own size */
}

.alert h3{
  width: 100%;
  box-sizing: border-box;
  font-family: 'Manrope',sans-serif;
  display: inline-block;
  margin: 0;
  padding: var(--p-xxs);
}

.alert .infoSmall, .info{
  display: inline-block;
  box-sizing: border-box;
  border-radius: var(--br-full);
  color: var(--blue-dk);
  background-color: var(--backlight);
  padding: var(--p-xxs);
  font-size: small;
  letter-spacing: .25cap;
  font-family: 'Manrope', sans-serif;
}

.alert .body{
  margin: 0;
  padding: var(--p-sm);
  width: 100%;
  box-sizing: border-box;
  animation: dance 2s ease-in-out;
  line-height: 1.6;
}

.info{
  font-size: var(--fs-base);
  background-color: var(--dk-blue) !important;
  color: var(--text-light);
  border-radius: var(--br-2xl);
  letter-spacing: normal;
  font-family: 'Inter', sans-serif;
}

.info.big{
  font-size: var(--fs-lg);
  font-family: 'Space Grotesk', sans-serif;
}

.viewlay.full{
  height: fit-content;
}

.padSmall{
  padding: var(--p-sm);
}
.padSmall.xs{
  padding: var(--p-xs);
}
.padSmall.xxs{
  padding: var(--p-xxs);
}

.variableHead{
  font-size: var(--fs-base);
}

.flex{
  display: flex;
  padding: 2%;
  gap: 2%;
}
.flex.column{
  flex-direction: column;
}
.align-center{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2%;
  gap: 2%;
}

.space-around{
  justify-content: space-around;
}

.space-between{
  justify-content: space-between;
}

.space-evenly{
  justify-content: space-evenly;
}

.topbar,.mainbar{
  display: flex;
  flex-direction: row;
  padding: var(--p-xs);
  gap: var(--p-xs);
  width: 100%;
  height: 10dvh;
  box-sizing: border-box;
  border-bottom: .25vmin solid var(--dk-blue);
  justify-content: space-between;
  align-items: center;
}

.mainbar{
  height: 87dvh;
  border: none;
  justify-content: space-between;
}

.leftPanel, .mainPanel{
  display: none;
  flex-direction: column;
  padding: var(--p-xs);
  gap: var(--p-xs);
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  width: 45%;
  background-color: var(--bg);
  transition: transform .35s ease-in
}

.mainPanel{
  display: flex;
  width: 100% !important;
}

.leftPanel{
  transform: translateX(-50%);
  position: absolute;
  left: 0; top: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background-color: var(--dk-blue);
  transition: all .55s ease-in-out;
}

.leftPanel.open{
  transform: translateX(0%);
  display: flex;
  box-shadow: 12px 12px 12px var(--inblue);
  border-radius: 0 var(--br-3xl) var(--br-3xl) 0;
  transition: all .55s ease-in-out;
  z-index: 1000;
  height: 90dvh;
  overflow-y: scroll;
}

.mobile{
  justify-content: center;
}


.sublay{
  display: flex;
  flex-direction: row;
  padding: 0;
  gap: var(--p-sm);
  width: fit-content;
  justify-content: space-around;
  align-items: center;
}

i.outline{
  background-color: var(--glassback);
  border-radius: var(--br-full);
  box-sizing: border-box;
  padding: var(--p-xs);
  display: inline-flex;
  font-size: var(--fs-xl);
  color: var(--hl-blue);
  transition: transform .25 ease-in-out, background .55s ease-in-out;
}

i.outline:hover{
  background-color: var(--backlight);
  transform: translateY(-4%);
  animation: rota .4s ease-in-out;
}

i.mini{
  border-radius: var(--br-full);
  font-weight: bold;
  color: var(--hl-blue);
  background-color: transparent;
  box-sizing: border-box;
  padding: var(--p-xs);
  display: inline-flex;
  font-size: var(--fs-xl);
  transition: transform .25 ease-in-out, background .55s ease-in-out;
}

i.mini:hover{
  background-color: var(--glassback);
  transform: translateY(-4%);
}

.topbar .logoHead img{
    box-sizing: border-box;
    border-radius: 50%;
    background-color: var(--glassback);
  }

.tab{
  display: flex;
  flex-direction: row;
  padding: var(--p-xs); gap: var(--p-xs);
  justify-content: left; align-items: center;
  margin: 2% 0;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: none;
  height: fit-content;
  border-radius: var(--br-full);
  color: var(--hl-blue);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-lg);
  transition: all .25s ease-in-out;
  cursor: pointer;
}

.tab .infoSmall{
  font-size: var(--fs-xxs);
  background-color: var(--glassback);
  width: fit-content;
  box-sizing: border-box;
  padding: var(--p-xxs);
  border-radius: var(--br-full);
  font-weight: bold;
}

.tab.active{
  background-color: var(--hl-blue);
  color: var(--bg);
}
.tab.active>.text{
  font-weight: bold;
}

.tab:hover{
  background-color: var(--glassback);
  padding-left: var(--p-md);
}

.viewlay, .otherlay{
  display: none;
  flex-direction: column;
  gap: var(--p-sm);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: scroll;
  scroll-behavior: smooth;
  animation: bounceIn .2s ease-in-out;
}

.otherlay{
  overflow: hidden;
}



.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  box-sizing: border-box;
}

.statCard,.chartCard,.storeHeader,.storeBody {
  flex: 1 1 150px;
  margin: var(--p-sm);
  background: var(--dk-blue);
  border-radius: var(--br-3xl);
  padding: var(--p-sm);
  border: .25vmin solid var(--inblue);
  box-sizing: border-box;
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  gap: var(--p-xxs);
  justify-content: flex-start;
  align-items: center;
  font-size: var(--fs-base);
}

.storePic{
  width: clamp(40%, 2vw, 35%);
}

.statCard{
  align-items: flex-start;
  min-width: 10vmin;
  width: fit-content;
}

.statCard i{
  margin: 0 0 var(--p-sm);
  border-radius: var(--br-3xl);
  background-color: var(--bg);
  color: var(--blue-dk);
  font-size: var(--fs-2xl);
  padding: var(--p-sm);
}

.statCard span {
  display: inline-block;
  width: 100%;
  padding: var(--p-xxs);
  box-sizing: border-box;
  font-size: var(--fs-sm);
  text-align: left;
  line-height: 1.6;
  letter-spacing: .1cap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  font-family: 'Space Grotesk', sans-serif;
}

.statCard .value, .storeHeader .name{
  letter-spacing: normal;
  font-size: var(--fs-3xl);
  font-weight: bold;
}

.statCard .subtext{
  background-color: var(--bg);
  width: fit-content;
  max-width: 100%;
  padding: var(--p-xxs);
  border-radius: var(--br-xl);
}



.statCard.full{
  width: 100%;
}
.statCard:hover { 
  transform: translateY(-5px);
  border: .35vmin solid var(--shadblue);
}

.chartCard, .storeHeader {
  flex: none;
  width: 90%;
  height: fit-content;
  min-height: 9vmin;
  max-height: 70vmin;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--p-sm);
}

.chartCard canvas {
  width: 80% !important;
  height: 62vmin;
}

.chartCard img{
  object-fit: fill;
  width: 40vmin;
  height: auto;
}

.storeEdit{
  display: flex;
}

.storeHeader{
  min-height: none;
  max-height: none;
  justify-content: space-between;
  gap: var(--p-xs);
}

.storeHeader img{
  object-fit: fill;
  width: var(--flexImgSize);
  height: var(--flexImgSize);
  box-sizing: border-box;
  border-radius: var(--br-full);
  border: .2vmin solid var(--shadblue);
  padding: var(--p-xxs);
}

.storeHeader span{
  border: none;
  width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.storeHeader .name{
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: .1cap;
  font-weight: bold;
}

.storeHeader .desc{
  font-size: var(--fs-base);
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.storeBody{
  flex: none;
  width: 90%;
  height: fit-content;
  overflow: hidden;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  display: none;
}

.storeBody .label{
  width: 100%;
  text-align: left;
  font-size: var(--fs-2xl);
  font-family: 'Space Grotesk', sans-serif;
}

.storeBody>div{
  display: flex;
  flex-direction: column;
  gap: var(--p-xs);
  margin-bottom: 2%;
  width: 100%;
}

.storeBody .inputField{
  border: 1px solid var(--inblue);
  box-shadow: none;
}

.storeBody .section{
    border: none;
    border-bottom: .275vmin solid var(--bg);
  }

textarea.inputField{
  border-radius: var(--br-2xl);
  height: 20vmin;
}

.navbtns{
  gap: var(--p-md);
  padding: 0%;
  width: 96%;
  justify-content: flex-start;
  box-sizing: border-box;
  overflow-x: scroll;
  overflow-y: hidden !important;
  height: fit-content;
}

.otherlay{
  padding: 0%;
  margin: 0%;
  display: flex;
  width: 96%;
}

.navbtn{
  font-size: var(--fs-base);
  white-space: nowrap;
}

.list {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  align-items: center;
  justify-content: flex-start;
  min-height: 80vh; /* use vh instead of dvh */
  max-height: 80vh;
  gap: var(--p-sm);
}

.listImg{
  width: 60vmin;
  height: fit-content;
  object-fit: fill;
}

.list h2{
  background-color: #007bff;
}


.child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;                 /* prevent wrapping */
  gap: var(--p-md);
  box-sizing: border-box;
  width: 100%;                       /* 👈 full width */
  border-radius: var(--br-3xl);
  background-color: var(--dk-blue);
  text-align: left;
  padding: var(--p-lg);
  overflow: hidden;
  font-size: var(--fs-base);
}


.child > div {
  padding: var(--p-xs);
  font-size: var(--fs-sm);
  line-height: 1.6;
  letter-spacing: 0.1cap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif;
}

.child .title {
  display: block;
  font-family: 'Manrope', sans-serif;
  flex: 1;
  min-width: 0;
  max-width: 50%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.child .values {
  flex-shrink: 0;                     /* don't shrink */
  background-color: var(--bg);
  border-radius: var(--br-lg);
  padding: var(--p-xxs) var(--p-sm);
  font-weight: bold;
}

.child .values.f{
  display: none;
}

.child button {
  flex-shrink: 0;
  width: fit-content;
}


body, html{
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
  overflow-x: hidden;
  width: 100%;
}








*::-webkit-scrollbar{
  display: none;
}


@media screen and (min-width:768px) and (max-width:2560px) {

  :root{
    --varpad1:.3%;
    --flexImgSize: 8vmin;
  }

  .ordersum{
    gap: 1%;
    padding: 1%;
  }
  .ordersum .icon{
    font-size: 1.5rem;
  }
  .ordersum .content{
    gap: 1%;
    margin: 1% auto;
  }
  .circle{
    width: 45vmin;
    height: 45vmin;
  }
  .payprice{
    font-size: 1.2rem;
  }
  .qrcode{
    width: 80%;
  }

  .item{
    font-size: .9rem;
  }
  #itemlist{
    max-height: 95dvh;
  }
  .item>.pic{
    width: 11vmin;
    height: 11vmin;
    border-radius: 11px;
    padding: 1%;
  }
  .item>.content{
    width: 90%;
  }
  .circle.white{
    background-color: var(--txt);
    left: 23vmin;
    bottom: 1%;
  }
  .viz{
    transform: scale(15);
    transition: transform 2s ease;
  }
  .splogo{
    width: 8vmin;
  }
  #smg{
        width: 4vw;
        height: 4vw;
      }
  .alert{
    width: 45vmin;
    border: 0.5vmin solid var(--blue-dk);
    font-size: var(--fs-sm);
    border-radius: var(--br-3xl);
  }
  .topbar .logoHead img{
    width: clamp(5vmin,2vw,6vmin);
  }
  #menuBtn{
   display: none;
  }
  .leftPanel, .leftPanel.open{
    display: flex;
    position: relative;
    transform: translateX(0%);
    width: 15% !important;
    border: none !important;
    border-right: .25vmin solid var(--dk-blue) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: var(--bg) !important;
    height: 100% !important;
  }
  .mainPanel{
    width: 85% !important;
  }
  .mobile{
  display: none;
  }
  .storeHeader{
    flex-direction: row;
    text-align: left;
  }
  .storeHeader span{
    width: fit-content;
    padding: 0 var(--p-xs);
  }
  .storeBody .section{
    border: none;
    border-right: .275vmin solid var(--bg);
  }
  .storeBody>div{
    width: fit-content;
  }
  .list{
    width: 100% !important;
    align-items: flex-start;
  }
  .child{
    width: 80% !important;
    font-size: var(--fs-base);
  }
  .child .values.f{
  display: flex;
  }
  .child .title{
    max-width: 70%;
  }
}