/* =====================================================================
 * PE Cookie Style v1.0.0
 * Restyles GDPR Cookie Consent (CookieYes / WebToffee CLI) — bar + modal.
 * Ported from the planet-emporiki staging theme so it works on Woodmart.
 * ===================================================================== */

/* CSS variables for fonts (allows the active theme to override). */
:root {
	--pe-cookie-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pe-cookie-font-heading: var(--pe-cookie-font);
}

/* ==========================================================================
   Cookie consent banner — modern floating card
   ========================================================================== */
#cookie-law-info-bar {
	position: fixed !important;
	left: 50% !important;
	bottom: 20px !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	width: calc(100% - 32px) !important;
	max-width: 760px !important;
	padding: 18px 22px !important;
	background: #ffffff !important;
	color: #0f172a !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 60px -12px rgba(15,23,42,.30), 0 8px 22px rgba(15,23,42,.10) !important;
	font: 400 13px/1.55 var(--pe-cookie-font) !important;
	text-align: left !important;
	z-index: 99999 !important;
}
#cookie-law-info-bar .cli-bar-container {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 14px !important;
	max-width: 100% !important;
	padding: 0 !important;
}
#cookie-law-info-bar .cli-bar-message {
	flex: 1 1 320px !important;
	min-width: 0 !important;
	color: #475569 !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
}
#cookie-law-info-bar .cli-bar-message strong { color: #0f172a; font-weight: 700; }
#cookie-law-info-bar .cli-bar-btn_container {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	margin-left: auto !important;
}
/* All consent buttons share a consistent base style */
#cookie-law-info-bar .cli-plugin-button,
#cookie-law-info-bar .cli_action_button,
#cookie-law-info-bar .cli-style-v2 .cli_action_button,
#cookie-law-info-bar .wt-cli-element {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 36px !important;
	padding: 0 16px !important;
	border-radius: 10px !important;
	border: 1px solid transparent !important;
	font: 600 13px/1 var(--pe-cookie-font) !important;
	letter-spacing: .01em !important;
	cursor: pointer !important;
	transition: background .15s, color .15s, border-color .15s !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}
/* Accept (primary) */
#cookie-law-info-bar .cli_action_button[data-cli_action="accept_all"],
#cookie-law-info-bar .cli_action_button[data-cli_action="accept"],
#cookie-law-info-bar #cookie_action_close_header,
#cookie-law-info-bar .wt-cli-accept-all-btn,
#cookie-law-info-bar .wt-cli-accept-btn {
	background: #234bab !important;
	color: #fff !important;
	border-color: #234bab !important;
}
#cookie-law-info-bar .cli_action_button[data-cli_action="accept_all"]:hover,
#cookie-law-info-bar #cookie_action_close_header:hover,
#cookie-law-info-bar .wt-cli-accept-all-btn:hover,
#cookie-law-info-bar .wt-cli-accept-btn:hover { background: #1e3f99 !important; border-color: #1e3f99 !important; }
/* Reject (secondary outline) */
#cookie-law-info-bar .cli_action_button[data-cli_action="reject"],
#cookie-law-info-bar .wt-cli-reject-btn,
#cookie-law-info-bar #cookie_action_close_header_reject {
	background: #fff !important;
	color: #475569 !important;
	border-color: #cbd5e1 !important;
}
#cookie-law-info-bar .cli_action_button[data-cli_action="reject"]:hover,
#cookie-law-info-bar .wt-cli-reject-btn:hover,
#cookie-law-info-bar #cookie_action_close_header_reject:hover { background: #f1f5f9 !important; color: #0f172a !important; }
/* Settings (text link) */
#cookie-law-info-bar .cli_settings_button,
#cookie-law-info-bar #cookie_action_settings,
#cookie-law-info-bar .cli_show_settings,
#cookie-law-info-bar .cookie_action_close_header_reject ~ .cli_settings_button {
	background: transparent !important;
	color: #234bab !important;
	border-color: transparent !important;
	padding: 0 8px !important;
}
#cookie-law-info-bar .cli_settings_button:hover,
#cookie-law-info-bar .cli_show_settings:hover { color: #1e3f99 !important; text-decoration: underline !important; }

/* Mobile: stack buttons */
@media (max-width: 640px) {
	#cookie-law-info-bar { bottom: 12px !important; padding: 14px 16px !important; }
	#cookie-law-info-bar .cli-bar-container { flex-direction: column; align-items: stretch !important; }
	#cookie-law-info-bar .cli-bar-btn_container { flex-direction: column; width: 100%; margin-left: 0 !important; }
	#cookie-law-info-bar .cli-plugin-button,
	#cookie-law-info-bar .cli_action_button,
	#cookie-law-info-bar .wt-cli-element { width: 100% !important; }
}

/* ==========================================================================
   Cookie consent — Custom Cookies modal (#cliSettingsPopup)
   Modernised version of the GDPR / WebToffee settings dialog.
   ========================================================================== */

