/*!
 * Imdad Portal Theme — Custom Design System
 * ============================================
 * Supplements Tailwind CSS CDN with component styles,
 * animations, and utility classes unique to the Imdad Portal.
 *
 * Sections:
 *  1. Design Tokens (Custom Properties)
 *  2. Base Resets & Typography
 *  3. Glassmorphism Utilities
 *  4. Gradient Text
 *  5. Animations & Keyframes
 *  6. Card Components
 *  7. Badge Components
 *  8. Button Components
 *  9. Search Dropdown
 * 10. Timeline / Tracker
 * 11. Form Inputs
 * 12. Section Headings
 * 13. Stats Counter
 * 14. Footer
 * 15. Mobile Menu Slide-over
 * 16. Announcement Marquee
 * 17. Custom Scrollbar
 * 18. Urdu / RTL Support
 * 19. Responsive Utilities
 * 20. Misc Helpers
 */


/* ============================================================
   1. DESIGN TOKENS (Custom Properties)
   ============================================================ */

:root {
    /* Primary Green */
    --ip-primary:       #1A7A4A;
    --ip-primary-dark:  #15683E;
    --ip-primary-light: #22945a;
    --ip-accent:        #2E9E62;
    --ip-accent-dark:   #259456;

    /* Navy */
    --ip-navy:      #1A2E44;
    --ip-navy-dark: #0F1B2D;
    --ip-navy-mid:  #243B53;

    /* Green Tints */
    --ip-green-light: #E8F5EE;
    --ip-green-100:   #d4edda;
    --ip-green-50:    #f0faf4;

    /* Surfaces */
    --ip-white:       #FFFFFF;
    --ip-gray-50:     #F9FAFB;
    --ip-gray-100:    #F3F4F6;
    --ip-gray-200:    #E5E7EB;
    --ip-gray-300:    #D1D5DB;
    --ip-gray-400:    #9CA3AF;
    --ip-gray-500:    #6B7280;
    --ip-gray-600:    #4B5563;
    --ip-gray-700:    #374151;
    --ip-gray-800:    #1F2937;
    --ip-gray-900:    #111827;

    /* Semantic */
    --ip-danger:  #DC2626;
    --ip-warning: #D97706;
    --ip-info:    #2563EB;
    --ip-success: #16A34A;

    /* Shadows */
    --ip-shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ip-shadow:     0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --ip-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --ip-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --ip-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Radii */
    --ip-radius-sm:   0.375rem;
    --ip-radius:      0.5rem;
    --ip-radius-md:   0.75rem;
    --ip-radius-lg:   1rem;
    --ip-radius-xl:   1.5rem;
    --ip-radius-full: 9999px;

    /* Transitions */
    --ip-transition-fast: 150ms ease;
    --ip-transition:      250ms ease;
    --ip-transition-slow: 350ms ease;

    /* Z-index scale */
    --ip-z-dropdown:  40;
    --ip-z-sticky:    50;
    --ip-z-overlay:   60;
    --ip-z-modal:     70;
    --ip-z-toast:     80;

    /* Blur */
    --ip-blur: 12px;
}


/* ============================================================
   2. BASE RESETS & TYPOGRAPHY
   ============================================================ */

/* Smooth box-sizing everywhere */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margins on common elements inside .ip scope */
.ip h1, .ip h2, .ip h3, .ip h4, .ip h5, .ip h6,
.ip p, .ip figure, .ip blockquote, .ip dl, .ip dd {
    margin: 0;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Base body font (falls back to Tailwind's sans) */
body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--ip-gray-800);
    line-height: 1.6;
}

/* Headings */
.ip-heading-xl {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--ip-navy);
    letter-spacing: -0.02em;
}

.ip-heading-lg {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ip-navy);
    letter-spacing: -0.01em;
}

.ip-heading-md {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ip-navy);
}

.ip-heading-sm {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ip-navy-mid);
}

/* Truncated text */
.ip-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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


/* ============================================================
   3. GLASSMORPHISM UTILITIES
   ============================================================ */

.ip-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(var(--ip-blur));
    -webkit-backdrop-filter: blur(var(--ip-blur));
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--ip-shadow-md);
}

.ip-glass-dark {
    background: rgba(26, 46, 68, 0.85);
    backdrop-filter: blur(var(--ip-blur));
    -webkit-backdrop-filter: blur(var(--ip-blur));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--ip-shadow-lg);
}

