/* head */

.modal.special .head{
  padding                 : 15px;
  display                 : grid;
  grid-template-columns   : 48px 1fr auto;
  grid-template-rows      : auto auto;
  gap                     : 10px;
  grid-template-areas:
    "image title share"
    ". description features";
}


.modal .head .imageOuter{
  grid-area         : image;
  align-self        : start;
  background-color  : #FFF;
  border-radius     : 24px;
  padding           : 10px;
}

.modal .head .imageOuter div{
  width: 28px;
  height: 28px;
  background-size:contain;
  background-position: center center;
}

.modal .head .title{
  grid-area   : title;
  align-self  : center;
  float       : left;
  padding     : 0;
  color       : rgba(255,255,255,0.5);
  font        : 600 14px/28px UI,sans-serif;
  text-shadow : 0 0 2px #000;
  cursor      : pointer;
  transition  : color 0.2s;
  color       : #f8f8f8;
}

.modal .head .description{
  grid-area   : description;
  color       : #f8f8f8;
}

.modal .head .share{
  grid-area             : share;
  justify-self          : end;
}

.modal .head .share div{
  color                 : #f60;
  background-image      : url('../img/copy-link.png');
  background-repeat     : no-repeat;
  background-position   : top center;
  background-size       : 24px;
  padding-top           : 24px;
  font-size             : 10px;
  text-align            : center;
  width                 : 48px;
}

.modal .head .share div.copied{
  color                 : #FFF;
  background-image      : url('../img/copied.png');
}

.modal .head .features{
  grid-area     : features;
  align-self    : end;
  justify-self  : end;
}

.modal .head h3{
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.75px;
  line-height: 1.25em;
}

.modal .head h6{
  font-size: 13px;
  font-weight: normal;
  line-height: 1em;
}

.modal .head p{
  font-size: 14px;
  font-weight: normal;
  line-height: 1.25em;
  letter-spacing: 0.5px;
}

.modal .features{
  padding: 0;
}

.modal .features span{
  margin: 0 0.25em;
  padding: 0.15em 0.75em;
  background-color: #2d99ac;
  color: #FFF;
  font-size: 13px;
  border-radius: 5px;
}

.modal .features span.category{
  background-color: #006490;
}

.modal .features span.integration{
  background-color: #da2f20;
}

.modal .features span.cost{
  background-color: #759876;
}

.modal .features span:first-child{
  margin-left:0;
}
.modal .features span:last-child{
  margin-right:0;
}

@media screen and (max-width:560px){
  .modal.special .head{
    grid-template-columns   : 48px 1fr;
    grid-template-rows      : auto;
    gap                     : 10px;
    grid-template-areas:
      "image title"
      "share description"
      "share features";
  }
}

/* Content */

.modal .step{
  float                   : left;
  width                   : calc(50% - 10px);
  margin-top              : 15px;
  margin-right            : 10px;
  display                 : grid;
  grid-template-columns   : auto 1fr;
  grid-template-rows      : auto;
  gap                     : 10px 20px;
}
.modal .step:last-child{
  margin-right            : 0px;
  margin-left             : 10px;
}

.modal .step > div:first-child{
  width: 24px;
  height: 24px;
  background-color: #f8f8f8;
  color: #434950;
  text-align: center;
  line-height: 24px;
  font-weight: bold;
}


@media screen and (max-width:560px){
  .modal .step{
    width                   : 100%;
  }

  .modal .step,
  .modal .step:last-child{
    margin-right            : 0px;
    margin-left             : 0px;
  }
}

.modal h1{
  font-size: 16px;
}

.modal p{
  padding: 0.25em 0;
}

.modal p.subtext{
  font-size: 10px;
  line-height: 12px;
}

.modal p.link{
  padding: 0.75em 0;
}

.modal .body a{
  padding               : 7px 40px 7px 14px;
  border-radius         : 4px;
  color                 : #fff;
  font                  : 600 14px/18px UI,sans-serif;
  text-shadow           : 0 0 2px rgba(0,0,0,0.25);
  transition            : background 0.2s;
  background-repeat     : no-repeat;
  background-size       : 20px;
  background-position   : center right 10px;
  background-image      : url('../../img/link-white.png');
  background-color      : #f60;
  border                : 1px solid #f60;
  white-space           : nowrap;
}

.modal .body a.support{
  color                 : #f60;
  background-image      : url('../../img/link-orange.png');
  background-color      : #FFF;
  text-shadow           : 0 0 2px rgba(212, 212, 212, 0.25);
}

/* Enquiry Form */

.modal textarea,
.modal input{
  margin      : 0;
  padding     : 3px 5px;
  width       : 100%;
  font-size   : 14px;
  line-height : 24px;
  background  : #5d666f;
  color       : #FFF;
}

.modal div.form{
  margin-top: 10px;
  display: grid;
  grid-auto-columns: 1fr 1fr;
  gap: 10px;
  grid-template-areas:
    "name name"
    "website website"
    "send send";
}
.modal div.form div:nth-child(1){
  grid-area: name;
}
.modal div.form div:nth-child(2){
  grid-area: website;
}
.modal div.form button{
  grid-area: send;
}

@media screen and (min-width:400px) and (max-width:560px){

.modal div.form{
  grid-template-areas:
    "name website"
    "send send";
  }
}

.modal textarea::placeholder,
.modal input::placeholder{
  color: rgb(255, 255, 255,0.5);
}

.modal textarea.error,
.modal input.error{
  border: 1px solid #FF0000;
  background-color: rgba(0, 0, 0,0.1);
}

.modal .body button{
  cursor        : pointer;
  display       : block;
  padding       : 3px 10px;
  border-radius : 4px;
  background    : #f60;
  color         : #fff;
  font          : 600 14px/24px UI,sans-serif;
  text-shadow   : 0 0 2px rgba(0,0,0,0.25);
  transition    : background 0.2s;
}

/* Custom Enquiry Form */

.modal .customEnquiry{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "name email"
    "website website"
    "notes notes"
    "submit submit";
  gap :15px;
}

.modal .customEnquiry .name{ grid-area: name;}
.modal .customEnquiry .website{ grid-area: website;}
.modal .customEnquiry .email{ grid-area: email;}
.modal .customEnquiry .notes{ grid-area: notes;}
.modal .customEnquiry button{ grid-area: submit; justify-self: center;}

.modal .customEnquiry label small{
  font-style: italic;
  color: #EEE;
}
.modal .customEnquiry input,
.modal .customEnquiry textarea{
  margin-top: 5px;
}