* { box-sizing:border-box }
[hidden] { display:none !important }

body {
    margin:0; min-height:100vh; display:flex; flex-direction:column;
    background:#efe9dd; color:#1a1a1a;
    font-size:14px;

    font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
                "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  #header {
    display:flex; align-items:center; justify-content:center; gap:16px;
    padding:16px 24px; background:#fff;
  }
  #header .ndares { width:1px; align-self:stretch; background:#ddd7cb }
  #header a { display:block; border-radius:3px }
  #header .logo { height:58px; aspect-ratio:400/487.32; display:block }
  #footer .logo { height:40px; aspect-ratio:400/487.32; margin:0 auto 8px; display:block }
  #header h1 {
    margin:0; font-family:Tahoma, Verdana, Geneva, sans-serif;
    font-size:19px; font-weight:bold; letter-spacing:.4px;
  }
  #shirit {
    padding:8px 24px; background:#333; color:#e6e3de;
    text-align:center; font-size:13px;
  }
  #shirit b { color:#fff }

  #mesi { flex:1; padding:24px 20px }
  .kuti {
    max-width:720px; margin:0 auto 20px; background:#fff;
    border:1px solid #ddd7cb; box-shadow:0 1px 2px rgba(0,0,0,.06);
  }
  .kuti h2 {
    margin:0; background:#333; font-size:14px; font-weight:bold; letter-spacing:.3px;
    font-family:Tahoma, Verdana, Geneva, sans-serif;
  }
  .kuti h2:focus { outline:none }
  .kuti h2 span {
    display:inline-block; padding:10px 30px 10px 16px;
    background:#d3402a; color:#fff;
    clip-path:polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  }
  .brenda { padding:18px 16px }
  .brenda p { margin:0 0 14px; color:#4a463f; line-height:1.6 }

  form { display:flex; gap:10px }
  form input[type="text"] {
    flex:1; min-width:0; padding:13px 14px; font-size:16px; font-family:inherit;
    border:1px solid #8a8578; border-radius:3px; background:#fff;
  }
  form input[type="text"]:focus { outline:none; border-color:#d3402a }
  form button {
    padding:13px 26px; font-size:16px; font-family:inherit; cursor:pointer;
    background:#d3402a; color:#fff; border:1px solid #d3402a; border-radius:3px;
  }
  form button:hover { background:#b6321f }
  button:focus-visible, a:focus-visible { outline:2px solid #1a1a1a; outline-offset:2px }

  ul { margin:0; padding-left:20px; color:#4a463f; line-height:1.9 }
  .hapat { margin:0; padding:0; list-style:none; line-height:1.9 }
  .hapat li { padding-left:28px; position:relative; color:#4a463f }
  .hapat b { position:absolute; left:0; color:#d3402a }

  #rezultati .brenda, #suksesi .brenda { padding:0 }
  table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums }
  td { padding:11px 16px; border-bottom:1px solid #eee7da; vertical-align:top }
  td:first-child { color:#6b675d; width:48% }
  td:last-child { text-align:right; font-weight:bold; overflow-wrap:anywhere }
  .menyrat { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
  .menyrat legend { padding:0 0 8px; color:#6b675d; font-size:13px;
                    text-transform:uppercase; letter-spacing:.6px }
  .menyrat label { display:flex; gap:12px; align-items:flex-start; cursor:pointer;
                   padding:12px 14px; border:1px solid #ded6c6; border-radius:3px }
  .menyrat label:has(:checked) { border-color:#d3402a; background:#fdf1ee }
  .menyrat input { margin:3px 0 0; accent-color:#d3402a }
  .menyrat:disabled { opacity:.55 }
  .menyrat small { display:block; color:#6b675d; font-size:13px }
  .total td { background:#fbf7f0; font-size:18px; border-bottom:none; padding-top:14px; padding-bottom:14px }
  .veprimet { padding:16px; border-top:1px solid #eee7da; display:flex; flex-wrap:wrap; gap:10px }
  .veprimet button {
    padding:12px 22px; font-size:15px; font-family:inherit; cursor:pointer; border-radius:3px;
  }
  .kryesor { background:#d3402a; color:#fff; border:1px solid #d3402a }
  .kryesor:hover { background:#b6321f }
  #gabimi { margin-top:10px; color:#a8301c; font-size:13px }
  #duke { display:flex; align-items:center; gap:10px; margin-top:14px; color:#6b675d }

  .rrota {
    width:18px; height:18px; border:2px solid #c2b9a5; border-top-color:#d3402a;
    border-radius:50%; animation:rrotullo .8s linear infinite;
  }
  @keyframes rrotullo { to { transform:rotate(360deg) } }
  @media (prefers-reduced-motion: reduce) { .rrota { animation-duration:2.4s } }
  button[disabled] { opacity:.6; cursor:progress }

  .paralajmerim {
    margin:14px 16px 18px; padding:12px 14px;
    background:#fdf1ee; border-left:4px solid #d3402a;
    color:#4a463f; line-height:1.6;
  }
  .paralajmerim b { color:#a8301c }

  #dritarja {
    border:1px solid #ddd7cb; border-top:3px solid #d3402a; border-radius:3px;
    padding:0; max-width:400px; width:calc(100% - 32px);
    color:#1a1a1a; font-family:inherit; box-shadow:0 8px 30px rgba(0,0,0,.18);
  }
  #dritarja::backdrop { background:rgba(35,32,28,.55) }
  .dritarja-brenda { display:flex; align-items:center; gap:14px; padding:22px 20px }
  .dritarja-brenda p { margin:0; line-height:1.5 }
  #dritarja form { padding:0 20px 18px; display:flex; justify-content:flex-end }
  #footer {
    padding:18px 24px; background:#333; border-top:3px solid #d3402a;
    text-align:center; font-size:12px; color:#c9c6c1; line-height:1.7;
  }
  #footer b { color:#fff; font-family:Tahoma, Verdana, Geneva, sans-serif; font-size:13px; letter-spacing:.3px }

  .kthimi {
    display:inline-block; padding:12px 22px; border-radius:3px; text-decoration:none;
    background:#fff; color:#333; border:1px solid #8a8578; font-size:15px;
  }
  .kthimi:hover { background:#f5f2ea }

  .sukses-koka { display:flex; align-items:center; gap:16px; padding:6px 16px 20px }
  .sukses-teksti { margin:0; font-size:16px; line-height:1.5 }
  .shenja { width:56px; height:56px; flex:none }
  .shenja-rreth {
    fill:none; stroke:#2e7d32; stroke-width:2.5;
    stroke-dasharray:151; stroke-dashoffset:151;
    animation:vizato-rrethin .6s ease-out forwards;
  }
  .shenja-vije {
    fill:none; stroke:#2e7d32; stroke-width:4; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:40; stroke-dashoffset:40;
    animation:vizato-shenjen .35s .5s ease-out forwards;
  }
  @keyframes vizato-rrethin { to { stroke-dashoffset:0 } }
  @keyframes vizato-shenjen { to { stroke-dashoffset:0 } }
  @media (prefers-reduced-motion: reduce) {
    .shenja-rreth, .shenja-vije { animation-duration:.01ms; stroke-dashoffset:0 }
  }
  .deshtim-koka { display:flex; align-items:center; gap:16px }
  .shenja-x .x-rreth { fill:none; stroke:#b3261e; stroke-width:2.5;
    stroke-dasharray:151; stroke-dashoffset:151; animation:vizato-rrethin .6s ease-out forwards }
  .shenja-x .x-vije { fill:none; stroke:#b3261e; stroke-width:4; stroke-linecap:round;
    stroke-dasharray:46; stroke-dashoffset:46; animation:vizato-shenjen .35s .5s ease-out forwards }
  .pa-mbushje-tekst { margin:0; color:#4a463f; line-height:1.6 }
  .kryesor-lidhje {
    display:inline-block; padding:13px 26px; font-size:16px; font-family:inherit;
    text-decoration:none; text-align:center;
    background:#d3402a; color:#fff; border:1px solid #d3402a; border-radius:3px;
  }
  .kryesor-lidhje:hover { background:#b6321f }
  .fusnote { padding:14px 16px; border-top:1px solid #eee7da; color:#6b675d; font-size:13px }

  .letra, .letra-fund { display:none }
  .vula-paguar { color:#2e7d32 }
  .vula-pritje { color:#a35f00 }
  .shenja-pritje .shenja-rreth, .shenja-pritje .shenja-vije { stroke:#a35f00 }

  @page { margin:18mm }

  @media print {
    #header, #shirit, #footer, .veprimet, .sukses-koka, #njoftimiEmail { display:none }
    body { background:#fff; color:#000; font-family:Georgia, "Times New Roman", serif; font-size:11.5pt }
    #mesi { padding:0; display:block }
    .kuti { border:0; box-shadow:none; max-width:none; margin:0 }
    .kuti h2 { display:none }
    .brenda { padding:0 }

    .letra { display:block }
    .letra-koka {
      display:flex; align-items:center; gap:14pt;
      border-bottom:2.5pt solid #d3402a; padding-bottom:10pt;
    }
    .letra-koka img { height:56pt; width:auto }
    .letra-emri { flex:1; font-family:Tahoma, Verdana, sans-serif; line-height:1.5 }
    .letra-emri b { display:block; font-size:11.5pt; letter-spacing:.5pt }
    .letra-emri span { display:block; font-size:9.5pt; color:#333 }
    .letra-vula {
      align-self:flex-start; border:1.5pt solid currentColor;
      font-family:Tahoma, Verdana, sans-serif; font-size:11pt; font-weight:bold;
      letter-spacing:1.5pt; padding:5pt 12pt;
    }

    .letra-titulli { text-align:center; margin:22pt 0 18pt }
    .letra-h1 {
      font-family:Tahoma, Verdana, sans-serif; font-size:16pt;
      letter-spacing:2pt; font-weight:bold;
    }
    .letra-titulli p { margin:5pt 0 0; font-size:10.5pt; color:#333 }

    table { border-top:1pt solid #333; page-break-inside:avoid }
    td { border-bottom:.5pt solid #bbb; padding:9pt 0; font-size:11.5pt }
    td:first-child { color:#333; width:48% }
    td:last-child { font-family:Tahoma, Verdana, sans-serif }
    .total td {
      background:none; font-size:13pt; padding-top:11pt; padding-bottom:11pt;
      border-top:1pt solid #333; border-bottom:2pt solid #333;
    }

    .letra-fund { display:block; margin-top:26pt; font-size:9.5pt; color:#333; line-height:1.6 }
    .letra-fund p { margin:0 0 6pt }
    .letra-gjeneruar { border-top:.5pt solid #bbb; padding-top:8pt; color:#666 }
  }

  .brenda.pa-mbushje { padding:0 }
  .zona { padding:18px 16px 20px }
  .zona .paralajmerim { margin:16px 0 0 }
  .fusha { margin-bottom:20px }
  .fusha label { display:block; margin-bottom:8px; font-size:13px; color:#6b675d;
                 text-transform:uppercase; letter-spacing:.6px }
  .fusha label span { text-transform:none; letter-spacing:0 }
  .fusha input {
    width:100%; padding:13px 14px; font-size:16px; font-family:inherit;
    border:1px solid #8a8578; border-radius:3px;
  }
  .fusha input:focus { outline:none; border-color:#d3402a }
  .fusha input:disabled { background:#f5f2ea; color:#6b675d }
  #gabimEmail { margin-top:8px; color:#a8301c; font-size:13px }

  @media (max-width: 460px) {
    #header { gap:10px; padding:12px 14px }
    #header .logo { height:44px }
    #header h1 { font-size:15.5px; letter-spacing:.2px }
    #mesi { padding:16px 12px }
    td { padding:10px 12px }
    td:first-child { width:auto }
    .total td { font-size:15px }
    .zona { padding:16px 12px 18px }
    .veprimet { padding:12px }
  }

  @media (max-width: 360px) {
    .sukses-koka, .deshtim-koka { flex-direction:column; align-items:flex-start; gap:10px }
    .shenja { width:44px; height:44px }
    table, tbody, tr, td { display:block; width:auto }
    tr { padding:9px 12px; border-bottom:1px solid #eee7da }
    tr:last-child { border-bottom:0 }
    td { border:0; padding:1px 0 }
    td:first-child { font-size:13px }
    td:last-child { text-align:left; font-size:15px }
    .total { background:#fbf7f0 }
    .total td { background:none; padding:2px 0 }
    .total td:last-child { font-size:17px }
  }