/**
 * Service Quote & Invoice Manager — frontend.
 *
 * Scoped under .sqim-* so it cannot leak into the host theme, and built on
 * custom properties so a theme can restyle it without overriding rules.
 */

.sqim-calculator,
.sqim-portal {
	--sqim-accent: #8a5a2a;
	--sqim-ink: #1f1c19;
	--sqim-muted: #6e6459;
	--sqim-line: #e4dcd3;
	--sqim-bg: #ffffff;
	--sqim-soft: #faf7f4;
	--sqim-radius: 8px;
	--sqim-focus: #2563eb;

	box-sizing: border-box;
	color: var(--sqim-ink);
	font-size: 16px;
	line-height: 1.55;
	max-width: 780px;
	margin: 0 auto;
}

.sqim-calculator *,
.sqim-calculator *::before,
.sqim-calculator *::after,
.sqim-portal *,
.sqim-portal *::before,
.sqim-portal *::after {
	box-sizing: inherit;
}

.sqim-calculator__heading {
	margin: 0 0 18px;
	font-size: 1.6rem;
}

/* Card ------------------------------------------------------------------- */

.sqim-card {
	background: var(--sqim-bg);
	border: 1px solid var(--sqim-line);
	border-radius: var(--sqim-radius);
	box-shadow: 0 1px 2px rgba(31, 28, 25, .04), 0 8px 24px rgba(31, 28, 25, .06);
	padding: 28px;
	position: relative;
}

@media (max-width: 640px) {
	.sqim-card {
		padding: 20px 16px;
	}
}

/* Progress --------------------------------------------------------------- */

.sqim-progress {
	margin-bottom: 22px;
}

.sqim-progress__bar {
	background: var(--sqim-soft);
	border-radius: 999px;
	height: 6px;
	overflow: hidden;
}

.sqim-progress__fill {
	background: var(--sqim-accent);
	display: block;
	height: 100%;
	transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

.sqim-progress__label {
	color: var(--sqim-muted);
	font-size: .8rem;
	letter-spacing: .08em;
	margin: 8px 0 0;
	text-transform: uppercase;
}

/* Step ------------------------------------------------------------------- */

.sqim-step {
	animation: sqim-fade .25s ease both;
}

@keyframes sqim-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sqim-step { animation: none; }
	.sqim-progress__fill { transition: none; }
}

.sqim-step__eyebrow {
	color: var(--sqim-accent);
	font-size: .75rem;
	letter-spacing: .14em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.sqim-step__title {
	font-size: 1.35rem;
	line-height: 1.3;
	margin: 0 0 8px;
}

.sqim-step__title:focus {
	outline: none;
}

.sqim-step__help {
	color: var(--sqim-muted);
	margin: 0 0 18px;
}

/* Options ---------------------------------------------------------------- */

.sqim-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
}

.sqim-option {
	align-items: flex-start;
	background: var(--sqim-bg);
	border: 1px solid var(--sqim-line);
	border-radius: var(--sqim-radius);
	cursor: pointer;
	display: flex;
	gap: 14px;
	padding: 16px 18px;
	transition: border-color .2s ease, background-color .2s ease;
}

.sqim-option:hover {
	border-color: var(--sqim-accent);
}

.sqim-option.is-selected {
	background: var(--sqim-soft);
	border-color: var(--sqim-accent);
	box-shadow: inset 0 0 0 1px var(--sqim-accent);
}

/* Keep the native control: it carries the accessibility semantics for free. */
.sqim-option__input {
	accent-color: var(--sqim-accent);
	flex: 0 0 auto;
	height: 20px;
	margin: 2px 0 0;
	width: 20px;
}

.sqim-option__input:focus-visible {
	outline: 2px solid var(--sqim-focus);
	outline-offset: 2px;
}

.sqim-option__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.sqim-option__label {
	font-weight: 500;
}

.sqim-option__desc {
	color: var(--sqim-muted);
	font-size: .875rem;
}

.sqim-option__price {
	color: var(--sqim-accent);
	flex: 0 0 auto;
	font-size: .875rem;
	font-weight: 500;
	white-space: nowrap;
}

.sqim-option-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Quantity --------------------------------------------------------------- */

.sqim-qty {
	align-items: center;
	background: var(--sqim-soft);
	border: 1px solid var(--sqim-accent);
	border-radius: 0 0 var(--sqim-radius) var(--sqim-radius);
	border-top: 0;
	display: flex;
	gap: 10px;
	margin-top: -1px;
	padding: 10px 18px;
}