.ip-glass-subtle {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.ip-glass-green {
    background: rgba(232, 245, 238, 0.7);
    backdrop-filter: blur(var(--ip-blur));
    -webkit-backdrop-filter: blur(var(--ip-blur));
    border: 1px solid rgba(26, 122, 74, 0.15);
}


/* ============================================================
   4. GRADIENT TEXT
   ============================================================ */

.ip-gradient-text {
    background: linear-gradient(135deg, var(--ip-primary), var(--ip-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Fallback */
}

.ip-gradient-text-navy {
    background: linear-gradient(135deg, var(--ip-navy), var(--ip-navy-mid));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.ip-gradient-text-hero {
    background: linear-gradient(135deg, var(--ip-primary) 0%, var(--ip-accent) 50%, #3BB77E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* ============================================================
   5. ANIMATIONS & KEYFRAMES
   ============================================================ */

/* --- Marquee --- */
@keyframes ipMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Floating Blobs --- */
@keyframes ipFloat1 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(30px, -20px); }
}
@keyframes ipFloat2 {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-30px, 20px); }
}
@keyframes ipFloat3 {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

/* --- Shimmer Loading --- */
@keyframes ipShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* --- Pulse Glow --- */
@keyframes ipPulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(26, 122, 74, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(26, 122, 74, 0);
    }
}

/* --- Fade-in Up --- */
@keyframes ipFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Fade-in --- */
@keyframes ipFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Scale-in --- */
@keyframes ipScaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Slide-in from Right --- */
@keyframes ipSlideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Slide-in from Left --- */
@keyframes ipSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Spin --- */
@keyframes ipSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* --- Bounce subtle --- */
@keyframes ipBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}


/* --- Animation Utility Classes --- */

.ip-marquee {
    animation: ipMarquee 35s linear infinite;
}

.ip-animate-fade-in-up {
    animation: ipFadeInUp 0.5s ease-out forwards;
}

.ip-animate-fade-in {
    animation: ipFadeIn 0.4s ease-out forwards;
}

.ip-animate-scale-in {
    animation: ipScaleIn 0.3s ease-out forwards;
}

.ip-animate-slide-right {
    animation: ipSlideInRight 0.35s ease-out forwards;
}

.ip-animate-slide-left {
    animation: ipSlideInLeft 0.35s ease-out forwards;
}

.ip-animate-spin {
    animation: ipSpin 1s linear infinite;
}

.ip-animate-bounce {
    animation: ipBounce 1.5s ease-in-out infinite;
}

.ip-animate-float1 {
    animation: ipFloat1 6s ease-in-out infinite;
}

.ip-animate-float2 {
    animation: ipFloat2 8s ease-in-out infinite;
}

.ip-animate-float3 {
    animation: ipFloat3 7s ease-in-out infinite;
}

/* Shimmer placeholder */
.ip-shimmer {
    background: linear-gradient(
        90deg,
        var(--ip-gray-100) 25%,
        var(--ip-gray-200) 50%,
        var(--ip-gray-100) 75%
    );
    background-size: 200% 100%;
    animation: ipShimmer 1.5s ease-in-out infinite;
    border-radius: var(--ip-radius);
}

/* Pulse glow ring */
.ip-pulse-glow {
    animation: ipPulseGlow 2s ease-in-out infinite;
}

/* Staggered children — add to parent */
.ip-stagger > * {
    opacity: 0;
    animation: ipFadeInUp 0.5s ease-out forwards;
}
.ip-stagger > *:nth-child(1)  { animation-delay: 0.05s; }
.ip-stagger > *:nth-child(2)  { animation-delay: 0.10s; }
.ip-stagger > *:nth-child(3)  { animation-delay: 0.15s; }
.ip-stagger > *:nth-child(4)  { animation-delay: 0.20s; }
.ip-stagger > *:nth-child(5)  { animation-delay: 0.25s; }
.ip-stagger > *:nth-child(6)  { animation-delay: 0.30s; }
.ip-stagger > *:nth-child(7)  { animation-delay: 0.35s; }
.ip-stagger > *:nth-child(8)  { animation-delay: 0.40s; }
.ip-stagger > *:nth-child(9)  { animation-delay: 0.45s; }
.ip-stagger > *:nth-child(10) { animation-delay: 0.50s; }
.ip-stagger > *:nth-child(11) { animation-delay: 0.55s; }
.ip-stagger > *:nth-child(12) { animation-delay: 0.60s; }

/* Scroll-triggered animation helper — hidden until JS adds .ip-visible */
.ip-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.ip-reveal.ip-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .ip-marquee,
    .ip-animate-fade-in-up,
    .ip-animate-fade-in,
    .ip-animate-scale-in,
    .ip-animate-slide-right,
    .ip-animate-slide-left,
    .ip-animate-spin,
    .ip-animate-bounce,
    .ip-animate-float1,
    .ip-animate-float2,
    .ip-animate-float3,
    .ip-shimmer,
    .ip-pulse-glow,
    .ip-stagger > *,
    .ip-reveal {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ============================================================
   6. CARD COMPONENTS
   ============================================================ */

.ip-card {
    background: var(--ip-white);
    border: 1px solid var(--ip-gray-200);
    border-radius: var(--ip-radius-lg);
    box-shadow: var(--ip-shadow);
    transition:
        box-shadow var(--ip-transition),
        transform var(--ip-transition),
        border-color var(--ip-transition);
    overflow: hidden;
}

.ip-card:hover {
    box-shadow: var(--ip-shadow-lg);
    border-color: var(--ip-gray-300);
}

.ip-card-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--ip-shadow-xl);
}

