/*
 * 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.
 */

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

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

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

/* Base grid styling */
.ao-offers-grid,
.entry-content .ao-offers-grid,
.site-content .ao-offers-grid,
.ao-location-aware-offer-list .ao-offers-grid {
    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 {
    grid-template-columns: 1fr;
    max-width: 800px;
}

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

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

.ao-offers-grid.ao-cols-4 {
    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,
    .ao-offers-grid.ao-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ao-offers-grid.ao-cols-4,
    .ao-offers-grid.ao-cols-3,
    .ao-offers-grid.ao-cols-2 {
        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 IMAGE
   ========================================================================== */

.ao-offer-image {
    margin: -30px -25px 20px -25px;
    overflow: hidden;
    border-radius: var(--ao-border-radius) var(--ao-border-radius) 0 0;
}

.ao-offer-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: var(--ao-transition);
}

.ao-offer-card:hover .ao-offer-image img {
    transform: scale(1.05);
}

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

.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 {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    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;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Tooltip positioned to the left when near right edge */
.ao-option-tooltip.tooltip-left::before {
    left: auto;
    right: 0;
    transform: translateX(0);
}

.ao-option-tooltip.tooltip-left::after {
    left: auto;
    right: 8px;
    transform: translateX(0);
}

/* Tooltip positioned to the right when near left edge */
.ao-option-tooltip.tooltip-right::before {
    left: 0;
    transform: translateX(0);
}

.ao-option-tooltip.tooltip-right::after {
    left: 8px;
    transform: translateX(0);
}

.ao-option-tooltip::after {
    content: '';
    position: absolute;
    bottom: 118%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}

.ao-option-tooltip:hover::before,
.ao-option-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

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

/* ==========================================================================
   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-offer-secondary-info,
.ao-secondary-info {
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.4;
}

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

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

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

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

.ao-offer-secondary-info strong,
.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);
}

/* Przycisk przekierowania dla trybu katalogu - bez pełnej szerokości */
.ao-catalog-redirect-button {
    display: inline-block;
    width: auto;
    min-width: 200px;
    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;
    text-decoration: none;
    text-align: center;
}

.ao-catalog-redirect-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);
    color: #fff;
    text-decoration: none;
}

.ao-catalog-redirect-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: center;
    padding: 15px 0;
    border-top: 2px solid #dee2e6;
    margin-top: 15px;
}

.ao-total-label {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

.ao-total-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--ao-primary-color);
}

.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.ao-form-field-full-width {
    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);
}

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

#ao-order-summary-form {
    max-width: var(--ao-order-form-max-width, 1000px);
    padding: var(--ao-order-form-padding, 40px);
    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-color: var(--ao-order-form-button-bg-color, var(--ao-primary-color));
}

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

/* ==========================================================================
   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); }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.ao-text-center {
    text-align: center;
}

.ao-text-left {
    text-align: left;
}

.ao-text-right {
    text-align: right;
}

.ao-mb-0 { margin-bottom: 0; }
.ao-mb-1 { margin-bottom: 10px; }
.ao-mb-2 { margin-bottom: 20px; }
.ao-mb-3 { margin-bottom: 30px; }

.ao-mt-0 { margin-top: 0; }
.ao-mt-1 { margin-top: 10px; }
.ao-mt-2 { margin-top: 20px; }
.ao-mt-3 { margin-top: 30px; }

.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;
}

@keyframes ao-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ao-scale-in {
    animation: ao-scale-in 0.3s ease-out;
}

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

@media print {
    .ao-select-offer-button,
    .ao-catalog-button,
    .ao-catalog-redirect-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;
}

.ao-location-mode-wrapper {
    text-align: center;
    padding: 20px;
    border: 2px dashed #ddd;
    border-radius: var(--ao-border-radius, 8px);
    margin: 20px 0;
    background-color: #f9f9f9;
}

.ao-location-prompt h3 {
    color: var(--ao-primary-color, #0073aa);
    margin-bottom: 10px;
    font-size: 1.5em;
}

.ao-location-prompt p {
    color: #666;
    margin-bottom: 20px;
    font-size: 1em;
}

.ao-location-fallback {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.ao-show-all-offers {
    background-color: var(--ao-primary-color, #0073aa);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--ao-border-radius, 8px);
    cursor: pointer;
    font-size: 14px;
    transition: var(--ao-transition);
}

.ao-show-all-offers:hover {
    background-color: var(--ao-secondary-color, #005177);
    transform: translateY(-2px);
}

.ao-location-info {
    background-color: #e7f3ff;
    border: 1px solid #b3d9ff;
    border-radius: var(--ao-border-radius, 8px);
    padding: 30px 20px; /* Increased padding for more space around text */
    margin-bottom: 40px; /* Increased margin to separate from offers */
}

.ao-location-info h4 {
    color: var(--ao-primary-color, #0073aa);
    margin-bottom: 10px;
}

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

.ao-price-hidden-hint {
    display: block;
    font-size: 12px;
    color: #6c757d;
}

/* 
 * Address Search Style Proxy
 * Ten plik TYLKO przekierowuje style z offers-style.css
 * ✅ NIE modyfikuje istniejących styli
 * ✅ NIE dubluje kodu  
 * ✅ Offers-style.css pozostaje nietknięte
 * ✅ Pełna szerokość dla ofert (RWD)
 */

/* Address search container styling with increased specificity */
body .ao-address-search-wrapper .ao-offers-wrapper {
    max-width: none;
    width: 100%;
    margin: 0 auto;
}

/* Increased specificity for address search integration */
body .ao-address-search-wrapper.ao-has-offers {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

body .ao-address-search-wrapper .ao-offers-wrapper .ao-offers-grid {
    width: 100%;
}

body .ao-address-search-wrapper.ao-has-offers .ao-search-form-section {
    max-width: 800px;
    margin: 0 auto 30px auto;
}

body .ao-address-search-wrapper.ao-has-offers .ao-offers-result-container,
body .ao-address-search-wrapper.ao-has-offers .ao-offers-container,
body .ao-address-search-wrapper.ao-has-offers .ao-offers-wrapper {
    width: 100%;
}

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 (No !important) */
body .alignfull .ao-offers-grid {
    display: grid;
    gap: 20px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 3. Column-specific rules with width constraints */
body .alignfull .ao-offers-grid.ao-cols-1 {
    grid-template-columns: 1fr;
    max-width: 650px;
}

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

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

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

/* 4. Responsive overrides */
@media (max-width: 1024px) {
    body .alignfull .ao-offers-grid.ao-cols-4,
    body .alignfull .ao-offers-grid.ao-cols-3 {
        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 */
}

/* 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,
    body .alignfull .ao-offers-grid.ao-cols-2,
    body .alignfull .ao-offers-grid.ao-cols-3,
    body .alignfull .ao-offers-grid.ao-cols-4 {
        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;
}