/* Style the live discount/price hints (radio labels) */

/* Target ONLY the labels in the specific quantity section */
.sticker-quantity-ul .tc-label-text:has(.sticker-meta-container) {
    display: grid !important;
	grid-template-columns: minmax(60px, 1fr) 70px 60px;
    align-items: center;
    width: 100%;	
}

.sticker-meta-container {
    display: contents; /* lets children sit directly in grid columns */
    padding-right: 20px;
}

/* Inline variant used specifically for the custom-quantity input so we don't
   break the radio label grid layout that relies on .sticker-meta-container
   being `display: contents`. */
.sticker-meta-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    margin-left: 6px;
}

/* When the EPO/widget is present we hide the page-level price and shipping
   text because the EPO controls show the dynamic pricing instead. This rule
   only applies when the summary has the marker class added by our JS. */
.summary.entry-summary.wspc-has-epo .price,
.summary.entry-summary.wspc-has-epo .ast-shipping-text {
    display: none !important;
}

/* Very specific rules for the custom-quantity field so the input and its
   inline meta sit on the same line. Targets only the custom-quantity UL to
   avoid interfering with radio label grid layout used elsewhere. */
.sticker-quantity-custom-ul 
.tmcp-field-wrap 
.tmcp-field-wrap-inner 
> label.tc-col.tm-epo-field-label.fullwidth {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
}

.sticker-quantity-custom-ul 
.tmcp-field-wrap 
.tmcp-field-wrap-inner 
> label.tc-col.tm-epo-field-label.fullwidth > input {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 320px !important; /* tweak as needed */
}

.sticker-quantity-custom-ul .sticker-meta-inline {
    margin-left: 8px !important;
}

/* Prevent the inline meta from being pushed to the next line when the user
   enters several digits. Fix the input width in character units so it stays
   compact, and make the meta non-shrinking. This is narrowly targeted to the
   custom-quantity UL to avoid changing other inputs. */
.sticker-quantity-custom-ul 
.tmcp-field-wrap 
.tmcp-field-wrap-inner 
> label.tc-col.tm-epo-field-label.fullwidth > input[type="number"] {
    box-sizing: border-box !important;
    width: 10ch !important;      /* accommodates ~5-6 digits */
    min-width: 10ch !important;
    max-width: 10ch !important;
    padding: 6px 8px !important;
}

.sticker-quantity-custom-ul .sticker-meta-inline {
    flex-shrink: 0 !important; /* keep the meta from being squeezed */
}

/* Small-screen fallback: allow the meta to wrap under the input at narrow widths */
@media (max-width: 420px) {
    .sticker-quantity-custom-ul .tmcp-field-wrap .tmcp-field-wrap-inner > label.tc-col.tm-epo-field-label.fullwidth {
        display: block !important;
    }
    .sticker-quantity-custom-ul .tmcp-field-wrap .tmcp-field-wrap-inner > label.tc-col.tm-epo-field-label.fullwidth > input[type="number"] {
        width: 100% !important;
        max-width: none !important;
    }
    .sticker-quantity-custom-ul .sticker-meta-inline {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 6px !important;
    }
}

.sticker-meta-unit {
    text-align: right;
    font-weight: bold;
    color: #374151;
}

.sticker-meta-discount {
    text-align: right;
    font-weight: bold;
    color: #2e7d32;
}

/* Make pass-through fields look like labels (optional). */
input.sticker-unit-price,
input.sticker-batch-price,
input.sticker-batch-total,
#sticker-unit-price-container input,
#sticker-batch-price-container input {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	pointer-events: none;
}

/* Optional: Emphasize the final total amount */
.tm-final-totals .amount {
	color: #1a73e8;
	font-weight: bold;
}

/* Visual overlay display for the price fields. Keeps input values numeric (used by EPO)
   and shows a mirrored read-only text + currency symbol placed immediately after the number. */
/* The inputs are inside container elements with the following IDs per the JS selectors: */
/* #sticker-unit-price-container and #sticker-batch-price-container */
#sticker-unit-price-container,
#sticker-batch-price-container {
    position: relative;
}

/* Overlay span that mirrors the input value and appends the euro symbol immediately after the number. */
.sticker-price-display {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    white-space: nowrap;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Right-align the unit price overlay so it sits immediately against the input's right edge.
   Keep the batch overlay (in the batch container) left-aligned by default. */
#sticker-unit-price-container .sticker-price-display {
    right: 8px;
    left: auto;
    text-align: right;
}

/* Make room inside the input so the overlay doesn't overlap the input padding area. */
#sticker-unit-price-container input,
#sticker-batch-price-container input,
input.sticker-unit-price,
input.sticker-batch-price {
    padding-left: 8px !important;
    padding-right: 8px !important;
    /* visually hide the input's native text so the overlay is the visible text, but keep the element accessible */
    color: transparent;
    caret-color: transparent; /* inputs are readonly so caret isn't needed */
}

/* Emphasize the batch total: larger, heavier, cyan color */
.sticker-price-display-batch {
    font-weight: 800;
    font-size: 1.5em;
    /* color: #00bcd4;  */
}

/* Slightly differentiate the unit price display (optional subtle styling) */
.sticker-price-display-unit {
    font-weight: 600;
}

/* Aligh to the right the contents of the unit-price field container */
#sticker-unit-price-container {
    text-align: right; 
}

/* Style for the euro symbol inside the overlay so it matches the numeric text closely */
.sticker-price-euro {
    margin-left: 2px;
}

/* Suffix for unit price (e.g. "/ pc" or "/ τεμ.") — placed immediately after the euro symbol */
.sticker-price-unit-suffix {
    margin-left: 5px;
    font-size: 1em;
    color: inherit;
}

/* Ensure the unit display doesn't wrap awkwardly; keep it inline with the number */
.sticker-price-display-unit,
.sticker-price-display-batch {
    white-space: nowrap;
}