.ip-card-body {
    padding: 1.25rem;
}

.ip-card-body-sm {
    padding: 1rem;
}

.ip-card-body-lg {
    padding: 1.75rem;
}

/* Card with green top accent */
.ip-card-accent-top {
    border-top: 3px solid var(--ip-primary);
}

/* Card with green left accent */
.ip-card-accent-left {
    border-left: 3px solid var(--ip-primary);
}

/* Glass card variant */
.ip-card-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(var(--ip-blur));
    -webkit-backdrop-filter: blur(var(--ip-blur));
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--ip-radius-lg);
    box-shadow: var(--ip-shadow-md);
    overflow: hidden;
    transition:
        box-shadow var(--ip-transition),
        transform var(--ip-transition);
}

.ip-card-glass:hover {
    box-shadow: var(--ip-shadow-xl);
}

/* Navy background card */
.ip-card-navy {
    background: var(--ip-navy);
    color: var(--ip-white);
    border: none;
    border-radius: var(--ip-radius-lg);
    box-shadow: var(--ip-shadow-lg);
    overflow: hidden;
}

/* Stat card (glass on green bg) */
.ip-card-stat {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(var(--ip-blur));
    -webkit-backdrop-filter: blur(var(--ip-blur));
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--ip-radius-lg);
    padding: 1.5rem;
    text-align: center;
    transition: transform var(--ip-transition), box-shadow var(--ip-transition);
}

.ip-card-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}


/* ============================================================
   7. BADGE COMPONENTS
   ============================================================ */

.ip-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--ip-radius-full);
    white-space: nowrap;
    transition: background-color var(--ip-transition-fast);
}

/* Status: Active / Open / Live */
.ip-badge-active,
.ip-badge-open,
.ip-badge-live {
    background: #dcfce7;
    color: #15803d;
}

/* Status: Closed / Expired */
.ip-badge-closed,
.ip-badge-expired {
    background: #fee2e2;
    color: #b91c1c;
}

/* Status: Coming Soon / Upcoming */
.ip-badge-soon,
.ip-badge-upcoming {
    background: #fef3c7;
    color: #92400e;
}

/* Status: Pending / In Progress */
.ip-badge-pending,
.ip-badge-progress {
    background: #dbeafe;
    color: #1d4ed8;
}

/* Neutral */
.ip-badge-neutral {
    background: var(--ip-gray-100);
    color: var(--ip-gray-600);
}

/* Primary variant */
.ip-badge-primary {
    background: var(--ip-green-light);
    color: var(--ip-primary);
}

/* Dot indicator inside badge */
.ip-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ip-badge-dot-green  { background: #16a34a; }
.ip-badge-dot-red    { background: #dc2626; }
.ip-badge-dot-amber  { background: #d97706; }
.ip-badge-dot-blue   { background: #2563eb; }
.ip-badge-dot-gray   { background: #9ca3af; }


/* ============================================================
   8. BUTTON COMPONENTS
   ============================================================ */

.ip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--ip-radius);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--ip-transition-fast),
        color var(--ip-transition-fast),
        border-color var(--ip-transition-fast),
        box-shadow var(--ip-transition-fast),
        transform var(--ip-transition-fast);
    white-space: nowrap;
    user-select: none;
}

.ip-btn:active {
    transform: scale(0.97);
}

.ip-btn:disabled,
.ip-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Primary — green gradient */
.ip-btn-primary {
    background: linear-gradient(135deg, var(--ip-primary), var(--ip-accent));
    color: var(--ip-white);
    border-color: transparent;
}
.ip-btn-primary:hover {
    background: linear-gradient(135deg, var(--ip-primary-dark), var(--ip-accent-dark));
    box-shadow: 0 4px 14px rgba(26, 122, 74, 0.35);
}
.ip-btn-primary:focus-visible {
    outline: 2px solid var(--ip-primary);
    outline-offset: 2px;
}

/* Outline — green border */
.ip-btn-outline {
    background: transparent;
    color: var(--ip-primary);
    border-color: var(--ip-primary);
}
.ip-btn-outline:hover {
    background: var(--ip-primary);
    color: var(--ip-white);
    box-shadow: 0 4px 14px rgba(26, 122, 74, 0.25);
}
.ip-btn-outline:focus-visible {
    outline: 2px solid var(--ip-primary);
    outline-offset: 2px;
}

/* Ghost — transparent */
.ip-btn-ghost {
    background: transparent;
    color: var(--ip-primary);
    border-color: transparent;
}
.ip-btn-ghost:hover {
    background: var(--ip-green-light);
}
.ip-btn-ghost:focus-visible {
    outline: 2px solid var(--ip-primary);
    outline-offset: 2px;
}

/* Navy variant */
.ip-btn-navy {
    background: var(--ip-navy);
    color: var(--ip-white);
    border-color: var(--ip-navy);
}
.ip-btn-navy:hover {
    background: var(--ip-navy-mid);
    border-color: var(--ip-navy-mid);
    box-shadow: 0 4px 14px rgba(26, 46, 68, 0.3);
}

/* White variant (for dark backgrounds) */
.ip-btn-white {
    background: var(--ip-white);
    color: var(--ip-navy);
    border-color: var(--ip-white);
}
.ip-btn-white:hover {
    background: var(--ip-gray-50);
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25);
}

/* Danger variant */
.ip-btn-danger {
    background: var(--ip-danger);
    color: var(--ip-white);
    border-color: var(--ip-danger);
}
.ip-btn-danger:hover {
    background: #b91c1c;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
}

/* Size modifiers */
.ip-btn-sm {
    padding: 0.375rem 1rem;
    font-size: 0.8125rem;
    border-radius: var(--ip-radius-sm);
}

.ip-btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1.0625rem;
    border-radius: var(--ip-radius-md);
}

