input[type="select"]::picker-icon { color:var(--accent3); }
input[type="file"]::file-selector-button {
  font-size: var(--fs00);
  font-family: var(--ff-base);
  color:var(--txt);
  
  padding: 0.2em 0.4em;
  border-radius: var(--rad-small);
  background-color: var(--accent3-dark);
  transition: 1s;
  cursor: pointer;
}

input[type="file"]::-ms-browse:hover, input[type="file"]::-webkit-file-upload-button:hover, input[type="file"]::file-selector-button:hover {
font-family: var(--ff-base); background-color: var(--accent3);  cursor: pointer;}

/*contact specific*/
label:has(+ input:required):after, label:has(+ select:required):after { content: ' *'; color: var(--accent1); }
input[type="file"] { color: transparent; }
input[type="file"]::-webkit-file-upload-button { color: var(--txt); /* keep the button label visible */ }

.hidden { display: none; }
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



#preview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:var(--2xs-xs); }
#preview > * { min-width: 0; }

.preview-container { position: relative; display: inline-block; }
.preview-image { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: .5rem; display: block; }
.preview-meta { position: absolute; left:0; bottom:0; background: var(--accent3-dark); color: #fff; font-size: 12px; padding: 2px 6px; border-radius: 0 4px 0 4px; }
.remove-image { box-sizing: border-box; display: block; border-radius: 50%; padding: 0.5em; width: 30px; height: 30px; border: 2px solid transparent;
  background-color: var(--accent3-dark); background: var(--accent3-dark); color: transparent; position: absolute; top: -4px; right: -4px;
  cursor:pointer; min-width:30px;
  -webkit-box-shadow: 0px 1px 0px 0px hsl(200 16% 9% / 0); box-shadow: 0px 1px 0px 0px hsl(200 16% 9% / 0);
transition: background 300ms ease-in;
-webkit-transition: background-image 300ms ease-in;
-ms-transition: background 300ms ease-in;
-o-transition: background 300ms ease-in;
-ms-transition: background 300ms ease-in;

}
.remove-image:hover {
  border: 2px solid transparent;
  background-color: var(--accent3-dark);
  background: var(--accent3-dark);
  color: transparent;
}

.remove-image::before {
  content: " ";
  position: absolute;
  display: block;
  background-color: white;
  width: 2px;
  left: 12px;
  top: 5px;
  bottom: 5px;
  transform: rotate(45deg);
}
.remove-image::after {
  content: " ";
  position: absolute;
  display: block;
  background-color: white;
  height: 2px;
  top:12px;
  left: 5px;
  right: 5px;
  transform: rotate(45deg);
}


#fileErrors { margin-top: .5rem; color: var(--accent1); }
#fileErrors div, #upload-hint { display:flex; align-items: center; justify-content: center; gap:var(--2xs-xs); }
#fileErrors svg { fill:var(--accent1-dark); }
#upload-hint svg { fill:var(--txt); }
#upload-hint { margin-block: calc(var(--fs00) * 1); }
.files { pointer-events: none; display:flex; align-items: center; justify-content: center; gap:var(--2xs-xs); }

.hidden { display: none; }

 

#contactStatus {
    min-height: 2.5em; /* or whatever matches your tallest message */
    display: flex;
    align-items: center;
}

#contactStatus > div {display: none; }
#contactStatus > div:not(.hidden) { display: block; }
#contactStatus > div { opacity: 0; transition: opacity 0.3s ease; }
#contactStatus > div:not(.hidden) { opacity: 1; }



/* Hide all hints by default */
.hint { display: none; opacity: 0 ; margin: 0.5rem 0; font-size: 0.9rem; color: #555; transition: opacity 0.3s ease; }

/* Show hints conditionally using :has() */
#inquiry_type:has(option[value="New Tattoo Enquiry"]:checked) ~ .hint { display: block; opacity: 1 ; }
#inquiry_type:has(option[value="Continuing Booking"]:checked) ~ .coverup-hint { display: block; opacity: 1 ; }
#inquiry_type:has(option[value="Other"]:checked) ~ .flash-hint { display: block; opacity: 1 ; }

#successMessage { color: var(--accent3); margin-top: 10px; }
#errorMessage { color: var(--accent1); margin-top: 10px; }
#sendingMessage { color: var(--txt); margin-top: 10px; }


input[type="select"]::picker-icon { color:var(--accent3); }
input[type="file"]::file-selector-button {
  font-size: inherit;
  font-family: inherit;
  color: var(--txt);
  border: none;
  padding: 0.2em 0.4em;
  border-radius: var(--rad-small);
  background-color: var(--accent3-dark);
  transition: 1s;
  cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button:hover, input[type="file"]::file-selector-button:hover, input[type="file"]::-ms-browse:hover {
	font-size: inherit;
	color: var(--txt);
	padding: 0.2em 0.4em;
	border-radius: var(--rad-small);
	font-family: inherit;
  background-color: var(--accent3);
  border: none;
  cursor: pointer;
}