/* Dodatkowe style dla wybranego pakietu */
.package-card.ring-2 {
    box-shadow: 0 0 0 2px rgb(236 72 153);
}

.wifi-icon {
    width: 63px;
    height: auto;
    vertical-align: middle;
}

/* Animacja dla markera wybranego pakietu */
.package-selected-marker {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Pozycjonowanie markera wyboru */
.package-card {
    position: relative;
}

/* Style dla przycisków */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Nowy styl dla białego przycisku "Zamów teraz" */
.btn-order-now {
    background: white;
    color: #1e40af;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;
    border: 2px solid #1e40af;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-order-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background: #f8fafc;
}

.btn-order-now:active {
    transform: translateY(0);
}

.btn-order-now svg {
    color: #1e40af;
}

/* Style dla kart produktowych */
.package-card {
    transition: all 0.3s ease;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.92);
    overflow: visible;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Safari fix dla grid wewnątrz flex */
.package-card > div {
    flex: 1;
    display: grid;
}

/* Safari fix dla grid-rows */
@supports (-webkit-appearance: none) {
    .package-card .grid-rows-\[auto_auto_auto_auto_1fr_auto\] {
        display: flex;
        flex-direction: column;
    }
    
    .package-card .grid-rows-\[auto_auto_auto_auto_1fr_auto\] > *:nth-child(5) {
        flex: 1;
    }
}

/* Upewnij się że marker wyboru jest ukryty */
.package-selected-marker.hidden {
    display: none !important;
}

.package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.package-card.selected {
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

/* Style dla wyboru okresu umowy */
.contract-period-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.contract-period-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.contract-period-card.selected {
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.contract-period-card .checkmark {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: white;
    transition: all 0.3s ease;
}

.contract-period-card.selected .checkmark {
    background: #3b82f6;
    border-color: #3b82f6;
}

.contract-period-card.selected .checkmark::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Style dla wyboru routera */
.router-option-card {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    position: relative;
    margin-bottom: 12px;
}

/* Mobile responsiveness dla router section */
@media (max-width: 768px) {
    .router-option-card {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    .router-option-card .flex {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .router-option-card img {
        margin-bottom: 8px;
    }
    
    .router-option-card .text-right {
        text-align: left;
        margin-top: 12px;
        width: 100%;
        border-top: 1px solid #e5e7eb;
        padding-top: 12px;
    }
    
    #routerSelectionSection,
    #meshSection,
    #publicIpSection {
        padding: 16px;
    }
    
    /* Poprawka dla router option layout na mobile */
    .router-option {
        padding: 12px;
    }
    
    .router-option .flex-1 {
        width: 100%;
    }
    
    .router-option .text-lg {
        font-size: 1.125rem;
    }
}

.router-option-card:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.router-option-card.selected {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.router-option-card .checkmark {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: white;
    transition: all 0.3s ease;
}

.router-option-card.selected .checkmark {
    background: #3b82f6;
    border-color: #3b82f6;
}

.router-option-card.selected .checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Style dla opcji planu komórkowego - identyczne z router-option */
.mobile-option {
    margin-bottom: 12px;
    transition: all 0.3s ease;
    background: white;
    position: relative;
}

.mobile-option:hover {
    border-color: #3b82f6 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.mobile-option.selected {
    border-color: #3b82f6 !important;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dodanie checkmark dla opcji mobilnych - podobnie jak w router-option-card */
.mobile-option .checkmark {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: white;
    transition: all 0.3s ease;
    opacity: 0;
}

.mobile-option.selected .checkmark {
    background: #3b82f6;
    border-color: #3b82f6;
    opacity: 1;
}

.mobile-option.selected .checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Mobile responsiveness dla mobile option layout */
@media (max-width: 768px) {
    .mobile-option {
        padding: 12px;
        margin-bottom: 10px;
    }
    
    .mobile-option .flex-1 {
        width: 100%;
    }
    
    .mobile-option .text-lg {
        font-size: 1.125rem;
    }
}

/* Tooltip styles - poprawione pozycjonowanie i obsługa mobile */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 280px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 12px;
    position: absolute;
    z-index: 99999;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 13px;
    line-height: 1.5;
    pointer-events: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    white-space: normal;
    word-wrap: break-word;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Mobile-friendly tooltip activation */
.tooltip.active .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Dla urządzeń dotykowych - pokazuj tooltipa przy kliknięciu */
@media (hover: none) and (pointer: coarse) {
    .tooltip:focus .tooltiptext,
    .tooltip:active .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
}

/* Tooltip na dole (gdy nie ma miejsca u góry) */
.tooltip .tooltiptext.tooltip-bottom {
    bottom: auto;
    top: 125%;
}

.tooltip .tooltiptext.tooltip-bottom::after {
    bottom: 100%;
    top: auto;
    border-color: transparent transparent #333 transparent;
}

/* Nakładka dla tooltipów na mobile */
@media (max-width: 768px) {
    .tooltip.active .tooltiptext {
        position: fixed;
        z-index: 100000;
        background-color: rgba(51, 51, 51, 0.98);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    }
    
    /* Dodaj pseudo-element jako tło */
    .tooltip.active::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99998;
    }
}

/* Przycisk zamknięcia tooltipa */
.tooltip-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
    z-index: 1;
}

.tooltip-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.tooltip-close:active {
    transform: scale(0.95);
}

/* Ukryj przycisk zamknięcia na desktop */
@media (min-width: 769px) {
    .tooltip-close {
        display: none;
    }
}

/* Dodatkowe style dla lepszego pozycjonowania */
.package-wrapper {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.package-wrapper:hover {
    z-index: 10;
}

/* Kontener dla siatki pakietów */
.package-grid {
    position: relative;
    overflow: visible;
    padding: 0 10px;
}

.tooltip {
    position: relative;
    z-index: inherit;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    z-index: 99999;
}

/* Responsywne pozycjonowanie tooltipów */
@media (min-width: 1025px) {
    /* Desktop - 4 kolumny */
    .package-wrapper:nth-child(1) .tooltip .tooltiptext,
    .package-wrapper:nth-child(2) .tooltip .tooltiptext {
        left: 0;
        transform: translateX(0);
    }
    
    .package-wrapper:nth-child(1) .tooltip .tooltiptext::after,
    .package-wrapper:nth-child(2) .tooltip .tooltiptext::after {
        left: 20px;
        margin-left: 0;
    }
    
    .package-wrapper:nth-child(3) .tooltip .tooltiptext,
    .package-wrapper:nth-child(4) .tooltip .tooltiptext {
        left: auto;
        right: 0;
        transform: translateX(0);
    }
    
    .package-wrapper:nth-child(3) .tooltip .tooltiptext::after,
    .package-wrapper:nth-child(4) .tooltip .tooltiptext::after {
        left: auto;
        right: 20px;
        margin-left: 0;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablet - 2 kolumny */
    .package-wrapper:nth-child(odd) .tooltip .tooltiptext {
        left: 0;
        transform: translateX(0);
    }
    
    .package-wrapper:nth-child(odd) .tooltip .tooltiptext::after {
        left: 20px;
        margin-left: 0;
    }
    
    .package-wrapper:nth-child(even) .tooltip .tooltiptext {
        left: auto;
        right: 0;
        transform: translateX(0);
    }
    
    .package-wrapper:nth-child(even) .tooltip .tooltiptext::after {
        left: auto;
        right: 20px;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    /* Mobile - 1 kolumna */
    .tooltip .tooltiptext {
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 40px);
        max-width: 320px;
        min-width: 250px;
    }
    
    .tooltip .tooltiptext::after {
        left: 50%;
        margin-left: -5px;
    }
    
    /* Jeśli tooltip jest za blisko krawędzi */
    .tooltip:first-child .tooltiptext,
    .tooltip:nth-child(2) .tooltiptext {
        left: 10px;
        transform: translateX(0);
    }
    
    .tooltip:first-child .tooltiptext::after,
    .tooltip:nth-child(2) .tooltiptext::after {
        left: 30px;
        margin-left: 0;
    }
    
    /* Dodatkowa przestrzeń dla tooltipów na mobile */
    .package-wrapper {
        margin-bottom: 20px;
    }
    
    /* Poprawki dla tooltipów na mobile */
    .tooltip .tooltiptext {
        font-size: 14px;
        padding: 16px;
        line-height: 1.6;
    }
    
    /* Lepsze wyświetlanie tooltipów z obrazkami na mobile */
    .tooltip .tooltiptext img {
        max-width: 100%;
        height: auto;
        margin: 4px;
    }
    
    .tooltip .tooltiptext .grid {
        gap: 8px;
        margin-top: 12px;
    }
    
    /* Lepsza widoczność ikony info na mobile */
    .tooltip svg {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
    }
    
    /* Wizualne wskazanie że element jest klikalny */
    .tooltip {
        padding: 4px;
        margin: -4px;
        border-radius: 50%;
        transition: background-color 0.2s;
    }
    
    .tooltip:active {
        background-color: rgba(0, 0, 0, 0.05);
    }
}

/* Responsywność */
@media (max-width: 768px) {
    .contract-period-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .package-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    
    /* Wyśrodkowanie zawartości pakietów na mobile */
    .package-card .pt-4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .package-card .pt-4 > p {
        width: 100%;
    }
    
    .package-card .pt-4 ul {
        width: auto;
        display: inline-block;
        text-align: left;
    }
    
    .package-card .pt-4 ul li {
        justify-content: flex-start;
    }
    
    /* Wyśrodkowanie kart wyboru czasu umowy na mobile */
    .contract-period-card {
        text-align: center;
    }
    
    .contract-period-card .flex {
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .package-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: 800px;
        margin: 0 auto;
    }
    
    /* Wyśrodkowanie zawartości pakietów na tabletach */
    .package-card .pt-4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .package-card .pt-4 > p {
        width: 100%;
    }
    
    .package-card .pt-4 ul {
        width: auto;
        display: inline-block;
        text-align: left;
    }
    
    .package-card .pt-4 ul li {
        justify-content: flex-start;
    }
    
    /* Wyśrodkowanie kart wyboru czasu umowy na tabletach */
    .contract-period-card {
        text-align: center;
    }
    
    .contract-period-card .flex {
        justify-content: center;
    }
}

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

html {
    scroll-behavior: smooth;
}

/* Remove gaps between sections on xgspon page */
.xgs-hero-section + .xgs-packages-section {
    margin-top: 0 !important;
}

/* Ensure sections connect seamlessly */
section, div[class*="section"] {
    margin-bottom: 0;
}

/* Specific fix for XGS-PON sections */
#oferta {
    margin-top: 0 !important;
}

/* Padding dla nagłówka "Wybierz pakiet dla siebie" tylko na stronach z promo banerem */
body.promo-banner-active #oferta .text-center.mb-12 h2 {
    padding-top: 45px;
}

/* Style dla nowej nawigacji */
.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.group:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-dropdown-content.show {
    max-height: 200px;
}

.mobile-dropdown-button svg {
    transition: transform 0.3s ease;
}

.mobile-dropdown-button.active svg {
    transform: rotate(180deg);
}

/* Custom Select Dropdown Styles - Enhanced specificity */
#addressForm .custom-select-container {
    position: relative !important;
    width: 100% !important;
}

#addressForm .custom-select {
    position: relative !important;
    width: 100% !important;
}

#addressForm .custom-select-trigger {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 8px !important;
    background: white !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    font-size: 16px !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

#addressForm .custom-select-trigger:hover {
    border-color: #3b82f6 !important;
}

#addressForm .custom-select-trigger.active {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
    border-radius: 8px 8px 0 0 !important;
    outline: none !important;
}

