/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'GT Walsheim Trial';
  src: url('./assets/fonts/GT\ Walsheim/GT-Walsheim-Regular-Trial-BF651b7fc71a47d.otf')
    format('opentype');
}

/* Additional styles */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif, 'PT Sans', sans-serif, 'Noto Sans';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
.custom-text {
  font-family: 'Product Sans', sans-serif;
}
.pt-sans-regular {
  font-family: 'PT Sans', sans-serif;
  font-weight: 400 !important;
  font-style: normal;
}

.pt-sans-bold {
  font-family: 'PT Sans', sans-serif;
  font-weight: 700 !important;
  font-style: normal;
}

.pt-sans-regular-italic {
  font-family: 'PT Sans', sans-serif;
  font-weight: 400 !important;
  font-style: italic;
}

.pt-sans-bold-italic {
  font-family: 'PT Sans', sans-serif;
  font-weight: 700 !important;
  font-style: italic;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Hide scrollbar for Chrome, Safari, and Opera */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Firefox */
body {
  scrollbar-width: none;
}

/* Hide scrollbar for Internet Explorer and Edge */
body {
  -ms-overflow-style: none;
}


.card-info {
  --color: #603e9b;
  background: var(--color);
  opacity: 10;
  overflow: hidden;
  border-radius: 0.6rem;
  padding: 10px;
  color: #ffffff;
  /* ADD THESE 👇 */
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* Optional for .card if you want inner content to respect boundaries */
.card {
  --background: #d83f87;
  padding: 4px;
  border-radius: 1rem;
  overflow: hidden; /* Change from visible to hidden */
  background: var(--background);
  position: relative;
  z-index: 1;
  color: #ffffff;
}

.card .title {
  font-weight: bold;
  letter-spacing: 0.2em;
}

.custom-input input:-webkit-autofill {
  background-color: transparent !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0px 1000px #3b1e6d inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
.custom-input input:-webkit-autofill::placeholder {
  color: #ffffff !important;
  opacity: 1; /* Ensures visibility */
}

.custom-input::placeholder {
  color: white !important;
  font-weight: normal !important;
  opacity: 1; /* Ensure full visibility */
}

.custom-input:focus {
  border: 1px solid #ffffff !important; /* Keep border visible on focus */
  outline: none; /* Remove default outline */
}
.text-input {
  border: 1px solid #a7acdb !important; /* Permanent border color */
  outline: none; /* Remove default outline */
}
.text-input::placeholder {
  font-weight: normal !important;
  color: #c3c7ec !important;
  opacity: 1; /* Ensure full visibility */
}

.text-input:focus {
  border: 1px solid #c3c7ec !important; /* Keep border visible on focus */
  outline: none; /* Remove default outline */
}

.starBorder {
  border: 2px solid black; /* Square border around stars */
  border-radius: 4px; /* Slightly rounded corners */
  padding: 4px; /* Space inside border */
  margin: 2px; /* Space between stars */
}

.setting-input {
  border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Permanent border color */
  outline: none; /* Remove default outline */
}
.setting-input::placeholder {
  color: #c3c7ec !important;
  opacity: 1; /* Ensure full visibility */
  font-weight: normal !important;
}

.setting-input:focus {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  outline: none;
}

.custom-scroll::-webkit-scrollbar {
  width: 8px;
}

.custom-scroll .mantine-ScrollArea-thumb {
  background-color: #9f66ff !important;
}

.custom-scroll .mantine-ScrollArea-viewport::-webkit-scrollbar-thumb {
  background-color: #9f66ff;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.custom-scroll .mantine-ScrollArea-viewport::-webkit-scrollbar-thumb:hover {
  background-color: transparent;
}

.custom-scroll .mantine-ScrollArea-viewport::-webkit-scrollbar-track {
  background: transparent;
}
.StripeElement {
  z-index: 1;
}

.navbarMenusList {
  font-size: 15px;
  font-weight: bold;
}

.press-animation {
  animation: press 0.35s ease-in-out;
}

@keyframes press {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.85);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 1100px) {
  .mantine-Grid-root {
    flex-wrap: wrap;
  }
  .mantine-Grid-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}