.sqim-qty__label {
	color: var(--sqim-muted);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sqim-qty__input {
	border: 1px solid var(--sqim-line);
	border-radius: 4px;
	padding: 6px 8px;
	width: 90px;
}

/* Fields ----------------------------------------------------------------- */

.sqim-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
	.sqim-grid {
		grid-template-columns: 1fr;
	}
}

.sqim-stack {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 14px;
}

.sqim-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.sqim-field__label {
	font-size: .875rem;
	font-weight: 500;
}

.sqim-required {
	color: #b3261e;
}

.sqim-input {
	background: var(--sqim-bg);
	border: 1px solid var(--sqim-line);
	border-radius: 6px;
	color: var(--sqim-ink);
	font: inherit;
	padding: 11px 12px;
	width: 100%;
}

.sqim-input:focus-visible {
	border-color: var(--sqim-accent);
	outline: 2px solid var(--sqim-focus);
	outline-offset: 1px;
}

.sqim-input--textarea {
	resize: vertical;
}

.sqim-field--error .sqim-input {
	border-color: #b3261e;
}

.sqim-field__error {
	color: #b3261e;
	font-size: .8rem;
	margin: 0;
}

.sqim-field__help {
	color: var(--sqim-muted);
	font-size: .8rem;
	margin: 0;
}

.sqim-check {
	align-items: flex-start;
	display: flex;
	gap: 10px;
}

.sqim-check input {
	accent-color: var(--sqim-accent);
	height: 18px;
	margin-top: 3px;
	width: 18px;
}

.sqim-check__label {
	font-size: .9rem;
}

/* Honeypot: removed from the accessibility tree and from view, never display:none
   so that a naive bot still sees a fillable field. */
.sqim-hp {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

/* Actions ---------------------------------------------------------------- */

.sqim-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 24px;
}

.sqim-actions--summary {
	justify-content: space-between;
}

