/**
* Estimated Delivery Date for WooCommerce — storefront styles.
*
* Light-touch green "get it by" design: a compact pill on the shop / per-cart
* line, a full-width soft-green box on the product, cart summary and checkout,
* and a highlighted row in the order totals table.
*/
/* Shared tokens. */
.zedd-estimate {
--zedd-bg: rgb(236, 247, 239);
--zedd-fg: #166534;
--zedd-accent: #16a34a;
margin: 10px 0;
font-size: 14px;
color: var(--zedd-fg);
}
.zedd-estimate__icon {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin-right: 6px;
color: var(--zedd-accent);
}
.zedd-estimate__text {
display: inline;
}
/* Lead-in ("Estimated Delivery:" label + "Get it") stays normal weight; only
the date itself is bold. */
.zedd-estimate__label {
font-weight: 400;
color: var(--zedd-fg);
}
.zedd-estimate__date {
color: var(--zedd-fg);
}
.zedd-estimate__strong {
font-weight: 600;
}
/* Compact green pill — shop/archive loop + per-cart-item. */
.zedd-estimate--shop,
.zedd-estimate--cart-item {
align-items: center;
gap: 2px;
padding: 10px 20px;
font-size: 14px;
background: var(--zedd-bg);
border-radius: 8px;
line-height: 1.3;
}
/* Shop loop: inline-flex so it shrink-wraps and the theme's archive text-align
centres the whole pill. */
.zedd-estimate--shop {
display: inline-flex;
vertical-align: middle;
margin: 8px 0;
}
/* Cart line item: drop onto its own line, below the product name. */
.zedd-estimate--cart-item {
display: flex;
width: fit-content;
max-width: 100%;
margin: 6px 0 0;
}
/* Full-width soft-green box — product page, cart summary, checkout, block
cart/checkout. */
.zedd-estimate--product,
.zedd-estimate--cart,
.zedd-estimate--checkout,
.zedd-estimate--block-cart,
.zedd-estimate--block-checkout,
.zedd-estimate--block-summary {
display: flex;
align-items: center;
gap: 2px;
margin: 14px 0;
padding: 12px 16px;
font-size: 14px;
background: var(--zedd-bg);
border-radius: 8px;
line-height: 1.4;
}
/* Block cart/checkout order-summary slot.
WooCommerce's `.slot-wrapper > * > *` rule (0,2,0) would force 16px 0 padding
onto our box and drop its horizontal padding, so this higher-specificity rule
(0,3,0) keeps our own box padding and sets the inset margin. */
.wc-block-components-totals-wrapper.slot-wrapper > * > .zedd-estimate--block-summary {
margin: 20px 16px;
padding: 12px 16px;
}
/* Per-shipping-method estimate — one green "get it by" line shown directly
below each shipping method's name (classic ul#shipping_method rows + block
radio options). Full width so it drops onto its own line under the name. */
.zedd-rate-eta {
display: flex;
/* flex-basis keeps it on its own line below the method; max-content shrinks
the green box to fit just the icon + date. */
flex-basis: 100%;
width: max-content;
max-width: 100%;
box-sizing: border-box;
align-items: center;
gap: 6px;
/* Top margin spaces it from the method name; soft-green box matches the
standalone estimate design. */
margin: 8px 0 2px;
padding: 8px 12px;
background: rgb(236, 247, 239);
border-radius: 6px;
color: #166534;
font-size: 13px;
font-weight: 400;
line-height: 1.3;
/* Keep the icon + date together on a single line. */
white-space: nowrap;
}
.zedd-rate-eta__text {
white-space: nowrap;
}
.zedd-rate-eta__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
color: #16a34a;
}
.zedd-rate-eta__icon svg {
width: 15px;
height: 15px;
}
/* Only the date itself is bold (format_estimate wraps it in .zedd-estimate__strong). */
.zedd-rate-eta__text .zedd-estimate__strong,
.zedd-rate-eta__text strong {
font-weight: 600;
}
/* Cart-totals + checkout-review rows: let the box fill the whole row width. */
.zedd-cart-row td,
.zedd-checkout-row td {
padding: 0 !important;
}
.zedd-cart-row .zedd-estimate--cart,
.zedd-checkout-row .zedd-estimate--checkout {
margin: 10px 0;
}
/* Order totals table row (order-received / My Account / email HTML). The order
details template adds no row class, so highlight the row that contains our
marker via :has(); force both the label (
) and value (
) cells so the
whole row is tinted even over a theme that colours header cells. */
.woocommerce-table tr:has(.zedd-order-total) > th,
.woocommerce-table tr:has(.zedd-order-total) > td,
.woocommerce-table--order-details tr:has(.zedd-order-total) > th,
.woocommerce-table--order-details tr:has(.zedd-order-total) > td,
table.order_details tr:has(.zedd-order-total) > th,
table.order_details tr:has(.zedd-order-total) > td {
background: rgb(236, 247, 239) !important;
}
.zedd-order-total {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Same line-art icon as the storefront, painted green via a CSS mask so it
survives the order-details template's wp_kses_post() (which strips