/**
 * Celo Estimate Calculator — design tokens + sitewide popup.
 *
 * Trigger: add class "celo-open-estimate" to any button/link on the site
 * to open the postcode popup. Also available via [celo_estimate_button] shortcode.
 */
:root {
	--celo-accent: #b517e8;
	--celo-accent-dark: #9a12c8;
	--celo-blue: #2563eb;
	--celo-blue-dark: #1d4ed8;
	--celo-cta: #6b6d8a;
	--celo-cta-hover: #565872;
	--celo-ink: #1a1a1a;
	--celo-muted: #64748b;
	--celo-border: #e2e8f0;
	--celo-bg-selected: #eef2ff;
	--celo-bg-panel: #2563eb;
	--celo-bg-soft: #f8fafc;
	--celo-success: #16a34a;
	--celo-error: #dc2626;
	--celo-notify: #2563eb;
	--celo-font-sans: "Calibre", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--celo-font-serif: "ITC Clearface Pro", "Playfair Display", Georgia, "Times New Roman", serif;
}

.celo-ec-serif {
	font-family: var(--celo-font-serif);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.03em;
}
html.celo-ec-lock-scroll,
html:has(.celo-ec-lock-scroll),
body.celo-ec-lock-scroll {
	overflow: hidden;
}

/* ---------- Popup overlay ---------- */
.celo-ec-popup {
    background: #F8F8F8;
    width: 100%;
    max-width: 675px;
    border-radius: 30px;
    padding: 55px 30px 21px;
    position: relative;
    max-height: 92vh;
    overflow-y: auto;
    animation: celo-ec-pop-in .2s ease-out;
}
.celo-ec-overlay[hidden] { display: none; }

