/* ---------------------------------------------------------------------
 * Fix: LatePoint's own native "Price Breakdown" row - .summary-price-item-w
 * (the same wrapper class LatePoint uses both in the Price Breakdown box
 * and in its default 2-column invoice item list - see lppic-front.js,
 * which already targets this exact class to hide it when our own invoice
 * table replaces it). On some themes/layouts this row's label and value
 * wrap onto separate lines instead of sitting label-right / value-left.
 * This forces it back into a single, non-wrapping row regardless of the
 * children's own markup/classes.
 * ------------------------------------------------------------------- */

/* Bug fix: on an invoice, LatePoint's native "Price Breakdown" box (shared
 * with the booking/cart flow) duplicates the same per-service + totals
 * numbers the invoice's own items/amount-info section already shows below
 * it - see the matching fix in lppic-front.js (dedupeBreakdownBoxes). This
 * CSS rule hides it immediately on load so there's no visible flash of the
 * duplicate box before the JS runs. */
.invoice-document .summary-price-breakdown-wrapper {
	display: none !important;
}

.summary-price-item-w {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 10px;
}

.summary-price-item-w > * {
	white-space: nowrap;
}

.summary-price-item-w > *:first-child {
	white-space: normal;
	min-width: 0;
	flex: 1 1 auto;
}

.summary-price-item-w.spi-positive {
	color: #0b5d34;
}
.summary-price-item-w.spi-positive .spi-price {
	color: #0b5d34;
}

/* ---------------------------------------------------------------------
 * Kill the duplicate price breakdown that shows inside the invoice
 * document (".invoice-document .summary-price-item-w") once our own,
 * more detailed 4-column table is injected below it. Done in plain CSS
 * (not JS) on purpose: it applies the instant the page paints, with no
 * dependency on any AJAX call finishing first or any DOM-timing race.
 *
 * BUG FIX: this used to spare ".spi-positive" rows, meaning to keep a
 * genuine "Payments & Credits" row visible - but our OWN "total discount
 * per service" row is ALSO type=credit/.spi-positive (same as a real
 * payment row), so that exception was accidentally preserving exactly
 * the single duplicate row being reported (with a stale, pre-save number,
 * since this native copy reflects the last-saved order, not the live
 * form). Hiding all of them, unconditionally, is what's actually wanted.
 * ------------------------------------------------------------------- */
