html {
  scroll-behavior: smooth;
}
@font-face {
  font-family: 'MontserratEB';
  src: url("/assets/fonts/Montserrat-ExtraBold.woff2");
}
@font-face {
  font-family: 'MontserratM';
  src: url("/assets/fonts/Montserrat-Medium.woff2");
}
@font-face {
  font-family: 'MontserratR';
  src: url("/assets/fonts/Montserrat-Regular.woff2");
}
@font-face {
  font-family: 'AlanSans';
  src: url("/assets/fonts/AlanSans-Regular.woff2");
}
body{
  display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  
  }
  .quick-action-buttons{
    position: fixed;
    top: 2em;
    display: flex;
    gap: .5em;
  }
  .quick-action-buttons button{
    outline: none;
    background: #000;
    border: none;
    border-radius: 50%;
    height: 3em;
    width: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
  }
  .quick-action-buttons button:active{
    transform: scale(1.06);
  }
  .quick-action-buttons button svg{
    fill: #fff;
  }
  .whole-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .count-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
  }

.increase-or-decrease-buttons-wrapper{
  display: flex;
align-items: center;
justify-content: center;
gap: 50%;
position: absolute;
bottom: 1em;
width: 100%;
}
.increase-or-decrease-buttons-wrapper button{
  outline: none;
  border: 2px solid #5B5C6757;
  height: 80px;
  width: 80px;
  background: transparent;
  border-radius: 50%;
  font-size: 3em;
  transition: .3s;
  display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.increase-or-decrease-buttons-wrapper button:active{
  transform: scale(.9);
}
#decrease-count.active{
  opacity: 1;
pointer-events: true;
}
#decrease-count:disabled{
  opacity: 0;
  pointer-events: none;
}
.main-content{
  display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.counts-main-wrapper{
  display: flex;
  gap: 10px;
  overflow: scroll;
}

.delete-active-count{
  position: absolute;
  top: 10px;
  right: 10px;
  outline: none;
  border: none;
  background: #26262729;
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
pointer-events: none;
transition: 0.2s ease;
}
.delete-active-count:active{
  transform: scale(0.9);
}
.delete-active-count svg{
  height: 25px;
  width: 25px;
  flex-shrink: 0;
}
.count-card.active .delete-active-count {
  opacity: 1;
  pointer-events: auto;
}
#add-another-count{
  position: fixed;
  right: 0.2em;
  top: 50;
  outline: none;
border: none;
height: 80px;
width: 80px;
background: #000;
border-radius: 50%;
transition: .3s;
font-size: 3em;
transition: .3s;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
}
#add-another-count:active {
  transform: scale(.9);
}

/*** app initialization animation  ***/
.load-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.loader-title {
  font-size: 3rem;
  opacity: 0;
  animation: fadeIn .5s forwards 0.3s;
  font-family: AlanSans;
}

.loader-subtitle {
  font-size: 1.5rem;
  margin-top: 10px;
  opacity: 0;
  animation: fadeIn .6s forwards 1.3s;
  font-family: AlanSans;
}

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

body {
  overflow-x: hidden;
}

/*** carousel of counting  ***/

.counts-main-wrapper {
 height: 100vh;
  width: 100%;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: row;
  align-items: center;
  
  overflow-x: auto;
  overflow-y: hidden;
  
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  
  padding: 0 20px;
  gap: 20px;
  
  max-width: 100vw;
}

.counts-main-wrapper::-webkit-scrollbar {
  display: none;
}

.count-card {
  width: 90%;
  height: 70%;
  
  background: #f8f8f8;
  border-radius: 18px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  scroll-snap-align: center;
  flex-shrink: 0;
  
  transition: transform 0.25s ease, background 0.25s ease;
}

.count-card.active {
  transform: scale(1.08);
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.counter-number{
  font-family: MontserratR;
  font-size: 10em;
}


.name-of-item {
  margin-top: 6px;
  text-align: center;
  
  border: none;
  outline: none;
  background: transparent;
  
  font-family: AlanSans;
  font-size: 1.5em;
}



/****** reset counter ********/

.reset-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  font-family: Montserrat;
}

.reset-box {
  background: white;
  width: 80%;
  max-width: 320px;
  padding: 25px;
  border-radius: 15px;
  text-align: center;
  font-family: MontserratM;
  animation: popIn 0.25s ease;
}

.reset-buttons {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}

.reset-buttons button {
  flex: 1;
  padding: 12px 0;
  margin: 0 5px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-family: MontserratEB;
  background: #ececec;
  transition: 0.2s;
}

.reset-buttons button:active {
  transform: scale(0.95);
}

#resetYes {
  background: #000000;
  color: #fff;
}

@keyframes popIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}


/******** SETTINGS PANEL *******/
#settingsPanel {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 9999;
  pointer-events: none;
  font-family: MontserratM;
  transition: .2s;
}

.settings-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

#settingsPanel.show .settings-overlay {
  opacity: 1;
  pointer-events: all;
}

.settings-content {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 24px 20px;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 -8px 25px rgba(0,0,0,0.15);
  pointer-events: all;
}

#settingsPanel.show .settings-content {
  transform: translateY(0%);
}

.settings-content h2 {
  margin: 0 0 20px;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  font-family: MontserratEB;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
  font-size: 16px;
  color: #333;
}

.setting-item input[type="number"] {
  width: 70px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  text-align: center;
  font-family: MontserratEB;
}

.setting-item input[type="number"]:focus {
  outline: none;
  border-color: #000;
}