.ip-btn-xl {
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    border-radius: var(--ip-radius-md);
}

/* Icon-only button */
.ip-btn-icon {
    padding: 0.625rem;
    aspect-ratio: 1;
}

.ip-btn-icon.ip-btn-sm {
    padding: 0.375rem;
}

.ip-btn-icon.ip-btn-lg {
    padding: 0.875rem;
}

/* Button with loading spinner */
.ip-btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.ip-btn-loading::after {
    content: '';
    position: absolute;
    width: 1.125em;
    height: 1.125em;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: ipSpin 0.6s linear infinite;
    color: var(--ip-white);
}
.ip-btn-outline.ip-btn-loading::after,
.ip-btn-ghost.ip-btn-loading::after {
    color: var(--ip-primary);
}


/* ============================================================
   9. SEARCH DROPDOWN
   ============================================================ */

.ip-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    background: var(--ip-white);
    border: 1px solid var(--ip-gray-200);
    border-radius: var(--ip-radius-md);
    box-shadow: var(--ip-shadow-xl);
    max-height: 420px;
    overflow-y: auto;
    z-index: var(--ip-z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity var(--ip-transition-fast),
        transform var(--ip-transition-fast),
        visibility var(--ip-transition-fast);
}

.ip-search-panel.ip-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Group heading */
.ip-search-group-label {
    padding: 0.625rem 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ip-gray-400);
    border-bottom: 1px solid var(--ip-gray-100);
    background: var(--ip-gray-50);
}

/* Result item */
.ip-search-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color var(--ip-transition-fast);
    border-bottom: 1px solid var(--ip-gray-50);
}

.ip-search-result:last-child {
    border-bottom: none;
}

.ip-search-result:hover,
.ip-search-result.ip-highlighted {
    background: var(--ip-green-light);
}

.ip-search-result-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ip-green-light);
    color: var(--ip-primary);
    border-radius: var(--ip-radius);
    font-size: 0.875rem;
}

.ip-search-result-text {
    flex: 1;
    min-width: 0;
}

.ip-search-result-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ip-gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ip-search-result-subtitle {
    font-size: 0.75rem;
    color: var(--ip-gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* No results */
.ip-search-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ip-gray-400);
    font-size: 0.875rem;
}

/* Search input wrapper */
.ip-search-input-wrap {
    position: relative;
}

.ip-search-input-wrap .ip-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ip-gray-400);
    font-size: 1rem;
    pointer-events: none;
    transition: color var(--ip-transition-fast);
}

.ip-search-input-wrap input:focus ~ .ip-search-icon,
.ip-search-input-wrap input:focus + .ip-search-icon {
    color: var(--ip-primary);
}


/* ============================================================
   10. TIMELINE / TRACKER
   ============================================================ */

.ip-timeline {
    position: relative;
    padding-left: 2rem;
}

/* Vertical line */
.ip-timeline::before {
    content: '';
    position: absolute;
    left: 0.5625rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--ip-gray-200);
    border-radius: 1px;
}

.ip-timeline-stage {
    position: relative;
    padding-bottom: 1.5rem;
}

.ip-timeline-stage:last-child {
    padding-bottom: 0;
}

/* Circle marker */
.ip-timeline-marker {
    position: absolute;
    left: -2rem;
    top: 0.25rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    border: 2px solid var(--ip-gray-300);
    background: var(--ip-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color var(--ip-transition),
        border-color var(--ip-transition),
        box-shadow var(--ip-transition);
}

/* Completed stage */
.ip-timeline-stage.ip-completed .ip-timeline-marker {
    background: var(--ip-primary);
    border-color: var(--ip-primary);
}

.ip-timeline-stage.ip-completed .ip-timeline-marker::after {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    background: var(--ip-white);
    border-radius: 50%;
}

/* Current stage — pulse */
.ip-timeline-stage.ip-current .ip-timeline-marker {
    background: var(--ip-primary);
    border-color: var(--ip-primary);
    animation: ipPulseGlow 2s ease-in-out infinite;
}

.ip-timeline-stage.ip-current .ip-timeline-marker::after {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    background: var(--ip-white);
    border-radius: 50%;
}

/* Future stage */
.ip-timeline-stage.ip-future .ip-timeline-marker {
    background: var(--ip-white);
    border-color: var(--ip-gray-300);
}

/* Stage content */
.ip-timeline-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ip-gray-800);
    margin-bottom: 0.125rem;
}

