:root{
  --tg-font: 'Gotham';
    --tg-fz: 16px;
    --tg-line: 1.4;
    --tg-black: #000;
    --tg-white: #fff;
    --tg-overlay: rgba(0,0,0,.5);
    --tg-border: #e94e1a;
    }
.tg-overlay{
  position: fixed; inset: 0; background: var(--tg-overlay);
  display: none; z-index: 1050;
}
.tg-wrap{
  position: fixed; inset: 0; z-index: 1060;
  display: none;                  
  place-items: center; padding: 16px;
}


.tg-overlay.tg-active{ display: block; }
.tg-wrap.tg-active{ display: grid; }

  .tg-dialog{
    width: min(800px, 96vw);
    background: var(--tg-white);
    color: var(--tg-black);
    font-family: var(--tg-font);
    font-size: var(--tg-fz);
    line-height: var(--tg-line);
    border-radius: 24px;
    border: 5px solid var(--tg-border);
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
    position: relative;
    max-height: 90vh;
    overflow: auto; 
  }

  
  .tg-close{
    position: absolute; top: 10px; right: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: none; background: transparent; cursor: pointer;
  }
  .tg-close i{ font-size: 20px; line-height: 1; }

  
  .tg-body{ padding: 16px; }
  .tg-body h1{ text-transform: uppercase; font-weight: 700; margin: 0;font-size:30pt }
  .tg-body h4{ margin: 1.5rem auto; font-weight: 400; }

#tg-back-to-order{padding:10px 25px!important}
#tg-root .btn-primary{padding:10px 25px!important}
  .tg-no-scroll{ overflow: hidden; }
  @media (max-width: 440px){
    .tg-dialog{ max-height: 92vh; }
  }