/**
 * Contact page additions.
 *
 * Everything here covers markup the Sapo original did not have (the honeypot,
 * the result message) or a place where Bootstrap's .form-control wins a
 * specificity fight the ported stylesheet never had to consider.
 */

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.mida-honeypot {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Submission result ------------------------------------------------------- */

.page-about-new-contact .mida-form-notice {
	width: 100%;
	margin-bottom: 10px;
	padding: 10px 14px;
	font-size: 15px;
	border-radius: var(--border_radius);
	border: 1px solid;
}

.page-about-new-contact .mida-form-notice.is-success {
	color: #7ee0a1;
	border-color: rgba(126, 224, 161, 0.5);
	background: rgba(126, 224, 161, 0.08);
}

.page-about-new-contact .mida-form-notice.is-error {
	color: #ff9d8a;
	border-color: rgba(255, 157, 138, 0.5);
	background: rgba(255, 157, 138, 0.08);
}

/* Form fields -------------------------------------------------------------
 *
 * The ported rules set `color:#fff` on inputs but not on the textarea, so
 * Bootstrap's `.form-control { color: #495057 }` took over and typed text came
 * out near-black on a dark panel.
 */

.page-about-new .page-about-new-main .page-about-new-contact form textarea {
	color: #fff;
}

.page-about-new .page-about-new-main .page-about-new-contact form input:focus,
.page-about-new .page-about-new-main .page-about-new-contact form textarea:focus {
	border-color: #fff;
	background: transparent;
	color: #fff;
	box-shadow: none;
}

.page-about-new .page-about-new-main .page-about-new-contact form input::placeholder,
.page-about-new .page-about-new-main .page-about-new-contact form textarea::placeholder {
	color: #888;
	opacity: 1;
}

/* Chrome paints its own light background over autofilled fields. */
.page-about-new .page-about-new-main .page-about-new-contact form input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px #111 inset;
}

/* The map iframe sits in a 50% column; keep it filling that column. */
.page-about-new-contact-map iframe {
	display: block;
	width: 100%;
}

/* Rich text typed into the page editor, below the form. */
.page-about-new .main-page-data-rte {
	width: 100%;
	margin-top: 2rem;
}

/* Contact Form 7 -----------------------------------------------------------
 *
 * The ported stylesheet was written for the Sapo markup: a bare <form> whose
 * direct children were the fields, with a <button> submit. CF7 wraps every
 * field in <p><span class="wpcf7-form-control-wrap"> and submits through an
 * <input type="submit">. These rules map its markup onto the same layout.
 */

.page-about-new .page-about-new-main .page-about-new-contact .page-about-new-contact-form {
	width: 50%;
}

@media (max-width: 991px) {
	.page-about-new .page-about-new-main .page-about-new-contact .page-about-new-contact-form {
		width: 100%;
	}
}

.page-about-new .page-about-new-main .page-about-new-contact .wpcf7 {
	width: 100%;
}

