/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.2.1748097356
Updated: 2025-05-24 14:35:56

*/

 /* Base Styles */
    :root {
        --color-primary: #0A2342;
        --color-secondary: #F7B32B;
        --color-accent: #2EC4B6;
        --color-accent-rgb: 46, 196, 182; /* RGB wersja koloru akcentowego dla rgba() */
        --color-dark: #333333;
        --color-light: #F5F7FA;
        --color-white: #FFFFFF;
        --color-bitcoin-orange: #F7931A;
        --color-secondary: #F7B32B; /* Twój istniejący złoty/pomarańczowy */
        --color-bitcoin-dark: #D97904; 
    
        
        --font-primary: 'Inter', sans-serif;
        --font-heading: 'Montserrat', sans-serif;
        
        --spacing-xs: 0.25rem;
        --spacing-sm: 0.5rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-xxl: 4rem;
        
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 16px;
        
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
        --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0,0,0,0.07); /* Bardziej rozbudowany cień */
        
        --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

        --header-height: 70px;
    }

    /* Reset */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth; 
        scroll-padding-top: var(--header-height); 
    }

    body {
        font-family: var(--font-primary);
        color: var(--color-dark);
        line-height: 1.6;
        background-color: var(--color-white);
        -webkit-font-smoothing: antialiased; 
        -moz-osx-font-smoothing: grayscale;
    }

    body.menu-open {
        overflow: hidden;
    }

    a {
        text-decoration: none;
        color: inherit;
    }

    ul {
        list-style: none;
    }

    img {
        max-width: 100%;
        height: auto;
        display: block; 
    }
 
    .logo__img--footer {
    max-height: 60px;
    height: auto;
    width: auto;
    display: block;
}

    
    .logo__img {
    max-height: 60px;
    height: auto;
    width: auto;
    display: block;
}


    /* Accessibility */
    .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;
    }

    /* Typography */
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-heading);
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: var(--spacing-md);
        color: var(--color-primary);
    }

    p {
        margin-bottom: var(--spacing-md);
    }

    /* Layout */
    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
    }

    main { 
        padding-top: var(--header-height);
        overflow-x: hidden; /* Zapobiega poziomemu scrollbarowi przy niektórych animacjach AOS */
    }

    .section-header {
        text-align: center;
        margin-bottom: var(--spacing-xl);
    }

    .section-title {
        font-size: 2.5rem;
        margin-bottom: var(--spacing-sm);
    }

    .section-subtitle {
        font-size: 1.125rem;
        color: var(--color-dark);
        opacity: 0.8;
        max-width: 700px;
        margin: 0 auto var(--spacing-md);
    }

    /* Header */
    .header {
        position: fixed; 
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--color-white);
        box-shadow: var(--shadow-sm);
        z-index: 1000; 
        height: var(--header-height);
        display: flex;
        align-items: center;
        transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
    }

    .header__content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%; 
    }

    .logo {
        font-family: var(--font-heading);
        font-size: 1.5rem;
        font-weight: 700;
    }

    .logo__text {
        color: var(--color-primary);
    }

    .logo__highlight {
        color: var(--color-secondary);
    }

    .nav__list {
        display: flex;
        gap: var(--spacing-lg);
        align-items: center;
    }

    .nav__item {
        position: relative;
    }

    .nav__link {
        color: var(--color-dark);
        font-weight: 500;
        transition: color var(--transition-fast);
        padding: var(--spacing-sm) 0; 
        display: inline-block;
        position: relative; /* Dla podkreślenia */
    }
    .nav__link::after { /* Efekt podkreślenia przy hover/active */
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--color-accent);
        transition: width var(--transition-normal);
    }
    .nav__link:hover::after,
    .nav__link.nav__link--active::after {
        width: 100%;
    }

    .nav__link:hover,
    .nav__link.nav__link--active {
        color: var(--color-accent);
    }

    .nav__link:focus-visible { 
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }


    .nav__dropdown-icon {
        font-size: 0.75rem;
        margin-left: 4px;
        transition: transform var(--transition-fast);
        display: inline-block; 
    }

    .nav__item--dropdown:hover .nav__dropdown-icon,
    .nav__item--dropdown .nav__link[aria-expanded="true"] + .nav__dropdown-icon {
        transform: rotate(180deg);
    }

    .nav__dropdown {
    position: absolute;
    top: 100%; /* Zmieniono z calc(100% + var(--spacing-xs)) */
    left: 0;
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm); /* Ten padding wewnętrzny da Ci wizualny odstęp od góry, jeśli potrzebujesz */
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98); /* Możesz chcieć zmniejszyć translateY, np. do 0 lub małej wartości */
    transform-origin: top left;
    transition: opacity var(--transition-fast), visibility 0s var(--transition-fast) linear, transform var(--transition-fast);
    z-index: 1010;
}

.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown .nav__link[aria-expanded="true"] ~ .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1); /* Dostosuj translateY, jeśli zmieniłeś go powyżej */
    transition-delay: 0s;
}

    .nav__dropdown li {
        margin-bottom: 0;
    }
    .nav__dropdown .nav__link {
        padding: var(--spacing-sm) var(--spacing-md); 
        display: block; 
        white-space: nowrap;
    }
    .nav__dropdown .nav__link::after { /* Usunięcie podkreślenia z linków w dropdownie */
        display: none;
    }
    .nav__dropdown .nav__link:hover,
    .nav__dropdown .nav__link.active {
        background-color: var(--color-light);
        color: var(--color-accent);
    }

    .header__cta {
        display: flex;
        align-items: center;
    }

    .mobile-menu-toggle {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        width: 30px;
        height: 24px;
        position: relative;
        z-index: 1001; 
    }

    .mobile-menu-toggle__bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary); /* Obecnie ustawiony na granatowy (#0A2342) */
    position: absolute;
    left: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    border-radius: 1px;
}
/* Usunięcie tła z przycisku hamburgera w stanie hover i focus */
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important; /* Jeśli jest niechciany outline przy focusie */
}
    .mobile-menu-toggle__bar:nth-child(1) { top: 0; }
    .mobile-menu-toggle__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .mobile-menu-toggle__bar:nth-child(3) { bottom: 0; }

    .mobile-menu-toggle.active .mobile-menu-toggle__bar:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
    .mobile-menu-toggle.active .mobile-menu-toggle__bar:nth-child(2) { opacity: 0; }
    .mobile-menu-toggle.active .mobile-menu-toggle__bar:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition-normal); 
        border: none;
        text-align: center;
        position: relative; 
        overflow: hidden; /* Dla efektu ripple */
        -webkit-tap-highlight-color: transparent; /* Usuwa niebieskie tło przy kliknięciu na mobilnych */
    }
    .btn:focus-visible { 
        outline: 2px solid var(--color-primary);
        outline-offset: 3px;
    }
    .btn--primary {
        background-color: var(--color-accent);
        color: var(--color-white); 
        box-shadow: 0 2px 5px rgba(46, 196, 182, 0.2);
    }
    .btn--primary:hover {
        background-color: #25a99d; 
        transform: translateY(-3px) scale(1.02); 
        box-shadow: 0 6px 12px rgba(46, 196, 182, 0.3); 
		color: var(--color-white); !important
    }
    .btn--secondary {
        background-color: transparent;
        color: var(--color-primary);
        border: 2px solid var(--color-primary);
    }
    .btn--secondary:hover {
        background-color: var(--color-primary);
        color: var(--color-white); !important
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 6px 12px rgba(10, 35, 66, 0.2); 
    }
    .btn--large { padding: 1rem 2rem; font-size: 1.125rem; }
    .btn--small { padding: 0.5rem 1rem; font-size: 0.875rem; }
    .btn--full { width: 100%; }

    /* Ripple Effect na przyciskach (JS będzie dodawał span.ripple) */
    .btn .ripple {
        position: absolute;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.3); /* Jaśniejszy ripple dla ciemniejszych przycisków */
        transform: scale(0);
        animation: ripple-animation 0.7s cubic-bezier(0, 0, 0.2, 1);
        pointer-events: none;
    }
    .btn--secondary .ripple {
        background-color: rgba(0, 0, 0, 0.1); /* Ciemniejszy ripple dla jaśniejszych przycisków */
    }

    @keyframes ripple-animation {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }


    /* Hero Section */
    .hero {
        padding-bottom: var(--spacing-xxl);
        position: relative;
        overflow: hidden;
        min-height: calc(90vh - var(--header-height));
        display: flex; 
        align-items: center; 
    }
    .hero__container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-xl);
    }
    .hero__bg {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background-color: var(--color-primary); z-index: -2;
    }