.ip-timeline-stage.ip-future .ip-timeline-title {
    color: var(--ip-gray-400);
}

.ip-timeline-desc {
    font-size: 0.8125rem;
    color: var(--ip-gray-500);
}

.ip-timeline-stage.ip-future .ip-timeline-desc {
    color: var(--ip-gray-300);
}

.ip-timeline-date {
    font-size: 0.75rem;
    color: var(--ip-gray-400);
    margin-top: 0.25rem;
}


/* ============================================================
   11. FORM INPUTS
   ============================================================ */

.ip-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--ip-gray-800);
    background: var(--ip-white);
    border: 1.5px solid var(--ip-gray-300);
    border-radius: var(--ip-radius);
    transition:
        border-color var(--ip-transition-fast),
        box-shadow var(--ip-transition-fast),
        background-color var(--ip-transition-fast);
    outline: none;
}

.ip-input::placeholder {
    color: var(--ip-gray-400);
}

.ip-input:hover {
    border-color: var(--ip-gray-400);
}

.ip-input:focus {
    border-color: var(--ip-primary);
    box-shadow: 0 0 0 3px rgba(26, 122, 74, 0.15);
}

/* Invalid state */
.ip-input.ip-invalid,
.ip-input:invalid:not(:placeholder-shown) {
    border-color: var(--ip-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.ip-input.ip-invalid:focus,
.ip-input:invalid:not(:placeholder-shown):focus {
    border-color: var(--ip-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Disabled state */
.ip-input:disabled {
    background: var(--ip-gray-100);
    color: var(--ip-gray-400);
    cursor: not-allowed;
}

/* Input with left icon */
.ip-input-icon-left {
    padding-left: 2.5rem;
}

/* Textarea */
.ip-textarea {
    min-height: 6rem;
    resize: vertical;
}

/* Select */
.ip-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

/* Checkbox / Radio custom */
.ip-checkbox,
.ip-radio {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--ip-primary);
    cursor: pointer;
}

/* Label */
.ip-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ip-gray-700);
}

/* Helper / error text */
.ip-helper-text {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ip-gray-500);
}

.ip-error-text {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ip-danger);
}

/* Input group (icon + input) */
.ip-input-group {
    position: relative;
}

.ip-input-group .ip-input-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ip-gray-400);
    pointer-events: none;
    transition: color var(--ip-transition-fast);
}

.ip-input-group:focus-within .ip-input-icon {
    color: var(--ip-primary);
}

.ip-input-group .ip-input-action {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}


/* ============================================================
   12. SECTION HEADINGS
   ============================================================ */

.ip-section-heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.ip-section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--ip-navy);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.ip-section-title::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    background: linear-gradient(90deg, var(--ip-primary), var(--ip-accent));
    border-radius: 2px;
    margin-top: 0.75rem;
}

/* Centered variant */
.ip-section-heading-center {
    align-items: center;
    text-align: center;
}

.ip-section-heading-center .ip-section-title::after {
    margin-left: auto;
    margin-right: auto;
}

/* Subtitle */
.ip-section-subtitle {
    font-size: 1rem;
    color: var(--ip-gray-500);
    max-width: 40rem;
    line-height: 1.6;
}

.ip-section-heading-center .ip-section-subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* Inline heading (title + CTA side by side) */
.ip-section-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.ip-section-heading-row .ip-section-title::after {
    display: none;
}


/* ============================================================
   13. STATS COUNTER
   ============================================================ */

.ip-stats-section {
    background: linear-gradient(135deg, var(--ip-primary) 0%, var(--ip-accent) 100%);
    padding: 3rem 1.5rem;
}

.ip-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
}

.ip-stat-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(var(--ip-blur));
    -webkit-backdrop-filter: blur(var(--ip-blur));
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--ip-radius-lg);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: transform var(--ip-transition), box-shadow var(--ip-transition);
}

.ip-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ip-stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ip-primary);
    line-height: 1.1;
}

.ip-stat-label {
    font-size: 0.8125rem;
    color: var(--ip-gray-500);
    margin-top: 0.375rem;
    font-weight: 500;
}

/* Animated counter */
.ip-stat-number[data-count] {
    display: inline-block;
}


/* ============================================================
   14. FOOTER
   ============================================================ */

.ip-footer {
    background: var(--ip-navy-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 3rem 1.5rem 0;
}

.ip-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 72rem;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .ip-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ip-footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* Footer column heading */
.ip-footer-heading {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ip-white);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    position: relative;
}

