/* PP Shipping Estimate – widget na stronie produktu */

/* The pair of cards: delivery on top, parcel below.
   `align-items: stretch` with a shrink-to-fit width is the whole point - the stack is as wide as
   the widest row of BOTH cards and each card fills it, so two boxes of different content end up
   the same width. Sized individually they were ragged; stretched across the column they looked
   like banners. */
.ppse-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 10px 0;
    max-width: 100%;
}

/* Cards inside the stack own no outer spacing: the gap above decides the distance, so the two are
   always exactly as far apart as each other. */
.ppse-stack > .ppse-shipping-estimate {
    margin: 0;
}

.ppse-shipping-estimate {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
    padding: 10px 14px;
    background: #f5f9ff;
    border: 1px solid #d0e4f7;
    border-radius: 6px;
    font-size: 0.92rem;
    color: #2c3e50;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    max-width: 100%;
    box-sizing: border-box;
}

.ppse-shipping-estimate:hover {
    background: #eef6ff;
    border-color: #a8d0f5;
    transform: translateY(-1px);
}

.ppse-row {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    box-sizing: border-box;
}

.ppse-row--date {
    color: #555;
}

.ppse-icon {
    display: flex;
    align-items: center;
    color: #2980b9;
    flex-shrink: 0;
}

.ppse-label {
    font-weight: 500;
    color: #555;
    white-space: nowrap;
}

.ppse-price {
    font-weight: 700;
    color: #1a6fb5;
    transition: all 0.3s ease;
}

/* Every "answer" in this block sits on the right edge, whatever its row. */
.ppse-value {
    margin-left: auto;
    padding-left: 12px;
    text-align: right;
}

.ppse-delivery-date {
    color: #232323;
}

.ppse-delivery-date strong {
    font-weight: 600;
}

/* Separator między wierszami */
.ppse-row--date {
    border-top: 1px solid #e3eef8;
    padding-top: 6px;
    margin-top: 1px;
}

/* ------------------------------------------------------------------ parcel card
   Rendered by `packingshipping` (views/templates/hook/product_fits_rows.tpl) as the second card of
   the stack. Its frame, palette and spacing come from .ppse-shipping-estimate above - the styles
   live here, with the rest of the widget, so one place decides how both cards look.

   Hover is the exception, and on purpose: whether that card reacts to a click depends on whether
   anything actually fits next to the product, which only `packingshipping` knows. It marks the card
   with .ppse-clickable and its own stylesheet carries both states, so the look and the behaviour
   are decided in the same place and cannot disagree. Left alone here, a clickable parcel card gets
   the hover of the delivery card above - which is exactly what it should look like. */

.ppse-row--parcel .ppse-value {
    font-weight: 700;
    color: #1a6fb5;
}

/* Same size as the rest of the block. It used to be the smaller "note" size, which made the
   invitation read as a footnote next to the two rows above it. */
.ppse-row--parcel-note {
    font-size: 0.92rem;
    color: #555;
    border-top: 1px solid #e3eef8;
    padding-top: 6px;
    margin-top: 1px;
}

/* The one line allowed to wrap: it is a sentence, not a label. */
.ppse-label--note {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
}

/* The "what else fits" invitation.
   Written to read as one more row of this block, not as a link dropped into it: same font size as
   the labels around it, same weight as a value, no dotted underline. The whole card is clickable
   anyway (front-packing.js), so the underline was carrying no information - it only made the row
   look like it belonged to a different design. */
