@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


/* Author Name: Kunal Sarkar */
/* Company Name: Prodisto Technology Private Limited */

html, body {
  overscroll-behavior: none;
}


/* Font and color variables for global use */
:root {
  --font-primary: "Montserrat", sans-serif;
  --font-secondary: "Lato", sans-serif;
  --font-tertiary: "Great Vibes", cursive;
  --font-playfair: "Playfair Display", serif;

  --color-primary: #833375; /* PANTONE 512 C */
  --color-secondary: #cb9e51; /* PANTONE 7407 C */
  --color-primary-light: #ffccfd85;
  --color-secondary-light: #d8be905e; 
  --color-text-primary: #212121; /* Dark Text */
  --color-text-secondary: #6a6a6a; /* Light Text */
}


/* Apply fonts globally */
body {
  font-family: var(--font-secondary);
  color: var(--color-text-secondary);
}
.text-yellow {
  color: #F1CE90;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Font Style classes */
.font-primary {
  font-family: var(--font-primary);
}

.font-tertiary {
  font-family: var(--font-tertiary);
}

.font-playfair {
  font-family: var(--font-playfair);
}


/* Font Color classes */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-purple {
  color: var(--color-primary);
}

.text-gold {
  color: #F1CE90;
}


.text-cb9e51 {
  color: #cb9e51;
}

.text-yellow {
  color: var(--color-secondary);
}


/* Background Color classes */
.bg-primary {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

.bg-primary-light {
  background-color: var(--color-primary-light);
}

.bg-secondary-light {
  background-color: var(--color-secondary-light);
}

.bg-secondary-medium {
  background-color: #cb9e5191;
}


/* Before Background Color classes */
.before-bg-primary:before {
  background-color: var(--color-primary);
}

.before-bg-secondary:before {
  background-color: var(--color-secondary);
}


/* Before Text Color classes */
.before-text-primary:before {
  color: var(--color-primary);
}

.before-text-secondary:before {
  color: var(--color-secondary);
}


/* Hover Button Color classes */
.hover-bg-primary:hover {
  background-color: var(--color-primary);
}

.hover-bg-secondary:hover {
  background-color: var(--color-secondary);
  color: var(--color-text-primary);
}

.hover-bg-primary-light:hover {
  background-color: var(--color-primary-light);
}

.hover-bg-secondary-light:hover {
  background-color: var(--color-secondary-light);
}

/* Hover Text Color classes */
.hover-text-primary:hover {
  color: var(--color-primary);
}

.hover-text-secondary:hover {
  color: var(--color-secondary);
}

.hover-text-primary-light:hover {
  color: var(--color-primary-light);
}

.hover-text-secondary-light:hover {
  color: var(--color-secondary-light);
}

/* Border Color classes */
.border-primary {
  border-color: var(--color-primary);
}

.border-secondary {
  border-color: var(--color-secondary);
}

.border-primary-light {
  border-color: var(--color-primary-light);
}

.border-secondary-light {
  border-color: var(--color-secondary-light);
}

/* Focus Color classes */
.focus-primary:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.focus-secondary:focus {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.focus-primary-light:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

.focus-secondary-light:focus {
  outline: 2px solid var(--color-secondary-light);
  outline-offset: 2px;
}

/* Accent Color classes */
.accent-primary {
  accent-color: var(--color-primary);
}

.hover-accent-primary:hover {
  accent-color: var(--color-primary-light);
}

.accent-secondary {
  accent-color: var(--color-secondary);
}

.hover-accent-secondary:hover {
  accent-color: var(--color-secondary-light);
}

/* Tailwind utility classes for navigation (global, not scoped) */

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s;
}
.slide-enter-from {
  transform: translateX(100%);
}
.slide-leave-to {
  transform: translateX(100%);
}

canvas {
  width: 100% !important;
  height: 320px !important;
}

.iti {
  position: relative;
  display: block;
  width: 100%;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: transparent !important;
}

@keyframes glowBounceScale {
  0%, 100% {
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 0px rgba(59,130,246,0));
  }
  25% {
    transform: scale(1.15) translateY(-4px);
    filter: drop-shadow(0 0 6px rgba(59,130,246,0.7));
  }
  50% {
    transform: scale(1.05) translateY(0);
    filter: drop-shadow(0 0 10px rgba(59,130,246,1));
  }
  75% {
    transform: scale(1.15) translateY(-2px);
    filter: drop-shadow(0 0 6px rgba(59,130,246,0.7));
  }
}

.animate-glow-bounce-scale {
  animation: glowBounceScale 1.5s infinite ease-in-out;
}

@keyframes ripple {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  70% {
    transform: scale(1.4);
    opacity: 0.2;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.animate-ripple {
  animation: ripple 1.5s infinite ease-out;
}