.ip-footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2rem;
    height: 2px;
    background: linear-gradient(90deg, var(--ip-primary), var(--ip-accent));
    border-radius: 1px;
}

/* Footer links */
.ip-footer-link {
    display: block;
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--ip-transition-fast), padding-left var(--ip-transition-fast);
}

.ip-footer-link:hover {
    color: var(--ip-white);
    padding-left: 0.25rem;
}

/* Footer bottom bar */
.ip-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2.5rem;
    padding: 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Footer social icons */
.ip-footer-socials {
    display: flex;
    gap: 0.75rem;
}

.ip-footer-social {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    transition:
        background-color var(--ip-transition-fast),
        color var(--ip-transition-fast);
    text-decoration: none;
}

.ip-footer-social:hover {
    background: var(--ip-primary);
    color: var(--ip-white);
}


/* ============================================================
   15. MOBILE MENU SLIDE-OVER
   ============================================================ */

.ip-mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: var(--ip-z-overlay);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--ip-transition),
        visibility var(--ip-transition);
}

.ip-mobile-overlay.ip-open {
    opacity: 1;
    visibility: visible;
}

.ip-mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 22rem);
    background: var(--ip-white);
    z-index: var(--ip-z-modal);
    transform: translateX(100%);
    transition: transform var(--ip-transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: var(--ip-shadow-xl);
}

.ip-mobile-panel.ip-open {
    transform: translateX(0);
}

/* Left-side variant */
.ip-mobile-panel-left {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

.ip-mobile-panel-left.ip-open {
    transform: translateX(0);
}

/* Panel header */
.ip-mobile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ip-gray-200);
    flex-shrink: 0;
}

/* Panel body */
.ip-mobile-panel-body {
    flex: 1;
    padding: 1rem 1.25rem;
    overflow-y: auto;
}

/* Panel footer */
.ip-mobile-panel-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ip-gray-200);
    flex-shrink: 0;
}

/* Mobile nav links */
.ip-mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ip-gray-700);
    text-decoration: none;
    border-radius: var(--ip-radius);
    transition:
        background-color var(--ip-transition-fast),
        color var(--ip-transition-fast);
}

.ip-mobile-nav-link:hover,
.ip-mobile-nav-link.ip-active {
    background: var(--ip-green-light);
    color: var(--ip-primary);
}


/* ============================================================
   16. ANNOUNCEMENT MARQUEE
   ============================================================ */

.ip-ticker {
    overflow: hidden;
    white-space: nowrap;
    background: var(--ip-green-light);
    border-bottom: 1px solid var(--ip-green-100);
}

.ip-ticker-inner {
    display: inline-flex;
    animation: ipMarquee 35s linear infinite;
}

.ip-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ip-primary-dark);
    white-space: nowrap;
}

.ip-ticker-item + .ip-ticker-item::before {
    content: '\2022'; /* bullet */
    margin-right: 2rem;
    color: var(--ip-accent);
}

/* Pause on hover */
.ip-ticker:hover .ip-ticker-inner {
    animation-play-state: paused;
}


/* ============================================================
   17. CUSTOM SCROLLBAR
   ============================================================ */

/* Webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--ip-gray-100);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--ip-gray-300);
    border-radius: 4px;
    border: 2px solid var(--ip-gray-100);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ip-gray-400);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ip-gray-300) var(--ip-gray-100);
}

/* Dark context scrollbar */
.ip-scrollbar-dark::-webkit-scrollbar-track {
    background: var(--ip-navy-dark);
}

.ip-scrollbar-dark::-webkit-scrollbar-thumb {
    background: var(--ip-navy-mid);
    border-color: var(--ip-navy-dark);
}

.ip-scrollbar-dark::-webkit-scrollbar-thumb:hover {
    background: var(--ip-gray-500);
}

.ip-scrollbar-dark {
    scrollbar-color: var(--ip-navy-mid) var(--ip-navy-dark);
}


/* ============================================================
   18. URDU / RTL SUPPORT
   ============================================================ */

.ip-urdu {
    direction: rtl;
    text-align: right;
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Nafees Web Naskh', serif;
    line-height: 2;
}

/* Import Noto Nastaliq Urdu from Google Fonts */
@font-face {
    font-family: 'Noto Nastaliq Urdu';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&display=swap');
    /* Note: The actual @import or <link> should be in the theme header;
       this @font-face is a fallback declaration. For production,
       enqueue the Google Font via wp_enqueue_style in functions.php. */
}

/* RTL layout overrides */
.ip-urdu .ip-timeline {
    padding-left: 0;
    padding-right: 2rem;
}

.ip-urdu .ip-timeline::before {
    left: auto;
    right: 0.5625rem;
}

.ip-urdu .ip-timeline-marker {
    left: auto;
    right: -2rem;
}