#addressForm .custom-select-arrow {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.3s ease !important;
    color: #6b7280 !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
}

#addressForm .custom-select-trigger.active .custom-select-arrow {
    transform: rotate(180deg) !important;
}

#addressForm .custom-select-options {
    position: absolute !important;
    top: calc(100% - 2px) !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border: 2px solid #3b82f6 !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

#addressForm .custom-select.active .custom-select-options {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

#addressForm .custom-select-option {
    padding: 12px 16px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    font-size: 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    color: #374151 !important;
}

#addressForm .custom-select-option:last-child {
    border-bottom: none !important;
}

#addressForm .custom-select-option:hover {
    background-color: #f8fafc !important;
}

#addressForm .custom-select-option.selected,
#addressForm .custom-select-option:active {
    background-color: #3b82f6 !important;
    color: white !important;
}

#addressForm .selected-text {
    color: #374151 !important;
    flex-grow: 1 !important;
}

#addressForm .custom-select-trigger.placeholder .selected-text {
    color: #9ca3af !important;
}

/* Specjalne style dla tooltipów na niebieskim tle (pakiet studencki) */
.bg-blue-600 .tooltip svg,
.bg-blue-700 .tooltip svg,
.bg-blue-800 .tooltip svg,
.bg-gradient-to-r .tooltip svg {
    color: rgba(255, 255, 255, 0.8);
}

