/* Base typography + force color */
.cta-prijave-wrap,
.cta-prijave-wrap * {
  font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
  color: #2c3e50;
}

/* Layout */
.cta-prijave-wrap { max-width: 980px; margin: 0 auto; }
.cta-form { background: transparent; }
.cta-section { margin-bottom: 24px; }
.cta-section h3 { margin: 0 0 14px; font-weight: 700; }

/* Grid */
.cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

/* Labels */
.cta-field label,
.cta-row-head {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 16px;
}

/* Inputs – bigger, softer, less “loud” */
.cta-field input,
.cta-row-item input {
  width: 100% !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.55) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Placeholder */
.cta-prijave-wrap input::placeholder {
  color: rgba(0,0,0,0.55);
}

/* Focus – subtle */
.cta-field input:focus,
.cta-row-item input:focus {
  border-color: rgba(0,0,0,0.28) !important;
  background: rgba(255,255,255,0.50) !important;
}

/* Required star stays red */
.req { color: #d00 !important; }

/* Section head */
.cta-section-head {
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

/* Table */
.cta-table {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  overflow: hidden;
}

/* Rows */
.cta-row {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 1.2fr 140px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

/* Header row less contrast */
.cta-row-head {
  background: rgba(255,255,255,0.20);
}

/* Divider softer */
.cta-row-item { border-top: 1px solid rgba(0,0,0,0.08); }

/* Buttons */
.cta-actions { display:flex; justify-content:flex-end; }

.cta-btn {
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  background: rgba(255,255,255,0.25);
  color: #2c3e50;
}

/* Primary button */
.cta-btn-primary {
  background: #2c3e50;
  border-color: #2c3e50;
  color: #fff;
}

/* Secondary */
.cta-btn-secondary {
  background: rgba(255,255,255,0.25);
}

/* Danger */
.cta-btn-danger {
  background: rgba(255, 227, 227, 0.55);
  border-color: rgba(138,0,0,0.18);
  color: #2c3e50;
}

.cta-footer { display:flex; justify-content:flex-end; }

/* Alerts */
.cta-alert { padding: 12px 14px; border-radius: 12px; margin-bottom: 14px; }
.cta-success { background: rgba(233,255,233,0.65); border: 1px solid rgba(191,232,191,0.9); }
.cta-error { background: rgba(255,243,243,0.7); border: 1px solid rgba(240,192,192,0.9); }

/* Note text */
.cta-note { font-size: 13px; opacity: .8; margin-top: 10px; color: #2c3e50; }

@media (max-width: 800px) {
  .cta-grid { grid-template-columns: 1fr; }
  .cta-row { grid-template-columns: 1fr; }
  .cta-actions { justify-content:flex-start; }
}

/* Mobile: polaznici kao "kartice" sa labelima */
@media (max-width: 800px) {
  /* sakrij header red u tabeli */
  .cta-row-head { display: none; }

  /* svaka row-item kao card */
  .cta-row-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
    background: rgba(255,255,255,0.20);
  }

  /* da inputs ne budu zalepljeni */
  .cta-row-item > div { width: 100%; }

  /* dodaj labele preko pseudo-elemenata */
  .cta-row-item > div:nth-child(1)::before {
    content: "Ime i prezime *";
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 16px;
  }

  .cta-row-item > div:nth-child(2)::before {
    content: "Godina rođenja *";
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 16px;
  }

  .cta-row-item > div:nth-child(3)::before {
    content: "Instrument / pevanje *";
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 16px;
  }

  /* dugme uklonite normalno ispod */
  .cta-actions { justify-content: flex-start; }
  .cta-actions .cta-btn { width: 100%; }

  /* + Dodajte polaznika da ne bude tesno */
  .cta-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  #cta-add-row { width: 100%; }
}

/* Mobile: submit dugme full width (po želji, ali uglavnom lepše) */
@media (max-width: 600px) {
  .cta-footer { justify-content: stretch; }
  .cta-footer .cta-btn-primary { width: 100%; }
}

/* Add button ispod liste */
.cta-add-wrap {
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
}

.cta-add-wrap .cta-btn {
  min-width: 220px;
}

/* Mobilni – full width dugme */
@media (max-width: 600px) {
  .cta-add-wrap {
    justify-content: stretch;
  }
  .cta-add-wrap .cta-btn {
    width: 100%;
  }
}