.hero__chart-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}
    /* Animowane tło dla hero */
    @keyframes animatedGradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
    .hero__animation { 
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-secondary) 100%);
        background-size: 250% 250%; 
        animation: animatedGradient 20s ease infinite; 
        z-index: -1;
        opacity: 0.9; 
    }

    .hero__content {
        color: var(--color-white);
        max-width: 55%; 
        position: relative; 
        z-index: 1;
    }
    .hero__title { 
        font-size: 3rem; 
        color: var(--color-white);
        margin-bottom: var(--spacing-md);
        font-weight: 700; 
    }
    .hero__subtitle {
        font-size: 1.15rem;
        margin-bottom: var(--spacing-lg);
        opacity: 0.9;
        line-height: 1.7; 
    }
    .hero__cta { 
        display: flex; 
        gap: var(--spacing-md); 
        margin-top: var(--spacing-lg);
    }

    /* Hero Calculator Wrapper */
    .hero__calculator-wrapper {
        flex-shrink: 0;
        width: 100%;
        max-width: 420px;
        z-index: 1;
    }
    .hero-calculator-instance { /* This class was used in script.js for tabs but not present in HTML sample for calculator */
        background-color: var(--color-white);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg); 
        overflow: hidden;
    }
    .hero-calculator-instance .calculator__header {
        padding: var(--spacing-md);
        background: linear-gradient(to right, var(--color-primary), lighten(var(--color-primary), 10%));
    }
    .hero-calculator-instance .calculator__title {
        font-size: 1.1rem; 
        color: var(--color-white); 
    }
    .hero-calculator-instance .calculator__body {
        padding: var(--spacing-md);
    }
    .hero-calculator-instance .calculator__input,
    .hero-calculator-instance .calculator__select {
        padding: var(--spacing-sm);
        font-size: 0.9rem;
    }
    .hero-calculator-instance .calculator__rate {
        font-size: 0.8rem;
        margin-top: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
        transition: color var(--transition-fast); 
    }
    .hero-calculator-instance .calculator__footer .btn {
        font-size: 0.9rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }

/* === RESPONSIVE ADJUSTMENTS (Relevant parts based on used classes) === */
@media (max-width: 991px) {
    .hero__title { font-size: clamp(1.8rem, 6vw, 2.5rem); }
    .hero__subtitle { font-size: clamp(1rem, 4vw, 1.1rem); }
}

