/* Site-wide polish for the converted mockup pages: readable placeholders, the Amy avatar,
   icons, and the styling for interactions.js (accordions, carousels, galleries, options). */

/* ---------- Amy avatar placeholder (replaces the near-invisible "AMY" text) ---------- */
#bms-main :is(.amy-face, .amyface, .help-face, .amy-photo, .amy-avatar, .amyphoto) {
	background: url("../img/amy-avatar.svg") center / cover no-repeat;
	color: transparent !important;
	text-shadow: none !important;
	font-size: 0 !important;
}
#bms-main :is(.amyface, .amy-photo, .amyphoto, .amy-face, .help-face)::before,
#bms-main :is(.amyface, .amy-photo, .amyphoto, .amy-face, .help-face)::after { content: none !important; }
#bms-main .amy-avatar { min-width: 72px; min-height: 72px; flex: 0 0 auto; border-radius: 8px; }

/* Amy cards always sit above the hero placeholder drawings. */
#bms-main :is(.amy-card, .amycard) { z-index: 3; }
#bms-main .faq.open span:last-child { transform: rotate(180deg); display: inline-block; }
#bms-main .bms-faq-item { min-width: 0; }

/* Long email addresses wrap instead of spilling out of their boxes. */
#bms-main :is(.help-actions, .help-action, .contact-card, .support-grid, .value) { overflow-wrap: break-word; }

/* Amy cards sit on top of the hero drawing on narrow screens instead of underneath it. */
@media (max-width: 900px) {
	#bms-main :is(.amy-card, .amycard, aside.amy) {
		position: relative !important; inset: auto !important; z-index: 3;
		width: auto !important; max-width: 100%; margin: 16px 0 0;
	}
}

/* ---------- Icons ---------- */
#bms-main .bms-i { max-width: 100%; max-height: 100%; }
#bms-main :is(.icon, .ticon, .hicon, .bicon, .ic, .ico, [class$="-icon"]) { flex-shrink: 0; }

/* ---------- Forms ---------- */
#bms-main ::placeholder { color: #8a97b2; font-weight: 400; opacity: 1; }
#bms-main input[type="checkbox"], #bms-main input[type="radio"] { width: auto; flex: 0 0 auto; }
@media (max-width: 600px) {
	#bms-main :is(.grid2, .grid3, .forms, .form-grid, .field-row, .row2, .row3) { grid-template-columns: minmax(0, 1fr) !important; }
}
.bms-pw { position: relative; display: block; }
.bms-pw input { padding-right: 44px !important; }
.bms-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: none; color: #66769a; cursor: pointer; display: grid; place-items: center; }
.bms-pw-toggle.is-on { color: #1452cc; }

/* ---------- FAQ accordion ---------- */
#bms-main .faq-row.bms-acc { cursor: pointer; transition: background-color .15s; }
#bms-main .faq-row.bms-acc:hover { background-color: #f4f7fd; }
#bms-main .faq-row.bms-acc > span:last-child { transition: transform .2s; display: inline-block; }
#bms-main .faq-row.bms-acc.is-open > span:last-child { transform: rotate(180deg); }
#bms-main .faq-row + .faq-answer { display: none; padding: 10px 14px 14px; margin: -2px 0 6px; font-size: 13.5px; line-height: 1.55; color: #43547c; background: #f7f9fe; border: 1px solid #d9e2f2; border-top: 0; border-radius: 0 0 6px 6px; }
#bms-main .faq-row.is-open { border-radius: 6px 6px 0 0; background-color: #f4f7fd; }
#bms-main .faq-row.is-open + .faq-answer { display: block; }

/* ---------- Selectable options ---------- */
#bms-main .bms-selectable { cursor: pointer; position: relative; transition: border-color .15s, box-shadow .15s; }
#bms-main .bms-selectable:hover { box-shadow: 0 0 0 2px rgba(20, 82, 204, .25); }
#bms-main .bms-selectable.is-selected { box-shadow: 0 0 0 2px #1452cc; border-color: #1452cc !important; }
#bms-main .bms-selectable.is-selected::after {
	content: "✓"; position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
	background: #1452cc; color: #fff; font: 800 12px/20px Arial, sans-serif; text-align: center; z-index: 2;
}
#bms-main .swatch.bms-selectable.is-selected::after { top: -5px; right: -5px; width: 16px; height: 16px; font-size: 10px; line-height: 16px; }
#bms-main .product.bms-selectable.is-selected::after, #bms-main .work.bms-selectable.is-selected::after { top: 8px; right: 8px; }

/* ---------- Galleries and carousels ---------- */
#bms-main .bms-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid #d9e2f2; background: rgba(255, 255, 255, .95); color: #0a2f88; cursor: pointer;
	display: grid; place-items: center; font: 400 28px/1 Georgia, serif; box-shadow: 0 4px 14px rgba(10, 47, 136, .15);
	transition: background-color .15s, opacity .15s; padding: 0 0 3px;
}
#bms-main .bms-arrow:hover:not(:disabled) { background: #0a2f88; color: #fff; }
#bms-main .bms-arrow:disabled { opacity: .35; cursor: default; }
#bms-main .bms-arrow-prev { left: 10px; }
#bms-main .bms-arrow-next { right: 10px; }
#bms-main .bms-gal-label { position: absolute; left: 12px; bottom: 12px; z-index: 3; background: rgba(10, 47, 136, .85); color: #fff; font: 700 12px/1 Arial, sans-serif; padding: 7px 10px; border-radius: 4px; }
#bms-main .bms-gal-has-img::before, #bms-main .bms-gal-has-img::after { display: none !important; }
#bms-main .thumbs .thumb, #bms-main .thumb.bms-selectable { cursor: pointer; }