/* Backdrop overlay — site-wide dark scrim */
body.cli-modal-open { overflow: hidden !important; }
body.cli-modal-open::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(15,23,42,.55);
	z-index: 99998;
	pointer-events: none;
	animation: peCliFade .2s ease-out;
}
@keyframes peCliFade { from { opacity: 0; } to { opacity: 1; } }

/* Modal shell — center the dialog over the scrim */
#cliSettingsPopup.cli-modal,
.cli-modal.cli-show {
	position: fixed !important;
	inset: 0 !important;
	z-index: 99999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 20px !important;
	background: transparent !important;
}
.cli-modal .cli-modal-dialog {
	width: 100% !important;
	max-width: 620px !important;
	margin: 0 !important;
}

/* The card itself — replaces the default blue/dialog look */
.cli-modal .cli-modal-content,
.cli-modal-content.cli-bar-popup {
	position: relative !important;
	background: #fff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 18px !important;
	box-shadow: 0 24px 60px -12px rgba(15,23,42,.40), 0 8px 22px rgba(15,23,42,.12) !important;
	color: #0f172a !important;
	font: 400 14px/1.55 var(--pe-cookie-font) !important;
	max-height: calc(100vh - 40px) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	padding: 0 !important;
	outline: 0 !important;
}

/* Close × button — top-right round soft button */
.cli-modal .cli-modal-close,
#cliModalClose {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 32px !important;
	height: 32px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #f1f5f9 !important;
	border: 0 !important;
	border-radius: 50% !important;
	color: #475569 !important;
	cursor: pointer !important;
	font-size: 0 !important;
	z-index: 2 !important;
	transition: background .15s, color .15s !important;
	padding: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.cli-modal .cli-modal-close::before,
#cliModalClose::before {
	content: '×';
	font: 700 22px/1 var(--pe-cookie-font);
	color: inherit;
}
.cli-modal .cli-modal-close span,
#cliModalClose span { display: none !important; }
.cli-modal .cli-modal-close:hover,
#cliModalClose:hover { background: #e2e8f0 !important; color: #0f172a !important; }

/* Body — scrollable area inside the card */
.cli-modal .cli-modal-body {
	padding: 28px 28px 16px !important;
	overflow-y: auto !important;
	flex: 1 1 auto !important;
	color: #475569 !important;
}

/* Privacy overview — opening section with title + intro paragraph */
.cli-modal .cli-privacy-overview { padding: 0 0 18px !important; }
.cli-modal .cli-privacy-overview h4 {
	margin: 0 0 10px !important;
	font: 800 19px/1.25 var(--pe-cookie-font-heading) !important;
	color: #0f172a !important;
}
.cli-modal .cli-privacy-content,
.cli-modal .cli-privacy-overview .cli-privacy-content-text,
.cli-modal .cli-privacy-content-text {
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	color: #475569 !important;
	margin: 0 !important;
}
.cli-modal .cli-privacy-readmore {
	display: inline-block !important;
	margin-top: 8px !important;
	color: #234bab !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	font-size: 13px !important;
}
.cli-modal .cli-privacy-readmore:hover { text-decoration: underline !important; }

