/**
 * Customer-facing styles for the OCA branch picker and tracking widget.
 */

/* When the theme styles each shipping rate <li> with display:flex
   (very common: radio + label horizontally aligned), our card lands
   in the same row and gets squeezed next to the label. Forcing
   flex-wrap on the parent and flex-basis:100% on the card pushes it
   to its own line below the rate. The :has() selector targets only
   the <li>s that actually contain the picker so we don't change
   layout on unrelated rates. */
li:has(> .oca-epak-branch),
tr:has(> td > .oca-epak-branch) {
    flex-wrap: wrap;
}

.oca-epak-branch {
    box-sizing: border-box;
    width: 100%;
    flex: 1 0 100%;
    order: 99;
    margin: 0.6em 0 0.8em;
    padding: 0.9em 1em;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    background: #fafafa;
    /* Many themes set text-align: right or center on the order
       review (it's a <table>/<th> by default). Reset it so our
       headings and labels align with the rest of the page. */
    text-align: left;
}

/* When the card is rendered as a sibling of a shipping <li>, kill
   any list-item bullet, indentation or odd alignment the theme might
   apply. */
#shipping_method > .oca-epak-branch,
.woocommerce-shipping-totals .oca-epak-branch,
ul.shipping-methods > .oca-epak-branch,
ul.woocommerce-shipping-methods > .oca-epak-branch {
    list-style: none;
    display: block;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

.oca-epak-branch__title {
    margin: 0 0 0.4em;
    padding: 0;
    font-size: 0.95em;
    font-weight: 600;
    text-align: left;
}

.oca-epak-branch__row {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: left;
}

.oca-epak-branch__label {
    display: block;
    margin: 0 0 0.3em;
    padding: 0;
    text-align: left;
    font-weight: 500;
}

.oca-epak-branch__select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.oca-epak-tracking {
    margin: 2em 0;
}

.oca-epak-tracking__table {
    width: 100%;
    margin-top: 0.5em;
}