/* =====================================================================
   Mobile App-Feel Base (Wave 3 — W3.4 / W3.9)
   ---------------------------------------------------------------------
   Single foundational sheet enforcing native-app behavior on phones:
   - No iOS zoom on input focus (≥16px font-size)
   - Min 44×44 touch targets per WCAG/Apple HIG
   - Safe-area-inset support (notch / home-indicator devices)
   - Faster tap (touch-action: manipulation, removes 300ms delay)
   - Smooth momentum scroll on iOS
   - Skeleton loader + haptic-ready button class
   ===================================================================== */

/* ---------- Faster taps + smooth scroll ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }
a, button, [role="button"], .btn, input[type="submit"], input[type="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(236,72,153,0.12);
}

/* ---------- Mobile-only rules (≤768px) ---------- */
@media (max-width: 768px) {
    /* No-zoom inputs (iOS auto-zooms when font-size < 16) */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Min touch targets — 44×44 (Apple HIG) / 48×48 (Material) compromise = 44 */
    .btn, button:not(.tnw-no-min), a.btn, .nav-link, .dropdown-item,
    input[type="submit"], input[type="button"], input[type="reset"] {
        min-height: 44px;
        line-height: 1.2;
    }

    /* Icon-only buttons get min-width too */
    .btn-icon, button.icon-only, .icon-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Safe-area for any fixed-bottom element that opts in */
    .has-safe-area-bottom {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    }
    .has-safe-area-top {
        padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    }

    /* Prevent horizontal scroll surprises */
    body { overflow-x: hidden; }

    /* Big-thumb-friendly form spacing */
    .form-group, .mb-3 { margin-bottom: 16px; }
    label { margin-bottom: 6px; font-weight: 600; }
}

/* ---------- Skeleton loader utility (W3.9) ---------- */
.tnw-skeleton {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: tnwSkeletonShimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
    display: block;
}
.tnw-skeleton.text { height: 14px; margin: 8px 0; }
.tnw-skeleton.title { height: 22px; margin: 10px 0; width: 70%; }
.tnw-skeleton.avatar { width: 44px; height: 44px; border-radius: 999px; }
.tnw-skeleton.card { height: 120px; margin: 12px 0; }
@keyframes tnwSkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Press-feedback class (W3.9 — haptic-ready buttons) ---------- */
.tnw-press {
    transition: transform 0.12s ease, opacity 0.12s ease;
    will-change: transform;
}
.tnw-press:active {
    transform: scale(0.96);
    opacity: 0.9;
}

/* ---------- Page transition fade-in (W3.9) ---------- */
@media (max-width: 768px) {
    main, .main-content, [role="main"], .td_hero, #front-content {
        animation: tnwFadeIn 0.28s ease both;
    }
}
@keyframes tnwFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Bottom-sheet shared styles (W3.3) ---------- */
.tnw-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 9990;
}
.tnw-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
.tnw-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -16px 40px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(.32,.72,0,1);
    z-index: 9991;
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
.tnw-sheet.open { transform: translateY(0); }
.tnw-sheet__handle {
    width: 44px; height: 5px;
    background: #cbd5e1;
    border-radius: 999px;
    margin: 10px auto 8px;
}
.tnw-sheet__header {
    padding: 4px 18px 14px;
    border-bottom: 1px solid #f1f5f9;
    display: flex; align-items: center; justify-content: space-between;
}
.tnw-sheet__title { font-weight: 800; font-size: 1.05rem; color: #0f172a; margin: 0; }
.tnw-sheet__close {
    background: #f1f5f9; border: none; width: 36px; height: 36px;
    border-radius: 999px; cursor: pointer; color: #475569;
    font-size: 18px; line-height: 1;
}
.tnw-sheet__body { padding: 16px 18px; }

/* On desktop: degrade to centered card (still usable but no slide-up) */
@media (min-width: 769px) {
    .tnw-sheet {
        left: 50%; right: auto; bottom: 50%;
        transform: translate(-50%, 50%) scale(0.95);
        max-width: 480px; width: 90%;
        border-radius: 16px;
        max-height: 80vh;
    }
    .tnw-sheet.open { transform: translate(-50%, 50%) scale(1); }
}

/* ---------- Sticky CTA shared styles (W3.8) ---------- */
.tnw-sticky-cta {
    position: fixed; left: 0; right: 0;
    bottom: 70px; /* sits above 56px bottom-nav + ~14px gap */
    padding: 10px 16px;
    z-index: 7900;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #ffffff 32%);
    transition: transform 0.25s ease;
    pointer-events: none;
}
.tnw-sticky-cta.hidden { transform: translateY(120%); }
.tnw-sticky-cta__btn {
    pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    width: 100%; max-width: 540px; margin: 0 auto;
    padding: 14px 20px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: #fff;
    border: none; border-radius: 14px;
    font-weight: 800; font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(236,72,153,0.32);
    min-height: 52px;
}
.tnw-sticky-cta__btn:hover { color: #fff; transform: translateY(-1px); }
@media (min-width: 769px) {
    .tnw-sticky-cta { display: none; }
}

/* ---------- A11y respectfully ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}