/*!
 * CONTACT FORMS STYLING
 * - Used in conjunction with Contact Form 7 and Tave (VSCO Workspace) Integration
 * - Form columns and responsiveness
 * - Placeholder + dropdown styling
 * - Calendar/date input consistency
 * - Mobile handling
 */


/*! * CONTACT ***** */
 
 .contactUsHeader {}
 .contactUsHeaderTwoSapphires {/*font-family: "Vanitas" !important; font-size: 40px !important;*/ margin-bottom: -20px;}
 .contactUsHeader span.beginning-text {padding-right: 2px;}
 .contactUsHeader span.dynamic-words {font-size: 20px; font-weight: 600;}
 .contactUsHeader span.ending-text {padding-left: 2px;}
 
 .cf7ContactForm {}
 .contactFullColumn {width:100%; padding: 10px 10px 0 10px; float:left;}
 .contactHalfColumn {width:50%; padding: 10px 10px 0 10px; float:left;}
 .contactThirdColumn {width:33%; padding: 10px 10px 0 10px; float:left;}
 .contactQuarterColumn {width:25%; padding: 10px 10px 0 10px; float:left;}
 .centered {text-align:center;}
 .req {font-weight: 800;}
 .first {display:block; float:left;}
 .cf7FormLabel {font-size: 12px; font-family: "Open Sans"; font-weight: 400; text-transform:capitalize;}
 .cf7ContactForm input::placeholder {font-size: 12px; font-family: "Open Sans"; font-weight: 400; font-style:italic;}
 .wpcf7-form-control.wpcf7-date.wpcf7-validates-as-required.wpcf7-validates-as-date {height:45; width:100%;}
 .wpcf7 input[type="date"]{height:45px; line-height:normal; padding:0 10px;}
 .wpcf7-spinner {display:none;}
 .wpcf7 textarea {height: 100px;}
 /* If using a dark background for contact form, will need to invert color of calendar */ 
 /* ::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 1; }  */
 .wpcf7-submit {margin-top: 30px; text-transform:uppercase; font-weight:600; background-color:#1d72e8; color:white; width:100%;}
 
 .contactForm .flickity-viewport {margin:0px; }
 .contactForm blockquote {background-color: rgba(0, 0, 0, 0.608); padding: 30px;}
 .contactForm blockquote p {color:#FFFFFF; text-shadow: #000 2px 0 6px;}
 .contactForm div.image-icon {color: #ffffff; filter: invert(0); opacity: .9;}
 
 .contactFunFact p {font-family: "Playfair Display"; text-transform: capitalize;}
 
 span.wpcf7-not-valid-tip {box-shadow:none; background-color: none; padding:0px; color:#B22222;}
 
 .rowContainer {display:block; clear:both;}
 
 
 /* No background or border changes, just spacing adjustment */
 form .wpcf7-response-output {
   background: none;
   border: none;
   color: #B22222; /* Keep the text deep red for visibility */
   font-size: 16px; /* Font size adjustment */
   margin-top: 20px; /* Add space above the error message */
 }
 
 /* Additional margin for submit button to ensure separation */
 input[type="submit"] {
   margin-top: 20px;
 }
 
 
 
 select {
     height: 50px; /* Set the height to 50px */
     width: 100%;  /* Make sure it takes up full width */
     -webkit-appearance: none; /* Remove default dropdown styles for iPhone */
     -moz-appearance: none;    /* Remove Firefox default styles */
     appearance: none;         /* Standard for modern browsers */
     padding: 10px; /* Add padding to ensure consistency */
     box-sizing: border-box;   /* Ensure padding is included in width calculation */
 }
 
 
 /* Event or Session Date field styling for placeholder and calendar icon */
 input[type="date"] {
   width: 100%;            /* Full width */
   height: 45px;           /* Consistent height */
   padding: 10px;          /* Add padding */
   box-sizing: border-box; /* Ensure padding is included in width */
   font-family: inherit;   /* Match font with other fields */
   border: 0px solid #8c8b8b; /* Consistent border */
   background-color: #f7f7f7; /* Consistent background */
   -webkit-appearance: none;  /* Disable iOS native styling */
   appearance: none;
   position: relative; /* To handle the pseudo-element for placeholder */
 }
 
 .contactHalfColumn p, .contactFullColumn p {
   margin: 0 0 10px 0;
 }
 /* Mobile and tablet-specific adjustments */
 @media only screen and (max-width: 1024px) {
 
   /* Event or Session Date field */
   input[type="date"] {
     width: 100%;            /* Ensure full width */
     max-width: 100%;        /* Prevent overflow */
     height: 45px;           /* Set consistent height */
     padding: 10px;          /* Add padding */
     box-sizing: border-box; /* Include padding in width */
     font-family: inherit;   /* Match font of other fields */
     border: 0px solid #8c8b8b; /* Match border with other fields */
     background-color: #f7f7f7;/* Match background color with other fields */
     -webkit-appearance: none; /* Remove native iOS styling */
     appearance: none;         /* Remove browser default styling */
   }
 
   /* Ensure the calendar icon displays in Safari */
   input[type="date"]::-webkit-calendar-picker-indicator {
     display: block;         /* Force display of the calendar icon */
     color: #888;            /* Set a color for visibility */
   }
 
   /* Placeholder fix for Safari */
   input[type="date"]::before {
     content: attr(placeholder);
     color: #888;
     display: block; 
     padding-left: 10px;
   }
   
   input[type="date"]:focus::before {
     content: '';
   }
 }
 
 /* Restore styles for other input fields */
 input[type="text"], input[type="email"], input[type="tel"], input[type="gmautocomplete"], select, textarea {
   width: 100%;   /* Full width for all inputs */
   height: 45px;  /* Uniform height */
   padding: 10px; /* Consistent padding */
   box-sizing: border-box;   /* Include padding in width */
   border: 0px solid #8c8b8b; /* Restore original border */
   background-color: #f7f7f7;  /* Restore original background color */
 }
 
 textarea {
   min-height: 80px;  /* Uniform height */
 }
 
 /* Special handling for the dropdown fields */
 
 
 /* Special handling for the dropdown fields */
 .wpcf7 form select.wpcf7-select {
   background-color:#f7f7f7 !important;
   border:0;
   -webkit-appearance:none;
   appearance:none;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="5"><path fill="gray" d="M0 0l5 5 5-5z"/></svg>');
   background-repeat:no-repeat;
   background-position:right 10px center;
   background-size:10px 5px;
 }
 
 /* Placeholder text styling */
 input::placeholder, select::placeholder {
   color: #888;   /* Placeholder color */
   opacity: 1;    /* Ensure placeholder is fully visible */
 }
 
 
 
 /* On devices with screen-width under a certain size, change multi-column layouts to single-column */
 @media only screen and (max-width:768px){
     .contactFullColumn, .contactHalfColumn, .contactThirdColumn, .contactQuarterColumn {width:100%; padding: 10px 10px 0 10px; float:left;}
     .wpcf7 select[name="your-service"] {
         height: 50px; /* Set the height to 50px */
         width: 100%;  /* Make sure it takes up full width */
         -webkit-appearance: none; /* Remove default dropdown styles for iPhone */
         -moz-appearance: none;    /* Remove Firefox default styles */
         appearance: none;         /* Standard for modern browsers */
         padding: 10px; /* Add padding to ensure consistency */
         box-sizing: border-box;   /* Ensure padding is included in width calculation */
     }
     .wpcf7 input[type="date"] {
         width: 100%; /* Ensure full width */
         height: 45px; /* Match height of other fields */
         -webkit-appearance: none; /* Remove default iPhone styles */
         padding: 10px; /* Add padding for consistency */
         box-sizing: border-box;   /* Ensure padding is included in width calculation */
     }
     input[type="text"], input[type="email"], textarea {
         width: 100%; /* Ensure full width */
         height: 45px; /* Uniform height */
         padding: 10px; /* Ensure consistent padding */
         box-sizing: border-box;   /* Ensure proper width calculation with padding */
     }
 }