/* MSquare Forms — Front-end styles. Target: minimal, theme-friendly, fully responsive. */

/* ---- Full-width section background ---- */
/*
 * Standard WordPress alignfull technique: negative margin breakout from any
 * centered content container. Works on the vast majority of themes.
 * Vertical spacing is controlled by the Padding setting in the block editor.
 */
.msq-form-section {
	box-sizing: border-box;
	/* Horizontal breakout (standard WordPress alignfull approach).
	   width + negative margins = 100vw; overflow-x:clip prevents a
	   horizontal scrollbar on themes where 100vw > visible viewport
	   (i.e. themes without overflow-x:hidden on body). */
	width: 100vw;
	margin-left:  calc(50% - 50vw);
	margin-right: 0;
	overflow-x: hidden;
	overflow-x: clip;
}

.msq-form-section-inner {
	/* Use the theme's declared content width if available, otherwise 720px */
	max-width: var(--wp--style--global--content-size, 720px);
	margin-left:  auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* ---- Wrapper ---- */
.msq-form-wrap {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

/* ---- Form title ---- */
.msq-form-title {
	margin: 0 0 1rem;
	line-height: 1.3;
	font-weight: 700;
}

/* ---- Form subtitle ---- */
.msq-form-subtitle {
	margin: -.5rem 0 1.25rem;
	font-size: .9375rem;
	line-height: 1.65;
	color: #718096;
}
.msq-form-subtitle a { color: inherit; }
.msq-form-title + .msq-form-subtitle { margin-top: -.25rem; }

/* ---- Fields layout ---- */
.msq-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 1.5rem;
}

.msq-field { flex: 1 1 100%; min-width: 0; }

/* Width variants */
.msq-col-75 { flex-basis: calc(75% - .75rem); max-width: calc(75% - .75rem); }
.msq-col-66 { flex-basis: calc(66.666% - .75rem); max-width: calc(66.666% - .75rem); }
.msq-col-50 { flex-basis: calc(50% - .75rem); max-width: calc(50% - .75rem); }
.msq-col-33 { flex-basis: calc(33.333% - .75rem); max-width: calc(33.333% - .75rem); }
.msq-col-25 { flex-basis: calc(25% - .75rem); max-width: calc(25% - .75rem); }

@media (max-width: 600px) {
	.msq-col-75,
	.msq-col-66,
	.msq-col-50,
	.msq-col-33,
	.msq-col-25 { flex-basis: 100%; max-width: 100%; }
}

/* ---- Labels ---- */
.msq-field-label {
	display: block;
	margin-bottom: .35rem;
	font-weight: 600;
	font-size: .875rem;
}

.msq-required {
	color: #e53e3e;
	margin-left: .2em;
}

/* ---- Inputs ---- */
.msq-field input[type="text"],
.msq-field input[type="email"],
.msq-field input[type="number"],
.msq-field input[type="tel"],
.msq-field input[type="url"],
.msq-field input[type="date"],
.msq-field input[type="time"],
.msq-field select,
.msq-field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: .6rem .85rem;
	border: 1px solid #cbd5e0;
	border-radius: 6px;
	background: #fff;
	font-size: 1rem;
	line-height: 1.5;
	color: inherit;
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}

.msq-field input:focus,
.msq-field select:focus,
.msq-field textarea:focus {
	outline: none;
	border-color: #4a90e2;
	box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}

.msq-field input[aria-invalid="true"],
.msq-field select[aria-invalid="true"],
.msq-field textarea[aria-invalid="true"] {
	border-color: #e53e3e;
	box-shadow: 0 0 0 3px rgba(229,62,62,.15);
}

/* ---- Select arrow ---- */
.msq-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .75rem center;
	padding-right: 2.5rem;
}

/* ---- Textarea ---- */
.msq-field textarea { resize: vertical; min-height: 100px; }

/* ---- Choices (radio / checkbox) ---- */
.msq-choices { display: flex; flex-direction: column; gap: .5rem; }
.msq-choices--horizontal { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.25rem; }

.msq-choice {
	display: flex;
	align-items: center;
	gap: .5rem;
	cursor: pointer;
	font-size: .9375rem;
}

.msq-choice input[type="radio"],
.msq-choice input[type="checkbox"] { flex-shrink: 0; cursor: pointer; }

