/* Domain expiry checker. The form, box, cards and links come from detector.css
   (.dat-det); this file adds what only this tool needs, scoped under .dat-exp. */
.dat-det.dat-exp .dat-exp-ok { color: #15803d; }
.dat-det.dat-exp .dat-exp-warn { color: #b45309; }
.dat-det.dat-exp .dat-exp-bad { color: #b91c1c; }

.dat-det.dat-exp .dat-exp-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 4px; }
.dat-det.dat-exp .dat-exp-cards .dat-det-card { flex: 1 1 180px; margin: 0; }
.dat-det.dat-exp .dat-exp-cards .dat-det-card-title { font-size: 19px; margin: 2px 0 0; }

.dat-det.dat-exp .dat-exp-h { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dat-det-muted); font-weight: 600; margin: 20px 0 6px; }
.dat-det.dat-exp .dat-exp-rows { margin: 0; }
.dat-det.dat-exp .dat-exp-rows .dat-det-row { padding: 6px 0; border-bottom: 1px solid var(--dat-det-line); }
.dat-det.dat-exp .dat-exp-rows .dat-det-row-label { flex: 0 0 150px; }

.dat-det.dat-exp .dat-exp-cal {
  display: inline-block; margin: 16px 0 0; padding: 11px 18px; border: 0; border-radius: 8px;
  background: var(--dat-det-accent); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.dat-det.dat-exp .dat-exp-cal:hover, .dat-det.dat-exp .dat-exp-cal:focus { filter: brightness(0.92); outline: none; }

@media (max-width: 560px) {
  .dat-det.dat-exp .dat-exp-rows .dat-det-row { flex-direction: column; gap: 0; }
  .dat-det.dat-exp .dat-exp-rows .dat-det-row-label { flex: 0 0 auto; font-size: 13px; }
  .dat-det.dat-exp .dat-exp-cal { display: block; width: 100%; }
}