/* CLINICAL PROTOCOLS - NEW DESIGN */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --color-primary: #0d9488;
  --color-primary-dark: #0f766e;
  --color-primary-light: #14b8a6;
  --color-primary-50: #f0fdfa;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-emerald: #059669;
  --color-blue: #2563eb;
  --color-amber: #f59e0b;
  --font-primary: 'Source Sans 3', sans-serif;
  --font-display: 'Playfair Display', serif;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
}

body { font-family: var(--font-primary); background: linear-gradient(to bottom, var(--color-slate-50), white); }

.header { background: rgba(255,255,255,0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-slate-100); position: sticky; top: 0; z-index: 50; }
.header-container { max-width: 1280px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.header-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.header-logo-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(13,148,136,0.25); }
.header-logo-icon i { color: white; font-size: 1.25rem; }
.header-logo-title { font-weight: 700; color: var(--color-slate-800); font-size: 1.125rem; }
.header-logo-subtitle { font-size: 0.75rem; color: var(--color-slate-400); }
.header-nav { display: flex; align-items: center; gap: 2rem; }
.header-nav a { color: var(--color-slate-600); text-decoration: none; font-weight: 500; }
.header-nav a:hover { color: var(--color-primary); }
.btn-login { padding: 0.625rem 1.25rem; background: var(--color-slate-800); color: white !important; border-radius: var(--radius-xl); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-login:hover { background: var(--color-slate-700); }

.hero { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-light)); color: white; padding: 5rem 0; position: relative; overflow: hidden; }
.hero-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.hero-content { text-align: center; max-width: 768px; margin: 0 auto 3rem; }
.hero-title { font-family: var(--font-display); font-size: 3rem; font-weight: 700; margin-bottom: 1rem; }
.hero-title span { display: block; color: rgba(153,246,228,0.9); margin-top: 0.5rem; }
.hero-description { color: rgba(153,246,228,0.9); font-size: 1.125rem; }

.search-box { max-width: 896px; margin: 0 auto 3rem; }
.search-box-inner { background: white; border-radius: var(--radius-2xl); padding: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.search-input-wrapper { flex: 1; min-width: 200px; position: relative; }
.search-input-wrapper i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--color-slate-400); }
.search-input { width: 100%; padding: 1rem 1rem 1rem 3rem; border: none; border-radius: var(--radius-xl); font-size: 1rem; }
.search-input:focus { outline: none; box-shadow: 0 0 0 4px rgba(20,184,166,0.15); }
.search-select { padding: 1rem; border: none; border-radius: var(--radius-xl); background: var(--color-slate-50); color: var(--color-slate-600); cursor: pointer; }
.btn-search { padding: 1rem 2rem; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: white; border: none; border-radius: var(--radius-xl); font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }

.stats { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.stat-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-2xl); padding: 1.25rem 2rem; text-align: center; }
.stat-card i { color: rgba(153,246,228,0.9); font-size: 1.5rem; margin-bottom: 0.5rem; display: block; }
.stat-value { font-size: 1.875rem; font-weight: 700; }
.stat-label { color: rgba(153,246,228,0.9); font-size: 0.875rem; }

.specializations-bar { padding: 1.5rem 0; background: white; }
.specializations-list { max-width: 1280px; scrollbar-width: none; -ms-overflow-style: none; scrollbar-width: none; -ms-overflow-style: none; margin: 0 auto; padding: 0 1.5rem; display: flex; gap: 0.75rem; overflow-x: auto; }
.spec-tag { padding: 0.5rem 1rem; border-radius: var(--radius-full); background: var(--color-slate-100); color: var(--color-slate-600); font-size: 0.875rem; font-weight: 500; white-space: nowrap; border: none; cursor: pointer; text-decoration: none; }
.spec-tag:hover, .spec-tag.active { background: var(--color-primary); color: white; }

