.order-hero{text-align:center;min-height:220px;padding:5rem 2rem 3rem}.order-hero h1{font-size:2rem;margin-bottom:.25rem}.order-hero p{font-size:1.05rem}.order-form{width:min(750px,calc(100% - 2rem));margin:0 auto 6rem}.order-form>label{margin-bottom:1.25rem}.order-form label,.field-label{display:block;font-weight:600;font-size:.95rem}.order-form input:not([type=checkbox]):not([type=file]),.order-form select,.order-form textarea{display:block;width:100%;font:inherit;color:#171717;background:#fff;border:1px solid #d4d1d1;border-radius:10px;padding:.72rem .9rem;margin-top:.45rem}.order-card{margin:1.25rem 0;padding:1.75rem;border:1px solid rgba(125,112,115,.2);border-radius:12px;background:rgba(255,255,255,.2)}.card-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;margin-bottom:1.35rem;border-bottom:1px solid rgba(125,112,115,.12)}.card-head h2,.customer h2{font-size:1.2rem}.remove-item{border:0;background:transparent;color:#a95063;font:inherit;font-weight:600;cursor:pointer}.edible-panel h3,.printing-panel h3,.customer h2{text-align:center;margin:2.1rem 0 1.7rem}.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.2rem 0}.shape-unit{grid-template-columns:2fr 1fr;align-items:end}.unit-toggle{display:flex;margin-top:.45rem;padding:3px;min-height:48px;border:1px solid #bbb;border-radius:28px;background:#d7d7d7}.unit-toggle button{flex:1;border:0;border-radius:24px;background:transparent;font:inherit;font-weight:600;cursor:pointer}.unit-toggle button.active{background:#00c8ad;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}.dimensions{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.2rem 0}.upload-area{margin-top:1.6rem}.upload-area h4{font-size:1rem;margin-bottom:.35rem}.upload-area p{font-size:.88rem;margin-bottom:1rem}.round-help{padding:.5rem 1rem}.dropzone{min-height:128px;margin:1rem 0 1.5rem!important;border:2px dashed #b8a8c7;border-radius:10px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;padding:1rem;background:rgba(255,255,255,.15)}.dropzone input{position:absolute;opacity:0;width:1px;height:1px}.dropzone span,.dropzone small{font-size:.82rem;font-weight:400}.dropzone small{color:var(--color-text-muted);margin-top:.4rem}.order-secondary{width:100%;padding:.8rem;margin-bottom:2.5rem;border:1px solid var(--color-lavender-dark);border-radius:10px;background:#fff;color:var(--color-lavender-dark);font:inherit;font-weight:600;cursor:pointer}.customer{margin-top:1rem}.customer>label{margin:1.2rem 0}.submit-area{text-align:center}.confirmation{text-align:left;margin:1.5rem 0!important;font-weight:400!important}.confirmation input{margin-right:.45rem}.order-primary{min-width:220px;padding:.9rem 1.5rem;border:0;border-radius:10px;background:#00bfa5;color:#fff;font:inherit;font-weight:600;cursor:pointer}#orderStatus{margin-top:1rem;font-weight:600}.order-card:first-child .remove-item{display:none}@media(max-width:700px){.order-hero{min-height:250px;padding:3.5rem 1rem 2.5rem}.order-form{width:calc(100% - 1.25rem)}.order-card{padding:1.1rem}.order-grid,.shape-unit,.dimensions{grid-template-columns:1fr}.unit-toggle{width:100%}}
/* Order Tutorial */
.order-tutorial{
  width:min(750px,calc(100% - 2rem));
  margin:-1.5rem auto 2rem;
  padding:1.25rem 1.5rem;
  text-align:center;
  background:rgba(255,255,255,.45);
  border:1px solid rgba(125,112,115,.18);
  border-radius:12px;
}

.order-tutorial p{
  margin:0 0 .9rem;
  line-height:1.55;
}

.tutorial-button{
  border:0;
  border-radius:10px;
  padding:.8rem 1.4rem;
  background:#00bfa5;
  color:#fff;
  font:inherit;
  font-weight:600;
  cursor:pointer;
}

.tutorial-button:hover{
  opacity:.9;
}

.tutorial-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.tutorial-modal[hidden]{
  display:none;
}

.tutorial-modal-content{
  position:relative;
  width:min(1100px,95vw);
  background:#000;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 15px 50px rgba(0,0,0,.35);
}

.tutorial-modal video{
  display:block;
  width:100%;
  max-height:85vh;
  background:#000;
}

.tutorial-close{
  position:absolute;
  top:10px;
  right:12px;
  z-index:2;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:28px;
  line-height:40px;
  cursor:pointer;
}

@media(max-width:700px){
  .order-tutorial{
    width:calc(100% - 1.25rem);
    margin:-1rem auto 1.5rem;
    padding:1rem;
  }

  .tutorial-modal{
    padding:10px;
  }

  .tutorial-modal-content{
    width:100%;
  }
}