.bg-blue-600 .tooltip:hover svg,
.bg-blue-700 .tooltip:hover svg,
.bg-blue-800 .tooltip:hover svg,
.bg-gradient-to-r .tooltip:hover svg {
    color: rgba(255, 255, 255, 1);
}

/* Zapewnienie, że tooltip w sekcji studenckiej nie jest obcinany */
.bg-blue-600 .tooltip .tooltiptext,
.bg-blue-700 .tooltip .tooltiptext,
.bg-blue-800 .tooltip .tooltiptext,
.bg-gradient-to-r .tooltip .tooltiptext {
    z-index: 99999;
}

/* Kontener sekcji studenckiej nie może obcinać tooltipów */
.bg-blue-600,
.bg-blue-700,
.bg-blue-800,
.bg-gradient-to-r {
    overflow: visible;
}

/* Na mobile tooltip w sekcji studenckiej może potrzebować lepszego pozycjonowania */
@media (max-width: 768px) {
    .bg-blue-600 .tooltip .tooltiptext,
    .bg-blue-700 .tooltip .tooltiptext,
    .bg-blue-800 .tooltip .tooltiptext,
    .bg-gradient-to-r .tooltip .tooltiptext {
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw - 40px);
        max-width: 320px;
    }

    .bg-blue-600 .tooltip .tooltiptext::after,
    .bg-blue-700 .tooltip .tooltiptext::after,
    .bg-blue-800 .tooltip .tooltiptext::after,
    .bg-gradient-to-r .tooltip .tooltiptext::after {
        left: 50%;
        margin-left: -5px;
    }
}

