/* ================================================================
   BIE Trademark CSS - Professional Government Styling
   ================================================================ */

/* Trademark container */
.trademark-container { max-width:960px; margin:0 auto; padding:0 0 40px; }

/* Page header */
.trademark-header { background:linear-gradient(135deg,#1B3A5C,#2E6DA4); border-radius:10px; padding:36px 32px; margin-bottom:28px; color:#fff; text-align:center; border-bottom:4px solid #FFC72C; }
.trademark-header h1 { font-size:1.8rem; font-weight:700; margin:0 0 8px; }
.trademark-header p { margin:0; opacity:.85; font-size:14px; }

/* Cards */
.trademark-card { background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(27,58,92,.10); margin-bottom:22px; overflow:hidden; border:1px solid #DDE2EA; animation:fadeUp .3s ease; }
.trademark-card-header { background:#F4F6F9; color:#1B3A5C; padding:14px 20px; font-weight:700; font-size:14px; border-bottom:1px solid #DDE2EA; display:flex; align-items:center; gap:8px; }
.trademark-card-header i { color:#2E6DA4; font-size:15px; }
.trademark-card-body { padding:24px; }

@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Fee display */
.fee-display { background:#F4F6F9; border-radius:8px; padding:16px; border:1px solid #DDE2EA; }
.fee-item { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid #DDE2EA; font-size:13px; }
.fee-item:last-child { border-bottom:none; font-weight:700; font-size:15px; padding-top:12px; border-top:2px solid #DDE2EA; }

/* Progress steps */
.progress-steps { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; position:relative; }
.progress-steps::before { content:''; position:absolute; top:50%; left:10%; right:10%; height:2px; background:#DDE2EA; z-index:1; transform:translateY(-50%); }
.step { background:#fff; border:2px solid #DDE2EA; border-radius:50%; width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; position:relative; z-index:2; color:#718096; transition:all .3s; }
.step.active { border-color:#1B3A5C; background:#1B3A5C; color:#fff; }
.step.done   { border-color:#276749; background:#276749; color:#fff; }

/* File input */
.file-input-wrapper { position:relative; }
.file-input-wrapper input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; z-index:2; }
.file-input-label { display:flex; align-items:center; gap:10px; padding:11px 16px; background:#F4F6F9; border:1.5px dashed #9EB3CB; border-radius:8px; cursor:pointer; transition:all .2s; font-size:13px; color:#2E6DA4; }
.file-input-label:hover { background:#EBF4FC; border-color:#2E6DA4; }
.file-input-label i { font-size:18px; color:#2E6DA4; }

/* Bestand aanwezig (bestaand of net gekozen): upload-vak kleurt groen */
.file-field-group.has-file .file-input-label { border-style:solid; border-color:#38A169; background:#F0FFF4; color:#276749; }
.file-field-group.has-file .file-input-label i { color:#276749; }

/* Bestaand/net gekozen bestand: compacte kaart met preview + acties */
.existing-file-chip { display:flex; align-items:center; gap:10px; margin-top:8px; padding:8px 10px; border:1.5px solid #DDE2EA; border-radius:8px; background:#fff; }
.existing-file-preview { width:38px; height:38px; min-width:38px; border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#F4F6F9; }
.existing-file-preview img { width:100%; height:100%; object-fit:cover; }
.existing-file-preview i { font-size:20px; color:#C0392B; }
.existing-file-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.existing-file-info span:first-child { font-size:12px; font-weight:600; color:#2D3748; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.existing-file-info a { font-size:11px; color:#2E6DA4; text-decoration:none; }
.existing-file-info a:hover { text-decoration:underline; }
.existing-file-remove, .new-file-remove, .additional-doc-remove, .additional-doc-new-remove { display:flex; align-items:center; justify-content:center; gap:5px; border:1.5px solid #F2B4AC; background:#FDECEA; padding:6px 10px; border-radius:6px; cursor:pointer; color:#C0392B; font-size:15px; line-height:1; flex-shrink:0; transition:all .2s; }
.existing-file-remove i, .new-file-remove i, .additional-doc-remove i, .additional-doc-new-remove i { font-size:15px; }
.existing-file-remove::after, .new-file-remove::after, .additional-doc-remove::after, .additional-doc-new-remove::after { content:"Verwijderen"; font-size:12px; font-weight:600; white-space:nowrap; }
.existing-file-remove:hover, .new-file-remove:hover, .additional-doc-remove:hover, .additional-doc-new-remove:hover { color:#fff; background:#C0392B; border-color:#C0392B; }
.new-file-preview:empty { display:none !important; }

/* Action grid (index page) */
.action-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; margin:24px 0; }
.action-card { background:#fff; border-radius:10px; padding:28px 22px; text-align:center; cursor:pointer; transition:all .25s; border:1.5px solid #DDE2EA; text-decoration:none; display:block; }
.action-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(27,58,92,.14); border-color:#9EB3CB; text-decoration:none; }
.action-card .ac-icon { width:60px; height:60px; background:linear-gradient(135deg,#1B3A5C,#2E6DA4); border-radius:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:24px; color:#fff; }
.action-card h4 { font-size:14px; font-weight:700; color:#1B3A5C; margin:0 0 8px; }
.action-card p  { font-size:12px; color:#718096; margin:0 0 18px; line-height:1.5; min-height:50px; }
.action-card .btn { font-size:12px; padding:7px 16px; width:100%; }

/* Fee table */
.fee-table { width:100%; border-collapse:collapse; font-size:13px; }
.fee-table th { background:#1B3A5C; color:#fff; padding:12px 16px; text-align:left; font-weight:600; }
.fee-table td { padding:10px 16px; border-bottom:1px solid #DDE2EA; }
.fee-table tbody tr:hover { background:#F4F6F9; }
.fee-table tfoot td { background:#EBF4FC; font-weight:600; border-bottom:none; }

/* Validatiefouten: lege verplichte velden die het submitten blokkeren
   kleuren rood, zodat de aanvrager direct ziet wat er ontbreekt */
.has-error .form-control,
.has-error .form-select {
    border-color:#E53E3E !important;
    background-color:#FFF5F5;
}
.has-error .form-control:focus,
.has-error .form-select:focus {
    border-color:#E53E3E !important;
    box-shadow:0 0 0 3px rgba(229,62,62,.15) !important;
}
.has-error label { color:#C53030; }
.has-error .form-label { color:#C53030; }
.help-block { color:#C53030; font-size:12px; margin-top:4px; font-weight:600; }

/* Ontbrekende verplichte uploads */
.upload-missing .file-input-label {
    border-color:#E53E3E !important;
    border-style:solid;
    background:#FFF5F5;
    color:#C53030;
}
.upload-missing .file-input-label i { color:#E53E3E; }
.upload-error { color:#C53030; font-size:12px; margin-top:5px; font-weight:600; }

/* Ontbrekende toestemmingsverklaring (zegel, logo-weergave, ...) */
.consent-box.consent-missing {
    border-color:#E53E3E !important;
    background:#FFF5F5 !important;
}

/* Groepstoestand: groen zodra er een bestand is (nieuw of reeds geüpload) */
.file-field-group.has-file > .file-input-wrapper .file-input-label {
    border-color:#38A169;
    border-style:solid;
    background:#F0FFF4;
    color:#276749;
}
.file-field-group.has-file > .file-input-wrapper .file-input-label i { color:#38A169; }

/* Voorbeeldweergave van een upload (o.a. betalingsbewijs) */
.upload-preview { margin-top:8px; border:1px solid #DDE2EA; border-radius:8px; padding:10px; background:#fff; }
.upload-preview-title { font-size:11px; font-weight:700; color:#4A5568; text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
.upload-preview-frame { width:100%; height:320px; border:1px solid #EDF2F7; border-radius:6px; }
.upload-preview img { max-width:100%; max-height:320px; display:block; margin:0 auto; border:1px solid #EDF2F7; border-radius:6px; }

/* Logo-voorbeeldweergave (Certificaat/OR) */
.logo-preview-img { display:block; max-width:none; }

/* Publicatielijst: kaarten i.p.v. tabel op mobiel */
.publication-card-list { display:none; }
.publication-card { border:1px solid #DDE2EA; border-radius:10px; padding:14px 16px; margin-bottom:10px; }
.publication-card:last-child { margin-bottom:0; }
.publication-card-title { display:flex; align-items:flex-start; gap:8px; font-weight:600; color:#1B3A5C; font-size:14px; line-height:1.4; margin-bottom:10px; }
.publication-card-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.publication-card-date { font-size:13px; color:#718096; display:flex; align-items:center; gap:6px; }

/* Responsive */
@media (max-width:768px) {
    .trademark-card-body { padding:16px; }
    .trademark-header { padding:24px 18px; }
    .trademark-header h1 { font-size:1.4rem; }
    .action-grid { grid-template-columns:1fr 1fr; gap:12px; }
    .action-card { padding:18px 12px; }

    .publication-table-wrap { display:none; }
    .publication-card-list { display:block; }
}
@media (max-width:480px) {
    .action-grid { grid-template-columns:1fr; }
}