.setting-links {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.setting-links a {
  color: #000;
  text-decoration: none;
  font-size: 14px;
  cursor: help;
}

#closeSettings {
  margin-top: 24px;
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  background: #111;
  color: #fff;
  transition: transform 0.2s, background 0.2s;
  font-family: MontserratEB;
}

#closeSettings:active {
  transform: scale(0.97);
  background: #222;
}
#upgradeToPremiumBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  background: #62626217;
  color: #000;
  transition: transform 0.2s, background 0.2s;
  font-family: MontserratEB;
}
#upgradeToPremiumBtn:active {
  transform: scale(0.97);
  background: #6262624F;
}
#upgradeToPremiumBtn svg{
  fill: black;
}
#closePremium{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  background: #62626217;
  color: #000;
  transition: transform 0.2s, background 0.2s;
  font-family: MontserratEB;
}
#closePremium:active {
  transform: scale(0.97);
  background: #6262624F;
}
/******** PREMIUM PANEL *******/
#premiumPanel {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 9999;
  pointer-events: none;
  font-family: MontserratM;
  transition: .2s;
}

.premium-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.35s ease;
}

#premiumPanel.show .premium-overlay {
  opacity: 1;
  pointer-events: all;
}

.premium-content {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 24px 20px;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.15);
  pointer-events: all;
}

#premiumPanel.show .premium-content {
  transform: translateY(0%);
}

.premium-content h2 {
  margin: 0 0 20px;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  font-family: MontserratEB;
}
.small-cta-text{
  display: block;
  text-align: center;
}
.upgradeBenefitsList{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4em;
  margin-top: 10px;
  margin-bottom: 10px;
}
.upgradeBenefitsList .benefitsItems{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: MontserratM;
  gap: 10px;
}

.upgradeBenefitsList .benefitsItems svg{
  fill: #000;
}
#confirmUpgrade{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 24px;
  width: 100%;
  padding: 12px 0;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  background: #111;
  color: #fff;
  transition: transform 0.2s, background 0.2s;
  font-family: MontserratEB;
}
#confirmUpgrade #upgradePrice{
  
}
/************ DARK THEME ***********/
body.dark-theme {
  background: #101010;
  color: white;
}
body.dark-theme .settings-content {
  background: #1c1c1c;
}
body.dark-theme .setting-item,
body.dark-theme .setting-links a {
  color: #f0f0f0;
}
body.dark-theme .load-animation{
  background: #101010;
  color: #fff;
}
body.dark-theme .counter-number{
  color: #fff;
}
body.dark-theme .count-card{
  background: #1c1c1c;
}
body.dark-theme .name-of-item{
  color: #fff;
}
body.dark-theme .quick-action-buttons button{
  background: #fff;
}
body.dark-theme .quick-action-buttons svg{
fill: #000;
}
body.dark-theme #add-another-count{
  background: #fff;
  color: #000;
}
body.dark-theme .increase-or-decrease-buttons-wrapper button{
  border: 2px solid #fff;
  color: #fff;
}
body.dark-theme .reset-box{
  background: #1c1c1c;
}
body.dark-theme .delete-active-count {
  background: #fff;
}
body.dark-theme .delete-active-count svg{
  fill: #000;
}
body.dark-theme  #upgradeToPremiumBtn{
  background: #fff;
  color: #000;
}
body.dark-theme  #upgradeToPremiumBtn svg{
  fill: #000
}
body.dark-theme #closePremium{
  background: #1c1c1c;
  color: #fff;
}
body.dark-theme #premiumPanel h2 {
  color: #fff;
}
body.dark-theme  .benefitsItems{
  color: #fff;
}
body.dark-theme .benefitsItems svg{
  fill: #fff;
}
body.dark-theme .small-cta-text {
  color: #fff;
}
body.dark-theme .premium-content {
  background: #1c1c1c;
}
body.dark-theme #add-another-count svg{
  fill: #000;
}
/*
body.dark-theme {
  color: #000;
}*/

/***** checkbox element ******/

.custom-checkbox-input {
  display: none;
  visibility: hidden;
}

.custom-checkbox-label {
  display: flex;
  align-items: center;
  
  user-select: none;
  margin-top: 5px;
}

.custom-checkbox-label span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}

.checkbox-box {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid #9098A9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.checkbox-box svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease 0.1s;
}

.checkbox-box:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}

.checkbox-text {
  padding-left: 8px;
  font-family: MontserratR, sans-serif;
  font-size: 14px;
  color: #333;
}

.custom-checkbox-label:hover .checkbox-box {
  border-color: #000;
}

.custom-checkbox-input:checked+.custom-checkbox-label .checkbox-box {
  background: #ffff;
  border-color: #fff;
  animation: checkbox-wave 0.4s ease;
}

.custom-checkbox-input:checked+.custom-checkbox-label .checkbox-box svg {
  stroke-dashoffset: 0;
}

.custom-checkbox-input:checked+.custom-checkbox-label .checkbox-box:before {
  transform: scale(3.5);
  opacity: 0;
  transition: all 0.6s ease;
}

@keyframes checkbox-wave {
  50% {
    transform: scale(0.9);
  }
}

/****** app loader ******/

.appLoaderspinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  
  background: radial-gradient(farthest-side, #fff 94%, #0000) top/4px 4px no-repeat,
    conic-gradient(#0000 30%, #fff);
  
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
  
  animation: appLoaderspinner 1s infinite linear;
}

@keyframes appLoaderspinner {
  100% {
    transform: rotate(1turn);
  }
}








/*********** responsive Design  **********/