/**
 * KS SOR - Style CSS v2.0
 * Kompletnie przeprojektowany design karty produktu SOR
 *
 * @author    KamikStudio Patryk Kowalski <biuro@kamikstudio.pl>
 * @copyright 2026 KamikStudio
 * @license   Licencja komercyjna
 * @version   2.0.0
 */

/* =============================================
   CSS Variables - Design System
   ============================================= */

:root {
    /* Kolory główne */
    --ks-sor-primary: #16a34a;
    --ks-sor-primary-light: #dcfce7;
    --ks-sor-primary-dark: #15803d;

    /* Kolory statusów */
    --ks-sor-success: #16a34a;
    --ks-sor-success-bg: #dcfce7;
    --ks-sor-success-border: #bbf7d0;

    --ks-sor-warning: #ca8a04;
    --ks-sor-warning-bg: #fef9c3;
    --ks-sor-warning-border: #fde047;

    --ks-sor-danger: #dc2626;
    --ks-sor-danger-bg: #fee2e2;
    --ks-sor-danger-border: #fecaca;

    --ks-sor-neutral: #64748b;
    --ks-sor-neutral-bg: #f1f5f9;
    --ks-sor-neutral-border: #e2e8f0;

    /* Typografia */
    --ks-sor-text-primary: #1e293b;
    --ks-sor-text-secondary: #64748b;
    --ks-sor-text-muted: #94a3b8;

    /* Spacing */
    --ks-sor-spacing-xs: 4px;
    --ks-sor-spacing-sm: 8px;
    --ks-sor-spacing-md: 12px;
    --ks-sor-spacing-lg: 16px;
    --ks-sor-spacing-xl: 20px;

    /* Border radius */
    --ks-sor-radius-sm: 6px;
    --ks-sor-radius-md: 10px;
    --ks-sor-radius-lg: 14px;

    /* Shadows */
    --ks-sor-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ks-sor-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* =============================================
   KS SOR Card - Główna karta produktu
   ============================================= */

.ks-sor-card {
    margin: var(--ks-sor-spacing-lg) 0;
    background: linear-gradient(135deg, var(--ks-sor-primary-light) 0%, #f0fdf4 100%);
    border: 1px solid var(--ks-sor-success-border);
    border-radius: var(--ks-sor-radius-lg);
    overflow: hidden;
    box-shadow: var(--ks-sor-shadow-sm);
}

/* Header */
.ks-sor-card__header {
    display: flex;
    align-items: center;
    gap: var(--ks-sor-spacing-md);
    padding: var(--ks-sor-spacing-md) var(--ks-sor-spacing-lg);
    background: var(--ks-sor-primary);
    color: #fff;
}

.ks-sor-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.ks-sor-card__icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.ks-sor-card__title {
    display: flex;
    align-items: center;
    gap: var(--ks-sor-spacing-sm);
    flex-wrap: wrap;
}

.ks-sor-card__label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ks-sor-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.2);
}

.ks-sor-card__tag--danger {
    background: var(--ks-sor-danger);
    color: #fff;
}

/* Body */
.ks-sor-card__body {
    padding: var(--ks-sor-spacing-lg);
}

/* Footer */
.ks-sor-card__footer {
    padding: var(--ks-sor-spacing-sm) var(--ks-sor-spacing-lg);
    background: rgba(255, 255, 255, 0.5);
    border-top: 1px solid var(--ks-sor-success-border);
}

.ks-sor-card__legal {
    display: inline-flex;
    align-items: center;
    gap: var(--ks-sor-spacing-xs);
    font-size: 11px;
    color: var(--ks-sor-text-muted);
}

.ks-sor-card__legal svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* =============================================
   Alert - Komunikaty (np. fumigant)
   ============================================= */

.ks-sor-alert {
    display: flex;
    gap: var(--ks-sor-spacing-md);
    padding: var(--ks-sor-spacing-md);
    border-radius: var(--ks-sor-radius-md);
    background: #fff;
}