/* Specjalne style dla przycisków TikTok - lepsze rozpoznawanie przez Events Manager */
.tiktok-button {
    position: relative !important;
    display: inline-block !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.tiktok-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
}

/* Specjalne markery dla różnych typów przycisków TikTok */
.tiktok-package-button {
    --tiktok-button-type: "package-select";
}

.tiktok-checkout-button {
    --tiktok-button-type: "checkout";
    --tiktok-step: "address-verification";
}

.tiktok-purchase-button {
    --tiktok-button-type: "purchase";
    --tiktok-step: "form-submission";
}

.tiktok-order-button {
    --tiktok-button-type: "order";
}

/* Dodatkowe atrybuty dla lepszego rozpoznawania */
.tiktok-button[data-tiktok-event] {
    outline: none !important;
}

.tiktok-button[data-tiktok-event]:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
}

/* Zapewnienie, że przyciski są zawsze widoczne dla Events Manager */
.tiktok-button {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
}

/* Specjalne poprawki dla strony studenckiej - responsywność */

/* Przycisk "Zobacz warunki" - zwiększony padding na mobile i tablet */
@media (max-width: 1024px) {
    .student-cta-button {
        margin-top: 2rem !important; /* Zwiększ odstęp od obrazka */
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* Wyśrodkowanie akapitu "warunki oferty studenckiej" na tablecie */
@media (min-width: 769px) and (max-width: 1024px) {
    .student-terms-section {
        text-align: center !important;
    }

    .student-terms-section p,
    .student-terms-section ul {
        text-align: center !important;
    }
}

/* Padding przed ikonką tooltip na mobile i tablet */
@media (max-width: 1024px) {
    .text-blue-100 .tooltip {
        margin-left: 0.75rem !important; /* Zwiększ odstęp od słowa "miesiąc" */
    }

    .tooltip.ml-2 {
        margin-left: 0.75rem !important;
    }
}

/* Zmniejszenie odstępu między ceną "49" a akapitem powyżej na mobile i tablet */
@media (max-width: 1024px) {
    .student-price-number {
        margin-bottom: 0.5rem !important; /* Zmniejsz odstęp pod ceną */
        margin-top: -0.5rem !important; /* Zmniejsz odstęp nad ceną */
    }

    /* Zmniejsz padding w kontenerze ceny */
    .student-price-container .text-center .mb-6 {
        margin-bottom: 1rem !important;
    }

    /* Kompaktowy layout na mobile */
    .student-price-section {
        padding: 1.5rem !important;
    }
}

/* Dodatkowe poprawki dla mobile */
@media (max-width: 768px) {
    /* Jeszcze bardziej kompaktowy layout */
    .student-price-section {
        padding: 1rem !important;
    }

    /* Zmniejsz font size ceny na bardzo małych ekranach */
    .student-price-number {
        font-size: 3.5rem !important;
        line-height: 1 !important;
        margin-bottom: 0.25rem !important;
        margin-top: -0.5rem !important;
    }

    /* Przycisk "Zobacz warunki" - jeszcze większy padding */
    .student-cta-button {
        margin-top: 2.5rem !important;
        margin-bottom: 1rem !important;
    }

    /* Kompaktowy kontener ceny */
    .student-price-container {
        margin-bottom: 0.75rem !important;
    }

    /* Tooltip z większym paddingiem */
    .student-tooltip {
        margin-left: 1rem !important;
    }
}

/* Specjalne style dla sekcji warunków studenckiej */
@media (min-width: 769px) and (max-width: 1024px) {
    .student-terms-section {
        text-align: center !important;
    }

    .student-terms-title,
    .student-terms-list {
        text-align: center !important;
    }

    .student-terms-list li {
        list-style: none;
        text-align: center;
    }
}

/* Tablet - poprawki dla ceny i tooltipa */
@media (min-width: 769px) and (max-width: 1024px) {
    .student-price-section {
        padding: 1.5rem !important;
    }

    .student-price-number {
        margin-bottom: 0.5rem !important;
        margin-top: -0.25rem !important;
    }

    .student-price-container {
        margin-bottom: 1rem !important;
    }

    .student-tooltip {
        margin-left: 0.75rem !important;
    }
}

/* Poprawki sekcji "sprawdź dostępność" na tablecie */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Sekcja sprawdzania dostępności - zmniejsz szerokość na tablecie */
    #sprawdz .max-w-7xl {
        max-width: 90% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #sprawdz .max-w-3xl {
        max-width: 85% !important;
    }

    #sprawdz .max-w-lg {
        max-width: 80% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Formularz sprawdzania adresu - kompaktowy na tablecie */
    #sprawdz form .space-y-6 {
        padding: 1rem !important;
    }

    #sprawdz .p-8 {
        padding: 1.5rem !important;
    }

    /* Przyciski w formularzu - mniejsze na tablecie */
    #sprawdz button {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
        margin: 1rem auto 0 auto !important;
        display: block !important;
        text-align: center !important;
    }
}