.ip-urdu .ip-footer-heading::after {
    left: auto;
    right: 0;
}

.ip-urdu .ip-footer-link:hover {
    padding-left: 0;
    padding-right: 0.25rem;
}

.ip-urdu .ip-section-title::after {
    margin-left: auto;
    margin-right: 0;
}

.ip-urdu .ip-mobile-panel {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}

.ip-urdu .ip-mobile-panel.ip-open {
    transform: translateX(0);
}

.ip-urdu .ip-input-icon-left {
    padding-left: 0.875rem;
    padding-right: 2.5rem;
}

.ip-urdu .ip-input-group .ip-input-icon {
    left: auto;
    right: 0.75rem;
}

.ip-urdu .ip-input-group .ip-input-action {
    right: auto;
    left: 0.5rem;
}

.ip-urdu .ip-select {
    background-position: left 0.75rem center;
    padding-right: 0.875rem;
    padding-left: 2.5rem;
}

/* Urdu text sizing — Nastaliq needs larger font for readability */
.ip-urdu .ip-heading-xl,
.ip-urdu .ip-heading-lg {
    line-height: 1.8;
}


/* ============================================================
   19. RESPONSIVE UTILITIES
   ============================================================ */

/* Hide at breakpoint and up */
.ip-hide-sm   { display: none; }
@media (min-width: 640px)  { .ip-hide-sm   { display: block; } .ip-show-sm   { display: none; } }
@media (min-width: 768px)  { .ip-hide-md   { display: block; } .ip-show-md   { display: none; } }
@media (min-width: 1024px) { .ip-hide-lg   { display: block; } .ip-show-lg   { display: none; } }
@media (min-width: 1280px) { .ip-hide-xl   { display: block; } .ip-show-xl   { display: none; } }

/* Show at breakpoint and up */
.ip-show-sm,
.ip-show-md,
.ip-show-lg,
.ip-show-xl {
    display: none;
}

@media (min-width: 640px)  { .ip-show-sm   { display: block; } }
@media (min-width: 768px)  { .ip-show-md   { display: block; } }
@media (min-width: 1024px) { .ip-show-lg   { display: block; } }
@media (min-width: 1280px) { .ip-show-xl   { display: block; } }

/* Inline variants */
@media (min-width: 640px)  { .ip-show-sm-inline  { display: inline; } .ip-hide-sm-inline  { display: none; } }
@media (min-width: 768px)  { .ip-show-md-inline  { display: inline; } .ip-hide-md-inline  { display: none; } }
@media (min-width: 1024px) { .ip-show-lg-inline  { display: inline; } .ip-hide-lg-inline  { display: none; } }
@media (min-width: 1280px) { .ip-show-xl-inline  { display: inline; } .ip-hide-xl-inline  { display: none; } }

/* Flex variants */
@media (min-width: 640px)  { .ip-show-sm-flex  { display: flex; } }
@media (min-width: 768px)  { .ip-show-md-flex  { display: flex; } }
@media (min-width: 1024px) { .ip-show-lg-flex  { display: flex; } }
@media (min-width: 1280px) { .ip-show-xl-flex  { display: flex; } }

/* Grid responsive helpers */
.ip-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .ip-grid-2-sm { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
    .ip-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .ip-grid-3-md { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
    .ip-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .ip-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
    .ip-grid-5 { grid-template-columns: repeat(5, 1fr); }
}


/* ============================================================
   20. MISC HELPERS
   ============================================================ */

/* Aspect ratio placeholder */
.ip-aspect-video { aspect-ratio: 16 / 9; }
.ip-aspect-square { aspect-ratio: 1 / 1; }
.ip-aspect-card { aspect-ratio: 3 / 4; }

/* Image cover */
.ip-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container width */
.ip-container {
    width: 100%;
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .ip-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .ip-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Section spacing */
.ip-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    .ip-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

@media (min-width: 1024px) {
    .ip-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/* Overlay gradient */
.ip-overlay-gradient {
    position: relative;
}

.ip-overlay-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(15, 27, 45, 0.7) 100%);
    z-index: 1;
}

/* Divider */
.ip-divider {
    height: 1px;
    background: var(--ip-gray-200);
    border: none;
    margin: 0;
}

.ip-divider-green {
    height: 2px;
    background: linear-gradient(90deg, var(--ip-primary), var(--ip-accent));
    border: none;
    margin: 0;
    border-radius: 1px;
}

/* Focus ring utility */
.ip-focus-ring:focus-visible {
    outline: 2px solid var(--ip-primary);
    outline-offset: 2px;
}

/* Skip to content (a11y) */
.ip-skip-link {
    position: absolute;
    top: -100%;
    left: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--ip-primary);
    color: var(--ip-white);
    font-weight: 700;
    z-index: 9999;
    border-radius: 0 0 var(--ip-radius) var(--ip-radius);
    transition: top var(--ip-transition-fast);
}

.ip-skip-link:focus {
    top: 0;
}

