/* Prontox Shipping Areas & Branch Selector Styles */
/* Design aligned with WordPress Block Editor / Global Styles (theme.json) */

#shipping_method li {
    opacity: 0.85;
}

#prontox-pick-delivery-address-checkout-map {
    height: 400px;
    border-radius: var(--wp--style--block-custom-border-radius, 12px);
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.prontox-geocode-debug-info {
    word-wrap: break-word;
    font-size: 11px;
    color: var(--wp--preset--color--muted, #6b7280);
}

button.button.prontox-disabled {
    opacity: 0.55;
    cursor: default;
    background: var(--wp--preset--color--muted, #6b7280) !important;
    color: var(--wp--preset--color--base, #ffffff) !important;
}

.pac-container {
    z-index: 200102;
    border-radius: var(--wp--style--block-custom-border-radius, 8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-family: var(--wp--preset--font-family--inter, sans-serif);
}

/* Select Branch Modal Inner Style */
#prontox_select_branch_modal {
    position: relative;
    background: var(--wp--preset--color--base, #ffffff);
    padding: var(--wp--preset--spacing--50, 1.5rem);
    width: auto;
    max-width: 600px;
    margin: var(--wp--preset--spacing--50, 1.5rem) auto;
    border-radius: var(--wp--style--block-custom-border-radius, 16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
    font-family: var(--wp--preset--font-family--inter, sans-serif);
    color: var(--wp--preset--color--contrast, #171717);
}

.prontox-all-stores-closed {
    text-align: center;
    padding: var(--wp--preset--spacing--40, 1rem) 0;
}

.prontox-all-stores-closed-countdown {
    text-align: center;
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    font-size: var(--wp--preset--font-size--large, 1.25rem);
    font-weight: 800;
    margin-bottom: var(--wp--preset--spacing--40, 1rem);
    color: var(--wp--preset--color--primary, #f68363);
}

.prontox-all-stores-closed-countdown .count_holder_small {
    font-size: var(--wp--preset--font-size--xx-large, 2.5rem);
    display: block;
    margin-top: var(--wp--preset--spacing--20, 0.5rem);
}

a.prontox-branch-delivery, a.prontox-branch-pickup, .prontox-branch-user-address, .prontox-branch-selection {
    display: none;
}

.prontox-branch-order-type, .prontox-branch-user-address {
    margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
}

/* Order Type Toggle Tabs (Delivery / Pickup Selector) */
.prontox-branch-order-type {
    background-color: var(--wp--preset--color--surface, #f5f5f2);
    padding: 4px 4px 0 4px;
    border-bottom: 2px solid var(--wp--preset--color--surface, #f5f5f2);
    border-radius: var(--wp--style--block-custom-border-radius, 8px) var(--wp--style--block-custom-border-radius, 8px) 0 0;
    display: flex;
    gap: 4px;
}

.prontox-branch-order-type a {
    flex: 1;
    display: inline-block;
    padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--40, 1rem);
    border-radius: var(--wp--style--block-custom-border-radius, 6px) var(--wp--style--block-custom-border-radius, 6px) 0 0;
    background-color: var(--wp--preset--color--surface, #f5f5f2);
    text-decoration: none;
    color: var(--wp--preset--color--muted, #6b7280);
    text-transform: uppercase;
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.prontox-branch-order-type a:hover {
    color: var(--wp--preset--color--contrast, #171717);
    background-color: rgba(0, 0, 0, 0.03);
}

.prontox-branch-order-type a.prontox-selected,
.prontox-branch-order-type a.prontox-selected:hover {
    background-color: var(--wp--preset--color--primary, #f68363);
    color: var(--wp--preset--color--base, #ffffff);
    position: relative;
    bottom: -2px;
    box-shadow: 0 4px 14px rgba(246, 131, 99, 0.35);
}

.prontox-branch-user-address input#prontox_branch_select_user_address {
    width: 100%;
    margin: var(--wp--preset--spacing--20, 0.5rem) 0 var(--wp--preset--spacing--30, 0.75rem) 0;
}

a.prontox-branch-auto-locate {
    text-decoration: none !important;
    color: var(--wp--preset--color--primary, #f68363);
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 700;
    transition: color 0.2s ease;
}

a.prontox-branch-auto-locate:hover {
    color: var(--wp--preset--color--accent, #eab308);
}

/* Branch Grid Images */
div.prontox-branch-select-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--wp--preset--spacing--30, 0.75rem);
}

span.prontox-branch-select-image {
    display: inline-block;
    width: calc(33.333% - 8px);
    text-align: center;
    color: var(--wp--preset--color--contrast, #171717);
    border: 2px solid var(--wp--preset--color--surface, #f5f5f2);
    border-radius: var(--wp--style--block-custom-border-radius, 12px);
    vertical-align: top;
    padding: var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--20, 0.5rem);
    position: relative;
    z-index: 1;
    background: var(--wp--preset--color--base, #ffffff);
    box-sizing: border-box;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

span.prontox-branch-select-image a, span.prontox-branch-select-image a .prontox-branch-select-name {
    color: var(--wp--preset--color--contrast, #171717);
    text-decoration: none;
    display: block;
}

span.prontox-branch-select-image .prontox-branch-select-name {
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    line-height: 1.3;
    margin-top: var(--wp--preset--spacing--20, 0.5rem);
}

span.prontox-branch-select-image:hover {
    border-color: var(--wp--preset--color--muted, #6b7280);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

span.prontox-branch-select-image.prontox-branch-selected-image {
    border-color: var(--wp--preset--color--primary, #f68363);
    background: color-mix(in srgb, var(--wp--preset--color--primary, #f68363) 9%, var(--wp--preset--color--base, #ffffff));
    box-shadow: 0 12px 32px rgba(246, 131, 99, 0.28);
    z-index: 100;
    transform: scale(1.03);
}

span.prontox-branch-select-image.prontox-branch-selected-image::after {
    content: "\2713";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--wp--preset--color--primary, #f68363);
    color: var(--wp--preset--color--base, #ffffff);
    font-size: 15px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

span.prontox-branch-select-image.prontox-branch-selected-image .prontox-branch-select-name {
    color: var(--wp--preset--color--primary, #f68363);
}

span.prontox-branch-select-image a img {
    margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
    width: 100%;
    max-width: 120px;
    border-radius: var(--wp--style--block-custom-border-radius, 6px);
    object-fit: cover;
}

.prontox-branch-selection, .prontox-branch-select-message {
    margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
}

a.prontox-branch-delivery, a.prontox-branch-pickup {
    text-decoration: none !important;
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    font-weight: 700;
    color: var(--wp--preset--color--primary, #f68363);
    transition: color 0.2s ease;
}

a.prontox-branch-delivery:hover, a.prontox-branch-pickup:hover {
    color: var(--wp--preset--color--accent, #eab308);
}

a.prontox-branch-delivery:before, a.prontox-branch-pickup:before {
    display: inline-block;
    font-family: 'Line Awesome Free';
    font-weight: 900;
    content: "\f0d1";
    margin-right: var(--wp--preset--spacing--20, 0.5rem);
    font-size: 21px;
    vertical-align: middle;
}

a.prontox-branch-pickup:before {
    content: "\f54e";
}

.prontox-branch-select-tip {
    display: block;
    width: 100%;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    color: var(--wp--preset--color--muted, #6b7280);
    margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
}

h3.prontox-address-not-found, h3.prontox-address-marked {
    display: none;
}

.woocommerce form.checkout h3.prontox-address-not-found, .woocommerce form.checkout h3.prontox-address-marked {
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    font-size: var(--wp--preset--font-size--medium, 1rem);
    font-weight: 600;
    padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--40, 1rem);
    border-radius: var(--wp--style--block-custom-border-radius, 8px);
    color: var(--wp--preset--color--base, #ffffff);
    background-color: var(--wp--preset--color--contrast, #171717);
    position: relative;
    margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.woocommerce form.checkout h3.prontox-address-not-found:after, .woocommerce form.checkout h3.prontox-address-marked:after {
    width: 8px;
    height: 8px;
    display: block;
    content: "";
    transform: rotate(45deg);
    position: absolute;
    bottom: -4px;
    left: 24px;
    background-color: var(--wp--preset--color--contrast, #171717);
}

.woocommerce form.checkout h3.prontox-address-marked, .woocommerce form.checkout h3.prontox-address-marked:after {
    color: var(--wp--preset--color--contrast, #171717);
    background-color: var(--wp--preset--color--surface, #f5f5f2);
}

/* Branch status info widget wrapper */
.prontox-change-branch {
    display: block;
    padding: var(--wp--preset--spacing--30, 0.75rem);
    border-radius: var(--wp--style--block-custom-border-radius, 8px);
    background: var(--wp--preset--color--surface, #f5f5f2);
    color: var(--wp--preset--color--muted, #6b7280);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    text-align: left;
    margin: 4px 0;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

#products-wrapper .prontox-change-branch {
    width: 100%;
    max-width: 400px;
    float: right;
    clear: both;
    margin-bottom: var(--wp--preset--spacing--40, 1rem);
}

body > div.widget.woocommerce.widget_shopping_cart .widget_shopping_cart_content .prontox-change-branch {
    margin-top: var(--wp--preset--spacing--20, 0.5rem);
}

.cart-collaterals .prontox-change-branch, #order_review .prontox-change-branch {
    margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
}

.prontox-change-branch span strong {
    font-weight: 700;
    color: var(--wp--preset--color--contrast, #171717);
}

.prontox-change-branch span {
    display: inline-block;
    padding: 2px 0;
    width: calc(100% - 55px);
}

.prontox-change-branch span > span {
    display: inline;
    padding: 0;
    width: auto;
}

.prontox-change-branch.prontox-pickup-info span:last-of-type {
    position: absolute;
    top: 10px;
    right: 10px;
    width: auto;
}

/* Edit Branch Button */
a.prontox-change-branch-button {
    display: inline-block;
    width: 24px;
    height: 24px;
    font-size: 0px;
    vertical-align: middle;
    margin-left: 4px;
    text-decoration: none !important;
    position: absolute;
    top: 8px;
    right: 8px;
    transition: all 0.2s ease;
}

.prontox-change-branch.prontox-pickup-info a.prontox-change-branch-button {
    position: relative;
    top: auto;
    right: auto;
}

a.prontox-change-branch-button:before, .prontox-change-branch-button-select:before {
    display: block;
    font-family: 'Line Awesome Free';
    font-weight: 900;
    content: "\f303";
    font-size: 10px;
    border-radius: 50%;
    color: var(--wp--preset--color--base, #ffffff);
    background-color: var(--wp--preset--color--primary, #f68363);
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    transition: all 0.2s ease;
}

.prontox-change-branch-button-select:before {
    display: inline-block;
    margin: 0px var(--wp--preset--spacing--20, 0.5rem) 0 0;
    vertical-align: middle;
    content: "\f06a";
    font-size: 14px;
    background-color: transparent;
    color: var(--wp--preset--color--primary, #f68363);
    width: auto;
    height: auto;
    line-height: inherit;
}

a.prontox-change-branch-button:hover:before, .prontox-change-branch-button-select:hover:before {
    background-color: var(--wp--preset--color--accent, #eab308);
    color: var(--wp--preset--color--contrast, #171717);
}

.prontox-change-branch-button-select {
    color: var(--wp--preset--color--contrast, #171717);
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    font-weight: 700;
    text-decoration: none !important;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* Datetime Selection */
.prontox-checkout-datetime-container {
    border-radius: var(--wp--style--block-custom-border-radius, 12px);
    border: 1px solid var(--wp--preset--color--surface, #f5f5f2);
    padding: var(--wp--preset--spacing--40, 1rem);
    margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
    background: var(--wp--preset--color--base, #ffffff);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.prontox-delivery-time-toggle {
    display: block;
    padding: var(--wp--preset--spacing--40, 1rem);
    background-color: var(--wp--preset--color--surface, #f5f5f2);
    border-radius: var(--wp--style--block-custom-border-radius, 8px);
    text-decoration: none !important;
    color: var(--wp--preset--color--contrast, #171717);
    text-transform: uppercase;
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.prontox-delivery-time-toggle:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.prontox-delivery-time-toggle:before {
    font-family: 'Line Awesome Free';
    font-weight: 900;
    content: "\f017";
    display: inline-block;
    margin-right: var(--wp--preset--spacing--20, 0.5rem);
    vertical-align: middle;
    font-size: 24px;
    color: var(--wp--preset--color--primary, #f68363);
}

.prontox-checkout-datetime-fields {
    padding: var(--wp--preset--spacing--40, 1rem) 0 0 0;
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--30, 0.75rem);
    height: auto;
}

.prontox-checkout-datetime-fields input#prontox_checkout_date {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--wp--preset--color--muted, #6b7280);
    border-radius: var(--wp--style--block-custom-border-radius, 6px);
    font-family: var(--wp--preset--font-family--inter, sans-serif);
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    background: var(--wp--preset--color--base, #ffffff);
    color: var(--wp--preset--color--contrast, #171717);
    outline: none;
    box-sizing: border-box;
}

.prontox-checkout-datetime-fields input#prontox_checkout_date:focus {
    border-color: var(--wp--preset--color--primary, #f68363);
}

.prontox-checkout-datetime-fields span.select2-container {
    display: inline-block;
    vertical-align: top;
    width: auto !important;
    min-width: 150px;
}

/* Datetime Clear Button */
.prontox-checkout-datetime-fields .prontox-datetime-clear {
    display: inline-block;
    width: 42px;
    height: 42px;
    line-height: 42px;
    border: 1px solid var(--wp--preset--color--muted, #6b7280);
    border-radius: var(--wp--style--block-custom-border-radius, 6px);
    font-size: 0;
    text-align: center;
    text-decoration: none !important;
    background: var(--wp--preset--color--base, #ffffff);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.prontox-checkout-datetime-fields .prontox-datetime-clear:before {
    font-family: 'Line Awesome Free';
    font-weight: 900;
    content: "\f057";
    display: block;
    margin: 0;
    vertical-align: middle;
    font-size: 20px;
    color: var(--wp--preset--color--muted, #6b7280);
    width: 100%;
    height: 100%;
    line-height: 40px;
    transition: color 0.2s ease;
}

.prontox-checkout-datetime-fields .prontox-datetime-clear:hover {
    background-color: var(--wp--preset--color--surface, #f5f5f2);
    border-color: var(--wp--preset--color--primary, #f68363);
}

.prontox-checkout-datetime-fields .prontox-datetime-clear:hover:before {
    color: var(--wp--preset--color--primary, #f68363);
}

form.checkout tr.woocommerce-shipping-totals, form.checkout tr.order-total, form.checkout h3.prontox-address-not-found, form.checkout h3.prontox-address-marked {
    opacity: 0;
}

.prontox-estimated-time {
    display: block !important;
    float: left;
    width: 44px !important;
    height: 44px;
    border: 1px solid var(--wp--preset--color--surface, #f5f5f2);
    border-radius: var(--wp--style--block-custom-border-radius, 4px);
    margin-right: var(--wp--preset--spacing--20, 0.5rem);
    font-size: 9px;
    text-align: center;
    padding-top: 4px !important;
    background-color: var(--wp--preset--color--base, #ffffff);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.prontox-estimated-time:before {
    font-family: 'Line Awesome Free';
    font-weight: 900;
    content: "\f017";
    display: block;
    font-size: 16px;
    width: 100%;
    color: var(--wp--preset--color--primary, #f68363);
}

.prontox-branch-select-dropdown label, .prontox-branch-select-dropdown select {
    width: 100%;
}

.prontox-branch-select-dropdown label {
    margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
    display: block;
    font-family: var(--wp--preset--font-family--plus-jakarta-sans, sans-serif);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--small, 0.875rem);
    color: var(--wp--preset--color--contrast, #171717);
}

.prontox-branch-select-dropdown select {
    padding: 12px 16px;
    border-radius: var(--wp--style--block-custom-border-radius, 6px);
    background-color: var(--wp--preset--color--surface, #f5f5f2);
    border: 1px solid var(--wp--preset--color--muted, #6b7280);
    color: var(--wp--preset--color--contrast, #171717);
    outline: none;
}

.prontox-branch-select-dropdown select:focus {
    border-color: var(--wp--preset--color--primary, #f68363);
}

/* Delivery bands table ([prontox_delivery_zones] / prontox/delivery-zones block) */
.prontox-delivery-zones {
    margin: 0;
    overflow-x: auto;
}

.prontox-delivery-zones table {
    width: 100%;
    border-collapse: collapse;
}

.prontox-delivery-zones th,
.prontox-delivery-zones td {
    padding: 0.65rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--wp--preset--color--outline, #d8c5a0);
}

.prontox-delivery-zones th {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--wp--preset--font-size--label-lg, 14px);
    color: var(--wp--preset--color--on-surface-variant, #6f6357);
}

.prontox-delivery-zones tbody tr:nth-child(odd) {
    background: color-mix(in srgb, var(--wp--preset--color--outline, #d8c5a0) 14%, transparent);
}

.prontox-delivery-zones tbody tr:last-child td {
    border-bottom: none;
}

/* Restyle the below-minimum info notice to WooCommerce's native warning palette
   (amber, info icon rotated into an exclamation mark). */
.wc-block-components-notice-banner.is-info[data-prontox-notice="minimum-amount"] {
    background-color: #fffbf4;
    border-color: #f0b849;
}

.wc-block-components-notice-banner.is-info[data-prontox-notice="minimum-amount"] > svg {
    background-color: #f0b849;
    transform: rotate(180deg);
}

@media screen and (max-width: 500px) {
    span.prontox-branch-select-image {
        width: calc(50% - 4px);
    }
}

/* Delivery bands are nested by radius, so every band wider than the customer's
   distance also matches and WooCommerce lists them all. The applicable band is
   chosen by the system and a manual pick is overridden on recalculation, so the
   unselected ones are noise. Hidden only while a band is actually selected, and
   only for Prontox bands, so pickup and other methods are never hidden. */
.woocommerce-shipping-methods:has(input.shipping_method[value^="prontox_ship_area_method"]:checked) li:has(input.shipping_method[value^="prontox_ship_area_method"]):not(:has(input.shipping_method:checked)) {
    display: none;
}