/* Uniwersalne wyśrodkowanie przycisków pakietów - WSZYSTKIE URZĄDZENIA */
.package-card .mt-4,
.package-card div.mt-4,
div.package-card .mt-4 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.package-card .btn-primary,
.package-card .select-package-btn,
.package-card button.btn-primary,
.package-card button.select-package-btn {
    margin: 0 auto !important;
    text-align: center !important;
    justify-self: center !important;
    width: auto !important;
    max-width: 280px !important;
    min-width: 200px !important;
}

/* Dodatkowe selektory dla różnych struktur */
.packages-grid .package-card .mt-4,
.package-grid .package-card .mt-4,
.tv-packages .package-card .mt-4 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Poprawki responsywności dla stron internetowych - TABLET */
@media (min-width: 768px) and (max-width: 1024px) {

    /* INTERNET.PHP - wyśrodkowanie przycisków "Wybierz pakiet" */
    .package-card .btn-primary,
    .package-card .select-package-btn {
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
        max-width: 250px !important;
    }

    /* INTERNET.PHP - sekcja wyboru czasu umowy w jednym wierszu na tablecie */
    .contract-period-grid {
        max-width: 900px !important; /* Szerokość dla 3 kart w jednym wierszu */
        margin: 0 auto !important;
        grid-template-columns: repeat(3, 1fr) !important; /* Wymuszenie 3 kolumn na tablecie */
        gap: 1rem !important; /* Zmniejszenie odstępu między kartami */
    }

    .contract-period-card {
        max-width: 280px !important;
        margin: 0 auto !important;
        padding: 1rem !important; /* Zmniejszenie paddingu */
    }

    /* Poprawki tekstu w kartach wyboru czasu umowy na tablecie */
    .contract-period-card h4 {
        font-size: 1rem !important; /* Zmniejszenie rozmiaru nagłówka */
        line-height: 1.2 !important;
        margin-bottom: 0.25rem !important;
    }

    .contract-period-card p {
        font-size: 0.75rem !important; /* Zmniejszenie rozmiaru tekstu */
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
    }

    .contract-period-card .flex {
        margin-bottom: 0.5rem !important;
    }

    .contract-period-card .flex:last-child {
        margin-bottom: 0 !important;
    }

    .contract-period-card .flex span {
        font-size: 0.75rem !important; /* Zmniejszenie rozmiaru tekstu w listach */
        line-height: 1.1 !important;
    }

    .contract-period-card svg {
        width: 1rem !important; /* Zmniejszenie ikon */
        height: 1rem !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0 !important;
    }

    /* Poprawka pozycjonowania checkboxa na tablecie */
    .contract-period-card .checkmark {
        top: 8px !important; /* Przesunięcie wyżej */
        right: 8px !important; /* Przesunięcie bliżej krawędzi */
        width: 18px !important; /* Zmniejszenie rozmiaru */
        height: 18px !important;
        z-index: 10 !important; /* Zapewnienie widoczności */
    }

    .contract-period-card.selected .checkmark::after {
        font-size: 10px !important; /* Zmniejszenie checkmarki */
    }

    /* Łamanie linii dla tekstów "miesiące" i "miesięcy" na tablecie */
    .tablet-break {
        display: inline !important;
    }
}

/* Ukryj łamanie linii na innych urządzeniach */
.tablet-break {
    display: none !important;
}

