/*
 * Calls to Action (inc/cta.php, inc/callback.php, inc/email-us.php; assets/js/cta.js): the two popups ("Request a
 * callback", "Email us") and the floating panel. Only loaded while one of them is on.
 *
 * The boxes, labels, red "wrong" state and the black send button are the brochure form's (blocks.css: the popup has
 * the classes bronze-brochure / brochure-form). This file makes it a popup and compact: the aim is for the whole
 * form, button included, to fit a phone screen without scrolling (about 560px tall, so it fits a 667px-tall
 * iPhone SE with the browser's bars showing). Shorter screens scroll inside the popup. The selectors repeat
 * ".bronze-cta-popup.bronze-brochure" so they outrank blocks.css's longer brochure ones.
 */

/* The page behind doesn't scroll while the popup is open. */
html.vc-open{overflow:hidden}

.bronze-cta-popup{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;background:#fff;color:#474747;box-shadow:0 10px 40px rgba(0,0,0,.35);overflow:auto;overscroll-behavior:contain}
.bronze-cta-popup::backdrop{background:rgba(30,30,30,.65)} /* the site's near-black, dimmed */
.bronze-cta-popup .vc-inner{position:relative;padding:26px 28px 20px}

.bronze-cta-popup .vc-close{position:absolute;top:6px;right:6px;width:44px;height:44px;padding:0;border:0;background:none;color:#655d60;font:300 34px/44px Poppins,sans-serif;cursor:pointer}
.bronze-cta-popup .vc-close:focus-visible{outline:3px solid #b7a998}

/* Headings in capitals, as the Vale popups' are (there it's the site's heading style; here only in the popups). */
.bronze-cta-popup h2{margin:0 44px 6px 0;font-size:26px;line-height:1.15;text-transform:uppercase;outline:none}
/* Text sizes: a step below the Vale popup's. Poppins is about a fifth bigger than Vale's Jost at the same size
   (x-height .55 against .46), so the same numbers looked crowded. The site gives every paragraph 1px of letter
   spacing; the popup's small print is tidier without it, as on Vale. */
.bronze-cta-popup p{letter-spacing:normal}
.bronze-cta-popup .vc-intro{margin:0 0 4px;font-size:14px;line-height:1.4}
.bronze-cta-popup .vc-when-heading{margin:14px 0 0;font-size:15px;line-height:1.2;letter-spacing:1px;text-transform:uppercase;color:#655d60}

/* The form fills the popup (the brochure page's form is half the width, centred). */
.bronze-cta-popup.bronze-brochure .brochure-form .field{width:auto;margin:0}

/* Rows: title / forename / surname, then email / phone. */
.bronze-cta-popup .vc-row{display:grid;gap:0 8px;align-items:start}
.bronze-cta-popup .vc-row > div{min-width:0}
.bronze-cta-popup .vc-row-name{grid-template-columns:minmax(78px,1fr) 2fr 2fr}
.bronze-cta-popup .vc-row-contact{grid-template-columns:1fr 1fr}

/* Compact boxes: 44px tall rather than 50 (still easy to tap). 16px text so iPhones don't zoom in on them. */
.bronze-cta-popup.bronze-brochure .brochure-form .vb-f{margin-top:8px}
.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f input,
.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f select,
.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f textarea{min-height:44px;padding:11px 10px}
.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f textarea{min-height:64px;height:64px;resize:vertical} /* two lines */
.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f > label{left:12px;top:12px;max-width:calc(100% - 36px);font-size:14px}
/* What's typed or chosen: 15px with a mouse; 16px on touch screens (below that, iPhones zoom in on the box). */
@media (hover:hover) and (pointer:fine){
	.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f input,
	.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f select,
	.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f textarea{font-size:15px}
}
.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f.vb-sel select{padding-right:28px;background-position:right 10px center}
.bronze-cta-popup.bronze-brochure .brochure-form .vb-f.bad::after{top:11px;right:8px}
.bronze-cta-popup.bronze-brochure .brochure-form .vb-f.vb-sel.bad::after{right:28px}
/* The name boxes are too narrow for the red "!" as well as the label: the red box is enough there. */
.bronze-cta-popup.bronze-brochure .brochure-form .vc-row-name .vb-f.bad::after{display:none}
.bronze-cta-popup.bronze-brochure .brochure-form .vb-hint{margin:2px 0 0;font-size:13px}

/* The time buttons: one row, like the brochure form's Hard Copy / PDF choice but shorter. */
.bronze-cta-popup.bronze-brochure .brochure-form .vc-slots{gap:8px;margin:8px 0 0}
.bronze-cta-popup.bronze-brochure .brochure-form .field .vc-slots label{min-height:44px;padding:4px 6px;font-size:12px;line-height:1.25;letter-spacing:.5px}

/* The (bracketed) part of a time button on its own line, never split itself. */
.bronze-cta-popup .vc-slots .vc-slot-sub{display:block;white-space:nowrap;font-size:.9em}
.bronze-cta-popup .vc-disclaimer{margin:8px 0 0;font-size:12px;line-height:1.4;color:#6c6c6c}
.bronze-cta-popup.bronze-brochure .bronze-brochure-error{margin-top:10px;padding:6px 10px;font-size:13px}
.bronze-cta-popup.bronze-brochure .brochure-form .field .requestbrochure.vb-submit{min-height:48px;margin-top:12px;font-size:14px}
.bronze-cta-popup .vc-privacy{margin:10px 0 0;font-size:11px;line-height:1.4;color:#6c6c6c}
.bronze-cta-popup .vc-privacy a{font-size:inherit;text-decoration:underline} /* the site's links are otherwise 16px */

/* After sending. */
.bronze-cta-popup .vc-done{padding:10px 0 6px;text-align:center}
.bronze-cta-popup .vc-done h2{margin:0 0 14px}
.bronze-cta-popup .vc-done p{margin:0 0 12px;font-size:15px;line-height:1.45}
.bronze-cta-popup .vc-done .btn{display:inline-block;margin-top:8px;padding:10px 30px;cursor:pointer;font-family:Poppins,sans-serif}

/* Phones: a card just the height of the form, centred with the page showing around it (12px at the sides, more
   above and below on taller phones), with everything a little tighter. A phone too short for the whole form gets
   it 12px from the top and bottom, scrolling inside. */
@media (max-width:600px){
	/* height:fit-content, as browsers give a popup <dialog> by default: "auto" would stretch it top to bottom. */
	.bronze-cta-popup{width:calc(100% - 24px);max-width:none;height:fit-content;max-height:calc(100% - 24px);max-height:calc(100dvh - 24px)}
	.bronze-cta-popup .vc-inner{padding:10px 14px 8px}
	.bronze-cta-popup .vc-close{top:2px;right:2px}
	/* Small enough for "Request a Callback" on one line beside the ×: 21px, a little less on phones narrower than
	   362px (about 18.5px at 320). !important because bronze.css and blocks.css set every h2 to 24px !important on phones. */
	.bronze-cta-popup h2{font-size:min(21px,5.8vw)!important;margin-bottom:4px}
	.bronze-cta-popup .vc-intro{font-size:12.5px;line-height:1.35}
	.bronze-cta-popup .vc-when-heading{margin-top:8px;font-size:13px}
	/* 42px boxes on phones: everything, button included, then fits in about 550px */
	.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f input,
	.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f select{min-height:42px;padding-top:10px;padding-bottom:10px}
	.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f > label{top:11px}
	.bronze-cta-popup.bronze-brochure .brochure-form .vb-f{margin-top:6px}
	.bronze-cta-popup .vc-row{gap:0 6px}
	.bronze-cta-popup .vc-row-name{grid-template-columns:minmax(70px,.8fr) 1fr 1fr}
	.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f textarea{min-height:52px;height:52px}
	.bronze-cta-popup.bronze-brochure .brochure-form .vc-slots{gap:6px;margin-top:6px}
	.bronze-cta-popup.bronze-brochure .brochure-form .field .vc-slots label{min-height:40px;font-size:11px;letter-spacing:0;padding:3px 4px}
	.bronze-cta-popup .vc-disclaimer{margin-top:6px;font-size:11px;line-height:1.3}
	.bronze-cta-popup.bronze-brochure .brochure-form .field .requestbrochure.vb-submit{min-height:44px;margin-top:8px}
	.bronze-cta-popup .vc-privacy{margin-top:6px;font-size:10.5px;line-height:1.3}
	.bronze-cta-popup.bronze-brochure .bronze-brochure-error{margin-top:8px;padding:4px 8px;font-size:13px}
}

/* ---- "Email us": the message box and the photos -------------------------------------------------------- */

.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f textarea#ve-message{min-height:76px;height:76px} /* three lines */
.bronze-cta-popup .vc-photos{position:relative;margin-top:8px}
.bronze-cta-popup .vc-photos-label{margin:0 0 6px;font-size:13px;line-height:1.3;color:#6c6c6c}
.bronze-cta-popup .vc-photo-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:6px 0 0;list-style:none}
.bronze-cta-popup .vc-photo-list[hidden]{display:none}
.bronze-cta-popup .vc-photo-list li{position:relative;width:56px;height:56px;margin:0;padding:0}
.bronze-cta-popup .vc-photo-list li::before{content:none} /* no list bullet */
.bronze-cta-popup .vc-photo-list img{display:block;width:100%;height:100%;object-fit:cover;border:1px solid #dfdfdf}
.bronze-cta-popup .vc-photo-remove{position:absolute;top:-6px;right:-6px;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:#7b7064;color:#fff;font:18px/24px Poppins,sans-serif;cursor:pointer}
.bronze-cta-popup .vc-photo-remove:focus-visible{outline:3px solid #b7a998}
/* "+ Add Photos": a dashed box like the brochure form's choices; the real file box is hidden inside it. */
.bronze-cta-popup .vc-photo-add{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:4px 10px;border:2px dashed #dfdfdf;background:#f6f6f6;color:#8a8a8a;font:13px/1.2 Poppins,sans-serif;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.bronze-cta-popup .vc-photo-add[hidden]{display:none}
.bronze-cta-popup .vc-photo-add:hover{border-color:#b9b9b9}
.bronze-cta-popup .vc-photo-add:focus-within{outline:3px solid #b7a998;outline-offset:2px}
.bronze-cta-popup .vc-photo-add span{font-size:20px;line-height:1}
.bronze-cta-popup .vc-photo-add input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.bronze-cta-popup .vc-photos.bad .vc-photo-add{border-color:#ff6d6d;background:#ffe3e3;color:#c0392b}
@media (max-width:600px){
	.bronze-cta-popup.bronze-brochure .brochure-form .field .vb-f textarea#ve-message{min-height:64px;height:64px}
	.bronze-cta-popup .vc-photos{margin-top:6px}
	.bronze-cta-popup .vc-photos-label{margin-bottom:4px;font-size:12px}
	.bronze-cta-popup .vc-photo-add{min-height:40px;font-size:12px}
	.bronze-cta-popup .vc-photo-list li{width:48px;height:48px}
}

/* ---- The floating panel (Calls to Action → Settings → Floating panel) ------------------------------------- */
/* At the bottom right of every page: the box with a button for each call to action, or the small tab that opens
   it. Bronze's colours: the site's bronze-grey buttons (#7b7064), near-black on hover, Baskerville heading.
   On a computer the box shows from the start, set here rather than by a script so there's no flash
   of the tab first (a script can run late on live, e.g. held back by Cloudflare or Cookiebot);
   class is-min (the visitor shrank it: inc/cta.php's line of script and cta.js) turns it back into the tab. On a
   phone it's the tab until opened (class is-open, cta.js). */

.bronze-cta-panel{position:fixed;right:20px;bottom:20px;z-index:9998;font-family:Poppins,sans-serif}
html.vc-open .bronze-cta-panel{display:none} /* not over an open popup */
.bronze-cta-panel .vcp-tab{display:block;margin:0 0 0 auto;padding:14px 18px;border:0;border-radius:10px;background:#7b7064;color:#fff;font:14px Poppins,sans-serif;letter-spacing:1px;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.bronze-cta-panel .vcp-tab:hover{background:#1e1e1e}
.bronze-cta-panel .vcp-box{display:none;position:relative;width:270px;padding:20px 20px 18px;border-radius:10px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.3);text-align:center}
@media (min-width:601px){
	.bronze-cta-panel:not(.is-min) .vcp-box{display:block}
	.bronze-cta-panel:not(.is-min) .vcp-tab{display:none}
}
@media (max-width:600px){
	.bronze-cta-panel.is-open .vcp-box{display:block}
	.bronze-cta-panel.is-open .vcp-tab{display:none}
}
.bronze-cta-panel .vcp-heading{margin:0 22px 12px;font:22px/1.2 baskerville,"Times New Roman",serif;color:#655d60}
.bronze-cta-panel .vcp-min{position:absolute;top:2px;right:2px;width:40px;height:40px;padding:0;border:0;background:none;color:#655d60;font:300 28px/40px Poppins,sans-serif;cursor:pointer}
.bronze-cta-panel .vcp-btn{display:block;margin-top:8px;padding:11px 12px;border:1px solid #7b7064;background:#7b7064;color:#fff;font-size:13px;font-weight:700;line-height:1.3;letter-spacing:2px;text-transform:uppercase;text-align:center;text-decoration:none;transition:background-color .2s,color .2s}
.bronze-cta-panel .vcp-btn:hover,.bronze-cta-panel .vcp-btn:focus-visible{background:#1e1e1e;border-color:#1e1e1e;color:#fff;text-decoration:none}
.bronze-cta-panel button:focus-visible,.bronze-cta-panel .vcp-btn:focus-visible{outline:3px solid #b7a998;outline-offset:2px}
@media (max-width:600px){
	.bronze-cta-panel{right:12px;bottom:12px}
	.bronze-cta-panel .vcp-tab{padding:12px 14px;font-size:13px}
	.bronze-cta-panel.is-open{left:12px} /* open on a phone: the width of the screen */
	.bronze-cta-panel .vcp-box{width:auto}
}