/*
 * CV ATS Friendly RBB 2026 — Stylesheet Utama
 * Plugin: cv-ats-rbb
 * Version: 1.0.0
 */

/* ════════════════════════════════════════════════
   VARIABEL & RESET
   ════════════════════════════════════════════════ */
.cvrbb-wrapper {
    --clr-primary:   #1a56db;
    --clr-primary-d: #1342af;
    --clr-accent:    #f59e0b;
    --clr-success:   #10b981;
    --clr-danger:    #ef4444;
    --clr-bg:        #f0f4ff;
    --clr-card:      #ffffff;
    --clr-border:    #d1d5db;
    --clr-text:      #111827;
    --clr-muted:     #6b7280;
    --clr-hint:      #4b5563;
    --radius:        10px;
    --shadow:        0 2px 12px rgba(26,86,219,0.10);
    --shadow-lg:     0 8px 32px rgba(26,86,219,0.15);
    font-family: 'Poppins', sans-serif;
    color: var(--clr-text);
    line-height: 1.6;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 0 48px;
}

.cvrbb-wrapper *,
.cvrbb-wrapper *::before,
.cvrbb-wrapper *::after {
    box-sizing: border-box;
}

/* ════════════════════════════════════════════════
   APP HEADER
   ════════════════════════════════════════════════ */
.cvrbb-app-header {
    background: linear-gradient(135deg, #1a56db 0%, #3b82f6 50%, #06b6d4 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
}
.cvrbb-app-header::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 200px; height: 200px;
    background: rgba(255,255,255,0.07);
    border-radius: 50%;
}
.cvrbb-app-header__badge {
    display: inline-block;
    background: var(--clr-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.cvrbb-app-header__title {
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.2;
}
.cvrbb-app-header__sub {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    margin: 0;
}

/* ════════════════════════════════════════════════
   PROGRESS STEPS
   ════════════════════════════════════════════════ */
.cvrbb-steps {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none; /* Sembunyikan scrollbar di Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.cvrbb-steps::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.cvrbb-step {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: var(--clr-card);
    border: 2px solid var(--clr-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
    color: var(--clr-muted);
}
.cvrbb-step:hover {
    border-color: var(--clr-primary);
    color: var(--clr-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.cvrbb-step--active {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    color: #fff !important;
    box-shadow: var(--shadow-lg);
}
.cvrbb-step--done {
    background: #ecfdf5;
    border-color: var(--clr-success);
    color: var(--clr-success);
}
.cvrbb-step__icon { font-size: 20px; line-height: 1; }
.cvrbb-step__num  { font-size: 11px; font-weight: 700; }
.cvrbb-step__label { font-size: 11px; text-align: center; }

/* ════════════════════════════════════════════════
   PANEL FORM
   ════════════════════════════════════════════════ */
.cvrbb-form-container {
    background: var(--clr-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 32px;
    margin-bottom: 32px;
}

.cvrbb-panel { display: none; }
.cvrbb-panel--active { display: block; animation: cvrbb-fadein 0.3s ease; }

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

.cvrbb-panel__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--clr-primary);
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid var(--clr-bg);
    padding-bottom: 12px;
}
.cvrbb-required-note {
    font-size: 12px;
    font-weight: 400;
    color: var(--clr-muted);
    margin-left: auto;
}
.cvrbb-panel__desc {
    background: #eff6ff;
    border-left: 3px solid var(--clr-primary);
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: var(--clr-hint);
    margin-bottom: 20px;
}

/* ════════════════════════════════════════════════
   FIELD GRID & INPUTS
   ════════════════════════════════════════════════ */
.cvrbb-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.cvrbb-field--full { grid-column: 1 / -1; }

.cvrbb-field { display: flex; flex-direction: column; gap: 5px; }
.cvrbb-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-hint);
}
.cvrbb-req { color: var(--clr-danger); }

.cvrbb-field input,
.cvrbb-field select,
.cvrbb-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--clr-border);
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: var(--clr-text);
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.cvrbb-field input:focus,
.cvrbb-field select:focus,
.cvrbb-field textarea:focus {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,0.12);
    background: #fff;
}
.cvrbb-field textarea { resize: vertical; min-height: 90px; }
.cvrbb-hint {
    font-size: 11.5px;
    color: var(--clr-muted);
    font-style: italic;
}
.cvrbb-char-count {
    font-size: 11px;
    color: var(--clr-muted);
    text-align: right;
}

