@font-face {
  font-family: "Inter";
  /* Reference your other static resource */
  src: url("/resource/InterFont") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Loveablel Colors */
  --accent: hsl(121, 66%, 42%);
  --accent-foreground: hsl(0, 0%, 100%);
  --background: hsl(0, 0%, 98%);
  --border: hsl(220, 5%, 92%);
  --border-hover: var(--slds-g-color-border-base-1);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(220, 20%, 12%);
  --destructive: hsl(4, 86%, 58%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --foreground: hsl(220, 20%, 12%);
  --input: hsl(220, 5%, 92%);
  --muted: hsl(0 0% 96%);
  --muted-foreground: hsl(224, 5%, 47%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(220, 20%, 12%);
  --primary: #0586ff;
  --primary-foreground: hsl(0, 0%, 100%);
  --ring: hsl(209, 100%, 51%);
  --secondary: hsl(0, 0%, 96%);
  --secondary-foreground: hsl(220, 20%, 12%);
  --success: hsl(121, 66%, 42%);
  --success-foreground: hsl(0, 0%, 100%);
  --background-light-blue: hsla(209, 100%, 51%, 0.1);
}


/* --- 3. SPACING (PADDING) --- */
/* Scale: 0, 1(4px), 2(8px), 3(12px), 4(16px), 6(24px), 8(32px), 10(40px), 12(48px), 16(64px) */
.tw-p-0 {
  padding: 0px;
}

.tw-p-1 {
  padding: 0.25rem;
}

.tw-p-2 {
  padding: 0.5rem;
}

.tw-p-3 {
  padding: 0.75rem;
}

.tw-p-4 {
  padding: 1rem;
}

.tw-p-6 {
  padding: 1.5rem;
}

.tw-p-8 {
  padding: 2rem;
}

.tw-p-10 {
  padding: 2.5rem;
}

.tw-pt-0 {
  padding-top: 0px;
}

.tw-pt-1 {
  padding-top: 0.25rem;
}

.tw-pt-2 {
  padding-top: 0.5rem;
}

.tw-pt-3 {
  padding-top: 0.75rem;
}

.tw-pt-4 {
  padding-top: 1rem;
}

.tw-pt-6 {
  padding-top: 1.5rem;
}

.tw-pt-8 {
  padding-top: 2rem;
}

.tw-pt-10 {
  padding-top: 2.5rem;
}

.tw-pb-0 {
  padding-bottom: 0px;
}

.tw-pb-1 {
  padding-bottom: 0.25rem;
}

.tw-pb-2 {
  padding-bottom: 0.5rem;
}

.tw-pb-3 {
  padding-bottom: 0.75rem;
}

.tw-pb-4 {
  padding-bottom: 1rem;
}

.tw-pb-6 {
  padding-bottom: 1.5rem;
}

.tw-pb-8 {
  padding-bottom: 2rem;
}

.tw-pb-10 {
  padding-bottom: 2.5rem;
}

.tw-px-0 {
  padding-inline: 0px;
}

.tw-px-1 {
  padding-inline: 0.25rem;
}

.tw-px-2 {
  padding-inline: 0.5rem;
}

.tw-px-3 {
  padding-inline: 0.75rem;
}

.tw-px-4 {
  padding-inline: 1rem;
}

.tw-px-6 {
  padding-inline: 1.5rem;
}

.tw-px-8 {
  padding-inline: 2rem;
}

.tw-px-10 {
  padding-inline: 2.5rem;
}

.tw-py-0 {
  padding-block: 0px;
}

.tw-py-1 {
  padding-block: 0.25rem;
}

.tw-py-2 {
  padding-block: 0.5rem;
}

.tw-py-3 {
  padding-block: 0.75rem;
}

.tw-py-4 {
  padding-block: 1rem;
}

.tw-py-6 {
  padding-block: 1.5rem;
}

.tw-py-8 {
  padding-block: 2rem;
}

.tw-py-10 {
  padding-block: 2.5rem;
}


/* --- 3. SPACING (MARGIN) --- */
/* Scale: 0, 1(4px), 2(8px), 3(12px), 4(16px), 6(24px), 8(32px), 10(40px), 12(48px), 16(64px) */
.tw-m-0 {
  margin: 0px;
}

.tw-m-1 {
  margin: 0.25rem;
}

.tw-m-2 {
  margin: 0.5rem;
}

.tw-m-3 {
  margin: 0.75rem;
}

.tw-m-4 {
  margin: 1rem;
}

.tw-m-6 {
  margin: 1.5rem;
}

.tw-m-8 {
  margin: 2rem;
}

.tw-m-10 {
  margin: 2.5rem;
}

.tw-mt-0 {
  margin-top: 0px;
}

.tw-mt-1 {
  margin-top: 0.25rem;
}

.tw-mt-2 {
  margin-top: 0.5rem;
}

.tw-mt-3 {
  margin-top: 0.75rem;
}

.tw-mt-4 {
  margin-top: 1rem;
}

.tw-mt-6 {
  margin-top: 1.5rem;
}

.tw-mt-8 {
  margin-top: 2rem;
}

.tw-mt-10 {
  margin-top: 2.5rem;
}

.tw-mb-0 {
  margin-bottom: 0px;
}

.tw-mb-1 {
  margin-bottom: 0.25rem;
}

.tw-mb-2 {
  margin-bottom: 0.5rem;
}

.tw-mb-3 {
  margin-bottom: 0.75rem;
}

.tw-mb-4 {
  margin-bottom: 1rem;
}

.tw-mb-6 {
  margin-bottom: 1.5rem;
}

.tw-mb-8 {
  margin-bottom: 2rem;
}

.tw-mb-10 {
  margin-bottom: 2.5rem;
}

.tw-mx-0 {
  margin-inline: 0px;
}

.tw-mx-1 {
  margin-inline: 0.25rem;
}

.tw-mx-2 {
  margin-inline: 0.5rem;
}

.tw-mx-3 {
  margin-inline: 0.75rem;
}

.tw-mx-4 {
  margin-inline: 1rem;
}

.tw-mx-6 {
  margin-inline: 1.5rem;
}

.tw-mx-8 {
  margin-inline: 2rem;
}

.tw-mx-10 {
  margin-inline: 2.5rem;
}

.tw-my-0 {
  margin-block: 0px;
}

.tw-my-1 {
  margin-block: 0.25rem;
}

.tw-my-2 {
  margin-block: 0.5rem;
}

.tw-my-3 {
  margin-block: 0.75rem;
}

.tw-my-4 {
  margin-block: 1rem;
}

.tw-my-6 {
  margin-block: 1.5rem;
}

.tw-my-8 {
  margin-block: 2rem;
}

.tw-my-10 {
  margin-block: 2.5rem;
}

.tw-mx-auto {
  margin-left: auto;
  margin-right: auto;
}


/* --- 4. TYPOGRAPHY --- */
.tw-text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.tw-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.tw-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.tw-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.tw-text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.tw-text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.tw-text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}



.tw-font-thin {
  font-weight: 100;
}

.tw-font-light {
  font-weight: 300;
}

.tw-font-normal {
  font-weight: 400;
}

.tw-font-medium {
  font-weight: 500;
}

.tw-font-semibold {
  font-weight: 600;
}

.tw-font-bold {
  font-weight: 700;
}


/* --- 6. BORDERS  --- */
.tw-rounded-none {
  border-radius: 0px;
}

.tw-rounded-sm {
  border-radius: 0.125rem;
}

.tw-rounded {
  border-radius: 0.25rem;
}

.tw-rounded-md {
  border-radius: 0.375rem;
}

.tw-rounded-lg {
  border-radius: 0.5rem;
}

.tw-rounded-xl {
  border-radius: 0.75rem;
}

.tw-rounded-2xl {
  border-radius: 1rem;
}

.tw-rounded-full {
  border-radius: 9999px;
}


/* SHADOWS */
.tw-shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.tw-shadow {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.tw-shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.tw-shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}


/* Radio Design */
/* input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    z-index: 1;  
}
.custom-radio {
    height: 18px;
    width: 18px;
    border: 1px solid var(--border);
    border-radius: 50%;
    margin-right: 6px;
    position: relative;
}

.selectable-box {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.selectable-box:hover{
  border-color: var(--border-hover);
}

.selectable-box.selected {
    border-color: var(--primary);
    background-color: #f2f9ff;
    box-shadow: 0 0 0 1px #2563eb;
}
.selectable-box.selected .custom-radio {
    border-color: var(--primary);
}
.selectable-box.selected .custom-radio::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: #2563eb;
    border-radius: 50%;
}
.label-text {
    font-size: .875rem;
    font-weight: 500;
    color: var(--foreground);
    white-space: nowrap;
} */


/* Custom Radio Buttons */
.selectable-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1rem;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--card);
}

