/* Updated contactMe.css — Modern Gold & Indigo Theme for Jayne Marie */

/* Jayne Marie site style CSS file */

/**************** Site Colour Scheme *****************/
/* background: #000033;       /* dark blue */
/* color: #9999CC;            /* light blue */
/* color: #CC9966;            /* soft gold */
/* color: #99FF33;            /* light green */

html, body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1920 - 300)));
  line-height: 1.4;
  background-color: #000033;
  margin: 0;
  padding: 0;
  color: #fcefc1;
}

/* ===== CONTACT FORM CONTAINER ===== */
#contactForm {
  max-width: 700px;
  width: 90%; /* For responsiveness on small screens */
  margin: 2rem auto;
  padding: 2.25rem 2rem 0rem;
  background-color: #23243a;
  border: 1px solid #444;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  color: #fcefc1;
  transition: all 0.3s ease;
  position: relative;
}

/* ===== FORM LABELS ===== */
#contactForm label {
  display: block;
  margin-top: 1.0rem;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  color: #cc9966; /* #fcefc1; */
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ===== FORM INPUT FIELDS + ICONS ===== */
.inputField,
.msgArea {
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 2.5rem; /* Padding-left for icon space */
  border: 1px solid #777;
  border-radius: 8px;
  background-color: #2f314a;
  color: #fcefc1;
  box-sizing: border-box;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Placeholder styling */
.inputField::placeholder,
.msgArea::placeholder {
  color: #bfbfbf;
  font-style: italic;
}

/* Focus and filled effect */
.inputField:focus,
.inputField:valid,
.msgArea:focus,
.msgArea:valid {
  border-color: #cba135;
  background-color: #383a5a;
  color: #fcefc1;
  outline: none;
}

/* ===== FIXED: ICONS (SHOW ONLY ONCE, NOT REPEATED) ===== */
#contact-name,
#contact-email,
.msgArea {
/* color: #FF9999; */
  background-repeat: no-repeat !important;
  background-position: 0.75rem 0.75rem !important;
  background-size: 20px 20px !important;
  background-attachment: scroll !important;
}

/* Input field icon images */
/*
#contact-name {
  background-image: url('https://img.icons8.com/ios-filled/21/cc9966/user.png') !important;
}

#contact-email {
  background-image: url('https://img.icons8.com/ios-filled/21/cc9966/new-post.png') !important;
}
*/

.msgArea {
  /* background-image: url('https://cdn-icons-png.flaticon.com/512/1827/1827933.png') !important; */
  
  /* background-image: url('https://img.icons8.com/ios-filled/24/cc9966/pencil-tip.png') !important; */
  
  background-image: url('/siteImages/pencil-tip.png') !important;
  min-height: 120px;
}

/* ===== FORM SPACING ===== */
.form-spacer {
  height: calc(14px + (22 - 14) * ((100vw - 300px) / (1920 - 300)));
}

.formSpacer-xsm {
  height: calc(0.25rem + 1vw);
}

.formSpacer-sm {
  height: calc(0.5rem + 1vw);
}

.formSpacer-md {
  height: calc(1.5rem + 1vw);
}

.formSpacer-lg {
  height: calc(2rem + 1.5vw);
}

/* ===== XXX ===== */

.input-wrapper {
  position: relative;
  width: 100%;
}
/*
.input-icon {
  position: absolute;
  top: 2.25rem;
  left: 0.78125rem;
  transform: translateY(-50%);
  pointer-events: none
}
*/
.input-icon img {
  display: block;
  width: auto;
}

.input-icon, .name-input-icon, .email-input-icon {
  position: absolute;
  /* top: 1.2rem; */
  left: 0.78125rem;
  transform: translateY(-50%);
  display: flex;
  /* align-items: center; */
  
  pointer-events: none;
  height: auto; /* Let it size naturally */
}

.name-input-icon {
  top: 1.2rem;
}

.email-input-icon {
  top: 1.2rem;
}

.inputField {
  padding-left: 2.5rem; /* Creates space so text doesn't overlap icon */
  background-color: #2f314a;
  color: #fcefc1;
  border: 1px solid #cc9966;
  height: 2.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* ===== XXX ===== */



/* ===== ERROR STYLING ===== */
.input-error {
  border-color: #ff5e5e !important;
  background-color: #4a2f2f !important;
}
/*
.error-message {
  color: #ff9999;
  font-size: 0.85rem;
  font-style: italic;
  margin: 0.25rem 0 0.75rem 0;
}
*/
.field-wrapper .error-message {
  display: block;
  color: #ff9999;
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}

/* ===== BUTTONS (BOTH SEND AND RESET) ===== */
.button {
  all: unset;
  display: inline-block;
  font-size: 1rem;
  padding: 0.75rem 2rem;
  margin-top: 2rem;
  margin-right: 1rem;
  border-radius: 6px;
  background-color: transparent;
  color: #cc9966;
  font-weight: bold;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 2px solid #cc9966;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===== BUTTONS ON HOVER (FIXED) ===== */
.button:hover {
  background: #383a5a !important;
  color: #fcefc1 !important;
  border-color: #cc9966 !important;
}

/* ===== STATUS FEEDBACK ===== */
#status {
  margin-top: 1.75rem;
  font-weight: bold;
  color: #99ff99;
  text-align: center;
}

/* ===== PAGE TEXT AND HEADINGS ===== */
.pageTitle h1,
.jmpsH3 {
  color: #cc9966;
  text-align: center;
  letter-spacing: 1px;
}

.pageText p {
  color: #e6d8b8;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
}

/* ===== ERROR STYLING ===== */
.input-error {
  border-color: #ff5e5e !important;
  background-color: #4a2f2f !important;
}

.error-message {
  color: #ff9999;
  font-size: 0.85rem;
  margin-top: 0.3rem;
  margin-bottom: -0.8rem;
  font-style: italic;
}

/* === Default spacing for error labels under input fields === */
/*.inputField + .error-message,
.msgArea + .error-message {
  margin-top: 0;
  margin-bottom: 0;
}
*/
/* Applies tight consistent spacing BELOW input and ABOVE pink label */
.inputField.input-error + .error-message,
.msgArea.input-error + .error-message {
  margin-top: 0.15rem;
  margin-bottom: 0.35rem;  /* Enough to separate pink label from next element */
}

/* Wrapper ensures consistent spacing below the message field */
.field-wrapper {
  margin-bottom: 1.5rem; /* Adjust as needed to match the look you want */
}

/* Tighter spacing between field and pink error label */
.field-wrapper .error-message {
  margin-top: 0.25rem;
  margin-bottom: 0;
  font-size: 0.85rem;
  color: #ff9999;
  font-style: italic;
}


/* === Name Field: No spacing */
#contact-name {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/* === Email Field: add spacing */
#contact-email {
  margin-top: -0.5rem;   /* top spacing to separate from name + spacer */
  margin-bottom: 0.25rem; /* bottom spacing before message */
}

/* === Error spacing under email field only */
#contact-email.input-error + .error-message {
  margin-top: 0.15rem;
  margin-bottom: 0.35rem;
}

