/* Harmony Address Picker — field + Google Places dropdown styling */

.harmony-address-wrapper {
	position: relative;
	display: block;
	width: 100%;
	padding: 20px;
	background: #fafbfd;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-sizing: border-box;
}
/* Make the harmony field always full-width even if GF puts it in a column */
.gfield--type-harmony_address,
.gfield_harmony_address {
	width: 100% !important;
	max-width: 100% !important;
	flex-basis: 100% !important;
	clear: both;
	margin-top: 8px;
	margin-bottom: 8px;
}

/* Let the field label inherit the theme's existing GF label styling so it
   matches every other label on the form. We don't override anything here. */

/* Field description sits between label and card — nice typography, clear hierarchy */
.gfield--type-harmony_address .gfield_description,
.gfield_harmony_address .gfield_description {
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	color: #555 !important;
	margin: 0 !important;
	padding: 0 0 7px 0 !important;
	max-width: 720px !important;
}

/* Required-asterisk inherits theme styling */

.harmony-address-input-wrap {
	width: 100%;
}

/* Only force what's structurally necessary; let the theme/form styling control
   the rest so this input matches every other input on the form. */
.harmony-address-main {
	width: 100% !important;
	box-sizing: border-box !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
}

/* Hint ABOVE the input — Google's dropdown covers anything below the input,
   so this is the only place a hint can stay visible. */
.harmony-address-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 4px 8px;
	font-size: 13px;
	color: #5a5a5a;
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.harmony-address-hint svg {
	color: #193563;
	flex: 0 0 14px;
}

/* Hide the hint once an address has been picked / confirmed */
.harmony-address-wrapper.harmony-confirmed .harmony-address-hint {
	display: none;
}

/* Subtle "looking up postcode…" state */
.harmony-address-main.harmony-picker-resolving {
	background-image: linear-gradient(90deg, rgba(26,115,232,0.04), rgba(26,115,232,0.12), rgba(26,115,232,0.04));
	background-size: 200% 100%;
	animation: harmonyPickerShimmer 1.2s linear infinite;
}

@keyframes harmonyPickerShimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ============================================================
   Google Places Autocomplete dropdown (.pac-container)
   ------------------------------------------------------------
   Google injects this at the body level, so we can't scope it
   to our field. The styles below apply globally to any pac
   container on the page (which is fine — we own the picker).
   ============================================================ */
