/*!
 * it-quota-v1.css
 * The remaining-sends line, and the panel when there are none left.
 *
 * The panel is not a wall. Almost everything on the site still works, so it
 * says what still works before it says what does not.
 */

.itq-label {
  font-size: 12.5px;
  color: #8A8375;
}
.itq-label[hidden] { display: none !important; }
.itq-label.itq-out { color: #A83226; font-weight: 600; }

.itq-back {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(12, 10, 6, .5);
  display: grid;
  place-items: center;
  padding: 20px;
}
.itq-back[hidden] { display: none !important; }

.itq-panel {
  width: min(480px, 100%);
  background: #fff;
  border-radius: 20px;
  padding: 26px 26px 24px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .55);
}
.itq-panel h2 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.itq-panel p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #54525E;
}

.itq-keeps {
  margin: 0 0 20px;
  padding: 14px 16px;
  list-style: none;
  background: #FBF8F0;
  border: 1px solid #F1EFE8;
  border-radius: 12px;
}
.itq-keeps li {
  position: relative;
  padding: 0 0 6px 20px;
  font-size: 13px;
  line-height: 1.5;
  color: #54525E;
}
.itq-keeps li:last-child { padding-bottom: 0; }
.itq-keeps li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16A34A;
}

.itq-acts { display: flex; gap: 10px; flex-wrap: wrap; }

.itq-go {
  flex: 1 1 auto;
  min-height: 48px;
  line-height: 48px;
  text-align: center;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid #121214;
  background: #121214;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}
.itq-go:hover { background: #000; color: #fff; }
/* the waiting state borrows the connections chip so the two read as one idea */
.itq-go.itg-off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.itq-ghost {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid #E9E4D8;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #54525E;
  cursor: pointer;
}
.itq-ghost:hover { border-color: #121214; color: #121214; }

.itq-fine {
  margin: 16px 0 0 !important;
  font-size: 12.5px !important;
  line-height: 1.6;
  color: #8A8375 !important;
}
.itq-fine:empty { display: none; }

@media (max-width: 520px) {
  .itq-acts { flex-direction: column; }
  .itq-go, .itq-ghost { width: 100%; }
}

@media print { .itq-back { display: none !important; } }