/*
 * 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 dark blue buttons are the brochure form's (blocks.css: the popup has
 * the classes vale-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
 * ".vale-cta-popup.vale-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}

.vale-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}
.vale-cta-popup::backdrop{background:rgba(23,43,58,.65)} /* the site's dark blue, dimmed */
.vale-cta-popup .vc-inner{position:relative;padding:26px 28px 20px}

.vale-cta-popup .vc-close{position:absolute;top:6px;right:6px;width:44px;height:44px;padding:0;border:0;background:none;color:#172b3a;font:300 34px/44px Jost,sans-serif;cursor:pointer}
.vale-cta-popup .vc-close:focus-visible{outline:3px solid #8ab4d6}

.vale-cta-popup h2{margin:0 44px 6px 0;font-size:26px;line-height:1.15;outline:none}
.vale-cta-popup .vc-intro{margin:0 0 4px;font-size:15px;line-height:1.35}
.vale-cta-popup .vc-when-heading{margin:14px 0 0;font-size:15px;line-height:1.2;letter-spacing:1px;color:#172b3a}

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

/* Rows: title / forename / surname, then email / phone. */
.vale-cta-popup .vc-row{display:grid;gap:0 8px;align-items:start}
.vale-cta-popup .vc-row > div{min-width:0}
.vale-cta-popup .vc-row-name{grid-template-columns:minmax(78px,1fr) 2fr 2fr}
.vale-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. */
.vale-cta-popup.vale-brochure .brochure-form .vb-f{margin-top:8px}
.vale-cta-popup.vale-brochure .brochure-form .field .vb-f input,
.vale-cta-popup.vale-brochure .brochure-form .field .vb-f select,
.vale-cta-popup.vale-brochure .brochure-form .field .vb-f textarea{min-height:44px;padding:11px 10px}
.vale-cta-popup.vale-brochure .brochure-form .field .vb-f textarea{min-height:64px;height:64px;resize:vertical} /* two lines */
.vale-cta-popup.vale-brochure .brochure-form .field .vb-f > label{left:12px;top:12px;max-width:calc(100% - 36px)}
.vale-cta-popup.vale-brochure .brochure-form .field .vb-f.vb-sel select{padding-right:28px;background-position:right 10px center}
.vale-cta-popup.vale-brochure .brochure-form .vb-f.bad::after{top:11px;right:8px}
.vale-cta-popup.vale-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. */
.vale-cta-popup.vale-brochure .brochure-form .vc-row-name .vb-f.bad::after{display:none}
.vale-cta-popup.vale-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. */
.vale-cta-popup.vale-brochure .brochure-form .vc-slots{gap:8px;margin:8px 0 0}
.vale-cta-popup.vale-brochure .brochure-form .field .vc-slots label{min-height:44px;padding:4px 6px;font-size:13px;line-height:1.2;letter-spacing:.5px}

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

/* After sending. */
.vale-cta-popup .vc-done{padding:10px 0 6px;text-align:center}
.vale-cta-popup .vc-done h2{margin:0 0 14px}
.vale-cta-popup .vc-done p{margin:0 0 12px;font-size:16px;line-height:1.45}
.vale-cta-popup .vc-done .btn{display:inline-block;margin-top:8px;padding:10px 30px;cursor:pointer;font-family:Jost,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. */
	.vale-cta-popup{width:calc(100% - 24px);max-width:none;height:fit-content;max-height:calc(100% - 24px);max-height:calc(100dvh - 24px)}
	.vale-cta-popup .vc-inner{padding:10px 14px 8px}
	.vale-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 vale.css and blocks.css set every h2 to 24px !important on phones. */
	.vale-cta-popup h2{font-size:min(21px,5.8vw)!important;margin-bottom:4px}
	.vale-cta-popup .vc-intro{font-size:13px;line-height:1.3}
	.vale-cta-popup .vc-when-heading{margin-top:8px;font-size:13px}
	/* 42px boxes on phones: everything, button included, then fits in about 550px */
	.vale-cta-popup.vale-brochure .brochure-form .field .vb-f input,
	.vale-cta-popup.vale-brochure .brochure-form .field .vb-f select{min-height:42px;padding-top:10px;padding-bottom:10px}
	.vale-cta-popup.vale-brochure .brochure-form .field .vb-f > label{top:11px}
	.vale-cta-popup.vale-brochure .brochure-form .vb-f{margin-top:6px}
	.vale-cta-popup .vc-row{gap:0 6px}
	.vale-cta-popup .vc-row-name{grid-template-columns:minmax(70px,.8fr) 1fr 1fr}
	.vale-cta-popup.vale-brochure .brochure-form .field .vb-f textarea{min-height:52px;height:52px}
	.vale-cta-popup.vale-brochure .brochure-form .vc-slots{gap:6px;margin-top:6px}
	.vale-cta-popup.vale-brochure .brochure-form .field .vc-slots label{min-height:40px;font-size:12px;letter-spacing:0;padding:3px 4px}
	.vale-cta-popup .vc-disclaimer{margin-top:6px;font-size:12px;line-height:1.25}
	.vale-cta-popup.vale-brochure .brochure-form .field .requestbrochure.vb-submit{min-height:44px;margin-top:8px}
	.vale-cta-popup .vc-privacy{margin-top:6px;font-size:11px;line-height:1.3}
	.vale-cta-popup.vale-brochure .vale-brochure-error{margin-top:8px;padding:4px 8px;font-size:13px}
}

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

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

/* ---- The floating panel (Calls to Action → Settings → Floating panel) ------------------------------------- */
/* Where the chat's "Talk to a member of our team" button goes: the box with a button for each call to action, or
   the small tab that opens it. 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). */

.vale-cta-panel{position:fixed;right:20px;bottom:20px;z-index:9998;font-family:Jost,sans-serif}
html.vc-open .vale-cta-panel{display:none} /* not over an open popup */
.vale-cta-panel .vcp-tab{display:block;margin:0 0 0 auto;padding:14px 18px;border:0;border-radius:10px;background:#172b3a;color:#fff;font:14px Jost,sans-serif;letter-spacing:1px;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.vale-cta-panel .vcp-tab:hover{background:#22405a}
.vale-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){
	.vale-cta-panel:not(.is-min) .vcp-box{display:block}
	.vale-cta-panel:not(.is-min) .vcp-tab{display:none}
}
@media (max-width:600px){
	.vale-cta-panel.is-open .vcp-box{display:block}
	.vale-cta-panel.is-open .vcp-tab{display:none}
}
.vale-cta-panel .vcp-heading{margin:0 22px 12px;font:22px/1.2 baskerville,"Times New Roman",serif;color:#172b3a}
.vale-cta-panel .vcp-min{position:absolute;top:2px;right:2px;width:40px;height:40px;padding:0;border:0;background:none;color:#172b3a;font:300 28px/40px Jost,sans-serif;cursor:pointer}
.vale-cta-panel .vcp-btn{display:block;margin-top:8px;padding:11px 12px;border:1px solid #172b3a;background:#172b3a;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}
.vale-cta-panel .vcp-btn:hover,.vale-cta-panel .vcp-btn:focus-visible{background:#fff;color:#172b3a;text-decoration:none}
.vale-cta-panel button:focus-visible,.vale-cta-panel .vcp-btn:focus-visible{outline:3px solid #8ab4d6;outline-offset:2px}
@media (max-width:600px){
	.vale-cta-panel{right:12px;bottom:12px}
	.vale-cta-panel .vcp-tab{padding:12px 14px;font-size:13px}
	.vale-cta-panel.is-open{left:12px} /* open on a phone: the width of the screen */
	.vale-cta-panel .vcp-box{width:auto}
}

/* Live Chat only while someone is there: Vale Core's tawk-consent.php puts vale-chat-online on <html> while Tawk
   says a team member is online (not away or offline, and never for visitors who haven't accepted preference
   cookies, as the chat doesn't load for them). Its panel button and [cta_button type="chat"] buttons wait for it;
   a panel whose only button is Live Chat waits too. */
.vale-cta-panel .vcp-chat,a.btn[href$="#live-chat"]{display:none}
html.vale-chat-online .vale-cta-panel .vcp-chat{display:block}
html.vale-chat-online a.btn[href$="#live-chat"]{display:inline-block}
html:not(.vale-chat-online) .vale-cta-panel.vcp-only-chat{display:none}