.page-about-new .page-about-new-main .page-about-new-contact .wpcf7-form {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

/* One <p> per field; the last one holds the textarea and submit side by side. */
.page-about-new .page-about-new-main .page-about-new-contact .wpcf7-form p {
	width: 100%;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.page-about-new .page-about-new-main .page-about-new-contact .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.page-about-new .page-about-new-main .page-about-new-contact .wpcf7-form-control-wrap[data-name="your-message"] {
	width: 70%;
}

.page-about-new .page-about-new-main .page-about-new-contact .wpcf7-form textarea {
	width: 100%;
	margin: 0;
}

/* Submit: the design styled a <button>, CF7 emits an <input>. */
.page-about-new .page-about-new-main .page-about-new-contact .wpcf7-form input[type="submit"] {
	width: calc(30% - 10px);
	height: 65px;
	line-height: 65px;
	padding: 0;
	margin: 0;
	color: var(--color2);
	background: var(--color_main2);
	border: 1px solid var(--color_main2);
	border-radius: var(--border_radius);
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.4s linear;
}

.page-about-new .page-about-new-main .page-about-new-contact .wpcf7-form input[type="submit"]:hover {
	background: transparent;
	color: var(--color_main2);
}

@media (max-width: 480px) {
	.page-about-new .page-about-new-main .page-about-new-contact .wpcf7-form-control-wrap[data-name="your-message"] {
		width: 65%;
	}

	.page-about-new .page-about-new-main .page-about-new-contact .wpcf7-form input[type="submit"] {
		width: calc(35% - 10px);
		font-size: 0.9rem;
	}
}

/* CF7's spinner is an inline element that would push the submit out of the row
 * even while invisible, so fade the button during submission instead. */
.page-about-new-contact .wpcf7-spinner {
	display: none;
}

.page-about-new-contact .wpcf7-form.submitting input[type="submit"] {
	opacity: 0.6;
}

/* Result message and field errors, restyled for the dark panel. */
.page-about-new-contact .wpcf7 form .wpcf7-response-output {
	width: 100%;
	margin: 12px 0 0;
	padding: 10px 14px;
	font-size: 15px;
	border-width: 1px;
	border-radius: var(--border_radius);
}

.page-about-new-contact .wpcf7 form.sent .wpcf7-response-output {
	color: #7ee0a1;
	border-color: rgba(126, 224, 161, 0.5);
	background: rgba(126, 224, 161, 0.08);
}

.page-about-new-contact .wpcf7 form.invalid .wpcf7-response-output,
.page-about-new-contact .wpcf7 form.failed .wpcf7-response-output,
.page-about-new-contact .wpcf7 form.aborted .wpcf7-response-output,
.page-about-new-contact .wpcf7 form.spam .wpcf7-response-output,
.page-about-new-contact .wpcf7 form.unaccepted .wpcf7-response-output {
	color: #ff9d8a;
	border-color: rgba(255, 157, 138, 0.5);
	background: rgba(255, 157, 138, 0.08);
}

.page-about-new-contact .wpcf7-not-valid-tip {
	margin: -6px 0 8px;
	font-size: 13px;
	color: #ff9d8a;
}

.page-about-new-contact .wpcf7-form .wpcf7-not-valid {
	border-color: rgba(255, 157, 138, 0.7);
}

/* Rich text from the theme options -----------------------------------------
 *
 * The contact intro used to be a single <p> styled by `.section-title-all p`.
 * Now that the editor supplies its own paragraphs the wrapper is a <div>, so
 * those rules are reapplied here — to the block and to the paragraphs in it.
 */

.page-about-new .section-title-all .mida-rte {
	width: 100%;
	margin-bottom: 15px;
	color: #999;
}

.page-about-new .section-title-all .mida-rte p {
	width: 100%;
	margin-bottom: 10px;
	color: inherit;
}

.page-about-new .section-title-all .mida-rte p:last-child {
	margin-bottom: 0;
}

.page-about-new .section-title-all .mida-rte a {
	color: #fff;
}

.page-about-new .section-title-all .mida-rte strong,
.page-about-new .section-title-all .mida-rte b {
	color: #fff;
}

.page-about-new .section-title-all .mida-rte ul,
.page-about-new .section-title-all .mida-rte ol {
	margin: 0 0 10px;
	padding-left: 20px;
	list-style: disc outside;
}

.page-about-new .section-title-all .mida-rte ol {
	list-style: decimal outside;
}

.page-about-new .section-title-all .mida-rte li {
	list-style: inherit;
}

/* Booking page — Contact Form 7 ---------------------------------------------
 *
 * `.page_book_form button` in the ported stylesheet was written for the Sapo
 * markup. CF7 submits through an <input>, which that rule never reaches, and
 * the original button also leaned on Bootstrap's .btn for its padding.
 */

.page_datlichthietke .page_book_form .wpcf7-form input[type="submit"] {
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #fff;
	background: #000;
	border: 1px solid #fff;
	border-radius: 0;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s ease;
}

.page_datlichthietke .page_book_form .wpcf7-form input[type="submit"]:hover {
	color: #000;
	background: #fff;
}

/* The design spaced fields with `.form-control { margin-bottom: 1rem }`, a
   class CF7 does not emit — the gap moves onto its paragraph wrappers. */
.page_datlichthietke .page_book_form .wpcf7-form p {
	margin: 0 0 1rem;
}

/* The originals carried Bootstrap's .form-control .input-lg; CF7 emits its own
   classes, so the same metrics are restated here. */
.page_datlichthietke .page_book_form .wpcf7-form input:not([type="submit"]),
.page_datlichthietke .page_book_form .wpcf7-form textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0;
}

/* The spinner is an inline element that would shove the centred button
   off-axis even while invisible. */
.page_datlichthietke .wpcf7-spinner {
	display: none;
}

.page_datlichthietke .wpcf7-form.submitting input[type="submit"] {
	opacity: 0.6;
}

.page_datlichthietke .wpcf7 form .wpcf7-response-output {
	margin: 12px 0 0;
	padding: 10px 14px;
	font-size: 14px;
	text-align: left;
	border-width: 1px;
	border-radius: 4px;
}

.page_datlichthietke .wpcf7 form.sent .wpcf7-response-output {
	color: #7ee0a1;
	border-color: rgba(126, 224, 161, 0.5);
	background: rgba(126, 224, 161, 0.08);
}

.page_datlichthietke .wpcf7 form.invalid .wpcf7-response-output,
.page_datlichthietke .wpcf7 form.failed .wpcf7-response-output,
.page_datlichthietke .wpcf7 form.aborted .wpcf7-response-output,
.page_datlichthietke .wpcf7 form.spam .wpcf7-response-output,
.page_datlichthietke .wpcf7 form.unaccepted .wpcf7-response-output {
	color: #ff9d8a;
	border-color: rgba(255, 157, 138, 0.5);
	background: rgba(255, 157, 138, 0.08);
}

.page_datlichthietke .wpcf7-not-valid-tip {
	margin: -8px 0 8px;
	font-size: 13px;
	text-align: left;
	color: #ff9d8a;
}

/* Estimate page — Contact Form 7 -------------------------------------------
 *
 * `.form-item` is a flex row of label (30%) and control (70%). Two things get
 * in the way: CF7 wraps every control in a <span>, and its autop drops a <p>
 * around the label and that span — so `.form-item` ends up with a single block
 * child and the row collapses into stacked lines.
 *
 * The <p> becomes the flex row instead, and the selectors below are written as
 * descendants so they still hold if autop is ever turned off.
 */

.page_dutoan_hoavon .form-item > p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	margin: 0;
}