.ks-sor-alert--danger {
    background: var(--ks-sor-danger-bg);
    border: 1px solid var(--ks-sor-danger-border);
}

.ks-sor-alert__icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--ks-sor-danger);
}

.ks-sor-alert__icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.ks-sor-alert__content {
    flex: 1;
}

.ks-sor-alert__content strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-sor-danger);
    margin-bottom: var(--ks-sor-spacing-xs);
}

.ks-sor-alert__content p {
    margin: 0;
    font-size: 13px;
    color: var(--ks-sor-text-secondary);
    line-height: 1.5;
}

/* =============================================
   Requirement - Info o wymaganym certyfikacie
   ============================================= */

.ks-sor-requirement {
    display: flex;
    gap: var(--ks-sor-spacing-md);
    padding: var(--ks-sor-spacing-md);
    background: #fff;
    border-radius: var(--ks-sor-radius-md);
    border: 1px solid var(--ks-sor-neutral-border);
    margin-bottom: var(--ks-sor-spacing-md);
}

.ks-sor-requirement__icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--ks-sor-primary);
}

.ks-sor-requirement__icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.ks-sor-requirement__content {
    flex: 1;
}

.ks-sor-requirement__content strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-sor-text-primary);
    margin-bottom: var(--ks-sor-spacing-xs);
}

.ks-sor-requirement__content p {
    margin: 0;
    font-size: 13px;
    color: var(--ks-sor-text-secondary);
    line-height: 1.5;
}

/* =============================================
   Status - Komunikaty o stanie certyfikatu
   ============================================= */

.ks-sor-status-wrapper {
    margin-top: var(--ks-sor-spacing-sm);
}

.ks-sor-status {
    display: flex;
    align-items: center;
    gap: var(--ks-sor-spacing-md);
    padding: var(--ks-sor-spacing-md);
    border-radius: var(--ks-sor-radius-md);
    background: #fff;
    border: 1px solid var(--ks-sor-neutral-border);
}

.ks-sor-status__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
}

.ks-sor-status__icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.ks-sor-status__content {
    flex: 1;
    min-width: 0;
}

.ks-sor-status__content strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ks-sor-text-primary);
    margin-bottom: 2px;
}