/* ════════════════════════════════════════════════
   ENTRY CARDS (Pendidikan / Pengalaman)
   ════════════════════════════════════════════════ */
.cvrbb-entry-card {
    background: var(--clr-bg);
    border: 1px solid #c7d2fe;
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
}
.cvrbb-entry-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.cvrbb-entry-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--clr-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cvrbb-entry-card__remove {
    background: #fee2e2;
    border: none;
    color: var(--clr-danger);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: background 0.2s;
}
.cvrbb-entry-card__remove:hover { background: #fecaca; }

/* Sertifikasi baris */
.cvrbb-cert-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.cvrbb-cert-row .cvrbb-cert-name   { flex: 2; min-width: 150px; }
.cvrbb-cert-row .cvrbb-cert-issuer { flex: 2; min-width: 120px; }
.cvrbb-cert-row .cvrbb-cert-year   { flex: 0 0 80px; }
.cvrbb-cert-remove {
    background: #fee2e2;
    border: none;
    color: var(--clr-danger);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
}

/* ════════════════════════════════════════════════
   TOMBOL
   ════════════════════════════════════════════════ */
.cvrbb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 22px;
    min-height: 44px; /* Touch target minimum */
    border: none;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent; /* Hapus flash biru di Android */
}
.cvrbb-btn--next,
.cvrbb-btn--generate {
    background: var(--clr-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(26,86,219,0.3);
}
.cvrbb-btn--next:hover,
.cvrbb-btn--generate:hover {
    background: var(--clr-primary-d);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(26,86,219,0.35);
}
.cvrbb-btn--generate {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    box-shadow: 0 4px 12px rgba(79,70,229,0.35);
    font-size: 15px;
    padding: 13px 28px;
}
.cvrbb-btn--generate:hover { transform: translateY(-2px); filter: brightness(1.1); }

.cvrbb-btn--prev {
    background: #f3f4f6;
    color: var(--clr-hint);
}
.cvrbb-btn--prev:hover { background: #e5e7eb; }

.cvrbb-btn--add {
    background: #ecfdf5;
    color: var(--clr-success);
    border: 2px dashed var(--clr-success);
    font-size: 13px;
    padding: 10px 20px;
    margin-top: 8px;
    min-height: 44px; /* Touch target minimum */
}
.cvrbb-btn--add:hover { background: #d1fae5; }

.cvrbb-btn--print {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245,158,11,0.4);
    font-size: 15px;
    padding: 12px 26px;
}
.cvrbb-btn--print:hover { filter: brightness(1.08); transform: translateY(-1px); }

.cvrbb-btn--edit {
    background: #f3f4f6;
    color: var(--clr-hint);
    padding: 12px 22px;
}

.cvrbb-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--clr-bg);
    gap: 12px;
    flex-wrap: wrap;
}
.cvrbb-nav--bottom { margin-top: 24px; }

.cvrbb-action-bar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.cvrbb-print-hint {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 20px;
    line-height: 1.7;
}

/* ════════════════════════════════════════════════
   TIPS BOX
   ════════════════════════════════════════════════ */
.cvrbb-tips-box {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 32px;
}
.cvrbb-tips-box__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--clr-text);
}
.cvrbb-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
/* Bright cards — wajib sesuai standar desain */
.cvrbb-tip-card {
    padding: 18px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
}
.cvrbb-tip-card p { margin: 6px 0 0; color: inherit; opacity: 0.85; }
.cvrbb-tip-card strong { display: block; font-size: 14px; }
.cvrbb-tip-card__icon { font-size: 24px; margin-bottom: 8px; }