@media (max-width: 767px) {
    .section-header { padding-top: var(--spacing-xl); } /* Generic */
    .hero__layout-wrapper { text-align: center; }
    .hero__content { margin-bottom: var(--spacing-xl); }
    .hero__cta { justify-content: center; }
    .hero__cta .btn { width: 100%; max-width: 300px; }
    .calculator__row { grid-template-columns: 1fr; }
    .calculator__arrow-container { display: none; }
    .contact__content { grid-template-columns: 1fr; }
    .contact__info { margin-bottom: var(--spacing-xl); text-align: center; }
    .contact__item { flex-direction:column; align-items:center; }
    .contact__item-icon { margin-right:0; margin-bottom:var(--spacing-sm); }
}



    .input-with-select { 
        display: flex;
        border: 1px solid #ddd; 
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }
    .input-with-select:focus-within { 
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2); 
    }
    .calculator__input { /* This general class might conflict if not specific enough */
        flex: 1; padding: var(--spacing-md); border: none; outline: none;
        font-size: 1rem; width: 100%; 
    }
    .select-wrapper { position: relative; }
    .select-wrapper::after { 
        content: '▼'; font-size: 0.8rem; color: var(--color-dark);
        position: absolute; right: var(--spacing-md); top: 50%;
        transform: translateY(-50%); pointer-events: none; 
        transition: transform var(--transition-fast);
    }
    .select-wrapper:hover::after { 
        transform: translateY(-50%) scale(1.1);
    }
    .calculator__select { /* This general class might conflict */
        padding: var(--spacing-md) calc(var(--spacing-lg) + var(--spacing-sm)) var(--spacing-md) var(--spacing-md); 
        border: none; background-color: var(--color-light); outline: none;
        font-size: 1rem; font-weight: 500; height: 100%; cursor: pointer;
        -webkit-appearance: none; -moz-appearance: none; appearance: none;
        border-left: 1px solid #ddd; 
        transition: background-color var(--transition-fast);
    }
    .calculator__select:hover {
        background-color: #e9edf2; 
    }

    .calculator__tabs { display: flex; }
    .calculator__tab { /* Used by old calculator logic if its HTML was present */
        flex: 1; background: none; border: none; color: var(--color-white);
        opacity: 0.7; padding: var(--spacing-xs) var(--spacing-sm); cursor: pointer;
        transition: opacity var(--transition-fast), border-bottom-color var(--transition-fast);
        font-size: 0.9rem;
        border-bottom: 2px solid transparent; 
    }
    .hero-calculator-instance .calculator__tab--active {
        opacity: 1; 
        border-bottom-color: var(--color-secondary);
    }
    .calculator__field label { display: block; margin-bottom: var(--spacing-xs); font-weight: 500; font-size: 0.8rem;}

    .hidden-panel { 
        display: none;
    }

    /* Features Section */
    .features { padding: var(--spacing-xxl) 0; }
    .features__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--spacing-xl);
    }
    .feature-card {
        background-color: var(--color-white); border-radius: var(--radius-lg);
        padding: var(--spacing-xl); box-shadow: var(--shadow-md); 
        transition: transform var(--transition-normal), box-shadow var(--transition-normal);
        display: flex; flex-direction: column;
    }
    .feature-card:hover { 
        transform: translateY(-8px) scale(1.02); 
        box-shadow: var(--shadow-lg); 
    }
    .feature-card__icon { margin-bottom: var(--spacing-md); align-self: flex-start; }
    .feature-card__icon svg { 
        width: 48px; height: 48px; 
        transition: transform var(--transition-normal); 
    }
    .feature-card:hover .feature-card__icon svg {
        transform: scale(1.15) rotate(5deg); 
    }
    .feature-card__title { font-size: 1.25rem; margin-bottom: var(--spacing-sm); color: var(--color-primary); }
    .feature-card__description { color: var(--color-dark); opacity: 0.8; font-size: 0.9375rem; margin-top: auto; }

    /* Process Section */
    .process { padding: var(--spacing-xxl) 0; background-color: var(--color-light); }
    .process__steps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: var(--spacing-xl);
        position: relative;
        margin-bottom: var(--spacing-xxl);
    }
    .process-step {
        display: flex; flex-direction: column; align-items: center;
        text-align: center; background-color: var(--color-white);
        padding: var(--spacing-lg); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
        transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    }
    .process-step:hover {
        transform: translateY(-6px) scale(1.03);
        box-shadow: var(--shadow-md);
    }
    .process-step__number-wrapper { 
        margin-bottom: var(--spacing-md);
    }
    .process-step__number {
        width: 60px; height: 60px;
        border-radius: 50%; background-color: var(--color-accent);
        color: var(--color-white); display: flex; justify-content: center;
        align-items: center; font-size: 1.5rem; font-weight: 700;
        transition: background-color var(--transition-normal), transform var(--transition-normal);
    }
    .process-step:hover .process-step__number {
        background-color: var(--color-secondary);
        transform: scale(1.1) rotate(10deg); 
    }
    .process-step__title { font-size: 1.2rem; margin-bottom: var(--spacing-sm); }
    .process-step__description { font-size: 0.9rem; opacity: 0.8; }
    .process__cta-main { text-align: center; margin-top: var(--spacing-xl); }


    /* Rates Section */
    .rates { padding: var(--spacing-xxl) 0; }
    .rates__table-container { overflow-x: auto; margin-bottom: var(--spacing-lg); }
    .rates__table {
        width: 100%; border-collapse: collapse;
        box-shadow: var(--shadow-md);
        border-radius: var(--radius-lg); overflow: hidden;
    }
    .rates__table th, .rates__table td { 
        padding: var(--spacing-md); 
        text-align: left; 
        border-bottom: 1px solid var(--color-light); 
        transition: background-color var(--transition-fast);
    }
    .rates__table th {
        background-color: var(--color-primary); color: var(--color-white);
        font-weight: 600; font-size: 0.9rem; text-transform: uppercase;
    }
    .rates__table tbody tr:nth-child(even) { background-color: #fcfdff; } 
    .rates__table tbody tr:hover { 
        background-color: rgba(var(--color-accent-rgb), 0.08); 
        box-shadow: inset 4px 0 0 0 var(--color-accent); 
    }
    .crypto-info { display: flex; align-items: center; gap: var(--spacing-md); }
    .crypto-icon {
        width: 40px; height: 40px;
        background-size: cover; background-position: center;
        flex-shrink: 0;
        transition: transform var(--transition-normal);
    }
    .rates__table tbody tr:hover .crypto-icon {
        transform: scale(1.15); 
    }
    .crypto-icon--btc { background-image: url('assets/icons/btc.svg'); } /* Needs assets folder or use placeholder/SVG inline */
    .crypto-icon--eth { background-image: url('assets/icons/eth.svg'); }
    .crypto-icon--usdc { background-image: url('assets/icons/usdc.svg'); }
    .crypto-icon--ltc { background-image: url('assets/icons/ltc.svg'); }
    /* Fallback for icons if images not available */
    .crypto-icon--btc:before { content: ''; display: block; width:100%; height:100%; background-color: #F7931A; border-radius:50%; }


    .crypto-name__full { display: block; font-weight: 600; font-size: 1rem; }
    .crypto-name__short { display: block; font-size: 0.8rem; opacity: 0.7; }
    .rate-change { font-weight: 600; font-size: 0.9rem; }
    .rate-change--up { color: #16C784; }
    .rate-change--down { color: #EA3943; }

    @keyframes highlight-positive {
        0% { background-color: rgba(22, 199, 132, 0.4); transform: scale(1.05); }
        100% { background-color: transparent; transform: scale(1); }
    }
    @keyframes highlight-negative {
        0% { background-color: rgba(234, 57, 67, 0.4); transform: scale(1.05); }
        100% { background-color: transparent; transform: scale(1); }
    }
    .rate-changed-positive td { animation: highlight-positive 0.8s ease-out; }
    .rate-changed-negative td { animation: highlight-negative 0.8s ease-out; }

    .rates__info { text-align: center; font-size: 0.875rem; margin-top: var(--spacing-lg); }
    .rates__timestamp { font-weight: 500; }
    .rates__disclaimer { color: var(--color-dark); opacity: 0.6; font-size: 0.75rem; margin-top: var(--spacing-sm); }
    .rates__table td[data-label="Akcja"] .btn--small { padding: 0.4rem 0.8rem; font-size: 0.8rem; }


    /* Locations Section */
    .locations { padding: var(--spacing-xxl) 0; background-color: var(--color-light); }
    .locations__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); }
    .location-card {
        background-color: var(--color-white); border-radius: var(--radius-lg);
        overflow: hidden; box-shadow: var(--shadow-md);
        transition: transform var(--transition-normal), box-shadow var(--transition-normal);
        display: flex; flex-direction: column;
    }
    .location-card:hover { 
        transform: translateY(-10px) scale(1.01); 
        box-shadow: var(--shadow-lg); 
    }
    .location-card__image { height: 250px; overflow: hidden; position: relative; }
    .location-card__image img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform var(--transition-slow); 
    }
    .location-card:hover .location-card__image img { 
        transform: scale(1.1); 
        filter: brightness(0.9); 
    }
    .location-card__content { padding: var(--spacing-lg); display: flex; flex-direction: column; flex-grow: 1; }
    .location-card__title { font-size: 1.5rem; margin-bottom: var(--spacing-sm); }
    .location-card__address { margin-bottom: var(--spacing-md); color: var(--color-dark); font-size: 0.9rem; }
    .location-card__hours { margin-bottom: var(--spacing-lg); font-size: 0.85rem; }
    .location-card__hours p { margin-bottom: var(--spacing-xs); }
    .location-card__actions { display: flex; gap: var(--spacing-md); margin-top: auto; }
    .location-card__actions .btn { flex: 1; }

    

    /* Placeholder Sections for Blog/ on Homepage */
    .placeholder-section {
        padding: var(--spacing-xl) 0;
        text-align: center;
        background-color: var(--color-light);
    }
    .placeholder-section .section-title { margin-bottom: var(--spacing-sm); }
    .placeholder-section .section-subtitle { margin-bottom: var(--spacing-lg); }

    /* CTA Section */
    .cta-section { padding: var(--spacing-xxl) 0; }
    .cta-box {
        background-color: var(--color-primary); 
        background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 150%);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xxl); color: var(--color-white);
        text-align: center; box-shadow: var(--shadow-lg);
        position: relative; overflow: hidden;
    }
    .cta-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
        transform: skewX(-25deg);
        transition: left var(--transition-slow);
    }
    .cta-box:hover::before {
        left: 150%;
    }

    .cta-box__content { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
    .cta-box__title { font-size: 2.5rem; color: var(--color-white); margin-bottom: var(--spacing-md); }
    .cta-box__text { font-size: 1.125rem; margin-bottom: var(--spacing-xl); opacity: 0.9; }
    .cta-box__actions { display: flex; justify-content: center; gap: var(--spacing-md); flex-wrap: wrap; }

    /* Footer */
    .footer {
        background-color: var(--color-primary); color: var(--color-white);
        padding: var(--spacing-xxl) 0 var(--spacing-lg);
    }
    .footer__top {
        display: grid; grid-template-columns: 2fr repeat(3, 1fr);
        gap: var(--spacing-xl) var(--spacing-lg); margin-bottom: var(--spacing-xl);
    }
    .logo--footer { margin-bottom: var(--spacing-md); }
    .footer__description { opacity: 0.8; margin-bottom: var(--spacing-lg); font-size: 0.9375rem; line-height: 1.7; }
    .footer__social { display: flex; gap: var(--spacing-md); }
    .social-icon {
        width: 40px; height: 40px; border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1); display: flex;
        justify-content: center; align-items: center;
        transition: background-color var(--transition-fast), transform var(--transition-fast);
        color: var(--color-white);
    }
    .social-icon:hover, .social-icon:focus-visible {
        background-color: var(--color-accent); transform: scale(1.15) rotate(5deg); 
        outline:none;
    }
    .footer__heading { font-size: 1.25rem; color: var(--color-white); margin-bottom: var(--spacing-lg); font-weight: 600; }
    .footer__links li { margin-bottom: var(--spacing-sm); }
    .footer__links a { opacity: 0.8; transition: opacity var(--transition-fast), color var(--transition-fast), letter-spacing var(--transition-fast); font-size:0.9375rem; }
    .footer__links a:hover, .footer__links a.active, .footer__links a:focus-visible {
        opacity: 1; color: var(--color-secondary); outline:none;
        letter-spacing: 0.5px; 
    }
    .footer__contact li {
        display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-md);
        opacity: 0.8; font-size:0.9375rem; align-items: flex-start;
        color: var(--color-white);
    }
    .footer__contact li svg { flex-shrink: 0; margin-top: 4px; width: 18px; height:18px; }
    .footer__contact a { transition: color var(--transition-fast); color: var(--color-white); }
    .footer__contact a:hover, .footer__contact a:focus-visible { color: var(--color-secondary); outline:none; }
    .footer__bottom {
        display: flex; justify-content: space-between; align-items: center;
        padding-top: var(--spacing-lg); border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: var(--spacing-md); flex-wrap: wrap; gap: var(--spacing-md);
    }
    .footer__copyright { font-size: 0.875rem; opacity: 0.7; }
    .footer__legal { display: flex; gap: var(--spacing-lg); }
    .footer__legal a { font-size: 0.875rem; opacity: 0.7; transition: opacity var(--transition-fast), color var(--transition-fast); }
    .footer__legal a:hover, .footer__legal a:focus-visible { opacity: 1; color: var(--color-secondary); outline:none; }
    .footer__disclaimer { font-size: 0.75rem; opacity: 0.6; text-align: center; width: 100%; margin-top: var(--spacing-lg); line-height: 1.5; }

    /* Responsive Styles */
    @media (max-width: 1024px) {
        .hero__container { flex-direction: column; text-align: center; }
        .hero__content { max-width: 100%; margin-bottom: var(--spacing-xl); }
        .hero__calculator-wrapper { max-width: 500px; margin: 0 auto; }
        .process__steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
        .footer__top { grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); }
        .footer__column--logo { grid-column: 1 / -1; }
        .rates__table td[data-label="Akcja"] .btn--small { white-space: nowrap; }
    }

    @media (max-width: 768px) {
        :root { --header-height: 60px; }
        .section-title { font-size: 1.8rem; }
        .hero { min-height: auto; padding-bottom: var(--spacing-xl); }
        .hero__title { font-size: 2rem; }
        .hero__subtitle { font-size: 1rem; }
        .hero__cta { flex-direction: column; align-items: center; }
        .hero__cta .btn { width: 100%; max-width: 280px; }
        
        .nav {
            position: fixed; top: 0; left: 0; width: 280px; height: 100%;
            max-width: 80%; background-color: var(--color-primary); 
            transform: translateX(-100%);
            transition: transform var(--transition-normal) ease-in-out;
            z-index: 999; 
            padding: calc(var(--header-height) + var(--spacing-lg)) var(--spacing-lg) var(--spacing-lg);
            overflow-y: auto; box-shadow: 5px 0 15px rgba(0,0,0,0.2);
        }
        .nav.nav--open { transform: translateX(0); }
        .nav__list { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
        .nav__link { color: var(--color-white); font-size: 1.1rem; display: block; width: 100%; padding: var(--spacing-sm) 0; }
        .nav__link:hover, .nav__link.nav__link--active { color: var(--color-secondary); }
        .nav__link::after { display: none; } 
        .nav__dropdown { 
            position: static; box-shadow: none; padding: var(--spacing-sm) 0 0 var(--spacing-md); 
            min-width: auto; opacity: 1; visibility: visible; transform: none; display: none; 
            background-color: transparent;
        }
        .nav__item--dropdown .nav__link[aria-expanded="true"] ~ .nav__dropdown,
        .nav__item--dropdown.dropdown-open--mobile .nav__dropdown {
            display: block;
        }
        .nav__dropdown .nav__link { font-size: 1rem; padding: var(--spacing-xs) 0; color: rgba(255,255,255,0.8); }
        .nav__dropdown .nav__link:hover { color: var(--color-secondary); }

        .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; }
        .header__cta { display: none; } /* Assuming CTA in header is hidden on mobile, not main CTAs */
        
        .features__grid { grid-template-columns: 1fr; }
        .process__steps { grid-template-columns: 1fr; }
        /* .process-step { width: 100%; } */ /* Already full width due to grid setting */

        .rates__table { font-size: 0.8rem; }
        .rates__table thead { display: none; }
        .rates__table tr { display: block; margin-bottom: var(--spacing-lg); border: 1px solid var(--color-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
        .rates__table td { display: block; text-align: right; padding-left: 50%; position: relative; border-bottom: 1px dotted var(--color-light); }
        .rates__table td:last-child { border-bottom: none; }
        .rates__table td::before {
            content: attr(data-label); position: absolute; left: var(--spacing-sm);
            width: calc(50% - var(--spacing-md)); text-align: left; font-weight: bold;
            color: var(--color-primary);
        }
        .rates__table .crypto-info { justify-content: flex-end; }
        .rates__table .crypto-info .crypto-name { text-align: right; }


        .locations__grid { grid-template-columns: 1fr; }
        .testimonial-nav { width: 35px; height: 35px; font-size: 1.2rem; }
        .testimonial-nav--prev { left: 5px; }
        .testimonial-nav--next { right: 5px; }
        .testimonials__slides-container { gap: var(--spacing-md); }
        
        .cta-box__actions { flex-direction: column; align-items: center; }
        .cta-box__actions .btn { width: 100%; max-width: 280px; }
        
        .footer__top { grid-template-columns: 1fr; text-align: center; }
        .footer__column--logo .footer__social { justify-content: center; }
        .footer__contact li { justify-content: center; flex-direction: column; align-items: center; text-align: center; }
        .footer__contact li svg { margin-bottom: var(--spacing-xs); }
        .footer__bottom { flex-direction: column; gap: var(--spacing-md); text-align: center; }
        .footer__legal { flex-direction: column; gap: var(--spacing-sm); align-items: center; }
    }

    .footer__social .social-icon svg path,
    .footer__contact li svg path {
        stroke: currentColor;
    }

    @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;
      }
      [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .hero__animation {
        animation: none !important; 
      }
      .cta-box::before {
        display: none !important; 
      }
    }

/* === RESPONSIVE STYLES (Wybrane i dostosowane z Kodu 2) === */

@media (max-width: 992px) { /* Ten blok dotyczy tabletów i mniejszych urządzeń */
    :root {
        --spacing-xxl: 3rem;
    }

    .hero__layout-wrapper {
        flex-direction: column;
        align-items: center; /* Dodane: Wyśrodkowuje .hero__content i .hero__chart-wrapper w poziomie */
        text-align: center;  /* Istniejące: Tekst wewnątrz .hero__layout-wrapper i dziedziczące dzieci */
    }

    .hero__content {
        flex-basis: auto;
        width: 100%; /* Zajmuje pełną dostępną szerokość */
        max-width: 700px; /* Ograniczenie maksymalnej szerokości */
        margin-bottom: var(--spacing-xl);
        /* Dodane poniższe style, aby .hero__content sam wyśrodkowywał swoje dzieci */
        display: flex;
        flex-direction: column;
        align-items: center; /* Wyśrodkowuje elementy takie jak .service-badge, .hero__title, .hero__cta, .hero__rate */
        /* text-align: center; zostanie odziedziczone z .hero__layout-wrapper, ale można dodać dla pewności */
    }

    .hero__cta {
        justify-content: center; /* Istniejące: Dla przycisków obok siebie na większych ekranach w tym zakresie */
        /* Jeśli przyciski mają być już w kolumnie tutaj, przenieś logikę z @media (max-width: 768px) */
    }

    .hero__rate {
        margin-left: auto;   /* Istniejące */
        margin-right: auto;  /* Istniejące */
        /* display: inline-block; jest już w stylach bazowych .hero__rate */
    }

    .hero__chart-wrapper {
        flex-basis: auto;
        width: 100%;
        max-width: 600px;
        height: 350px;
    }

    .process__steps::before {
        display: none;
    }
    .process__step {
        width: 45%;
    }
}

@media (max-width: 768px) { /* Ten blok dotyczy głównie telefonów komórkowych */
    /* :root - zmiany dla spacing już są w @media (max-width: 480px), można przenieść tutaj jeśli potrzeba wcześniej */

    .hero__title {
        font-size: clamp(2.2rem, 4.5vw, 3rem); /* Istniejące */
    }
    .hero__subtitle {
        font-size: clamp(1rem, 1.8vw, 1.125rem); /* Istniejące */
    }
    .hero__chart-wrapper {
        height: 300px; /* Istniejące */
    }

    .hero__cta {
        flex-direction: column; /* Istniejące: Przyciski jeden pod drugim */
        align-items: center;    /* Zmienione/Dodane: Wyśrodkowuje przyciski (lub cały blok CTA) w .hero__content */
        width: 100%;            /* Dodane: Pozwala .hero__cta zająć pełną szerokość .hero__content (jeśli .hero__content ma padding) lub być wyśrodkowanym przez align-items:center w .hero__content */
    }

    .hero__cta .btn {
        width: 100%; /* Istniejące: Przyciski na pełną szerokość kontenera .hero__cta */
        max-width: 400px; /* Opcjonalnie: Jeśli nie chcesz, aby przyciski były zbyt szerokie na niektórych ekranach */
        /* margin-bottom: var(--spacing-sm); */ /* Opcjonalnie: Dodaj margines dolny, jeśli przyciski są zbyt blisko siebie */
    }
    /* .hero__cta .btn:last-child { margin-bottom: 0; } */

    .process__step {
        width: 100%;
    }
    .contact__content {
        /* grid-template-columns: 1fr; - już obsłużone przez auto-fit */
    }

    .faq__question {
        font-size: 1rem !important;
    }
    .faq__answer {
        font-size: 0.95rem !important;
    }
    .faq__answer p {
        font-size: 0.95rem !important;
    }
}
.faq-question-text {
    font-size: 1rem; /* lub np. 0.95rem, 14px, itp. */
    font-weight: 600; /* jeśli chcesz zmniejszyć wagę */
}


/* Pozostałe style, w tym @media (max-width: 480px) i inne, pozostają bez zmian z poprzedniej wersji */


    /* Styles specific to the PanBitcoin Hero Calculator (#panbitcoin-hero-calculator) */
    #panbitcoin-hero-calculator { 
        background-color: #FFFFFF; 
        padding: 25px 30px; 
        border-radius: 15px; 
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); 
        width: 100%;
        max-width: 400px; 
        text-align: left;
        margin-left: auto; 
        margin-right: auto;
    }

    #panbitcoin-hero-calculator .pb-calculator-title {
        color: #0A2342; 
        font-size: 20px; 
        font-weight: 600;
        margin-bottom: 0px; 
        padding-bottom: 8px; 
        position: relative;
        text-align: left;
        display: block; 
    }
    #panbitcoin-hero-calculator .pb-calculator-subtitle {
        display: block;
        font-size: 14px;
        color: #F7B32B; 
        font-weight: 500;
        margin-bottom: 15px;
        position: relative; 
        padding-bottom: 8px;
    }

    #panbitcoin-hero-calculator .pb-calculator-subtitle::after { 
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50px;
        height: 3px;
        background-color: #F7B32B; 
        border-radius: 2px;
    }

    #panbitcoin-hero-calculator .pb-calculator-label {
        font-size: 13px; 
        font-weight: 500; 
        color: #333333; 
        display: block;
        margin-bottom: 6px; 
        margin-top: 12px; 
    }

    #panbitcoin-hero-calculator .pb-calculator-select,
    #panbitcoin-hero-calculator .pb-calculator-input {
        width: 100%;
        padding: 10px 12px; 
        margin-top: 0; 
        margin-bottom: 12px; 
        border-radius: 8px;
        border: 1px solid #DDE2E8; 
        background-color: #F5F7FA; 
        color: #333333; 
        font-size: 15px; 
        font-family: 'Inter', sans-serif;
        transition: border-color 0.3s, box-shadow 0.3s;
    }

    #panbitcoin-hero-calculator .pb-calculator-select:focus,
    #panbitcoin-hero-calculator .pb-calculator-input:focus {
        outline: none;
        border-color: #2EC4B6; 
        background-color: #FFFFFF; 
        box-shadow: 0 0 0 3px rgba(46, 196, 182, 0.25); 
    }

    #panbitcoin-hero-calculator .pb-calculator-input::placeholder {
        color: #888888; 
        opacity: 1; 
    }

    #panbitcoin-hero-calculator .pb-calculator-button {
        width: 100%;
        padding: 12px; 
        margin-top: 20px;
        border-radius: 8px;
        border: none;
        background-color: #2EC4B6; 
        color: #FFFFFF; 
        font-size: 15px; 
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

    #panbitcoin-hero-calculator .pb-calculator-button:hover {
        background-color: #F7B32B; 
        transform: translateY(-2px);
    }

    #panbitcoin-hero-calculator .pb-calculator-result {
        margin-top: 18px;
        font-size: 13px; 
        color: #333333; 
        text-align: left;
        background-color: #F5F7FA; 
        padding: 12px; 
        border-radius: 8px;
        white-space: pre-line;
        line-height: 1.5;
        border: 1px solid #DDE2E8; 
    }

    #panbitcoin-hero-calculator .pb-calculator-select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
        background-repeat: no-repeat;
        background-position: right 12px center; 
        background-size: 9px 9px; 
        padding-right: 35px; 
    }

    /* CSS from fullContent files not directly related to contact, about, , or hero calculator, if any, would be here. */
    /* For this merge, I've focused on integrating all provided CSS. */

