html,
body {
	overflow: visible;
	min-height: 100vh;
	margin: 0;
}

body {
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.4em;
	letter-spacing: 0;
}

html[lang="ja"] body {
	font-family: "M PLUS 1p", sans-serif;
}

html:not([lang="ja"]) body {
	font-family: "Yantramanav", sans-serif;
}

body.scroll-locked {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#contact-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	height: var(--viewport-height, 100vh);
	padding: 2rem 3.2rem 2rem 3.2rem;
}

#contact-wrapper .container-fluid {
	position: relative;
	flex: 1;
	padding: 0;
	overflow: hidden;
}

@supports (-webkit-touch-callout: none) {
	body.scroll-locked #contact-wrapper {
		height: var(--viewport-height, -webkit-fill-available);
	}
}

.container-fluid {
	width: 100%;
}

.row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	margin-right: calc(-0.5 * var(--bs-gutter-x));
	margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-top: var(--bs-gutter-y);
}

.col-6 {
	flex: 0 0 auto;
	width: 50%;
}

.col-12 {
	flex: 0 0 auto;
	width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: inherit;
	text-decoration: none;
}

h3.form-title {
	font-size: 1.35rem;
	font-weight: 400;
	margin-bottom: 1rem;
}

h4.form-heading {
	font-size: 1.35rem;
	font-weight: 300;
	position: relative;
	margin-top: 1.5rem;
}

/* ========== Row 01 styles =========== */

.container .content-top {
	margin-bottom: 1rem;
}

#custom-form .form-wrapper {
	width: 100%;
	display: flex;
}

.content-top .col-12 .row-heading {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.content-top .m-hidden p.content {
	padding-right: 2%;
}

.content-top .content-left,
.content-top .content-right {
	width: 50%;
	display: none;
}

/* ========== Row 02 styles =========== */

.form-wrapper .col {
	padding: 0;
}

#custom-form .row .wpcf7.js {
	width: 100%;
}

/* ALTERED BY DAVID */
/* DATE INPUT FIELD STYLES */
.form-wrapper * input[type="date"] {
	width: 100% !important;
}

/* Added these specific styles for iOS date inputs */
/* Added these specific styles for iOS date inputs */
@supports (-webkit-touch-callout: none) {
	/* iOS specific styles */
	.form-wrapper input[type="date"],
	.form-wrapper input[type="date"] + br,
	.form-wrapper input[type="date"] + * {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		-webkit-appearance: none;
		appearance: none;
		background-color: #fff;
		min-height: 3rem;
		height: 3rem;
		border: 1px solid #878787;
		padding: 1rem;
		display: block;
		margin: 0 !important;
		padding-bottom: 0 !important;
		position: relative;
		/* Add this for positioning */
	}

	/* Remove any line breaks */
	.form-wrapper input[type="date"] + br {
		display: none !important;
	}

	/* Add placeholder text using ::after */
	.form-wrapper input[type="date"]::after {
		content: "dd.mm.yyyy";
		position: absolute;
		left: 1rem;
		top: 50%;
		transform: translateY(-50%);
		color: #656565;
		pointer-events: none;
		/* Ensure the placeholder doesn't interfere with input */
	}

	/* Hide placeholder when input has value */
	.form-wrapper input[type="date"].has-value::after {
		content: "";
	}
}

/* END DATE INPUT FIELD STYLES */
/* END ALTERED BY DAVID */

h4.form-heading span.super {
	font-size: 0.65em;
	font-weight: 500;
	position: relative;
	top: -0.4em;
	/* I am adjustuing this value to fine-tune the alignment */
}

h4.form-heading span.small {
	font-size: 0.7em;
}

p.content {
	text-align: justify;
}

p.form-subheading {
	margin-bottom: 1rem !important;
}

