/* ============================================================
   Dosbing.ai — Shared Styles
   ============================================================ */

/* ============================================================
   1. Core Resets & iOS Compatibility
   ============================================================ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    background: #fff;
    height: -webkit-fill-available;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #1E293B;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

h1, h2, h3, h4, .font-heading {
    font-family: 'Montserrat', sans-serif;
}


/* ============================================================
   2. Hero Full-Height Fix (iOS 100vh Bug)
   ============================================================ */
.hero-full-height {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}


/* ============================================================
   3. Glassmorphism Navbar (iOS Safari -webkit-backdrop-filter)
   ============================================================ */
.glass-navbar {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: -webkit-sticky;
    position: fixed;
}


/* ============================================================
   4. Backdrop-blur Overrides (iOS Safari Prefix)
   ============================================================ */
.backdrop-blur-sm  { -webkit-backdrop-filter: blur(4px);  backdrop-filter: blur(4px);  }
.backdrop-blur     { -webkit-backdrop-filter: blur(8px);  backdrop-filter: blur(8px);  }
.backdrop-blur-md  { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.backdrop-blur-lg  { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }


/* ============================================================
   5. Hero Gradient
   ============================================================ */
.hero-gradient {
    background: radial-gradient(circle at top right, #1CB8A3 0%, #1A4AB6 50%, #0F172A 100%);
}


/* ============================================================
   6. Typing Cursor Animation
   ============================================================ */
.typing-cursor::after {
    content: '|';
    -webkit-animation: blink 1s step-end infinite;
    animation: blink 1s step-end infinite;
}

@-webkit-keyframes blink { 50% { opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }


/* ============================================================
   7. Marquee Animation (-webkit- prefix for older Safari)
   ============================================================ */
@-webkit-keyframes marquee {
    0%   { -webkit-transform: translateX(0%); transform: translateX(0%); }
    100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes marquee {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

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


/* ============================================================
   8. Float Animation (-webkit- prefix)
   ============================================================ */
@-webkit-keyframes float {
    0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); }
    50%       { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-20px); }
}

.animate-float {
    -webkit-animation: float 6s ease-in-out infinite;
    animation: float 6s ease-in-out infinite;
}


/* ============================================================
   9. Glow Pulse Animation (-webkit- prefix)
   ============================================================ */
@-webkit-keyframes glow-pulse {
    0%, 100% { -webkit-box-shadow: 0 0 5px rgba(28,184,163,0.2); box-shadow: 0 0 5px rgba(28,184,163,0.2); }
    50%       { -webkit-box-shadow: 0 0 25px rgba(28,184,163,0.5); box-shadow: 0 0 25px rgba(28,184,163,0.5); }
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(28,184,163,0.2); }
    50%       { box-shadow: 0 0 25px rgba(28,184,163,0.5); }
}


/* ============================================================
   10. Custom Scrollbar (WebKit Only)
   ============================================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #1A4AB6; border-radius: 10px; }


/* ============================================================
   11. Alpine.js x-cloak
   ============================================================ */
[x-cloak] { display: none !important; }


/* ============================================================
   12. Images — Prevent Overflow on iOS
   ============================================================ */
img {
    max-width: 100%;
    height: auto;
    -webkit-user-select: none;
}

img[alt*="Dosbing"] {
    max-width: 120px;
    object-fit: contain;
}


/* ============================================================
   13. iOS Safe Area (Notch / Dynamic Island / Home Indicator)
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    .ios-safe-bottom {
        bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
    }
    footer {
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
    nav {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}


/* ============================================================
   14. Prevent iOS Auto-zoom on Form Inputs (font-size >= 16px)
   ============================================================ */
input, select, textarea, button {
    font-size: 16px !important;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* Restore border-radius for styled buttons */
button, a.rounded-full, a.rounded-2xl, a.rounded-3xl,
div.rounded-full, div.rounded-2xl, div.rounded-3xl {
    border-radius: inherit;
}


/* ============================================================
   15. iOS Hover/Transform Fix (touch devices)
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    .hover\:-translate-y-1:active  { --tw-translate-y: -0.25rem; -webkit-transform: translateY(var(--tw-translate-y)); transform: translateY(var(--tw-translate-y)); }
    .hover\:-translate-y-2:active  { --tw-translate-y: -0.5rem; -webkit-transform: translateY(var(--tw-translate-y)); transform: translateY(var(--tw-translate-y)); }
    .hover\:scale-110:active       { --tw-scale-x: 1.1; --tw-scale-y: 1.1; -webkit-transform: scaleX(1.1) scaleY(1.1); transform: scaleX(1.1) scaleY(1.1); }
    .group:active .group-hover\:scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; -webkit-transform: scaleX(1.1) scaleY(1.1); transform: scaleX(1.1) scaleY(1.1); }
}


/* ============================================================
   16. Fix bg-clip-text Gradient on iOS Safari
   ============================================================ */
.text-transparent.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ============================================================
   17. Stats Responsive Border Fix
   ============================================================ */
@media (max-width: 1023px) {
    .stats-grid > div { border-left: none !important; }
    .stats-grid > div:nth-child(odd) { border-right: 1px solid #f1f5f9; }
}


/* ============================================================
   18. Momentum Scrolling on iOS
   ============================================================ */
.overflow-y-auto, .overflow-auto, .overflow-scroll {
    -webkit-overflow-scrolling: touch;
}


/* ============================================================
   19. Responsive iFrame Fix (YouTube Embed)
   ============================================================ */
.relative.pb-\[56\.25\%\] iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}


/* ============================================================
   20. Fix -webkit-backdrop-filter Inline Styles
   ============================================================ */
[style*="-webkit-backdrop-filter-blur"] {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}