.page_dutoan_hoavon .form-item label {
	flex: 0 0 30%;
}

.page_dutoan_hoavon .form-item .wpcf7-form-control-wrap {
	display: block;
	flex: 0 0 70%;
	width: 70%;
}

.page_dutoan_hoavon .form-btn > p {
	margin: 0;
}

.page_dutoan_hoavon .form-item .wpcf7-form-control-wrap input,
.page_dutoan_hoavon .form-item .wpcf7-form-control-wrap select,
.page_dutoan_hoavon .form-item .wpcf7-form-control-wrap textarea {
	width: 100%;
}

@media (max-width: 767px) {
	.page_dutoan_hoavon .form-item label,
	.page_dutoan_hoavon .form-item .wpcf7-form-control-wrap {
		width: 100%;
		flex: 0 0 100%;
	}
}

/* CF7 submits with an <input>; the design styled a <button>. */
.page_dutoan_hoavon .wpcf7-form input[type="submit"] {
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: #fff;
	background: #000;
	border: 1px solid #fff;
	border-radius: 0;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s ease;
}

.page_dutoan_hoavon .wpcf7-form input[type="submit"]:hover {
	color: #000;
	background: #fff;
}

.page_dutoan_hoavon .wpcf7-spinner {
	display: none;
}

.page_dutoan_hoavon .wpcf7-form.submitting input[type="submit"] {
	opacity: 0.6;
}

.page_dutoan_hoavon .wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 10px 14px;
	font-size: 14px;
	border-width: 1px;
	border-radius: 4px;
}

.page_dutoan_hoavon .wpcf7 form.sent .wpcf7-response-output {
	color: #7ee0a1;
	border-color: rgba(126, 224, 161, 0.5);
	background: rgba(126, 224, 161, 0.08);
}

.page_dutoan_hoavon .wpcf7 form.invalid .wpcf7-response-output,
.page_dutoan_hoavon .wpcf7 form.failed .wpcf7-response-output,
.page_dutoan_hoavon .wpcf7 form.aborted .wpcf7-response-output,
.page_dutoan_hoavon .wpcf7 form.spam .wpcf7-response-output,
.page_dutoan_hoavon .wpcf7 form.unaccepted .wpcf7-response-output {
	color: #ff9d8a;
	border-color: rgba(255, 157, 138, 0.5);
	background: rgba(255, 157, 138, 0.08);
}

.page_dutoan_hoavon .wpcf7-not-valid-tip {
	margin-top: 5px;
	font-size: 13px;
	color: #ff9d8a;
}

/* Contact block -----------------------------------------------------------
 *
 * The original prints the whole company block as one run of <br>-separated
 * text, so the labels, the numbers and the address all carry the same weight
 * and nothing lines up. These rules back a proper row list: a fixed label
 * column, values that read as links, and the social row underneath.
 */

/*
 * `.section-title-all` is a flex row with space-between, so a card narrow
 * enough to sit beside the heading gets pulled onto the heading's line and the
 * title ends up floating at the bottom-left of the card.
 *
 * `flex-basis: 100%` does not fix it: line breaking uses the basis clamped by
 * max-width, so a 460px cap still fits beside a 96px heading. The block here
 * has nothing to lay out side by side, so it opts out of the flex row instead.
 */
.section-title-all.mida-contact-title {
	display: block;
}

/*
 * No max-width: the card fills its column so the row rules end exactly where
 * the image in the row above ends. Capping it left a ragged ~100px gap on the
 * right, which read as the block being misaligned.
 */
.mida-contact-card {
	width: 100%;
}

/* `.section-title-all p` sets a grey that would otherwise win on specificity,
   so the company line is scoped the same way to take the colour back. */