.row.content .form-container {
	max-height: 80vh;
	overflow: auto;
	padding-bottom: 2rem;
	flex-grow: 1;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

body.scroll-locked .row.content .form-container {
	overflow: auto;
}

.row.content .form-container::-webkit-scrollbar {
	display: none;
}

.form-container .wpcf7.js {
	margin-top: -1.5rem;
}

.form-container .wpcf7 form {
	padding-bottom: 5rem;
}

.form-wrapper .row .col-md-3,
.form-wrapper .row .col-md-6 {
	margin-bottom: 1rem;
}

.form-wrapper * label {
	width: 100%;
	font-weight: 300;
	display: inline-block;
}

.form-wrapper * input {
	width: 100%;
	background-color: #fff;
	border: 1px solid #878787;
	border-radius: 0 !important;
	line-height: 1em;
	height: 3rem;
	margin-bottom: 1rem;
	padding: 1rem;
}

.form-wrapper * input::placeholder {
	font-size: 1.35rem;
	line-height: 1.3;
	font-weight: 300;
}

.form-wrapper * input[type="submit"] {
	width: fit-content;
	line-height: 1;
	cursor: pointer;
	outline: none;
	border: 1px solid #878787;
	border-radius: 0 !important;
	color: #000;
	margin: 0;
	padding: 1.5rem 1.5rem;
	height: auto;
}

.form-wrapper * input[type="submit"]:hover {
	background-color: #fff;
}

.form-wrapper * input[type="file"] {
	color: #000;
	background-color: #fff;
	height: 4rem;
	border-radius: 0 !important;
}

.form-wrapper * input[type="file"]:hover {
	color: #000 !important;
	background-color: #fff;
}

.wpcf7-not-valid-tip {
	display: none;
}

.wpcf7-form-control.wpcf7-not-valid {
	border: 2px solid red;
}

form.wpcf7-form .wpcf7-response-output {
	display: none;
}

.row-2 .w-25 p {
	width: 65%;
	float: right;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

/* ADDED BY DAVID */
/* ADDED BY DAVID TO MAKE THE "UPOLAD PREVIEW BUTTON" CLEANER */

/* Style the file input container */
.form-wrapper input[type="file"] {
	width: 100%;
	position: relative;
	color: transparent;
	font-size: 0;
}

/* Hide default button text */
.form-wrapper input[type="file"]::-webkit-file-upload-button {
	visibility: hidden;
	width: 0;
}

/* Only show "No file selected" text */
.form-wrapper input[type="file"]::after {
	content: "drop files here";
	position: absolute;
	left: 0;
	top: 50%;
	margin-left: 10px;
	transform: translateY(-50%);
	color: #656565;
	font-size: 1.35rem;
	font-weight: 400;
	font-family: inherit;
}

/* ADDED BY DAVID */
/* ADDED BY DAVID */

.form-wrapper * textarea {
	width: 100%;
	margin-bottom: 1rem;
	background-color: #fff;
	border: 1px solid #656565;
	border-radius: 0 !important;
	line-height: 1em;
	padding: 1rem;
}

.form-wrapper label.label-empty {
	margin-top: -1.5rem;
}

.col-lg-6 .row.text-area {
	margin-top: -1.5rem;
}

.form-wrapper .row-2 {
	display: none;
}

.col-lg-3 .terms-and-condition {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.content.after-submit {
	margin: 2.5rem 0 !important;
}

a.link-terms {
	font-weight: 300;
	text-decoration: none;
}

/* ========== Footer styles =========== */
#contact-footer {
	min-height: 3rem;
	margin-top: auto;
	display: flex;
	align-items: end;
}

#contact-footer .back-to-form {
	display: flex;
	justify-content: end;
}

@media (min-width: 768px) {
	body {
		font-size: 1.35rem;
		line-height: normal;
	}

	#contact-wrapper {
		padding: 3% 7% 1.5% 7%;
	}

	.content-top {
		margin-bottom: 2rem;
	}

	h5.form-title {
		font-size: inherit;
	}

	.content-top .col-12 {
		margin-bottom: 1rem;
	}

	.form-wrapper .row {
		--bs-gutter-x: 5rem;
	}

	h4.form-heading {
		font-size: 1.35rem;
	}

	h4.form-heading span.super {
		font-size: inherit;
		font-weight: inherit;
		top: 0;
	}

	h4.form-heading span.left {
		position: absolute;
		left: -3.5rem;
		font-size: 0.7em;
		top: 20%;
	}

	.form-wrapper * input[type="submit"] {
		width: 80%;
		font-size: 1.35rem;
		font-weight: 300;
		float: right;
	}

	.back-to-form {
		font-size: 1.35rem;
		line-height: 1.3;
		display: flex;
		flex-direction: column;
		align-items: end;
	}
	p.content {
		font-size: 1.35rem;
		line-height: 1.3;
	}

	p.form-subheading {
		font-size: 1.35rem;
		line-height: 1.3;
		margin-bottom: 1rem !important;
	}
}

@media (min-width: 992px) {
	.col-lg-3 {
		flex: 0 0 auto;
		width: 25%;
	}

	.col-lg-6 {
		flex: 0 0 auto;
		width: 50%;
	}

	.form-wrapper .row-2 {
		display: flex;
		align-items: start;
		margin-top: 2rem;
	}
}

@media (min-width: 1200px) {
	body {
		font-size: 1.4rem;
		line-height: 1.3;
	}
}

@media (min-width: 1920px) {
	body {
		font-size: 1.8rem;
	}
}

/* ============================================================
   FILE-UPLOAD — Display uploaded file name in custom-styled input
   Purpose: Ensure that after a file is selected, its name appears
            instead of the placeholder text.
   Context: Custom Contact Form 7 file upload styling (Storefront Child theme)
   ============================================================ */

/*  FILE-UPLOAD — When a file is selected, show its name instead of the default prompt */
.form-wrapper input[type="file"][data-file]::after {
	content: attr(data-file);
	color: #000;
	font-size: 1.35rem; /* match your current placeholder size */
}

/*  FILE-UPLOAD - When no file is selected, use your original prompt */
.form-wrapper input[type="file"]:not([data-file])::after {
	content: "drop files here";
}

/* JAPANESE contact page: force one uniform type size/weight */
html[lang="ja"] #contact-wrapper,
html[lang="ja"] #contact-wrapper * {
	font-family: "M PLUS 1p", sans-serif !important;
	font-weight: 300 !important;
	font-size: 12px !important; /* one size everywhere */
	line-height: 1.6 !important; /* readable leading */
}