.pac-container,
.pac-container * {
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.pac-container {
	z-index: 100000 !important;
	margin-top: 4px !important;
	border-radius: 8px !important;
	border: 1px solid #d6d6d6 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
	background: #fff !important;
	overflow: hidden !important;
	padding: 6px 0 !important;
}

.pac-container:after {
	/* The "Powered by Google" logo */
	background-position: right 12px center !important;
	height: 24px !important;
	margin: 6px 0 4px;
	opacity: 0.6;
}

.pac-item {
	padding: 8px 14px !important;
	border-top: none !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: #333 !important;
	cursor: pointer !important;
	transition: background-color 120ms ease !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.pac-item:first-child {
	border-top: none !important;
}

.pac-item:hover,
.pac-item.pac-item-selected,
.pac-item-selected {
	background-color: #f5f8fc;
}

/* The location-pin icon on the left */
.pac-icon,
.pac-icon-marker {
	background-image: none !important;
	width: 14px !important;
	height: 14px !important;
	margin: 0 !important;
	flex: 0 0 14px !important;
	position: relative !important;
}

.pac-icon::before {
	content: "";
	display: block;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") center/contain no-repeat;
}

/* The full suggestion text */
.pac-item-query {
	font-size: 15px !important;
	color: #1a1a1a !important;
	padding-right: 4px !important;
	line-height: 1.25 !important;
}

/* The matched (typed) portion in bold */
.pac-matched {
	font-weight: 700;
	color: #193563;
}

/* The grey trailing context after the matched query */
.pac-item > span:not(.pac-item-query):not(.pac-icon):not(.harmony-noresult-icon):not(.harmony-noresult-text) {
	color: #6b6b6b !important;
	font-size: 14px !important;
	line-height: 1.25 !important;
}

/* "Can't find your address? Enter manually" row injected at the bottom of the
   Google Places dropdown. Visually distinct from address suggestions so the
   user understands it's an action row, not another suggestion. */
.pac-container .harmony-noresult-item {
	border-top: 1px solid #e6eaf2 !important;
	margin-top: 4px !important;
	padding: 10px 14px !important;
	background: #f8faff !important;
	color: #193563 !important;
	font-size: 14px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
}

.pac-container .harmony-noresult-item:hover,
.pac-container .harmony-noresult-item.pac-item-selected {
	background: #eef2fb !important;
}

.pac-container .harmony-noresult-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #193563 !important;
	flex: 0 0 14px !important;
}

.pac-container .harmony-noresult-text {
	font-size: 14px !important;
	color: #193563 !important;
	line-height: 1.3 !important;
}

.pac-container .harmony-noresult-text strong {
	font-weight: 700 !important;
}

/* ============================================================
   Confirmation panel + map preview
   ============================================================ */
.harmony-address-confirm {
	clear: both;
	display: block;
	width: 100%;
	margin-top: 16px;
	padding: 16px;
	background: #f5f8ff;
	border: 1px solid #d6e0f0;
	border-radius: 8px;
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	/* When scrollIntoView/scrollTo lands here, leave 130px clear above so the
	   site's sticky top-bar doesn't cover the panel header. */
	scroll-margin-top: 170px;
}

.harmony-address-confirm-row {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 16px;
	line-height: 1.45;
	color: #1a1a1a;
}

.harmony-address-confirm-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: #16a34a;
	font-size: 16px;
	justify-self: start;
}

.harmony-address-confirm-label .harmony-icon-check {
	fill: #16a34a;
}

.harmony-address-confirm-value {
	color: #1a1a1a;
	font-weight: 600;
	font-size: 16px;
	text-align: center;
	min-width: 0;
	word-break: break-word;
	justify-self: center;
}

.harmony-address-change {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #193563;
	text-decoration: none !important;
	border-bottom: none !important;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	justify-self: end;
}

.harmony-address-change:hover,
.harmony-address-change:focus {
	text-decoration: none !important;
	color: #11244a;
}

.harmony-address-change .harmony-icon-question {
	fill: #193563;
}

@media (max-width: 600px) {
	.harmony-address-confirm-row {
		justify-content: center;
		text-align: center;
	}
	.harmony-address-confirm-value {
		flex-basis: 100%;
		text-align: center;
	}
}

.harmony-address-map-help {
	font-size: 13px;
	color: #6b6b6b;
	margin-bottom: 8px;
	text-align: left;
}

.harmony-address-map {
	display: block;
	width: 100%;
	height: 280px;
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid #d6e0f0;
	background: #eaeef3;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.harmony-address-map {
		height: 200px;
	}
}

/* ============================================================
   Postcode fallback panel — clean stacked layout
   ============================================================ */
