@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	:hsl(209, 100%, 51%);
  --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: 16px 20px;
  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: 1rem;
}

.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;
}

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


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


/* 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 */
  }
}