/* ==========================================================================
   SEARCHKARO / JUSTDIAL CLONE - MASTER RESPONSIVE STYLESHEET
   File: assets/css/style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. UNIVERSAL RESET & BOX SIZING
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   2. ROOT & VIEWPORT SETTINGS
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

/* --------------------------------------------------------------------------
   3. RESPONSIVE BODY WITH DYNAMIC VIEWPORT & IPHONE NOTCH SUPPORT
   -------------------------------------------------------------------------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    line-height: 1.5;
    width: 100%;
    min-height: 100vh;
    min-height: 100vh; /* Mobile dynamic address bar fix */
    overflow-x: hidden;
    position: relative;
    /* Bottom bar padding with iOS gesture bar safe-area inset */
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
}

/* Desktop screen doesn't need bottom space */
@media (min-width: 768px) {
    body {
        padding-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   4. FLUID MEDIA & IMAGES
   -------------------------------------------------------------------------- */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   5. IPHONE / IOS SAFARI INPUT AUTO-ZOOM PREVENTION (CRUCIAL)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    input, select, textarea {
        font-size: 16px !important; /* Prevents iPhone Safari from zooming into the page */
    }
}

/* --------------------------------------------------------------------------
   6. TOUCH ELEMENTS & TAP HIGHLIGHT FIX
   -------------------------------------------------------------------------- */
button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button:focus, a:focus, input:focus, select:focus, textarea:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   7. HIDE SCROLLBAR UTILITY (FOR APP-LIKE HORIZONTAL CAROUSELS)
   -------------------------------------------------------------------------- */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

/* --------------------------------------------------------------------------
   8. DESKTOP SLIM CUSTOM SCROLLBAR
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    ::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }
    ::-webkit-scrollbar-track {
        background: #f1f5f9;
    }
    ::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 9999px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
}

/* --------------------------------------------------------------------------
   9. LINE CLAMPING / TEXT TRUNCATION UTILITIES
   -------------------------------------------------------------------------- */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   10. MODAL & POPUP ENTRANCE ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-animate {
    animation: modalSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --------------------------------------------------------------------------
   11. BRAND ACCENT COLORS (SEARCHKARO / JUSTDIAL THEME)
   -------------------------------------------------------------------------- */
:root {
    --sk-blue: #0076d7;
    --sk-dark-blue: #003366;
    --sk-orange: #ff5200;
}

.text-sk-blue { color: var(--sk-blue); }
.bg-sk-blue { background-color: var(--sk-blue); }
.border-sk-blue { border-color: var(--sk-blue); }

.text-sk-orange { color: var(--sk-orange); }
.bg-sk-orange { background-color: var(--sk-orange); }
.border-sk-orange { border-color: var(--sk-orange); }