/*
Theme Name:   Sparelax Child
Theme URI:    https://worldpeacewellness.org/
Description:  Child theme of Sparelax for World Peace Wellness. Adds a custom blog (listing, single post, category/tag archives, search) that keeps the site's own Sparelax/Elementor header and footer. Parent theme files stay untouched, so Sparelax updates are safe.
Author:       World Peace Wellness
Template:     sparelax
Version:      1.1.0
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  sparelax-child
*/

/* Blog styles live in assets/css/blog.css and load on blog pages only. */

/* ==========================================================================
   Sidebar "Contact With Us" form (Contact Form 7 inside an Elementor sidebar
   on service pages: Ayurveda, Yoga Therapy, Abhyangam, …).
   A container query scopes every rule to a NARROW form (≤ 520px wide), so the
   full-width form on the Contact page keeps its own two-column layout.
   ========================================================================== */
.tm-contact-form-7-wrapper {
	container: wpw-cf7 / inline-size;
}

@container wpw-cf7 (max-width: 520px) {
	/* Card + heading */
	.tm-contact-form-7 .tm-contact-form-7-title {
		position: relative;
		margin-bottom: 26px !important;
		padding-bottom: 14px;
		font-size: 26px;
		line-height: 1.2;
	}

	.tm-contact-form-7 .tm-contact-form-7-title::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 46px;
		height: 3px;
		border-radius: 3px;
		background: var(--theme-color1, #a90000);
	}

	/* One field per row: placeholders like "Whatsapp No. (With Country Code)"
	   no longer get cut off. */
	.tm-contact-form-7 .wpcf7 .row {
		--bs-gutter-y: 12px;
		margin-top: 0;
	}

	.tm-contact-form-7 .wpcf7 .row > [class*="col-"] {
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		margin-top: 0;
	}

	.tm-contact-form-7 .wpcf7 .row > [class*="col-"] + [class*="col-"] {
		margin-top: 12px;
	}

	/* Inputs, select, date, textarea: one consistent look */
	.tm-contact-form-7 .wpcf7 .form-control,
	.tm-contact-form-7 .wpcf7 .nice-select {
		width: 100%;
		height: 52px;
		padding: 0 18px;
		border: 1px solid #ece4d8 !important;
		border-radius: 14px !important;
		background-color: #f8f4ee !important;
		color: #1c1a1d;
		font-size: 15px;
		line-height: 50px;
		box-shadow: none !important;
		transition: border-color .2s, background-color .2s, box-shadow .2s;
	}

	.tm-contact-form-7 .wpcf7 .form-control::placeholder {
		color: #8a8189;
		opacity: 1;
	}

	.tm-contact-form-7 .wpcf7 .form-control:focus,
	.tm-contact-form-7 .wpcf7 .nice-select.open,
	.tm-contact-form-7 .wpcf7 .nice-select:focus {
		border-color: var(--theme-color1, #a90000) !important;
		background-color: #fff !important;
		box-shadow: 0 0 0 4px rgba(169, 0, 0, .1) !important;
		outline: none;
	}

	.tm-contact-form-7 .wpcf7 .wpcf7-date {
		line-height: normal;
	}

	.tm-contact-form-7 .wpcf7 .wpcf7-textarea {
		height: 120px !important;
		padding-top: 14px;
		padding-bottom: 14px;
		line-height: 1.6;
		resize: vertical;
	}

	/* nice-select dropdown (Sparelax replaces the <select>) */
	.tm-contact-form-7 .wpcf7 .nice-select {
		float: none;
		display: flex;
		align-items: center;
	}

	.tm-contact-form-7 .wpcf7 .nice-select::after {
		right: 20px;
		border-color: var(--theme-color1, #a90000);
	}

	.tm-contact-form-7 .wpcf7 .nice-select .list {
		width: 100%;
		max-height: 260px;
		overflow-y: auto;
		border-radius: 14px;
		box-shadow: 0 20px 40px -20px rgba(28, 26, 29, .35);
	}

	.tm-contact-form-7 .wpcf7 .nice-select .option {
		line-height: 1.4;
		min-height: 0;
		padding: 10px 18px;
		white-space: normal;
	}

	/* Gender radios as pill chips */
	.tm-contact-form-7 .wpcf7 .wpcf7-radio {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 2px 0;
	}

	.tm-contact-form-7 .wpcf7 .wpcf7-radio .wpcf7-list-item {
		flex: 1 1 0;
		margin: 0;
	}

	.tm-contact-form-7 .wpcf7 .wpcf7-radio label {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-height: 44px;
		margin: 0;
		padding: 0 10px;
		border: 1px solid #ece4d8;
		border-radius: 999px;
		background: #f8f4ee;
		color: #5d5560;
		font-size: 14px;
		cursor: pointer;
		transition: background .2s, border-color .2s, color .2s;
	}

	.tm-contact-form-7 .wpcf7 .wpcf7-radio input[type="radio"] {
		accent-color: var(--theme-color1, #a90000);
		margin: 0;
	}

	.tm-contact-form-7 .wpcf7 .wpcf7-radio label:hover {
		border-color: var(--theme-color1, #a90000);
	}

	.tm-contact-form-7 .wpcf7 .wpcf7-radio label:has(input:checked) {
		border-color: var(--theme-color1, #a90000);
		background: rgba(169, 0, 0, .08);
		color: var(--theme-color1, #a90000);
		font-weight: 600;
	}

	/* Full-width pill button, like the site's "Book Consultation" */
	.tm-contact-form-7 .wpcf7 input[type="submit"] {
		width: 100% !important;
		height: 54px;
		margin-top: 4px;
		border: 0;
		border-radius: 999px !important;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: .08em;
		box-shadow: 0 14px 28px -16px rgba(169, 0, 0, .8);
		transition: transform .25s, box-shadow .25s, background-color .25s;
	}

	.tm-contact-form-7 .wpcf7 input[type="submit"]:hover {
		transform: translateY(-2px);
		box-shadow: 0 18px 32px -16px rgba(169, 0, 0, .9);
	}

	.tm-contact-form-7 .wpcf7-response-output {
		margin: 14px 0 0 !important;
		border-radius: 12px;
		font-size: 14px;
	}
}