/* ===== Reset (like Bootstrap's reboot) ===== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #080f19;
  background: #fff;
}
h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.5rem; margin-bottom: 0; }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1rem; }
a  { color: #007cad; text-decoration: none; cursor: pointer; }
a:hover, a:focus { color: #00a1e0; }
[hidden] { display: none !important; }

/* ===== Header + banner (blank for now) ===== */
.header { padding: .5rem 6rem; background: #fff; min-height: 138px; }

.banner {
    height: 70px;
    width: 100%;
    margin-bottom: 2rem;
    background: url("/static/banner.png") center / cover no-repeat;
}

/* ===== Layout ===== */
.container { max-width: 900px; margin: 0 auto; padding: 0 15px; }
.page-title { margin-bottom: 2.4rem; }

.section-box {
  padding: 2rem;
  border: 1px solid #979797;
  margin-bottom: 3rem;
}

.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.col-left { flex: 0 0 25%; max-width: 25%; padding: 0 15px; }
.col-form { flex: 0 0 41.666%; max-width: 41.666%; padding: 0 15px; }

.section-box__header.has-icon { display: flex; align-items: center; }
.icon-info { width: .9rem; height: .9rem; fill: #007cad; margin-left: 5px; margin-top: 5px; cursor: pointer; }

.intro { margin-bottom: 0; }

/* ===== Material text fields ===== */
.material-text-field { position: relative; margin-top: 2rem; }
.material-text-field__input,
.material-text-field__drop-down {
  background: none;
  color: #080f19;
  font: inherit;
  font-size: .85rem;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #4a4a4a;
}
.material-text-field__input:focus,
.material-text-field__drop-down:focus { outline: none; }

.material-text-field__drop-down {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.material-text-field__drop-down:focus {
  background-image:
    linear-gradient(45deg, #007cad 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #007cad 50%);
  background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em;
}

.material-text-field__label {
  color: #4a4a4a;
  font-size: 16px;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 300ms ease all;
}
.material-text-field__input:focus ~ .material-text-field__label,
.material-text-field__input:not(:placeholder-shown) ~ .material-text-field__label,
.material-text-field__label--up {
  top: -14px;
  font-size: 12px;
}
.material-text-field__input:focus ~ .material-text-field__label,
.material-text-field__drop-down:focus ~ .material-text-field__label { color: #007cad; }

.material-text-field__ripple { position: relative; display: block; width: 100%; }
.material-text-field__ripple::before {
  content: "";
  height: 2px;
  width: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  background: #007cad;
  transition: 300ms ease all;
}
.material-text-field__input:focus ~ .material-text-field__ripple::before,
.material-text-field__drop-down:focus ~ .material-text-field__ripple::before { width: 100%; }

.material-text-field.material-error .material-text-field__input { border-color: #ba0000; }
.material-text-field.material-error .material-text-field__label { color: #ba0000; }

.section-box__notice { margin-top: 2rem; }
.section-box__notice ol { margin: 0; padding-left: 2.5rem; }

.global-error-message { color: #ba0000; margin: 1rem 0 0; }
.global-error-message:empty { display: none; }

/* ===== Buttons ===== */
.button {
  text-transform: uppercase;
  padding: .3rem .4rem;
  font: 700 .85rem Arial, Helvetica, sans-serif;
  border: none;
  cursor: pointer;
}
.button--primary { color: #fff; background: #007cad; }
.button--primary:disabled { background: #949494; cursor: default; }
.center-items { display: flex; justify-content: center; margin-top: 1.5rem; }
.search-btn { min-width: 128px; }

/* ===== Search results ===== */
.section-box__search-results { margin-top: 3rem; padding: 0 15px; }

.results-header { display: flex; justify-content: space-between; align-items: center; }
.search-results-header { display: flex; align-items: center; gap: 6px; margin: 0; }
.icon-search { width: 1.2rem; height: 1.2rem; fill: none; stroke: #080f19; stroke-width: 3; }
.print { display: flex; align-items: center; gap: 3px; font-size: .9rem; }
.icon-print { width: .85rem; height: .85rem; fill: #007cad; }

.result-message { margin: 1rem 0 0; font-weight: 700; color: #4a4a4a; }
.result-message.red-text { color: #ba0000; }

.dps-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 2rem; }
.dps-table thead, .dps-table tbody { font-size: .9rem; }
.dps-table thead { background: #f3f3f3; color: #4a4a4a; font-weight: 700; }
.dps-table thead th {
  text-align: left;
  vertical-align: bottom;
  padding: .5rem 10px .5rem 0;
  line-height: 1.3;
  font-weight: 700;
}
.dps-table th.col-check { width: 12%; }
    .dps-table th:nth-child(2) {
        width: 14%;
    }

    .dps-table th:nth-child(3) {
        width: 12%;
    }

    .dps-table th:nth-child(4) {
        width: 12%;
    }

    .dps-table th:nth-child(5) {
        width: 13%;
    }

    .dps-table th:nth-child(6) {
        width: 12%;
    }

    .dps-table th:nth-child(7) {
        width: 10%;
    }

    .dps-table th:nth-child(8) {
        width: 15%;
    }
.dps-table th.up {
  background-color: #eaeaea;
  background-repeat: no-repeat;
  background-position: right center;
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
.dps-table tbody tr { line-height: 2rem; }
.dps-table tbody tr.last-of-citation { border-bottom: 1px solid #979797; }
.dps-table tbody td { padding: 0 10px 0 0; vertical-align: top; }
.dps-table .open-details { color: #007cad; cursor: pointer; padding-left: 7px; }
.dps-table .open-details svg { width: .9rem; height: .9rem; vertical-align: -2px; fill: none; stroke: #007cad; stroke-width: 2; }

.total-amount {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 5px 0 0;
  font-size: 1.13rem;
  font-weight: 700;
}
.total-amount__label { padding-right: 20px; }

.pay-row { display: flex; justify-content: flex-end; margin: 3rem -15px 0 0; }

.appeal-box {
  display: flex;
  align-items: center;
  gap: 3rem;
  border: 1px solid #979797;
  padding: 2.4rem 3rem;
  margin: 3rem -30px 0;
}
.appeal-box p { margin: 0; }
.appeal-box .button { flex: none; }

/* ===== Footer ===== */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .65rem;
  margin-bottom: 2rem;
}
.footer__links { padding: 0; margin: 0; list-style: none; display: flex; gap: 10px; }
.footer__links a { color: #0f4d90; }
.footer__links a:hover { color: #1466be; }
.footer__project { color: #4a4a4a; }
.footer__copyright { color: #4a4a4a; }
.lang-select { font-size: .85rem; }

/* ===== Modal ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  overflow-y: auto;
  z-index: 1050;
  padding: 1.75rem 1rem;
}
.modal-dialog {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  padding: 3rem 2rem 2rem;
  font-size: .85rem;
}
.modal-dialog h4 { font-size: .85rem; font-weight: 700; margin: 0 0 1rem; }
.modal-close {
  position: absolute;
  top: .6rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  opacity: .5;
  cursor: pointer;
}
.modal-close:hover { opacity: .8; }
.details-table td { padding: 2px 10px 2px 0; font-size: .85rem; }
.details-table td:first-child { font-weight: 700; width: 50%; }

/* ===== Tablet / phone: stacked table like the real site ===== */
@media (max-width: 991px) {
  .dps-table, .dps-table tbody, .dps-table tr, .dps-table td { display: block; }
  .dps-table thead { display: none; }
  .dps-table tbody tr:first-child { border-top: 1px solid #979797; }
  .dps-table tbody tr.citation-row { padding-top: 1rem; }
  .dps-table tbody tr.last-of-citation { padding-bottom: 1rem; }
  .dps-table tbody td { position: relative; padding-left: 57%; line-height: 2rem; }
  .dps-table tbody td::before { position: absolute; left: 0; width: 54%; font-weight: 700; }
  .dps-table tbody td:nth-child(1) { padding-left: 0; }
  .dps-table tbody td:nth-child(1)::after { content: "Select this citation"; color: #007cad; font-weight: 700; padding-left: .5rem; }
  .citation-row td:nth-child(2)::before { content: "Number"; }
  .citation-row td:nth-child(3)::before { content: "Type"; }
  .citation-row td:nth-child(4)::before { content: "Plate"; }
  .citation-row td:nth-child(5)::before { content: "State"; }
  .citation-row td:nth-child(6)::before { content: "Date"; }
  .citation-row td:nth-child(7)::before { content: "Status"; }
  .citation-row td:nth-child(8)::before { content: "Amount Due"; }
  .details-row td:nth-child(1)::after, .empty-row td::after { content: none !important; }
  .details-row td { padding-left: 0; }
  .appeal-box { margin: 3rem 0 0; }
  .pay-row { margin-right: 0; }
}

@media (max-width: 767px) {
  .header { padding: .5rem 1rem; }
  .col-left, .col-form { flex: 0 0 100%; max-width: 100%; }
  .section-box { padding: 1.5rem 1rem; }
  .section-box__search-results { padding: 0; }
  .appeal-box { flex-direction: column; gap: 1rem; padding: 1.5rem; text-align: center; }
  .footer { flex-direction: column; text-align: center; }
}

/* ===== Print: just the results ===== */
@media print {
  .header, .banner, form, .intro, .pay-row, .appeal-box, .footer, .print, .modal-backdrop { display: none !important; }
}
#plate { text-transform: uppercase; }
/* Details link icon */
.open-details {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ext-icon {
    width: .85rem;
    height: .85rem;
    fill: none;
    stroke: #007cad;
    stroke-width: 1.6;
}

/* Keep "Citation Type" (and other headers) on one line */
.dps-table thead th {
    white-space: normal;
}

/* Details popup layout */
.details-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .details-head h4 {
        margin: 0;
    }

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
    margin-top: 1.5rem;
}

.dl-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    gap: 16px;
}

    .dl-row span:first-child {
        font-weight: 700;
    }

.details-images {
    text-align: center;
    margin-top: 1.5rem;
}

.details-btn {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
/* Info tooltip (hover) */
.info-wrap {
    position: relative;
    display: inline-flex;
}

.info-tip {
    display: none;
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    transform: translateY(-50%);
    width: 300px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    padding: 14px 16px;
    font-size: .8rem;
    font-weight: 400;
    color: #333;
    line-height: 1.5;
    z-index: 50;
}

.info-wrap:hover .info-tip,
.icon-info:focus + .info-tip {
    display: block;
}