/* ---- Field description ---- */
.msq-field-desc { margin: 0 0 .4rem; font-size: .825rem; color: #718096; line-height: 1.45; }

/* ---- Help text ---- */
.msq-help-text { margin: .3rem 0 0; font-size: .8125rem; color: #718096; }

/* ---- Error message ---- */
.msq-field-error { min-height: 1.2em; margin-top: .25rem; font-size: .8125rem; color: #e53e3e; }

/* ---- Label position: left column ---- */
.msq-label-pos-left {
	display: grid;
	grid-template-columns: 140px 1fr;
	column-gap: 1rem;
	align-items: start;
}
.msq-label-pos-left .msq-field-label { padding-top: .5rem; margin-bottom: 0; }
.msq-label-pos-left .msq-field-desc,
.msq-label-pos-left .msq-help-text,
.msq-label-pos-left .msq-field-error,
.msq-label-pos-left .msq-choices { grid-column: 2; }

@media ( max-width: 600px ) {
	.msq-label-pos-left { grid-template-columns: 1fr; }
	.msq-label-pos-left .msq-field-label { padding-top: 0; margin-bottom: .3rem; }
}

/* ---- Label position: hidden (visually hidden, accessible) ---- */
.msq-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;
}

/* ---- Note / Message block ---- */
.msq-field--note {
	flex-basis: 100%;
	padding: 12px 16px;
	border-radius: 4px;
	line-height: 1.6;
	font-size: .9375rem;
}
.msq-field--note p:first-child { margin-top: 0; }
.msq-field--note p:last-child  { margin-bottom: 0; }

/* Link underline — controlled by form-level setting */
.msq-links-underlined .msq-field-desc a,
.msq-links-underlined .msq-help-text a,
.msq-links-underlined .msq-field--note a {
	text-decoration: underline;
}

/* ---- Section break ---- */
.msq-field--section { flex-basis: 100%; }
.msq-section-label { margin: 0 0 .25rem; font-size: 1.1rem; font-weight: 700; }
.msq-section-desc  { margin: 0; color: #718096; font-size: .875rem; }

/* ---- Honeypot ---- */
.msq-hp { position: absolute; left: -9999px; overflow: hidden; }

/* ---- Submit button ---- */
.msq-form-footer { margin-top: 1.5rem; }

.msq-submit-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.75rem;
	background: #4a90e2;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s, transform .1s;
	-webkit-appearance: none;
	appearance: none;
}

.msq-submit-btn:hover  { background: #357abd; }
.msq-submit-btn:active { transform: scale(.98); }
.msq-submit-btn:disabled { opacity: .65; cursor: not-allowed; }

/* ---- Loading state ---- */
.msq-form.msq-loading .msq-submit-btn::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: msq-spin .7s linear infinite;
}

@keyframes msq-spin { to { transform: rotate(360deg); } }

/* ---- Status messages ---- */
.msq-form-messages { margin-top: 1rem; }

.msq-msg {
	padding: .85rem 1.1rem;
	border-radius: 6px;
	font-size: .9375rem;
	line-height: 1.5;
}

.msq-msg--success { background: #f0fff4; border: 1px solid #68d391; color: #276749; }
.msq-msg--error   { background: #fff5f5; border: 1px solid #fc8181; color: #9b2c2c; }

/* ---- Form closed notice ---- */
.msq-form-closed {
	padding: .85rem 1.1rem;
	border-radius: 6px;
	background: #fffbeb;
	border: 1px solid #f6e05e;
	color: #744210;
	font-size: .9375rem;
}

/* ---- Conditional logic ---- */
.msq-field--cond-hidden { display: none !important; }

/* ---- Rating field ---- */
.msq-field--rating .msq-rating-stars {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
	--msq-star-color: #f6ad55;
	--msq-star-empty: #cbd5e0;
}

.msq-field--rating .msq-rating-stars input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.msq-field--rating .msq-rating-stars label {
	font-size: 2rem;
	color: var( --msq-star-empty );
	cursor: pointer;
	transition: color .1s;
	line-height: 1;
	user-select: none;
}

/* Checked state */
.msq-field--rating .msq-rating-stars input:checked + label,
.msq-field--rating .msq-rating-stars input:checked ~ label { color: var( --msq-star-color ); }

/* Hover resets checked, then re-applies hover selection */
.msq-field--rating .msq-rating-stars:hover label                            { color: var( --msq-star-empty ); }
.msq-field--rating .msq-rating-stars label:hover,
.msq-field--rating .msq-rating-stars label:hover ~ label                    { color: var( --msq-star-color ); }

/* ---- Slider field ---- */
.msq-slider-wrap {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.msq-slider {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	background: #cbd5e0;
	border-radius: 2px;
	cursor: pointer;
	outline: none;
	border: none;
	padding: 0;
}

.msq-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	background: #4a90e2;
	border-radius: 50%;
	cursor: pointer;
	transition: background .15s;
}

.msq-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: #4a90e2;
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.msq-slider:focus::-webkit-slider-thumb,
.msq-slider:focus::-moz-range-thumb { background: #357abd; }

.msq-slider-display {
	min-width: 2.5rem;
	text-align: center;
	font-weight: 600;
	font-size: .9375rem;
	color: #4a5568;
}