/* ========================================
   CRITICAL FIXES FOR TEXT CLIPPING & ICONS
   Last updated: 2025-12-13
   ======================================== */

/* ===========================================
   FIX A: TEXT CLIPPING IN "CO WARTO WIEDZIEC"
   The text "Jeżeli zastanawiasz się..." is clipped from left
   =========================================== */

/* A0: GRADIENT OVERLAY FIX - ensure decorative ::before elements don't clip text */
/* The .saving-info::before creates a 400x400px decorative gradient blob at left:-150px */
/* The .saving-info__content::before creates a gradient top line */
/* Both need proper z-index to stay BEHIND content */

.saving-info::before {
    z-index: 0 !important;
    pointer-events: none !important;
}

.saving-info__content::before {
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Ensure container is above decorative elements */
.saving-info .saving-info__container {
    position: relative !important;
    z-index: 2 !important;
}

/* A1: Content container - above decorative gradients + no overflow clipping */
.saving-info .saving-info__content {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important;
    padding: 32px !important;
    box-sizing: border-box !important;
}

/* A2: Fix tabs container - ensure no clipping and proper stacking */
.saving-info .saving-info__tabs {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 3 !important;
}

/* A3: Fix inner body container */
.saving-info .saving-info__tabs > .saving-info__body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 3 !important;
}

/* A4: Fix tab block containers */
.saving-info .saving-info__block {
    margin: 0 !important;
    padding: 16px 0 !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 3 !important;
}

.saving-info .saving-info__block._active {
    display: block !important;
}

/* A5: Main wrapper fix - proper padding for text content */
.saving-info .saving-info__wrapper {
    padding: 8px 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    width: 100% !important;
    position: relative !important;
    z-index: 4 !important;
    background: transparent !important;
}

/* A6: Text elements - no negative indentation, proper display */
.saving-info .saving-info__wrapper > p,
.saving-info .saving-info__wrapper > h1,
.saving-info .saving-info__wrapper > h2,
.saving-info .saving-info__wrapper > h3,
.saving-info .saving-info__wrapper > h4,
.saving-info .saving-info__wrapper > h5,
.saving-info .saving-info__wrapper > h6,
.saving-info .saving-info__wrapper > div,
.saving-info .saving-info__wrapper > span {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* A7: Lists - keep proper left padding for bullets/icons */
.saving-info .saving-info__wrapper ul,
.saving-info .saving-info__wrapper ol {
    margin: 20px 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* A8: List items - with background icon */
.saving-info .saving-info__wrapper ul li,
.saving-info .saving-info__wrapper ol li {
    padding: 4px 0 4px 40px !important;
    margin: 0 !important;
    background-image: url("/wp-content/uploads/2025/07/Pros-detail-icon-3.svg") !important;
    background-repeat: no-repeat !important;
    background-position: left top 2px !important;
    background-size: 26px !important;
    text-indent: 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #374151 !important;
}

/* ===========================================
   FIX B: WHITE ICONS ON SECTION TITLES
   - Square icon above "Najlepsze konta osobiste" = .savings-content__title::before
   - Round icon above "Co warto wiedzieć" = .saving-info__title::before
   - Square icon above "Informacje o rankingu" = .saving-rating__title::before
   =========================================== */

/*
   The ::before pseudo-elements have both:
   - background: linear-gradient(...) for purple background
   - background-image: url(data:...) for SVG icon

   The problem: background-image overrides background (shorthand)
   Solution: Use background-color with separate background-image,
   or use multiple backgrounds
*/

/* ===========================================
   FIX B2: ADD PADDING-TOP TO TITLES FOR ICON SPACE
   Icons are positioned with negative top, so we need
   extra padding on the title elements
   =========================================== */

/* Add padding-top to section titles to make room for icons */
.savings-content .savings-content__title {
    position: relative !important;
    padding-top: 40px !important;
}

.saving-info .saving-info__title {
    position: relative !important;
    padding-top: 40px !important;
}

.saving-rating .saving-rating__title {
    position: relative !important;
    padding-top: 40px !important;
}

.saving-faq .saving-faq__title {
    position: relative !important;
    padding-top: 40px !important;
}

/* Mobile - smaller padding */
@media (max-width: 768px) {
    .savings-content .savings-content__title,
    .saving-info .saving-info__title,
    .saving-rating .saving-rating__title,
    .saving-faq .saving-faq__title {
        padding-top: 30px !important;
    }
}

/* Fix for .savings-content__title::before (square icon - "Najlepsze konta osobiste") */
.savings-content .savings-content__title::before {
    content: "" !important;
    position: absolute !important;
    top: -20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.35), 0 4px 12px rgba(109, 40, 217, 0.2) !important;
    /* Use multiple backgrounds: SVG filter icon on top, gradient below */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z'/%3E%3C/svg%3E") no-repeat center center / 26px 26px,
        linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
}

/* Fix for .saving-info__title::before (round icon - "Co warto wiedzieć") */
.saving-info .saving-info__title::before {
    content: "" !important;
    position: absolute !important;
    top: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 9999px !important;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35) !important;
    /* Use multiple backgrounds: SVG icon on top, gradient below */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E") no-repeat center center / 26px 26px,
        linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
}

