/*
 * Shipping Groups for WooCommerce — style frontu
 * Autor: Jakub Skorupa — https://skorupa.net.pl
 *
 * Nadpisz dowolną regułę przez Additional CSS w Customizerze.
 * Dostępne klasy:
 *   .sg-accordion              — cały blok grupy
 *   .sg-accordion.is-open      — akordeon otwarty
 *   .sg-accordion-header       — nagłówek (klikalny)
 *   .sg-accordion-title        — nazwa grupy
 *   .sg-accordion-selected     — wybrana metoda w nagłówku
 *   .sg-accordion-chevron      — strzałka
 *   .sg-accordion-body         — lista metod
 *   .sg-accordion-body > li    — pojedyncza metoda
 */

/* Delikatne fade-in po zbudowaniu akordeonów — bez ryzyka zablokowania */
ul.woocommerce-shipping-methods {
    transition: opacity 0.15s ease;
}
ul.woocommerce-shipping-methods.sg-building {
    opacity: 0;
}
ul.woocommerce-shipping-methods.sg-ready {
    opacity: 1;
}

/* ── Akordeon ────────────────────────────────────────────────── */
.sg-accordion {
    list-style: none;
    margin: 0 0 8px;
    border-radius: 8px;
    border: 1px solid #e2e2e2;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.sg-accordion.is-open {
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    border-color: #c8c8c8;
}

/* ── Nagłówek ────────────────────────────────────────────────── */
.sg-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #fafafa;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
    text-align: left;
}

.sg-accordion-header:hover {
    background: #f2f2f2;
}

.sg-accordion.is-open .sg-accordion-header {
    background: #f5f5f5;
    border-bottom: 1px solid #e2e2e2;
}

.sg-accordion-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #999;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.sg-accordion.is-open .sg-accordion-chevron {
    transform: rotate(180deg);
}

/* ── Ciało ───────────────────────────────────────────────────── */
.sg-accordion-body {
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
}

.sg-accordion-body > li {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s;
}

.sg-accordion-body > li:last-child {
    border-bottom: none;
}

.sg-accordion-body > li:hover {
    background: #fafafa;
}

.sg-accordion-body > li:has(input[type="radio"]:checked) {
    background: #f0f7ff;
}

/* Label zajmuje całą dostępną szerokość — popycha radio do prawej */
.sg-accordion-body label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: #222;
    line-height: 1.4;
}

/* Flexible Shipping owija radio w <span class="radiobutton"> —
   przesuwamy go na koniec wiersza przez order                   */
.sg-accordion-body span.radiobutton {
    flex-shrink: 0;
    order: 99;
    margin-left: 12px;
    display: flex;
    align-items: center;
}