/* === STYLE DLA STRONY O NAS === */

/* Można użyć .contact-hero lub stworzyć .subpage-hero jeśli potrzeba innych styli */
/* .subpage-hero { ... } */

.about-content {
    padding: var(--spacing-xl) 0; /* Mniejszy padding niż sekcje na stronie głównej */
}

.about-article {
    max-width: 900px; /* Maksymalna szerokość dla lepszej czytelności */
    margin: 0 auto;
}

.about-section {
    margin-bottom: var(--spacing-xxl);
}

.about-section-title {
    font-size: 2rem; /* Rozmiar dla podtytułów na stronie "O nas" */
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-accent);
    display: inline-block; /* Aby border-bottom obejmował tylko tekst */
}

.about-section-title.text-center { /* Dla wyśrodkowanych tytułów sekcji */
    display: block;
    text-align: center;
    border-bottom: none; /* Usuwamy border dla wyśrodkowanych, jeśli tak wolimy */
    margin-bottom: var(--spacing-xs); /* Mniejszy margines, jeśli jest podtytuł sekcji */
}
.about-section .section-subtitle.text-center { /* Dla podtytułu sekcji Wartości */
    margin-bottom: var(--spacing-xl);
}


.about-section p {
    font-size: 1.05rem; /* Nieco większa czcionka dla tekstu akapitowego */
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
    color: var(--color-dark);
}
.about-section p:last-of-type {
    margin-bottom: 0;
}

