/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 7
   Tutorial Case

   Survey Forms Style Sheet
   Author: Michael Le
   Date: 11/13/2025

   Filename:         rb_forms.css

*/

/* Form Layout Styles */
		 div.formRow { 
		   display: flex; 
		   flex-flow: row wrap; 
		   margin: 7px 0px; 
		}

		 div.formRow > * { 
		   flex: 1 1 150px; 
		}

		form#survey { 
	   display: flex; 
	   flex-flow: row wrap; 
	}
	
		form#survey > fieldset { 
	   background-color: rgb(241, 232, 181); 
	   border-radius: 20px; 
	   flex: 1 1 300px; 
	   font-size: 0.85em; 
	   padding: 10px; 
	   margin: 10px; 
	}

/* Legend Styles */
 legend { 
   background-color: rgb(179, 20, 25); 
   color: white; 
   padding: 5px; 
}


/* Text Area Styles */
textarea { 
   margin-top: 10px; 
   height: 100px; 
   width: 95%; 
}


/* Spinner Styles */
 div.formRow > input#dineSpin { 
   flex: 0 0 50px; 
}


/* Form Button Styles */
div#buttons { 
   text-align: center; 
   width: 100%; 
}
 input[type='submit'], input[type='reset'] { 
   font-size: 1.2em; 
   padding: 5px; 
   margin: 15px; 
}

/* Validation Styles */
 input:focus, select:focus, textarea:focus { 
   background-color: rgb(220, 255, 220); 
}

input#zip:focus:valid:not(:placeholder-shown),
input#phone:focus:valid:not(:placeholder-shown),
input#phone:focus:valid, 
input#mail:focus:valid { 
   background: rgb(220, 255, 220) url(rb_valid.png) bottom 
right/contain no-repeat; 
}

 input#name:focus:invalid, 
input#zip:focus:invalid, 
input#phone:focus:invalid, 
input#mail:focus:invalid { 
   background: rgb(255, 232, 233) url(rb_invalid.png) bottom right/contain no-repeat; 
}