.ks-sor-status__meta {
    display: block;
    font-size: 12px;
    color: var(--ks-sor-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ks-sor-status__action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--ks-sor-spacing-sm) var(--ks-sor-spacing-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--ks-sor-primary);
    text-decoration: none;
    background: var(--ks-sor-primary-light);
    border-radius: var(--ks-sor-radius-sm);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.ks-sor-status__action:hover {
    background: var(--ks-sor-primary);
    color: #fff;
    text-decoration: none;
}

.ks-sor-status__action svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Status - Success (certyfikat ważny) */
.ks-sor-status--success {
    background: var(--ks-sor-success-bg);
    border-color: var(--ks-sor-success-border);
}

.ks-sor-status--success .ks-sor-status__icon {
    background: var(--ks-sor-success);
    color: #fff;
}

.ks-sor-status--success .ks-sor-status__content strong {
    color: var(--ks-sor-success);
}

/* Status - Warning (brak certyfikatu) */
.ks-sor-status--warning {
    background: var(--ks-sor-warning-bg);
    border-color: var(--ks-sor-warning-border);
}

.ks-sor-status--warning .ks-sor-status__icon {
    background: var(--ks-sor-warning);
    color: #fff;
}

.ks-sor-status--warning .ks-sor-status__content strong {
    color: var(--ks-sor-warning);
}

/* Status - Neutral (gość) */
.ks-sor-status--neutral {
    background: var(--ks-sor-neutral-bg);
    border-color: var(--ks-sor-neutral-border);
}

.ks-sor-status--neutral .ks-sor-status__icon {
    background: var(--ks-sor-neutral);
    color: #fff;
}

/* =============================================
   Responsywność - Mobile First
   ============================================= */

@media (max-width: 576px) {
    .ks-sor-card {
        margin: var(--ks-sor-spacing-md) 0;
        border-radius: var(--ks-sor-radius-md);
    }

    .ks-sor-card__header {
        padding: var(--ks-sor-spacing-sm) var(--ks-sor-spacing-md);
    }

    .ks-sor-card__icon {
        width: 28px;
        height: 28px;
    }

    .ks-sor-card__icon svg {
        width: 20px;
        height: 20px;
    }

    .ks-sor-card__label {
        font-size: 13px;
    }

    .ks-sor-card__body {
        padding: var(--ks-sor-spacing-md);
    }

    .ks-sor-status {
        flex-wrap: wrap;
    }

    .ks-sor-status__action {
        width: 100%;
        justify-content: center;
        margin-top: var(--ks-sor-spacing-sm);
    }

    .ks-sor-status__meta {
        white-space: normal;
    }
}

/* =============================================
   Formularz checkout - zachowujemy stare style
   ============================================= */

.ks-sor-container {
    border: 2px solid #ffc107;
    border-radius: 8px;
    margin-bottom: 20px;
}

.ks-sor-container .card-header {
    border-bottom: 2px solid #ffc107;
}

.ks-sor-container .card-header h5 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ks-sor-container .card-header .material-icons {
    color: #28a745;
}

/* Formularz walidacji */
.ks-sor-form .form-control {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ks-sor-form .form-control:focus {
    border-color: var(--ks-sor-primary);
    box-shadow: 0 0 0 0.2rem rgba(22, 163, 74, 0.25);
}

.ks-sor-form .form-control.is-valid {
    border-color: var(--ks-sor-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2316a34a' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

.ks-sor-form .form-control.is-invalid {
    border-color: var(--ks-sor-danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc2626' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc2626' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

/* Lista produktów SOR w checkout */
.ks-sor-products-list {
    background-color: var(--ks-sor-neutral-bg);
    padding: 15px;
    border-radius: var(--ks-sor-radius-sm);
    border-left: 4px solid var(--ks-sor-primary);
}

.ks-sor-products-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ks-sor-products-list ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ks-sor-neutral-border);
}

.ks-sor-products-list ul li:last-child {
    border-bottom: none;
}

.ks-sor-products-list .badge-success {
    background-color: var(--ks-sor-success);
}

.ks-sor-products-list .badge-danger {
    background-color: var(--ks-sor-danger);
    animation: ks-sor-pulse 2s infinite;
}

@keyframes ks-sor-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Ostrzeżenie w koszyku */
.ks-sor-cart-warning {
    background: linear-gradient(135deg, var(--ks-sor-primary-light) 0%, #f0fdf4 100%);
    border: 1px solid var(--ks-sor-success-border);
    border-left: 4px solid var(--ks-sor-primary);
    border-radius: var(--ks-sor-radius-sm);
    padding: var(--ks-sor-spacing-lg);
    margin-top: var(--ks-sor-spacing-lg);
}

.ks-sor-cart-warning .ks-sor-warning-header {
    display: flex;
    align-items: center;
    gap: var(--ks-sor-spacing-sm);
    margin-bottom: var(--ks-sor-spacing-md);
}

.ks-sor-cart-warning .ks-sor-warning-header i {
    color: var(--ks-sor-primary);
    font-size: 24px;
}

.ks-sor-cart-warning h6 {
    color: var(--ks-sor-primary-dark);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.ks-sor-cart-warning .ks-sor-warning-content {
    padding-left: 32px;
}

.ks-sor-cart-warning .ks-sor-warning-text,
.ks-sor-cart-warning .ks-sor-info-text {
    margin: 0 0 var(--ks-sor-spacing-sm) 0;
    font-size: 13px;
    color: var(--ks-sor-text-secondary);
    line-height: 1.5;
}

.ks-sor-cart-warning .ks-sor-certificate-status {
    display: flex;
    align-items: center;
    gap: var(--ks-sor-spacing-sm);
    padding: var(--ks-sor-spacing-sm) var(--ks-sor-spacing-md);
    border-radius: var(--ks-sor-radius-sm);
    font-size: 13px;
    margin-top: var(--ks-sor-spacing-sm);
}

.ks-sor-cart-warning .ks-sor-certificate-status--valid {
    background: var(--ks-sor-success-bg);
    color: var(--ks-sor-success);
}

.ks-sor-cart-warning .ks-sor-certificate-status--missing {
    background: var(--ks-sor-neutral-bg);
    color: var(--ks-sor-text-secondary);
}

.ks-sor-cart-warning .ks-sor-certificate-status i {
    font-size: 18px;
}

/* Fumigant error - blokada sprzedaży */
.ks-sor-fumigant-error {
    display: flex;
    gap: var(--ks-sor-spacing-md);
    padding: var(--ks-sor-spacing-lg);
    margin-top: var(--ks-sor-spacing-md);
    background: var(--ks-sor-danger-bg);
    border: 1px solid var(--ks-sor-danger-border);
    border-left: 4px solid var(--ks-sor-danger);
    border-radius: var(--ks-sor-radius-sm);
}

.ks-sor-fumigant-error__icon {
    flex-shrink: 0;
    color: var(--ks-sor-danger);
}

.ks-sor-fumigant-error__icon i {
    font-size: 28px;
}

.ks-sor-fumigant-error__content strong {
    display: block;
    color: var(--ks-sor-danger);
    font-size: 14px;
    margin-bottom: var(--ks-sor-spacing-xs);
}

.ks-sor-fumigant-error__content p {
    margin: 0;
    color: var(--ks-sor-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* Status walidacji */
#ks-sor-validation-status .alert-success {
    background-color: var(--ks-sor-success-bg);
    border-color: var(--ks-sor-success-border);
    color: var(--ks-sor-success);
}

#ks-sor-validation-status .alert-danger {
    background-color: var(--ks-sor-danger-bg);
    border-color: var(--ks-sor-danger-border);
    color: var(--ks-sor-danger);
}

/* =============================================
   Print styles
   ============================================= */

@media print {
    .ks-sor-card {
        border: 1px solid #000;
        box-shadow: none;
        background: #fff !important;
    }

    .ks-sor-card__header {
        background: #f0f0f0 !important;
        color: #000 !important;
    }

    .ks-sor-status__action {
        display: none;
    }
}

/* =============================================
   TheCheckout Integration
   ============================================= */

/* Formularz SOR w TheCheckout payment block */
#thecheckout-payment #ks-sor-verification {
    margin: 0 0 var(--ks-sor-spacing-lg) 0;
}

/* Stan błędu - podświetl formularz */
#ks-sor-verification.ks-sor-error {
    animation: ks-sor-shake 0.5s ease-in-out;
    border-color: var(--ks-sor-danger) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

@keyframes ks-sor-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Dostosowanie dla TheCheckout mobile layout */
@media (max-width: 767px) {
    #thecheckout-payment #ks-sor-verification {
        margin: 0 -15px var(--ks-sor-spacing-md) -15px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    #thecheckout-payment .ks-sor-container .card-body {
        padding: var(--ks-sor-spacing-md);
    }
}

/* Lepszy wygląd w TheCheckout */
.thecheckout-payment .ks-sor-container {
    border-width: 2px;
}

.thecheckout-payment .ks-sor-container .card-header {
    padding: 12px 16px;
}

.thecheckout-payment .ks-sor-container .card-header h5 {
    font-size: 15px;
    margin: 0;
}

/* Ukryj stopkę w TheCheckout dla oszczędności miejsca */
#thecheckout-payment .ks-sor-container .card-footer {
    padding: 8px 16px;
    font-size: 10px;
}

/* Przycisk usuwania produktów - lepszy styl */
.ks-sor-remove-product {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Badge SOR - kompaktowy */
.ks-sor-products-list .badge {
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 4px;
}