.celo-ec-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00000080;
    z-index: 999;
    width: 100%;
    overflow-y: auto;
    padding: 20px;
}
@keyframes celo-ec-pop-in {
	from { opacity: 0; transform: translateY(10px) scale(.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.celo-ec-close {
    position: absolute;
    top: 17px;
    right: 24px;
    border: none;
    background: transparent;
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
    color: #181818;
    padding: 0;
    font-weight: 300;
}
.celo-ec-close:hover { color: #C10CD2; }

.celo-ec-popup .celo-ec-eyebrow {
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--celo-muted);
	font-weight: 600;
	margin: 0 0 8px;
}
.celo-ec-popup h2 {
    font-size: 64px;
    margin: 0 0 15px;
    font-family: 'Calibre', sans-serif;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
	color: #181818;
}
.celo-ec-hint {
    font-size: 20px;
    color: #181818;
    margin: 0 0 40px;
    line-height: 24px;
    font-weight: 400;
    font-family: 'Calibre', sans-serif;
}
.celo-ec-popup label {
    font-size: 20px;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
    color: #181818;
	font-family: 'Calibre', sans-serif;
}
.celo-ec-popup input[type="text"], .celo-ec-popup input[type="email"] {
    width: 100%;
    padding: 16px 24px;
    border: 1px solid #181818;
    border-radius: 15px;
    font-size: 20px;
    box-sizing: border-box;
    background: transparent;
    color: #181818;
    font-family: 'Calibre', sans-serif;
	font-weight: 600;
}

/* .celo-ec-popup input:focus { outline: none; border-color: var(--celo-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); } */
.celo-ec-popup input.is-invalid { border-color: #E04D26; }

.celo-ec-postcode-row {
    display: flex;
    gap: 15px;
    align-items: stretch;
}
.celo-ec-postcode-row input { flex: 1; }

.celo-ec-feedback {
    font-size: 20px;
    margin: 14px 0 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Calibre', sans-serif;
}
.celo-ec-feedback.is-success { color: #21AB56; }
.celo-ec-feedback.is-error { color: #E04D26; }

/* Status icons via CSS (override --celo-ec-status-glyph / --celo-ec-status-icon for custom icons). */
.celo-ec-feedback.has-status-icon::before {
	content: var(--celo-ec-status-glyph, '');
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	font-size: 1em;
	font-weight: 700;
	line-height: 1;
	background: var(--celo-ec-status-icon, none) center / contain no-repeat;
    top: 2px;
    position: relative;
}
.celo-ec-feedback.is-success.has-status-icon {
	--celo-ec-status-glyph: url('data:image/svg+xml,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 19.414L7 14.413L8.413 13L12 16.586L19.585 9L21 10.415L12 19.414Z" fill="%2321AB56"/><path d="M14 0C11.2311 0 8.52431 0.821086 6.22202 2.35943C3.91973 3.89777 2.12532 6.08427 1.06569 8.64243C0.00606596 11.2006 -0.271181 14.0155 0.269012 16.7313C0.809205 19.447 2.14258 21.9416 4.10051 23.8995C6.05845 25.8574 8.55301 27.1908 11.2687 27.731C13.9845 28.2712 16.7994 27.9939 19.3576 26.9343C21.9157 25.8747 24.1022 24.0803 25.6406 21.778C27.1789 19.4757 28 16.7689 28 14C28 10.287 26.525 6.72601 23.8995 4.1005C21.274 1.475 17.713 0 14 0ZM14 26C11.6266 26 9.30655 25.2962 7.33316 23.9776C5.35977 22.6591 3.8217 20.7849 2.91345 18.5922C2.0052 16.3995 1.76756 13.9867 2.23058 11.6589C2.69361 9.33114 3.83649 7.19295 5.51472 5.51472C7.19295 3.83649 9.33115 2.6936 11.6589 2.23058C13.9867 1.76755 16.3995 2.00519 18.5922 2.91345C20.7849 3.8217 22.6591 5.35977 23.9776 7.33316C25.2962 9.30655 26 11.6266 26 14C26 17.1826 24.7357 20.2348 22.4853 22.4853C20.2349 24.7357 17.1826 26 14 26Z" fill="%2321AB56"/></svg>');
}
.celo-ec-feedback.is-error.has-status-icon {
	--celo-ec-status-glyph: url('data:image/svg+xml,<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 0C6.2 0 0 6.2 0 14C0 21.8 6.2 28 14 28C21.8 28 28 21.8 28 14C28 6.2 21.8 0 14 0ZM14 26C7.4 26 2 20.6 2 14C2 7.4 7.4 2 14 2C20.6 2 26 7.4 26 14C26 20.6 20.6 26 14 26Z" fill="%23E04D26"/><path d="M19.4 21L14 15.6L8.6 21L7 19.4L12.4 14L7 8.6L8.6 7L14 12.4L19.4 7L21 8.6L15.6 14L21 19.4L19.4 21Z" fill="%23E04D26"/></svg>');
}

.celo-ec-notify { margin-top: 16px; }
.celo-ec-notify-msg {     font-size: 20px;
    margin-top: 10px;
    font-weight: 600;
    line-height: normal;}
.celo-ec-notify input.is-invalid {
	border-color: #E04D26;
}

.celo-ec-overlay--uncovered .celo-ec-btn-primary.celo-ec-btn-block {
	display: none;
}

.celo-ec-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    font-size: 20px;
    color: #181818;
    gap: 12px;
    font-family: 'Calibre', sans-serif;
}
.celo-ec-trust-row li {
	display: flex;
	align-items: center;
	gap: 6px;
}
.celo-ec-trust-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    color: #0C53BC;
    flex-shrink: 0;
}
.celo-ec-trust-icon svg { width: 100%; height: 100%; }

/* ---------- Buttons ---------- */
.celo-ec-btn {
    border: none;
    border-radius: 15px;
    padding: 22px 24px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, opacity .15s;
    font-family: 'Calibre', sans-serif;
}
.celo-ec-btn-primary {
	background: var(--celo-accent);
	color: #fff;
}
.celo-ec-btn-primary:hover:not(:disabled) { background: #56075D; }
.celo-ec-btn-primary:disabled { background: #8787A2; color: #fff; cursor: not-allowed; }
.celo-ec-btn-notify {
    background: #0C53BC;
    color: #fff;
    min-width: 172px;
}
.celo-ec-btn-notify:hover { background: #181818; }
.celo-ec-btn-dark {
    background: var(--celo-ink);
    color: #fff;
    padding: 22px 24px;
    min-width: 172px;
}
.celo-ec-btn-dark:hover { background-color: #0C53BC;}
.celo-ec-btn-text {
	background: transparent;
	color: var(--celo-muted);
	padding: 12px 8px;
	font-weight: 600;
	font-size: 14px;
}
.celo-ec-btn-block { width: 100%; margin-top: 20px; display: block; text-align: center; }

@media (max-width: 767px) {
    .celo-ec-popup h2 {
        font-size: 42px;
    }
    .celo-ec-popup { padding: 43px 22px 22px; }
    .celo-ec-trust-row { flex-direction: column; align-items: flex-start; }

    .celo-ec-hint {
        margin-bottom: 30px;
    }
    .celo-ec-postcode-row {
        flex-direction: column;
    }
    .celo-ec-popup input[type="text"], .celo-ec-popup input[type="email"]{
        padding: 10px 24px;
    }
    .celo-ec-btn-dark,.celo-ec-btn-block,.celo-ec-btn-notify{
        padding: 16px 24px;
    }
    .celo-ec-close{
        top: 7px;
        right: 20px;
    }
}