/* ==========================================================================
   Forminator front-end overrides -- Highland Cigar Co.

   Restyles Forminator's default markup to match the template's own form
   design instead of Forminator's stock look. Two variants, matching the two
   different form skins in the original HTML template:

     1) .reservation .forminator-...   -> dark video-hero style (Reservation page)
        source: css/custom.css lines ~545-562 (".reservation .form ...")
     2) .contact .forminator-...       -> light dashed-box style (Contact page)
        source: css/custom.css lines ~429-444 (".contact .form ...")

   IMPORTANT -- read before wiring this up:
   Forminator's own front-end classes (forminator-row, forminator-field,
   forminator-input, etc.) are stable across recent versions and are what
   this file targets, but I could not pull the raw rendered HTML of your
   live form to confirm 1:1 against your actual install (fetch tools only
   return a text summary, not markup). Open one field in your browser's
   inspector after applying this and, if a selector below doesn't match,
   swap in the class you actually see -- the color/spacing/font values are
   the part that matters and those are taken directly from the template's
   own CSS, not guessed.

   Wire-up notes (done in the Forminator builder, not in code):
   - Date field: enable "Restrict Date" -> future dates only.
   - Time: swap the field for a Select/Dropdown with a fixed list of slots
     (12:00 PM, 12:30 PM ... 11:30 PM) instead of Forminator's Hour/Minute/
     AM-PM dropdown Time field -- see chat notes for why.
   - Set each field's column width in the builder to match the template's
     grid: Name/Phone/Email = 6 (half width), Date/Time/Guests = 4 (third
     width), Note + Submit = 12 (full width).
   ========================================================================== */

/* -------------------------------------------------------------------------
   1) Reservation page variant (dark, video background, gold accents)
   ------------------------------------------------------------------------- */
.reservation .forminator-custom-form,
.reservation .forminator-cform {
	margin: 30px 0;
	display: block;
}

.reservation .forminator-row {
	margin: 0 -10px;
}

.reservation .forminator-col {
	padding: 0 10px;
}

.reservation .forminator-label {
	display: block;
	text-align: left;
	font-weight: 400;
	color: #f6a80f;
	font-size: 15px;
	font-family: "Oswald", sans-serif;
	letter-spacing: 1px;
	margin-bottom: 6px;
}

.reservation .forminator-field {
	position: relative;
	margin: 0 0 15px;
	padding: 0;
	display: block;
/* 	background: rgba(0, 0, 0, .25); */
	border: 1px dashed rgba(255, 255, 255, .5);
	transition: all .3s ease-in-out;
}

.reservation .forminator-field:hover,
.reservation .forminator-field:focus-within {
	border-color: #f6a80f;
}

.reservation .forminator-input,
.reservation .forminator-textarea,
.reservation select.forminator-select {
	font-size: 17px;
	margin: 0;
	outline: none;
	width: 100%;
	padding: 15px;
	color: #fff;
	height: auto;
	line-height: 20px;
	background: none;
	border: none;
	font-weight: 400;
	box-shadow: none;
	border-radius: 0;
	font-family: "Source Sans 3", sans-serif;
}

.reservation .forminator-input::placeholder,
.reservation .forminator-textarea::placeholder {
	color: #fff;
	opacity: 1;
}

.reservation .forminator-input:hover,
.reservation .forminator-input:focus,
.reservation .forminator-textarea:hover,
.reservation .forminator-textarea:focus {
	background: none;
	border: none;
	box-shadow: none;
	color: #fff;
}

.reservation .forminator-textarea {
	min-height: 150px;
}

/* Select (used for the fixed reservation-time slot list) gets the same
   dashed-box treatment plus a small gold chevron, since it replaces what
   would otherwise be a native <select> arrow. */
.reservation .forminator-field:has(select) {
	position: relative;
}
.reservation select.forminator-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
}
.reservation .forminator-field:has(select):after {
	font-family: 'themify';
	position: absolute;
	top: 18px;
	right: 15px;
	content: "\e64b";
	display: block;
	color: #f6a80f;
	font-size: 12px;
	pointer-events: none;
}

/* Native date/time icons (if you keep a native date field) tinted gold to
   match the template's own filter trick. */
.reservation input[type="date"]::-webkit-calendar-picker-indicator,
.reservation input[type="time"]::-webkit-calendar-picker-indicator {
	filter: brightness(0) saturate(100%) invert(69%) sepia(40%) saturate(3383%) hue-rotate(356deg) brightness(109%) contrast(93%);
}
.reservation input[type="number"]::-webkit-outer-spin-button,
.reservation input[type="number"]::-webkit-inner-spin-button {
	filter: invert(1);
	opacity: 1;
}

.reservation .forminator-error-message,
.reservation .forminator-error {
	color: #f6a80f;
	font-size: 13px;
	margin-top: 4px;
	font-family: "Source Sans 3", sans-serif;
}

/* Submit button restyled as the template's clip-path .btn-sys.btn-dark.btn-large */
.reservation .forminator-button-submit {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	position: relative;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 16px;
	line-height: 25px;
	padding: 15px 50px;
	margin: 20px 0 0;
	color: #fff;
	background: #a41e22;
	border: none;
	border-radius: 0;
	overflow: hidden;
	z-index: 0;
	clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
	transition: color .2s ease-in-out;
}
.reservation .forminator-button-submit:before {
	position: absolute;
	width: 0;
	height: 100%;
	content: "";
	top: 0;
	left: 0;
	background: #f6a80f;
	transition: all .2s ease-in-out;
	z-index: -1;
	clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
}
.reservation .forminator-button-submit:hover:before {
	width: 100%;
}
.reservation .forminator-button-submit:hover,
.reservation .forminator-button-submit:focus {
	color: #fff;
	background: #a41e22;
}

/* -------------------------------------------------------------------------
   2) Contact page variant (light background, gold dashed boxes, icons)
   ------------------------------------------------------------------------- */
.contact .forminator-custom-form,
.contact .forminator-cform {
	margin: 30px 0;
}

.contact .forminator-field {
	position: relative;
	margin: 0 0 15px;
	padding: 0;
	display: block;
	background: rgba(255, 255, 255, .33);
	border: 1px dashed #f6a80f;
	transition: all .3s ease-in-out;
}
.contact .forminator-field:hover,
.contact .forminator-field:focus-within {
	background: #fff;
	border-color: #a41e22;
}
.contact .forminator-input,
.contact .forminator-textarea,
.contact select.forminator-select {
	font-size: 16px;
	margin: 0;
	outline: none;
	width: 100%;
	padding: 15px 15px 15px 50px;
	height: auto;
	line-height: 20px;
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	color: #000;
	font-family: "Source Sans 3", sans-serif;
}
.contact .forminator-input::placeholder,
.contact .forminator-textarea::placeholder {
	color: #000;
	opacity: 1;
}
.contact .forminator-textarea {
	height: 100px;
}
.contact .forminator-button-submit {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	position: relative;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 16px;
	line-height: 25px;
	padding: 15px 50px;
	margin: 20px 0 0;
	color: #fff;
	background: #a41e22;
	border: none;
	border-radius: 0;
	overflow: hidden;
	clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0% 50%);
}
.contact .forminator-button-submit:hover {
	background: #f6a80f;
	color: #fff;
}