/* Pokaż łamanie linii tylko na tablecie 768x1024 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .tablet-break {
        display: inline !important;
    }

    /* TELEWIZJA.PHP - wyśrodkowanie przycisków "Wybierz pakiet" */
    .tv-package-card .btn-primary,
    .tv-package-card .select-package-btn,
    .package-card[data-package-id*="tv"] .btn-primary,
    .package-card[data-package-id*="probox"] .btn-primary {
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
        max-width: 250px !important;
    }

    /* 250MBPS.PHP - wyśrodkowanie przycisków "Wybierz pakiet" */
    .package-card[data-package-id*="250"] .btn-primary,
    .package-card[data-package-id*="250"] .select-package-btn {
        margin: 0 auto !important;
        display: block !important;
        text-align: center !important;
        max-width: 250px !important;
    }

    /* Ogólne wyśrodkowanie dla wszystkich przycisków pakietów na tablecie */
    .package-grid .package-card .mt-4,
    .package-grid .package-card .mt-6 {
        display: flex !important;
        justify-content: center !important;
    }

    .package-grid .package-card button,
    .packages-grid .package-card button,
    .tv-packages-grid .package-card button {
        width: auto !important;
        min-width: 200px !important;
        max-width: 250px !important;
        margin: 0 auto !important;
    }

    /* Specyficzne style dla różnych typów pakietów */
    .package-card .select-package-btn,
    .package-card .btn-primary {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        max-width: 250px !important;
    }

    /* Kontener przycisków - wyśrodkowanie */
    .package-card .mt-4 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* Dodatkowe style dla wyśrodkowania przycisków na wszystkich urządzeniach */
@media (min-width: 1025px) {
    /* Desktop - również wyśrodkuj przyciski */
    .package-card .mt-4 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .package-card .btn-primary,
    .package-card .select-package-btn {
        margin: 0 auto !important;
        text-align: center !important;
        max-width: 280px !important;
    }
}