/* === Error spacing under name field only when active */
#contact-name.input-error + .error-message {
  margin-top: 0.15rem;
  margin-bottom: 0.35rem;
}

/* === Scrollbar Styling for Message Field === */
.msgArea::-webkit-scrollbar {
  width: 14px;
}

.msgArea::-webkit-scrollbar-track {
  background: #2f314a; /* match input bg */
  border-radius: 10px;
}

.msgArea::-webkit-scrollbar-thumb {
  background-color: #cc9966;  /* soft gold */
  border-radius: 10px;
  border: 2px solid #2f314a; /* creates padding */
}

.msgArea::-webkit-scrollbar-thumb:hover {
  background-color: #e6b97e;
}

/* === Autofill Fix: Make autofilled fields match custom styles === */

input:-webkit-autofill,
textarea:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #383a5a inset !important;
  -webkit-text-fill-color: #fcefc1 !important;
  transition: background-color 9999s ease-in-out, color 9999s ease-in-out;
  background-color: #383a5a !important;
  color: #fcefc1 !important;
}

/* Reapply background icons on autofill */
/*
#contact-name:-webkit-autofill {
  background-image: url('https://img.icons8.com/ios-filled/24/cc9966/user.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0.75rem center !important;
  background-size: 20px 20px !important;
}

#contact-email:-webkit-autofill {
  background-image: url('https://img.icons8.com/ios-filled/24/cc9966/new-post.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0.75rem center !important;
  background-size: 20px 20px !important;
}
*/