.sqim-btn {
	background: var(--sqim-accent);
	border: 1px solid var(--sqim-accent);
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-size: .9rem;
	font-weight: 500;
	padding: 12px 22px;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.sqim-btn:hover {
	background: var(--sqim-ink);
	border-color: var(--sqim-ink);
	color: #fff;
}

.sqim-btn:focus-visible {
	outline: 2px solid var(--sqim-focus);
	outline-offset: 2px;
}

.sqim-btn[disabled] {
	cursor: default;
	opacity: .6;
}

.sqim-btn--ghost {
	background: transparent;
	color: var(--sqim-ink);
	border-color: var(--sqim-line);
}

.sqim-btn--ghost:hover {
	background: var(--sqim-soft);
	border-color: var(--sqim-accent);
	color: var(--sqim-ink);
}

.sqim-linkbtn {
	background: none;
	border: 0;
	color: var(--sqim-accent);
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
}

/* Notices ---------------------------------------------------------------- */

.sqim-notice {
	border-radius: 6px;
	font-size: .9rem;
	margin: 0 0 16px;
	padding: 12px 14px;
}

.sqim-notice--error {
	background: #fdecea;
	border: 1px solid #f5c2bd;
	color: #8c1d18;
}

.sqim-notice--info {
	background: var(--sqim-soft);
	border: 1px solid var(--sqim-line);
}

.sqim-notice ul {
	margin: 6px 0 0;
	padding-left: 20px;
}

.sqim-disclaimer {
	color: var(--sqim-muted);
	font-size: .82rem;
	margin-top: 16px;
}

/* Summary ---------------------------------------------------------------- */

.sqim-sum__group {
	margin-bottom: 18px;
}

.sqim-sum__service {
	border-bottom: 1px solid var(--sqim-line);
	font-size: .78rem;
	letter-spacing: .12em;
	margin: 0 0 8px;
	padding-bottom: 6px;
	text-transform: uppercase;
}

.sqim-sum__table {
	border-collapse: collapse;
	width: 100%;
}

.sqim-sum__table th,
.sqim-sum__table td {
	border-bottom: 1px solid var(--sqim-soft);
	padding: 8px 0;
	text-align: left;
	vertical-align: top;
}

.sqim-sum__label {
	display: block;
	font-weight: 400;
}

.sqim-sum__desc {
	color: var(--sqim-muted);
	display: block;
	font-size: .8rem;
	font-weight: 400;
}

.sqim-sum__qty {
	color: var(--sqim-muted);
	white-space: nowrap;
	width: 70px;
}

.sqim-sum__amount {
	text-align: right;
	white-space: nowrap;
	width: 120px;
}

.sqim-tot {
	border-top: 2px solid var(--sqim-ink);
	margin-top: 8px;
	padding-top: 12px;
}

.sqim-tot__row {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
}

.sqim-tot__row--grand {
	border-top: 1px solid var(--sqim-line);
	font-size: 1.15rem;
	margin-top: 6px;
	padding-top: 12px;
}

.sqim-tot__row--recurring {
	color: var(--sqim-accent);
}

/* Running total ---------------------------------------------------------- */

.sqim-runtotal {
	align-items: baseline;
	border-top: 1px solid var(--sqim-line);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
	padding-top: 14px;
}

.sqim-runtotal__label {
	color: var(--sqim-muted);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sqim-runtotal__value {
	font-size: 1.2rem;
}

.sqim-runtotal__monthly {
	color: var(--sqim-accent);
	font-size: .9rem;
}

/* Done ------------------------------------------------------------------- */

.sqim-step--done {
	text-align: center;
}

.sqim-done__mark {
	background: var(--sqim-accent);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	height: 56px;
	margin-bottom: 14px;
	width: 56px;
}

.sqim-step--done .sqim-actions {
	justify-content: center;
}

/* Portal ----------------------------------------------------------------- */

.sqim-portal {
	max-width: 860px;
}

.sqim-portal__head {
	align-items: flex-start;
	border-bottom: 1px solid var(--sqim-line);
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 22px;
	padding-bottom: 18px;
}

.sqim-portal__title {
	margin: 0 0 4px;
}

.sqim-portal__meta {
	color: var(--sqim-muted);
	font-size: .9rem;
	margin: 0;
}

.sqim-pill {
	border-radius: 999px;
	display: inline-block;
	font-size: .72rem;
	letter-spacing: .08em;
	padding: 5px 12px;
	text-transform: uppercase;
	background: var(--sqim-soft);
	border: 1px solid var(--sqim-line);
}

.sqim-pill--accepted,
.sqim-pill--paid { background: #e7f4ec; border-color: #b6dcc4; color: #1c6b3c; }

.sqim-pill--declined,
.sqim-pill--overdue,
.sqim-pill--cancelled { background: #fdecea; border-color: #f5c2bd; color: #8c1d18; }

.sqim-pill--sent,
.sqim-pill--viewed,
.sqim-pill--partial { background: #eef3fb; border-color: #c6d6ef; color: #1d4ed8; }

.sqim-portal__table {
	border-collapse: collapse;
	margin-bottom: 20px;
	width: 100%;
}

.sqim-portal__table th,
.sqim-portal__table td {
	border-bottom: 1px solid var(--sqim-line);
	padding: 10px 0;
	text-align: left;
}

.sqim-portal__table td:last-child,
.sqim-portal__table th:last-child {
	text-align: right;
}

.sqim-portal__notice {
	background: var(--sqim-soft);
	border: 1px solid var(--sqim-line);
	border-radius: 6px;
	margin-bottom: 20px;
	padding: 14px 16px;
}

.sqim-portal__decision {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.sqim-portal__details summary {
	cursor: pointer;
	font-weight: 500;
	margin-bottom: 12px;
}

/* Step illustration --------------------------------------------------------
   A step with an image splits into a content column and an image column. A
   step without one is untouched and stays full width. */

.sqim-step__split {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

.sqim-step__main {
	min-width: 0;
}

.sqim-step__media {
	border-radius: var(--sqim-radius);
	overflow: hidden;
}

/* The whole image is shown. It sizes to the column width and takes whatever
   height its own proportions require, so nothing is ever cropped. The
   max-height plus contain is only a backstop for very tall portrait images:
   it letterboxes rather than crops. */
.sqim-step__media img {
	display: block;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	width: 100%;
}

@media (min-width: 700px) {
	.sqim-step__split {
		/* start, not stretch: stretching would force the image column to the
		   height of the choices and reintroduce cropping. */
		align-items: start;
		gap: 24px;
		grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.sqim-step__media img {
		transition: opacity .2s ease;
	}
}

/* Two columns need more room than the single-column default allows. */
.sqim-calculator--wide {
	max-width: 1120px;
}

/* Phones get the form at full width. The script already skips rendering the
   image below this breakpoint; this is the fallback for browsers without
   matchMedia, so the markup can never leave a stray image on a phone. */
@media (max-width: 699px) {
	.sqim-step__media {
		display: none;
	}

	.sqim-step__split {
		display: block;
	}
}

/* Clear control ------------------------------------------------------------
   Pushed to the far left of the actions row so it cannot be mistaken for the
   primary action, and understated because it discards work. */

.sqim-btn--clear {
	background: none;
	border: 0;
	color: var(--sqim-muted);
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sqim-btn--clear:hover,
.sqim-btn--clear:focus-visible {
	background: none;
	color: var(--sqim-ink);
}

.sqim-btn--clear.is-hidden {
	display: none;
}

/* Answers that carry information rather than a price. */
.sqim-sum__row--info .sqim-sum__label {
	color: var(--sqim-muted);
	font-weight: 400;
}

.sqim-sum__row--info .sqim-sum__desc {
	color: var(--sqim-ink);
}

.sqim-tot__row--note {
	color: var(--sqim-muted);
}

/* Cash discount opt-in ----------------------------------------------------- */

.sqim-cash {
	align-items: flex-start;
	background: var(--sqim-soft);
	border: 1px solid var(--sqim-line);
	border-radius: var(--sqim-radius);
	cursor: pointer;
	display: flex;
	gap: 12px;
	margin-top: 18px;
	padding: 14px 16px;
}

.sqim-cash.is-on {
	border-color: var(--sqim-accent);
}

.sqim-cash input {
	flex: 0 0 auto;
	margin-top: 2px;
}

.sqim-cash__body {
	display: block;
}

.sqim-cash__label {
	display: block;
	font-weight: 600;
}

.sqim-cash__note {
	color: var(--sqim-muted);
	display: block;
	font-size: 13px;
	margin-top: 3px;
}

.sqim-tot__row--discount strong {
	color: #1c6b3c;
}

/* Portal inside a theme -----------------------------------------------------
   The portal renders inside the site's own templates, so the theme's link and
   table styling applies on top of everything above. These rules are qualified
   with the element name and scoped to .sqim-portal purely to win that
   specificity contest — without them an <a class="sqim-btn"> arrives as a
   full-width underlined block and the tables pick up a full cell grid. */

.sqim-portal a.sqim-btn,
.sqim-portal button.sqim-btn,
.sqim-calculator a.sqim-btn,
.sqim-calculator button.sqim-btn {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	justify-content: center;
	line-height: 1.3;
	min-height: 0;
	text-decoration: none;
	width: auto;
}

.sqim-portal a.sqim-btn:hover,
.sqim-portal a.sqim-btn:focus-visible {
	text-decoration: none;
}

/* The decision row holds an anchor and two single-button forms. Left to
   stretch, each grew to the height of the tallest and the row came out ragged. */
.sqim-portal__decision {
	align-items: center;
}

.sqim-portal__decision form {
	display: inline-flex;
	margin: 0;
}

/* Tables --------------------------------------------------------------------
   The theme draws a border on every cell, which left the text touching the
   rules. Restore the intended look: horizontal rules only, with the outer
   edges flush so the columns line up with the totals block underneath. */

.sqim-portal table.sqim-portal__table th,
.sqim-portal table.sqim-portal__table td {
	border: 0;
	border-bottom: 1px solid var(--sqim-line);
	padding: 12px 14px;
	vertical-align: top;
}

.sqim-portal table.sqim-portal__table th:first-child,
.sqim-portal table.sqim-portal__table td:first-child {
	padding-left: 0;
}

.sqim-portal table.sqim-portal__table th:last-child,
.sqim-portal table.sqim-portal__table td:last-child {
	padding-right: 0;
}

.sqim-portal table.sqim-portal__table tr:last-child td {
	border-bottom: 0;
}

/* The theme also zebra-stripes tables. It paints the cells rather than the
   rows, so the stripe has to be cleared on the cells to actually go away. */
.sqim-portal table.sqim-portal__table tr td,
.sqim-portal table.sqim-portal__table tr th,
.sqim-portal table.sqim-portal__table tbody tr:nth-child(odd) td,
.sqim-portal table.sqim-portal__table tbody tr:nth-child(even) td {
	background: transparent;
	background-color: transparent;
}

/* wpautop wraps the whitespace between the portal's block elements in empty
   paragraphs. They are invisible but still count as flex items, which added
   phantom gaps to the decision row. */
.sqim-portal p:empty,
.sqim-calculator p:empty {
	display: none;
}