/*
 * RO Notice Bubble -- frontend styles.
 * Selectors are scoped under the #ro-notice-root ID (not just a class)
 * so they win specificity fights against theme-level resets (e.g. the
 * Rey theme's own global button/icon styles), which is what caused the
 * hover-text and icon-visibility bugs in the class-only version.
 * Mobile-first: base rules target mobile, enhanced via min-width queries.
 */

#ro-notice-root {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

#ro-notice-root *,
#ro-notice-root *::before,
#ro-notice-root *::after {
	box-sizing: border-box;
}

/* Closed bubble button: fixed to a page corner. */
#ro-notice-toggle {
	position: fixed;
	bottom: 16px;
	z-index: 999997;
	width: 56px;
	height: 56px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	border: none;
	background-color: #1a7a5e;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	padding: 0;
	transition: transform 0.15s ease;
}

#ro-notice-root.ro-notice-position-right #ro-notice-toggle {
	right: 16px;
}

#ro-notice-root.ro-notice-position-left #ro-notice-toggle {
	left: 16px;
}

#ro-notice-toggle:hover,
#ro-notice-toggle:focus-visible {
	transform: scale(1.05);
	background-color: #1a7a5e;
	color: #ffffff;
}

#ro-notice-toggle.ro-notice-is-hidden {
	display: none;
}

/* Dark overlay behind the centered modal. */
#ro-notice-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.55);
	z-index: 999998;
}

#ro-notice-overlay[hidden] {
	display: none;
}

/* Modal panel: centered on screen, not anchored to a corner, so the
   message is impossible to miss regardless of where the visitor is
   scrolled on the page. */
#ro-notice-panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999999;
	width: calc(100% - 32px);
	max-width: 360px;
	background-color: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	/* Safety net only, not a design intent: content is sized to fit
	   without scrolling in the normal case (no date field, reasonable
	   message length). Only unusually long custom messages will trigger
	   this scrollbar. */
	max-height: 90vh;
	overflow-y: auto;
}

#ro-notice-panel[hidden] {
	display: none;
}

.ro-notice-header {
	background-color: #e6f1fb;
	padding: 16px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

#ro-notice-panel .ro-notice-header-text {
	min-width: 0;
}

#ro-notice-panel .ro-notice-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 6px;
	color: #0c447c;
	line-height: 1.3;
}

#ro-notice-panel .ro-notice-message {
	font-size: 13px;
	color: #0c447c;
	line-height: 1.6;
}

#ro-notice-panel .ro-notice-message p {
	margin: 0 0 8px;
}

#ro-notice-panel .ro-notice-message p:last-child {
	margin-bottom: 0;
}

#ro-notice-panel .ro-notice-message strong {
	font-weight: 700;
}

#ro-notice-close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	border: none;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #0c447c;
	padding: 0;
}

#ro-notice-close:hover,
#ro-notice-close:focus-visible {
	color: #0c447c;
	background: rgba(12, 68, 124, 0.08);
	border-radius: 6px;
}

#ro-notice-panel .ro-notice-icon-x {
	width: 16px;
	height: 16px;
	position: relative;
	display: inline-block;
}

#ro-notice-panel .ro-notice-icon-x::before,
#ro-notice-panel .ro-notice-icon-x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
}

#ro-notice-panel .ro-notice-icon-x::before {
	transform: rotate(45deg);
}

#ro-notice-panel .ro-notice-icon-x::after {
	transform: rotate(-45deg);
}

/* Icon sizing for the inline SVGs used in the toggle button and the
   WhatsApp button. currentColor means they always match the parent's
   text color, with no dependency on any icon font being loaded. */
#ro-notice-root .ro-notice-icon-svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	display: block;
}

#ro-notice-toggle .ro-notice-icon-svg {
	width: 26px;
	height: 26px;
}

.ro-notice-whatsapp-row {
	padding: 14px 16px;
	border-bottom: 1px solid #eeeeee;
}

