/**
 * MOBILE CONFIGURATOR FIXES
 * Address & Offers Plugin - Responsive Improvements
 * 
 * Ten plik zawiera TYLKO mobile fixes dla konfiguratora
 * NIE modyfikuje desktop layouts
 * 
 * Priorytet: Mobile First (320px+)
 * Breakpoints: 480px, 768px, 1024px
 * 
 * @package AddressOffers
 * @version 1.0.0
 * @since 2025-11-01
 */

/* ==========================================================================
   MOBILE GLOBAL - Wszystkie urządzenia < 768px
   ========================================================================== */

@media (max-width: 768px) {
    
    /* Karty ofert - full width na mobile */
    .ao-offer-card,
    .ao-configurator-container .ao-offer-card {
        padding: 20px 15px !important;
        margin-bottom: 15px;
    }
    
    /* Tytuł oferty - mniejsza czcionka */
    .ao-offer-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    
    /* Opis oferty - lepsze zawijanie tekstu */
    .ao-offer-description {
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding: 12px !important;
        margin-bottom: 15px !important;
    }
    
    /* Ceny - większe i czytelniejsze na mobile */
    .ao-offer-current-total {
        font-size: 28px !important;
        margin-bottom: 8px !important;
    }
    
    .ao-price-label {
        font-size: 12px !important;
    }
    
    .group-title {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }
    
    .ao-option-label {
        padding: 10px 12px !important;
        min-height: 44px !important; /* Touch target */
        font-size: 14px !important;
    }
    
    /* Progress bar - scroll horizontal */
    .ao-configurator-progress {
        padding: 0 10px !important;
        margin-bottom: 25px !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    .progress-step {
        min-width: 70px !important;
        padding: 8px !important;
        flex-shrink: 0;
    }
    
    .step-number {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }
    
    .step-label {
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        word-break: break-word;
    }
    
    /* Step header - mniejsze nagłówki */
    .step-header {
        margin-bottom: 25px !important;
        padding: 0 10px !important;
    }
    
    .step-title {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }
    
    .step-description {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* Cart summary - full width */
    .ao-configurator-step.summary-step {
        padding: 20px 15px !important;
    }
    
    .cart-item {
        padding: 15px !important;
        margin-bottom: 12px !important;
    }
    
    .item-header {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .cart-item .item-title {
        font-size: 16px !important;
    }
    
    .cart-item .item-price {
        font-size: 18px !important;
        grid-row: auto !important;
        text-align: left !important;
        margin-top: 8px !important;
    }
    
    .cart-item .item-category {
        font-size: 11px !important;
    }
    
    /* Selected options - lepsze formatowanie */
    .selected-options li {
        font-size: 13px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    
    /* Summary total */
    .summary-total {
        padding: 20px 15px !important;
    }
    
    .total-line {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
    
    .total-label {
        font-size: 16px !important;
    }
    
    .total-amount {
        font-size: 26px !important;
    }
    
    /* Form fields - touch friendly */
    .ao-form-field {
        margin-bottom: 16px !important;
    }
    
    .ao-form-field label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }
    
    .ao-input,
    .ao-textarea {
        padding: 14px 16px !important;
        font-size: 16px !important; /* Zapobiega zoom na iOS */
        min-height: 48px !important;
    }
    
    .ao-textarea {
        min-height: 120px !important;
    }
    
    /* Form row - single column na mobile */
    /* ULTRA HIGH SPECIFICITY - musi wygrać z frontend-main.css */
    body .ao-form-row,
    body .ao-form-row.ao-mobile-stack,
    body div.ao-form-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    /* Checkbox labels - lepsze zawijanie */
    .ao-checkbox-label {
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding: 8px 0 !important;
    }
    
    .ao-checkbox-input {
        width: 20px !important;
        height: 20px !important;
        margin-right: 10px !important;
        margin-top: 0 !important;
        flex-shrink: 0;
    }
    
    /* Modal - full width na mobile */
    .ao-modal .modal-content {
        width: 95% !important;
        max-width: 95vw !important;
        margin: 10px !important;
        max-height: calc(100vh - 40px) !important;
    }
    
    .modal-header {
        padding: 16px !important;
    }
    
    .modal-header h3 {
        font-size: 18px !important;
    }
    
    #ao-final-order-form {
        padding: 12px 10px !important;  /* Reduced from 16px */
    }

    /* Note: #ao-order-summary-form mobile styles are now in frontend-main.css (source) */

    /* Order summary - compact layout */
    .ao-order-summary,
    .ao-summary-section {
        /* padding: 12px 10px !important; */
        margin-bottom: 15px !important;
    }

    .ao-order-summary h2,
    .ao-order-summary h3 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    /* Offer card in order form - compact */
    #ao-final-order-form .ao-offer-card,
    .ao-order-summary .ao-offer-card {
        /* padding: 12px !important; */
        margin-bottom: 12px !important;
    }

    #ao-final-order-form .ao-offer-title {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    /* Form fields - compact spacing */
    .ao-form-field,
    .ao-field-group {
        margin-bottom: 12px !important;  /* Reduced from 16px */
    }

    .ao-form-field label,
    .form-group label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    .ao-input,
    .ao-textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        padding: 10px 12px !important;  /* Reduced from 14px 16px */
        font-size: 15px !important;
    }

    /* Price display - compact */
    .ao-offer-current-total,
    .ao-total-amount,
    .price-amount {
        font-size: 18px !important;  /* Reduced from 28px → 22px → 18px for smallest devices */
        margin-bottom: 6px !important;
    }

    .ao-price-label {
        font-size: 11px !important;
    }

    /* Checkbox/Terms - compact */
    .ao-checkbox-row,
    .ao-terms-row,
    .form-checkbox {
        margin: 8px 0 !important;
        padding: 6px 0 !important;
    }

    .ao-checkbox-label {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    /* Form actions - stack vertical */
    .form-actions {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .btn-secondary,
    .btn-primary {
        width: 100% !important;
        min-height: 44px !important;
        padding: 12px 20px !important;
    }
    
    /* Selected summary - compact */
    .selected-summary {
        padding: 15px !important;
        margin-top: 15px !important;
    }
    
    .summary-intro {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
    
    .summary-item {
        padding: 10px 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    
    .item-category {
        margin-right: 0 !important;
        margin-bottom: 4px !important;
    }
    
    .item-title {
        font-size: 14px !important;
        margin: 0 !important;
    }
    
    .item-price {
        font-size: 16px !important;
        margin: 4px 0 0 0 !important;
    }

    .item-modify {
        align-self: flex-end !important;
        margin-top: 8px !important;
    }

    /* Selected options - fix font size and layout */
    .ao-selected-options li {
        font-size: 13px !important;
        padding: 5px 0 !important;
        line-height: 1.4 !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .ao-selected-options .item-price,
    .ao-selected-options .option-price {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-left: auto !important;
    }
    
    /* Notifications - full width */
    .ao-notification {
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
        transform: translateY(-150px) !important;
    }
    
    .ao-notification.show {
        transform: translateY(0) !important;
    }
    
    .ao-notification.hide {
        transform: translateY(-150px) !important;
    }
    
    /* Info blocks */
    .ao-info-field,
    .form-info {
        padding: 12px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    
    /* Price breakdown - compact */
    .price-breakdown {
        padding: 10px !important;
        font-size: 12px !important;
    }
    
    .breakdown-item {
        font-size: 12px !important;
        gap: 8px !important;
    }
}

/* ==========================================================================
   EXTRA SMALL DEVICES - Bardzo małe ekrany < 480px
   ========================================================================== */

@media (max-width: 480px) {
    
    /* Główny kontener - minimal padding */
    .ao-configurator-container {
        padding: 10px 5px !important;
    }
    
    /* Karty - compact mode */
    .ao-offer-card {
        padding: 15px 12px !important;
    }
    
    /* Tytuły - mniejsze */
    .ao-offer-title {
        font-size: 18px !important;
    }
    
    .step-title {
        font-size: 20px !important;
    }
    
    .step-description {
        font-size: 13px !important;
    }
    
    /* Progress steps - mini mode */
    .progress-step {
        min-width: 60px !important;
        padding: 6px !important;
    }
    
    .step-number {
        width: 26px !important;
        height: 26px !important;
        font-size: 12px !important;
    }
    
    .step-label {
        font-size: 9px !important;
    }
    
    /* Ceny - responsive */
    .ao-offer-current-total {
        font-size: 24px !important;
    }
    
    .total-amount {
        font-size: 24px !important;
    }
    
    /* Przyciski - mniejsze ale nadal touch-friendly */
    .ao-select-offer-button,
    .ao-select-offer-btn {
        padding: 14px 16px !important;
        font-size: 14px !important;
    }
    
    /* Opcje - compact */
    .ao-option-label {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    
    .group-title {
        font-size: 14px !important;
    }
    
    /* Modal - ultra compact */
    .modal-header h3 {
        font-size: 16px !important;
    }
    
    .modal-content {
        width: 98% !important;
        margin: 5px !important;
    }
    
    /* Form - minimal spacing */
    #ao-final-order-form {
        padding: 12px !important;
    }
    
    .form-group {
        margin-bottom: 14px !important;
    }
    
    .ao-input,
    .ao-textarea {
        padding: 12px 14px !important;
    }
    
    /* Cart items - compact */
    .cart-item {
        padding: 12px !important;
    }
    
    .cart-item .item-title {
        font-size: 15px !important;
    }
    
    .cart-item .item-price {
        font-size: 16px !important;
    }
    
    /* Selected options - mini text */
    .selected-options li {
        font-size: 12px !important;
    }
}

/* ==========================================================================
   LANDSCAPE MOBILE - Orientacja pozioma (maks. 768px wysokość)
   ========================================================================== */

@media (max-height: 768px) and (orientation: landscape) {
    
    /* Modal - zmniejsz wysokość */
    .ao-modal .modal-content {
        max-height: calc(100vh - 20px) !important;
        margin: 10px auto !important;
    }
    
    /* Progress bar - mniejszy */
    .ao-configurator-progress {
        margin-bottom: 15px !important;
    }
    
    .step-number {
        width: 28px !important;
        height: 28px !important;
        margin-bottom: 4px !important;
    }
    
    /* Step header - compact */
    .step-header {
        margin-bottom: 20px !important;
    }
    
    .step-title {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
    
    .step-description {
        font-size: 13px !important;
    }
    
    /* Karty - mniejszy padding */
    .ao-offer-card {
        padding: 15px !important;
    }
    
    /* Summary - compact */
    .ao-configurator-step.summary-step {
        padding: 15px !important;
    }
    
    .cart-item {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
}

/* ==========================================================================
   TABLET PORTRAIT - Średnie ekrany 481px - 768px
   ========================================================================== */

@media (min-width: 481px) and (max-width: 768px) {
    
    /* Grid - 2 kolumny dla tabletów jeśli karty są małe */
    .ao-offers-grid.ao-cols-4,
    .ao-offers-grid.ao-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    /* Kontener - więcej padding */
    .ao-configurator-container {
        padding: 20px 15px !important;
    }
    
    /* Progress - więcej miejsca */
    .progress-step {
        min-width: 85px !important;
    }
    
    .step-number {
        width: 34px !important;
        height: 34px !important;
    }
    
    .step-label {
        font-size: 11px !important;
    }
    
    /* Modal - szerszy */
    .ao-modal .modal-content {
        width: 85% !important;
        max-width: 600px !important;
    }
}

/* ==========================================================================
   TOUCH DEVICE OPTIMIZATIONS
   ========================================================================== */

.ao-touch-device .progress-step,
.ao-touch-device .ao-option-label,
.ao-touch-device .summary-item {
    min-height: 44px !important;
}

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

.ao-touch-device .btn-modify,
.ao-touch-device .btn-remove,
.ao-touch-device .item-modify {
    min-height: 40px !important;
    padding: 10px 14px !important;
}

/* ==========================================================================
   iOS SPECIFIC FIXES
   ========================================================================== */

/* Zapobiega zoom przy focus na input (iOS) */
@supports (-webkit-touch-callout: none) {
    .ao-input,
    .ao-textarea,
    .ao-form-field input,
    .ao-form-field textarea {
        font-size: 16px !important;
    }
}

/* Safe areas dla iPhone z notch */
@supports (padding: max(0px)) {
    .ao-configurator-container {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    }
    
    .ao-notification {
        top: max(20px, env(safe-area-inset-top)) !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS - Mobile
   ========================================================================== */

@media (max-width: 768px) {
    
    /* Focus states - większe outline */
    .ao-input:focus,
    .ao-textarea:focus,
    .ao-option-label:focus-within {
        outline: 3px solid var(--ao-primary-color, #0073aa) !important;
        outline-offset: 2px !important;
    }
    
    /* Linki - większy touch target (tylko w kontekście konfiguratora) */
    .ao-configurator-container a,
    .ao-offer-card a,
    .ao-form-field a,
    .ao-option-label a,
    .cart-item a,
    .summary-item a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center;
    }

    /* Wyjątki - elementy które NIE powinny dostawać min-height */
    .skynet-btn-navbar,
    .skynet-toggle-navbar-widget a,
    .uk-navbar a:not(.ao-configurator-container a) {
        min-height: auto !important;
    }
    
    /* Checkbox i radio - większe */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px !important;
        min-height: 20px !important;
        margin: 0 10px 0 0 !important;
    }
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS - Mobile
   ========================================================================== */

@media (max-width: 768px) {
    
    /* Wyłącz ciężkie animacje na słabszych urządzeniach */
    @media (prefers-reduced-motion: reduce) {
        .ao-offer-card,
        .progress-step,
        .ao-select-offer-btn,
        .summary-item,
        .cart-item {
            animation: none !important;
            transition: none !important;
        }
    }
    
    /* Zmniejsz shadow blur na mobile */
    .ao-offer-card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    }
    
    .ao-offer-card:hover,
    .ao-offer-card.selected {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    }
}

/* ==========================================================================
   DEBUG HELPERS (usuń w produkcji)
   ========================================================================== */

/* Uncomment to visualize breakpoints */
/*
body::before {
    content: 'Mobile < 480px';
    position: fixed;
    bottom: 0;
    left: 0;
    background: red;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    z-index: 99999;
}

@media (min-width: 481px) {
    body::before {
        content: 'Tablet 481-768px';
        background: orange;
    }
}

@media (min-width: 769px) {
    body::before {
        content: 'Desktop > 768px';
        background: green;
    }
}
*/