input:-webkit-autofill {
  transition: background-color 9999s ease-in-out, color 9999s ease-in-out;
}

input#contact-name:-webkit-autofill {
  background-image: url('https://img.icons8.com/ios-filled/24/cc9966/user.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0.75rem center !important;
  background-size: 20px 20px !important;
  background-color: #2f314a !important;
  box-shadow: 0 0 0 1000px #2f314a inset !important;
  -webkit-text-fill-color: #fcefc1 !important;
}

input#contact-email:-webkit-autofill {
  background-image: url('https://img.icons8.com/ios-filled/24/cc9966/new-post.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0.75rem center !important;
  background-size: 20px 20px !important;
  background-color: #2f314a !important;
  box-shadow: 0 0 0 1000px #2f314a inset !important;
  -webkit-text-fill-color: #fcefc1 !important;
}
/* ------------------------------ Apr 7
input:-webkit-autofill#contact-name,
input:-internal-autofill-selected#contact-name {
  background-image: url('https://img.icons8.com/ios-filled/24/cc9966/user.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0.75rem 0.75rem !important;
  background-size: 20px 20px !important;
  background-color: #2f314a !important;
  box-shadow: 0 0 0px 1000px #2f314a inset !important;
  -webkit-text-fill-color: #fcefc1 !important;
}

input:-webkit-autofill#contact-email,
input:-internal-autofill-selected#contact-email {
  background-image: url('https://img.icons8.com/ios-filled/24/cc9966/new-post.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0.75rem 0.75rem !important;
  background-size: 20px 20px !important;
  background-color: #2f314a !important;
  box-shadow: 0 0 0px 1000px #2f314a inset !important;
  -webkit-text-fill-color: #fcefc1 !important;
}
------------------------ */

.msgArea:-webkit-autofill {
  background-image: url('https://img.icons8.com/ios-filled/24/cc9966/pencil-tip.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0.75rem top 0.75rem !important;
  background-size: 20px 20px !important;
}


/* ----- */
/* ===== FORM INPUT FIELDS AUTOCOMPLETE FIXES ===== */
/* Fix autofill styling and keep icons visible 
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #2f314a inset !important;
  -webkit-text-fill-color: #fcefc1 !important;
  transition-delay: 9999s;
  transition-property: background-color, color;
}

/* Ensure icons remain visible for each specific field during autofill
input#contact-name:-webkit-autofill,
input#contact-name:-webkit-autofill:hover,
input#contact-name:-webkit-autofill:focus {
  background-image: url('https://img.icons8.com/ios-filled/24/cc9966/user.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0.75rem 0.75rem !important;
  background-size: 20px 20px !important;
}

input#contact-email:-webkit-autofill,
input#contact-email:-webkit-autofill:hover,
input#contact-email:-webkit-autofill:focus {
  background-image: url('https://img.icons8.com/ios-filled/24/cc9966/new-post.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0.75rem 0.75rem !important;
  background-size: 20px 20px !important;
}

/* Ensure message field never gets autocomplete styling 
textarea.msgArea {
  background-image: url('https://img.icons8.com/ios-filled/24/cc9966/pencil-tip.png') !important;
  background-repeat: no-repeat !important;
  background-position: 0.75rem 0.75rem !important;
  background-size: 20px 20px !important;
}
 ----- */

.input-wrapper {
  position: relative;
}