/* Payan Pool Services - Custom Styles */

/* Smooth Scroll */
html { scroll-behavior: smooth; }

/* Selection */
::selection { background: #0077B6; color: white; }

/* Fade In Animation */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    opacity: 0;
    animation: slideIn 0.8s ease forwards;
}

.animate-slide-in {
    animation: slideIn 0.6s ease forwards;
}

/* Focus States */
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #0077B6 !important;
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.2);
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #0077B6; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #023E8A; }

/* Button & Link Transitions */
button, a { transition: all 0.3s ease; }

/* Service Content Prose */
.service-content { color: #64748B; font-size: 1.125rem; line-height: 1.8; }
.service-content h2 { color: #0A1628; font-size: 1.75rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; }
.service-content h3 { color: #0A1628; font-size: 1.375rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; }
.service-content p { margin-bottom: 1.25rem; }
.service-content > p:first-of-type { font-size: 1.25rem; color: #4b5563; }
.service-content a { color: #0077B6; text-decoration: underline; text-underline-offset: 3px; }
.service-content a:hover { color: #023E8A; }
.service-content ul { margin: 1.5rem 0; padding-left: 0; list-style: none; }
.service-content ul li { position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; }
.service-content ul li::before { content: ''; position: absolute; left: 0; top: 0.6rem; width: 8px; height: 8px; background: #0077B6; border-radius: 50%; }
.service-content strong { color: #0A1628; font-weight: 600; }

/* Line Clamp */
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Mobile Touch */
@media (hover: none) and (pointer: coarse) {
    a, button { min-height: 44px; }
}

/* Mobile Form */
@media (max-width: 640px) {
    input, textarea, select { font-size: 16px !important; }
}