/*
* Reservation Modal Popup
* 
* @package WP Day Spa
* @subpackage CSS
*/

/** Overlay & Reservation Form
==============================================================================*/

#overlay, 
#reservation { opacity: 0; transition: .5s;}

/* Overlay */
#overlay { position: absolute; overflow: hidden; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; background: rgba(26,53,71,.85); pointer-events: none; z-index: 999999;}
  #overlay.open { opacity: 1; pointer-events: auto;}

  /* Registration Form */
  #reservation { position: relative; width: 300px; margin: 100px auto 0; padding: 25px; border-radius: 5px; box-shadow: 0 5px 12px rgba(15,27,39,.4); background: #fff; -webkit-transform: translateY(80%) scale(.8); transform: translateY(80%) scale(.8); transition-timing-function: cubic-bezier(.3, 0, 0, 1.3); transition-delay: .4s; z-index: 99999;}
    .open #reservation { opacity: 1; -webkit-transform: none; transform: none;}
      ::-webkit-input-placeholder { /* WebKit browsers */
        color:    #555;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
         color:    #555;
         opacity:  1;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
         color:    #555;
         opacity:  1;
      }
      :-ms-input-placeholder { /* Internet Explorer 10+ */
         color:    #555;
      }

    /* Close Button */
    #reservation .close { position: absolute; width: 18px; height: 18px; right: 7px; top: 7px; text-indent: -9000px; background-image: url(../images/close.png);}

      @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
        #reservation .close { background-image: url(../images/close@2x.png); background-size: 100% 100%;}
      }

    #reservation h5 { margin: 20px 0;}
    #reservation input { width: 100%; padding: 8px; font-size: 12px; border: 1px solid #e9ebed; border-radius: 5px; margin: 0 0 8px 0;}
      #reservation input:focus,
      #reservation input[type="email"]:focus { background: none;}

    .confirm { display: block; margin-top: 20px; padding: 8px 0; border: 1px solid #e9ebed; border-radius: 5px; background: #fafafb;}

    /* Form Response */
    #formresponse { display: none; padding: 15px; border-radius: 5px;}
      #formresponse.formsuccess { background: #94d6ff;}
      #formresponse.formerror { background: #a21721;}

      /* Notifications */
      #reservationform .notification { background: none; font-size: 12px; line-height: 18px; color: #fff; margin: 0; padding: 0; border: 0;}

      /* Form Loader */
      #formloader { margin-top: 10px; text-align: center; font-size: 1.4em; vertical-align: middle; color: #a5d5bb; display: none;}

      #servicetype,
      #ctreservationemail,
      #ctreservationsubject { display: none;}