/* =========================================================
   Self-hosted fonts (AtlasAAA). Files live in static/fonts/.
   Weight mapping (CSS weight -> file):
     300 Light · 400 Regular · 500 Medium · 700 Bold · 900 Black
   The design also uses 600 and 800; with no exact file, the
   browser picks the nearest (600->Bold, 800->Black).
   .ttf works fine; converting to .woff2 later just loads faster.
   ========================================================= */
@font-face {
  font-family: 'Atlas';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('fonts/AtlasAAA-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Atlas';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/AtlasAAA-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Atlas';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/AtlasAAA-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Atlas';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/AtlasAAA-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Atlas';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/AtlasAAA-Black.ttf') format('truetype');
}

/* =========================================================
   INPA — רשות הטבע והגנים · Fines payment suite
   Design system ported from the page-1 lookup form and
   extended for the fine-details, payment and result pages.
   One stylesheet shared by every view via base.html.
   ========================================================= */
:root {
  /* Brand palette */
  --green:        #004B3F;   /* RT&G Green — Pantone 3308 C */
  --grey-90:      #B6AAA7;
  --white:        #FFFFFF;

  /* Secondary (one per layout) — Cyan */
  --secondary:    #48BDE5;   /* Pantone 7404 C */

  /* Lime accent (from the INPA site) — used sparingly for rules/pills/hover */
  --lime:         #9DC020;
  --lime-ink:     #20340a;   /* text on lime */
  --green-deep:   #003a31;   /* footer / deep green */

  /* Derived neutrals */
  --ink:          #1c1c1c;
  --ink-soft:     #55514f;
  --green-soft:   #5d8a7f;   /* lighter green for on-green illustration */
  --green-hover:  #003a31;
  --bg-page:      #f5f3f1;   /* off-white frame outside the layout */
  --field-rule:   #CFC7C4;
  --panel:        #f8f6f4;
  --ok:           #1f7a4d;
  --ok-bg:        #e6f3ec;
  --err:          #b3261e;
  --err-bg:       #fbeae9;
  --warn:         #8a5a00;
  --warn-bg:      #fbf1dd;

  /* Grid — every spatial value derives from --margin */
  --margin:       clamp(18px, 3.8vw, 40px);
  --band:         calc(1.0 * var(--margin));
  --rule:         max(2px, calc(var(--margin) / 4));
  --logo-d:       clamp(58px, 9vw, 86px);
  --logo-pop:     calc(var(--logo-d) / 3);

  /* Type scale — x headline, y subhead, z body */
  --x:            clamp(28px, 3.6vw, 36px);
  --y:            max(19px, calc(var(--x) / 2.2));
  --z:            max(15px, calc(var(--y) / 1.5));

  --radius:       12px;
  --maxw:         1040px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Atlas', 'Arial Hebrew', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--bg-page);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--white);
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  position: relative;
  box-shadow: 0 0 60px rgba(0,0,0,0.05);
}

/* ---------- 1 · GREEN HEADER (logo + support, then title) ---------- */
.header {
  background: var(--green);
  color: var(--white);
  padding: calc(var(--margin) * 0.7) var(--margin) calc(var(--margin) * 0.6);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: calc(var(--margin) * 0.5);
}
/* Official logo, tinted white via CSS mask (green-on-green would be invisible).
   Colour is set by background — swap to var(--green) on a light background. */
.logo {
  display: block;
  height: clamp(50px, 8vw, 70px);
  aspect-ratio: 93 / 78;
  background-color: var(--white);
  -webkit-mask: url("logo.svg") no-repeat center / contain;
          mask: url("logo.svg") no-repeat center / contain;
}
.logo:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.header h1 {
  font-size: var(--x);
  font-weight: 800;
  line-height: 1.05;
}
.header .support {
  font-size: calc(var(--z) * 0.9);
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  white-space: nowrap;
}
.header .support b { color: var(--lime); font-weight: 700; }
.header .support:hover { color: #fff; }

/* ---------- 2 · LIME RULE (INPA's green→lime motif) ---------- */
.separator { height: var(--rule); background: var(--lime); }

/* ---------- 4 · CONTENT ---------- */
.content {
  padding: calc(var(--margin) * 1.1) var(--margin) calc(var(--margin) * 1.3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--margin) * 0.7);
}
.content h2 {
  font-size: var(--y);
  font-weight: 700;
  color: var(--green);
}
.content p.lead {
  font-size: var(--z);
  color: var(--ink-soft);
  max-width: 60ch;
}
.section-title {
  font-size: var(--z);
  font-weight: 700;
  color: var(--ink);
  border-inline-start: var(--rule) solid var(--secondary);
  padding-inline-start: .6em;
}