/* Mobile - kompaktowe przyciski */
@media (max-width: 768px) {
    .package-card .mt-4 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .package-card .btn-primary,
    .package-card .select-package-btn {
        margin: 0 auto !important;
        text-align: center !important;
        max-width: 220px !important;
        font-size: 0.9rem !important;
        padding: 0.75rem 1.5rem !important;
        width: auto !important; /* Override w-full */
    }
    
    /* Wyrównanie boxów z ofertami na stronie głównej */
    .grid.grid-cols-1 > a {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .grid.grid-cols-1 > a > div {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Zapewnienie równej wysokości boxów */
    .grid.grid-cols-1 > a {
        display: flex !important;
    }
    
    .grid.grid-cols-1 > a > div {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* BARDZO AGRESYWNE STYLE - Override Tailwind w-full */
.package-card .mt-4 button.w-full,
.package-card div.mt-4 button.w-full,
div.package-card .mt-4 button.w-full {
    width: auto !important;
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Wymuszenie flexbox na kontenerach */
.package-card .mt-4,
.package-card div.mt-4,
div.package-card .mt-4,
.packages-grid .package-card .mt-4,
.package-grid .package-card .mt-4,
.tv-packages .package-card .mt-4 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
}

/* Specjalne style dla różnych ID pakietów */
.package-card[data-package-id] .mt-4 button,
.package-card[data-package-id*="250"] .mt-4 button,
.package-card[data-package-id*="300"] .mt-4 button,
.package-card[data-package-id*="600"] .mt-4 button,
.package-card[data-package-id*="900"] .mt-4 button,
.package-card[data-package-id*="tv"] .mt-4 button {
    width: auto !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Poprawki dla XGSPON.PHP */

/* TABLET - Przyciski hero bez łamania tekstu */
@media (min-width: 768px) and (max-width: 1024px) {
    /* XGS-PON Hero - szersze przyciski na tablecie */
    .xgs-hero-buttons a {
        white-space: nowrap !important;
        min-width: 200px !important;
        padding: 1rem 2rem !important;
        font-size: 0.95rem !important;
    }

    /* Alternatywny selektor dla przycisków hero */
    div[class*="flex-col"] a[href="#oferta"],
    div[class*="flex-col"] a[href="#sprawdz"] {
        white-space: nowrap !important;
        min-width: 200px !important;
        padding: 1rem 2rem !important;
        font-size: 0.95rem !important;
    }

    /* XGS-PON - zwężenie sekcji wyboru czasu umowy */
    .contract-period-selection .contract-period-grid {
        max-width: 600px !important; /* Równa szerokości pakietów */
        margin: 0 auto !important;
    }
}

/* MOBILE - Pozycjonowanie obrazka hero */
@media (max-width: 768px) {
    /* XGS-PON Hero - lepsze pozycjonowanie obrazka na mobile */
    .xgs-hero-image img {
        object-position: 25% center !important; /* Pokazuj postać, nie ucina */
        object-fit: cover !important;
    }

    /* Kompaktowe przyciski na mobile */
    .xgs-hero-buttons a {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Zmniejsz padding hero na mobile */
    .xgs-hero-content {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* Bardzo małe ekrany - jeszcze lepsze pozycjonowanie */
@media (max-width: 480px) {
    .xgs-hero-image img {
        object-position: 20% center !important; /* Jeszcze bardziej w lewo */
    }

    .xgs-hero-buttons a {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.85rem !important;
    }

    /* Kompaktowy layout na bardzo małych ekranach */
    .xgs-hero-content {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* Poprawki nawigacji dla tabletu */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Nawigacja na tablecie - używa hamburger menu */
    nav .lg\\:hidden {
        display: block !important; /* Pokaż hamburger button */
    }

    nav .hidden.lg\\:flex {
        display: none !important; /* Ukryj desktop menu */
    }

    /* Wymuszenie widoczności hamburger button na tablecie */
    #mobile-menu-button {
        display: block !important;
        visibility: visible !important;
    }

    /* Logo na tablecie - mniejsze */
    nav img {
        width: 12rem !important; /* 192px - w-48 */
        max-width: 12rem !important;
    }

    /* Padding logo na tablecie */
    nav .p-2 {
        padding: 0.5rem !important;
    }

    /* Mobile menu na tablecie - lepsze pozycjonowanie */
    #mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 50;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    /* Dropdown w mobile menu na tablecie */
    .mobile-dropdown-content {
        display: none;
        padding-left: 1rem;
    }

    .mobile-dropdown-content.show {
        display: block;
    }
}

/* Poprawki ikonek w sekcji "Szukasz innej oferty" na tablecie i mobile */
@media (max-width: 1024px) {
    /* Powiększ ikonki SVG w ultra-speed-section */
    .ultra-speed-section svg.w-16,
    [class*="ultra-speed"] svg.w-16 {
        width: 5rem !important; /* 80px zamiast 64px */
        height: 5rem !important;
    }

    /* Poprawki wcięć w pricing boxach */

    /* Desktop - większe wcięcie dla lepszej czytelności */
    @media (min-width: 1441px) {
        .package-card .pt-4.border-t p.text-sm.font-semibold {
            padding-left: 1rem !important;
        }

        .package-card .pt-4.border-t ul.text-sm.space-y-2 {
            padding-left: 1.25rem !important;
        }
    }

    /* Tablet - wszystkie nagłówki na tym samym poziomie, bliżej lewej */
    @media (min-width: 769px) and (max-width: 1440px) {
        .package-card .pt-4.border-t {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
        }

        .package-card .pt-4.border-t p.text-sm.font-semibold {
            padding-left: 0.25rem !important;
            margin-left: 0 !important;
        }

        .package-card .pt-4.border-t ul.text-sm.space-y-2 {
            padding-left: 0 !important;
            margin-left: 0 !important;
        }
    }

    /* Telefon - wszystkie nagłówki na tym samym poziomie, bliżej lewej */
    @media (max-width: 768px) {
        .package-card .pt-4.border-t {
            padding-left: 0 !important;
            padding-right: 0 !important;
            margin-left: 0 !important;
        }

        .package-card .pt-4.border-t p.text-sm.font-semibold {
            padding-left: 0.25rem !important;
            margin-left: 0 !important;
        }

        .package-card .pt-4.border-t ul.text-sm.space-y-2 {
            padding-left: 0.15rem !important;
            margin-left: 0 !important;
        }
    }
}

@media (max-width: 768px) {
    /* Jeszcze większe ikonki na mobile */
    .ultra-speed-section svg.w-16,
    [class*="ultra-speed"] svg.w-16 {
        width: 6rem !important; /* 96px na mobile */
        height: 6rem !important;
    }

    /* Na dużych ekranach (powyżej 1440px) - wszystkie 3 cechy w jednym wierszu */
    @media (min-width: 1441px) {
        .benefit-third {
            display: flex !important;
        }

        .benefit-second-row {
            display: none !important;
        }
    }

    /* Na ekranach 1440px i mniejszych - 2 cechy w pierwszym wierszu, 1 w drugim */
    @media (max-width: 1440px) {
        .benefit-third {
            display: none !important;
        }

        .benefit-second-row {
            display: flex !important;
        }
    }

    /* Zwiększ marginesy w sekcji hero na tablecie */
    @media (min-width: 769px) and (max-width: 1024px) {
        .fiber-mobile-hero .relative.max-w-7xl {
            padding-left: 2rem !important;
            padding-right: 2rem !important;
        }
    }

    /* Zwiększ wysokość sekcji hero na telefonie i przenieś teksty do góry */
    @media (max-width: 768px) {
        .fiber-mobile-hero {
            min-height: 100vh !important;
        }

        .fiber-mobile-hero .relative.max-w-7xl {
            min-height: 100vh !important;
            display: flex !important;
            align-items: flex-start !important;
            padding-top: 3rem !important;
            padding-left: 1.5rem !important;
            padding-right: 1.5rem !important;
        }
    }

    /* Obniż obrazek tła w hero na mobile - bardziej agresywnie */
    .fiber-mobile-hero img.block.sm\\:hidden,
    img[src*="mvno_hero1_sm_mobile.jpg"] {
        object-position: center 80% !important;
        transform: translateY(100px) !important;
        height: calc(100% + 150px) !important;
        top: 50px !important;
        position: relative !important;
    }
}

/* Poprawki nawigacji dla mobile */
@media (max-width: 768px) {
    /* Logo na mobile - jeszcze mniejsze */
    nav img {
        width: 10rem !important; /* 160px - w-40 */
        max-width: 10rem !important;
    }

    /* Hamburger button na mobile */
    #mobile-menu-button {
        padding: 0.5rem;
        display: block !important;
        visibility: visible !important;
    }

    /* Mobile menu na telefonie */
    #mobile-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 50;
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
    }

    /* Sekcja sprawdzania dostępności - jeszcze bardziej kompaktowa na mobile */
    #sprawdz .max-w-7xl {
        max-width: 95% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    #sprawdz .max-w-3xl {
        max-width: 90% !important;
    }

    #sprawdz .max-w-lg {
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #sprawdz .p-8 {
        padding: 1rem !important;
    }

    #sprawdz button {
        padding: 0.75rem 1rem !important;
        font-size: 0.85rem !important;
        width: 100% !important;
        margin: 1rem auto 0 auto !important;
        display: block !important;
        text-align: center !important;
    }
}

/* Dodatkowe poprawki dla bardzo małych ekranów */
@media (max-width: 480px) {
    .student-cta-button {
        margin-top: 3rem !important;
        margin-bottom: 1.5rem !important;
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
    }

    .student-price-number {
        font-size: 3rem !important;
    }

    .student-tooltip {
        margin-left: 1.25rem !important;
    }

    /* Zmniejsz padding w sekcji ceny na bardzo małych ekranach */
    .student-price-section {
        padding: 0.75rem !important;
    }
}

/* Poprawki dla średnich tabletów */
@media (min-width: 481px) and (max-width: 768px) {
    .student-cta-button {
        margin-top: 2.25rem !important;
        margin-bottom: 1.25rem !important;
    }

    .student-price-number {
        font-size: 4rem !important;
        margin-bottom: 0.375rem !important;
    }
}

/* Language switcher fixes dla mobile menu - WAŻNE! */
@media (max-width: 1023px) {
    /* Zapewnij że language dropdown nie jest przycinany */
    #mobile-menu {
        overflow-x: visible !important; /* Pozwól na overflow dla language dropdown */
    }

    #mobile-menu > div {
        overflow: visible !important;
    }

    /* Language switcher w mobile menu */
    #mobile-menu .language-switcher {
        display: inline-block !important;
        width: auto !important;
        max-width: 140px !important;
        position: relative !important;
    }

    #mobile-menu .current-language {
        width: auto !important;
        display: inline-flex !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        color: white !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        cursor: pointer !important;
    }

    #mobile-menu .language-dropdown {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: auto !important;
        width: 140px !important;
        z-index: 99999 !important;
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px) !important;
        transition: all 0.2s ease !important;
    }

    #mobile-menu .language-switcher.active .language-dropdown {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    #mobile-menu .language-option {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 12px 16px !important;
        color: #333 !important;
        text-decoration: none !important;
        transition: background 0.2s ease !important;
    }

    #mobile-menu .language-option:hover {
        background: #f5f5f5 !important;
    }
}

/* Package Grid Layout - responsywny układ pakietów */
.package-grid,
body .package-grid,
html body .package-grid {
    display: grid !important;
    gap: 20px !important;
    padding: 20px !important;
    margin: 0 auto !important;
}

/* Responsywność dla siatki pakietów */
@media (max-width: 768px) {
    .package-grid,
    body .package-grid,
    html body .package-grid {
        grid-template-columns: 1fr !important; /* Na mobile jeden pod drugim */
        grid-auto-rows: auto !important;
        max-width: 400px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .package-grid,
    body .package-grid,
    html body .package-grid {
        grid-template-columns: 1fr 1fr !important; /* Na tablet 2 kolumny */
        grid-auto-rows: auto !important;
        max-width: 800px !important;
    }
}

@media (min-width: 1025px) {
    .package-grid,
    body .package-grid,
    html body .package-grid {
        grid-template-columns: repeat(4, 1fr) !important; /* Na desktop 4 kolumny */
        grid-auto-rows: auto !important;
        max-width: 1200px !important;
    }
}