.protocols-section { padding: 4rem 0; }
.protocols-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.protocols-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem; }
.protocols-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-slate-800); }
.protocols-count { color: var(--color-slate-500); font-size: 0.875rem; }
.filter-group { display: flex; align-items: center; gap: 0.75rem; }
.filter-label { color: var(--color-slate-500); font-size: 0.875rem; }
.filter-select { padding: 0.5rem 1rem; border-radius: var(--radius-lg); background: var(--color-slate-100); border: none; font-size: 0.875rem; }

.protocols-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 768px) { .protocols-grid { grid-template-columns: 1fr; } }

.protocol-card { background: white; border-radius: var(--radius-2xl); border: 1px solid var(--color-slate-100); overflow: hidden; transition: all 0.3s ease; }
.protocol-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); }
.protocol-card-body { padding: 1.5rem; }
.protocol-card-header { display: flex; justify-content: space-between; margin-bottom: 1rem; }

.badge { padding: 0.375rem 0.75rem; border-radius: var(--radius-lg); font-size: 0.75rem; font-weight: 600; color: white; }
.badge-protocol { background: linear-gradient(135deg, var(--color-emerald), #10b981); }
.badge-standard { background: linear-gradient(135deg, var(--color-blue), #3b82f6); }
.badge-mkb { background: linear-gradient(135deg, var(--color-amber), #fbbf24); }

.protocol-card-title { font-size: 1.25rem; font-weight: 700; color: var(--color-slate-800); margin-bottom: 0.5rem; }
.protocol-card:hover .protocol-card-title { color: var(--color-primary); }
.protocol-card-description { color: var(--color-slate-500); font-size: 0.875rem; margin-bottom: 1rem; }

.protocol-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.tag { padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; }
.tag-primary { background: var(--color-primary-50); color: var(--color-primary-dark); }
.tag-default { background: var(--color-slate-100); color: var(--color-slate-600); }

.protocol-card-footer { display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--color-slate-100); }
.protocol-meta { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--color-slate-400); }
.btn-details { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--color-primary); font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.btn-details:hover { gap: 0.5rem; }

.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem; }
.pagination-btn { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); border: none; font-weight: 500; cursor: pointer; }
.pagination-btn.active { background: var(--color-primary); color: white; }
.pagination-btn:not(.active) { background: var(--color-slate-100); color: var(--color-slate-600); }

.footer { background: var(--color-slate-800); color: white; padding: 4rem 0 0; }
.footer-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.footer-brand-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary)); display: flex; align-items: center; justify-content: center; }
.footer-brand-icon i { color: white; font-size: 1.25rem; }
.footer-brand-name { font-weight: 700; font-size: 1.25rem; }
.footer-description { color: var(--color-slate-400); margin-bottom: 1.5rem; }
.footer-ministry { display: flex; align-items: center; gap: 0.75rem; color: var(--color-slate-300); }
.footer-ministry i { color: var(--color-primary-light); }
.footer-title { font-weight: 600; font-size: 1.125rem; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a { color: var(--color-slate-400); text-decoration: none; }
.footer-links a:hover { color: var(--color-primary-light); }
.footer-contact-item { display: flex; align-items: center; gap: 0.75rem; color: var(--color-slate-400); margin-bottom: 0.75rem; }
.footer-contact-item i { color: var(--color-primary-light); }
.footer-bottom { border-top: 1px solid var(--color-slate-700); margin-top: 3rem; padding: 2rem 0; text-align: center; color: var(--color-slate-500); font-size: 0.875rem; }

@media (max-width: 1024px) {
  .hero-title { font-size: 2.5rem; }
  .search-box-inner { flex-direction: column; }
  .btn-search { width: 100%; justify-content: center; }
}
@media (max-width: 768px) {
  .header-nav { display: none; }
  .hero { padding: 3rem 0; }
  .hero-title { font-size: 2rem; }
}
.specializations-list::-webkit-scrollbar { display: none; }
.specializations-list::-webkit-scrollbar { display: none; }

.tag-care { background: var(--color-primary-50); color: var(--color-primary-dark); }
.tag-age { background: #dcfce7; color: #166534; }
.tag-spec { background: #ffedd5; color: #c2410c; }
.tag-specialist { background: var(--color-slate-100); color: var(--color-slate-600); }