/* Fix for .saving-rating__title::before (square icon - "Informacje o rankingu") */
.saving-rating .saving-rating__title::before {
    content: "" !important;
    position: absolute !important;
    top: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35) !important;
    /* Use multiple backgrounds: SVG icon on top, gradient below */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'/%3E%3C/svg%3E") no-repeat center center / 26px 26px,
        linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
}

/* Fix for .saving-faq__title::before (round icon with "?" - FAQ section) */
.saving-faq .saving-faq__title::before {
    content: "?" !important;
    position: absolute !important;
    top: -15px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 9999px !important;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35) !important;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    /* Text styling for "?" */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: white !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Mobile responsiveness for icons */
@media (max-width: 768px) {
    .savings-content .savings-content__title::before {
        width: 44px !important;
        height: 44px !important;
        top: -18px !important;
        background-size: 22px 22px, auto !important;
    }

    .saving-info .saving-info__title::before {
        width: 44px !important;
        height: 44px !important;
        top: -18px !important;
        background-size: 22px 22px, auto !important;
    }

    .saving-rating .saving-rating__title::before {
        width: 44px !important;
        height: 44px !important;
        top: -18px !important;
        background-size: 22px 22px, auto !important;
    }

    .saving-faq .saving-faq__title::before {
        width: 44px !important;
        height: 44px !important;
        top: -18px !important;
        font-size: 20px !important;
    }
}

/* ===========================================
   FIX C: TAB BUTTON ICONS (keeping original fix)
   =========================================== */

/* NORMAL STATE: Purple icons (filter converts white to purple) */
.saving-info .saving-info__item .saving-info__image img {
    filter: invert(24%) sepia(95%) saturate(4500%) hue-rotate(243deg) brightness(98%) contrast(97%) !important;
}

/* ACTIVE STATE: White icons on purple background */
.saving-info .saving-info__item._active .saving-info__image {
    background: rgba(255, 255, 255, 0.2) !important;
}

.saving-info .saving-info__item._active .saving-info__image img {
    filter: brightness(0) invert(1) !important;
}

/* HOVER STATE: Keep purple icons */
.saving-info .saving-info__item:hover:not(._active) .saving-info__image img {
    filter: invert(24%) sepia(95%) saturate(4500%) hue-rotate(243deg) brightness(98%) contrast(97%) !important;
}

/* ===========================================
   FIX D: ACCESSIBILITY IMPROVEMENTS
   Focus states, reduced motion, contrast
   =========================================== */

/* D1: Focus-visible states for keyboard navigation */
.saving-info__item:focus-visible,
.savings-content__btn:focus-visible,
.saving-faq__question:focus-visible,
.saving-rating__more:focus-visible,
.saving-base__link:focus-visible,
.savings-content__filter label:focus-within,
.saving-champ__link:focus-visible,
.toc-item a:focus-visible {
    outline: 3px solid #7c3aed !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.2) !important;
}

/* Focus for FAQ accordion buttons */
.saving-faq__accordion:focus-within {
    outline: 3px solid #7c3aed !important;
    outline-offset: 2px !important;
}

/* Focus for filter checkboxes */
.savings-content__filter label:focus-within::before {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.25) !important;
}

/* Focus for hero elements */
.savings-hero__more:focus-visible,
.savings-hero__link:focus-visible,
.savings-hero__author:focus-visible {
    outline: 3px solid #ffa135 !important;
    outline-offset: 3px !important;
}