#bms-main .bms-car { position: relative; }
#bms-main .bms-car-track {
	display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; grid-template-columns: none !important; gap: 12px;
}
#bms-main .bms-car-track::-webkit-scrollbar { display: none; }
#bms-main .bms-car-track > * {
	flex: 0 0 calc((100% - (var(--bms-visible) - 1) * 12px) / var(--bms-visible)); scroll-snap-align: start; min-width: 0;
}
@media (max-width: 600px) {
	#bms-main .bms-car-track > * { flex-basis: calc((100% - 12px) / var(--bms-visible-phone)); }
}
#bms-main .bms-car .bms-arrow { top: calc(50% - 12px); }
#bms-main .bms-car .bms-arrow-prev { left: -8px; }
#bms-main .bms-car .bms-arrow-next { right: -8px; }
#bms-main .bms-car.is-static .bms-arrow, #bms-main .bms-car.is-static .bms-dots { display: none; }
#bms-main .bms-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
#bms-main .bms-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: #c7d2e8; cursor: pointer; }
#bms-main .bms-dot.is-on { background: #0a2f88; width: 22px; border-radius: 4px; }

/* ---------- Clickable cards, videos, filters ---------- */
#bms-main .bms-card-link { cursor: pointer; transition: transform .15s, box-shadow .15s; }
#bms-main .bms-card-link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 47, 136, .16); }
#bms-main .bms-video { cursor: pointer; }
#bms-main [data-tab] { cursor: pointer; }
#bms-main .bms-empty { padding: 24px; text-align: center; color: #5d6f96; background: #f7f9fe; border-radius: 8px; }
#bms-main .bms-empty a { color: #1452cc; font-weight: 700; }
#bms-main .map-toggle { cursor: pointer; }
#bms-main .map-toggle.is-on { color: #1452cc; font-weight: 700; }
#bms-main [hidden] { display: none !important; }
#bms-main :focus-visible { outline: 2px solid #1452cc; outline-offset: 2px; }

/* ---------- Toast and modal ---------- */
.bms-toast {
	position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px); z-index: 99999; opacity: 0; pointer-events: none;
	background: #0a2f88; color: #fff; font: 600 14px/1.4 Arial, sans-serif; padding: 12px 18px; border-radius: 8px;
	box-shadow: 0 10px 28px rgba(10, 47, 136, .3); transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); text-align: center;
}
.bms-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.bms-modal { position: fixed; inset: 0; z-index: 99998; background: rgba(6, 20, 60, .55); display: grid; place-items: center; padding: 16px; }
.bms-modal-box { position: relative; width: min(520px, 100%); background: #fff; border-radius: 12px; padding: 26px 24px 22px; font: 15px/1.5 Arial, sans-serif; color: #17306b; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.bms-modal-box h3 { margin: 0 34px 12px 0; font: 700 22px/1.25 Georgia, serif; color: #0a2f88; }
.bms-modal-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; background: none; font-size: 26px; line-height: 1; color: #5d6f96; cursor: pointer; }
.bms-video-soon { text-align: center; background: linear-gradient(145deg, #e8eefc, #f8efe8); border-radius: 10px; padding: 26px 16px 18px; }
.bms-video-soon .bms-i { width: 54px; height: 54px; color: #ff4a12; }
.bms-video-soon p { margin: 8px 0 0; }

/* "PRO" wordmark: a lighter orange reads better on the navy band. */
#bms-main :is(.pro, .pro-band, .pro-footer) :is(h1, h2, h3, h4, span, b, strong).orange { color: #ff7a45; }

/* Ordering previews: wide tables scroll inside their card on phones instead of widening the page. */
@media(max-width:600px){.bms-order-preview table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* Amy "available now" status: darker green so the small text is readable on white. */
#bms-main :is(.amy, .assistant) :is(.online, .avail, .available), .bms-online { color: #157a3a !important; }

/* WordPress puts class "page" on <body>, so a mockup's own .page{max-width…;margin:0 auto} boxed in the whole site. */
body.page { max-width: none !important; margin: 0 !important; }
/* FAQ chevrons: CSS chevron centred on the question line (the ⌄ glyph sat low). */
#bms-main .faq-row.bms-acc { align-items: center; }
#bms-main .faq-row.bms-acc > span:last-child { font-size: 0; width: 7px; height: 7px; flex: 0 0 auto; margin: 0 4px 3px 12px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#bms-main .faq-row.bms-acc.is-open > span:last-child { transform: rotate(225deg); margin-bottom: -3px; }
/* Pro band on mockup pages: column widths that keep "Builders, Designers & Trade Pros" on one line. */
@media (min-width: 901px) {
	#bms-main .pro:has(> div:nth-child(4):last-child) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.15fr); }
	#bms-main .pro > div > span:first-child strong { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1180px) { #bms-main .pro > div > span:first-child strong { font-size: 14px; white-space: normal; } }
/* Talk / Chat pairs: same height (Chat has a 2px border, Talk had none). */
#bms-main :is(.talk, .amy-btn.talk) { border: 2px solid transparent; }