/* ---------- CARD (INPA form pattern: green head + lime underline) ---------- */
.card {
  background: var(--white);
  border: 1px solid #e7e2df;
  border-radius: var(--radius);
  overflow: hidden;
}
.card > .card-head {
  background: var(--green);
  color: var(--white);
  font-size: var(--y);
  font-weight: 700;
  padding: calc(var(--margin) * 0.35) calc(var(--margin) * 0.55);
  border-bottom: 4px solid var(--lime);
  display: flex;
  align-items: center;
  gap: .5em;
  flex-wrap: wrap;
}
.card > .card-body { padding: calc(var(--margin) * 0.55); }

/* ---------- COUNTDOWN (days left to pay) ---------- */
.countdown {
  background: var(--panel);
  border: 1.5px solid var(--lime);
  border-radius: var(--radius);
  padding: calc(var(--margin) * 0.7) var(--margin);
  margin-bottom: calc(var(--margin) * 0.6);
  text-align: center;
}
.countdown-icon {
  width: 1.9em; height: 1.9em;
  fill: var(--green);
  display: block;
  margin: 0 auto .3em;
}
.countdown-days {
  font-size: var(--x);
  font-weight: 800;
  color: var(--green);
  line-height: 1.2;
}
.countdown-due {
  font-size: var(--z);
  color: var(--ink-soft);
  margin-top: .4em;
}

/* ---------- FORM ---------- */
.form { display: flex; flex-direction: column; gap: calc(var(--margin) * 0.6); max-width: 420px; }
.field { display: flex; flex-direction: column; gap: .4em; }
.field label { font-size: var(--z); font-weight: 500; }
.input {
  font: inherit;
  font-size: max(16px, var(--z));   /* >=16px prevents iOS zoom */
  padding: .7em .9em;
  border: 1.5px solid var(--field-rule);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus-visible {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(72,189,229,0.35);
}
.input[aria-invalid="true"] { border-color: var(--err); }
.field-error { color: var(--err); font-size: calc(var(--z) * 0.9); min-height: 1.1em; }

/* terms checkbox row */
.checkbox {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: var(--z);
  cursor: pointer;
  margin: .2em 0 .1em;
}
.checkbox input {
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--green);
  flex: none;
  cursor: pointer;
}