/* D2: Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .savings-hero__item,
    .saving-faq__accordion {
        animation: none !important;
    }

    .savings-hero__cup img:hover,
    .saving-main__image:hover,
    .article-grade__rating .stars svg:hover {
        transform: none !important;
    }
}

/* D3: Better text contrast - darker grays */
.saving-main__text,
.saving-info__wrapper p,
.saving-info__wrapper ul li,
.saving-info__wrapper ol li,
.saving-faq__answer .wrapper p,
.saving-faq__answer .wrapper ul li,
.saving-faq__answer .wrapper ol li,
.saving-base__col-01 p,
.saving-rating__col ul li {
    color: #374151 !important; /* Darker gray for better contrast */
}

/* D4: Skip link for screen readers */
.skip-link {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}

.skip-link:focus {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    width: auto !important;
    height: auto !important;
    padding: 16px 24px !important;
    background: #7c3aed !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    text-decoration: none !important;
}

/* ===========================================
   FIX E: SCROLL MARGIN FOR ANCHOR NAVIGATION
   Prevents content from hiding under sticky headers
   =========================================== */

[id] {
    scroll-margin-top: 100px;
}

.saving-info,
.saving-rating,
.saving-faq,
.saving-main,
.saving-base,
.saving-champ,
.savings-content {
    scroll-margin-top: 80px;
}

/* ===========================================
   FIX F: BETTER HOVER/ACTIVE STATES
   More consistent interactive feedback
   =========================================== */

/* Ensure all interactive elements have cursor pointer */
.saving-info__item,
.savings-content__filter label,
.saving-faq__question,
.saving-rating__more,
.savings-content__btn,
.saving-base__link,
.saving-champ__link,
.toc-item a {
    cursor: pointer !important;
}

/* Better active states (pressed) */
.savings-content__btn:active,
.saving-rating__more:active,
.saving-base__link:active,
.saving-champ__link:active {
    transform: translateY(1px) scale(0.98) !important;
}

.saving-info__item:active {
    transform: scale(0.98) !important;
}

/* ===========================================
   FIX G: HIGH CONTRAST MODE SUPPORT
   =========================================== */

@media (prefers-contrast: high) {
    .savings-content__filter label,
    .saving-info__item,
    .saving-faq__accordion,
    .saving-rating__row {
        border-width: 3px !important;
    }

    .savings-content__title,
    .saving-info__title,
    .saving-rating__title,
    .saving-faq__title {
        -webkit-text-fill-color: #111827 !important;
        background: none !important;
        color: #111827 !important;
    }

    .saving-info__item._active,
    .savings-content__filter label._active {
        border: 3px solid #000000 !important;
    }
}

/* ===========================================
   FIX H: PRINT STYLES IMPROVEMENTS
   =========================================== */

@media print {
    /* Hide decorative elements */
    .savings-content__title::before,
    .saving-info__title::before,
    .saving-rating__title::before,
    .saving-faq__title::before,
    .savings-content::before,
    .saving-info::before,
    .saving-faq::before,
    .saving-faq::after {
        display: none !important;
    }

    /* Ensure readable text */
    .savings-content__title,
    .saving-info__title,
    .saving-rating__title,
    .saving-faq__title {
        -webkit-text-fill-color: #000000 !important;
        background: none !important;
        color: #000000 !important;
        padding-top: 0 !important;
    }

    /* Remove shadows and transforms */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
        transform: none !important;
    }

    /* Ensure links are visible */
    a[href]::after {
        content: " (" attr(href) ")" !important;
        font-size: 12px !important;
        color: #666666 !important;
    }
}

/* ===========================================
   FIX I: SELECTION STYLES
   Brand-consistent text selection
   =========================================== */

::selection {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #111827 !important;
}

::-moz-selection {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #111827 !important;
}

/* Selection on dark backgrounds */
.savings-hero ::selection,
.saving-champ ::selection,
.article-grade__col-01 ::selection {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

/* ===========================================
   FIX J: TOUCH TARGET SIZES
   Minimum 44x44px for mobile accessibility
   =========================================== */

@media (max-width: 768px) {
    .saving-info__item,
    .savings-content__filter label,
    .saving-faq__question,
    .toc-item a {
        min-height: 44px !important;
    }

    .saving-faq__question .icon,
    .saving-faq__question .title .number {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}