/* Stylizacja dla sekcji Wartości, jeśli używamy kart */
.values-section .features__grid { /* Możemy użyć istniejącej klasy .features__grid */
    gap: var(--spacing-lg); /* Można dostosować odstęp */
}

.value-card { /* Jeśli chcemy lekko zmodyfikować styl .feature-card */
    background-color: var(--color-white);
    /* Można dodać np. lekką ramkę lub inny cień niż standardowy .feature-card */
    /* border: 1px solid var(--color-light); */
}

.value-card .feature-card__icon svg { /* Dostosowanie ikon dla kart wartości */
    width: 40px; /* Mniejsze ikony, jeśli potrzeba */
    height: 40px;
    color: var(--color-accent); /* Upewnienie się, że SVG dziedziczy kolor lub ma go ustawiony */
}
.value-card .feature-card__icon svg path,
.value-card .feature-card__icon svg circle,
.value-card .feature-card__icon svg line,
.value-card .feature-card__icon svg rect {
    stroke: var(--color-accent) !important; /* Wymuszenie koloru stroke, jeśli SVG są jednolite */
}


/* Stylizowana lista dla "Dlaczego Warto Nam Zaufać?" */
.styled-list {
    list-style: none;
    padding-left: 0;
}

.styled-list li {
    font-size: 1.05rem;
    line-height: 1.8;
    padding-left: 30px; /* Wcięcie dla " галочки " */
    position: relative;
    margin-bottom: var(--spacing-md);
}

