/* ============================================================
   country-visa.css
   Destination To Plan | destinationtoplan.com
   Non-Schengen country hub additions — loaded after visa-country.css.

   Contains components that exist on non-Schengen country hub pages
   but are absent from visa-country.css (universal library):
     - .note-box             — red critical warning box
     - .step-tag.conditional — amber tag for conditional steps
     - .case-profile-*       — applicant profile cards (GTE/assessment)

   Load order for country hub pages:
     /css/style.css
     /css/visa-country.css
     /css/country-visa.css   ← this file
   ============================================================ */

/* ============================================================
   NOTE BOX — red critical warning / important notice
   ============================================================ */
.note-box {
    display: flex; flex-direction: column; align-items: center;
    background: #FFF5F5; border: 1px solid #FECACA;
    border-radius: var(--radius-md); padding: 14px 18px; margin-top: 12px;
}
.note-box-head {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px; justify-content: center;
}
.note-box-head svg { flex-shrink: 0; }
.note-box-label {
    font-weight: 700; font-size: 0.82rem; color: #C0152A;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.note-box-body {
    font-size: 0.82rem; color: #7B1020; line-height: 1.72;
    text-align: justify; hyphens: auto; text-align-last: left; width: 100%;
}

/* ============================================================
   STEP TAG — conditional variant (amber)
   Base .step-tag defined in visa-country.css
   ============================================================ */
.step-tag.conditional { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }

/* ============================================================
   CASE PROFILE CARDS — applicant assessment examples
   ============================================================ */
.case-profiles-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
}
.case-profile-card {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
}
.case-profile-head {
    padding: 14px 18px; display: flex; align-items: flex-start;
    justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.case-profile-head.blue   { background: #E6F1FB; border-bottom: 1px solid #B5D4F4; }
.case-profile-head.green  { background: #ECFDF5; border-bottom: 1px solid #A7F3D0; }
.case-profile-head.amber  { background: #FAEEDA; border-bottom: 1px solid #c8a96e; }
.case-profile-label { font-size: 0.9rem; font-weight: 700; }
.case-profile-head.blue  .case-profile-label { color: #0C447C; }
.case-profile-head.green .case-profile-label { color: #065F46; }
.case-profile-head.amber .case-profile-label { color: #854F0B; }
.case-profile-city { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.case-profile-tag {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; padding: 3px 9px; border-radius: 9999px;
    white-space: nowrap; flex-shrink: 0;
}
.case-profile-head.blue  .case-profile-tag { background: rgba(0,35,149,0.1); color: #002395; }
.case-profile-head.green .case-profile-tag { background: rgba(5,150,105,0.1); color: #065F46; }
.case-profile-head.amber .case-profile-tag { background: rgba(200,169,110,0.15); color: #854F0B; }
.case-profile-body { padding: 14px 18px; }
.case-profile-row {
    display: flex; gap: 8px; font-size: 0.83rem;
    padding: 7px 0; border-bottom: 1px solid var(--border);
}
.case-profile-row:last-of-type { border-bottom: none; }
.case-profile-key { min-width: 110px; font-weight: 600; color: var(--text-primary); flex-shrink: 0; }
.case-profile-val { color: var(--text-secondary); line-height: 1.6; }
.case-profile-assessment {
    margin-top: 12px; padding: 10px 14px;
    background: #FAF6EE; border-radius: var(--radius-sm);
    border-left: 3px solid #a8894e;
}
.case-profile-assessment-label {
    font-size: 0.72rem; font-weight: 700; color: #a8894e;
    text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px;
}
.case-profile-assessment-note {
    font-size: 0.82rem; color: var(--text-secondary); line-height: 1.65;
    text-align: justify; hyphens: auto; text-align-last: left;
}
@media (max-width: 600px) { .case-profile-key { min-width: 90px; } }