.harmony-postcode-fallback {
	margin-top: 14px;
	font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.harmony-postcode-toggle {
	color: #193563;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
}

.harmony-postcode-toggle:hover {
	text-decoration: underline;
}

.harmony-postcode-panel {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 0;
	background: transparent;
	border: none;
	box-sizing: border-box;
}

.harmony-postcode-fallback {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.harmony-postcode-help {
	margin: 0 0 14px;
	font-size: 14px;
	color: #555;
	line-height: 1.5;
}

.harmony-postcode-row {
	display: block;
	width: 100% !important;
	margin-bottom: 14px;
	box-sizing: border-box;
}

.harmony-postcode-actions {
	display: block;
	width: 100%;
	margin-top: 14px;
}

.harmony-postcode-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #000;
	margin-bottom: 6px;
}

.harmony-postcode-required {
	color: #c0392b;
	font-weight: 700;
	margin-left: 2px;
}

/* Match the form's other text inputs: inherit fonts/colours/borders from the
   theme's defaults. Only force full-width and a comfortable left padding so it
   visually matches the main address input above. */
.harmony-manual-line1,
.harmony-postcode-input {
	display: block !important;
	width: 100% !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
	box-sizing: border-box !important;
}

.harmony-postcode-input {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.harmony-postcode-lookup {
	display: inline-block;
	margin-top: 14px;
	padding: 11px 24px;
	background: #193563;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 120ms ease, transform 60ms ease;
}

.harmony-postcode-lookup:hover {
	background: #11244a;
}

.harmony-postcode-lookup:active {
	transform: translateY(1px);
}

.harmony-postcode-status {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	color: #555;
}

.harmony-postcode-status.harmony-postcode-error {
	color: #c0392b;
	padding: 8px 12px;
	background: #fdecea;
	border: 1px solid #f5c6c6;
	border-radius: 6px;
}

.harmony-postcode-status.harmony-postcode-ok {
	color: #193563;
	padding: 8px 12px;
	background: #eef2fb;
	border: 1px solid #d6e0f0;
	border-radius: 6px;
}
/* ═══════════════════════════════════════════════════════
   Refreshing Cookie Notice v2.0
   Four positions: top-banner, bottom-banner, floating-modal, corner-card
   All share the same .rcn-shell + .rcn-customize blocks; positioning
   is driven by the position class on .rcn.
   ═══════════════════════════════════════════════════════ */

.rcn {
    --rcn-accent: #2563eb;
    --rcn-ink: #0f172a;
    --rcn-muted: #64748b;
    --rcn-line: #e2e8f0;
    --rcn-bg: #ffffff;
    --rcn-shadow: 0 20px 50px -15px rgba(15, 23, 42, 0.25), 0 8px 20px -8px rgba(15, 23, 42, 0.08);
    --rcn-radius: 12px;

    position: fixed;
    z-index: 2147483600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--rcn-ink);
    box-sizing: border-box;
}
.rcn *, .rcn *::before, .rcn *::after { box-sizing: inherit; }

/* ─── Shell (container for main + customize panel) ───── */
.rcn-shell, .rcn-customize {
    background: var(--rcn-bg);
    box-shadow: var(--rcn-shadow);
    animation: rcn-rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes rcn-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Position: TOP BANNER ────────────────────────────── */
.rcn-top-banner {
    top: 0; left: 0; right: 0;
}
.rcn-top-banner .rcn-shell, .rcn-top-banner .rcn-customize {
    border-radius: 0;
    border-bottom: 1px solid var(--rcn-line);
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 100%;
    box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.1);
    animation-name: rcn-slide-down;
}
.rcn-top-banner .rcn-main { flex: 1; min-width: 0; }
.rcn-top-banner .rcn-actions { flex: 0 0 auto; }
.rcn-top-banner .rcn-heading { display: none; } /* keep banners compact, body line is enough */

@keyframes rcn-slide-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Position: BOTTOM BANNER ─────────────────────────── */
.rcn-bottom-banner {
    bottom: 0; left: 0; right: 0;
}
.rcn-bottom-banner .rcn-shell, .rcn-bottom-banner .rcn-customize {
    border-radius: 0;
    border-top: 1px solid var(--rcn-line);
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 100%;
    box-shadow: 0 -8px 20px -8px rgba(15, 23, 42, 0.1);
}
.rcn-bottom-banner .rcn-main { flex: 1; min-width: 0; }
.rcn-bottom-banner .rcn-actions { flex: 0 0 auto; }
.rcn-bottom-banner .rcn-heading { display: none; }

/* ─── Position: FLOATING MODAL (centred) ──────────────── */
.rcn-floating-modal {
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: rcn-backdrop-fade 0.25s ease;
}
@keyframes rcn-backdrop-fade {
    from { background: rgba(15, 23, 42, 0); }
    to   { background: rgba(15, 23, 42, 0.45); }
}
.rcn-floating-modal .rcn-shell, .rcn-floating-modal .rcn-customize {
    width: 100%;
    max-width: 520px;
    border-radius: var(--rcn-radius);
    padding: 28px 28px 24px;
}

/* ─── Position: CORNER CARD (bottom-left) ─────────────── */
.rcn-corner-card {
    bottom: 24px;
    left: 24px;
    max-width: 440px;
}
.rcn-corner-card .rcn-shell, .rcn-corner-card .rcn-customize {
    border-radius: var(--rcn-radius);
    padding: 24px 26px 22px;
}

/* ─── Main content (heading + body) ───────────────────── */
.rcn-heading {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--rcn-ink);
}