/* Print helpers */
@media print {
    .ip-no-print { display: none !important; }
    .ip-print-only { display: block !important; }

    .ip-card,
    .ip-card-glass,
    .ip-card-navy {
        box-shadow: none;
        border: 1px solid #ccc;
        background: #fff;
        color: #000;
    }
}

.ip-print-only { display: none; }

/* Screen-reader only */
.ip-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Tooltip base */
.ip-tooltip {
    position: relative;
}

.ip-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ip-white);
    background: var(--ip-navy);
    border-radius: var(--ip-radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition:
        opacity var(--ip-transition-fast),
        transform var(--ip-transition-fast);
    z-index: var(--ip-z-toast);
}

.ip-tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Tag / chip */
.ip-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--ip-gray-100);
    color: var(--ip-gray-600);
    border-radius: var(--ip-radius-sm);
    line-height: 1.5;
}

.ip-tag-green {
    background: var(--ip-green-light);
    color: var(--ip-primary);
}

/* Notification dot */
.ip-notification-dot {
    position: relative;
}

.ip-notification-dot::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--ip-danger);
    border: 2px solid var(--ip-white);
    border-radius: 50%;
}

/* How It Works - connector line */
.ip-step-connector {
  height: 1px;
  background: repeating-linear-gradient(to right, rgba(16,109,32,0.25) 0, rgba(16,109,32,0.25) 8px, transparent 8px, transparent 16px);
}


/* ============================================================
   21. HERO TRUST BADGES & CTA BUTTONS (Mobile-First Fix)
   ============================================================ */

/* Hero CTA Button Row */
.ip-hero-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0 20px;
    margin-bottom: 24px;
}

.ip-hero-cta-row a {
    width: 100%;
    max-width: 320px;
    justify-content: center;
}

@media (min-width: 480px) {
    .ip-hero-cta-row {
        flex-direction: row;
        padding: 0;
    }
    .ip-hero-cta-row a {
        width: auto;
        max-width: none;
    }
}

/* Trust Badges Row */
.ip-trust-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
}

.ip-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 9999px;
    white-space: nowrap;
    line-height: 1.2;
}

@media (min-width: 480px) {
    .ip-trust-badge {
        font-size: 11px;
        padding: 5px 11px;
    }
}

/* ============================================================
   22. CATEGORY QUICK LINK PILLS (Mobile-First Fix)
   ============================================================ */

.ip-catpills-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    /* Prevent clipping on edges */
    padding-left: 4px;
    padding-right: 4px;
}

.ip-catpills-wrap::-webkit-scrollbar {
    display: none;
}

.ip-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ip-green-50);
    color: var(--ip-primary);
    border: 1.5px solid var(--ip-green-100);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 9999px;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--ip-transition-fast), border-color var(--ip-transition-fast), color var(--ip-transition-fast);
    flex-shrink: 0;
}

.ip-cat-pill:hover,
.ip-cat-pill:focus {
    background: var(--ip-primary);
    color: #ffffff;
    border-color: var(--ip-primary);
    text-decoration: none;
}

@media (min-width: 768px) {
    .ip-catpills-wrap {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: center;
    }
}


/* === CATPILLS GRID OVERRIDE === */
.ip-catpills-wrap{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:8px !important;overflow:visible !important;flex-wrap:unset !important;}
@media(min-width:360px){.ip-catpills-wrap{grid-template-columns:repeat(3,1fr) !important;}}
@media(min-width:768px){.ip-catpills-wrap{grid-template-columns:repeat(3,1fr) !important;}}
.ip-cat-pill{justify-content:center !important;text-align:center !important;border-radius:12px !important;white-space:normal !important;width:100% !important;font-size:0.78rem !important;padding:10px 6px !important;}

/* === CATPILLS FINAL FIX === */
.ip-catpills-wrap{display:flex !important;flex-direction:row !important;justify-content:center !important;align-items:center !important;gap:8px !important;overflow:visible !important;}
.ip-cat-pill{flex:1 !important;max-width:140px !important;white-space:nowrap !important;justify-content:center !important;font-size:0.75rem !important;padding:8px 10px !important;border-radius:9999px !important;min-height:38px !important;}

/* === HERO FINAL MOBILE FIX === */
.ip-hero-cta-row{display:flex !important;flex-direction:row !important;gap:10px !important;padding:0 16px !important;justify-content:center !important;}
.ip-hero-cta-row a{flex:1 !important;max-width:180px !important;justify-content:center !important;padding:10px 14px !important;font-size:0.85rem !important;}
.ip-trust-wrap{flex-wrap:nowrap !important;gap:5px !important;}
.ip-trust-badge{font-size:9.5px !important;padding:4px 7px !important;flex-shrink:1 !important;gap:3px !important;}

/* === HERO TEXT MOBILE FIX === */
@media(max-width:480px){
    .ip-glass{padding: 8px 10px !important;}
    #ip-hero-search{font-size:13px !important;}
}