/* CSS Document */

/* GENERAL */
h1, h2, h3, h4, h5, h6 {
	color: var(--main-purple);
}

/* BUTTON COLOR */
.btn-primary {
  background-color: var(--main-purple);
  border-color: var(--main-purple);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-color: var(--lighter-main-purple);
  border-color: var(--lighter-main-purple-border);
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: var(--main-purple);
  border-color: var(--main-purple);
}
.btn-primary .badge {
  color: var(--main-purple);
}
.btn-xl {
  background-color: var(--main-purple);
  border-color: var(--main-purple);
}
.btn-xl:hover,
.btn-xl:focus,
.btn-xl:active,
.btn-xl.active,
.open .dropdown-toggle.btn-xl {
  background-color: var(--lighter-main-purple);
  border-color: var(--lighter-main-purple-border);
}
.btn-xl.disabled,
.btn-xl[disabled],
fieldset[disabled] .btn-xl,
.btn-xl.disabled:hover,
.btn-xl[disabled]:hover,
fieldset[disabled] .btn-xl:hover,
.btn-xl.disabled:focus,
.btn-xl[disabled]:focus,
fieldset[disabled] .btn-xl:focus,
.btn-xl.disabled:active,
.btn-xl[disabled]:active,
fieldset[disabled] .btn-xl:active,
.btn-xl.disabled.active,
.btn-xl[disabled].active,
fieldset[disabled] .btn-xl.active {
  background-color: var(--main-purple);
  border-color: var(--main-purple);
}
.btn-xl .badge {
  color: var(--main-purple);
}

/* CONTACT FORM STYLES */
div#contact .text-danger {
	color: #E74C3C;
}

div#contact .help-block {
	text-align: left;
	padding-bottom: 0px;
}

div#contact .checkbox-description {
	text-align: left;
	vertical-align: middle;
	padding-bottom: 0px;
	margin: auto;
	font-size: 14px;
}

div#contact .sound_nature input {
	height: auto;
}
	
div#contact .contact-fields, 
div#contact .event-fields {
	display:none;	
}

div#contact img#captcha {
	width:auto;
	height:50px;
	vertical-align:middle;
}

div#contact form .form-group > select, 
div#contact form .form-group > input {
	height: 60px;
}

div#contact form .form-group > input.half-width {
	display: inline;
	width:49.7%;
}

/* New media query for mobile */
@media (max-width: 767px) {
    div#contact form .form-group.event-fields > input.half-width {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem; /* Adds spacing between the stacked fields for better readability */
    }
}

div#contact form input[type="date"]:before,
div#contact form input[type="time"]:before {
	content: attr(placeholder);
	color: #969794;
	margin-right:5px;
}

/* --- NEW --- CHOICES.JS STYLING FOR SMART QUOTATION SYSTEM --- */
.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="select-one"] .choices__inner {
    padding-bottom: 0 !important;
    min-height: 40px;
}

.choices__placeholder {
    color: #6c757d;
    opacity: 1;
}

.choices__list--multiple .choices__item {
    background-color: var(--main-purple);
    border: 1px solid var(--lighter-main-purple-border);
    border-radius: .25rem;
    font-size: 14px;
}

.choices__button {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.5);
}

.choices__list--dropdown {
    font-size: 18px;
    font-weight: 300;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--lighter-main-purple);
}

.choices.is-open .choices__inner {
    border-color: var(--lighter-main-purple-border);
}

/* --- NEW --- VISUAL HIERARCHY AND SPACING --- */
.options-group {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: 1.5rem;
    margin-top: 2rem !important;
}

.icon-prefix {
    margin-right: 0.75rem;
    color: var(--main-purple);
    width: 20px; 
    text-align: center;
}

.sub-options {
    display: grid;
    grid-template-columns: auto 1fr 150px; /* Checkbox, Label, Fixed-width Input */
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sub-options .form-check {
    grid-column: 1 / 3; /* Checkbox and Label span two columns */
    display: flex;
    align-items: flex-start; /* Align to top for multi-line labels */
}

.sub-options .form-check input[type="checkbox"] {
    margin-right: 1rem;
    width: 1.25em; /* Standardize checkbox size */
    height: 1.25em;
    margin-top: 0.2em; /* Visually center checkbox with first line of text */
}

.sub-options .form-control,
.sub-options .delivery-option {
    grid-column: 3 / 4;
    width: 100%; /* Make input fill the fixed-width column */
    min-height: 40px; /* Standardize height */
    font-size: 1rem; /* Standardize font size */
}

/* Special case for rows without a checkbox */
.sub-options.no-checkbox .form-check-label {
    grid-column: 1 / 3;
    padding-left: calc(1.25em + 1rem); /* Align with text of checkbox rows */
}

.sub-options.no-checkbox .form-control,
.sub-options.no-checkbox .delivery-option {
    grid-column: 3 / 4;
}

/* Special case for the "Other" text field to make it full width */
.sub-options .form-check:has(> #pa-others) + .form-control,
.sub-options .form-check:has(> #mi-others) + .form-control,
.sub-options .form-check:has(> #lighting-others) + .form-control,
.sub-options .form-check:has(> #livestream-others) + .form-control {
    grid-column: 1 / 4;
    margin-top: 0.25rem; /* Reduced top margin */
}

/* Ensure all select boxes have consistent height */
.sub-options select.form-control {
    padding-top: .375rem;
    padding-bottom: .375rem;
}