/* public_html/css/style.css */

/* IMPORT FONT INTER */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
    /* DOGGEVITY ORANGE BRANDING */
    --background: 30 25% 97%;
    --foreground: 20 10% 15%;
    --card: 0 0% 100%;
    --card-foreground: 20 10% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 10% 15%;
    
    /* THE ORANGE COLOR */
    --primary: 14 76% 55%; 
    --primary-foreground: 0 0% 100%;
    
    --secondary: 30 20% 94%;
    --secondary-foreground: 20 10% 15%;
    --muted: 30 15% 94%;
    --muted-foreground: 20 5% 45%;
    --accent: 14 76% 55%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 30 15% 88%;
    --input: 30 15% 88%;
    --ring: 14 76% 55%;
    --radius: 0.75rem;
}

/* BASE STYLES - CRITICAL FOR LOOK & FEEL */
body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', sans-serif !important; /* Forces the font */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

* {
    border-color: hsl(var(--border));
}

/* UTILITIES */
.text-balance {
    text-wrap: balance;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hidden {
    display: none !important;
}

/* ANIMATIONS */
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}
.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pulse {
    50% {
        opacity: .5;
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* --- INPUT FIXES --- */

/* Hide arrows/spinners in number inputs */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}