:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#101828;
  --muted:#667085;
  --border:#e4e7ec;
  --btn:#0b5fff;
  --btnText:#fff;
  --danger:#b42318;
  --ok:#027a48;
}

*{box-sizing:border-box}






/* ===== CUSTOM ALERT ===== */
.custom-alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300000;
}

.custom-alert-box {
  background: #fff;
  max-width: 420px;
  width: calc(100% - 40px);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: alertIn .25s ease-out;
}

.custom-alert-title {
  font-size: 18px;
  font-weight: 600;
  color: #667a62;
  margin-bottom: 10px;
}

.custom-alert-message {
  font-size: 15px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.5;
}

.custom-alert-box button {
  background: #738150;
  color: #fff;
  border: 0;
  padding: 10px 26px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.custom-alert-box button:hover {
  background: #667a62;
}

@keyframes alertIn {
  from { opacity:0; transform: scale(.96) translateY(10px); }
  to   { opacity:1; transform: scale(1) translateY(0); }
}






.containeriii{
  margin:24px auto;
          max-width: 1270px;
}

.containeriii.small{width:min(720px,92vw);}

.hero{
  display:grid;
  gap:18px;
  grid-template-columns: 1.1fr .9fr;
  align-items:start;
}
.hero-text h1{
  font-size:clamp(26px,3vw,44px);
  line-height:1.1;
  margin:0 0 10px;
}
.hero-text p{margin:0 0 14px; color:var(--muted); font-size:16px; line-height:1.6;}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px;}
.hero-badges span{
  background:#738150;
  border:1px solid #503e26;
  color:#eaeaea;
  padding:8px 10px;
  border-radius:999px;
  font-size:13px;
}

.hero-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 6px 20px rgba(16,24,40,.06);
}
.hero-card h2{margin:0 0 6px; font-size:18px;}
.muted{color:#503e26 !important;}
.form{margin-top:10px}
.field{margin:10px 0}
label{display:block; font-weight:600; font-size:13px; margin:0 0 6px}
input, select, textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font-size:14px;
  outline:none;
}
textarea{resize:vertical}
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.hint{font-size:12px; color:var(--muted); margin-top:6px}
.checkbox label{font-weight:500}
.btn{
  display:inline-block;
  width:100%;
  text-align:center;
  background: #503e26 !important;
  color:var(--btnText);
  border:0;
  border-radius:12px;
  padding:12px 14px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}
.btn:hover{filter:brightness(.96)}
.disclaimer{font-size:12px;color:var(--muted);margin:12px 0 0}
.alert{
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0;
  font-size:13px;
}
.alert-danger{background:#fff1f0; border:1px solid #ffccc7; color:var(--danger)}
.alert-ok{background:#ecfdf3; border:1px solid #abefc6; color:var(--ok)}

.stepsi{margin:26px 0 0}
.stepsi h3{margin:0 0 10px; font-size:18px}
.stepi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.stepi{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.stepi .nr{
  width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  background:#f2f4f7;
  font-weight:800;
}

.footer{
  margin:26px 0 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
      background: #667a62 !important;
      color:#503e26 !important;
}
.admin-link{font-size:13px;color:#503e26 !important;text-decoration:none}
.admin-link:hover{text-decoration:underline}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:0 6px 20px rgba(16,24,40,.06);
}


/* ===== FIX CHECKBOX MOBILE (SI DESKTOP) ===== */
.form .field.checkbox {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 8px;
}

/* checkbox vetë */
.form .field.checkbox input[type="checkbox"] {
  position: static !important;
  margin: 3px 0 0 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

/* teksti i checkbox-it */
.form .field.checkbox label {
  display: inline !important;
  text-align: left !important;
  font-weight: normal;
  line-height: 1.4;
}


/* ===== MOBILE TABLE SCROLL FIX ===== */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* tabela mos u ngushto */
.table-scroll table {
  min-width: 900px; /* ose 800 sipas qejfit */
  border-collapse: collapse;
}

/* ndalo overflow global */
body, html {
  overflow-x: hidden !important;
}


@media (max-width: 920px){
  .hero{grid-template-columns:1fr}
  .stepi-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .grid2{grid-template-columns:1fr}
}

@media (max-width: 768px) {

  /* Kolonat një nën një */
  .rowiii {
    grid-template-columns: 1fr !important;
  }

  /* Card të marrë 100% */
  .card {
    width: 100% !important;
  }

  /* Forma dhe textarea 100% */
  .form,
  .field,
  textarea,
  select,
  input {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Butoni Ruaj full width */
  .btn {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Topbar stack vertikal */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

}