/* AGD Door Visualiser — brand styling (matches the Albany Garage Doors theme). */
.agdv { max-width: 940px; margin: 0 auto; }
.agdv-notice { background: #EAF4FC; border-left: 4px solid #1C75BC; padding: 14px 18px; border-radius: 6px; }

/* An element with the `hidden` attribute must stay hidden even when a more
   specific rule below sets `display`. Without this, empty <img> elements
   render as broken-image icons before a photo is chosen. */
.agdv [hidden] { display: none !important; }

.agdv-step { margin-bottom: 32px; }
.agdv-step h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.agdv-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: #1C75BC; color: #fff; font-size: 16px; flex-shrink: 0;
}
.agdv-hint { font-size: .9rem; color: #4B5563; margin: 0 0 14px; }

/* ---------- 1. photo ---------- */
.agdv-drop {
	display: block; border: 2px dashed #9AA3AE; border-radius: 12px;
	padding: 26px; text-align: center; cursor: pointer;
	background: #F5F7FA; transition: border-color .15s ease, background .15s ease;
}
.agdv-drop.is-drag, .agdv-drop:hover { border-color: #1C75BC; background: #EAF4FC; }
.agdv-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.agdv-drop-icon { display: block; color: #1C75BC; margin-bottom: 8px; }
.agdv-drop-icon svg { width: 40px; height: 40px; }
.agdv-drop.has-photo .agdv-drop-icon { display: none; }
#agdv-drop-label { font-weight: 600; color: #1C75BC; }
#agdv-preview { max-width: 100%; max-height: 340px; border-radius: 8px; display: block; }

/* ---------- 1b. marking the door opening ---------- */
/* The box the visitor confirms before rendering. The door is composited into
   this quad server-side, so getting it roughly right is what makes the finished
   door land in the opening rather than across the wall. */
.agdv-mark { margin-top: 14px; text-align: center; }
.agdv-mark-stage {
	position: relative; display: inline-block; max-width: 100%;
	line-height: 0; border-radius: 8px; overflow: hidden;
	touch-action: none; /* so dragging a handle doesn't scroll the page */
}
.agdv-mark-svg {
	position: absolute; inset: 0; width: 100%; height: 100%;
	pointer-events: none;
}
.agdv-mark-svg polygon {
	fill: rgba(28, 117, 188, .16);
	stroke: #F5A623; stroke-width: .7;
	vector-effect: non-scaling-stroke;
}
.agdv-mark-handles { position: absolute; inset: 0; }
.agdv-mark-handle {
	position: absolute; width: 30px; height: 30px; margin: 0; padding: 0;
	transform: translate(-50%, -50%);
	border: 3px solid #FFFFFF; border-radius: 50%;
	background: #1C75BC; box-shadow: 0 1px 5px rgba(0, 0, 0, .45);
	cursor: grab; touch-action: none; -webkit-appearance: none; appearance: none;
}
.agdv-mark-handle:focus-visible { outline: 3px solid #F5A623; outline-offset: 2px; }
.agdv-mark-handle.is-dragging { cursor: grabbing; background: #F5A623; }
.agdv-mark-note {
	margin: 10px 0 0; font-size: 14px; color: #4B5563; line-height: 1.45;
}
.agdv-mark-note.is-busy { color: #1C75BC; }

/* ---------- 2. door type ---------- */
.agdv-ranges {
	display: grid; gap: 12px;
	grid-template-columns: 1fr;
}
@media (min-width: 560px) { .agdv-ranges { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .agdv-ranges { grid-template-columns: repeat(4, 1fr); } }

.agdv-range {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	text-align: left; width: 100%;
	border: 2px solid #E4E8EC; background: #fff; border-radius: 12px;
	padding: 16px; cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.agdv-range:hover { border-color: #1C75BC; transform: translateY(-2px); }
.agdv-range.is-active { border-color: #1C75BC; background: #F4FAFF; box-shadow: 0 0 0 3px rgba(28,117,188,.14); }
.agdv-range-icon { width: 46px; height: 46px; color: #1C75BC; flex-shrink: 0; }
.agdv-range.is-active .agdv-range-icon { color: #124E7D; }
.agdv-range-body { display: block; }
.agdv-range-name { display: block; font-weight: 700; font-size: 1rem; color: #17191C; margin-bottom: 4px; }
.agdv-range-blurb { display: block; font-size: .82rem; line-height: 1.45; color: #4B5563; }
.agdv-range-swatches { display: flex; align-items: center; gap: 3px; margin-top: 10px; flex-wrap: wrap; }
.agdv-mini { width: 15px; height: 15px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); }
.agdv-mini-more { font-size: .72rem; font-weight: 700; color: #6B7280; margin-left: 3px; }

/* ---------- 3. profile ---------- */
.agdv-styles { display: flex; flex-wrap: wrap; gap: 10px; }
.agdv-style {
	display: flex; align-items: center; gap: 10px;
	border: 2px solid #E4E8EC; background: #fff; border-radius: 10px;
	padding: 9px 14px 9px 9px; font-weight: 600; cursor: pointer; font-size: .92rem;
	color: #1F2328;
	transition: border-color .15s ease, background .15s ease;
}
.agdv-style:hover { border-color: #1C75BC; }
.agdv-style.is-active { border-color: #1C75BC; background: #EAF4FC; color: #124E7D; }
.agdv-style-name { white-space: nowrap; }

/* Miniature drawings of each panel profile, so the names mean something. */
.agdv-style-swatch {
	width: 46px; height: 34px; border-radius: 5px; flex-shrink: 0;
	border: 1px solid rgba(0,0,0,.18);
	background: #D8DDE2;
	background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, rgba(255,255,255,.55) 1px 3px, rgba(0,0,0,0) 3px 11px);
}
.agdv-profile-ribline {
	background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.3) 0 2px, rgba(255,255,255,.7) 2px 4px, rgba(0,0,0,0) 4px 8px);
}
.agdv-profile-fineline {
	background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, rgba(0,0,0,0) 1px 2.5px);
}
.agdv-profile-flat-panel {
	background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, rgba(255,255,255,.55) 1px 2px, rgba(0,0,0,0) 2px 11px);
}
.agdv-profile-pressed-panel {
	background-image:
		repeating-linear-gradient(90deg, rgba(0,0,0,.24) 0 1px, rgba(0,0,0,0) 1px 15px),
		repeating-linear-gradient(180deg, rgba(0,0,0,.24) 0 1px, rgba(0,0,0,0) 1px 11px);
}
.agdv-profile-colorsteel-roller,
.agdv-profile-wind-rated-roller {
	background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.2) 0 1px, rgba(255,255,255,.65) 1px 3px, rgba(0,0,0,0) 3px 5px);
}
.agdv-profile-aluminium-slat-roller {
	background: #C9CFD5;
	background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.3) 0 1px, rgba(255,255,255,.7) 1px 4px, rgba(0,0,0,0) 4px 8px);
}
.agdv-profile-steel-roller-shutter {
	background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.34) 0 2px, rgba(255,255,255,.6) 2px 4px, rgba(0,0,0,0) 4px 8px);
}

/* ---------- 4. colour ---------- */
.agdv-colours {
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.agdv-colour {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	border: 2px solid #E4E8EC; background: #fff; border-radius: 8px;
	padding: 8px 6px; cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.agdv-colour:hover { border-color: #1C75BC; }
.agdv-colour.is-active { border-color: #1C75BC; background: #EAF4FC; box-shadow: 0 0 0 2px rgba(28,117,188,.16); }
.agdv-swatch { width: 100%; height: 38px; border-radius: 5px; border: 1px solid rgba(0,0,0,.18); }
.agdv-colour-name { font-size: .76rem; font-weight: 600; color: #1F2328; text-align: center; line-height: 1.25; }

/* ---------- action ---------- */
.agdv-actions { text-align: center; margin: 30px 0; }
.agdv-summary { font-weight: 600; color: #124E7D; margin: 0 0 14px; font-size: .95rem; }
.agdv-go {
	background: #F5A623; color: #17191C; border: 0; border-radius: 6px;
	font-weight: 700; font-size: 1.05rem; padding: 16px 34px; cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.agdv-go:hover:not(:disabled) { background: #e0951c; transform: translateY(-2px); }
.agdv-go:disabled { opacity: .5; cursor: not-allowed; }
.agdv-status { margin-top: 12px; font-weight: 600; color: #1C75BC; min-height: 1.4em; }
.agdv-status.is-error { color: #E5484D; }

/* ---------- result ---------- */
.agdv-result-spec { text-align: center; font-weight: 600; color: #124E7D; margin: 0 0 16px; }

/* View switcher */
.agdv-views {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
	margin: 0 auto 18px; padding: 5px;
	background: #F0F3F6; border-radius: 10px; width: fit-content; max-width: 100%;
}
.agdv-view {
	display: inline-flex; align-items: center; gap: 8px;
	border: 0; background: transparent; color: #4B5563;
	border-radius: 7px; padding: 10px 16px; cursor: pointer;
	font-weight: 600; font-size: .9rem; line-height: 1; font-family: inherit;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.agdv-view svg { width: 19px; height: 19px; flex-shrink: 0; }
.agdv-view:hover { color: #1C75BC; }
.agdv-view.is-active { background: #fff; color: #124E7D; box-shadow: 0 1px 3px rgba(15,23,42,.14); }
.agdv-view-short { display: none; }
@media (max-width: 560px) {
	.agdv-views { width: 100%; gap: 4px; }
	.agdv-view { flex: 1 1 0; justify-content: center; padding: 9px 4px; font-size: .78rem; gap: 5px; }
	.agdv-view-long { display: none; }
	.agdv-view-short { display: inline; }
	.agdv-view svg { width: 16px; height: 16px; }
}
@media (max-width: 380px) {
	.agdv-view-short { display: none; }
	.agdv-view svg { width: 21px; height: 21px; }
}

/* Drag-to-compare slider.
   Both images sit in one aspect-ratio box at identical size, so the "before"
   layer can be clipped horizontally to reveal the render underneath. The box
   holds its shape from the moment the render arrives, which stops the page
   jumping while the image loads. */
.agdv-slider { max-width: 900px; margin: 0 auto; }
.agdv-slider-frame {
	position: relative; overflow: hidden; border-radius: 12px;
	aspect-ratio: 4 / 3; background: #E8ECF0;
	user-select: none; -webkit-user-select: none; touch-action: pan-y;
	box-shadow: 0 6px 22px rgba(15,23,42,.13);
}
.agdv-slider-frame img {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover;
	display: block; pointer-events: none; -webkit-user-drag: none;
}
.agdv-slider-clip {
	position: absolute; inset: 0; width: 50%;
	overflow: hidden; will-change: width;
}
/* The clipped layer is half-width, so its image needs the frame's full width
   to stay in register with the render behind it. */
.agdv-slider-clip img { width: var(--agdv-frame-w, 900px); max-width: none; }

.agdv-handle {
	position: absolute; top: 0; bottom: 0; left: 50%;
	width: 4px; margin-left: -2px; background: #fff;
	cursor: ew-resize; touch-action: none;
	box-shadow: 0 0 0 1px rgba(15,23,42,.16);
}
.agdv-handle:focus-visible { outline: 3px solid #F5A623; outline-offset: 2px; }
.agdv-handle-grip {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 46px; height: 46px; border-radius: 50%;
	background: #fff; color: #1C75BC;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 3px 12px rgba(15,23,42,.3);
}
.agdv-handle-grip svg { width: 26px; height: 26px; }
.agdv-tag {
	position: absolute; top: 12px; z-index: 2;
	background: rgba(23,25,28,.72); color: #fff;
	font-size: .74rem; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; padding: 5px 11px; border-radius: 20px;
	pointer-events: none;
}
.agdv-tag-before { left: 12px; }
.agdv-tag-after { right: 12px; }
.agdv-slider-hint { text-align: center; font-size: .86rem; color: #6B7280; margin: 10px 0 0; }

/* Side by side */
.agdv-compare { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .agdv-compare { grid-template-columns: 1fr 1fr; } }
.agdv-compare figure { margin: 0; }
.agdv-compare img { width: 100%; border-radius: 10px; display: block; }
.agdv-compare figcaption { text-align: center; font-weight: 600; font-size: .9rem; color: #4B5563; margin-top: 6px; }

/* Render on its own */
.agdv-single { max-width: 900px; margin: 0 auto; }
.agdv-single figure { margin: 0; }
.agdv-single img {
	width: 100%; border-radius: 12px; display: block;
	box-shadow: 0 6px 22px rgba(15,23,42,.13);
}
.agdv-single figcaption { text-align: center; font-weight: 600; font-size: .9rem; color: #4B5563; margin-top: 8px; }

.agdv-result-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 22px 0 10px; }
.agdv-quote {
	background: #F5A623; color: #17191C !important; border-radius: 6px;
	font-weight: 700; padding: 14px 26px; text-decoration: none;
}
.agdv-quote:hover { background: #e0951c; }
.agdv-download, .agdv-again {
	background: transparent; border: 2px solid #1C75BC; color: #1C75BC;
	border-radius: 6px; font-weight: 600; padding: 12px 22px;
	text-decoration: none; cursor: pointer; font-size: .95rem;
	font-family: inherit; line-height: 1.3;
}
.agdv-download:disabled { opacity: .55; cursor: default; }
.agdv-download:hover, .agdv-again:hover { background: #1C75BC; color: #fff; }
.agdv-disclaimer { font-size: .82rem; color: #6B7280; text-align: center; max-width: 660px; margin: 10px auto 0; }