.cvrbb-tip-card--orange { background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #9a3412; border: 1px solid #fed7aa; }
.cvrbb-tip-card--green  { background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #14532d; border: 1px solid #bbf7d0; }
.cvrbb-tip-card--blue   { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1e3a8a; border: 1px solid #bfdbfe; }
.cvrbb-tip-card--purple { background: linear-gradient(135deg, #faf5ff, #ede9fe); color: #4c1d95; border: 1px solid #ddd6fe; }

/* ════════════════════════════════════════════════
   CV PREVIEW OUTPUT
   ════════════════════════════════════════════════ */
.cvrbb-cv-preview {
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    font-family: 'Source Serif 4', 'Georgia', serif;
}

/* Struktur dokumen CV */
#cvrbb-cv-doc {
    max-width: 794px; /* A4 */
    margin: 0 auto;
    padding: 48px 52px;
    background: #fff;
    font-size: 13px;
    line-height: 1.65;
    color: #1a1a1a;
}

/* Header CV */
.cv-header {
    border-bottom: 3px solid #1a56db;
    padding-bottom: 18px;
    margin-bottom: 22px;
}
.cv-name {
    font-size: 26px;
    font-weight: 700;
    color: #1a56db;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.3px;
    margin: 0 0 4px;
}
.cv-position {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    font-family: 'Poppins', sans-serif;
    margin: 0 0 12px;
}
.cv-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    font-size: 12px;
    color: #4b5563;
    font-family: 'Poppins', sans-serif;
}
.cv-contacts span::before { content: ''; }

/* Seksi CV */
.cv-section { margin-bottom: 20px; }
.cv-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #1a56db;
    font-family: 'Poppins', sans-serif;
    border-bottom: 1.5px solid #dbeafe;
    padding-bottom: 5px;
    margin-bottom: 12px;
}

/* Ringkasan */
.cv-summary {
    font-size: 13px;
    color: #374151;
    line-height: 1.7;
    text-align: justify;
}

/* Entry Pendidikan & Pengalaman */
.cv-entry { margin-bottom: 14px; }
.cv-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.cv-entry-title {
    font-weight: 700;
    font-size: 13.5px;
    color: #111827;
    font-family: 'Poppins', sans-serif;
}
.cv-entry-sub {
    font-size: 12.5px;
    color: #4b5563;
    font-family: 'Poppins', sans-serif;
}
.cv-entry-period {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
}
.cv-entry-desc {
    font-size: 12.5px;
    color: #374151;
    margin-top: 4px;
    white-space: pre-line;
    line-height: 1.7;
}

/* Keahlian */
.cv-skills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.cv-skill-tag {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
.cv-skill-tag--soft {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}
.cv-lang-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
}
.cv-lang-item { display: flex; align-items: center; gap: 6px; }
.cv-lang-badge {
    background: #dbeafe;
    color: #1e3a8a;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* Sertifikasi */
.cv-cert-item {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    padding: 3px 0;
    border-bottom: 1px dotted #e5e7eb;
    font-family: 'Poppins', sans-serif;
}
.cv-cert-item:last-child { border-bottom: none; }
.cv-cert-name { font-weight: 600; color: #111827; }
.cv-cert-meta { color: #6b7280; }

/* Footer CV */
.cv-footer {
    margin-top: 28px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    text-align: right;
    font-size: 10px;
    color: #9ca3af;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
}

/* ════════════════════════════════════════════════
   RESPONSIVE — Mobile First (v1.5.0)
   ════════════════════════════════════════════════ */

/* ── Tablet (≤768px) ── */
@media (max-width: 768px) {
    .cvrbb-wrapper {
        padding: 0 0 32px;
    }
    .cvrbb-app-header {
        padding: 28px 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .cvrbb-app-header__title { font-size: 22px; }
    .cvrbb-tips-grid { grid-template-columns: 1fr 1fr; }
    .cvrbb-tips-box { padding: 20px; }
}

/* ── Mobile (≤640px) ── */
@media (max-width: 640px) {

    /* Form container */
    .cvrbb-form-container {
        padding: 18px 14px;
        border-radius: 10px;
    }

    /* Field grid — 1 kolom di mobile */
    .cvrbb-field-grid { grid-template-columns: 1fr; }
    .cvrbb-field--full { grid-column: 1; }

    /* Input & textarea lebih besar untuk touch */
    .cvrbb-field input,
    .cvrbb-field select,
    .cvrbb-field textarea {
        padding: 12px 14px;
        font-size: 15px; /* Cegah zoom otomatis iOS */
        border-radius: 10px;
    }
    .cvrbb-field label { font-size: 13px; }
    .cvrbb-field textarea { min-height: 100px; }

    /* Step indicator — lebih compact */
    .cvrbb-steps {
        gap: 5px;
        padding-bottom: 6px;
        margin-bottom: 16px;
    }
    .cvrbb-step {
        min-width: 56px;
        padding: 10px 5px;
        border-radius: 8px;
        gap: 2px;
    }
    .cvrbb-step__label { display: none; }
    .cvrbb-step__icon { font-size: 18px; }
    .cvrbb-step__num {
        font-size: 10px;
        background: rgba(0,0,0,.06);
        border-radius: 10px;
        padding: 1px 5px;
    }
    .cvrbb-step--active .cvrbb-step__num {
        background: rgba(255,255,255,.25);
    }

    /* Panel title */
    .cvrbb-panel__title {
        font-size: 17px;
        margin-bottom: 16px;
        padding-bottom: 10px;
        gap: 8px;
    }

    /* Foto row — stack vertikal */
    .cvrbb-photo-row {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .cvrbb-photo-row > div:last-child {
        width: 100%;
    }
    .cvrbb-photo-upload { width: 100%; align-items: center; }
    .cvrbb-photo-label {
        width: 100px;
        height: 128px;
    }

    /* Navigasi tombol — stack vertikal */
    .cvrbb-nav {
        flex-direction: column-reverse;
        gap: 10px;
        padding-top: 16px;
        margin-top: 20px;
    }
    .cvrbb-nav .cvrbb-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 15px;
        border-radius: 10px;
    }
    .cvrbb-btn--generate {
        width: 100%;
        padding: 15px 20px;
        font-size: 15px;
        border-radius: 10px;
        justify-content: center;
    }

    /* Action bar cetak */
    .cvrbb-action-bar {
        flex-direction: column;
        gap: 10px;
    }
    .cvrbb-action-bar .cvrbb-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 15px;
    }

    /* Print hint lebih compact */
    .cvrbb-print-hint {
        font-size: 12px;
        padding: 10px 12px;
    }

    /* Entry cards */
    .cvrbb-entry-card { padding: 14px; }
    .cvrbb-entry-card__header { margin-bottom: 12px; }

    /* Cert row stack */
    .cvrbb-cert-row {
        flex-wrap: wrap;
    }
    .cvrbb-cert-row .cvrbb-cert-name,
    .cvrbb-cert-row .cvrbb-cert-issuer { min-width: 100%; }
    .cvrbb-cert-row .cvrbb-cert-year { width: 100px !important; }

    /* Section divider */
    .cvrbb-section-divider { font-size: 12px; padding: 7px 12px; }

    /* Tips box */
    .cvrbb-tips-box { padding: 16px; }
    .cvrbb-tips-box__title { font-size: 15px; margin-bottom: 14px; }
    .cvrbb-tips-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cvrbb-tip-card { padding: 12px; font-size: 12px; }
    .cvrbb-tip-card__icon { font-size: 20px; margin-bottom: 6px; }

    /* CV Preview */
    .cvrbb-cv-preview { border-radius: 6px; }
    #cvrbb-cv-doc {
        padding: 20px 16px;
        font-size: 12px;
    }
    .cv-name { font-size: 20px !important; }
    .cv-header-inner { flex-direction: row; gap: 12px; }
    .cv-photo { width: 70px !important; height: 90px !important; }
    .cv-personal-grid { grid-template-columns: 1fr !important; }
    .cv-entry-header { flex-direction: column; gap: 2px; }
    .cv-entry-period {
        font-size: 11px;
        align-self: flex-start;
    }
    .cv-skills-row { gap: 4px; }
    .cv-skill-tag { font-size: 11px; padding: 2px 8px; }

    /* BUMN tips box */
    #cvrbb-bumn-tips-box > div { border-radius: 10px !important; }
}

/* ── Small mobile (≤400px) ── */
@media (max-width: 400px) {
    .cvrbb-tips-grid { grid-template-columns: 1fr; }
    .cvrbb-steps { gap: 3px; }
    .cvrbb-step { min-width: 48px; }
    .cvrbb-app-header__title { font-size: 19px; }
    .cvrbb-app-header__sub { font-size: 12px; }
}

/*
 * PRINT / PDF
 * Pendekatan: JS membuka popup window baru yang HANYA berisi HTML CV.
 * Tema WordPress, breadcrumb, header, footer — tidak pernah masuk popup.
 * CSS @media print di sini hanya berlaku DI DALAM popup window tersebut.
 */
@media print {
    body {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }
    #cvrbb-cv-doc {
        padding: 0 !important;
        max-width: 100% !important;
        font-size: 12.5px !important;
    }
    .cv-section { page-break-inside: avoid; }
    @page {
        size: A4;
        margin: 16mm 14mm;
    }
}


/* ════════════════════════════════════════════════
   FOTO UPLOAD (v1.2.0)
   ════════════════════════════════════════════════ */
.cvrbb-photo-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 20px;
}
.cvrbb-photo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.cvrbb-photo-label {
    display: flex;
    width: 110px;
    height: 140px;
    border: 2px dashed var(--clr-border);
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    background: #f8faff;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s;
    text-align: center;
    flex-direction: column;
}
.cvrbb-photo-label:hover { border-color: var(--clr-primary); }
.cvrbb-photo-placeholder {
    font-size: 13px;
    color: var(--clr-muted);
    line-height: 1.5;
    pointer-events: none;
}

/* Section divider */
.cvrbb-section-divider {
    font-size: 13px;
    font-weight: 700;
    color: var(--clr-primary);
    background: #eff6ff;
    border-left: 3px solid var(--clr-primary);
    padding: 8px 14px;
    border-radius: 0 6px 6px 0;
    margin: 20px 0 14px;
}

/* Responsive foto */
@media (max-width: 480px) {
    .cvrbb-photo-row {
        flex-direction: column;
        align-items: center;
    }
    .cvrbb-photo-row > .cvrbb-field-grid {
        width: 100%;
    }
}

/* ════════════════════════════════════════════════
   CV PREVIEW — Foto & Data Pribadi (v1.2.0)
   ════════════════════════════════════════════════ */
.cvrbb-cv-preview .cv-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.cvrbb-cv-preview .cv-header-info { flex: 1; }
.cvrbb-cv-preview .cv-photo {
    width: 90px;
    height: 115px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.cvrbb-cv-preview .cv-personal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}
.cvrbb-cv-preview .cv-personal-item {
    display: flex;
    gap: 8px;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    padding: 2px 0;
}
.cvrbb-cv-preview .cv-personal-item--full { grid-column: 1 / -1; }
.cvrbb-cv-preview .cv-pi-label {
    font-weight: 600;
    color: #374151;
    min-width: 130px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════
   TEMPLATE PICKER (v1.4.0)
   ════════════════════════════════════════════════ */
.cvrbb-template-picker {
    margin-bottom: 20px;
    padding: 16px;
    background: #f8faff;
    border-radius: 10px;
    border: 1px solid #dbeafe;
}
.cvrbb-template-picker__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--clr-hint);
    margin-bottom: 12px;
}
.cvrbb-template-picker__options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.cvrbb-tpl-option {
    flex: 1;
    min-width: 120px;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    background: #fff;
    border: 2px solid var(--clr-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.cvrbb-tpl-option input[type="radio"] { display: none; }
.cvrbb-tpl-option:hover { border-color: var(--clr-primary); transform: translateY(-2px); }
.cvrbb-tpl-option--active { border-color: var(--clr-primary); background: #eff6ff; box-shadow: 0 2px 8px rgba(26,86,219,0.15); }

/* Miniatur preview template */
.cvrbb-tpl-preview {
    width: 80px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 5px;
    border: 1px solid #e5e7eb;
}
.cvrbb-tpl-preview--modern { background: linear-gradient(to bottom, #1a56db 35%, #fff 35%); }
.cvrbb-tpl-preview--classic { background: #fff; border-top: 4px solid #111; }
.cvrbb-tpl-preview--minimal {
    flex-direction: row;
    padding: 0;
    gap: 0;
}
.tpl-bar { height: 16px; background: rgba(255,255,255,0.3); border-radius: 2px; margin-bottom: 2px; }
.cvrbb-tpl-preview--classic .tpl-bar { background: #e5e7eb; }
.tpl-line { height: 4px; background: rgba(255,255,255,0.5); border-radius: 2px; }
.cvrbb-tpl-preview--classic .tpl-line { background: #d1d5db; }
.tpl-line--short { width: 60%; }
.tpl-sidebar { width: 28px; background: #065f46; flex-shrink: 0; height: 100%; border-radius: 3px 0 0 3px; }
.tpl-content { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 5px; }
.tpl-content .tpl-line { background: #d1fae5; }

.cvrbb-tpl-name { font-size: 12px; font-weight: 700; color: var(--clr-text); }
.cvrbb-tpl-desc { font-size: 10px; color: var(--clr-muted); }

/* ════════════════════════════════════════════════
   MOBILE UX — Touch & iOS Fixes (v1.5.0)
   ════════════════════════════════════════════════ */

/* Cegah auto-zoom saat tap input di iOS (min font-size 16px) */
@media (max-width: 640px) {
    .cvrbb-wrapper input[type="text"],
    .cvrbb-wrapper input[type="email"],
    .cvrbb-wrapper input[type="tel"],
    .cvrbb-wrapper input[type="url"],
    .cvrbb-wrapper input[type="number"],
    .cvrbb-wrapper input[type="date"],
    .cvrbb-wrapper select,
    .cvrbb-wrapper textarea {
        font-size: 16px !important;
    }
}

/* Progress bar di bawah steps untuk indikasi kemajuan */
.cvrbb-progress-bar {
    height: 3px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-bottom: 20px;
    overflow: hidden;
}
.cvrbb-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #1a56db, #06b6d4);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Floating save indicator */
.cvrbb-autosave-indicator {
    position: fixed;
    bottom: 20px;
    right: 16px;
    background: #065f46;
    color: #fff;
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 999;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}
.cvrbb-autosave-indicator--show {
    opacity: 1;
    transform: translateY(0);
}

/* Perbaiki cert row di mobile */
@media (max-width: 500px) {
    .cvrbb-cert-row {
        display: grid;
        grid-template-columns: 1fr 80px;
        gap: 6px;
    }
    .cvrbb-cert-row .cvrbb-cert-name {
        grid-column: 1 / -1;
    }
    .cvrbb-cert-row .cvrbb-cert-issuer {
        grid-column: 1;
    }
    .cvrbb-cert-row .cvrbb-cert-year {
        width: 100% !important;
        grid-column: 2;
    }
    .cvrbb-cert-remove {
        grid-column: 1 / -1;
        width: 100%;
        padding: 8px;
    }
}

/* Swipe hint di step bar */
.cvrbb-steps-hint {
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    font-family: 'Poppins', sans-serif;
    margin-top: -18px;
    margin-bottom: 14px;
    display: none;
}
@media (max-width: 640px) {
    .cvrbb-steps-hint { display: block; }
}

/* Panel transition yang smooth */
.cvrbb-panel {
    animation: none;
}
.cvrbb-panel--active {
    animation: cvrbb-slidein 0.25s ease;
}
@keyframes cvrbb-slidein {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Entry card remove button lebih mudah disentuh */
.cvrbb-entry-card__remove {
    min-height: 36px;
    padding: 6px 12px;
}

/* Form container shadow lebih subtle di mobile */
@media (max-width: 640px) {
    .cvrbb-form-container {
        box-shadow: 0 2px 8px rgba(26,86,219,0.08);
    }
    .cvrbb-app-header {
        border-radius: 8px;
        margin-bottom: 16px;
    }
}


/* ════ PRINT — sembunyikan semua WP, tampilkan hanya CV ════ */
@media print {
    body > * { display: none !important; }
    .entry-content { display: block !important; }
    .entry-content > * { display: none !important; }
    #cvrbb-app { display: block !important; }
    .cvrbb-app-header,
    .cvrbb-steps,
    .cvrbb-progress-bar,
    .cvrbb-steps-hint,
    .cvrbb-tips-box,
    #cvrbb-panel-1,
    #cvrbb-panel-2,
    #cvrbb-panel-3,
    #cvrbb-panel-4 { display: none !important; }
    #cvrbb-panel-5 { display: block !important; }
    .cvrbb-form-container { box-shadow: none !important; padding: 0 !important; }
    .cvrbb-action-bar,
    .cvrbb-print-hint,
    .cvrbb-nav,
    #cvrbb-panel-5 > h2 { display: none !important; }
    .cvrbb-cv-preview { border: none !important; }
    #cvrbb-cv-doc { box-shadow: none !important; max-width: 100% !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    @page { size: A4; margin: 12mm 10mm; }
}