/* DoctorX Made-to-Measure Checkout: picker, checkout, order and account pages.
   Inherits the theme's fonts and colours; the accent comes from Settings. */
.drx-mtm {
	--drx-accent: #2b6777;
	--drx-line: rgba(0, 0, 0, .16);
	--drx-soft: rgba(0, 0, 0, .04);
	--drx-muted: currentColor;
	--drx-bad: #b32d2e;
	--drx-ok: #00703c;
	--drx-r: 10px;
	box-sizing: border-box;
	max-width: 760px;
	margin: 1.5em 0;
	line-height: 1.5;
}
.drx-mtm *, .drx-mtm *::before, .drx-mtm *::after { box-sizing: inherit; }
.drx-mtm h2 { margin: 1.2em 0 .5em; }
.drx-mtm h3 { margin: 1em 0 .4em; font-size: 1.05em; }

/* Steps */
.drx-mtm-picker, .drx-mtm-form { display: grid; gap: 14px; }
.drx-mtm-step { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--drx-line); border-radius: var(--drx-r); }
.drx-mtm-step[hidden] { display: none; }
.drx-mtm-step legend { padding: 0 6px; font-weight: 700; font-size: 1.05em; }
.drx-mtm-optional { font-weight: 400; opacity: .75; font-size: .9em; }
.drx-mtm-help, .drx-mtm-dim small { display: block; margin: 8px 0 0; font-size: .9em; opacity: .85; }
.drx-mtm-note { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--drx-soft); font-size: .95em; }
.drx-mtm-alert { margin: 8px 0; padding: 10px 12px; border-left: 4px solid var(--drx-bad); border-radius: 6px; background: rgba(179, 45, 46, .08); }
.drx-mtm-err { display: block; margin: 6px 0 0; color: var(--drx-bad); font-weight: 600; font-size: .92em; }
.drx-mtm-err[hidden] { display: none; }

/* Fields */
.drx-mtm label { font-weight: 600; }
.drx-mtm-field { margin: 0 0 10px; }
.drx-mtm-field label { display: block; margin-bottom: 4px; }
.drx-mtm input[type="text"], .drx-mtm input[type="email"], .drx-mtm input[type="tel"], .drx-mtm input[type="number"], .drx-mtm input[type="password"], .drx-mtm select, .drx-mtm textarea {
	width: 100%; max-width: 100%; min-height: 44px; padding: 8px 10px; font: inherit; font-size: 16px;
	border: 1px solid var(--drx-line); border-radius: 8px; background: #fff; color: #1d2327;
}
.drx-mtm textarea { min-height: 80px; }
.drx-mtm input:focus-visible, .drx-mtm select:focus-visible, .drx-mtm textarea:focus-visible, .drx-mtm button:focus-visible, .drx-mtm a:focus-visible, .drx-mtm summary:focus-visible {
	outline: 3px solid var(--drx-accent); outline-offset: 2px;
}
.drx-mtm [aria-invalid="true"] { border-color: var(--drx-bad); box-shadow: 0 0 0 1px var(--drx-bad); }
.drx-mtm-check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.drx-mtm-check input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--drx-accent); }

/* Size */
.drx-mtm-dims { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) { .drx-mtm-dims { grid-template-columns: 1fr 1fr; } }
.drx-mtm-dim > label { display: block; margin-bottom: 4px; }
.drx-mtm-dim-row { display: flex; gap: 6px; align-items: center; }
.drx-mtm-dim-row input { flex: 1 1 5em; }
.drx-mtm-dim-row select { flex: 0 0 auto; width: auto; }
.drx-mtm-unit { opacity: .8; }

