/* ==========================================================================
   START Arhitektura — članski deo (prijava, registracija, profil)
   Učitava se samo na PHP stranicama, posle custom.css.
   Koristi postojeće boje (--start-*) i postojeće stilove formi (.start-form).
   ========================================================================== */

/* --- Polja za lozinku: isti izgled kao text/email/tel polja u custom.css --- */
.start-form input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--start-border);
  border-radius: 3px;
  font-size: 14px;
  margin-bottom: 15px;
  font-family: 'Open Sans', sans-serif;
  transition: border-color 0.3s ease;
}

/* --- Greške koje vraća server (ispod polja) --- */
.start-form input.has-field-error {
  border-color: #e74c3c;
}
.start-form .field-error {
  color: #c0392b;
  font-size: 12px;
  margin-top: -10px;
  margin-bottom: 10px;
}
.start-form .field-help {
  font-size: 12px;
  color: #7a817a;
  margin-top: -10px;
  margin-bottom: 10px;
}

/* --- Dodatne vrste poruka (pored postojećih uspeh / greška) --- */
.start-form .form-success.is-info {
  background: var(--start-light);
  border-color: var(--start-border);
  color: var(--start-dark);
}
.start-form .form-success.is-warning {
  background: rgba(200, 146, 59, 0.12);
  border-color: rgba(200, 146, 59, 0.5);
  color: #6b4a14;
}

/* --- Kartica naloga (forma prijave/registracije, profil) --- */
.account-panel {
  background: var(--start-white);
  border: 1px solid var(--start-border);
  border-radius: 6px;
  padding: 30px;
}
.account-panel + .account-panel {
  margin-top: 30px;
}
.account-panel h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
}
.account-intro {
  text-align: center;
  margin-bottom: 25px;
}
.account-links {
  text-align: center;
  margin: 20px 0 0;
  font-size: 14px;
}
.account-links p {
  margin-bottom: 6px;
}

/* --- Podaci o nalogu (profil) --- */
.account-details {
  margin: 0;
}
.account-details dt {
  font-weight: 600;
  color: var(--start-heading);
}
.account-details dd {
  margin: 0 0 14px;
  word-break: break-word;
}
@media (min-width: 768px) {
  .account-details {
    display: grid;
    grid-template-columns: 200px 1fr;
    column-gap: 20px;
  }
  .account-details dd {
    margin-bottom: 12px;
  }
}

/* --- Oznaka statusa naloga --- */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.status-badge.is-pending {
  background: rgba(200, 146, 59, 0.15);
  color: #6b4a14;
}
.status-badge.is-verified {
  background: rgba(124, 143, 116, 0.18);
  color: var(--start-dark);
}
.status-badge.is-disabled {
  background: var(--start-border);
  color: var(--start-text);
}

/* --- Istaknuto obaveštenje (npr. nalog čeka verifikaciju) --- */
.account-alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  margin-bottom: 30px;
  border-radius: 4px;
  border-left: 4px solid var(--start-accent-2);
  background: rgba(200, 146, 59, 0.10);
  color: var(--start-dark);
}
.account-alert .fa {
  font-size: 22px;
  color: var(--start-accent-2);
  margin-top: 2px;
}
.account-alert strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}
.account-alert p {
  margin: 0;
}

/* --- Odjava (diskretno dugme) --- */
.account-logout {
  text-align: center;
  margin-top: 30px;
}
.btn-logout {
  background: transparent;
  border: 1px solid var(--start-border);
  color: var(--start-text);
  padding: 8px 22px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.btn-logout:hover,
.btn-logout:focus {
  border-color: var(--start-accent-2);
  color: var(--start-dark);
}

@media (max-width: 767px) {
  .account-panel {
    padding: 20px 16px;
  }
}

/* --- Profil: izmena podataka --- */
.account-edit-toggle {
  margin: 10px 0 0;
}
.btn-text {
  background: none;
  border: 0;
  padding: 0;
  color: var(--start-accent-2);
  font-weight: 600;
  font-size: 14px;
}
.btn-text:hover,
.btn-text:focus {
  color: var(--start-accent-hover);
}
.account-edit {
  border-top: 1px solid var(--start-border);
  margin-top: 18px;
  padding-top: 22px;
}

/* --- Profil: evidencija uplata --- */
.payments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.payments-table th {
  text-align: left;
  font-weight: 600;
  color: var(--start-heading);
  border-bottom: 2px solid var(--start-border);
  padding: 8px 10px 8px 0;
}
.payments-table td {
  border-bottom: 1px solid var(--start-border);
  padding: 10px 10px 10px 0;
  vertical-align: middle;
}
.payments-table tr:last-child td {
  border-bottom: 0;
}
.status-badge.is-unpaid {
  background: var(--start-light);
  color: #7a817a;
  border: 1px solid var(--start-border);
}
.payments-help {
  margin: 16px 0 0;
}

/* --- Profil: materijali po mesecima --- */
.materials-empty {
  margin: 0;
}
.material-month + .material-month {
  margin-top: 28px;
}
.material-month h3 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--start-accent);
}
.material-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.material-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--start-border);
}
.material-item:last-child {
  border-bottom: 0;
}
.material-info {
  min-width: 0;
}
.material-info h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  word-break: break-word;
}
.material-info p {
  margin: 0 0 4px;
  font-size: 14px;
  word-break: break-word;
}
.material-meta {
  font-size: 12px !important;
  color: #7a817a;
}
.btn.material-download {
  flex-shrink: 0;
  padding: 9px 20px;
  font-size: 13px;
}
.material-locked {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 4px;
  background: var(--start-light);
  border: 1px dashed var(--start-accent);
}
.material-locked .fa {
  font-size: 20px;
  color: var(--start-accent-2);
  margin-top: 2px;
}
.material-locked p {
  margin: 0 0 4px;
  font-size: 14px;
}

@media (max-width: 767px) {
  .material-item {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .btn.material-download {
    width: 100%;
  }
}

/* --- Template neutralizacija (main.css: p { padding-bottom:22px }, .btn-primary { line-height:50px }) --- */
.account-alert p,
.material-info p,
.material-locked p,
.start-form .field-help,
.payments-help {
  padding-bottom: 0;
}
.btn.material-download {
  line-height: 1.4;
}

/* --- Kursevi (kursevi.php) --- */
.course-list { list-style: none; margin: 0; padding: 0; }
.course-card { padding: 18px 0; border-bottom: 1px solid var(--start-border, #e2e2de); }
.course-card:first-child { padding-top: 4px; }
.course-card:last-child { border-bottom: 0; padding-bottom: 0; }
.course-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.course-card-head h3 { margin: 0; font-size: 19px; color: var(--start-heading, #2a2e2c); }
.course-price { font-weight: 700; font-size: 17px; color: var(--start-accent-2, #c8923b); white-space: nowrap; }
.course-description { margin: 10px 0 0; }
.course-choose, .course-owned { margin: 10px 0 0; font-weight: 600; }
.course-inquiry-form select.form-control { height: auto; padding: 10px 12px; }