/* ==========================================
   NBN ACCESSIBILITY - Focus, Motion, Contrast
   WCAG 2.1 AA compliance layer
   ========================================== */

/* ------------------------------------------
   1. FOCUS-VISIBLE STATES
   Keyboard focus indicators for all interactive
   elements. Uses :focus-visible to avoid showing
   on mouse clicks. Falls back to :focus for
   older browsers via the non-:focus-visible rule.
   ------------------------------------------ */

/* Global focus-visible reset: remove default outline,
   replace with consistent ring */
.nbn-plugin-wrapper :focus-visible {
    outline: 2px solid var(--troppo-lagoon, #20d6b4);
    outline-offset: 2px;
}

/* Remove outline on mouse click (browsers that support :focus-visible) */
.nbn-plugin-wrapper :focus:not(:focus-visible) {
    outline: none;
}

/* --- Buttons --- */
.nbn-plugin-wrapper .nbn-select-plan:focus-visible,
.nbn-plugin-wrapper .nbn-action-button:focus-visible,
.nbn-plugin-wrapper .nbn-select-hardware:focus-visible,
.nbn-plugin-wrapper .nbn-select-voip:focus-visible,
.nbn-plugin-wrapper .nbn-remove-voip:focus-visible,
.nbn-plugin-wrapper .troppo-btn:focus-visible,
.nbn-plugin-wrapper .troppo-btn-primary:focus-visible,
.nbn-plugin-wrapper .troppo-btn-secondary:focus-visible,
.nbn-plugin-wrapper .nbn-btn:focus-visible {
    outline: 2px solid var(--troppo-lagoon, #20d6b4);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(32, 214, 180, 0.25);
}

/* --- Filter buttons --- */
.nbn-plugin-wrapper .nbn-plan-filter:focus-visible,
.nbn-plugin-wrapper .nbn-payment-filter:focus-visible {
    outline: 2px solid var(--troppo-lagoon, #20d6b4);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(32, 214, 180, 0.25);
}

/* --- Plan cards (clickable) --- */
.nbn-plugin-wrapper .nbn-plan-card:focus-visible,
.nbn-plugin-wrapper .nbn-hardware-card:focus-visible,
.nbn-plugin-wrapper .nbn-modem-card:focus-visible,
.nbn-plugin-wrapper .nbn-voip-card:focus-visible,
.nbn-plugin-wrapper .nbn-voip-option:focus-visible {
    outline: 2px solid var(--troppo-lagoon, #20d6b4);
    outline-offset: 2px;
    border-radius: var(--troppo-radius-sm, 12px);
}

/* --- Accordion toggles --- */
.nbn-plugin-wrapper .nbn-features-toggle:focus-visible,
.nbn-plugin-wrapper .nbn-faq-question:focus-visible {
    outline: 2px solid var(--troppo-lagoon, #20d6b4);
    outline-offset: 2px;
    border-radius: 8px;
}

/* --- Scroll arrows --- */
.nbn-plugin-wrapper .nbn-scroll-arrow:focus-visible,
.nbn-plugin-wrapper .nbn-carousel-arrow:focus-visible {
    outline: 2px solid var(--troppo-lagoon, #20d6b4);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(32, 214, 180, 0.25);
}

/* --- Form inputs --- */
.nbn-plugin-wrapper input:focus-visible,
.nbn-plugin-wrapper select:focus-visible,
.nbn-plugin-wrapper textarea:focus-visible {
    outline: 2px solid var(--troppo-lagoon, #20d6b4);
    outline-offset: 0;
    box-shadow: 0 0 0 4px rgba(32, 214, 180, 0.15);
}

/* --- Links --- */
.nbn-plugin-wrapper a:focus-visible {
    outline: 2px solid var(--troppo-lagoon, #20d6b4);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Cart elements --- */
.nbn-plugin-wrapper .nbn-cart-checkout-btn:focus-visible,
.nbn-plugin-wrapper .nbn-proceed-checkout:focus-visible {
    outline: 2px solid var(--troppo-lagoon, #20d6b4);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(32, 214, 180, 0.25);
}

/* --- Sticky widget --- */
.nbn-sticky-fab:focus-visible {
    outline: 2px solid var(--troppo-lagoon, #20d6b4);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(32, 214, 180, 0.25);
}


/* ------------------------------------------
   2. PREFERS-REDUCED-MOTION
   Respects user motion preferences.
   KEEPS: Button hover transitions (color changes),
          accordion slide-down, loading spinners.
   DISABLES: Decorative animations (waves, floats,
             sparks, gradientShift, confetti, glow).
   ------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    /* Disable all decorative keyframe animations */
    .troppo-wave-container,
    .troppo-wave-container svg,
    .troppo-shape,
    .troppo-card.troppo-premium::after,
    .troppo-heading .troppo-highlight,
    .nbn-floating-badge,
    [class*="confetti"],
    [class*="celebration"] {
        animation: none;
    }

    /* Disable wave backgrounds */
    .nbn-wave-bg,
    .nbn-wave-bg svg,
    .nbn-address-search-wildly .nbn-hero-bg svg {
        animation: none;
    }

    /* Disable floating background effects */
    .cart-float-bg,
    .nbn-cart-dark-glass .cart-float-bg {
        animation: none;
    }

    /* Disable glow and pulse decorations */
    .troppo-glow,
    .nbn-savings-pulse,
    .nbn-confetti-piece {
        animation: none;
    }

    /* Reduce all transitions to near-instant.
       Keep a tiny duration so state changes are not jarring. */
    .nbn-plugin-wrapper *,
    .nbn-plugin-wrapper *::before,
    .nbn-plugin-wrapper *::after {
        transition-duration: 0.05s;
    }

    /* KEEP: Loading spinners (functional, users need feedback) */
    .troppo-ring,
    .nbn-flow-spinner,
    .nbn-spinner,
    [class*="loading"] .spinner,
    .nbn-select-plan.loading::before,
    .nbn-select-plan.loading::after,
    .nbn-action-button.loading::before,
    .nbn-action-button.loading::after {
        animation-duration: 1.5s;
    }

    /* KEEP: Shimmer skeleton loading */
    [class*="skeleton"],
    [class*="shimmer"] {
        animation-duration: 3s;
    }

    /* Disable entrance animations (fade-in, zoom, slide) */
    .troppo-fade-in-up,
    .troppo-zoom-in,
    .troppo-slide-in-right {
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* Disable hover transforms (lift effects) */
    .nbn-plan-card:hover,
    .nbn-hardware-card:hover,
    .nbn-modem-card:hover,
    .nbn-voip-card:hover {
        transform: none;
    }
}


/* ------------------------------------------
   3. PREFERS-CONTRAST: HIGH
   Improves visibility for users who need
   stronger visual boundaries.
   ------------------------------------------ */

@media (prefers-contrast: high) {
    /* Strengthen glass borders */
    .nbn-plugin-wrapper .nbn-plan-details,
    .nbn-plugin-wrapper .nbn-hardware-card,
    .nbn-plugin-wrapper .nbn-modem-card,
    .nbn-plugin-wrapper .nbn-voip-card {
        border: 2px solid rgba(255, 255, 255, 0.5);
    }

    /* Strengthen text contrast */
    .nbn-plugin-wrapper {
        --troppo-text-secondary: rgba(255, 255, 255, 0.9);
        --troppo-text-muted: rgba(255, 255, 255, 0.8);
    }

    /* Visible focus ring always on focus (not just focus-visible) */
    .nbn-plugin-wrapper :focus {
        outline: 3px solid #fff;
        outline-offset: 2px;
    }

    /* Strengthen filter button borders */
    .nbn-plugin-wrapper .nbn-plan-filter,
    .nbn-plugin-wrapper .nbn-payment-filter {
        border-width: 2px;
        border-color: rgba(255, 255, 255, 0.5);
    }

    /* Stronger separator between sections */
    .nbn-plugin-wrapper .nbn-flow-section {
        border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    }
}


/* ------------------------------------------
   4. HORIZONTAL SCROLL - NO ANIMATION
   Removes smooth scrolling from plan/modem
   horizontal containers for instant feedback.
   ------------------------------------------ */

.nbn-plans-grid,
.nbn-modems-grid,
.nbn-hardware-grid,
.nbn-voip-grid,
.nbn-flow .nbn-plans-grid,
.nbn-plans-display .nbn-plans-grid {
    scroll-behavior: auto;
}


/* ------------------------------------------
   5. SKELETON LOADING STATES
   Shimmer placeholders for AJAX-loaded content.
   Matches dark glass theme aesthetic.
   ------------------------------------------ */

/* Base skeleton element */
.nbn-skeleton {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%
    );
    background-size: 200% 100%;
    animation: nbnSkeletonShimmer 2s ease-in-out infinite;
    border-radius: var(--troppo-radius-sm, 12px);
    position: relative;
    overflow: hidden;
}

@keyframes nbnSkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skeleton plan card */
.nbn-skeleton-card {
    flex: 0 0 380px;
    min-width: 380px;
    max-width: 380px;
    height: 520px;
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--troppo-radius-sm, 12px);
    padding: 0;
    overflow: hidden;
}

.nbn-skeleton-card-header {
    height: 200px;
    background: linear-gradient(90deg,
        rgba(30, 60, 114, 0.4) 25%,
        rgba(42, 82, 152, 0.4) 50%,
        rgba(30, 60, 114, 0.4) 75%
    );
    background-size: 200% 100%;
    animation: nbnSkeletonShimmer 2s ease-in-out infinite;
}

.nbn-skeleton-card-body {
    padding: 1.5rem;
}

.nbn-skeleton-line {
    height: 16px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 75%
    );
    background-size: 200% 100%;
    animation: nbnSkeletonShimmer 2s ease-in-out infinite;
    border-radius: 4px;
    margin-bottom: 12px;
}

.nbn-skeleton-line--wide { width: 100%; }
.nbn-skeleton-line--medium { width: 70%; }
.nbn-skeleton-line--short { width: 40%; }
.nbn-skeleton-line--price {
    height: 32px;
    width: 50%;
    margin: 1rem auto;
}

.nbn-skeleton-button {
    height: 48px;
    width: 100%;
    background: linear-gradient(90deg,
        rgba(255, 142, 83, 0.15) 25%,
        rgba(255, 142, 83, 0.25) 50%,
        rgba(255, 142, 83, 0.15) 75%
    );
    background-size: 200% 100%;
    animation: nbnSkeletonShimmer 2s ease-in-out infinite;
    border-radius: 50px;
    margin-top: 1rem;
}

/* Skeleton container: 3 cards in a row */
.nbn-skeleton-plans {
    display: flex;
    gap: 2rem;
    padding: 0 3rem;
    overflow: hidden;
}

/* Skeleton for qualification result */
.nbn-skeleton-qualification {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--troppo-radius-sm, 12px);
}

/* Responsive skeleton */
@media (max-width: 1024px) {
    .nbn-skeleton-card {
        flex: 0 0 350px;
        min-width: 350px;
        max-width: 350px;
    }
}

@media (max-width: 768px) {
    .nbn-skeleton-card {
        flex: 0 0 300px;
        min-width: 300px;
        max-width: 300px;
    }

    .nbn-skeleton-plans {
        padding: 0 1rem;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .nbn-skeleton-card {
        flex: 0 0 280px;
        min-width: 280px;
        max-width: 280px;
    }
}


/* ------------------------------------------
   6. SVG ICON REPLACEMENTS
   CSS classes for consistent cross-platform
   icons replacing Unicode emoji. Uses inline
   SVG data URIs via ::before pseudo-elements.
   ------------------------------------------ */

/* Base icon style */
[class*="nbn-icon-svg"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
}

[class*="nbn-icon-svg"]::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Map pin - address, location */
.nbn-icon-svg-pin::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320d6b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Phone/smartphone - plan icon */
.nbn-icon-svg-phone::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8e53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2' ry='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}

/* Router/satellite - modem icon */
.nbn-icon-svg-router::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320d6b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='8' x='3' y='14' rx='2'/%3E%3Cpath d='M12 14V6'/%3E%3Cpath d='M8 10l4-4 4 4'/%3E%3C/svg%3E");
}

/* Telephone - VoIP icon */
.nbn-icon-svg-telephone::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd93d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Target/bullseye - success icon */
.nbn-icon-svg-target::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320d6b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

/* Camera - upload icon */
.nbn-icon-svg-camera::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8e53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
}

/* Alert triangle - warning icon */
.nbn-icon-svg-warning::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* Lock - security icon */
.nbn-icon-svg-lock::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320d6b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* Mail - email/contact icon */
.nbn-icon-svg-mail::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8e53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

/* Clipboard - list/plans icon */
.nbn-icon-svg-clipboard::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8e53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E");
}

/* Rocket - speed/performance icon */
.nbn-icon-svg-rocket::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8e53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E");
}

/* Zap/lightning - speed icon */
.nbn-icon-svg-zap::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd93d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 3 14h9l-1 8 10-12h-9l1-8z'/%3E%3C/svg%3E");
}

/* Calendar - date/schedule icon */
.nbn-icon-svg-calendar::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320d6b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}

/* Checkmark - completion icon (replaces unicode check) */
.nbn-icon-svg-check::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320d6b4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}