.selectable-box:hover {
  border-color: var(--border-hover);
}

.selectable-box:has(input[type="radio"]:checked) {
  border-color: var(--primary);
  background-color: var(--background-light-blue);
  box-shadow: 0 0 0 1px var(--primary);
}

.selectable-box input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-radio {
  height: 20px;
  width: 20px;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

input[type="radio"]:checked+.custom-radio {
  border-color: var(--primary);
}

input[type="radio"]:checked+.custom-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
}

.label-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground);
  white-space: nowrap;
}



/* TOOLTIP */
.info-wrapper {
  position: relative;
}

.info-icon {
  width: 16px;
  height: 16px;
  stroke: #6b7280;
  cursor: pointer;
}

.info-wrapper {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.info-wrapper .tooltip {
  display: none;
  position: absolute;
  bottom: 130%;
  right: -80px;
  width: 300px;
  background: var(--card);
  color: var(--foreground);
  font-size: 12px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.info-icon:hover+.tooltip,
.tooltip:hover {
  display: block;
  animation: fadeIn 0.25s ease-out;
}


.info-wrappers {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.info-wrappers .tooltip {
  display: none;
  position: absolute;
  bottom: 130%;
  right: -80px;
  width: 300px;
  background: var(--card);
  color: var(--foreground);
  font-size: 12px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  z-index: 10;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.info-icon:hover+.tooltip,
.tooltip:hover {
  display: block;
  animation: fadeIn 0.25s ease-out;
}



/* Container to handle responsiveness */
.floating-container {
  width: 100%;
  max-width: 320px;
  /* Limits width on desktop */
  margin-bottom: .5rem;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

/* THE INPUT */
.floating-input {
  display: flex;
  height: 3.5rem;
  /* h-14 */
  width: 100%;
  border-radius: 1rem;
  /* rounded-2xl */
  border: 2px solid var(--border);
  /* border-input */
  background-color: var(--card);
  padding: 1.25rem 1rem 0.25rem 1rem;
  /* px-4 pt-5 pb-1 */
  font-size: 1rem;
  /* text-base */
  color: var(--foreground);
  /* text-foreground */
  transition: border-color 0.2s ease-in-out;
  outline: none;
}

/* Hover State */
.floating-input:hover:not(:focus) {
  border-color: rgba(15, 23, 42, 0.3);
  /* hover:border-foreground/30 */
}

/* Focus State */
.floating-input:focus {
  border-color: var(--primary);
  /* border-primary - adjust to your brand color */
}

/* THE LABEL */
.floating-label {
  pointer-events: none;
  position: absolute;
  left: 1rem;
  /* left-4 */
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  /* text-muted-foreground */
  font-size: 1rem;
  /* text-base */
  transition: all 0.2s ease-in-out;
}

/* FLOATING ANIMATION LOGIC */
/* When focused OR when there is text inside (placeholder NOT shown) */
.floating-input:focus+.floating-label,
.floating-input:not(:placeholder-shown)+.floating-label {
  top: 0.5rem;
  /* top-2 */
  transform: translateY(0);
  font-size: 0.75rem;
  /* text-xs */
}

/* If the input is invalid AND not focused, turn the border red */
/* .floating-input:not(:placeholder-shown):invalid {
  border-color: var(--destructive);
} */

/* Specific styling for disabled state */
.floating-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.floating-input:-webkit-autofill,
.floating-input:-webkit-autofill:hover,
.floating-input:-webkit-autofill:focus,
.floating-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset !important;
  -webkit-text-fill-color: var(--foreground) !important;
  transition: background-color 5000s ease-in-out 0s;
}


/* Profile Image Avatar */
.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}


/* Error Message */
.error-message {
  color: red;
  font-size: 12px;
  padding: 3px;
}


/* Animations */
/* Animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/* Mobile Responsive Styles */
@media (max-width: 768px) {
  .tw-text-xs {
    font-size: 12px;
    line-height: 16px;
  }

  .tw-text-sm {
    font-size: 14px;
    line-height: 20px;
  }

  .tw-text-base {
    font-size: 16px;
    line-height: 24px;
  }

  .tw-text-lg {
    font-size: 18px;
    line-height: 28px;
  }

  .tw-text-xl {
    font-size: 20px;
    line-height: 28px;
  }

  .tw-text-2xl {
    font-size: 24px;
    line-height: 32px;
  }

  .tw-text-3xl {
    font-size: 30px;
    line-height: 36px;
  }


  /* Profile Avatar */
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .floating-container {
    width: 100%;
    max-width: 320px;
    /* Limits width on desktop */
    margin-bottom: 1rem;
  }

  .input-wrapper {
    position: relative;
    width: 100%;
  }

  /* THE INPUT */
  .floating-input {
    display: flex;
    height: 56px;
    /* h-14 */
    width: 100%;
    border-radius: 16px;
    /* rounded-2xl */
    border: 2px solid var(--border);
    /* border-input */
    background-color: var(--card);
    padding: 20px 16px 4px 16px;
    /* px-4 pt-5 pb-1 */
    font-size: 16px;
    /* text-base */
    color: var(--foreground);
    /* text-foreground */
    transition: border-color 0.2s ease-in-out;
    outline: none;
  }

  /* Hover State */
  .floating-input:hover:not(:focus) {
    border-color: rgba(15, 23, 42, 0.3);
    /* hover:border-foreground/30 */
  }

  /* Focus State */
  .floating-input:focus {
    border-color: var(--primary);
    /* border-primary - adjust to your brand color */
  }

  /* THE LABEL */
  .floating-label {
    pointer-events: none;
    position: absolute;
    left: 16px;
    /* left-4 */
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    /* text-muted-foreground */
    font-size: 16px;
    /* text-base */
    transition: all 0.2s ease-in-out;
  }

  /* FLOATING ANIMATION LOGIC */
  /* When focused OR when there is text inside (placeholder NOT shown) */
  .floating-input:focus+.floating-label,
  .floating-input:not(:placeholder-shown)+.floating-label {
    top: 8px;
    /* top-2 */
    transform: translateY(0);
    font-size: 12px;
    /* text-xs */
  }

  /* If the input is invalid AND not focused, turn the border red */
  /* .floating-input:not(:placeholder-shown):invalid {
  border-color: var(--destructive);
} */

  /* Specific styling for disabled state */
  .floating-input:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .floating-container {
    max-width: 100%;
    /* Spans full width on small screens */
  }

  .footer-bar button {
    font-size: 14px !important;
    padding: 12px 20px !important;
  }
}

@media (max-width: 400px) {
  .label-text {
    white-space: normal;
  }
}