/* Van Rhee CV Onderhoud - Frontend CSS v4 */
:root {
    --vrcv-blue: #0061ae;
    --vrcv-blue-dark: #004d8a;
    --vrcv-blue-light: #e8f4fc;
    --vrcv-blue-gradient: linear-gradient(135deg, #0061ae 0%, #004d8a 100%);
    --vrcv-red: #e72b37;
    --vrcv-red-dark: #c91e2a;
    --vrcv-red-light: #fef2f3;
    --vrcv-red-gradient: linear-gradient(135deg, #e72b37 0%, #c91e2a 100%);
    --vrcv-green: #10b981;
    --vrcv-green-light: #d1fae5;
    --vrcv-dark: #1a1a2e;
    --vrcv-gray: #6b7280;
    --vrcv-gray-light: #9ca3af;
    --vrcv-light: #f8fafc;
    --vrcv-white: #ffffff;
    --vrcv-shadow: 0 4px 20px rgba(0, 97, 174, 0.12);
    --vrcv-shadow-lg: 0 8px 40px rgba(0, 97, 174, 0.18);
    --vrcv-radius: 20px;
    --vrcv-radius-sm: 12px;
    --vrcv-radius-xs: 8px;
    --vrcv-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes successPop { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes checkmark { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.vrcv-pompebled-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.vrcv-pompebled { position: absolute; opacity: 0.04; animation: float 8s ease-in-out infinite; }
.vrcv-pompebled svg { width: 100%; height: 100%; }
.vrcv-pompebled-1 { width: 120px; top: 5%; left: 3%; }
.vrcv-pompebled-2 { width: 80px; top: 20%; right: 8%; animation-delay: 1s; }
.vrcv-pompebled-3 { width: 100px; top: 40%; left: 5%; animation-delay: 2s; }
.vrcv-pompebled-4 { width: 60px; top: 55%; right: 3%; animation-delay: 3s; }
.vrcv-pompebled-5 { width: 90px; top: 75%; left: 8%; animation-delay: 4s; }
.vrcv-pompebled-6 { width: 70px; top: 85%; right: 10%; animation-delay: 5s; }
.vrcv-pompebled-7 { width: 110px; top: 30%; right: 2%; animation-delay: 6s; }
.vrcv-pompebled.red svg { fill: var(--vrcv-red); }
.vrcv-pompebled.blue svg { fill: var(--vrcv-blue); }

.vrcv-booking-wrapper { position: relative; min-height: 100vh; padding: 40px 20px; }
.vrcv-booking-container { max-width: 800px; margin: 0 auto; animation: fadeInUp 0.8s ease-out; }

.vrcv-booking-card { position: relative; background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: var(--vrcv-radius); box-shadow: var(--vrcv-shadow-lg); overflow: hidden; border: 1px solid rgba(255,255,255,0.8); }
.vrcv-booking-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--vrcv-blue), var(--vrcv-red), var(--vrcv-blue)); background-size: 200% 100%; animation: shimmer 3s linear infinite; }

.vrcv-header { background: var(--vrcv-blue-gradient); padding: 50px 40px; text-align: center; position: relative; overflow: hidden; }
.vrcv-header::before { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(231,43,55,0.2) 0%, transparent 70%); border-radius: 50%; }
.vrcv-header-icon { width: 90px; height: 90px; margin: 0 auto 20px; background: var(--vrcv-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2); position: relative; z-index: 1; animation: pulse 2s ease-in-out infinite; }
.vrcv-header-icon svg { width: 45px; height: 45px; fill: var(--vrcv-blue); }
.vrcv-header h2 { color: var(--vrcv-white); margin: 0 0 10px; font-size: 32px; font-weight: 800; position: relative; z-index: 1; }
.vrcv-header p { color: rgba(255,255,255,0.9); margin: 0 auto; font-size: 16px; position: relative; z-index: 1; max-width: 400px; }

.vrcv-progress { display: flex; justify-content: center; align-items: center; padding: 35px 40px; background: linear-gradient(180deg, #f8fafc 0%, #fff 100%); }
.vrcv-step-indicator { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vrcv-step-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; transition: var(--vrcv-transition); }
.vrcv-step-indicator:not(.active):not(.completed) .vrcv-step-circle { background: var(--vrcv-white); color: var(--vrcv-gray-light); border: 3px solid #e5e7eb; }
.vrcv-step-indicator.active .vrcv-step-circle { background: var(--vrcv-blue-gradient); color: var(--vrcv-white); box-shadow: 0 8px 25px rgba(0,97,174,0.4); transform: scale(1.1); }
.vrcv-step-indicator.completed .vrcv-step-circle { background: var(--vrcv-red-gradient); color: var(--vrcv-white); box-shadow: 0 8px 25px rgba(231,43,55,0.4); }
.vrcv-step-label { font-size: 14px; font-weight: 600; color: var(--vrcv-gray-light); }
.vrcv-step-indicator.active .vrcv-step-label { color: var(--vrcv-blue); }
.vrcv-step-indicator.completed .vrcv-step-label { color: var(--vrcv-red); }
.vrcv-step-connector { width: 120px; height: 4px; background: #e5e7eb; border-radius: 2px; margin: 0 15px; overflow: hidden; align-self: flex-start; margin-top: 28px; position: relative; }
.vrcv-step-connector::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--vrcv-red-gradient); transition: width 0.5s ease; }
.vrcv-step-connector.active::after { width: 100%; }

.vrcv-form-container { padding: 45px; }
.vrcv-step { display: none; }
.vrcv-step.active { display: block; animation: fadeInUp 0.5s ease-out; }

.vrcv-step-title { display: flex; align-items: center; gap: 18px; margin-bottom: 35px; padding-bottom: 20px; border-bottom: 2px solid var(--vrcv-light); }
.vrcv-step-title-icon { width: 60px; height: 60px; background: var(--vrcv-blue-light); border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.vrcv-step-title-icon svg { width: 30px; height: 30px; fill: var(--vrcv-blue); }
.vrcv-step-title-content h3 { margin: 0 0 5px; font-size: 24px; color: var(--vrcv-dark); font-weight: 700; }
.vrcv-step-title-content p { margin: 0; color: var(--vrcv-gray); font-size: 14px; }

.vrcv-calendar-wrapper { margin-bottom: 30px; }
.vrcv-calendar { background: var(--vrcv-white); border-radius: var(--vrcv-radius-sm); box-shadow: var(--vrcv-shadow); overflow: hidden; border: 1px solid rgba(0,97,174,0.1); }
.vrcv-calendar-header { background: var(--vrcv-blue-gradient); padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; }
.vrcv-calendar-title { color: var(--vrcv-white); font-size: 20px; font-weight: 700; }
.vrcv-calendar-nav { display: flex; gap: 10px; }
.vrcv-calendar-nav-btn { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.15); border: none; color: var(--vrcv-white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--vrcv-transition); }
.vrcv-calendar-nav-btn:hover { background: rgba(255,255,255,0.25); }
.vrcv-calendar-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.vrcv-calendar-nav-btn svg { width: 20px; height: 20px; fill: currentColor; }
.vrcv-calendar-grid { padding: 20px; }
.vrcv-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 10px; }
.vrcv-calendar-weekday { text-align: center; font-size: 12px; font-weight: 700; color: var(--vrcv-gray); text-transform: uppercase; padding: 10px 0; }
.vrcv-calendar-weekday.weekend { color: var(--vrcv-red); opacity: 0.5; }
.vrcv-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.vrcv-calendar-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; border-radius: var(--vrcv-radius-xs); cursor: default; transition: var(--vrcv-transition); background: #f3f4f6; color: #9ca3af; }
.vrcv-calendar-day.empty { background: transparent; }
.vrcv-calendar-day.available { background: var(--vrcv-green-light); color: var(--vrcv-green); cursor: pointer; }
.vrcv-calendar-day.available:hover { background: var(--vrcv-green); color: var(--vrcv-white); transform: scale(1.08); box-shadow: 0 4px 15px rgba(16,185,129,0.4); }
.vrcv-calendar-day.available .vrcv-spots { font-size: 9px; font-weight: 600; margin-top: 2px; opacity: 0.8; }
.vrcv-calendar-day.selected { background: var(--vrcv-blue-gradient) !important; color: var(--vrcv-white) !important; transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,97,174,0.4); z-index: 1; }
.vrcv-calendar-day.selected .vrcv-spots { color: rgba(255,255,255,0.9); }
.vrcv-calendar-day.today { border: 2px solid var(--vrcv-blue); }
.vrcv-calendar-day.unavailable, .vrcv-calendar-day.weekend, .vrcv-calendar-day.past { background: #f9fafb; color: #d1d5db; cursor: not-allowed; }
.vrcv-calendar-day.weekend { background: var(--vrcv-red-light); color: #fca5a5; }

.vrcv-no-dates-message { text-align: center; padding: 30px; background: #fef3c7; border-radius: var(--vrcv-radius-sm); margin-top: 20px; }
.vrcv-no-dates-message svg { width: 40px; height: 40px; fill: #f59e0b; margin-bottom: 10px; }
.vrcv-no-dates-message p { margin: 0; color: #92400e; font-weight: 500; }

.vrcv-selected-dates-container { margin-top: 30px; }
.vrcv-no-selection { text-align: center; padding: 25px; background: var(--vrcv-light); border-radius: var(--vrcv-radius-sm); border: 2px dashed #d1d5db; }
.vrcv-no-selection p { margin: 0; color: var(--vrcv-gray); }
.vrcv-selected-dates-list { display: flex; flex-direction: column; gap: 15px; }
.vrcv-selected-date-item { background: var(--vrcv-white); border: 2px solid var(--vrcv-blue-light); border-radius: var(--vrcv-radius-sm); padding: 20px; transition: var(--vrcv-transition); }
.vrcv-selected-date-item:hover { border-color: var(--vrcv-blue); box-shadow: var(--vrcv-shadow); }
.vrcv-selected-date-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; }
.vrcv-selected-date-info { display: flex; flex-direction: column; gap: 3px; }
.vrcv-selected-date-day { font-size: 13px; color: var(--vrcv-blue); font-weight: 600; text-transform: uppercase; }
.vrcv-selected-date-full { font-size: 18px; font-weight: 700; color: var(--vrcv-dark); }
.vrcv-remove-date { width: 32px; height: 32px; border-radius: 8px; background: var(--vrcv-red-light); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--vrcv-transition); }
.vrcv-remove-date:hover { background: var(--vrcv-red); }
.vrcv-remove-date svg { width: 16px; height: 16px; fill: var(--vrcv-red); }
.vrcv-remove-date:hover svg { fill: var(--vrcv-white); }
.vrcv-time-preference { background: var(--vrcv-light); border-radius: var(--vrcv-radius-xs); padding: 15px; }
.vrcv-time-label { display: block; font-size: 12px; font-weight: 600; color: var(--vrcv-gray); text-transform: uppercase; margin-bottom: 10px; }
.vrcv-time-selects { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vrcv-time-selects select { padding: 10px 15px; border: 2px solid #e5e7eb; border-radius: var(--vrcv-radius-xs); font-size: 16px; font-weight: 600; color: var(--vrcv-dark); background: var(--vrcv-white); cursor: pointer; min-width: 100px; }
.vrcv-time-selects select:focus { outline: none; border-color: var(--vrcv-blue); }
.vrcv-time-sep { color: var(--vrcv-gray); font-weight: 500; }
.vrcv-avail-hint { display: block; margin-top: 10px; font-size: 12px; color: var(--vrcv-gray); }
.vrcv-selection-count { margin-top: 20px; text-align: center; padding: 12px; background: var(--vrcv-blue-light); border-radius: var(--vrcv-radius-xs); color: var(--vrcv-blue); font-weight: 600; }

.vrcv-form-group { margin-bottom: 25px; }
.vrcv-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.vrcv-label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 600; color: var(--vrcv-dark); font-size: 14px; }
.vrcv-label svg { width: 18px; height: 18px; fill: var(--vrcv-blue); }
.vrcv-label .required { color: var(--vrcv-red); }
.vrcv-input, .vrcv-textarea { width: 100%; padding: 16px 20px; border: 2px solid #e5e7eb; border-radius: var(--vrcv-radius-sm); font-size: 16px; transition: var(--vrcv-transition); background: var(--vrcv-white); color: var(--vrcv-dark); box-sizing: border-box; }
.vrcv-input:focus, .vrcv-textarea:focus { outline: none; border-color: var(--vrcv-blue); box-shadow: 0 0 0 4px rgba(0,97,174,0.1); }
.vrcv-input.error, .vrcv-textarea.error { border-color: var(--vrcv-red); animation: shake 0.4s ease; }
.vrcv-textarea { min-height: 140px; resize: vertical; }
.vrcv-input-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--vrcv-gray); }
.vrcv-klantnummer-wrapper .vrcv-input { font-family: monospace; font-size: 20px; letter-spacing: 4px; text-align: center; }
.vrcv-klantnummer-dots { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.vrcv-klantnummer-dot { width: 10px; height: 10px; border-radius: 50%; background: #e5e7eb; transition: var(--vrcv-transition); }
.vrcv-klantnummer-dot.filled { background: var(--vrcv-blue); box-shadow: 0 0 10px rgba(0,97,174,0.4); }

.vrcv-button-container { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 30px; border-top: 2px solid var(--vrcv-light); }
.vrcv-btn { padding: 18px 35px; border-radius: var(--vrcv-radius-sm); font-size: 16px; font-weight: 700; cursor: pointer; transition: var(--vrcv-transition); border: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.vrcv-btn svg { width: 20px; height: 20px; }
.vrcv-btn-primary { background: var(--vrcv-blue-gradient); color: var(--vrcv-white); box-shadow: 0 6px 25px rgba(0,97,174,0.35); }
.vrcv-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 35px rgba(0,97,174,0.45); }
.vrcv-btn-primary svg { fill: var(--vrcv-white); }
.vrcv-btn-secondary { background: var(--vrcv-white); color: var(--vrcv-gray); border: 2px solid #e5e7eb; }
.vrcv-btn-secondary:hover { background: var(--vrcv-light); }
.vrcv-btn-secondary svg { fill: var(--vrcv-gray); }
.vrcv-btn-success { background: var(--vrcv-red-gradient); color: var(--vrcv-white); box-shadow: 0 6px 25px rgba(231,43,55,0.35); }
.vrcv-btn-success:hover { transform: translateY(-3px); }
.vrcv-btn-success svg { fill: var(--vrcv-white); }

.vrcv-error-message { display: none; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-left: 4px solid var(--vrcv-red); padding: 18px 20px; border-radius: 0 var(--vrcv-radius-sm) var(--vrcv-radius-sm) 0; margin: 0 45px 25px; color: #991b1b; font-size: 14px; font-weight: 500; align-items: center; gap: 12px; }
.vrcv-error-message.show { display: flex; animation: shake 0.5s ease; }
.vrcv-error-message svg { width: 22px; height: 22px; fill: var(--vrcv-red); flex-shrink: 0; }

.vrcv-success-container { display: none; text-align: center; padding: 70px 50px; }
.vrcv-success-container.active { display: block; animation: fadeIn 0.5s ease; }
.vrcv-success-icon-wrapper { width: 120px; height: 120px; margin: 0 auto 30px; position: relative; }
.vrcv-success-circle { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; animation: successPop 0.6s ease; box-shadow: 0 15px 50px rgba(16,185,129,0.4); }
.vrcv-success-circle svg { width: 55px; height: 55px; fill: none; stroke: var(--vrcv-white); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; animation: checkmark 0.6s ease 0.3s forwards; stroke-dashoffset: 100; }
.vrcv-success-rings { position: absolute; inset: -15px; border: 3px solid rgba(16,185,129,0.3); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
.vrcv-success-container h3 { color: var(--vrcv-dark); font-size: 30px; margin: 0 0 15px; }
.vrcv-success-container > p { color: var(--vrcv-gray); font-size: 17px; margin: 0 0 35px; }
.vrcv-success-dates { background: var(--vrcv-light); border-radius: var(--vrcv-radius-sm); padding: 25px; text-align: left; margin-bottom: 30px; }
.vrcv-success-dates h4 { margin: 0 0 15px; font-size: 14px; text-transform: uppercase; color: var(--vrcv-gray); }
.vrcv-success-date-item { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e5e7eb; }
.vrcv-success-date-item:last-child { border-bottom: none; }
.vrcv-success-date-item span:first-child { font-weight: 600; color: var(--vrcv-dark); }
.vrcv-success-date-item span:last-child { color: var(--vrcv-blue); font-weight: 600; }
.vrcv-contact-card { background: var(--vrcv-blue-light); padding: 25px 30px; border-radius: var(--vrcv-radius-sm); display: inline-block; }
.vrcv-contact-card p { margin: 5px 0; }
.vrcv-contact-card a { color: var(--vrcv-blue); text-decoration: none; font-weight: 600; }

.vrcv-loading { display: none; position: absolute; inset: 0; background: rgba(255,255,255,0.95); z-index: 100; flex-direction: column; justify-content: center; align-items: center; gap: 25px; }
.vrcv-loading.active { display: flex; }
.vrcv-spinner { width: 70px; height: 70px; border: 4px solid var(--vrcv-light); border-top-color: var(--vrcv-blue); border-right-color: var(--vrcv-red); border-radius: 50%; animation: spin 1s linear infinite; }
.vrcv-loading p { color: var(--vrcv-dark); font-weight: 600; }
.vrcv-calendar-loading { text-align: center; padding: 40px; color: var(--vrcv-gray); }
.vrcv-calendar-loading .vrcv-spinner { width: 40px; height: 40px; margin: 0 auto 15px; }

@media (max-width: 768px) {
    .vrcv-booking-wrapper { padding: 20px 15px; }
    .vrcv-header { padding: 40px 25px; }
    .vrcv-header h2 { font-size: 26px; }
    .vrcv-progress { padding: 25px 20px; }
    .vrcv-step-circle { width: 50px; height: 50px; font-size: 18px; }
    .vrcv-step-connector { width: 60px; margin-top: 23px; }
    .vrcv-form-container { padding: 30px 25px; }
    .vrcv-form-row { grid-template-columns: 1fr; }
    .vrcv-button-container { flex-direction: column; }
    .vrcv-btn { width: 100%; }
    .vrcv-pompebled { display: none; }
    .vrcv-error-message { margin: 0 25px 20px; }
    .vrcv-time-selects { flex-direction: column; align-items: stretch; }
    .vrcv-time-selects select { width: 100%; }
}

.vrcv-slot-selection {
    margin-bottom: 15px;
}
.vrcv-slot-select {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid var(--vrcv-blue);
    border-radius: var(--vrcv-radius-xs);
    font-size: 15px;
    font-weight: 600;
    color: var(--vrcv-dark);
    background: var(--vrcv-white);
    cursor: pointer;
    margin-top: 8px;
}
.vrcv-slot-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 97, 174, 0.2);
}
.vrcv-time-selection {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}