/*
 * Główny plik stylów dla frontendu.
 * Ten plik jest wynikiem konsolidacji:
 * - address-search-proxy.css
 * - frontend-style.css
 *
 * Zaktualizowano: 2025-07-08 - Wymuszona aktualizacja wersji.
 */

/* WCAG 2.1 - Accessibility Utilities */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* WCAG 2.4.7 - Focus Visible */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* ==========================================================================
   KONFIGURATOR - FORMULARZ STATYCZNY
   ========================================================================== */

/* Podświetlenie formularza po kliknięciu "Zamawiam" */
.ao-order-form.highlighted {
    animation: highlightForm 2s ease-out;
    box-shadow: 0 0 20px rgba(0, 115, 170, 0.3);
}

@keyframes highlightForm {
    0% {
        background-color: rgba(0, 115, 170, 0.1);
        transform: scale(1.02);
    }
    50% {
        background-color: rgba(0, 115, 170, 0.05);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

/* Sekcja formularza kontaktowego w summary step */
.contact-form-section {
    margin-top: 40px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: 0;
}

.contact-form-section h3 {
    margin: 0 0 20px;
    color: var(--ao-configurator-primary, var(--ao-primary-color));
    font-size: 1.25em;
}

.ao-configurator-step.summary-step .contact-form-section {
    max-width: 820px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.ao-configurator-step.summary-step .contact-form-section #ao-order-summary-form {
    margin: 0;
}

@media (max-width: 768px) {
    .contact-form-section {
        margin-top: 24px;
    }

    .ao-configurator-step.summary-step .contact-form-section {
        padding: 0;
        max-width: 100%; /* Remove 820px constraint on mobile */
    }
}

/**
 * Frontend Styles - Konfigurowalne Oferty
 */

:root {
    /* ===== Core Colors ===== */
    --ao-primary-color: #0073aa;
    --ao-secondary-color: #005177;

    /* ===== Layout & Effects ===== */
    --ao-border-radius: 8px;
    --ao-transition: all 0.3s ease;
    --ao-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --ao-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.15);

    /* ===== Bestseller Badge ===== */
    --ao-bestseller-bg-color: #f39c12;
    --ao-bestseller-text-color: #ffffff;
    --ao-bestseller-border-color: #f39c12;
    --ao-bestseller-border-width: 2px;

    /* ===== Configurator Colors ===== */
    --ao-configurator-primary: var(--ao-primary-color, #0073aa);
    --ao-configurator-secondary: var(--ao-secondary-color, #005177);
    --ao-configurator-success: #28a745;
    --ao-configurator-warning: #ffc107;
    --ao-configurator-danger: #dc3545;
    --ao-configurator-light: #f8f9fa;
    --ao-configurator-dark: #343a40;

    /* ===== Summary Tokens ===== */
    --ao-summary-accent-color: var(--ao-primary-color, #0073aa);
    --ao-summary-body-color: #495057;
    --ao-summary-muted-color: #6c757d;
    --ao-summary-divider-color: #dee2e6;
    --ao-summary-box-background: #ffffff;
    --ao-summary-box-border: 1px solid #e9ecef;
    --ao-summary-box-radius: var(--ao-border-radius, 8px);
    --ao-summary-box-shadow: var(--ao-shadow);
    --ao-summary-box-padding: 25px;
    --ao-summary-box-padding-mobile: 16px;
    --ao-summary-item-block-spacing: 18px;
    --ao-summary-heading-size: 20px;
    --ao-summary-heading-size-mobile: 18px;
    --ao-summary-section-title-size: 16px;
    --ao-summary-section-title-size-mobile: 14px;
    --ao-summary-item-size: 15px;
    --ao-summary-item-size-mobile: 14px;
    --ao-summary-item-line-height: 1.45;
    --ao-summary-item-title-size: 18px;
    --ao-summary-item-title-size-mobile: 17px;
    --ao-summary-item-price-size: 20px;
    --ao-summary-item-price-size-mobile: 18px;
    --ao-summary-row-gap: 10px;
    --ao-summary-option-gap: 15px;
    --ao-summary-total-gap: 8px 16px;
    --ao-summary-total-border-width: 2px;
    --ao-summary-total-border-color: var(--ao-summary-divider-color);
    --ao-summary-total-margin-top: 15px;
    --ao-summary-total-padding-top: 15px;
    --ao-summary-total-label-size: 18px;
    --ao-summary-total-label-size-mobile: 16px;
    --ao-summary-total-size: 22px;
    --ao-summary-total-size-mobile: 20px;
    --ao-summary-total-weight: 700;
    --ao-summary-meta-size: 14px;
    --ao-summary-meta-size-mobile: 14px;
    --ao-summary-meta-label-color: var(--ao-text-color, #333);
    --ao-summary-meta-value-color: var(--ao-text-color, #333);
    --ao-summary-meta-row-padding: 8px 0;
    --ao-summary-meta-row-gap: 16px;
    --ao-summary-discount-color: var(--ao-promo-discount-color, #28a745);
    --ao-summary-heading-color: var(--ao-text-color, #2c3e50);
    --ao-summary-total-label-color: var(--ao-text-color, #2c3e50);
    --ao-summary-total-amount-color: var(--ao-order-form-button-bg-color, var(--ao-primary-color, #0073aa));
    --ao-summary-title-font-family: inherit;
    --ao-summary-body-font-family: inherit;
}

/* ==========================================================================
   GRID LAYOUT - HIGH SPECIFICITY WITHOUT !important
   ========================================================================== */

/* Base grid styling (tylko dla grid mode, nie scroll) */
.ao-offers-grid:not(.ao-display-scroll),
.entry-content .ao-offers-grid:not(.ao-display-scroll),
.site-content .ao-offers-grid:not(.ao-display-scroll),
.ao-location-aware-offer-list .ao-offers-grid:not(.ao-display-scroll) {
    display: grid;
    gap: 20px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px; /* Added horizontal padding for margin on sides */
    box-sizing: border-box; /* Ensure padding is included in width */
}

.ao-offers-grid.ao-cols-1:not(.ao-display-scroll) {
    grid-template-columns: 1fr;
    max-width: 800px;
}

.ao-offers-grid.ao-cols-2:not(.ao-display-scroll) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1320px; /* Increased from 1000px - standard content width */
}

.ao-offers-grid.ao-cols-3:not(.ao-display-scroll) {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1600px; /* Increased from 1400px - wide layout */
}

.ao-offers-grid.ao-cols-4:not(.ao-display-scroll) {
    grid-template-columns: repeat(4, 1fr);
    max-width: none; /* Full width for 4 columns - no limit */
}

@media (max-width: 1024px) {
    .ao-offers-grid.ao-cols-4:not(.ao-display-scroll),
    .ao-offers-grid.ao-cols-3:not(.ao-display-scroll) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ao-offers-grid.ao-cols-4:not(.ao-display-scroll),
    .ao-offers-grid.ao-cols-3:not(.ao-display-scroll),
    .ao-offers-grid.ao-cols-2:not(.ao-display-scroll) {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   OFFER CARD
   ========================================================================== */

body .ao-offer-card {
    background: var(--ao-card-bg-color, #fff);
    border: var(--ao-card-border-width, 1px) solid var(--ao-card-border-color, #e1e1e1);
    border-radius: var(--ao-border-radius);
    padding: 30px 25px;
    position: relative;
    transition: var(--ao-transition);
    box-shadow: var(--ao-shadow);
    height: fit-content;
    color: var(--ao-text-color, #2c3e50);
}

.ao-offer-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ao-shadow-hover);
    border-color: var(--ao-primary-color);
}

.ao-offer-card.ao-selected {
    border-color: var(--ao-primary-color);
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.ao-offer-card.ao-bestseller {
    border-color: var(--ao-bestseller-border-color);
    border-width: var(--ao-bestseller-border-width);
    border-style: solid;
    position: relative;
}

/* ==========================================================================
   OFFER BADGE
   ========================================================================== */

body .ao-offer-badge {
    position: absolute;
    top: -10px !important;
    right: 20px !important;
    background: var(--ao-bestseller-bg-color);
    color: var(--ao-bestseller-text-color);
    padding: 5px 15px !important;
    border-radius: 15px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;
    z-index: 10;
}

body .ao-bestseller-badge-custom {
    background: var(--ao-bestseller-bg-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    position: absolute;
    top: -10px;
    right: 20px;
    color: var(--ao-bestseller-text-color);
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    z-index: 10;
    transform: scale(var(--ao-bestseller-badge-scale, 1));
    transform-origin: center;
}

/* ==========================================================================
   OFFER CONTENT
   ========================================================================== */

.ao-offer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

body .ao-offer-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ao-text-color, #2c3e50);
    margin: 0 0 15px 0;
    line-height: 1.3;
    text-align: center;
}



/* ==========================================================================
   OFFER DESCRIPTION
   ========================================================================== */

.ao-offer-description {
    font-size: var(--ao-description-font-size, 14px);
    font-weight: var(--ao-description-font-weight, normal);
    text-transform: var(--ao-description-text-transform, none);
    font-style: var(--ao-description-font-style, normal);
    color: var(--ao-description-text-color, #666666);
    margin-bottom: 25px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 6px;
    border-left: 3px solid var(--ao-primary-color);
    line-height: 1.6;
}

/* ==========================================================================
   ATUTY SPRZEDAŻOWE
   ========================================================================== */

.ao-selling-points {
    margin-bottom: 25px;
}

.ao-selling-points h4 {
    font-size: 16px;
    font-weight: 600;
    color: #34495e;
    margin: 0 0 15px 0;
}

.ao-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ao-point-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.ao-point-icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    margin-top: 2px;
    color: var(--ao-selling-points-icon-color, #0073aa);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: dashicons;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    vertical-align: top;
    text-align: center;
    -webkit-transition: color .1s ease-in;
    transition: color .1s ease-in;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ao-point-icon:before {
    content: attr(data-icon);
}

/* Fallback for when dashicons are not loaded */
.ao-point-icon.dashicons-star-filled:before { content: "\f155"; }
.ao-point-icon.dashicons-yes:before { content: "\f147"; }
.ao-point-icon.dashicons-heart:before { content: "\f487"; }
.ao-point-icon.dashicons-location-alt:before { content: "\f231"; }
.ao-point-icon.dashicons-phone:before { content: "\f525"; }
.ao-point-icon.dashicons-email-alt:before { content: "\f466"; }
.ao-point-icon.dashicons-clock:before { content: "\f469"; }
.ao-point-icon.dashicons-calendar-alt:before { content: "\f508"; }
.ao-point-icon.dashicons-money-alt:before { content: "\f53c"; }
.ao-point-icon.dashicons-chart-line:before { content: "\f238"; }
.ao-point-icon.dashicons-awards:before { content: "\f313"; }
.ao-point-icon.dashicons-shield-alt:before { content: "\f334"; }
.ao-point-icon.dashicons-lock:before { content: "\f160"; }
.ao-point-icon.dashicons-unlock:before { content: "\f145"; }
.ao-point-icon.dashicons-admin-tools:before { content: "\f348"; }
.ao-point-icon.dashicons-admin-settings:before { content: "\f108"; }
.ao-point-icon.dashicons-performance:before { content: "\f311"; }
.ao-point-icon.dashicons-networking:before { content: "\f325"; }
.ao-point-icon.dashicons-cloud:before { content: "\f176"; }
.ao-point-icon.dashicons-desktop:before { content: "\f472"; }
.ao-point-icon.dashicons-smartphone:before { content: "\f470"; }
.ao-point-icon.dashicons-tablet:before { content: "\f471"; }
.ao-point-icon.dashicons-lightning:before { content: "\f326"; }
.ao-point-icon.dashicons-superhero:before { content: "\f308"; }
.ao-point-icon.dashicons-megaphone:before { content: "\f488"; }
.ao-point-icon.dashicons-thumbs-up:before { content: "\f529"; }
.ao-point-icon.dashicons-thumbs-down:before { content: "\f542"; }

.ao-point-text {
    color: #34495e;
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================================
   CONFIGURABLE OPTIONS
   ========================================================================== */

.ao-configurable-options {
    margin-bottom: 30px;
}

.ao-configurable-options h4 {
    font-size: 16px;
    font-weight: 600;
    color: #34495e;
    margin: 0 0 20px 0;
}

.ao-configurable-options,
.ao-option-group,
.ao-group-title,
.ao-option-label,
.ao-configurable-option {
    text-align: left;
}

.ao-option-group {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.ao-group-title {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin: 0 0 12px 0;
}

.ao-configurable-option {
    margin-bottom: 10px;
}

.ao-option-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #495057;
    transition: color 0.2s ease;
}

.ao-option-label:hover {
    color: var(--ao-primary-color);
}

.ao-option-label input[type="checkbox"],
.ao-option-label input[type="radio"] {
    margin-right: 8px;
}

.ao-option-name {
    flex: 1;
}

.ao-option-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    transition: var(--ao-transition);
}

.ao-option-select:focus {
    outline: none;
    border-color: var(--ao-primary-color);
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

/* Below Price Options - Base Styles */
.ao-below-price-options {
    margin-top: 20px;
}

.ao-below-price-group {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.ao-below-price-group-title {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    margin: 0 0 12px 0;
}

.ao-below-price-options-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ao-below-price-option {
    margin-bottom: 10px;
}

.ao-below-price-option:last-child {
    margin-bottom: 0;
}

.ao-below-price-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #495057;
    transition: color 0.2s ease;
    padding: 8px 0;
}

.ao-below-price-label:hover {
    color: var(--ao-primary-color);
}

.ao-below-price-radio {
    margin: 0 8px 0 0;
    cursor: pointer;
}

.ao-below-price-label-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    color: inherit;
}

.ao-price-modifier {
    font-size: 13px;
    font-weight: 600;
    color: var(--ao-primary-color);
    margin-left: 6px;
}

.ao-below-price-radio:checked + .ao-below-price-label-text {
    font-weight: 600;
}

/* Tooltips */
.ao-option-tooltip {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    cursor: help;
}

/* Fixed tooltip container */
.ao-tooltip-fixed-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 999999;
    pointer-events: none;
}

/* Tooltip popup (real DOM element, not pseudo-element) */
.ao-tooltip-popup {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

.ao-tooltip-popup-inner {
    position: relative;
    margin-bottom: 5px;
}

.ao-tooltip-content {
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    max-width: 250px;
    width: max-content;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.ao-tooltip-arrow {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: #333;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

/* Alignment variants */
.ao-tooltip-popup[data-align="left"] {
    transform: translate(0, -100%);
}

.ao-tooltip-popup[data-align="left"] .ao-tooltip-arrow {
    left: 8px;
    transform: translateX(0);
}

.ao-tooltip-popup[data-align="right"] {
    transform: translate(-100%, -100%);
}

.ao-tooltip-popup[data-align="right"] .ao-tooltip-arrow {
    left: auto;
    right: 8px;
    transform: translateX(0);
}

.ao-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--ao-primary-color);
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
}

.ao-option-tooltip::before {
    /* Disabled - using real DOM elements instead */
    content: none;
    display: none;
}

/* OLD: Tooltip positioning styles (now using real DOM elements)
.ao-option-tooltip.tooltip-left::before,
.ao-option-tooltip.tooltip-left::after,
.ao-option-tooltip.tooltip-right::before,
.ao-option-tooltip.tooltip-right::after {
    Disabled
}
*/

.ao-option-tooltip::after {
    /* Disabled - using real DOM elements instead */
    content: none;
    display: none;
}

/* OLD: Hover styles (now using real DOM elements)
.ao-option-tooltip:hover::before,
.ao-option-tooltip:hover::after {
    Disabled
}
*/

/* Dropdown tooltip container */
.ao-dropdown-tooltip-container {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

.ao-dropdown-tooltip {
    display: none;
}

/* Dropdown */
.ao-dropdown {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
    transition: var(--ao-transition);
}

.ao-dropdown:focus {
    outline: none;
    border-color: var(--ao-primary-color);
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

/* Radio buttons */
.ao-radio-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 4px;
    transition: var(--ao-transition);
    cursor: pointer;
}

.ao-radio-wrapper:hover {
    background: rgba(0, 115, 170, 0.05);
}

.ao-radio {
    margin-right: 10px;
}

/* Checkboxes */
.ao-checkbox-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 4px;
    transition: var(--ao-transition);
    cursor: pointer;
}

.ao-checkbox-wrapper:hover {
    background: rgba(0, 115, 170, 0.05);
}

.ao-checkbox {
    margin-right: 10px;
}

.ao-option-price {
    color: var(--ao-primary-color);
    font-weight: 500;
    margin-left: 5px;
}

.ao-option-price--stacked {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.35;
    margin-left: 8px;
}

.ao-option-price--stacked .ao-option-price-line {
    display: block;
}

.ao-option-price--stacked .ao-option-price-line--onetime {
    margin-top: 2px;
}

/* ==========================================================================
   PRICE CONTAINER
   ========================================================================== */

.ao-offer-price-container {
    text-align: center;
    margin: 30px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: var(--ao-border-radius);
    border: 1px solid #dee2e6;
}

.ao-price-label {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.ao-offer-current-total {
    font-size: 32px;
    font-weight: 700;
    color: var(--ao-price-color, var(--ao-primary-color));
    line-height: 1;
    margin-bottom: 5px;
}

.ao-price-amount {
    display: inline-block;
}

.ao-price-unit {
    font-size: 16px;
    color: #6c757d;
    font-weight: 400;
    margin-left: 5px;
}

.ao-secondary-info {
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.ao-secondary-info br {
    display: block;
}

.ao-secondary-info p {
    margin: 0 0 10px 0;
    display: block;
}

.ao-secondary-info ul,
.ao-secondary-info ol {
    margin: 10px 0;
    padding-left: 20px;
    display: block;
}

.ao-secondary-info li {
    margin-bottom: 5px;
    display: list-item;
}

.ao-secondary-info strong {
    font-weight: bold;
}

/* ==========================================================================
   OFFER RICH CONTENT
   ========================================================================== */

.ao-offer-content-rich {
    margin-bottom: 25px;
    line-height: 1.6;
}

.ao-offer-content-rich h1,
.ao-offer-content-rich h2,
.ao-offer-content-rich h3,
.ao-offer-content-rich h4,
.ao-offer-content-rich h5,
.ao-offer-content-rich h6 {
    margin: 20px 0 15px 0;
    color: #2c3e50;
    font-weight: 600;
}

.ao-offer-content-rich h1 { font-size: 1.8em; }
.ao-offer-content-rich h2 { font-size: 1.6em; }
.ao-offer-content-rich h3 { font-size: 1.4em; }
.ao-offer-content-rich h4 { font-size: 1.2em; }
.ao-offer-content-rich h5 { font-size: 1.1em; }
.ao-offer-content-rich h6 { font-size: 1em; }

.ao-offer-content-rich p {
    margin: 0 0 15px 0;
    color: #34495e;
}

.ao-offer-content-rich ul,
.ao-offer-content-rich ol {
    margin: 15px 0;
    padding-left: 25px;
}

.ao-offer-content-rich li {
    margin-bottom: 8px;
    color: #34495e;
    line-height: 1.5;
}

.ao-offer-content-rich ul li {
    list-style-type: disc;
}

.ao-offer-content-rich ol li {
    list-style-type: decimal;
}

.ao-offer-content-rich strong {
    font-weight: 700;
    color: #2c3e50;
}

.ao-offer-content-rich a {
    color: var(--ao-primary-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--ao-transition);
}

.ao-offer-content-rich a:hover {
    color: var(--ao-secondary-color);
    border-bottom-color: var(--ao-secondary-color);
}

.ao-offer-content-rich img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 15px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    vertical-align: middle;
}

/* Style dla obrazków inline (np. ikony, strzałki) */
.ao-offer-content-rich p img,
.ao-offer-content-rich li img {
    display: inline-block;
    margin: 0 5px 0 0;
    vertical-align: middle;
    max-height: 1.5em;
    width: auto;
    box-shadow: none;
    border-radius: 0;
}

/* Style dla obrazków SVG używanych jako bullet points */
.ao-offer-content-rich .ao-custom-bullet {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Style dla Unicode bullet points */
.ao-offer-content-rich span.ao-custom-bullet {
    display: inline-block;
    width: auto;
    height: auto;
    line-height: 1;
    vertical-align: baseline;
    margin-right: 8px;
    font-size: 14px;
    position: relative;
    top: -1px;
}

/* Kontener dla bullet point lines */
.ao-offer-content-rich .ao-bullet-line {
    display: block;
    margin-bottom: 8px;
    line-height: 1.5;
    text-align: left; /* Explicit left alignment - prevents inheritance from centered parents */
}

/* Style dla różnych rozmiarów czcionek z TinyMCE */
.ao-offer-content-rich span[style*="font-size: 8px"],
.ao-offer-content-rich p[style*="font-size: 8px"] { font-size: 8px; }
.ao-offer-content-rich span[style*="font-size: 10px"],
.ao-offer-content-rich p[style*="font-size: 10px"] { font-size: 10px; }
.ao-offer-content-rich span[style*="font-size: 12px"],
.ao-offer-content-rich p[style*="font-size: 12px"] { font-size: 12px; }
.ao-offer-content-rich span[style*="font-size: 14px"],
.ao-offer-content-rich p[style*="font-size: 14px"] { font-size: 14px; }
.ao-offer-content-rich span[style*="font-size: 16px"],
.ao-offer-content-rich p[style*="font-size: 16px"] { font-size: 16px; }
.ao-offer-content-rich span[style*="font-size: 18px"],
.ao-offer-content-rich p[style*="font-size: 18px"] { font-size: 18px; }
.ao-offer-content-rich span[style*="font-size: 20px"],
.ao-offer-content-rich p[style*="font-size: 20px"] { font-size: 20px; }
.ao-offer-content-rich span[style*="font-size: 22px"],
.ao-offer-content-rich p[style*="font-size: 22px"] { font-size: 22px; }
.ao-offer-content-rich span[style*="font-size: 24px"],
.ao-offer-content-rich p[style*="font-size: 24px"] { font-size: 24px; }
.ao-offer-content-rich span[style*="font-size: 26px"],
.ao-offer-content-rich p[style*="font-size: 26px"] { font-size: 26px; }
.ao-offer-content-rich span[style*="font-size: 28px"],
.ao-offer-content-rich p[style*="font-size: 28px"] { font-size: 28px; }
.ao-offer-content-rich span[style*="font-size: 30px"],
.ao-offer-content-rich p[style*="font-size: 30px"] { font-size: 30px; }
.ao-offer-content-rich span[style*="font-size: 32px"],
.ao-offer-content-rich p[style*="font-size: 32px"] { font-size: 32px; }
.ao-offer-content-rich span[style*="font-size: 36px"],
.ao-offer-content-rich p[style*="font-size: 36px"] { font-size: 36px; }
.ao-offer-content-rich span[style*="font-size: 42px"],
.ao-offer-content-rich p[style*="font-size: 42px"] { font-size: 42px; }
.ao-offer-content-rich span[style*="font-size: 48px"],
.ao-offer-content-rich p[style*="font-size: 48px"] { font-size: 48px; }

/* Klasy CSS dla rozmiarów czcionek (alternatywa dla inline styles) */
.ao-offer-content-rich .ao-font-xs { font-size: 10px; }
.ao-offer-content-rich .ao-font-sm { font-size: 12px; }
.ao-offer-content-rich .ao-font-base { font-size: 16px; }
.ao-offer-content-rich .ao-font-lg { font-size: 18px; }
.ao-offer-content-rich .ao-font-xl { font-size: 20px; }
.ao-offer-content-rich .ao-font-2xl { font-size: 24px; }
.ao-offer-content-rich .ao-font-3xl { font-size: 30px; }
.ao-offer-content-rich .ao-font-4xl { font-size: 36px; }

.ao-offer-content-rich blockquote {
    background: #f8f9fa;
    border-left: 4px solid var(--ao-primary-color);
    margin: 20px 0;
    padding: 15px 20px;
    color: #495057;
}

.ao-offer-content-rich code {
    background: #f1f3f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: #e83e8c;
}

.ao-offer-content-rich pre {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 15px;
    overflow-x: auto;
    margin: 15px 0;
}

.ao-offer-content-rich pre code {
    background: none;
    padding: 0;
    color: #495057;
}

/* ==========================================================================
   ATUTY SPRZEDAŻOWE - DIVIDERS
   ========================================================================== */

.ao-point-divider {
    width: 100%;
    height: 1px;
    background: #dee2e6;
    margin: 15px 0;
    border: none;
}

/* ==========================================================================
   SELECT BUTTON
   ========================================================================== */

body .ao-select-offer-button,
body .ao-catalog-button {
    width: var(--ao-button-width, 100%);
    background: var(--ao-button-bg-color, var(--ao-primary-color));
    color: var(--ao-button-text-color, #fff);
    border: 2px solid var(--ao-button-bg-color, var(--ao-primary-color));
    padding: 15px 20px;
    border-radius: var(--ao-button-border-radius, var(--ao-border-radius));
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--ao-transition);
    margin-top: auto;
}

/* Zmniejszony button w ciasnych układach 4 kolumny */
body .ao-offers-grid.ao-cols-4 .ao-select-offer-button,
body .alignfull .ao-offers-grid.ao-cols-4 .ao-select-offer-button,
body .ao-offers-grid.ao-cols-4 .ao-select-offer-btn,
body .alignfull .ao-offers-grid.ao-cols-4 .ao-select-offer-btn,
body .ao-offers-grid.ao-cols-4 .ao-catalog-button,
body .alignfull .ao-offers-grid.ao-cols-4 .ao-catalog-button {
    font-size: 14px;
    padding: 12px 16px;
    letter-spacing: 0.4px;
}

.ao-select-offer-button:hover,
.ao-catalog-button:hover {
    background: var(--ao-secondary-color);
    border-color: var(--ao-secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 115, 170, 0.3);
}

.ao-select-offer-button:active,
.ao-catalog-button:active {
    transform: translateY(0);
}

/* Button customizations handled via inline styles from settings */

/* ==========================================================================
   ORDER SECTION
   ========================================================================== */


.ao-order-section h3 {
    color: #2c3e50;
    margin: 0 0 30px 0;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

/* Order Summary */
.ao-order-summary {
    background: #f8f9fa;
    padding: 25px;
    border-radius: var(--ao-border-radius);
    margin-bottom: 40px;
    border: 1px solid #e9ecef;
}

.ao-selected-offer-title {
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 15px 0;
}

.ao-selected-options {
    margin-bottom: 20px;
}

.ao-selected-options h5 {
    font-size: 16px; /* Zwiększone z 14px - bardziej widoczny nagłówek */
    font-weight: 600;
    color: #495057;
    margin: 0 0 10px 0;
}

.ao-selected-options ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ao-selected-options li {
    padding: 5px 0;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px; /* Zmniejszone z 18px - lepsze proporcje */
}

.ao-selected-options li:last-child {
    border-bottom: none;
}

.ao-total-price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 15px 0;
    border-top: 2px solid #dee2e6;
    margin-top: 15px;
}

.ao-total-label {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    flex: 1 1 220px;
    min-width: 0;
    line-height: 1.25;
}

.ao-total-amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--ao-primary-color);
    flex: 0 0 auto;
    white-space: nowrap;
}

.ao-order-info {
    background: #e9ecef;
    padding: 20px;
    border-radius: var(--ao-border-radius);
    margin-top: 20px;
    border: 1px solid #dee2e6;
    font-size: 11px; /* Zmniejszone z domyślnego 14px */
}

.ao-order-info-content {
    color: #495057;
    font-size: 11px; /* Zmniejszone z 14px */
    line-height: 1.6;
}

.ao-order-info-content h1,
.ao-order-info-content h2,
.ao-order-info-content h3,
.ao-order-info-content h4,
.ao-order-info-content h5,
.ao-order-info-content h6 {
    color: #343a40;
    margin-top: 0;
}

.ao-order-info-content p {
    margin-bottom: 10px;
}

.ao-order-info-content ul,
.ao-order-info-content ol {
    margin-bottom: 15px;
    padding-left: 20px;
}

.ao-order-info-content li {
    margin-bottom: 5px;
}

/* ==========================================================================
   ORDER FORM
   ========================================================================== */

.ao-order-form {
    margin-top: 40px;
}

.ao-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .ao-form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/* FIX: Ensure single textarea in a row spans full width */
.ao-form-row > textarea:only-child {
    grid-column: 1 / -1;
}

/* FIX: Ensure checkboxes span full width in form rows */
.ao-form-row > .ao-checkbox-label {
    grid-column: 1 / -1;
}

.ao-form-field {
    margin-bottom: 20px;
}

.ao-info-field {
    margin-bottom: 20px;
    padding: 15px;
    background: #f8f9fa;
    border: 1px solid #e1e5e9;
    border-radius: var(--ao-border-radius, 8px);
    border-left: 4px solid #6c757d;
    font-size: 14px;
    line-height: 1.6;
    color: #495057;
}

.ao-checkbox-label a {
    color: var(--ao-primary-color, #0073aa);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--ao-transition);
}

.ao-checkbox-label a:hover {
    color: var(--ao-secondary-color, #005177);
    border-bottom-color: var(--ao-secondary-color, #005177);
}

.ao-form-field label {
    display: block;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 14px;
}

.ao-input,
.ao-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    transition: var(--ao-transition);
    background: #fff;
}

.ao-input:focus,
.ao-textarea:focus {
    outline: none;
    border-color: var(--ao-primary-color);
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.ao-input.error,
.ao-textarea.error {
    border-color: #e74c3c;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.1);
}

.ao-phone-error {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
    animation: ao-fade-in 0.3s ease-out;
}

.ao-checkbox-label {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
    color: #495057;
    cursor: pointer;
}

.ao-checkbox-label > span {
    display: inline;
}

.ao-checkbox-input {
    margin-right: 10px;
    margin-top: 2px;
}

.ao-form-actions {
    text-align: center;
    margin-top: 30px;
}

.ao-submit-button {
    background: var(--ao-primary-color);
    color: #fff;
    border: none;
    padding: 15px 40px;
    border-radius: var(--ao-border-radius);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ao-transition);
    /* min-width: 200px; <-- commented out as it breaks mobile submit button*/ 
}

.ao-submit-button:hover {
    background: var(--ao-secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 115, 170, 0.3);
}

.ao-submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ao-form-actions .ao-modify-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 40px;
    border: 2px solid var(--ao-primary-color);
    border-radius: var(--ao-button-border-radius, var(--ao-border-radius));
    background: transparent;
    color: var(--ao-primary-color);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    width: auto;
    min-width: 0;
    cursor: pointer;
    transition: var(--ao-transition);
}

.ao-form-actions .ao-modify-btn:hover {
    background: var(--ao-primary-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 115, 170, 0.3);
}

.ao-configurator-step.summary-step .ao-form-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.ao-configurator-step.summary-step .ao-form-actions .ao-submit-button,
.ao-configurator-step.summary-step .ao-form-actions .ao-modify-btn {
    margin-left: auto;
    margin-right: auto;
}

.ao-configurator-step.summary-step .ao-form-actions .ao-submit-button {
    width: auto;
    min-width: min(100%, 320px);
}

/* ==========================================================================
   PROMO CODE SECTION (shared between configurator & standalone forms)
   ========================================================================== */

.ao-promo-code-section {
    margin: 20px 0;
    padding: 15px;
    background: var(--ao-promo-bg, #f8f9fa);
    border-radius: var(--ao-border-radius, 8px);
    border: 1px solid var(--ao-promo-border, #edf1f5);
}

.ao-promo-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.ao-promo-input-wrapper input,
.ao-promo-input-wrapper .ao-promo-code-input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid var(--ao-promo-input-border, #d9dee4);
    border-radius: var(--ao-border-radius, 8px);
    font-size: 14px;
    text-transform: uppercase;
    background: #fff;
    transition: var(--ao-transition, all 0.2s ease);
}

.ao-promo-input-wrapper input:focus,
.ao-promo-input-wrapper .ao-promo-code-input:focus {
    outline: none;
    border-color: var(--ao-primary-color, #0073aa);
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15);
}

.ao-promo-input-wrapper input.error,
.ao-promo-input-wrapper .ao-promo-code-input.error {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

.ao-promo-message,
#ao-promo-message {
    margin-top: 8px;
    font-size: 13px;
}

.ao-promo-message.error,
#ao-promo-message.error {
    color: #dc3545;
}

.ao-promo-message.success,
#ao-promo-message.success {
    color: #28a745;
}

.ao-promo-applied-state,
#ao-promo-applied {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 15px;
    background: #d4edda;
    border-radius: var(--ao-border-radius, 8px);
    color: #155724;
    font-size: 13px;
}

.ao-promo-success {
    flex: 1;
    font-weight: 600;
}

.ao-promo-apply-btn,
#ao-promo-apply-btn {
    background: var(--ao-primary-color, #0073aa);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: var(--ao-border-radius, 8px);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--ao-transition, all 0.2s ease);
    white-space: nowrap;
}

.ao-promo-apply-btn:hover,
#ao-promo-apply-btn:hover {
    background: var(--ao-secondary-color, #005177);
}

.ao-promo-apply-btn:disabled,
#ao-promo-apply-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ao-promo-remove-btn,
#ao-promo-remove-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #155724;
    padding: 0 5px;
    line-height: 1;
    transition: color 0.2s ease;
}

.ao-promo-remove-btn:hover,
#ao-promo-remove-btn:hover {
    color: #0c3d14;
}

.ao-promo-discount-info {
    font-weight: 400;
    opacity: 0.9;
}

/* Promo discount summary lines */
.ao-promo-subtotal,
.ao-promo-discount-line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.ao-promo-subtotal {
    border-top: 1px solid #eee;
    margin-top: 10px;
    padding-top: 10px;
}

.ao-promo-discount-line {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.ao-promo-discount-line {
    color: var(--ao-promo-discount-color, #28a745);
    font-weight: 600;
}

.ao-promo-discount-line .discount-label,
.ao-promo-discount-line .discount-amount,
.ao-promo-discount-line .ao-discount-label,
.ao-promo-discount-line .ao-discount-amount {
    color: var(--ao-promo-discount-color, #28a745);
}

/* Price summary lines for regular forms */
.ao-price-summary {
    margin-top: 15px;
}

.ao-monthly-price-line,
.ao-installation-fee-line,
.ao-one-time-addons-line,
.ao-subtotal-line,
.ao-discount-line,
.ao-first-month-total-line {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.ao-monthly-price-line {
    margin-bottom: 10px;
    font-weight: 600;
}

.ao-installation-fee-line {
    margin-bottom: 4px;
}

.ao-subtotal-line {
    border-top: 1px solid #eee;
    margin-top: 10px;
    padding-top: 10px;
}

.ao-monthly-price-label,
.ao-installation-fee-label,
.ao-one-time-addons-label,
.ao-subtotal-label,
.ao-discount-label,
.ao-first-month-total-label {
    color: var(--ao-text-color, #333);
}

.ao-monthly-price-amount,
.ao-installation-fee-amount,
.ao-one-time-addons-amount,
.ao-subtotal-amount,
.ao-first-month-total-amount {
    font-weight: 600;
}

.ao-discount-label,
.ao-discount-amount {
    color: var(--ao-promo-discount-color, #28a745);
    font-weight: 600;
}

.ao-discount-line {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.ao-total-price {
    padding-top: 8px;
    font-weight: 600;
    font-size: 16px;
}

.ao-first-month-total-line,
.next-month-line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: var(--ao-text-color, #666);
}

.ao-first-month-total-label,
.next-month-label {
    color: var(--ao-text-color, #666);
}

.ao-first-month-total-amount,
.next-month-amount {
    font-weight: 600;
}

/* Summary consolidation - single offer flow */
.ao-order-summary,
.ao-form-advanced__summary-box {
    background: var(--ao-summary-box-background);
    border: var(--ao-summary-box-border);
    border-radius: var(--ao-summary-box-radius);
    box-shadow: var(--ao-summary-box-shadow);
    padding: var(--ao-summary-box-padding);
    font-family: var(--ao-summary-body-font-family);
    text-align: left;
}

.ao-order-summary h2,
.ao-order-summary h3,
.ao-form-advanced__summary-box h2,
.ao-form-advanced__summary-box h3 {
    font-family: var(--ao-summary-title-font-family);
}

.ao-selected-offer {
    margin-bottom: var(--ao-summary-item-block-spacing);
}

.ao-selected-offer-title {
    font-family: var(--ao-summary-title-font-family);
    color: var(--ao-summary-heading-color);
    font-size: var(--ao-summary-heading-size);
}

.ao-selected-options {
    margin-bottom: 20px;
    font-family: var(--ao-summary-body-font-family);
}

.ao-selected-options h5 {
    font-family: var(--ao-summary-title-font-family);
    font-size: var(--ao-summary-section-title-size);
}

.ao-selected-options li {
    font-family: var(--ao-summary-body-font-family);
    font-size: var(--ao-summary-item-size);
    line-height: var(--ao-summary-item-line-height);
    padding: var(--ao-summary-row-gap) 0;
    border-bottom-color: var(--ao-summary-divider-color);
    align-items: flex-start;
    gap: var(--ao-summary-option-gap);
    color: var(--ao-summary-body-color);
}

.ao-selected-options li > span:first-child,
.ao-selected-options li > .option-label {
    flex: 1 1 auto;
    text-align: left;
}

.ao-selected-options li > span:last-child,
.ao-selected-options li > .option-price {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
    color: var(--ao-summary-accent-color);
    font-weight: 600;
}

.ao-price-summary .ao-installation-fee-line,
.ao-price-summary .ao-one-time-addons-line,
.ao-price-summary .ao-subtotal-line,
.ao-price-summary .ao-discount-line,
.ao-price-summary .ao-first-month-total-line {
    justify-content: space-between;
    align-items: baseline;
    gap: var(--ao-summary-meta-row-gap);
    padding: var(--ao-summary-meta-row-padding);
    font-size: var(--ao-summary-meta-size);
}

.ao-price-summary .ao-installation-fee-label,
.ao-price-summary .ao-one-time-addons-label,
.ao-price-summary .ao-subtotal-label,
.ao-price-summary .ao-discount-label,
.ao-price-summary .ao-first-month-total-label {
    color: var(--ao-summary-meta-label-color);
    font-size: inherit;
}

.ao-price-summary .ao-installation-fee-amount,
.ao-price-summary .ao-one-time-addons-amount,
.ao-price-summary .ao-subtotal-amount,
.ao-price-summary .ao-discount-amount,
.ao-price-summary .ao-first-month-total-amount {
    color: var(--ao-summary-meta-value-color);
    font-size: inherit;
    font-weight: 600;
    white-space: nowrap;
}

.ao-price-summary .ao-discount-label,
.ao-price-summary .ao-discount-amount {
    color: var(--ao-summary-discount-color);
}

.ao-price-summary .ao-total-price {
    font-family: var(--ao-summary-body-font-family);
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--ao-summary-total-gap);
    padding-top: var(--ao-summary-total-padding-top);
    margin-top: var(--ao-summary-total-margin-top);
    border-top: var(--ao-summary-total-border-width) solid var(--ao-summary-total-border-color);
}

.ao-total-label {
    font-family: var(--ao-summary-title-font-family);
    color: var(--ao-summary-total-label-color);
    font-size: var(--ao-summary-total-label-size);
}

.ao-total-amount {
    font-size: var(--ao-summary-total-size);
    font-weight: var(--ao-summary-total-weight);
    color: var(--ao-summary-total-amount-color);
}

.ao-first-month-total-line {
    margin-top: 10px;
    border-top: 1px solid var(--ao-summary-divider-color);
    padding-top: 16px;
}

/* ==========================================================================
   ORDER SUMMARY FORM SPECIFIC STYLES
   ========================================================================== */

#ao-order-summary-form {
    max-width: var(--ao-order-form-max-width, 800px);
    padding: var(--ao-order-form-padding, 20px);
    background-color: var(--ao-order-form-bg-color, #ffffff);
    border: 1px solid var(--ao-order-form-border-color, #e1e1e1);
    margin: 50px auto;
    border-radius: var(--ao-border-radius);
    box-shadow: var(--ao-shadow);
}

/* Mobile: Reduce massive padding/margin */
@media (max-width: 768px) {
    #ao-order-summary-form {
        max-width: 100%;
        padding: 15px 12px;
        margin: 20px auto;
        border-radius: 8px;
    }
}

#ao-order-summary-form .ao-submit-button {
    background: var(--ao-order-form-button-background, var(--ao-order-form-button-bg-color, var(--ao-primary-color)));
    color: var(--ao-order-form-button-text-color, #fff);
}

#ao-order-summary-form .ao-submit-button:hover {
    background: var(--ao-order-form-button-hover-background, var(--ao-secondary-color, var(--ao-primary-color)));
}

#ao-order-summary-form .ao-total-amount {
    color: var(--ao-order-form-button-bg-color, var(--ao-primary-color));
}

/* ==========================================================================
   FORM VARIANTS - Per-variant styling using CSS variables
   Variables are set by PHP per-variant (.ao-form-simple, .ao-form-advanced)
   Override in custom.css with !important if needed
   ========================================================================== */

/* SVG icons in offer content use primary color */
.ao-offer-content svg {
    color: var(--ao-primary-color);
}

/* Base styles for variant wrappers */
#ao-order-summary-form.ao-form-simple,
#ao-order-summary-form.ao-form-advanced {
    box-sizing: border-box;
}

/* Simple Form Variant - uses CSS variables from PHP */
#ao-order-summary-form.ao-form-simple {
    max-width: var(--ao-order-form-max-width, 800px);
    padding: var(--ao-order-form-padding, 20px);
    background-color: var(--ao-order-form-bg-color, #ffffff);
    border-color: var(--ao-order-form-border-color, #e1e1e1);
}

.ao-form-simple .ao-submit-button {
    background: var(--ao-order-form-button-background, var(--ao-order-form-button-bg-color, var(--ao-primary-color)));
    color: var(--ao-order-form-button-text-color, #fff);
}

.ao-form-simple .ao-submit-button:hover {
    background: var(--ao-order-form-button-hover-background, var(--ao-secondary-color, var(--ao-primary-color)));
}

.ao-form-simple .ao-total-amount {
    color: var(--ao-order-form-button-bg-color, var(--ao-primary-color));
}

/* Children inherit from parent - no separate max-width */
.ao-form-simple .ao-order-summary,
.ao-form-simple .ao-order-form,
.ao-form-simple .ao-promo-code-section {
    max-width: none;
    box-sizing: border-box;
}

/* Advanced Form Variant - NO padding on wrapper, margin on layout instead */
#ao-order-summary-form.ao-form-advanced {
    max-width: var(--ao-order-form-max-width, 1100px);
    padding: 0;
    background-color: var(--ao-order-form-bg-color, #ffffff);
    border-color: var(--ao-order-form-border-color, #e1e1e1);
}

.ao-form-advanced .ao-form-advanced__layout {
    margin: var(--ao-order-form-padding, 20px);
}

.ao-form-advanced .ao-submit-button {
    background: var(--ao-order-form-button-background, var(--ao-order-form-button-bg-color, var(--ao-primary-color)));
    color: var(--ao-order-form-button-text-color, #fff);
}

.ao-form-advanced .ao-submit-button:hover {
    background: var(--ao-order-form-button-hover-background, var(--ao-secondary-color, var(--ao-primary-color)));
}

.ao-form-advanced .ao-total-amount {
    color: var(--ao-order-form-button-bg-color, var(--ao-primary-color));
}

/* Advanced form keeps its grid layout intact */
.ao-form-advanced .ao-promo-code-section {
    max-width: none;
}

/* ==========================================================================
   MESSAGES
   ========================================================================== */

.ao-messages {
    margin-top: 20px;
}

.ao-message {
    padding: 15px 20px;
    border-radius: var(--ao-border-radius);
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.5;
}

.ao-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.ao-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.ao-message.info {
    background: #cce7ff;
    color: #004085;
    border: 1px solid #b3d7ff;
}

/* ==========================================================================
   LOADING STATES
   ========================================================================== */

.ao-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.ao-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid var(--ao-primary-color);
    border-radius: 50%;
    animation: ao-spin 1s linear infinite;
}

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

.ao-hidden {
    display: none;
}

.ao-visible {
    display: block;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes ao-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ao-fade-in {
    animation: ao-fade-in 0.5s ease-out;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .ao-select-offer-button,
    .ao-catalog-button,
    .ao-order-form,
    .ao-configurable-options {
        display: none;
    }
    
    .ao-offer-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .ao-pricing-offers-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   LOCATION-BASED OFFERS (Address Search Integration)
   ========================================================================== */

/* Bestseller variables moved to main :root block at top of file */

.ao-offer-card.ao-bestseller {
    border-color: var(--ao-bestseller-border-color);
    border-width: var(--ao-bestseller-border-width);
}

.ao-offer-badge {
    background: var(--ao-bestseller-bg-color);
    color: var(--ao-bestseller-text-color);
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 15px;
    display: inline-block;
}

/* ==========================================================================
   ADDRESS SEARCH INTEGRATION
   ========================================================================== */

/* 🔧 EMERGENCY FIX: Hidden price styles for location mode */
.ao-offer-price-hidden {
    text-align: center;
    padding: 15px 10px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed var(--ao-primary-color, #0073aa);
    border-radius: var(--ao-border-radius, 8px);
    margin: 10px 0;
}

.ao-price-hidden-text {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--ao-primary-color, #0073aa);
    margin-bottom: 5px;
}

body #ao-order-summary-form {
    float: none;
}

/* ==========================================================================
   FIX: WordPress Theme Compatibility for Full-Width Blocks
   ========================================================================== */

/*
 * Problem: Some WordPress themes apply restrictive styles to '.alignfull'
 * containers, adding large margins/padding that prevent content from
 * stretching to the full width of the viewport.
 *
 * Solution: This override forces the container holding the offers to
 * ignore the theme's constraints. We reset margins and padding, and set
 * the width to 100%, ensuring the offer cards can use the full
 * available space.
*/
/* ==========================================================================
   THEME COMPATIBILITY FIX (Alignfull & Grid) - STATYCZNE
   ========================================================================== */

/* 1. High-Specificity .alignfull Override (No !important) */
body .entry-content .alignfull {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* 2. High-Specificity Grid Setup (tylko dla grid mode, nie scroll) */
body .alignfull .ao-offers-grid:not(.ao-display-scroll) {
    display: grid;
    gap: 20px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 3. Column-specific rules with width constraints (tylko dla grid mode) */
body .alignfull .ao-offers-grid.ao-cols-1:not(.ao-display-scroll) {
    grid-template-columns: 1fr;
    max-width: 650px;
}

body .alignfull .ao-offers-grid.ao-cols-2:not(.ao-display-scroll) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1320px;
}

body .alignfull .ao-offers-grid.ao-cols-3:not(.ao-display-scroll) {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
}

body .alignfull .ao-offers-grid.ao-cols-4:not(.ao-display-scroll) {
    grid-template-columns: repeat(4, 1fr);
    max-width: 100%;
}

/* 4. Responsive overrides (tylko dla grid mode) */
@media (max-width: 1024px) {
    body .alignfull .ao-offers-grid.ao-cols-4:not(.ao-display-scroll),
    body .alignfull .ao-offers-grid.ao-cols-3:not(.ao-display-scroll) {
        grid-template-columns: repeat(2, 1fr);
        max-width: 1320px;
    }
}

/* 6. Force full width for dynamically loaded content (AJAX) - Increased Specificity */
/* This targets the container for location-aware offers and the grid itself */
html body .ao-location-aware-offer-list,
html body .ao-location-aware-offer-list .ao-offers-grid {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box; /* Ensure padding is included in width */
    padding: 0 15px; /* Added horizontal padding for margin on sides */
}

/* Keep 1-column layout centered and readable even when legacy full-width rules apply. */
html body .ao-offers-grid.ao-cols-1:not(.ao-display-scroll),
html body .alignfull .ao-offers-grid.ao-cols-1:not(.ao-display-scroll),
html body .ao-location-aware-offer-list .ao-offers-grid.ao-cols-1:not(.ao-display-scroll) {
    max-width: 860px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure the direct parent of the grid also doesn't restrict width */
html body .ao-location-aware-offer-list.alignfull {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 768px) {
    body .alignfull .ao-offers-grid:not(.ao-display-scroll),
    body .alignfull .ao-offers-grid.ao-cols-2:not(.ao-display-scroll),
    body .alignfull .ao-offers-grid.ao-cols-3:not(.ao-display-scroll),
    body .alignfull .ao-offers-grid.ao-cols-4:not(.ao-display-scroll) {
        grid-template-columns: 1fr;
        max-width: 650px;
    }
}

/* 5. Address search wrapper styles */
.ao-address-search-wrapper {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: var(--ao-border-radius);
    background: #fff;
}

.ao-form-row {
    display: grid;
    grid-template-columns: 2.4fr 2fr 0.9fr;
    gap: 10px;
    margin-bottom: 15px;
}

/* New layout: button in the same row as form fields */
.ao-form-row.ao-form-row-with-button {
    grid-template-columns: 2.4fr 2fr 0.9fr auto;
    align-items: end;
}

.ao-form-row.ao-form-row-with-button .ao-search-button {
    margin-bottom: 0;
    height: fit-content;
    align-self: end;
    white-space: nowrap;
    min-width: 140px;
    padding: 12px 18px;
}

.ao-form-row input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: var(--ao-border-radius);
    font-size: 14px;
}

/* Ensure autocomplete wrapper takes full grid cell */
.ao-form-row .ao-autocomplete-wrapper {
    width: 100%;
    position: relative;
}

.ao-form-row .ao-autocomplete-wrapper input {
    width: 100%;
    box-sizing: border-box;
}

/* Autocomplete dropdown items */
.ao-autocomplete-item {
    font-size: 13px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    background: white;
}

.ao-autocomplete-item:hover {
    background-color: #f0f0f0;
}

.ao-autocomplete-item:last-child {
    border-bottom: none;
}

.ao-search-button {
    background-color: var(--ao-primary-color);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: var(--ao-border-radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.ao-search-button:hover {
    background-color: var(--ao-secondary-color);
}

/* ULTRA HIGH SPECIFICITY - NUCLEAR OPTION */
/* City (miejscowość) = 2.4fr (20% bigger), Street = 2fr, Number (nr budynku) = 0.9fr (10% smaller) */
html body div.ao-address-search-wrapper div.ao-form-row,
html body div.ao-address-search-proxy-wrapper div.ao-form-row,
html body div.ao-address-search-wrapper div.ao-form-row.ao-form-row-with-button,
html body div.ao-address-search-proxy-wrapper div.ao-form-row.ao-form-row-with-button {
    display: grid;
    grid-template-columns: 2.4fr 2fr 0.9fr;
    gap: 10px;
    grid-auto-flow: column;
    align-items: stretch;
}

/* Add button column for forms with button */
html body div.ao-address-search-wrapper div.ao-form-row.ao-form-row-with-button,
html body div.ao-address-search-proxy-wrapper div.ao-form-row.ao-form-row-with-button {
    grid-template-columns: 2.4fr 2fr 0.9fr auto;
}

/* Force flex to be grid instead */
html body div.ao-address-search-wrapper div.ao-form-row,
html body div.ao-address-search-proxy-wrapper div.ao-form-row {
    display: grid !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
}

/* Force autocomplete wrapper to take full grid space - ULTRA HIGH SPECIFICITY */
html body div.ao-address-search-wrapper div.ao-form-row div.ao-autocomplete-wrapper,
html body div.ao-address-search-proxy-wrapper div.ao-form-row div.ao-autocomplete-wrapper {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: none;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

html body div.ao-address-search-wrapper div.ao-form-row div.ao-autocomplete-wrapper input,
html body div.ao-address-search-proxy-wrapper div.ao-form-row div.ao-autocomplete-wrapper input,
html body div.ao-address-search-wrapper div.ao-form-row input,
html body div.ao-address-search-proxy-wrapper div.ao-form-row input {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    flex: none;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    border-radius: var(--ao-border-radius, 8px);
}

/* Ultra high specificity for button width - auto-sizing to fit text */
html body div.ao-address-search-wrapper form.ao-address-search-form div.ao-form-row.ao-form-row-with-button button.ao-search-button,
html body div.ao-address-search-proxy-wrapper form.ao-address-search-form-proxy div.ao-form-row.ao-form-row-with-button button.ao-search-button,
html body div.ao-address-search-wrapper div.ao-form-row.ao-form-row-with-button button.ao-search-button,
html body div.ao-address-search-proxy-wrapper div.ao-form-row.ao-form-row-with-button button.ao-search-button {
    width: auto;
    min-width: 160px;
    /* max-width removed - let button grow to fit text like "Sprawdzam..." */
    padding: 12px 16px;
    white-space: nowrap;
    flex: none;
    flex-grow: 0;
    flex-shrink: 0;
    margin-bottom: 0;
    height: fit-content;
    align-self: end;
    box-sizing: border-box;
    text-align: center;
}


@media (max-width: 768px) {
    .ao-form-row {
        grid-template-columns: 1fr;
    }
    
    /* Responsive: move button below fields on mobile */
    .ao-form-row.ao-form-row-with-button {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        align-items: stretch;
    }
    
    .ao-form-row.ao-form-row-with-button .ao-search-button {
        margin-top: 10px;
        align-self: stretch;
    }
    
    /* Override high specificity rules on mobile */
    body .ao-address-search-wrapper .ao-form-row,
    body .ao-address-search-proxy-wrapper .ao-form-row,
    body .ao-address-search-wrapper .ao-form-row.ao-form-row-with-button,
    body .ao-address-search-proxy-wrapper .ao-form-row.ao-form-row-with-button {
        grid-template-columns: 1fr !important;
    }
}

/* CSS Override Examples for Custom CSS panel:
 * 
 * To move button below fields (like original layout):
 * .ao-form-row.ao-form-row-with-button {
 *     grid-template-columns: 2fr 2fr 1fr !important;
 *     align-items: stretch !important;
 * }
 * .ao-form-row.ao-form-row-with-button .ao-search-button {
 *     grid-column: 1 / -1 !important;
 *     margin-top: 15px !important;
 * }
 *
 * To make button full-width under fields:
 * .ao-form-row.ao-form-row-with-button {
 *     grid-template-rows: auto auto !important;
 * }
 * .ao-form-row.ao-form-row-with-button .ao-search-button {
 *     grid-column: 1 / -1 !important;
 *     grid-row: 2 !important;
 *     margin-top: 15px !important;
 * }
 */

/* FIX: Style for select options to match input sizes */
select option {
    font-size: 14px;
    padding: 8px 12px;
    line-height: 1.5;
}

/* FIX: Ensure form inputs don't overlap and have proper spacing */
.ao-form-row .ao-input,
.ao-form-row .ao-textarea {
    min-width: 0; /* Important for grid items */
    box-sizing: border-box;
    margin: 0;
}

/* FIX: Extra specificity for form field spacing */
.ao-form-row > .ao-input {
    width: 100%;
    min-width: 0;
    flex-shrink: 1;
}

/* FIX: Ensure grid doesn't create overlapping content */
.ao-form-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ==========================================================================
   CONFIGURATOR STYLES
   NOTE: Desktop configurator styles now live in assets/css/configurator.css
   ========================================================================== */

/* ==========================================================================
   CONFIGURATOR RESPONSIVE STYLES
   Note: Main configurator mobile styles are in mobile-form-display.css
   These touch optimizations target non-prefixed selectors for compatibility
   ========================================================================== */

/* Touch Device Optimizations */
.ao-touch-device .progress-step {
    min-height: 44px;
    padding: 12px;
}

.ao-touch-device .ao-select-offer-btn,
.ao-touch-device .ao-submit-order-btn {
    min-height: 48px;
    padding: 16px 28px;
}

.ao-touch-device .option-label {
    min-height: 44px;
    padding: 12px;
}

.ao-touch-device .btn-modify,
.ao-touch-device .btn-remove {
    min-height: 36px;
    padding: 8px 16px;
}

/* ==========================================================================
   CONTENT DIVIDERS - Dividers w zawartości ofert
   ========================================================================== */

.ao-content-divider {
    margin: 25px 0;
    width: 100%;
    display: block;
    position: relative;
    clear: both;
}

.ao-divider-thin {
    border-top: 1px solid var(--ao-primary-color, #0073aa);
    height: 1px;
    opacity: 0.3;
}

.ao-divider-thick {
    border-top: 3px solid var(--ao-primary-color, #0073aa);
    height: 3px;
    opacity: 0.6;
}

.ao-divider-dotted {
    border-top: 2px dotted var(--ao-primary-color, #0073aa);
    height: 2px;
    opacity: 0.5;
}

.ao-divider-dashed {
    border-top: 2px dashed var(--ao-primary-color, #0073aa);
    height: 2px;
    opacity: 0.5;
}

.ao-divider-gradient {
    background: linear-gradient(to right, 
        transparent, 
        var(--ao-primary-color, #0073aa), 
        transparent
    );
    height: 2px;
    opacity: 0.4;
}

/* Bullet points styling w zawartości */
.ao-bullet-line .ao-custom-bullet {
    margin-right: 10px;
    font-weight: bold;
    color: var(--ao-primary-color, #0073aa);
    font-size: 1.1em;
}

/* Responsive dividers */
@media (max-width: 768px) {
    .ao-content-divider {
        margin: 20px 0;
    }
    
    .ao-divider-thick {
        border-top-width: 2px;
    }
}


/* ==========================================================================
   CONTEXT-AWARE ANIMATION ENHANCEMENTS
   Static variants for non-animated contexts + context optimizations
   ========================================================================== */

/* Static variants for non-animated contexts */
.ao-focused-static {
    outline: 2px solid var(--ao-primary-color, #0073aa);
    outline-offset: 2px;
}

.ao-price-updated-static {
    background-color: rgba(0, 115, 170, 0.05);
    border-color: var(--ao-primary-color, #0073aa);
}

.ao-hover-static {
    background-color: rgba(0, 115, 170, 0.05);
}

/* Enhanced pulse animation for compatible contexts */
@keyframes ao-pulse {
    0%, 100% { 
        transform: scale(1); 
        background-color: transparent; 
    }
    50% { 
        transform: scale(1.02); 
        background-color: rgba(0, 115, 170, 0.1); 
    }
}

.ao-pulse {
    animation: ao-pulse 0.6s ease-in-out;
}

/* Context-specific optimizations */
.yootheme-mode-configurator .ao-offer-card {
    /* Disable all CSS transitions in YooTheme configurator */
    transition: none !important;
}

.yootheme-mode-configurator .ao-offer-card * {
    /* Cascade disable to all child elements */
    transition: none !important;
    animation: none !important;
}

/* Modal context optimizations */
.ao-modal .ao-offer-card,
.modal .ao-offer-card {
    animation: none !important;
    transition: transform 0.2s ease !important; /* Keep only essential transitions */
}

/* Icon system - Universal styles for both Dashicons and SVG */
.ao-icon {
    display: inline-flex;
    align-items: center;
    margin: 0 4px;
    vertical-align: middle;
}

/* Dashicon type */
.ao-icon-dashicon {
    font-size: var(--ao-icon-size, 18px);
}

/* SVG type */
.ao-icon-svg {
    display: inline-flex;
}

.ao-icon-svg svg {
    width: var(--ao-icon-size, 18px);
    height: var(--ao-icon-size, 18px);
    display: block;
}

/* Fix: Explicit text alignment for offer content paragraphs */
.ao-offer-content p {
    text-align: left;
}

/* Dashicons color - can be changed to match theme */
.ao-icon-dashicon {
    color: var(--ao-primary-color, #0098D9); /* Use theme color or fallback to blue */
}

/* Line-height control - override skynet.css with CSS variable */
.ao-offer-content p[style*="line-height"] {
    line-height: inherit !important; /* Force inline styles to work */
}

.ao-offer-content [style*="line-height"] {
    line-height: inherit !important; /* Force inline styles to work on any element */
}

/* CRITICAL FIX: Allow inline line-height styles to work */
.ao-offer-content p[style*="line-height"],
.ao-offer-content div[style*="line-height"],
.ao-offer-content span[style*="line-height"] {
    line-height: var(--custom-line-height) !important;
}

/* ==========================================================================
   HORIZONTAL SCROLL CAROUSEL MODE
   ========================================================================== */

/* Kontener scroll - zwiększona specificity aby nadpisać grid */
body .ao-offers-grid.ao-display-scroll,
body .alignfull .ao-offers-grid.ao-display-scroll,
.entry-content .ao-offers-grid.ao-display-scroll,
.site-content .ao-offers-grid.ao-display-scroll {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth; /* Płynne scrollowanie */
    -webkit-overflow-scrolling: touch; /* Smooth scroll na iOS */
    scrollbar-width: thin; /* Firefox */
    gap: 20px;
    padding: 10px 0 20px 0; /* Padding dla shadow kart */
    margin: 0 -15px; /* Negatywny margin dla edge-to-edge na mobile */
    padding-left: 15px;
    padding-right: 15px;
    grid-template-columns: none !important; /* Wyłącz grid columns */
    max-width: none !important; /* Pełna szerokość dla scroll */
    justify-content: flex-start !important; /* KRYTYCZNE: Karty od lewej, nie center */
}

/* Płynniejsze przejścia między kartami */
@media (prefers-reduced-motion: no-preference) {
    body .ao-offers-grid.ao-display-scroll {
        scroll-snap-type: x mandatory;
        scroll-padding: 15px; /* Wyrównanie z padding kontenera */
    }
}

/* Ukryj scrollbar na webkit (opcjonalnie) */
.ao-offers-grid.ao-display-scroll::-webkit-scrollbar {
    height: 8px;
}

.ao-offers-grid.ao-display-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.ao-offers-grid.ao-display-scroll::-webkit-scrollbar-thumb {
    background: var(--ao-primary-color, #0073aa);
    border-radius: 4px;
}

.ao-offers-grid.ao-display-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--ao-secondary-color, #005177);
}

/* Karty w trybie scroll - base styling */
body .ao-offers-grid.ao-display-scroll .ao-offer-card,
body .alignfull .ao-offers-grid.ao-display-scroll .ao-offer-card {
    flex-shrink: 0; /* Nie pozwól kartom się kurczyć */
    scroll-snap-align: start;
    scroll-snap-stop: always; /* Zatrzymuj na każdej karcie */
    min-width: 0; /* Reset min-width aby calc() działało */
}

/* Szerokość kart przez flex-basis (bardziej niezawodne niż width) */
/* Formuła: (100% - total_gaps) / num_columns */
body .ao-offers-grid.ao-display-scroll.ao-cols-1 .ao-offer-card,
body .alignfull .ao-offers-grid.ao-display-scroll.ao-cols-1 .ao-offer-card {
    flex: 0 0 100%; /* 1 karta = pełna szerokość */
}

body .ao-offers-grid.ao-display-scroll.ao-cols-2 .ao-offer-card,
body .alignfull .ao-offers-grid.ao-display-scroll.ao-cols-2 .ao-offer-card {
    flex: 0 0 calc((100% - 20px) / 2); /* 2 karty, 1 gap 20px */
}

body .ao-offers-grid.ao-display-scroll.ao-cols-3 .ao-offer-card,
body .alignfull .ao-offers-grid.ao-display-scroll.ao-cols-3 .ao-offer-card {
    flex: 0 0 calc((100% - 40px) / 3); /* 3 karty, 2 gapy 40px */
}

body .ao-offers-grid.ao-display-scroll.ao-cols-4 .ao-offer-card,
body .alignfull .ao-offers-grid.ao-display-scroll.ao-cols-4 .ao-offer-card {
    flex: 0 0 calc((100% - 60px) / 4); /* 4 karty, 3 gapy 60px */
}

/* Responsive: Mobile - zawsze 1 karta widoczna + peek następnej */
@media (max-width: 768px) {
    /* Auto mode is decided server-side, so it cannot know the mobile viewport.
     * When auto produced a multi-column grid, switch it to swipe scroll on mobile.
     */
    body .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-2:not(.ao-display-scroll),
    body .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-3:not(.ao-display-scroll),
    body .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-4:not(.ao-display-scroll),
    body .alignfull .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-2:not(.ao-display-scroll),
    body .alignfull .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-3:not(.ao-display-scroll),
    body .alignfull .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-4:not(.ao-display-scroll),
    body .ao-location-aware-offer-list .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-2:not(.ao-display-scroll),
    body .ao-location-aware-offer-list .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-3:not(.ao-display-scroll),
    body .ao-location-aware-offer-list .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-4:not(.ao-display-scroll) {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        gap: 15px;
        padding: 10px 15px 20px 15px;
        margin: 0 -15px;
        grid-template-columns: none !important;
        max-width: none !important;
        justify-content: flex-start !important;
    }

    body .ao-offers-grid.ao-display-scroll .ao-offer-card,
    body .alignfull .ao-offers-grid.ao-display-scroll .ao-offer-card,
    body .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-2:not(.ao-display-scroll) .ao-offer-card,
    body .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-3:not(.ao-display-scroll) .ao-offer-card,
    body .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-4:not(.ao-display-scroll) .ao-offer-card,
    body .alignfull .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-2:not(.ao-display-scroll) .ao-offer-card,
    body .alignfull .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-3:not(.ao-display-scroll) .ao-offer-card,
    body .alignfull .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-4:not(.ao-display-scroll) .ao-offer-card,
    body .ao-location-aware-offer-list .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-2:not(.ao-display-scroll) .ao-offer-card,
    body .ao-location-aware-offer-list .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-3:not(.ao-display-scroll) .ao-offer-card,
    body .ao-location-aware-offer-list .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-4:not(.ao-display-scroll) .ao-offer-card {
        flex-shrink: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        flex: 0 0 90% !important; /* 90% szerokości = 1 karta + peek 10% następnej */
        width: 90% !important;
        min-width: 280px !important;
        max-width: none !important;
    }

    body .ao-offers-grid.ao-display-scroll,
    body .alignfull .ao-offers-grid.ao-display-scroll,
    body .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-2:not(.ao-display-scroll),
    body .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-3:not(.ao-display-scroll),
    body .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-4:not(.ao-display-scroll),
    body .alignfull .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-2:not(.ao-display-scroll),
    body .alignfull .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-3:not(.ao-display-scroll),
    body .alignfull .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-4:not(.ao-display-scroll),
    body .ao-location-aware-offer-list .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-2:not(.ao-display-scroll),
    body .ao-location-aware-offer-list .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-3:not(.ao-display-scroll),
    body .ao-location-aware-offer-list .ao-offers-grid[data-requested-display-mode="auto"].ao-cols-4:not(.ao-display-scroll) {
        scroll-padding-left: 15px;
        gap: 15px; /* Mniejszy gap na mobile */
    }
}

/* Tablet: 2 karty widoczne */
@media (min-width: 769px) and (max-width: 1024px) {
    body .ao-offers-grid.ao-display-scroll.ao-cols-3 .ao-offer-card,
    body .ao-offers-grid.ao-display-scroll.ao-cols-4 .ao-offer-card,
    body .alignfull .ao-offers-grid.ao-display-scroll.ao-cols-3 .ao-offer-card,
    body .alignfull .ao-offers-grid.ao-display-scroll.ao-cols-4 .ao-offer-card {
        width: 45% !important;
        min-width: 320px;
        max-width: 450px;
    }
}

/* ==========================================================================
   SCROLL INDICATORS (DOTS)
   ========================================================================== */

.ao-scroll-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    padding: 10px 0;
}

.ao-scroll-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ao-scroll-dot:hover {
    background: #bbb;
}

.ao-scroll-dot.active {
    background: var(--ao-primary-color, #0073aa);
    transform: scale(1.2);
}

/* Ukryj dots na desktop gdy wszystkie karty widoczne */
@media (min-width: 1025px) {
    .ao-scroll-indicators.ao-all-visible {
        display: none;
    }
}

/* ==========================================================================
   SCROLL NAVIGATION ARROWS
   ========================================================================== */

.ao-scroll-carousel-wrapper {
    position: relative;
    margin: 0 40px;
}

.ao-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid var(--ao-primary-color, #0073aa);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ao-primary-color, #0073aa);
    transition: all 0.3s ease;
    z-index: 10;
    padding: 0;
    outline: none;
}

.ao-scroll-arrow .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
}

.ao-scroll-arrow:hover {
    background: var(--ao-primary-color, #0073aa);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0, 115, 170, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.ao-scroll-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.ao-scroll-arrow.ao-scroll-prev {
    left: -45px;
}

.ao-scroll-arrow.ao-scroll-next {
    right: -45px;
}

.ao-scroll-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 768px) {
    .ao-scroll-carousel-wrapper {
        margin: 0;
    }

    .ao-scroll-arrow {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .ao-scroll-arrow {
        width: 40px;
        height: 40px;
    }

    .ao-scroll-arrow .dashicons {
        font-size: 22px;
        width: 22px;
        height: 22px;
    }

    .ao-scroll-arrow.ao-scroll-prev {
        left: -35px;
    }

    .ao-scroll-arrow.ao-scroll-next {
        right: -35px;
    }
}

/* ==========================================================================
   CONFIGURATOR SCROLL MODE
   ========================================================================== */

.ao-configurator-container .ao-offers-grid.ao-display-scroll {
    max-width: none;
    margin-left: -5px;
    margin-right: -5px;
    padding-left: 5px;
    padding-right: 5px;
}

.ao-configurator-container .ao-offers-grid.ao-display-scroll .ao-offer-card {
    /* Allow the shared scroll layout formula to determine card width.
     * A hard min-width here creates artificial overflow in configurator
     * (for example 4 offers with 4 columns), which keeps arrows visible.
     */
    min-width: 0;
}