.ppse-parcel-link {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1a6fb5;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ppse-parcel-link:hover,
.ppse-shipping-estimate--parcel:hover .ppse-parcel-link {
    color: #14588f;
    text-decoration: underline;
    text-underline-offset: 2px;
}



.ppse-parcel-link[hidden] {
    display: none;
}

.ppse-row--parcel-note[hidden] {
    display: none;
}

/* The "nothing fits, and here is why" line. Rendered by packingshipping only when a back office
   session is open in the same browser, and marked so it cannot be mistaken for shop copy. */
.ppse-parcel-staff {
    flex: 1 1 100%;
    padding: 4px 7px;
    border: 1px dashed #e4cf9a;
    border-radius: 4px;
    background: #fff8e6;
    color: #7a6122;
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Animacja przy aktualizacji ceny */
.ppse-price-updating {
    opacity: 0.4;
}

@keyframes ppseFlash {
    0%   { color: #27ae60; }
    100% { color: #1a6fb5; }
}

.ppse-price-updated {
    animation: ppseFlash 0.4s ease;
}

.ppse-shipping-estimate.ppse-hidden {
    display: none;
}

/* Responsywność – etykiety desktop/mobile */
.ppse-label--mobile {
    display: none;
}

@media (max-width: 767px) {
    .ppse-label--desktop {
        display: none;
    }
    .ppse-label--mobile {
        display: inline;
    }
    .ppse-delivery-date {
        white-space: nowrap;
    }
    .ppse-row {
        flex-wrap: wrap;
    }
    /* Date row stays on one clean line on mobile devices */
    .ppse-row--date {
        flex-wrap: nowrap;
        gap: 4px;
    }
    .ppse-row--date .ppse-value {
        padding-left: 6px;
    }
    .ppse-row--date .ppse-icon {
        flex-shrink: 0;
    }
    .ppse-row--date .ppse-label {
        flex-shrink: 0;
    }
    .ppse-row--date .ppse-delivery-date {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 0.82rem;
    }
    /* On a phone the column is the screen: both cards take all of it. */
    .ppse-stack {
        display: flex;
        width: 100%;
        gap: 6px;
    }
    .ppse-shipping-estimate {
        padding: 9px 11px;
        font-size: 0.88rem;
    }
    /* The sentence rows are two or three lines here, so the icon belongs at the top of the
       text, not centred against the middle of the paragraph. */
    .ppse-row--parcel-note {
        font-size: 0.82rem;
        align-items: flex-start;
    }
    .ppse-row--parcel-note .ppse-icon {
        margin-top: 2px;
    }
    .ppse-parcel-link {
        font-size: 0.82rem;
    }
}

@media (max-width: 380px) {
    .ppse-shipping-estimate {
        padding: 8px 9px;
    }
    .ppse-row--date {
        gap: 3px;
    }
    .ppse-row--date .ppse-value {
        padding-left: 4px;
    }
    .ppse-row--date .ppse-delivery-date {
        font-size: 0.77rem;
    }
    .ppse-row--price {
        font-size: 0.85rem;
    }
}

/* Modal shipping options */
.ppse-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.ppse-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.ppse-modal-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ppse-modal-overlay.active .ppse-modal-container {
    transform: scale(1);
}
.ppse-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f2f5;
    background: #fafbfc;
}
.ppse-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #2c3e50;
    font-weight: 600;
}
.ppse-modal-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: #95a5a6;
    transition: color 0.2s;
    line-height: 1;
    padding: 0;
}
.ppse-modal-close:hover {
    color: #2c3e50;
}
.ppse-modal-body {
    padding: 20px;
    overflow-y: auto;
    font-size: 0.95rem;
    max-height: calc(80vh - 60px);
}
.ppse-modal-qty-note {
    margin: 0 0 12px;
    font-size: 12px;
    color: #7f8c8d;
}

.ppse-modal-qty-note strong {
    color: #2c3e50;
}

.ppse-carrier-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ppse-carrier-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border: 1px solid #eef2f5;
    border-radius: 8px;
    background: #fcfdfe;
    transition: all 0.2s ease;
}
.ppse-carrier-item:hover {
    border-color: #d5e3ef;
    background: #f5f9fc;
}
.ppse-carrier-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}
.ppse-carrier-name {
    font-weight: 600;
    color: #2c3e50;
}
.ppse-carrier-time {
    font-size: 0.8rem;
    color: #7f8c8d;
}
.ppse-carrier-price {
    font-weight: 700;
    color: #1a6fb5;
    font-size: 1.05rem;
}
.ppse-carrier-item.is-cheapest {
    border-color: #a8d0f5;
    background: #f0f7ff;
}
.ppse-cheapest-badge {
    font-size: 0.7rem;
    font-weight: 500;
    background: #e1f0ff;
    color: #1a6fb5;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    display: inline-block;
    vertical-align: middle;
}
/* How many parcels this quantity ships in (from packingshipping). Colours are stated
   outright, never inherited - a theme that paints this area white would otherwise leave
   the text invisible until it is selected. */
.ppse-carrier-parcels {
    font-size: 0.78rem;
    font-weight: 500;
    color: #2980b9;
    background: #eef6fd;
    border: 1px solid #d7e9f8;
    border-radius: 4px;
    padding: 1px 6px;
    display: inline-block;
    align-self: flex-start;
}
.ppse-carrier-parcels::before {
    content: "\01F4E6";
    margin-right: 4px;
    font-size: 0.8rem;
}
/* The carrier record behind the row, for staff only (see estimate.php). Deliberately plain and
   dimmed: it is a note for whoever maintains the carriers, not a piece of the shop's copy, and
   it must never compete with the name next to it. */
