/*
 * Bundle Builder (template-bundle-builder.php, assets/js/bundle-builder.js).
 * Numbered steps of product tiles on the left, a sticky summary on the
 * right; on phones the summary follows the steps and a small bar keeps the
 * total in view.
 */
.dma-bb-hero { padding-bottom: 12px !important; }
.dma-bb-empty { grid-column: 1 / -1; text-align: center; color: var(--dma-text-muted); padding: 40px 20px; }

.dma-bundle-a3655c67 {
	max-width: 1240px; margin: 0 auto; padding: 20px 24px 90px;
	display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start;
}
.dma-bundle-groups-a3655c67 { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ---- Steps ---- */
.dma-bb-step {
	background: var(--dma-surface); border: 1px solid var(--dma-border);
	border-radius: var(--dma-radius, 12px); padding: 16px 18px 18px;
	scroll-margin-top: 90px;
}
.dma-bb-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dma-bb-step-num {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--dma-border-hover); color: var(--dma-heading);
	font-size: 14px; font-weight: 700; background: var(--dma-bg);
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.dma-bb-step-tick { display: none; width: 16px; height: 16px; }
.dma-bb-step.is-done .dma-bb-step-num { background: var(--dma-accent); border-color: var(--dma-accent); color: #fff; }
.dma-bb-step.is-done .dma-bb-step-n { display: none; }
.dma-bb-step.is-done .dma-bb-step-tick { display: block; }
.dma-bb-step-text { flex: 1 1 auto; min-width: 0; }
.dma-bundle-group-title-a3655c67 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; color: var(--dma-heading); letter-spacing: -0.01em; }
.dma-bb-step-hint { margin: 3px 0 0; font-size: 13px; color: var(--dma-text-muted); }
.dma-bundle-required-a3655c67 {
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
	padding: 3px 8px; border-radius: 6px; background: var(--dma-accent-dim); color: var(--dma-accent);
}
.dma-bb-clear {
	flex: 0 0 auto; background: none; border: 1px solid var(--dma-border); border-radius: var(--dma-radius-sm, 8px);
	padding: 6px 12px; color: var(--dma-text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.dma-bb-clear:hover { border-color: var(--dma-accent); color: var(--dma-heading); }

/* ---- Tiles ---- */
.dma-bb-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.dma-bb-options--card,
.dma-bb-options--fuser { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.dma-bb-options--firmware { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }

.dma-bb-tile {
	position: relative; display: flex; flex-direction: column; align-items: stretch;
	padding: 0; overflow: hidden; text-align: left; cursor: pointer;
	font: inherit; color: inherit;
	background: var(--dma-bg); border: 1px solid var(--dma-border);
	border-radius: var(--dma-radius-md, 10px);
	transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.dma-bb-tile:hover { border-color: var(--dma-accent); }
.dma-bb-tile:focus-visible { outline: 2px solid var(--dma-accent); outline-offset: 2px; }
.dma-bb-tile.dma-bundle-active-a3655c67 { border-color: var(--dma-accent); box-shadow: inset 0 0 0 1px var(--dma-accent); background: var(--dma-accent-dim); }

.dma-bb-tile-media {
	display: flex; align-items: center; justify-content: center;
	height: 124px; padding: 12px;
	background: var(--dma-card-band, linear-gradient(180deg, #16161b 0%, #2a1519 100%));
	border-bottom: 1px solid var(--dma-border);
}
.dma-bb-options--controller .dma-bb-tile-media,
.dma-bb-options--extra .dma-bb-tile-media { height: 96px; padding: 10px; }
.dma-bb-options--firmware .dma-bb-tile-media { height: 56px; padding: 8px; }
.dma-bb-tile-media img,
.dma-bundle-option-img-a3655c67 {
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: contain; display: block; margin: 0 !important;
	transition: transform .25s ease;
}
.dma-bb-tile:hover .dma-bb-tile-media img { transform: scale(1.04); }
.dma-bb-tile-media--none { color: var(--dma-text-muted); background: var(--dma-surface); }
.dma-bb-tile-media--none svg,
.dma-bb-fw-chip svg { width: 28px; height: 28px; }
.dma-bb-fw-chip { color: var(--dma-accent); display: inline-flex; }

.dma-bb-tile-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; flex: 1 1 auto; }
.dma-bb-tile .dma-bundle-option-name-a3655c67 {
	font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--dma-heading);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dma-bb-tile-meta { font-size: 12px; color: var(--dma-text-muted); line-height: 1.35; }
.dma-bb-tile-meta--fit { color: var(--dma-text); display: inline-flex; align-items: center; gap: 6px; }
.dma-bb-tile-meta--fit::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #f0a93b; flex: 0 0 auto; }
.dma-bb-tile .dma-bundle-option-price-a3655c67 { margin-top: auto; padding-top: 2px; font-size: 15px; font-weight: 700; color: var(--dma-heading); }
.dma-bb-tile .dma-bundle-option-price-a3655c67 .woocommerce-Price-amount { color: inherit; }

.dma-bb-tile-check {
	position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .25); color: transparent;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dma-bb-tile-check svg { width: 14px; height: 14px; }
.dma-bb-tile.dma-bundle-active-a3655c67 .dma-bb-tile-check { background: var(--dma-accent); border-color: var(--dma-accent); color: #fff; }
[data-theme="light"] .dma-bb-tile-check { background: rgba(255, 255, 255, .7); border-color: rgba(0, 0, 0, .15); }

/* Notes on a tile (empty enclosure needs the M.2 Card) */
.dma-bundle-option-note-a3655c67 { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.35; color: var(--dma-text-muted); }
.dma-bundle-note-icon-a3655c67 {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 16px; height: 16px; border-radius: 50%; background: var(--dma-accent-dim); color: var(--dma-accent);
	font-size: 10px; font-weight: 800;
}
.dma-bundle-option--compatible-a3655c67 .dma-bundle-note-icon-a3655c67 { background: rgba(95, 217, 122, .15); color: #5fd97a; }
.dma-bundle-option--blocked-a3655c67,
.dma-bundle-option--soldout-a3655c67 { cursor: not-allowed; border-style: dashed; }
.dma-bundle-option--blocked-a3655c67:hover,
.dma-bundle-option--soldout-a3655c67:hover { border-color: var(--dma-border); }
.dma-bundle-option--blocked-a3655c67 .dma-bb-tile-media,
.dma-bundle-option--blocked-a3655c67 .dma-bundle-option-name-a3655c67,
.dma-bundle-option--blocked-a3655c67 .dma-bundle-option-price-a3655c67,
.dma-bundle-option--soldout-a3655c67 .dma-bb-tile-media,
.dma-bundle-option--soldout-a3655c67 .dma-bundle-option-name-a3655c67 { opacity: .45; }
.dma-bundle-option--blocked-a3655c67 .dma-bundle-option-note-a3655c67 { color: var(--dma-accent); }
.dma-bb-soldout-tag { font-size: 12px; font-weight: 700; color: var(--dma-accent); }

@keyframes dmaBbFlash { 0% { box-shadow: inset 0 0 0 1px var(--dma-accent), 0 0 0 0 rgba(239, 82, 78, .5); } 100% { box-shadow: inset 0 0 0 1px var(--dma-accent), 0 0 0 10px rgba(239, 82, 78, 0); } }
.dma-bb-tile.is-flash { animation: dmaBbFlash .7s ease-out; }

/* ---- Summary ---- */
.dma-bundle-summary-a3655c67 {
	position: sticky; top: 88px;
	max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
	background: var(--dma-surface); border: 1px solid var(--dma-border);
	border-radius: var(--dma-radius, 12px); padding: 22px;
}
.dma-bundle-summary-a3655c67 h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--dma-heading); }
.dma-bb-checklist { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.dma-bb-checklist li {
	display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 8px;
	border: 1px solid var(--dma-border); font-size: 12px; font-weight: 600; color: var(--dma-text-muted);
}
.dma-bb-check-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--dma-border-hover); flex: 0 0 auto; position: relative; }
.dma-bb-checklist li.is-done { color: var(--dma-heading); border-color: rgba(95, 217, 122, .35); }
.dma-bb-checklist li.is-done .dma-bb-check-dot { background: #5fd97a; border-color: #5fd97a; }
.dma-bb-checklist li.is-done .dma-bb-check-dot::after {
	content: ''; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px;
	border: solid #0b0c14; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.dma-bundle-summary-list-a3655c67 { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.dma-bundle-summary-item-a3655c67 { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dma-text); }
.dma-bb-sum-img { width: 40px; height: 40px; flex: 0 0 auto; object-fit: contain; border-radius: 8px; background: var(--dma-bg); border: 1px solid var(--dma-border); padding: 3px; box-sizing: border-box; }
.dma-bb-sum-img--fw { display: inline-flex; align-items: center; justify-content: center; color: var(--dma-accent); }
.dma-bb-sum-img--fw svg { width: 22px; height: 22px; }
.dma-bb-sum-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.dma-bb-sum-text small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dma-text-muted); }
.dma-bb-sum-text span { color: var(--dma-heading); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dma-bb-sum-price { flex: 0 0 auto; font-weight: 600; color: var(--dma-heading); }
.dma-bundle-summary-empty-a3655c67 { font-size: 13px; color: var(--dma-text-muted); }

/* Savings progress */
.dma-bb-progress { margin: 6px 0 30px; padding: 0 4px; }
.dma-bb-progress-track { position: relative; height: 6px; border-radius: 6px; background: var(--dma-bg); border: 1px solid var(--dma-border); }
.dma-bb-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: var(--dma-accent); transition: width .35s ease, background .2s ease; }
.dma-bb-progress-fill.is-off { background: var(--dma-border-hover); }
.dma-bb-progress-mark { position: absolute; top: -5px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0; pointer-events: none; }
.dma-bb-progress-mark::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--dma-surface); border: 2px solid var(--dma-border-hover); box-sizing: border-box; transition: border-color .2s ease, background .2s ease; }
.dma-bb-progress-mark b { margin-top: 4px; font-size: 11px; line-height: 1; color: var(--dma-text-muted); }
.dma-bb-progress-mark small { font-size: 10px; line-height: 1.3; color: var(--dma-text-muted); }
.dma-bb-progress-mark small .woocommerce-Price-amount { color: inherit; }
.dma-bb-progress-mark.dma-bundle-tier--reached-a3655c67::before { background: var(--dma-accent); border-color: var(--dma-accent); }
.dma-bb-progress-mark.dma-bundle-tier--reached-a3655c67 b { color: var(--dma-accent); }

.dma-bundle-next-tier-a3655c67 { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: var(--dma-accent-dim); color: var(--dma-heading); font-size: 12px; line-height: 1.45; }
.dma-bundle-summary-row-a3655c67 { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0 0; font-size: 13px; color: var(--dma-text); }
.dma-bundle-summary-row-a3655c67[hidden] { display: none; }
.dma-bundle-summary-subtotal-a3655c67 { border-top: 1px solid var(--dma-border); padding-top: 12px; }
.dma-bundle-summary-savings-a3655c67 { color: #5fd97a; font-weight: 700; padding-bottom: 6px; }
.dma-bundle-summary-total-a3655c67 { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; margin: 6px 0 12px; border-top: 1px solid var(--dma-border); font-size: 16px; font-weight: 700; color: var(--dma-heading); }
.dma-bundle-total-amount-a3655c67 { font-size: 22px; color: var(--dma-heading); }

.dma-bundle-coupon-a3655c67 { margin: 0 0 14px; }
.dma-bundle-coupon-label-a3655c67 { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--dma-text-muted); list-style: none; }
.dma-bundle-coupon-label-a3655c67::-webkit-details-marker { display: none; }
.dma-bundle-coupon-label-a3655c67::before { content: '+ '; color: var(--dma-accent); font-weight: 700; }
.dma-bundle-coupon-a3655c67[open] .dma-bundle-coupon-label-a3655c67::before { content: '\2212  '; }
.dma-bundle-coupon-label-a3655c67:hover { color: var(--dma-heading); }
.dma-bundle-coupon-input-a3655c67 { width: 100%; height: 42px; margin-top: 10px; box-sizing: border-box; padding: 0 12px; border-radius: var(--dma-radius-sm, 8px); border: 1px solid var(--dma-border); background: var(--dma-bg); color: var(--dma-heading); font: inherit; font-size: 14px; outline: none; }
.dma-bundle-coupon-input-a3655c67:focus { border-color: var(--dma-accent); }
.dma-bundle-coupon-note-a3655c67 { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--dma-text-muted); }

.dma-bundle-add-a3655c67 { width: 100%; font-size: 15px !important; padding: 14px 18px !important; }
.dma-bundle-add-a3655c67:disabled { opacity: .45; cursor: not-allowed; }
.dma-bb-missing { margin: 10px 0 0; font-size: 12px; text-align: center; color: var(--dma-text-muted); }
/* "Will it fit?" under the Add button: one line that opens into the question */
.dma-bb-fit {
	margin-top: 12px; border-radius: var(--dma-radius-sm, 8px);
	background: rgba(240, 169, 59, .07); border: 1px solid rgba(240, 169, 59, .3);
}
.dma-bb-fit[hidden] { display: none; }
.dma-bb-fit.is-ok { background: rgba(95, 217, 122, .06); border-color: rgba(95, 217, 122, .3); }
.dma-bb-fit-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; font-size: 12px; line-height: 1.4; color: var(--dma-text); }
.dma-bb-fit-head::-webkit-details-marker { display: none; }
.dma-bb-fit-head:hover { color: var(--dma-heading); }
.dma-bb-fit-summary-icon { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: rgba(240, 169, 59, .2); color: #f0a93b; }
.dma-bb-fit.is-ok .dma-bb-fit-summary-icon { background: rgba(95, 217, 122, .18); color: #5fd97a; }
.dma-bb-fit-summary-text { flex: 1 1 auto; }
.dma-bb-fit-chev { flex: 0 0 auto; width: 7px; height: 7px; margin: 0 3px 3px; border-right: 2px solid var(--dma-text-muted); border-bottom: 2px solid var(--dma-text-muted); transform: rotate(45deg); transition: transform .2s ease; }
.dma-bb-fit[open] .dma-bb-fit-chev { transform: rotate(225deg); margin: 3px 3px 0; }
.dma-bb-fit-body { padding: 0 12px 12px; }
.dma-bb-fit[open] .dma-bb-fit-body { animation: dmaBbIn .2s ease-out; }
@keyframes dmaBbIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dma-bb-fit .dma-fit-question { margin: 2px 0 8px; font-size: 12px; }
.dma-bb-fit .dma-fit-choices { grid-template-columns: 1fr 1fr; gap: 6px; }
.dma-bb-fit .dma-fit-choice { font-size: 12px; padding: 8px; text-align: center; background: var(--dma-bg); }
.dma-bb-fit .dma-fit-text { font-size: 12px; }
.dma-bb-fit .dma-fit-add { font-size: 12px; padding: 8px 10px; }
.dma-bundle-error-a3655c67 { margin: 12px 0 0; font-size: 12px; color: #ff8f8f; text-align: center; }

/* ---- Phone bar ---- */
.dma-bb-mobilebar { display: none; }

@media (max-width: 1000px) {
	.dma-bundle-a3655c67 { grid-template-columns: 1fr; }
	.dma-bundle-summary-a3655c67 { position: static; max-height: none; overflow: visible; }
	.dma-bb-mobilebar:not([hidden]) {
		position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		padding: 10px 10px 10px 16px; border-radius: 12px;
		background: var(--dma-surface); border: 1px solid var(--dma-border-hover);
		box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
		transition: transform .25s ease, opacity .25s ease;
	}
	.dma-bb-mobilebar.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
	.dma-bb-mobilebar-total { display: flex; flex-direction: column; line-height: 1.2; font-size: 11px; color: var(--dma-text-muted); }
	.dma-bb-mobilebar-total strong { font-size: 17px; color: var(--dma-heading); }
	.dma-bb-mobilebar-btn { padding: 10px 16px; border-radius: var(--dma-radius-btn, 10px); background: var(--dma-accent); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; }
}
@media (max-width: 600px) {
	.dma-bundle-a3655c67 { padding: 12px 12px 90px; gap: 18px; }
	.dma-bb-step { padding: 16px 14px 16px; }
	.dma-bb-step-head { gap: 10px; }
	.dma-bundle-group-title-a3655c67 { font-size: 16px; }
	.dma-bb-options,
	.dma-bb-options--card,
	.dma-bb-options--fuser { grid-template-columns: 1fr 1fr; gap: 10px; }
	.dma-bb-options--firmware { grid-template-columns: 1fr 1fr; }
	.dma-bb-tile-media { height: 96px; padding: 8px; }
	.dma-bb-options--controller .dma-bb-tile-media,
	.dma-bb-options--extra .dma-bb-tile-media { height: 80px; }
	.dma-bb-options--firmware .dma-bb-tile-media { height: 48px; }
	.dma-bb-tile-body { padding: 10px 11px 12px; }
	.dma-bb-tile .dma-bundle-option-name-a3655c67 { font-size: 14px; }
	.dma-bb-tile .dma-bundle-option-price-a3655c67 { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
	.dma-bb-fit[open] .dma-bb-fit-body, .dma-bb-tile.is-flash { animation: none; }
	.dma-bb-tile:hover .dma-bb-tile-media img { transform: none; }
}

/* Summary card spacing (0.40.18): the savings bar gets its own titled block
   with room for the labels, and the rows below breathe a little more. */
.dma-bb-summary .dma-bundle-summary-list-a3655c67 { margin-bottom: 18px; }
.dma-bb-progress { margin: 4px 0 18px; padding: 14px 14px 46px; background: var(--dma-bg); border: 1px solid var(--dma-border); border-radius: 10px; }
.dma-bb-progress-title { margin: 0 0 16px; font-size: 12px; font-weight: 600; color: var(--dma-text-muted); }
.dma-bb-progress-track { margin: 0 10px; background: var(--dma-surface); }
.dma-bb-progress-mark b { margin-top: 8px; font-size: 12px; }
.dma-bb-progress-mark small { margin-top: 3px; font-size: 11px; }
.dma-bundle-next-tier-a3655c67 { margin: 0 0 18px; padding: 11px 13px; }
.dma-bb-summary .dma-bundle-summary-row-a3655c67 { padding: 7px 0; }
.dma-bb-summary .dma-bundle-summary-total-a3655c67 { margin-top: 8px; padding-top: 14px; }
.dma-bb-summary .dma-bundle-coupon-a3655c67 { margin: 14px 0 16px; }