.sg-accordion-body input[type="radio"] {
    flex-shrink: 0;
    accent-color: #2271b1;
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

/* Cena wewnątrz label */
.sg-accordion-body .woocommerce-Price-amount,
.sg-accordion-body .amount {
    font-weight: 500;
    color: #333;
}

/* ── Zapobieganie overflow na wszystkich urządzeniach ───────── */

/* title-wrap musi mieć min-width:0 żeby flex nie wypchnął go poza kontener */
.sg-accordion-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.sg-accordion-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sg-accordion-selected {
    font-size: 12px;
    color: #2271b1;
    font-weight: 500;
    /* Pozwól na zawijanie — na mobile nazwy mogą być długie */
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

/* ── Mobile — od brzegu do brzegu ───────────────────────────── */
@media (max-width: 768px) {

    /* Rozciągnij listę metod na pełną szerokość ekranu */
    ul.woocommerce-shipping-methods {
        margin-left:  calc(-1 * var(--sg-mobile-bleed, 20px));
        margin-right: calc(-1 * var(--sg-mobile-bleed, 20px));
        padding: 0;
    }

    /* Akordeony bez zaokrągleń i marginesów bocznych */
    .sg-accordion {
        border-radius: 0;
        border-left:   none;
        border-right:  none;
        margin: 0 0 -1px;
        /* Kluczowe: zapobiega wychodzeniu contentu poza szerokość ekranu */
        max-width: 100vw;
        overflow: hidden;
    }

    .sg-accordion.is-open {
        box-shadow: none;
    }

    /* Nagłówek — więcej miejsca na dotyk, chevron nie może się kurczyć */
    .sg-accordion-header {
        padding: 14px 16px;
        gap: 10px;
        align-items: flex-start; /* gdy selected się zawija, wyrównaj do góry */
    }

    .sg-accordion-chevron {
        flex-shrink: 0;
        margin-top: 2px; /* optyczne wyrównanie z pierwszą linią tytułu */
    }

    /* Tytuł grupy — jeden wiersz z ellipsis */
    .sg-accordion-title {
        font-size: 15px;
    }

    /* Wybrana metoda — może się zawijać, nie obcinaj */
    .sg-accordion-selected {
        font-size: 12px;
        white-space: normal;
        word-break: break-word;
    }

    /* Wiersze metod — większy obszar dotyku */
    .sg-accordion-body > li {
        padding: 13px 16px;
        /* min-width: 0 żeby flex nie psuł szerokości */
        min-width: 0;
        overflow: hidden;
    }

    /* Label — zawijaj długie nazwy metod */
    .sg-accordion-body label {
        font-size: 14px;
        white-space: normal;
        word-break: break-word;
        line-height: 1.4;
        min-width: 0;
    }

    /* Radio — większy obszar dotyku */
    .sg-accordion-body input[type="radio"] {
        width: 20px;
        height: 20px;
    }

    .sg-accordion-body span.radiobutton {
        margin-left: 12px;
        flex-shrink: 0;
    }

    /* ── Tabela podsumowania zamówienia ─────────────────────── */

    /* Zamień tabelę na układ blokowy — każda komórka na pełną szerokość */
    .woocommerce-checkout-review-order-table,
    table.shop_table.woocommerce-checkout-review-order-table {
        width:    100%;
        border:   none;
        font-size: 13px;
    }

    /* Ukryj nagłówek tabeli — etykiety pokażemy przez data-title */
    .woocommerce-checkout-review-order-table thead {
        display: none;
    }

    /* Każdy wiersz jako blok */
    .woocommerce-checkout-review-order-table tbody tr,
    .woocommerce-checkout-review-order-table tfoot tr {
        display:       block;
        border-bottom: 1px solid #f0f0f0;
        padding:       8px 0;
    }

    .woocommerce-checkout-review-order-table tbody tr:last-child,
    .woocommerce-checkout-review-order-table tfoot tr:last-child {
        border-bottom: none;
    }

    /* th i td na pełną szerokość, obok siebie jako flex */
    .woocommerce-checkout-review-order-table tbody tr td,
    .woocommerce-checkout-review-order-table tbody tr th,
    .woocommerce-checkout-review-order-table tfoot tr td,
    .woocommerce-checkout-review-order-table tfoot tr th {
        display:    block;
        width:      100%;
        padding:    4px 0;
        border:     none;
        text-align: left;
        word-break: break-word;
    }

    /* Wiersz produktu — nazwa i cena obok siebie */
    .woocommerce-checkout-review-order-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px;
    }

    .woocommerce-checkout-review-order-table .product-name {
        flex:      1 1 60%;
        min-width: 0;
        word-break: break-word;
        white-space: normal;
        font-weight: 500;
    }

    .woocommerce-checkout-review-order-table .product-total {
        flex:       0 0 auto;
        text-align: right;
        white-space: nowrap;
        font-weight: 500;
    }

    /* Sekcja wysyłki w tfoot — etykieta nad akordeonami */
    .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals th,
    .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals td {
        display:    block;
        width:      100%;
        text-align: left;
        padding:    6px 0;
    }

    .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals th {
        font-weight: 600;
        font-size:   13px;
        padding-bottom: 4px;
    }

    /* Wiersz sumy — etykieta i kwota obok siebie */
    .woocommerce-checkout-review-order-table tfoot tr {
        display:     block;
        align-items: baseline;
        justify-content: space-between;
        padding:     10px 0;
    }

    .woocommerce-checkout-review-order-table tfoot .order-total th,
    .woocommerce-checkout-review-order-table tfoot .order-total td {
        flex:       0 0 auto;
        width:      auto;
        font-size:  15px;
        font-weight: 600;
        padding:    0;
    }

    .woocommerce-checkout-review-order {
        overflow-x: hidden;
    }

    .woocommerce-checkout-review-order-table .product-name img {
        max-width:      44px;
        height:         auto;
        margin-right:   8px;
        border-radius:  3px;
        vertical-align: middle;
    }
}

/* Jeśli motyw ma inny padding — ustaw zmienną w motywie:
   :root { --sg-mobile-bleed: 16px; }                       */