/* Layout helpers from the plugin's grid */
.cli-modal .cli-container-fluid,
.cli-modal .cli-tab-container { padding: 0 !important; }
.cli-modal .cli-row { margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.cli-modal .cli-col-12 { padding: 0 !important; flex: 1 1 100% !important; }

/* Each cookie category — card with header + collapsible body */
.cli-modal .cli-tab-section {
	background: #fff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	margin: 0 !important;
	overflow: hidden !important;
	transition: border-color .15s, box-shadow .15s !important;
}
.cli-modal .cli-tab-section + .cli-tab-section { margin-top: 6px !important; }
.cli-modal .cli-tab-section:hover { border-color: #cbd5e1 !important; }

.cli-modal .cli-tab-header {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 12px 14px !important;
	cursor: pointer !important;
	background: #fff !important;
	border: 0 !important;
	color: #0f172a !important;
}
.cli-modal .cli-tab-header .cli-nav-link {
	flex: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	color: #0f172a !important;
	font: 700 14px/1.2 var(--pe-cookie-font) !important;
	text-decoration: none !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
.cli-modal .cli-tab-header .cli-nav-link::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid #94a3b8;
	border-bottom: 2px solid #94a3b8;
	transform: rotate(-45deg);
	transition: transform .2s ease;
	margin-right: 2px;
}
.cli-modal .cli-tab-section.cli-tab-active .cli-tab-header .cli-nav-link::before,
.cli-modal .cli-tab-section.active .cli-tab-header .cli-nav-link::before { transform: rotate(45deg); }

/* Status pill (Always Enabled / Enabled / Disabled) */
.cli-modal .cli-status,
.cli-modal .wt-cli-cookie-description ~ .cli-status {
	font: 600 11px/1 var(--pe-cookie-font) !important;
	letter-spacing: .03em !important;
	text-transform: uppercase !important;
	padding: 5px 10px !important;
	border-radius: 999px !important;
	background: #f1f5f9 !important;
	color: #64748b !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
}
.cli-modal .cli-status.cli-status-enabled,
.cli-modal .cli-tab-section.cli-tab-active .cli-status,
.cli-modal .cli-status:not(.cli-status-disabled):not(.cli-always-enabled) { background: #dcfce7 !important; color: #15803d !important; }
.cli-modal .cli-always-enabled,
.cli-modal .cli-status.cli-always-enabled { background: #e0e7ff !important; color: #3730a3 !important; }

/* Toggle switch — on/off slider */
.cli-modal .cli-switch,
.cli-modal .wt-cli-switch {
	position: relative !important;
	display: inline-block !important;
	width: 40px !important;
	height: 22px !important;
	flex-shrink: 0 !important;
}
.cli-modal .cli-switch input,
.cli-modal .wt-cli-switch input {
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
}
.cli-modal .cli-slider,
.cli-modal .wt-cli-slider {
	position: absolute !important;
	cursor: pointer !important;
	inset: 0 !important;
	background: #cbd5e1 !important;
	border-radius: 999px !important;
	transition: background .2s !important;
}
.cli-modal .cli-slider::before,
.cli-modal .wt-cli-slider::before {
	content: '' !important;
	position: absolute !important;
	height: 16px !important;
	width: 16px !important;
	left: 3px !important;
	top: 3px !important;
	background: #fff !important;
	border-radius: 50% !important;
	transition: transform .2s !important;
	box-shadow: 0 1px 3px rgba(15,23,42,.2) !important;
}
.cli-modal .cli-switch input:checked + .cli-slider,
.cli-modal .wt-cli-switch input:checked + .wt-cli-slider { background: #16a34a !important; }
.cli-modal .cli-switch input:checked + .cli-slider::before,
.cli-modal .wt-cli-switch input:checked + .wt-cli-slider::before { transform: translateX(18px) !important; }
.cli-modal .cli-switch input:disabled + .cli-slider,
.cli-modal .wt-cli-switch input:disabled + .wt-cli-slider {
	background: #94a3b8 !important;
	opacity: .55 !important;
	cursor: not-allowed !important;
}

/* Tab body — collapsed description */
.cli-modal .cli-tab-content,
.cli-modal .cli-tab-pane {
	padding: 0 14px 14px !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #64748b !important;
	background: #fff !important;
}

/* Footer — Save & Accept */
.cli-modal .cli-modal-footer,
.cli-modal-content > .wt-cli-element-container,
.cli-modal-content .cli-modal-footer {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	padding: 14px 24px !important;
	border-top: 1px solid #e2e8f0 !important;
	background: #f8fafc !important;
	flex-shrink: 0 !important;
}
.cli-modal .cli_settings_button_save,
.cli-modal #wt-cli-accept-btn,
.cli-modal .wt-cli-element[data-cli_action="accept_all"],
.cli-modal .wt-cli-privacy-btn-container .wt-cli-element,
.cli-modal button[data-cli_action="accept"],
.cli-modal button[data-cli_action="accept_all"],
.cli-modal .cli_setting_save_button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 42px !important;
	padding: 0 24px !important;
	background: #16a34a !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	font: 700 13px/1 var(--pe-cookie-font) !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	box-shadow: 0 6px 16px rgba(22,163,74,.25) !important;
	transition: background .15s, transform .1s !important;
	text-decoration: none !important;
}
.cli-modal .cli_settings_button_save:hover,
.cli-modal #wt-cli-accept-btn:hover,
.cli-modal button[data-cli_action="accept"]:hover,
.cli-modal button[data-cli_action="accept_all"]:hover,
.cli-modal .cli_setting_save_button:hover { background: #15803d !important; }
.cli-modal .cli_settings_button_save:active,
.cli-modal #wt-cli-accept-btn:active,
.cli-modal .cli_setting_save_button:active { transform: scale(.98) !important; }

/* Mobile tweaks */
@media (max-width: 540px) {
	.cli-modal .cli-modal-dialog { max-width: 100% !important; }
	.cli-modal .cli-modal-body { padding: 22px 18px 12px !important; }
	.cli-modal .cli-modal-footer { padding: 12px 18px !important; }
	.cli-modal .cli-tab-header { padding: 12px !important; }
}

/* Reopen-cookie-bar floating button (#cookie-law-info-again) */
#cookie-law-info-again {
	bottom: 20px !important;
	right: 20px !important;
	background: #fff !important;
	color: #234bab !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 999px !important;
	padding: 8px 14px !important;
	font: 600 12px/1 var(--pe-cookie-font) !important;
	box-shadow: 0 8px 20px rgba(15,23,42,.10) !important;
}
