/* Page title of whatever page embeds the form. Rendered by the theme, outside
   the shortcode's markup, so it's scoped by the body class the plugin adds
   (see MBO_Form_Renderer::add_body_class) rather than by a hardcoded page ID.
   Georgia is a system serif: no external font request, nothing to self-host,
   and no third-party call that would need cookie/RGPD consideration. */
.mbo-form-page .entry-title {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: 700;
}

.mbo-form {
	max-width: 640px; margin: 0 auto; font-family: inherit;
	--mbo-fieldset-bg: #EFEBE3;
}

/* Honeypot: moved off-screen instead of display:none, because bots increasingly
   skip display:none/visibility:hidden inputs. Real users never see or tab into
   it (see the tabindex/aria-hidden on the markup). */
.mbo-form .mbo-hp {
	position: absolute; left: -9999px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.mbo-form fieldset { border: 1px solid #e0d8d5; border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; background: var(--mbo-fieldset-bg); }
.mbo-form legend { font-weight: 600; padding: 0 6px; }
.mbo-form label { display: block; margin: 12px 0 4px; font-weight: 600; }
.mbo-form input[type="text"], .mbo-form input[type="tel"], .mbo-form select, .mbo-form textarea {
	width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;
}
.mbo-form .mbo-checkbox-group label { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; }
.mbo-form .mbo-optional { font-weight: 400; color: #7a6f6b; font-size: 0.9em; }
.mbo-form .mbo-consent { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e0d8d5; }
.mbo-form .mbo-consent label { font-weight: 400; display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.mbo-form .mbo-consent input[type="checkbox"] { margin-top: 3px; flex: none; }
.mbo-form .mbo-consent small { display: block; margin-top: 6px; }
.mbo-form .mbo-consent a { color: #C24732; }
/* Custom file control. The native input is clipped rather than display:none so it
   stays focusable and keeps native validation (the cover photo is required). */
.mbo-form .mbo-file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mbo-form .mbo-file input[type="file"] {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mbo-form .mbo-file-btn {
	display: inline-block; margin: 0; cursor: pointer; font-weight: 600;
	background: #fff; border: 1px solid #F9A392; color: #C24732;
	border-radius: 6px; padding: 8px 16px; white-space: nowrap;
}
.mbo-form .mbo-file-btn:hover { background: #F9A392; color: #fff; }
/* Keyboard users focus the hidden input; show it on the label that stands in for it. */
.mbo-form .mbo-file input[type="file"]:focus + .mbo-file-btn { outline: 2px solid #C24732; outline-offset: 2px; }
.mbo-form .mbo-file-status { color: #7a6f6b; font-size: 0.92em; word-break: break-word; }

.mbo-form .mbo-photo-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mbo-form .mbo-photo-preview img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; display: block; }
.mbo-form .mbo-photo-preview-item { position: relative; width: 80px; height: 80px; }
.mbo-form .mbo-photo-remove {
	position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
	background: rgba(0, 0, 0, 0.6); color: #fff; border: none; cursor: pointer; font-size: 13px;
	line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0;
}
.mbo-form .mbo-photo-remove:hover { background: rgba(0, 0, 0, 0.8); }
.mbo-form .mbo-template-btn { background: none; border: 1px solid #F9A392; color: #C24732; border-radius: 6px; padding: 6px 12px; cursor: pointer; margin-bottom: 8px; margin-right: 8px; }
.mbo-form button[type="submit"] {
	background: #F9A392; color: #fff; border: none; border-radius: 8px; padding: 12px 24px;
	font-weight: 700; cursor: pointer; font-size: 16px;
}
.mbo-form .mbo-error { color: #a83250; background: #a8325014; border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; }
.mbo-form .mbo-success { color: #2f8f6b; background: #2f8f6b14; border-radius: 6px; padding: 14px 16px; margin-bottom: 16px; font-weight: 600; }

/* Bloque de contacto de la pantalla de éxito: por si quiere corregir algo, y
   más adelante el canal por el que se le pasan los datos de pago. */
.mbo-form .mbo-success-extra {
	background: var(--mbo-fieldset-bg); border: 1px solid #e0d8d5; border-radius: 8px;
	padding: 18px 20px; text-align: center;
}
.mbo-form .mbo-success-extra p { margin: 0 0 14px; }
.mbo-form .mbo-wa-btn {
	display: inline-block; background: #25D366; color: #fff; text-decoration: none;
	font-weight: 700; border-radius: 8px; padding: 12px 22px;
}
.mbo-form .mbo-wa-btn:hover { background: #1da851; color: #fff; }
.mbo-form button[type="submit"].mbo-submitting { opacity: 0.75; cursor: wait; display: inline-flex; align-items: center; gap: 10px; }
.mbo-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: mbo-spin 0.7s linear infinite; }
@keyframes mbo-spin { to { transform: rotate(360deg); } }