.styled-list li::before {
    content: '✔'; /* Lub SVG jako background-image */
    color: var(--color-accent);
    position: absolute;
    left: 0;
    top: 2px; /* Dostosuj wyrównanie pionowe */
    font-weight: bold;
    font-size: 1.2em; /* Rozmiar " галочки " */
}

/* CTA na stronie "O nas" - użyje istniejących stylów .cta-section i .cta-box */

/* Dostosowania responsywne */
@media (max-width: 768px) {
    .about-section-title {
        font-size: 1.8rem;
    }
    .about-section p, .styled-list li {
        font-size: 1rem;
    }
     .values-section .features__grid {
        grid-template-columns: 1fr; /* Jedna karta wartości na mobilnych */
    }
}


/* === STYLE DLA STRONY KONTAKTOWEJ === */

/* Hero sekcji kontaktowej */
.contact-hero {
    padding-top: var(--spacing-xl); /* Mniejszy padding niż na stronie głównej */
    padding-bottom: var(--spacing-xl);
    background-color: var(--color-light); /* Lub inny kolor, np. subtelny gradient */
    text-align: center;
}

.contact-hero .section-title {
    font-size: 2.8rem; /* Trochę mniejszy niż główny H1 */
    color: var(--color-primary);
}

.contact-hero .section-subtitle {
    font-size: 1.2rem;
    color: var(--color-dark);
    opacity: 0.9;
}

/* Główna sekcja kontaktowa */
.contact-main {
    padding: var(--spacing-xxl) 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* Dwie kolumny, formularz szerszy */
    gap: var(--spacing-xxl);
}

.contact-section-title { /* Tytuł dla "Dane kontaktowe" i "Napisz do nas" */
    font-size: 1.8rem;
    color: var(--color-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
}

/* Informacje kontaktowe */
.contact-info__item {
    display: flex;
    align-items: flex-start; /* Wyrównanie ikon do góry tekstu */
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    font-size: 1rem;
    line-height: 1.7;
}

.contact-info__item svg {
    width: 24px; /* Rozmiar ikon jak w stopce */
    height: 24px;
    color: var(--color-accent); /* Kolor ikony */
    flex-shrink: 0; /* Aby ikona się nie kurczyła */
    margin-top: 4px; /* Lepsze wyrównanie z pierwszą linią tekstu */
}

.contact-info__item strong {
    color: var(--color-primary);
}

.contact-info__item a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-info__item a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}


