/* ═══════════════════ DEMO BOOKING ═══════════════════ */
.demo-hero{background:linear-gradient(135deg,var(--rp-blue) 0%,#1a3a8f 100%);padding:calc(var(--nav-h) + 40px) 0 60px;position:relative;overflow:hidden}
.demo-hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:rgba(244,96,26,0.12)}
.demo-hero::after{content:'';position:absolute;bottom:-80px;left:-60px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,0.04)}

/* STEP INDICATOR */
.step-indicator{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:52px}
.step-dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:2px solid var(--rp-gray-200);background:#fff;color:var(--rp-gray-400);transition:var(--t-base);position:relative;z-index:1;flex-shrink:0}
.step-dot.active{background:var(--rp-orange);border-color:var(--rp-orange);color:#fff;box-shadow:0 4px 18px rgba(244,96,26,0.45)}
.step-dot.done{background:var(--rp-blue);border-color:var(--rp-blue);color:#fff}
.step-dot.done::after{content:'✓';font-size:16px}
.step-dot.done .step-num{display:none}
.step-line{height:2px;width:80px;background:var(--rp-gray-200);transition:var(--t-base)}
.step-line.done{background:var(--rp-blue)}
.step-label{font-size:11px;font-weight:600;color:var(--rp-gray-400);position:absolute;top:50px;white-space:nowrap;letter-spacing:.5px;text-align:center;left:50%;transform:translateX(-50%)}
.step-dot.active .step-label{color:var(--rp-orange)}
.step-dot.done .step-label{color:var(--rp-blue)}

/* STEP PANELS */
.demo-step{display:none}
.demo-step.active{display:block}
.demo-form-card{background:#fff;border:1.5px solid var(--rp-gray-100);border-radius:var(--r-2xl);padding:40px;box-shadow:var(--sh-md)}
.demo-form-card h4{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--rp-blue);margin-bottom:8px}
.demo-form-card > p{color:var(--rp-gray-500);font-size:14px;margin-bottom:32px}

/* FORM FIELDS */
.demo-field{margin-bottom:20px}
.demo-field label{display:block;font-size:13px;font-weight:600;color:var(--rp-gray-700);margin-bottom:8px;letter-spacing:.2px}
.demo-field label .req{color:#ef4444;margin-left:2px}
.demo-input{width:100%;padding:13px 16px;border:1.5px solid var(--rp-gray-200);border-radius:var(--r-md);font-family:var(--font-body);font-size:14px;color:var(--rp-gray-800);background:#fff;outline:none;transition:var(--t-fast)}
.demo-input:focus{border-color:var(--rp-orange);box-shadow:0 0 0 3px rgba(244,96,26,0.1)}
.demo-input::placeholder{color:var(--rp-gray-300)}
.demo-input.error{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.08)}
select.demo-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}

/* PRODUCT OPTIONS */
.product-select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.product-opt{border:1.5px solid var(--rp-gray-200);border-radius:var(--r-lg);padding:16px 12px;text-align:center;cursor:pointer;transition:var(--t-base);background:#fff}
.product-opt:hover{border-color:var(--rp-gray-300);background:var(--rp-off)}
.product-opt.selected{border-color:var(--rp-orange);background:rgba(244,96,26,0.05);box-shadow:0 0 0 3px rgba(244,96,26,0.1)}
.product-opt .po-emoji{font-size:32px;margin-bottom:8px;display:block;line-height:1}
.product-opt .po-name{font-size:12px;font-weight:600;color:var(--rp-gray-700);line-height:1.3}
.product-opt.selected .po-name{color:var(--rp-orange)}

/* TIME SLOTS */
.time-slots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.time-slot{padding:10px 6px;border:1.5px solid var(--rp-gray-200);border-radius:var(--r-md);text-align:center;cursor:pointer;font-size:13px;font-weight:600;color:var(--rp-gray-600);transition:var(--t-fast);background:#fff}
.time-slot:hover{border-color:var(--rp-gray-300)}
.time-slot.selected{border-color:var(--rp-orange);background:rgba(244,96,26,0.08);color:var(--rp-orange)}
.time-slot.unavailable{opacity:.4;cursor:not-allowed;pointer-events:none}

/* CONFIRMATION STEP */
.demo-confirm-card{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:2px solid #86efac;border-radius:var(--r-2xl);padding:48px 40px;text-align:center}
.confirm-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#16a34a,#22c55e);display:flex;align-items:center;justify-content:center;font-size:36px;color:#fff;margin:0 auto 24px;box-shadow:0 8px 24px rgba(34,197,94,0.35)}
.confirm-detail-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(255,255,255,0.7);border-radius:var(--r-lg);margin-bottom:10px;font-size:14px;text-align:left}
.confirm-detail-row i{color:var(--rp-blue);font-size:16px;flex-shrink:0}

/* SIDEBAR */
.demo-sidebar-card{background:#fff;border:1.5px solid var(--rp-gray-100);border-radius:var(--r-xl);padding:24px;margin-bottom:20px}
.demo-sidebar-card h5{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--rp-blue);margin-bottom:16px}
.demo-trust-list{list-style:none;padding:0;margin:0}
.demo-trust-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--rp-gray-50);font-size:13.5px;color:var(--rp-gray-700)}
.demo-trust-list li:last-child{border-bottom:none}
.demo-trust-list li i{color:var(--rp-orange);font-size:15px;flex-shrink:0}
.demo-stat-row{display:flex;gap:16px;margin-bottom:16px}
.demo-stat{flex:1;text-align:center;padding:14px;background:var(--rp-off);border-radius:var(--r-lg)}
.demo-stat-num{font-family:var(--font-display);font-size:1.6rem;font-weight:900;color:var(--rp-blue)}
.demo-stat-label{font-size:11px;color:var(--rp-gray-400);letter-spacing:.5px}

/* TESTIMONIALS IN SIDEBAR */
.demo-testimonial{background:var(--rp-off);border-radius:var(--r-lg);padding:16px;font-size:13px;color:var(--rp-gray-600);line-height:1.65;font-style:italic;position:relative;margin-bottom:12px}
.demo-testimonial::before{content:'"';font-size:48px;color:rgba(244,96,26,0.2);position:absolute;top:-8px;left:12px;font-family:Georgia,serif;line-height:1}
.dt-author{display:flex;align-items:center;gap:8px;margin-top:12px}
.dt-av{width:30px;height:30px;border-radius:50%;background:var(--rp-blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.dt-info{font-size:12px;font-weight:600;color:var(--rp-blue)}
.dt-info span{display:block;font-size:11px;font-weight:400;color:var(--rp-gray-400);font-style:normal}

@media(max-width:768px){
  .demo-form-card{padding:24px}
  .product-select-grid{grid-template-columns:repeat(2,1fr)}
  .time-slots-grid{grid-template-columns:repeat(3,1fr)}
  .step-label{display:none}
  .step-line{width:40px}
}
@media(max-width:480px){
  .time-slots-grid{grid-template-columns:repeat(2,1fr)}
}

/* CONFIRM CARD DARK BG */
.demo-confirm-card{background:linear-gradient(135deg,var(--rp-blue) 0%,#1a3a8f 100%);border-radius:var(--r-2xl);padding:52px 40px;text-align:center;color:#fff}
.demo-confirm-card .confirm-icon{background:linear-gradient(135deg,#16a34a,#22c55e)}
.demo-confirm-card h2{color:#fff !important}
.demo-confirm-card p{color:rgba(255,255,255,0.75)}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  15%,45%,75%{transform:translateX(-6px)}
  30%,60%,90%{transform:translateX(6px)}
}
.demo-form-card.shake{animation:shake .45s ease}