.page-about-new .section-title-all p.mida-contact-company {
	margin: 0 0 14px;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.mida-contact-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid #2a2a2a;
}

.mida-contact-rows li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 0;
	border-bottom: 1px solid #2a2a2a;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.5;
}

.mida-contact-icon {
	flex: 0 0 auto;
	/* The icons are optically centred on the first line of the value, which
	   `align-items: baseline` alone would not do for a replaced element. */
	align-self: flex-start;
	margin-top: 2px;
	color: #8a8a8a;
}

.mida-contact-icon .mida-icon {
	width: 17px;
	height: 17px;
	display: block;
}

.mida-contact-label {
	flex: 0 0 92px;
	color: #8a8a8a;
}

.mida-contact-value {
	flex: 1 1 auto;
	min-width: 0;
	color: #fff;
	/* Long addresses and e-mails must not push the column open. */
	overflow-wrap: anywhere;
}

.mida-contact-value a {
	color: #fff;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s ease;
}

.mida-contact-value a:hover,
.mida-contact-value a:focus {
	color: #fff;
	border-bottom-color: #fff;
}

.mida-contact-sep {
	margin: 0 7px;
	font-style: normal;
	color: #4a4a4a;
}

/* Social row --------------------------------------------------------------- */

.mida-contact-social {
	margin-top: 22px;
}

.mida-contact-social-title {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a8a8a;
}

.mida-social-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mida-social-row a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: #cfcfcf;
	border: 1px solid #2f2f2f;
	border-radius: 50%;
	transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

/*
 * Brand marks are solid shapes, unlike the stroked icons in mida_icon(), so
 * palm-vars.css must not push their fill off. They carry their own class for
 * exactly that reason.
 */
.mida-brand {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Colour arrives on hover only: seven brand colours at rest would fight the
   monochrome page far harder than the row is worth. */
.mida-social-row a:hover,
.mida-social-row a:focus {
	color: #fff;
	border-color: transparent;
}

.mida-social-row .is-facebook a:hover,
.mida-social-row .is-facebook a:focus {
	background: #0866ff;
}

.mida-social-row .is-tiktok a:hover,
.mida-social-row .is-tiktok a:focus {
	background: #010101;
	border-color: #69c9d0;
}

.mida-social-row .is-youtube a:hover,
.mida-social-row .is-youtube a:focus {
	background: #ff0000;
}

.mida-social-row .is-instagram a:hover,
.mida-social-row .is-instagram a:focus {
	background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888);
}

.mida-social-row .is-threads a:hover,
.mida-social-row .is-threads a:focus {
	color: #000;
	background: #fff;
}

.mida-social-row .is-pinterest a:hover,
.mida-social-row .is-pinterest a:focus {
	background: #e60023;
}

.mida-social-row .is-linkedin a:hover,
.mida-social-row .is-linkedin a:focus {
	background: #0a66c2;
}

/* Footer fallback ---------------------------------------------------------
 *
 * Networks with no PNG bundled render the inline mark instead. Tinting the
 * disc keeps them beside the bundled artwork without looking like a
 * different set.
 */

.shop-social-mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	color: #fff;
	background: #3a3a3a;
	border-radius: 50%;
}

.shop-social-mark .mida-brand {
	width: 16px;
	height: 16px;
}

.shop-social-mark.is-threads {
	color: #000;
	background: #fff;
}

.shop-social-mark.is-pinterest {
	background: #e60023;
}

.shop-social-mark.is-linkedin {
	background: #0a66c2;
}

@media (max-width: 480px) {
	.mida-contact-rows li {
		flex-wrap: wrap;
	}

	.mida-contact-label {
		flex: 0 0 auto;
	}

	.mida-contact-value {
		flex: 1 1 100%;
		padding-left: 27px;
	}
}

/* Alternating rows: outer edges -------------------------------------------
 *
 * The ported rule puts `padding: 0 50px` on the image column only, and the
 * image column swaps sides every other row (`nth-child(2n+1)` sets order: 2).
 * The result is that nothing lines up down the page: row one's text sits flush
 * against the container while its image is inset 50px from the right, and row
 * two's image is inset 50px from the left while its text runs to the edge.
 *
 * The 50px is a gutter between the two columns, not an outer margin, so it
 * belongs on the inner side only — which side that is depends on where the
 * image landed.
 */
@media (min-width: 992px) {
	/* Odd rows: image ordered to the right, so its gutter is on the left. */
	.page-about-new .page-about-new-main .page-about-new-main-item .page-about-new-main-item-left {
		padding: 0 0 0 50px;
	}

	/* Even rows: image stays on the left, gutter on the right. */
	.page-about-new .page-about-new-main .page-about-new-main-item:nth-child(2n) .page-about-new-main-item-left {
		padding: 0 50px 0 0;
	}
}