.rcn-body {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--rcn-muted);
}

.rcn-policy {
    color: var(--rcn-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.rcn-policy:hover { text-decoration: none; }

/* ─── Action buttons ──────────────────────────────────── */
.rcn-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.rcn-top-banner .rcn-actions,
.rcn-bottom-banner .rcn-actions { margin-top: 0; }

.rcn-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    white-space: nowrap;
}
.rcn-btn:active { transform: scale(0.98); }

.rcn-btn-primary {
    background: var(--rcn-accent);
    color: #fff;
    border-color: var(--rcn-accent);
}
.rcn-btn-primary:hover { filter: brightness(1.08); }

.rcn-btn-outline {
    background: transparent;
    color: var(--rcn-ink);
    border-color: var(--rcn-line);
}
.rcn-btn-outline:hover {
    border-color: var(--rcn-accent);
    color: var(--rcn-accent);
}

/* ─── Customize panel ─────────────────────────────────── */
.rcn-customize-heading {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--rcn-ink);
}
.rcn-customize-lede {
    margin: 0 0 18px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--rcn-muted);
}

.rcn-categories {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rcn-cat {
    border: 1px solid var(--rcn-line);
    border-radius: 8px;
    padding: 12px 14px;
}
.rcn-cat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.rcn-cat-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rcn-ink);
}
.rcn-cat-desc {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--rcn-muted);
}
.rcn-cat-essential .rcn-cat-title::after {
    content: "Always on";
    display: inline-block;
    margin-left: 8px;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: #d1fae5;
    color: #065f46;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── iOS-style toggle switch ─────────────────────────── */
.rcn-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex: 0 0 auto;
    cursor: pointer;
}
.rcn-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.rcn-toggle-thumb {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background 0.2s;
}
.rcn-toggle-thumb::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}
.rcn-toggle input:checked + .rcn-toggle-thumb {
    background: var(--rcn-accent);
}
.rcn-toggle input:checked + .rcn-toggle-thumb::after {
    transform: translateX(16px);
}

.rcn-toggle-locked {
    cursor: not-allowed;
    opacity: 0.7;
}
.rcn-toggle-locked .rcn-toggle-thumb {
    background: var(--rcn-accent);
}
.rcn-toggle-locked .rcn-toggle-thumb::after {
    transform: translateX(16px);
}

/* ─── Customize panel actions ─────────────────────────── */
.rcn-customize-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ─── Mobile ──────────────────────────────────────────── */
@media (max-width: 640px) {
    .rcn-top-banner,
    .rcn-bottom-banner { padding: 0; }
    .rcn-top-banner .rcn-shell,
    .rcn-bottom-banner .rcn-shell,
    .rcn-top-banner .rcn-customize,
    .rcn-bottom-banner .rcn-customize {
        flex-direction: column;
        align-items: stretch;
        padding: 16px 18px;
        gap: 14px;
    }
    .rcn-top-banner .rcn-actions,
    .rcn-bottom-banner .rcn-actions { justify-content: flex-end; }

    .rcn-corner-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
    .rcn-corner-card .rcn-shell,
    .rcn-corner-card .rcn-customize { padding: 20px 22px; }

    .rcn-floating-modal .rcn-shell,
    .rcn-floating-modal .rcn-customize { padding: 22px 22px 20px; }

    .rcn-actions { width: 100%; }
    .rcn-btn { flex: 1; text-align: center; }
}

/* Preferences link helper (shortcode output) */
.rcn-prefs-link { color: inherit; text-decoration: underline; cursor: pointer; }
.rcn-prefs-link:hover { text-decoration: none; }