/* Aplikimi online për kartën ([aplikim_online]): i njëjti formular si më parë, me pamjen e kartës.
   Më parë CSS-ja ishte brenda faqes, me fontin e sistemit dhe butonin jeshil (#0aa8a7). */
.sk-aplikim-wrap {
  --ap-red: var(--kess-red, #e1282f);
  --ap-red-d: #c61f26;
  --ap-blue: var(--kess-blue, #0c3f75);
  --ap-ink: #1c1c1c;
  --ap-muted: #5a6272;
  --ap-line: #e3e8ef;
  --ap-soft: #f5f9fa;
  max-width: 760px;
  margin: 8px auto 0;
  color: var(--ap-ink);
}
.sk-aplikim-wrap .ap-i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk-aplikim-wrap h1 { margin: 0; color: var(--ap-blue); font-size: clamp(30px, 4vw, 46px); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; }
.sk-aplikim-wrap .sub { margin: 10px 0 24px; max-width: 60ch; color: var(--ap-muted); font-size: 15px; line-height: 1.6; }

#sk-aplikim-form { display: grid; gap: 16px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--ap-line); border-radius: 22px; background: #fff; box-shadow: 0 1px 2px rgba(7, 16, 59, .05), 0 24px 48px -32px rgba(7, 16, 59, .4); }
#sk-aplikim-form[hidden] { display: none; } /* pas suksesit: display:grid përndryshe e mposht atributin hidden */
.sk-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .sk-row { grid-template-columns: 1fr; } }
.sk-input-group { display: grid; gap: 6px; min-width: 0; }
.sk-input-group > label { color: #283044; font-size: 14px; font-weight: 600; }
.sk-input-group input:not([type="file"]):not([type="checkbox"]), .sk-input-group select {
  width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--ap-line); border-radius: 12px; background: #fff;
  color: var(--ap-ink); font: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s;
}
.sk-input-group input:focus, .sk-input-group select:focus { outline: 0; border-color: var(--ap-blue); box-shadow: 0 0 0 4px rgba(12, 63, 117, .12); }
.sk-input-group input:user-invalid { border-color: var(--ap-red); }
.sk-input-group .ap-help { margin: 0; color: var(--ap-muted); font-size: 13px; }

/* Fotoja: butoni i zgjedhjes dhe prerja katrore */
.ap-foto { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed #c4cfdd; border-radius: 14px; background: var(--ap-soft); }
.ap-foto input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ap-foto-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ap-blue); border-radius: 999px; background: #fff; color: var(--ap-blue); font-size: 14px; font-weight: 600; cursor: pointer; }
.ap-foto-btn .ap-i { font-size: 18px; }
.ap-foto input[type="file"]:focus-visible + .ap-foto-btn { outline: 3px solid rgba(12, 63, 117, .45); outline-offset: 2px; }
.ap-foto-emri { min-width: 0; color: var(--ap-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Korniza si hije: Cropper-i mat kutinë me offsetWidth/Height, kështu që një border do ta priste 4 px. */
.sk-crop-area { display: none; max-height: 360px; margin-top: 4px; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 2px var(--ap-line); }
.sk-crop-area img { display: block; max-width: 100%; }

/* Pëlqimi dhe dërgimi */
.ap-consent { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--ap-soft); }
.ap-consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ap-blue); cursor: pointer; }
.ap-consent label { color: #3b4252; font-size: 14px; line-height: 1.5; cursor: pointer; }
#btn-aplikim { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; border: 0; border-radius: 999px; background: var(--ap-red); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 14px 28px -16px rgba(225, 40, 47, .95); transition: background .15s, transform .15s; }
#btn-aplikim:hover { background: var(--ap-red-d); }
#btn-aplikim:active { transform: scale(.99); }
#btn-aplikim[disabled] { opacity: .65; cursor: progress; }
.ap-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; color: var(--ap-muted); font-size: 12px; text-align: center; }

/* Mesazhet */
#aplikim-res:empty { display: none; }
#aplikim-res { margin-top: 16px; padding: 14px 16px; border-radius: 14px; font-size: 15px; font-weight: 500; }
#aplikim-res[data-ok="0"] { background: #fff1f1; color: #9b1c22; }
#aplikim-res[data-ok="1"] { display: flex; gap: 12px; align-items: flex-start; padding: 22px; background: #ecfdf3; color: #166534; font-size: 16px; }
#aplikim-res .ap-i { font-size: 26px; }