/* Choice cards (materials and options) */
.drx-mtm-swatches, .drx-mtm-choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 480px) { .drx-mtm-swatches, .drx-mtm-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.drx-mtm-card { position: relative; display: block; cursor: pointer; margin: 0; font-weight: 400; }
.drx-mtm-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.drx-mtm-face { display: flex; gap: 12px; align-items: center; min-height: 56px; height: 100%; padding: 10px 12px; border: 1px solid var(--drx-line); border-radius: var(--drx-r); }
.drx-mtm-choice .drx-mtm-face { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.drx-mtm-face small { display: block; font-size: .88em; opacity: .85; }
.drx-mtm-face img, .drx-mtm-chip { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: repeating-linear-gradient(45deg, #eee 0 6px, #fff 6px 12px); box-shadow: inset 0 0 0 1px var(--drx-line); }
.drx-mtm-name { font-weight: 600; }
.drx-mtm-add { font-weight: 600; color: var(--drx-accent); white-space: nowrap; }
.drx-mtm-card:hover .drx-mtm-face { border-color: var(--drx-accent); }
.drx-mtm-card input:checked + .drx-mtm-face { border-color: var(--drx-accent); box-shadow: inset 0 0 0 2px var(--drx-accent); }
.drx-mtm-card input:focus-visible + .drx-mtm-face { outline: 3px solid var(--drx-accent); outline-offset: 2px; }
.drx-mtm-card input:disabled + .drx-mtm-face { opacity: .5; cursor: not-allowed; }
.drx-mtm-collection { margin: 12px 0 6px; font-weight: 700; }
.drx-mtm-links a { font-weight: 600; }

/* Measuring guide */
.drx-mtm-guide { margin-top: 12px; }
.drx-mtm-guide summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.drx-mtm-guide-figs { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 620px) { .drx-mtm-guide-figs { grid-template-columns: 1fr 1fr; } }
.drx-mtm-fig { margin: 0; }
.drx-mtm-fig svg { display: block; width: 100%; height: auto; border-radius: 8px; }

/* Price and add to cart */
.drx-mtm-buy { display: grid; gap: 10px; padding: 16px; border-radius: var(--drx-r); background: var(--drx-soft); border: 1px solid var(--drx-line); }
.drx-mtm-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.drx-mtm-each { font-size: 2em; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.drx-mtm-price-note { font-size: .95em; }
.drx-mtm-buy-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.drx-mtm-qty { margin: 0; width: 7em; }
.drx-mtm-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px; border: 0; border-radius: 999px; background: var(--drx-accent); color: #fff; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.drx-mtm-button:hover { filter: brightness(.92); color: #fff; }
.drx-mtm-button:disabled { opacity: .55; cursor: not-allowed; }
.drx-mtm-link { min-height: 44px; padding: 6px 8px; border: 0; background: none; color: var(--drx-accent); font: inherit; text-decoration: underline; cursor: pointer; }
.drx-mtm-status { margin: 0; min-height: 1.5em; font-weight: 600; }
@media (max-width: 600px) {
	.drx-mtm-picker .drx-mtm-buy { position: sticky; bottom: 0; z-index: 20; box-shadow: 0 -6px 16px rgba(0, 0, 0, .08); background: #fff; color: #1d2327; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
	.drx-mtm-each { font-size: 1.6em; }
}

/* Cart and checkout */
.drx-mtm-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--drx-line); }
.drx-mtm-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--drx-line); }
.drx-mtm-line.is-invalid { background: rgba(179, 45, 46, .05); }
.drx-mtm-line-main { flex: 1 1 260px; min-width: 0; }
.drx-mtm-line-details { margin: 4px 0 0; padding: 0; list-style: none; font-size: .92em; opacity: .9; }
.drx-mtm-line-side { flex: 0 0 auto; text-align: right; display: grid; justify-items: end; gap: 2px; }
.drx-mtm-line-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.drx-mtm-qty-form { display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.drx-mtm-qty-form input { width: 5em; }
.drx-mtm-totals { width: 100%; border-collapse: collapse; margin: 8px 0; font-variant-numeric: tabular-nums; }
.drx-mtm-totals th, .drx-mtm-totals td { padding: 6px 0; text-align: left; font-weight: 400; border-bottom: 1px solid var(--drx-line); }
.drx-mtm-totals td { text-align: right; }
.drx-mtm-totals tfoot th, .drx-mtm-totals tfoot td, .drx-mtm-totals .drx-mtm-row-total th, .drx-mtm-totals .drx-mtm-row-total td { font-weight: 700; font-size: 1.1em; border-bottom: 0; border-top: 2px solid currentColor; }
.drx-mtm-review { padding: 16px; border: 2px solid var(--drx-accent); border-radius: var(--drx-r); }
.drx-mtm-terms { font-size: .93em; }
.drx-mtm-terms h3 { font-size: 1em; margin: .8em 0 .2em; }
.drx-mtm-terms p { margin: 0 0 .5em; }
.drx-mtm-place { width: 100%; }
@media (min-width: 600px) { .drx-mtm-place { width: auto; } }
.drx-mtm-pay[hidden], .drx-mtm-form[hidden] { display: none; }
.drx-mtm-paypal { max-width: 420px; margin: 12px 0; }

.drx-mtm-code { margin: 12px 0 0; }
.drx-mtm-code-input { display: flex; gap: 8px; align-items: center; }
.drx-mtm-code-input input { flex: 1 1 auto; text-transform: uppercase; }
.drx-mtm-button--small { min-height: 44px; padding: 8px 16px; }
.drx-mtm-code-on { font-weight: 600; }

/* Order page */
.drx-mtm-status-line { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.drx-mtm-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .85em; font-weight: 700; background: var(--drx-soft); border: 1px solid var(--drx-line); }
.drx-mtm-badge--paid, .drx-mtm-badge--delivered, .drx-mtm-badge--shipped, .drx-mtm-badge--ready, .drx-mtm-badge--in_production { color: var(--drx-ok); border-color: currentColor; }
.drx-mtm-badge--review, .drx-mtm-badge--cancelled, .drx-mtm-badge--refunded { color: var(--drx-bad); border-color: currentColor; }
.drx-mtm-instructions { margin: 12px 0; padding: 14px 16px; border-left: 4px solid var(--drx-accent); border-radius: 8px; background: var(--drx-soft); }
.drx-mtm-instructions p { margin: 0 0 .5em; }
.drx-mtm-paid { font-weight: 700; color: var(--drx-ok); }
.drx-mtm-columns { display: grid; gap: 16px; }
@media (min-width: 640px) { .drx-mtm-columns { grid-template-columns: 1fr 1fr; } }
.drx-mtm-history { margin: 0; padding-left: 1.2em; font-size: .93em; }
.drx-mtm-history time { display: block; opacity: .75; font-size: .9em; }
.drx-mtm-lookup { max-width: 420px; }

/* Account */
.drx-mtm-orders { width: 100%; border-collapse: collapse; }
.drx-mtm-orders th, .drx-mtm-orders td { padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--drx-line); }
.drx-mtm-social { width: 100%; max-width: 360px; background: #fff; color: #1d2327; border: 1px solid var(--drx-line); }
.drx-mtm-social:hover { color: #1d2327; }

/* Price table */
.drx-mtm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.drx-mtm-price-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.drx-mtm-price-table th, .drx-mtm-price-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--drx-line); }
.drx-mtm-price-table td { text-align: right; font-weight: 600; white-space: nowrap; }
.drx-mtm-price-table caption { caption-side: bottom; padding-top: 8px; text-align: left; font-size: .9em; }

.drx-mtm .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .drx-mtm * { transition: none !important; } }
@media print {
	.drx-mtm-noprint, .drx-mtm-paypal, .drx-mtm-qty-form, .drx-mtm-button { display: none !important; }
	.drx-mtm { max-width: none; }
}