.ppse-carrier-staff {
    margin-left: 6px;
    font-size: 0.7rem;
    font-weight: 400;
    color: #9aa3ad;
    vertical-align: middle;
}
.ppse-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    gap: 12px;
}
.ppse-modal-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #eef2f5;
    border-top: 3px solid #1a6fb5;
    border-radius: 50%;
    animation: ppseSpinner 0.8s linear infinite;
}
.ppse-modal-error {
    text-align: center;
    color: #c0392b;
    padding: 20px 0;
}
@keyframes ppseSpinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hide shipping estimate in sticky footer */
.tvfooter-product-sticky-bottom .ppse-shipping-estimate {
    display: none !important;
}

/* Hide sticky footer on product page (desktop + mobile) */
.tvfooter-product-sticky-bottom,
.tvfooter-product-sticky-bottom.sticky {
    display: none !important;
}

/* "No delivery methods" state: static, non-clickable, muted info look */
.ppse-shipping-estimate.ppse-no-methods {
    cursor: default !important;
    pointer-events: none;
    background: #f7f7f8;
    border-color: #e0e0e3;
    color: #6b6b70;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.ppse-shipping-estimate.ppse-no-methods:hover {
    background: #f7f7f8;
    border-color: #e0e0e3;
    transform: none;
}
.ppse-shipping-estimate.ppse-no-methods .ppse-row--nomethods {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap !important;
    min-width: 0;
}
.ppse-shipping-estimate.ppse-no-methods .ppse-label {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    min-width: 0;
    flex: 1 1 auto;
}

/* ---- base.courier (packingshipping 1.13+) ---- */

/* Winner of the cheapest option: a small logo, or the courier's name when there is none. */
.ppse-bc-courier {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: #2c3e50;
    background: #fff;
    border: 1px solid #d0e4f7;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}
.ppse-bc-courier img {
    height: 16px;
    max-width: 60px;
    object-fit: contain;
    display: block;
}

/* "w niektórych miejscowościach do ..." - informative, never louder than the price itself. */
.ppse-bc-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: #8aa6bf;
    cursor: help;
    border-radius: 50%;
}
.ppse-bc-info:hover,
.ppse-bc-info:focus-visible {
    color: #1a6fb5;
}
.ppse-bc-info:focus-visible {
    outline: 2px solid #1a6fb5;
    outline-offset: 2px;
}
/* The note shows as a small bubble above the icon - no extra line in the block. */
.ppse-bc-info[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    right: -4px;
    bottom: calc(100% + 8px);
    width: max-content;
    max-width: 210px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #2c3e50;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 5;
}
.ppse-bc-info:hover::after,
.ppse-bc-info:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .ppse-bc-info[data-tip]::after {
        transition: none;
    }
}

.ppse-carrier-courier {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #2c3e50;
}
.ppse-carrier-courier img {
    height: 15px;
    max-width: 56px;
    object-fit: contain;
}
.ppse-carrier-remote {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: #6b7c8f;
}
.ppse-carrier-remote svg {
    flex-shrink: 0;
    color: #8aa6bf;
}

/* Postcode check at the top of the modal. */
.ppse-pc-form {
    margin: 0 0 12px;
    padding: 10px 12px;
    background: #f5f9ff;
    border: 1px solid #d0e4f7;
    border-radius: 6px;
}
.ppse-pc-form label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 4px;
}
.ppse-pc-row {
    display: flex;
    gap: 6px;
}
.ppse-pc-row input {
    width: 110px;
    min-height: 40px;
    padding: 6px 10px;
    font-size: 16px; /* 16px keeps iOS from zooming into the field */
    border: 1px solid #a8c6e3;
    border-radius: 5px;
    color: #2c3e50;
    background: #fff;
    letter-spacing: 0.04em;
}
.ppse-pc-row input:focus-visible {
    outline: 2px solid #1a6fb5;
    outline-offset: 1px;
}
.ppse-pc-row button {
    min-height: 40px;
    padding: 6px 14px;
    border: 0;
    border-radius: 5px;
    background: #1a6fb5;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.ppse-pc-row button:focus-visible {
    outline: 2px solid #0d3d66;
    outline-offset: 2px;
}
.ppse-pc-info {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: #6b7c8f;
}
.ppse-pc-info.ppse-pc-error {
    color: #b42318;
}

/* ==========================================================================
   "Koszty i terminy dostawy" window, v2: wider, one row per method with the
   courier's logo, a bottom sheet on phones. Same palette as the widget.
   ========================================================================== */
.ppse-modal-container {
    width: calc(100% - 32px);
    max-width: 640px;
    max-height: 86vh;
    border-radius: 14px;
}
.ppse-modal-header {
    padding: 16px 22px;
}
.ppse-modal-header h3 {
    font-size: 1.15rem;
}
.ppse-modal-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.ppse-modal-close:hover {
    background: #eef2f5;
}
.ppse-modal-close:focus-visible {
    outline: 2px solid #1a6fb5;
    outline-offset: 2px;
}
.ppse-modal-body {
    padding: 18px 22px 22px;
    max-height: calc(86vh - 70px);
    overscroll-behavior: contain;
}