#ro-notice-whatsapp-link.ro-notice-whatsapp-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 44px;
	background-color: #25a066;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

#ro-notice-whatsapp-link.ro-notice-whatsapp-button:hover,
#ro-notice-whatsapp-link.ro-notice-whatsapp-button:focus-visible {
	background-color: #1f8a58;
	color: #ffffff;
}

#ro-notice-whatsapp-link.ro-notice-whatsapp-button .ro-notice-icon-svg {
	width: 18px;
	height: 18px;
}

.ro-notice-form-wrap {
	padding: 14px 16px 16px;
}

#ro-notice-panel .ro-notice-form-intro {
	font-size: 13px;
	color: #555555;
	margin: 0 0 10px;
}

#ro-notice-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ro-notice-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

#ro-notice-panel .ro-notice-field label:not(.ro-notice-visually-hidden) {
	font-size: 12px;
	color: #555555;
}

#ro-notice-root input[type="text"],
#ro-notice-root input[type="email"],
#ro-notice-root input[type="date"],
#ro-notice-root textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	background-color: #ffffff;
	color: #222222;
	/* 16px prevents iOS Safari from zooming the viewport on input focus. */
	font-size: 16px;
	font-family: inherit;
}

#ro-notice-root textarea {
	resize: none;
	min-height: 60px;
}

#ro-notice-root input:focus,
#ro-notice-root textarea:focus {
	outline: none;
	border-color: #378add;
	box-shadow: 0 0 0 2px rgba(55, 138, 221, 0.25);
}

.ro-notice-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Honeypot: visually hidden from humans, still present in the DOM
   and excluded from tab order, so most bots that auto-fill every
   field fail. */
.ro-notice-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

#ro-notice-panel .ro-notice-field-error {
	display: block;
	font-size: 12px;
	color: #a32d2d;
	min-height: 14px;
}

#ro-notice-panel .ro-notice-field-error:empty {
	display: none;
}

/* Submit button colors are declared for default, hover, and
   focus-visible states explicitly (rather than relying on inherited
   text color) and scoped under the #ro-notice-panel ID so a theme's
   own button:hover rule cannot silently win the specificity fight
   and leave hover text unreadable against the hover background. */
#ro-notice-panel #ro-notice-submit.ro-notice-submit-button {
	width: 100%;
	min-height: 44px;
	background-color: #1a1a1a;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

#ro-notice-panel #ro-notice-submit.ro-notice-submit-button:hover,
#ro-notice-panel #ro-notice-submit.ro-notice-submit-button:focus-visible {
	background-color: #333333;
	color: #ffffff;
}

#ro-notice-panel #ro-notice-submit.ro-notice-submit-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	color: #ffffff;
}

#ro-notice-panel .ro-notice-form-status {
	font-size: 13px;
	margin: 4px 0 0;
	min-height: 16px;
}

#ro-notice-panel .ro-notice-form-status.ro-notice-status-success {
	color: #3b6d11;
}

#ro-notice-panel .ro-notice-form-status.ro-notice-status-error {
	color: #a32d2d;
}

/* Tablet and up: slightly larger fixed-width modal. */
@media screen and (min-width: 481px) {
	#ro-notice-panel {
		max-width: 380px;
	}
}

/* Desktop: compact input font now safe, since iOS zoom is not a factor. */
@media screen and (min-width: 1025px) {
	#ro-notice-root input[type="text"],
	#ro-notice-root input[type="email"],
	#ro-notice-root input[type="date"],
	#ro-notice-root textarea {
		font-size: 14px;
	}
}

/* Lock background scroll while the modal is open. Applied to <html>
   by JS, scoped to a plugin-specific class so it cannot collide with
   a class of the same name from the theme or another plugin. */
html.ro-notice-scroll-locked {
	overflow: hidden;
}

/* Mobile: raise the bubble above the site's sticky CTA bar at the
   bottom of the viewport so it does not overlap it. */
@media screen and (max-width: 480px) {
	#ro-notice-toggle {
		bottom: 80px;
	}
}