/* Formularz kontaktowy */
.contact-form .form-group {
    margin-bottom: var(--spacing-lg);
}

.contact-form label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    color: var(--color-primary);
    font-size: 0.9rem;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.2); /* Użyj istniejącej zmiennej RGB */
}

.form-textarea {
    resize: vertical; /* Pozwól na zmianę wysokości */
    min-height: 120px;
}

.form-group--submit {
    text-align: right; /* Wyrównanie przycisku do prawej */
}

.form-status { /* Dla komunikatów o statusie formularza */
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}
.form-status.success {
    background-color: rgba(var(--color-accent-rgb), 0.1);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}
.form-status.error {
    background-color: rgba(234, 57, 67, 0.1); /* Kolor dla błędów (czerwony) */
    border: 1px solid #EA3943;
    color: #EA3943;
}


/* Sekcja z mapami */
.map-section {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-light);
}

.map-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-xl);
}

.map-container {
    border-radius: var(--radius-lg);
    overflow: hidden; /* Aby zaokrąglić rogi mapy (jeśli iframe ma 100% szer/wys) */
    box-shadow: var(--shadow-md);
}
.map-container iframe { /* Stylizacja dla iframe mapy, jeśli będzie używany */
    display: block;
    width: 100%;
    height: 400px; /* Dostosuj wysokość mapy */
    border: 0;
}
.map-title { /* Tytuł nad każdą mapą */
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
}
.map-placeholder { /* Styl dla placeholdera mapy */
    background-color: #e9e9e9;
    padding: var(--spacing-lg);
    text-align: center;
    min-height: 300px; /* Minimalna wysokość placeholdera */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}
.map-placeholder p {
    margin-bottom: var(--spacing-sm);
    color: var(--color-dark);
}
.map-placeholder img {
    border-radius: var(--radius-sm);
}


/* Dostosowania responsywne dla strony kontaktowej */
@media (max-width: 992px) { /* Np. dla tabletów */
    .contact-grid {
        grid-template-columns: 1fr; /* Jedna kolumna na tabletach */
    }
    .contact-info {
        margin-bottom: var(--spacing-xl); /* Odstęp między informacjami a formularzem */
    }
}

@media (max-width: 768px) {
    .contact-hero .section-title {
        font-size: 2.2rem;
    }
    .contact-hero .section-subtitle {
        font-size: 1rem;
    }
    .form-group--submit {
        text-align: center; /* Przycisk na środku na mobilnych */
    }
    .form-group--submit .btn {
        width: 100%; /* Przycisk na całą szerokość */
        max-width: 320px;
    }
}

/* Dodatkowe style dla ikon kontaktowych, jeśli używasz tych samych co w stopce */
.contact-info__item svg path {
    stroke: currentColor;
}

/* === STYLE DLA STRONY FAQ (przywrócono niektóre !important dla kolorów i wyglądu) === */
/* === STYLE DLA STRONY FAQ (przywrócono niektóre !important dla kolorów i wyglądu) === */

.faq-section {
    padding: var(--spacing-xl) 0 var(--spacing-xxl) !important;
}

.faq-container {
    max-width: 850px !important;
    margin: 0 auto !important;
}

.faq-item {
    border-bottom: 1px solid var(--color-light) !important;
}
.faq-item:last-child {
    border-bottom: none !important;
}

.faq-question {
    display: flex !important;
    justify-content: space-between !important;
    /* Rozważ 'align-items: flex-start;' jeśli chcesz, aby ikona była wyrównana do góry, gdy tekst pytania jest wieloliniowy */
    align-items: center !important;
    width: 100% !important;
    padding: var(--spacing-lg) 0 !important;
    background: none !important;
    border: none !important;
    text-align: left !important;
    font-family: var(--font-heading) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    cursor: pointer !important;
    transition: color var(--transition-fast) !important;
}

.faq-question:hover,
.faq-question:focus-visible {
    color: var(--color-accent) !important;
    outline: none;
}
/* .faq-question:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.4) !important;
} */

/* === NOWY/ZAKTUALIZOWANY BLOK === */
/* Styl dla elementu H3 zawierającego tekst pytania */
.faq-question .faq-question-text {
    flex-grow: 1; /* Pozwala tekstowi zająć dostępną przestrzeń */
    /* flex-shrink: 1; jest wartością domyślną, więc można pominąć */
    padding-right: var(--spacing-md); /* Odstęp od ikony */
    margin: 0; /* Usuwa domyślne marginesy nagłówka h3 */

    /* Kluczowe właściwości dla zawijania tekstu w kontenerze flex: */
    min-width: 0; /* Pozwala elementowi zmniejszyć się poniżej jego naturalnej szerokości zawartości */
    overflow-wrap: break-word; /* Umożliwia łamanie długich słów, które mogłyby przekroczyć kontener */
    word-wrap: break-word; /* Starsza właściwość dla kompatybilności z overflow-wrap */
    white-space: normal; /* Zapewnia normalne zawijanie tekstu (zwykle domyślne dla h3) */

    /* Dziedziczenie stylów z rodzica (.faq-question) dla spójności, jeśli nadpisujesz font itp. w .faq-question */
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    text-align: left; /* Upewnia się, że tekst w h3 jest wyrównany do lewej */
}

/* Jeśli miałeś poniższy blok, usuń go lub zakomentuj, ponieważ selektor jest niepoprawny dla Twojej struktury HTML */
/*
.faq-question span:first-child {
    flex-grow: 1 !important;
    padding-right: var(--spacing-md) !important;
}
*/
/* === KONIEC NOWEGO/ZAKTUALIZOWANEGO BLOKU === */

.faq-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important; /* Kluczowe: ikona nie będzie się kurczyć, zachowując swój rozmiar */
    position: relative !important;
    transition: transform var(--transition-normal) !important;
    /* Możesz dodać mały margines po lewej stronie ikony, aby zapewnić odstęp od zawiniętego tekstu */
    margin-left: var(--spacing-sm, 8px); /* Przykładowa wartość, dostosuj wg potrzeb */
}

.faq-icon::before,
.faq-icon::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 2px !important;
    background-color: currentColor !important;
    transform: translate(-50%, -50%) !important;
    transition: transform 0.3s ease !important;
}

.faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg) !important;
}

.faq-question[aria-expanded="true"] .faq-icon::after {
    transform: translate(-50%, -50%) rotate(0deg) !important;
}
.faq-question[aria-expanded="true"] .faq-icon {
    transform: rotate(0deg) !important;
}

/* --- Sekcja odpowiedzi --- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow) ease-in-out, padding var(--transition-slow) ease-in-out;
    padding: 0 var(--spacing-sm);
}

.faq-answer.faq-answer--open {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-lg);
}

.faq-answer p {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--color-dark) !important;
    margin-bottom: var(--spacing-md) !important;
}
.faq-answer p:last-child {
    margin-bottom: 0 !important;
}
.faq-answer a {
    color: var(--color-accent) !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}
.faq-answer a:hover {
    color: var(--color-secondary) !important;
}

/* Sekcja "Nadal masz pytania?" */
.faq-still-questions {
    margin-top: var(--spacing-xxl) !important;
    padding: var(--spacing-xl) !important;
    background-color: var(--color-light) !important;
    border-radius: var(--radius-lg) !important;
    text-align: center !important;
}

