/* ===================================================================
   Pretty Health Care - Frontpage Custom Styles
   Supplements the compiled Tailwind CSS from _next/static/css/
   =================================================================== */

/* Client logos infinite scroll animation */
@keyframes scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-scroll {
    animation: scroll 30s linear infinite;
}

/* Alpine.js x-cloak: hide elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* ===================================================================
   Missing Tailwind utilities (not in compiled Next.js CSS bundle)
   =================================================================== */

/* --- Layout / Sizing --- */
.max-w-8xl { max-width: 90rem; }
.h-\[80px\] { height: 80px; }
.h-\[calc\(100vh-70px\)\] { height: calc(100vh - 70px); }
.h-\[2px\] { height: 2px; }
.top-\[70px\] { top: 70px; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.w-1\.5 { width: 0.375rem; }
.h-1\.5 { height: 0.375rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.pl-4 { padding-left: 1rem; }
.ml-6 { margin-left: 1.5rem; }
.mt-auto { margin-top: auto; }

/* --- Spacing (gap / space-y) --- */
.gap-0\.5 { gap: 0.125rem; }
.gap-\[5px\] { gap: 5px; }
.gap-1\.5 { gap: 0.375rem; }
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.125rem; }

/* --- Transitions --- */
.duration-350 { transition-duration: 350ms; }

/* --- Transforms (follow compiled Tailwind CSS variable composition) --- */
.rotate-45 { --tw-rotate: 45deg; }
.-rotate-45 { --tw-rotate: -45deg; }
.origin-center { transform-origin: center; }
.translate-y-\[7px\] { --tw-translate-y: 7px; }
.-translate-y-\[7px\] { --tw-translate-y: -7px; }
.-translate-x-1\/2 { --tw-translate-x: -50%; }
.left-1\/2 { left: 50%; }
.rotate-45, .-rotate-45, .translate-y-\[7px\], .-translate-y-\[7px\], .-translate-x-1\/2 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* --- Visual --- */
.backdrop-blur-xl { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.bg-white\/95 { background-color: rgb(255 255 255 / 0.95); }
.bg-white\/\[0\.98\] { background-color: rgb(255 255 255 / 0.98); }
.border-gray-100 { border-color: rgb(243 244 246); }
.border-gray-100\/80 { border-color: rgb(243 244 246 / 0.8); }
.border-l-2 { border-left-width: 2px; }
.hover\:bg-gray-50:hover { background-color: rgb(249 250 251); }

/* --- Brand color utilities (#0094de) --- */
.text-\[\#0094de\] { color: #0094de; }
.bg-\[\#0094de\] { background-color: #0094de; }
.bg-\[\#0094de\]\/\[0\.06\] { background-color: rgb(0 148 222 / 0.06); }
.bg-\[\#0094de\]\/\[0\.04\] { background-color: rgb(0 148 222 / 0.04); }
.bg-\[\#0094de\]\/40 { background-color: rgb(0 148 222 / 0.4); }
.border-\[\#0094de\]\/20 { border-color: rgb(0 148 222 / 0.2); }
.shadow-\[\#0094de\]\/20 { --tw-shadow-color: rgb(0 148 222 / 0.2); }
.shadow-\[\#0094de\]\/30 { --tw-shadow-color: rgb(0 148 222 / 0.3); }

.hover\:text-\[\#0094de\]:hover { color: #0094de; }
.hover\:bg-\[\#0094de\]\/\[0\.06\]:hover { background-color: rgb(0 148 222 / 0.06); }
.hover\:bg-\[\#0094de\]\/\[0\.04\]:hover { background-color: rgb(0 148 222 / 0.04); }
.hover\:bg-\[\#0080c4\]:hover { background-color: #0080c4; }
.hover\:border-\[\#0094de\]:hover { border-color: #0094de; }
.hover\:shadow-\[\#0094de\]\/30:hover { --tw-shadow-color: rgb(0 148 222 / 0.3); }