/* Postcode check: label above, field and button on one line. */
.ppse-pc-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    align-items: end;
    margin: 0 0 14px;
    padding: 12px 14px;
}
.ppse-pc-form label {
    grid-column: 1 / -1;
    margin: 0;
}
.ppse-pc-row {
    grid-column: 1 / -1;
}
.ppse-pc-row input {
    flex: 0 1 140px;
}
.ppse-pc-info {
    grid-column: 1 / -1;
    margin: 0;
}

.ppse-modal-qty-note {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: #6b7c8f;
}

.ppse-carrier-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ppse-carrier-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid #e6edf3;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ppse-carrier-item:hover {
    border-color: #c9dcec;
    background: #f8fbfe;
}
.ppse-carrier-item.is-cheapest {
    border-color: #9cc8ee;
    background: #f0f7ff;
    box-shadow: inset 3px 0 0 #1a6fb5;
}

/* Logos sit straight on the row - no white tiles. `multiply` lets the white edge of a JPG/PNG
   logo take the row's own colour, so it does not show as a box on the blue "cheapest" row. */
.ppse-carrier-logo {
    width: 56px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ppse-carrier-logo img {
    max-width: 56px;
    max-height: 36px;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.ppse-carrier-logo-icon {
    color: #8aa6bf;
    display: inline-flex;
}

.ppse-carrier-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.ppse-carrier-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}
.ppse-carrier-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95rem;
}
.ppse-cheapest-badge {
    margin-left: 0;
}
.ppse-carrier-staff {
    margin-left: 0;
}
.ppse-carrier-courier {
    font-size: 0.8rem;
    color: #4a5b6c;
}
.ppse-carrier-courier b {
    font-weight: 600;
}
.ppse-carrier-time {
    display: block;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #6b7c8f;
}
.ppse-carrier-time svg,
.ppse-carrier-time img {
    vertical-align: -2px;
    margin-right: 3px;
}
.ppse-carrier-time b {
    color: #2c3e50;
    font-weight: 600;
    white-space: nowrap;
}
.ppse-carrier-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 2px;
}
.ppse-carrier-price {
    font-weight: 700;
    color: #1a6fb5;
    font-size: 1.1rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Widget: the winner's logo straight on the card, no white tile. */
.ppse-bc-courier {
    background: transparent;
    border: 0;
    padding: 0;
}
.ppse-bc-courier img {
    height: 18px;
    max-width: 64px;
    mix-blend-mode: multiply;
}

/* The shop theme restyles span/b (letter-spacing, display), which split "dostarczy | UPS Standard"
   into columns and stretched the text on phones. Pin the text rows to plain inline flow. */
.ppse-carrier-info,
.ppse-carrier-info * {
    letter-spacing: normal;
    text-transform: none;
}
.ppse-carrier-courier,
.ppse-carrier-time {
    display: block;
    line-height: 1.4;
}
.ppse-carrier-courier b,
.ppse-carrier-time b {
    display: inline;
    float: none;
    width: auto;
    margin: 0;
}
.ppse-carrier-time svg {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 3px;
}
.ppse-carrier-price {
    letter-spacing: normal;
}

/* Phones: a bottom sheet, the row keeps logo | text | price but tighter. */
@media (max-width: 600px) {
    /* The grab bar hints that the sheet can be pulled down. */
    .ppse-modal-header {
        position: relative;
        padding-top: 22px;
        touch-action: none;
    }
    .ppse-modal-header::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 2px;
        background: #d3dbe3;
    }
    .ppse-carrier-courier,
    .ppse-carrier-time {
        font-size: 0.76rem;
    }
    .ppse-carrier-name {
        font-size: 0.92rem;
    }
    .ppse-modal-overlay {
        align-items: flex-end;
    }
    .ppse-modal-container {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(24px);
        transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .ppse-modal-overlay.active .ppse-modal-container {
        transform: translateY(0);
    }
    .ppse-modal-header {
        padding: 22px 16px 12px;
    }
    .ppse-modal-body {
        padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
        max-height: calc(92vh - 64px);
    }
    .ppse-carrier-item {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 11px 12px;
    }
    .ppse-carrier-logo {
        width: 40px;
        height: 28px;
    }
    .ppse-carrier-logo img {
        max-width: 40px;
        max-height: 28px;
    }
    .ppse-carrier-price {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ppse-modal-container,
    .ppse-modal-overlay {
        transition: none;
    }
}