@charset "UTF-8";

.modal-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; justify-content: center; align-items: center;}
.modal {position: relative; max-width: 500px; background-color: #fefefe; border-radius: 0; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; transform: translateY(100%);}
.modal.show-modal {transform: translateY(0);}
.modal-content {max-height: 100vh; overflow-y: auto;}
.close {position: absolute; top: 25px; right: 30px; cursor: pointer; color: #fff; font-size: 2em;}

button, input, textarea {font-size: 100%; margin: 0; vertical-align: middle; box-sizing: border-box;}
button, input[type=button], input[type=reset], input[type=submit], .button {border: none; border-radius: 2px; color: #fff; font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; padding: 12px 15px;}
/*
button:hover, input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, .button:hover {cursor: pointer;}
input {padding: 8px 10px; margin-bottom: 20px;}
*/

/* @media (max-width: 768px) { input[name=post_password] {display: block; margin-bottom: 10px; width: 100%;}} */

textarea {overflow: auto; padding: 10px; vertical-align: top; width: 100%; margin-bottom: 20px;}

::-webkit-input-placeholder {color: #999;}
:-moz-placeholder {color: #999;}
::-moz-placeholder {color: #999;}
:-ms-input-placeholder {color: #999;}

.error-message {display: block; text-align: left; font-size: 0.75em; color: gray; font-variant: small-caps;}
h2.entry-title {font-size: 24px;}
.post:last-child, .post:last-of-type {margin-bottom: 8%; border-bottom: none;}
.news .entry-title {margin-bottom: 0;}
fieldset:invalid ~ fieldset {display: none;}

input, textarea {border: 2px solid #eee;}
input:user-valid, textarea:user-valid {border: 2px solid green;}
input:user-invalid, textarea:user-invalid {border: 2px solid red;}

#confirmationMessage {font-size: 18px; font-weight: bold; padding: 10px; margin: 0 10px; background-color: #4caf50; color: #ffffff; border-radius: 5px; position: relative;}
#confirmationMessage::after {content: ""; display: inline-block; width: 1em; height: 1em; background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke-width='1.5' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' data-slot='icon'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z'%3E%3C/path%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat;}

.modal-content form {display: flex; flex-direction: column; justify-content: space-around; align-items: stretch; max-height: 713px; width: 100%; margin: 0; background: #fff; padding: 40px;} /* MJ confirmed*/
.modal-content fieldset {height: 401px; border: none; margin-bottom: 20px; padding: 0;} /*MJ confirmed*/
.modal-content fieldset label {margin: 10px 0 5px 0; font-weight: bold; font-size: 14px;}
#multiStepForm input, #multiStepForm select, #multiStepForm textarea {color: #555; appearance: none; background-color: #fff; margin-bottom: 0; padding: 16px 8px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box;}

legend {font-weight: bold; padding: 0 5px;}
fieldset input[type="checkbox"] {margin-right: 10px; width: auto;}

button {padding: 10px; font-size: 16px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;}
button:hover {background-color: #218838;}

/* Hide the default checkbox */
input[type="checkbox"] {display: none;}

/* Custom checkbox label */
#multiStepForm .checkbox-label {display: block; padding: 5px; /*background-color: transparent;*/ border: 2px solid #1abc9c; border-radius: 5px; cursor: pointer; transition: background-color 0.3s, border-color 0.3s;}

/* Change appearance when checkbox is checked */
input[type="checkbox"]:checked + .checkbox-label {background-color: #1abc9c; border-color: #1abc9c; color: #fff;}

/* Add checkmark when checked */
/*input[type="checkbox"]:checked + .checkbox-label::after {content: '\2714'; display: inline-block; margin-left: 10px; color: white;}*/

.modal-content form p {margin: 10px 0; font-size: 0.8rem; color: #555;} /*MJ confirmed*/

#multiStepForm legend {font-size: 0.8rem; font-weight: bold; margin-bottom: 10px; color: #ffffff; user-select: none;}
#multiStepForm .custom-required {color: #1abc9a; display: inline-block;}
/*#contactDetails label {display: block; margin-bottom: 5px; font-size: 18px; font-variant: all-small-caps;}*/
input[type="text"], input[type="email"], input[type="tel"], input[type="submit"], textarea, select {padding: 10px; margin: 0; border: 1px solid #ddd; border-radius: 2px; transition: border-color 0.3s ease, box-shadow 0.3s ease;}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);}
#multiStepForm input[type="submit"] {margin: 10px 0; background-color: #1abc9c; color: #fff; border: none; cursor: pointer; font-weight: bold; transition: background-color 0.3s ease;}
input[type="submit"]:hover {background-color: #0056b3;}
textarea {resize: vertical; min-height: 100px;}

* {box-sizing: border-box;}
/*.modal-content form {max-width: 100%; padding: 0; margin: 0;}*//*MJ edit - removed width: 90vh; overridden by media query*/

.checkbox-container {display: inline-block; margin-right: 5px; margin-bottom: 5px; -webkit-user-select: none; user-select: none; /* Disables text selection on the entire label */ cursor: pointer; /*font-size: 18px;*/}

/* Progress bar container */
#progressBar {display: flex; justify-content: space-between; align-items: center; position: relative; margin: 0;}

/* Horizontal line */
/*#progressBar::before {content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 4px; background: #ccc; z-index: 1; transform: translateY(-50%);}*/

/* Individual milestone circles */
/*
.progress-step {
position: relative; z-index: 2;  width: 20px; height: 20px; background-color: #ccc; borderradius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.3s;}
*/

/* Active and completed milestones */
/*.progress-step.active, .progress-step.completed {background-color: #4caf50;  Green color for active/completed }

.progress-step::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background-color: #fff; border-radius: 50%; z-index: 3;}*/

/* Progress bar container */
#progressBar {display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 30px; counter-reset: step; /*padding: 10px;*/}

/* Horizontal line */
#progressBar::before {content: ""; position: absolute; top: 50%;  left: 0; width: 100%; height: 4px; background: #ccc; z-index: 1; transform: translateY(-50%);}

/* Individual milestone circles */
.progress-step {position: relative; z-index: 2; width: 20px; height: 20px; background-color: #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-direction: column; /* Stack the circle and label vertically */ transition: background-color 0.3s;}

/* Active and completed milestones */
.progress-step.active, .progress-step.completed {background-color: #1abc9a; /* Green color for active/completed */}

.progress-step::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background-color: #fff; border-radius: 50%; z-index: 3;}

/* Step labels */
.step-label {display: block; margin-top: 58px; text-align: center; font-size: 14px; color: #777; font-weight: 300; /*border: 2px solid #1abc9a; border-radius: 3px; padding: 5px; background-color: #1abc9a;*/}

/* Tooltip (optional custom styling) */
.progress-step[title] {position: relative;}

/* Custom tooltip styling */
.progress-step[title]:hover::after {content: attr(title); position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background-color: #333; color: #fff; padding: 5px 10px; border-radius: 4px; white-space: nowrap; font-size: 12px; z-index: 100;}

/* First milestone: shift tooltip right */
/*.progress-step:first-child:hover::before {
transform: translateX(0%); /* Align tooltip to the left */
/*   left: 10px; /* Shift the tooltip right */
/*}*/

.progress-step:first-child:hover::after {transform: translateX(0); /* Align triangle */ left: 20px; /* Shift the triangle accordingly */}

/* Last milestone: shift tooltip left */
/*.progress-step:last-child:hover::before {
/*transform: translateX(-100%);*/ /* Align tooltip to the right */
/*left: auto;*/
/*right: 10px;*/ /* Shift the tooltip left */
/*}*/

/* Progress Bar */
.progress-container {width: 100%; height: 10px; background-color: #ddd; position: relative; margin: 50px 0;}

.progress-bar {width: 60%; /* Example progress */ height: 100%; background-color: #76c7c0;}

/* Step (Milestone) */
.step {position: absolute; top: -15px; /* Adjust to move up or down */ width: 20px; height: 20px; background-color: #fff; border: 2px solid #76c7c0; border-radius: 50%; text-align: center; line-height: 20px; font-size: 14px; cursor: pointer;}

/* Positioning each step */
.step-1 { left: 10%; }  /* First step position */
.step-2 { left: 40%; }  /* Second step position */
.step-3 { left: 80%; }  /* Third step position */

/* Tooltip (Label) Style */
.tooltip {position: absolute; visibility: hidden; width: 200px; background-color: #333; color: #fff; text-align: center; border-radius: 5px; padding: 5px; bottom: 125%; /* Tooltip above the step */ left: 50%;  transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; white-space: nowrap;}

/* Show tooltip on hover */
.step:hover .tooltip {visibility: visible; opacity: 1;}

.progress-step:last-child:hover::after {transform: translateX(0); left: auto;  right: 20px; /* Shift the triangle accordingly */}

@media screen and (max-width: 600px) { .modal-overlay{align-items:center;} .modal-content{height: 100vh;} #confirmationMessage {padding: 20px; margin: 50px 20px;} .close {color: #333; z-index: 9; top: 20px;} .modal-content form {display: flex; flex-direction: column; justify-content: space-around; align-items: stretch; min-height: 100vh; width: 100%; margin: 0;} .modal-content form fieldset {min-height: 401px;} .modal-content form h3, p {text-align: center; margin: 0; font-size: 1.5em;} /*.checkbox-container {display: block; width: 100%;}*/ .checkbox-label {display: inline-block; font-size: 16px;} .modal-overlay{background-color: rgba(255, 255, 252, 1);} input[type="submit"] {width: 100%; padding: 12px; font-size: 18px;}}

@media screen and (min-width: 601px) and (max-width: 1024px) {#confirmationMessage {padding: 20px; margin: 50px 20px;} .close {color: #fff; z-index: 9; top: 7%;} .modal-content form {width: 100%;} .modal-content form {display: flex; flex-direction: column; justify-content: space-around; align-items: stretch; max-height: 80vh; width: 100%; margin: 0;} .modal-content form fieldset {max-height: 80vh;} .modal-content form h3, p {text-align: center; margin: 7% 14%; font-size: 27px;} /* .checkbox-container {display: block; width: 48%; margin-bottom: 10px;}*/ .checkbox-label {display: inline-block; font-size: 18px;} input[type="submit"] {width: 100%; padding: 14px; font-size: 20px;}}

@media screen and (min-width: 1025px) { #confirmationMessage {padding: 20px; margin: 50px 20px;} .close {color: #fff; z-index: 9; top: 7%;} .modal-content form h3, p {text-align: center; margin: 0; font-size: 27px;} /* MJ confirmed */ /* .checkbox-container {display: inline-block; width: auto; margin-bottom: 10px;}*/ .checkbox-label {display: inline-block; padding: 10px 20px; font-size: 18px;} input[type="submit"] {padding: 10px 20px; font-size: 22px;}}