.faq-still-questions .contact-section-title {
    font-size: 1.5rem !important;
    margin-bottom: var(--spacing-md) !important;
}

.faq-still-questions p {
    font-size: 1.1rem !important;
    margin-bottom: 0 !important;
}
.link-styled {
    color: var(--color-accent) !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    transition: color var(--transition-fast) !important;
    display: inline-block;
    margin-top: var(--spacing-sm);
}
.link-styled:hover {
    color: var(--color-secondary) !important;
}

/* Calculator Styles with !important */
.calculator-section { /* Możesz potrzebować ID dla większej specyficzności, np. #panbitcoin-calculator-section */
    padding: var(--spacing-xxl) 0 !important;
    background-color: var(--color-light) !important;
}

.calculator {
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    background-color: var(--color-white) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden !important;
}

.calculator__tabs {
    display: flex !important;
    background-color: var(--color-primary) !important;
}

.calculator__tab {
    flex: 1 !important;
    background: none !important;
    border: none !important;
    color: var(--color-white) !important;
    opacity: 0.7 !important;
    padding: var(--spacing-md) var(--spacing-sm) !important;
    cursor: pointer !important;
    transition: opacity var(--transition-fast), background-color var(--transition-fast), border-bottom-color var(--transition-fast) !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    text-align: center !important;
    border-bottom: 3px solid transparent !important;
}

.calculator__tab:hover {
    opacity: 0.9 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.calculator__tab.calculator__tab--active {
    opacity: 1 !important;
    border-bottom-color: var(--color-secondary) !important;
}

.calculator__content {
    padding: var(--spacing-lg) !important;
    position: relative !important;
}

.loading-indicator {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    display: none !important; /* JS będzie kontrolować to przez style.display */
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: var(--z-above) !important;
}

.spinner {
    width: 40px !important;
    height: 40px !important;
    border: 4px solid rgba(46, 196, 182, 0.2) !important;
    border-radius: 50% !important;
    border-top-color: var(--color-accent) !important;
    animation: spin 1s linear infinite !important;
    margin-bottom: var(--spacing-md) !important;
}

@keyframes spin {
    0% { transform: rotate(0deg) !important; }
    100% { transform: rotate(360deg) !important; }
}

.loading-indicator p {
    font-weight: 500 !important;
    color: var(--color-primary) !important;
}

.calculator__row {
    display: flex !important;
    gap: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.calculator__arrow-container {
    flex-basis: 30px !important;
    text-align: center !important;
    font-size: 1.5rem !important;
    color: var(--color-dark) !important;
    padding-top: 1.7rem !important; /* Adjust if labels are always present or not */
}

.calculator__field {
    flex: 1 !important;
    min-width: 200px !important;
}

.calculator__field label {
    display: block !important;
    margin-bottom: var(--spacing-xs) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    color: var(--color-dark) !important;
}

.input-with-select {
    display: flex !important;
    border: 1px solid #ddd !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.input-with-select:focus-within {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.2) !important;
}

.calculator__input {
    flex-grow: 1 !important;
    padding: var(--spacing-md) !important;
    border: none !important;
    outline: none !important;
    font-size: 1rem !important;
    width: 100% !important;
    min-width: 100px !important;
    background-color: var(--color-white) !important; /* Ensure it's not transparent by default */
    color: var(--color-dark) !important;
}

.select-wrapper {
    position: relative !important;
    flex-shrink: 0 !important;
}

.select-wrapper::after {
    content: '▼' !important;
    font-size: 0.8rem !important;
    color: var(--color-dark) !important;
    position: absolute !important;
    right: var(--spacing-md) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

.calculator__select {
    padding: var(--spacing-md) calc(var(--spacing-lg) + var(--spacing-sm)) var(--spacing-md) var(--spacing-md) !important;
    border: none !important;
    background-color: var(--color-light) !important;
    outline: none !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    height: 100% !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-left: 1px solid #ddd !important;
    color: var(--color-dark) !important;
}

.calculator__networks {
    margin-bottom: var(--spacing-lg) !important;
    margin-top: var(--spacing-sm) !important;
}

.calculator__networks-title {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    margin-bottom: var(--spacing-sm) !important;
    color: var(--color-dark) !important;
}

.network-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--spacing-sm) !important;
}

.network-badge {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: var(--radius-full) !important;
    font-size: 0.875rem !important;
    background-color: var(--color-light) !important;
    border: 1px solid #eee !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
    color: var(--color-dark) !important;
}

.network-badge:hover {
    background-color: #e9ecef !important;
    border-color: #ccc !important;
}

.network-badge.network-badge--active {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
    border-color: var(--color-accent) !important;
}

.calculator__info {
    margin-top: var(--spacing-lg) !important;
    padding-top: var(--spacing-lg) !important;
    border-top: 1px solid #eee !important;
    font-size: 0.9375rem !important;
}

.calculator__rate, .calculator__fee {
    margin-bottom: var(--spacing-sm) !important;
    color: var(--color-dark) !important;
}

.calculator__rate strong, .calculator__fee strong {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}

.calculator__timestamp {
    display: block !important;
    font-size: 0.75rem !important;
    opacity: 0.7 !important;
    margin-top: var(--spacing-xs) !important;
}

.calculator__fee-info {
    font-size: 0.875rem !important;
    color: var(--color-accent) !important;
    text-decoration: underline !important;
    margin-left: var(--spacing-sm) !important;
    cursor: pointer !important;
}

.calculator__fee-info:hover {
    color: var(--color-primary) !important;
}

.calculator__actions {
    margin-top: var(--spacing-lg) !important;
}

.calculator__actions .btn { /* Użyj bardziej ogólnego .btn, jeśli masz globalne style dla przycisków */
    display: block !important;
    width: 100% !important;
    padding: var(--spacing-md) !important;
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background-color var(--transition-fast) !important;
}
.calculator__actions .btn:hover {
    background-color: #25a99d !important; /* Ciemniejszy akcent */
}

.calculator__disclaimer {
    font-size: 0.75rem !important;
    opacity: 0.6 !important;
    text-align: center !important;
    margin-top: var(--spacing-md) !important;
}

/* --- Custom Scrollbar dla Pan Bitcoin (Ciemny Motyw) --- */

/* WebKit */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #181D27; border-radius: 5px; } /* Ciemna ścieżka */
::-webkit-scrollbar-thumb { background-color: #00C7C7; border-radius: 5px; border: 2px solid #181D27; }
::-webkit-scrollbar-thumb:hover { background-color: #00A1A1; }
::-webkit-scrollbar-thumb:active { background-color: #008A8A; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: #11151e; }

/* Firefox */
html, body {
    scrollbar-width: thin;
    scrollbar-color: #2EC4B6 #181D27; /* Kciuk turkus, Ścieżka ciemna */
}