/**
 * Holio Shipping Checkout Styles
 */

/* Carrier Logo in Shipping Methods */
.holio-carrier-logo {
    height: 24px;
    width: auto;
    max-width: 40px;
    vertical-align: middle;
    margin-right: 10px;
    object-fit: contain;
    border-radius: 4px;
}

/*
 * Keep our two injected blocks on their own lines.
 *
 * Both the delivery estimate and the pickup selector are appended inside WooCommerce's
 * shipping-method <li>, as siblings of the label. Where a checkout lays that li out as a flex
 * row - Svea Checkout does - block-level divs become flex items beside the label instead of
 * below it. A client's screenshot showed the result: "PostNord Parcel Locker: 80,-" wrapped
 * into a four-line column and the pickup button clipped to "Pakkeautomat Ha".
 *
 * The parent's class is not ours to know, hence :has(). Both properties are inert when the li
 * is not a flex container, which is the ordinary case, so this changes nothing there.
 */
li:has(> .holio-delivery-time),
li:has(> .holio-pickup-points-row) {
    flex-wrap: wrap;
}

/*
 * Scoped through :has() as well, rather than set on the class directly, so that both halves
 * stand or fall together. A browser without :has() support drops these rules entirely and
 * behaves exactly as before; setting the basis unconditionally would instead have it demand a
 * full line in a row that cannot wrap, squeezing the label harder than doing nothing at all.
 *
 * nowrap being the flex default is also why the basis needs the rule above to be any use.
 */
li:has(> .holio-delivery-time) > .holio-delivery-time,
li:has(> .holio-pickup-points-row) > .holio-pickup-points-row {
    flex-basis: 100%;
    /* And the same for a row laid out as a grid, where flex-basis means nothing: span every
       column instead. Confirmed against the client's own markup that both blocks are direct
       children of the li, so these selectors do match; which layout the theme actually uses
       is the part still unknown, hence covering both. */
    grid-column: 1 / -1;
}

/*
 * Estimated delivery line under the rate, classic checkout.
 *
 * These properties used to be an inline style attribute in PHP, which no stylesheet could
 * override - so a shop that found the spacing too loose or too tight had no way to change it,
 * and neither had we without shipping a new version. The values are unchanged by the move.
 *
 * Scoped to `li >` on purpose. The block checkout builds an element of the same class from JS
 * and gives it its own inline margin-top, but no side or bottom margin; an unscoped rule here
 * would hand it a 24px indent it never had. In the block markup the element sits beside a
 * label-group div rather than in a list item, so this selector cannot reach it.
 */
li > .holio-delivery-time {
    color: #666;
    font-size: 12px;
    /* Same yielding indent as the pickup block below, so the two stay lined up with each other
       once a narrow column shrinks it. */
    margin: 2px min(24px, max(0px, 100% - 200px)) 8px;
    line-height: 1.4;
}

/* Pickup Points Container */
.holio-pickup-points-row {
    /* The 24px sides line the block up under the rate label, past the radio button, and the
       max-width keeps those margins from pushing it wider than its row - the two have to be
       kept in step, hence the shared custom property.
     *
     * It used to be a flat 24px, which a narrow column cannot afford. Dintero's two-column
     * checkout renders the shipping list inside the order-review cell, a little over 150px
     * wide: 48px of margin and 30px of padding left the select about 60px, clipping the first
     * pickup point to "Rem".
     *
     * min(24px, max(0px, 100% - 200px)) reads as: the full 24px whenever the row can spare
     * 200px besides it, otherwise whatever is left over, down to nothing. Deliberately not a
     * plain percentage - 5% would have taken the indent off every classic checkout going,
     * since the review table's right-hand cell is only around 320px even at full width. This
     * form is identical to the old flat value for any container above 224px and only yields
     * where there is genuinely no room.
     *
     * The @media block further down cannot cover this. It asks about the viewport, and the
     * viewport here is wide - it is the container that is narrow. */
    --holio-pickup-indent: min(24px, max(0px, 100% - 200px));
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 4px;
    margin: 10px var(--holio-pickup-indent);
    max-width: calc(100% - 2 * var(--holio-pickup-indent));
}

.holio-pickup-points-container {
    min-height: 50px;
}

/* Loading State */
.holio-pickup-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: #666;
    font-size: 14px;
}

.holio-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top-color: #0073aa;
    border-radius: 50%;
    animation: holio-spin 0.8s linear infinite;
}

@keyframes holio-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Pickup Point Select */
.holio-pickup-select {
    width: 100%;
    max-width: 400px;
    /* Most themes set this globally, but not all, and where they do not the padding and border
       below are added on top of the 100% - harmless at checkout width, a 26px overflow in a
       narrow order-review column. */
    box-sizing: border-box;
    /* Was inline alongside a width that this rule already set. */
    margin-bottom: 8px;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s;
}

.holio-pickup-select:hover,
.holio-pickup-select:focus {
    border-color: #0073aa;
    outline: none;
}

.holio-pickup-select option {
    padding: 8px;
}

/* Pickup Point Details */
.holio-pickup-details {
    margin-top: 12px;
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
}

.holio-pickup-details__name {
    font-weight: 600;
    margin-bottom: 4px;
    color: #333;
}

.holio-pickup-details__address {
    color: #666;
}

.holio-pickup-details__hours {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
    font-size: 12px;
    color: #888;
}

/* Error State */
.holio-pickup-error {
    padding: 10px 15px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 13px;
}

/* No Results */
.holio-pickup-empty {
    padding: 15px;
    text-align: center;
    color: #666;
    font-size: 13px;
}

/* Order Details - Pickup Point Section */
.holio-pickup-point-details {
    margin: 20px 0;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 4px;
}

.holio-pickup-point-details h2 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
}

.holio-pickup-point-details address {
    font-style: normal;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .holio-pickup-select {
        max-width: 100%;
    }
    
    .holio-pickup-points-row th,
    .holio-pickup-points-row td {
        display: block;
        width: 100%;
    }
    
    .holio-pickup-points-row th {
        padding-bottom: 5px;
    }
}

/* WooCommerce Blocks Checkout Styles */
.wc-block-components-shipping-rates-control .holio-pickup-wrapper {
    margin-top: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 4px;
}

.wc-block-components-shipping-rates-control .holio-pickup-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
}

.wc-block-components-shipping-rates-control .holio-pickup-select {
    max-width: 100%;
}