/* ---------- BUTTONS / CTA ---------- */
.cta {
  font: inherit;
  font-size: var(--z);
  font-weight: 700;
  color: var(--white);
  background: var(--green);
  border: none;
  border-radius: var(--radius);
  padding: .85em 1.4em;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .08s ease;
}
.cta:hover { background: var(--green-hover); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.cta[disabled] { opacity: .5; cursor: not-allowed; }
.cta-arrow { width: 1.1em; height: 1.1em; fill: currentColor; transform: scaleX(-1); } /* point inward for RTL */
.cta-chev { color: var(--lime); font-weight: 800; font-size: 1.2em; line-height: 1; }

.notice {
  background: var(--panel);
  border-inline-start: 4px solid var(--secondary);
  border-radius: 8px;
  padding: .8em 1em;
  color: var(--ink-soft);
  font-size: calc(var(--z) * 0.9);
  margin: 0 0 .2em;
}

.link-back {
  font-size: var(--z);
  color: var(--green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  align-self: flex-start;
}
.link-back:hover { text-decoration: underline; }

/* ---------- DETAILS PANEL (page 2) ---------- */
.detail-card {
  border: 1.5px solid var(--field-rule);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
}
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: .85em var(--margin);
  border-bottom: 1px solid var(--field-rule);
  font-size: var(--z);
}
.detail-row:last-child { border-bottom: none; }
.detail-row dt { color: var(--ink-soft); font-weight: 400; }
.detail-row dd { font-weight: 600; text-align: start; }
.detail-row.total { background: var(--white); }
.detail-row.total dd { color: var(--green); font-size: calc(var(--z) * 1.25); font-weight: 800; }

/* When the details table sits inside a .card, the card provides the frame. */
.card-body .detail-card { border: 0; border-radius: 0; background: transparent; }
.card-body .detail-row { padding-inline: 2px; }
.card-body .detail-row.total { background: transparent; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-size: calc(var(--z) * 0.85);
  font-weight: 700;
  padding: .3em .7em;
  border-radius: 999px;
}
.badge.unpaid { background: var(--warn-bg); color: var(--warn); }
.badge.paid   { background: var(--ok-bg);  color: var(--ok); }
.badge.expired{ background: var(--err-bg); color: var(--err); }

/* ---------- PAYMENT (page 3) ---------- */
.pay-frame-wrap {
  border: 1.5px solid var(--field-rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  min-height: 520px;
  display: grid;
}
.pay-frame-wrap iframe { width: 100%; min-height: 520px; border: 0; display: block; }
.pay-pending {
  place-self: center;
  text-align: center;
  color: var(--ink-soft);
  padding: var(--margin);
  font-size: var(--z);
  max-width: 46ch;
}
.pay-pending strong { color: var(--green); display: block; margin-bottom: .4em; font-size: var(--y); }
.dev-bar {
  display: flex; gap: .6em; flex-wrap: wrap;
  padding: .8em var(--margin);
  background: #fff7e6;
  border: 1px dashed var(--warn);
  border-radius: var(--radius);
  font-size: calc(var(--z) * 0.9);
  align-items: center;
}
.dev-bar span { color: var(--warn); font-weight: 700; }
.dev-bar a { color: var(--green); }

/* ---------- RESULT (page 4) ---------- */
.result {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: calc(var(--margin) * 0.6);
  padding-block: calc(var(--margin) * 0.5);
}
.result .icon {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
}
.result.success .icon { background: var(--ok-bg); }
.result.success .icon svg { fill: var(--ok); }
.result.failure .icon { background: var(--err-bg); }
.result.failure .icon svg { fill: var(--err); }
.result.notice .icon { background: var(--panel); }
.result.notice .icon svg { fill: var(--ink-soft); }
.result.notice h2 { color: var(--ink); }
.result .icon svg { width: 44px; height: 44px; }
.result h2 { font-size: var(--x); }
.result.success h2 { color: var(--ok); }
.result.failure h2 { color: var(--err); }
.result .detail-card { width: 100%; max-width: 460px; text-align: start; }

/* ---------- 5 · FOOTER ---------- */
.footer {
  background: var(--green-deep);
  color: #e9efec;
}
.footer .foot-top {
  padding: calc(var(--margin) * 0.9) var(--margin) calc(var(--margin) * 0.7);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: calc(var(--margin) * 0.8);
}
.footer h3 {
  color: var(--lime);
  font-size: var(--z);
  font-weight: 700;
  margin-bottom: .5em;
}
.footer p, .footer .foot-top a {
  display: block;
  color: #e9efec;
  text-decoration: none;
  font-size: calc(var(--z) * 0.9);
  margin: .35em 0;
  opacity: .92;
}
.footer .foot-top a:hover { opacity: 1; text-decoration: underline; }
.footer .socials { display: flex; gap: .5em; margin-top: .4em; }
.footer .socials a {
  width: 2.1em; height: 2.1em;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: grid; place-items: center;
  margin: 0;
}
.footer .socials a:hover { background: var(--lime); }
.footer .socials a:hover svg { fill: var(--lime-ink); }
.footer .socials svg { width: 1.05em; height: 1.05em; fill: #e9efec; }
.footer .foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: calc(var(--margin) * 0.55) var(--margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
  font-size: calc(var(--z) * 0.82);
  opacity: .9;
}
.footer .foot-bottom a { color: var(--lime); text-decoration: none; }
.footer .foot-bottom a:hover { text-decoration: underline; }
.footer a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 560px) {
  .detail-row { flex-direction: column; gap: .15em; }
  .detail-row dd { text-align: start; }
  .form { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}