/* ==========================================================================
   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;
	border: 1px dashed rgba(255, 255, 255, .5);
	transition: all .3s ease-in-out;
}

.reservation .forminator-field:hover,
.reservation .forminator-field:focus-within {
/* 	background: rgba(0, 0, 0, .5); */
	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. Excludes any Select2-powered
   field (Forminator's Timepicker Hours/Minutes/AM-PM dropdowns included) --
   those already render their own arrow, so without the :not() here every
   Select2 field got a second, redundant gold chevron on top of it. */
.reservation .forminator-field:has(select):not(:has(.select2-container)) {
	position: relative;
}
.reservation select.forminator-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
}
.reservation .forminator-field:has(select):not(:has(.select2-container)):after {
	font-family: 'themify';
	position: absolute;
	top: 18px;
	right: 15px;
	content: "\e64b";
	display: block;
	color: #f6a80f;
	font-size: 12px;
	pointer-events: none;
}

/* Forminator's Timepicker field (Hours / Minutes / AM-PM) renders as three
   Select2 widgets. Forminator's own per-form generated CSS hardcodes their
   text to black (#000) -- overriding that here in the theme's own
   stylesheet is more reliable than Forminator's per-field Custom CSS box,
   whose auto-scoping doubled up the selector prefix we tried there and
   produced a rule that matched nothing. !important is needed to beat that
   plugin-generated rule, which also styles :hover/:focus/open states, all
   covered here since none of them change which element this selector hits. */
.reservation .select2-selection__rendered {
	color: #fff !important;

}
.forminator-ui#forminator-module-159.forminator-design--default .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"]:focus .select2-selection__rendered, .forminator-ui#forminator-module-159.forminator-design--default .forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"]:hover .select2-selection__rendered {
	color: #000 !important;
}

.forminator-ui.forminator-custom-form[data-design=default] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--single .select2-selection__arrow [class*=forminator-icon-]:before, .forminator-ui.forminator-custom-form[data-design=default] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--multiple .select2-selection__arrow [class*=forminator-icon-]:before, .forminator-ui.forminator-custom-form[data-design=default] select.forminator-select2+.forminator-select .selection span[role=combobox].select2-selection--single .select2-selection__arrow [class*=forminator-icon-]:before {
    display: block;
    color: #f6a80f !important;
}
body.admin-bar>.forminator-select.forminator-select-dropdown-container--open {
    margin-top: 0 !important;
}

@media screen and (max-width: 500px){
    .forminator-ui.forminator-custom-form-159.forminator-design--default #time-1-minutes, .forminator-ui.forminator-custom-form-159.forminator-design--default #time-1-hours, .forminator-ui.forminator-custom-form-159.forminator-design--default #time-1-ampm
 {
    padding: 0 !important;
    width: 33% !important;
    margin: 0 !important;
}
	.forminator-timepicker {
    padding: 0 10px;
}
}

/* 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;
}