.invoice-document .summary-price-item-w {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * Compact "have a coupon?" widget - used on item cards (customer view)
 * and inside the admin per-item coupon panel.
 * ------------------------------------------------------------------- */

.lppic-item-coupon-w {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 1.5;
	margin-top: 4px;
}

.lppic-item-coupon-w .lppic-toggle-trigger {
	color: #4a6cf7;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.lppic-item-coupon-w .lppic-toggle-trigger:hover {
	text-decoration: underline;
}

.lppic-item-coupon-w .lppic-input-row {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.lppic-item-coupon-w .lppic-coupon-input {
	width: 90px;
	padding: 3px 6px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	font-size: 12px;
}

.lppic-item-coupon-w .lppic-apply-btn {
	padding: 3px 10px;
	border: none;
	border-radius: 4px;
	background: #4a6cf7;
	color: #fff;
	font-size: 12px;
	cursor: pointer;
	white-space: nowrap;
}

.lppic-item-coupon-w .lppic-apply-btn:hover {
	background: #3454db;
}

.lppic-item-coupon-w .lppic-applied-row {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.lppic-item-coupon-w .lppic-applied-code {
	font-weight: 700;
	color: #0b5d34;
	background: rgba(26, 156, 92, 0.1);
	padding: 1px 7px;
	border-radius: 4px;
	font-size: 12px;
	letter-spacing: 0.5px;
}

.lppic-item-coupon-w .lppic-remove-btn {
	color: #a7a7a7;
	text-decoration: none;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}

.lppic-item-coupon-w.lppic-readonly {
	display: inline-block;
	margin: 0 6px;
	vertical-align: middle;
}

.lppic-item-coupon-w.lppic-readonly .lppic-applied-code {
	cursor: default;
}

.lppic-item-coupon-w .lppic-message {
	display: block;
	margin-top: 2px;
	font-size: 11px;
}

.lppic-item-coupon-w .lppic-message.lppic-error {
	color: #d64545;
}

.lppic-item-coupon-w .lppic-message.lppic-success {
	color: #0b5d34;
}

/* ---------------------------------------------------------------------
 * Admin "Edit Order" screen: coupon field inside each order item's own
 * booking-details box. Styled as a single-line, rounded "pill" (matching
 * the site's existing look for this kind of inline option toggle).
 * ------------------------------------------------------------------- */

.lppic-order-item-coupon-block {
	padding: 5px 10px 5px 5px;
	background-color: #f3f3f3;
	border-radius: 15px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.lppic-order-item-coupon-block .os-form-group.os-form-toggler-group {
	margin: 0;
}

.lppic-order-item-coupon-content {
	margin: 0;
}

.lppic-order-item-coupon-content .lppic-item-coupon-w {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}

.lppic-order-item-coupon-content .lppic-coupon-input {
	padding: 4px 8px;
	min-height: auto;
	font-size: 13px;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.lppic-order-item-coupon-content .lppic-apply-btn {
	display: block;
	padding: 4px 12px;
	font-size: 13px;
	border: 1px solid #bbb;
	border-bottom-color: #999;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	background: #fff;
	color: #333;
	cursor: pointer;
}

.lppic-order-item-coupon-content .lppic-apply-btn:hover {
	background: #f7f7f7;
}

.lppic-order-item-coupon-content .lppic-applied-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.lppic-note {
	font-size: 12px;
	color: #888;
	margin: 0;
}

/* ---------------------------------------------------------------------
 * Invoice view: 4-column items table (description+coupon | full |
 * discount | final), injected via JS over the default 2-column list.
 * Kept intentionally minimal: no outer box, no vertical lines - only a
 * thin line between rows. Font is deliberately small since every row
 * packs in 4 columns of information (plus service extras as their own
 * rows below).
 * ------------------------------------------------------------------- */

.lppic-items-table {
	margin-top: 6px;
	font-size: 11px;
	direction: rtl; /* explicit, so column order (desc right -> final left) never
	                   depends on whatever direction the surrounding page happens
	                   to be in (the invoice "clean" layout doesn't always wrap
	                   content in .latepoint-w, which is what rtl-front.css hooks into) */
}

.lppic-items-table-head,
.lppic-items-table-row {
	display: grid;
	grid-template-columns: 3fr 1.1fr 1.1fr 1.1fr;
	align-items: center;
	gap: 10px;
	padding: 5px 2px;
}

.lppic-items-table-head {
	font-weight: 700;
	font-size: 10px;
	color: #888;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding-bottom: 4px;
}

.lppic-items-table-row {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.lppic-items-table-row:last-of-type {
	border-bottom: none;
}

/* Bug fix: CSS Grid items default to "min-width: auto", which means their
 * MINIMUM width is their content's own natural (nowrap) width, not the
 * grid track's width. So as soon as a cell's content (e.g. a discount
 * amount plus its "(رایگان)" note) is wider than its 1.1fr track, the grid
 * track itself is forced wider and/or the content visually spills into the
 * neighbouring column instead of wrapping - which is exactly the
 * title/price "overlap" bug (a subrow's discount text bleeding over the
 * "مبلغ نهایی" column, which then reads as blank). `min-width: 0` makes the
 * cell actually respect its track width, so long content wraps inside its
 * own column instead of overlapping the next one. */
.lppic-col {
	min-width: 0;
}

/* Explicit alignment per column, independent of text-align inheritance:
 * the description/title is flush to the right edge of its cell, every
 * price column is flush to the LEFT edge of its cell. */
.lppic-col-desc {
	text-align: right;
}

.lppic-col-full,
.lppic-col-discount,
.lppic-col-final {
	text-align: left;
	white-space: normal; /* allow a long value (amount + note) to wrap onto a
	                         second line inside its own column instead of
	                         overflowing into the next one (see .lppic-col
	                         comment above) */
	word-break: break-word;
}

.lppic-col-final {
	font-weight: 700;
}

.lppic-col-discount {
	color: #0b5d34;
}

.lppic-item-name {
	font-weight: 600;
}

/* Service-extra rows: same 4-column grid as the service row right above
 * them (so everything lines up in the same columns), just visually
 * lighter/smaller and without the row-separator line, so they read as
 * "belonging to" that service rather than as their own separate service. */
.lppic-items-table-subrow {
	border-bottom: none;
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 10px;
	color: #777;
}

.lppic-items-table-subrow .lppic-col-desc {
	padding-right: 14px; /* indent under the service name above, RTL-safe */
}

.lppic-items-table-subrow .lppic-col-final {
	font-weight: 600;
}

/* The "(رایگان)"/custom label note sits on its own line under the discount
 * amount rather than inline after it - inline was the main contributor to
 * this cell's content overflowing into the "مبلغ نهایی" column next to it. */
.lppic-item-extra-discount-note {
	display: block;
	color: #0b5d34;
	font-size: 9px;
}

.lppic-items-table-total-discount {
	display: flex;
	justify-content: space-between;
	padding: 8px 2px 2px;
	margin-top: 2px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-weight: 700;
	color: #0b5d34;
}

/* "screen" only, deliberately - see the dedicated @media print block
 * below, which forces the normal 4-column grid back on regardless of
 * this rule, so printing never falls into the stacked mobile layout. */
@media screen and (max-width: 560px) {
	.lppic-items-table-head {
		display: none;
	}

	.lppic-items-table-row {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.lppic-items-table-row .lppic-col:not(.lppic-col-desc) {
		display: flex;
		justify-content: space-between;
		text-align: initial;
	}

	.lppic-items-table-row .lppic-col:not(.lppic-col-desc)::before {
		content: attr(data-label);
		font-weight: 600;
		color: #888;
	}
}

/* Printing: always force the normal desktop 4-column grid, no matter how
 * narrow the printed page/viewport is measured as - this is what keeps
 * "Print" from falling back into the stacked one-column-per-row mobile
 * layout above. */
@media print {
	.lppic-items-table-head,
	.lppic-items-table-row {
		display: grid !important;
		grid-template-columns: 3fr 1.1fr 1.1fr 1.1fr !important;
	}

	.lppic-items-table-row .lppic-col:not(.lppic-col-desc) {
		display: block !important;
		text-align: center !important;
	}

	.lppic-items-table-row .lppic-col:not(.lppic-col-desc)::before {
		content: none !important;
	}
}

/* ---------------------------------------------------------------------
 * Admin coupon create/edit form: "restrict to specific service extras"
 * field, injected via JS.
 * ------------------------------------------------------------------- */

.lppic-coupon-extras-field {
	margin: 14px 0;
}

.lppic-coupon-extras-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.lppic-coupon-extras-select {
	width: 100%;
	min-height: 100px;
	padding: 6px;
	font-size: 13px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
}

.lppic-coupon-extras-field .lppic-note {
	margin-top: 4px;
}

.lppic-extra-discount-box {
	margin-top: 4px;
}

.lppic-extra-discount-box .lppic-save-extra-discount-btn {
	margin-top: 10px;
}

.lppic-item-units {
	font-size: 12px;
	font-weight: 400;
	color: #777;
}

.lppic-extra-discount-enable-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	margin: 8px 0;
	cursor: pointer;
}

.lppic-extra-discount-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.lppic-extra-discount-fields select,
.lppic-extra-discount-fields input {
	padding: 6px 8px;
	font-size: 13px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
}

.lppic-extra-discount-fields .lppic-extra-discount-label {
	flex: 1 1 200px;
}