{"id":102,"date":"2026-04-03T23:49:53","date_gmt":"2026-04-03T23:49:53","guid":{"rendered":"https:\/\/parsheal.com\/?page_id=102"},"modified":"2026-04-03T23:50:16","modified_gmt":"2026-04-03T23:50:16","slug":"book-in-iran","status":"publish","type":"page","link":"https:\/\/parsheal.com\/index.php\/book-in-iran\/","title":{"rendered":"Book in Iran"},"content":{"rendered":"\n\n\n\n\n\n\n\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Pars Heal | Booking Intake<\/title>\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&amp;display=swap\" rel=\"stylesheet\">\n  <style>\n    :root{\n      --primary:#246bff;\n      --primary-2:#5a63ff;\n      --dark:#142443;\n      --text:#31405d;\n      --muted:#73819a;\n      --line:#dbe5f4;\n      --soft:#f5f8ff;\n      --card:#ffffff;\n      --success:#19b26b;\n      --warning:#ffb120;\n      --danger:#ef4444;\n      --shadow:0 18px 42px rgba(20,36,67,.08);\n      --shadow-lg:0 30px 64px rgba(20,36,67,.14);\n      --radius:30px;\n      --container:1220px;\n    }\n\n    *{box-sizing:border-box;margin:0;padding:0}\n    html{scroll-behavior:smooth}\n    body{\n      font-family:'Inter',sans-serif;\n      background:linear-gradient(180deg,#f8fbff 0%, #f2f7ff 100%);\n      color:var(--text);\n      line-height:1.6;\n      overflow-x:hidden;\n    }\n    img{display:block;max-width:100%}\n    button,input,select,textarea{font:inherit}\n    .container{width:min(var(--container),calc(100% - 28px));margin:0 auto}\n\n    .booking-wrap{padding:28px 0 80px}\n    .layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:24px;align-items:start}\n    .stack{display:grid;gap:22px}\n\n    .card{\n      background:rgba(255,255,255,.93);\n      border:1px solid rgba(255,255,255,.92);\n      border-radius:30px;\n      box-shadow:var(--shadow);\n      backdrop-filter:blur(12px);\n    }\n    .card-pad{padding:26px}\n\n    .intro{\n      position:relative;\n      overflow:hidden;\n      background:\n        radial-gradient(circle at 10% 15%, rgba(36,107,255,.09), transparent 28%),\n        radial-gradient(circle at 90% 10%, rgba(90,99,255,.08), transparent 24%),\n        linear-gradient(180deg,#ffffff 0%, #f7faff 100%);\n    }\n    .intro-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:24px;align-items:center}\n    .eyebrow{\n      display:inline-flex;align-items:center;justify-content:center;\n      min-height:40px;padding:8px 14px;border-radius:999px;\n      background:#eef5ff;color:var(--primary);\n      font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;\n    }\n    .intro h1{\n      margin:18px 0 14px;\n      font-size:48px;line-height:1.02;letter-spacing:-1.4px;\n      color:var(--dark);font-weight:900;max-width:740px;\n    }\n    .intro h1 span{\n      background:linear-gradient(135deg,var(--primary),var(--primary-2));\n      -webkit-background-clip:text;-webkit-text-fill-color:transparent;\n      background-clip:text;color:transparent;\n    }\n    .intro p{color:var(--muted);font-size:16px;line-height:1.9;max-width:680px}\n    .intro-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}\n    .intro-point{\n      padding:16px;border-radius:22px;background:#fff;border:1px solid #e6eefb;box-shadow:var(--shadow);\n    }\n    .intro-point strong{display:block;color:var(--dark);font-size:17px;font-weight:900;margin-bottom:4px}\n    .intro-point span{display:block;color:var(--muted);font-size:13px;line-height:1.6}\n    .intro-visual{\n      min-height:320px;border-radius:30px;overflow:hidden;position:relative;\n      background:#fff;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.9)\n    }\n    .intro-visual img{width:100%;height:100%;object-fit:cover}\n    .visual-badge{\n      position:absolute;left:18px;right:18px;bottom:18px;\n      padding:16px 18px;border-radius:22px;\n      background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);\n      box-shadow:var(--shadow);\n    }\n    .visual-badge strong{display:block;color:var(--dark);font-size:17px;font-weight:900;margin-bottom:4px}\n    .visual-badge span{display:block;color:var(--muted);font-size:13px;line-height:1.6}\n\n    .head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}\n    .head h2,.head h3{color:var(--dark);font-weight:900;letter-spacing:-.7px;line-height:1.08}\n    .head h2{font-size:32px}\n    .head h3{font-size:28px}\n    .head p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.8;max-width:760px}\n    .tag{\n      white-space:nowrap;min-height:38px;padding:8px 12px;border-radius:999px;\n      background:#eef5ff;color:var(--primary);\n      font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;\n      display:inline-flex;align-items:center;justify-content:center;\n    }\n\n    .steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}\n    .step{padding:16px 14px;border-radius:20px;background:#f7faff;border:1px solid #e3ecfa;transition:.2s ease}\n    .step.done{background:#edfff5;border-color:#caefd8}\n    .step.active{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;color:#fff;box-shadow:0 14px 28px rgba(36,107,255,.18)}\n    .step-index{\n      width:34px;height:34px;border-radius:12px;background:#fff;color:var(--dark);\n      display:flex;align-items:center;justify-content:center;\n      font-size:14px;font-weight:900;margin-bottom:12px;box-shadow:0 8px 18px rgba(20,36,67,.08)\n    }\n    .step.done .step-index{background:var(--success);color:#fff;box-shadow:none}\n    .step.active .step-index{color:var(--primary)}\n    .step-title{font-size:15px;font-weight:800;line-height:1.35}\n    .step-note{font-size:12px;line-height:1.5;color:var(--muted);margin-top:4px}\n    .step.active .step-note{color:rgba(255,255,255,.84)}\n    .step.done .step-note{color:#4e6c59}\n\n    .panel{display:none}\n    .panel.active{display:block}\n\n    .service-grid,.doctor-grid,.slot-grid,.review-grid,.form-grid,.payment-grid{display:grid;gap:16px}\n    .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}\n    .doctor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}\n    .slot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}\n    .review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}\n    .form-grid,.payment-grid{grid-template-columns:repeat(2,minmax(0,1fr))}\n\n    .service-card,.doctor-card,.slot,.review-card,.pay-box{\n      border:1px solid var(--line);background:#fbfdff;border-radius:24px;transition:.22s ease;\n    }\n    .service-card,.doctor-card,.slot,.pay-option{cursor:pointer}\n    .service-card:hover,.doctor-card:hover,.slot:hover,.pay-option:hover{transform:translateY(-4px);box-shadow:var(--shadow)}\n    .service-card.active,.doctor-card.active,.slot.active,.pay-option.active{\n      border-color:rgba(36,107,255,.28);\n      background:linear-gradient(180deg,#ffffff 0%, #f4f8ff 100%);\n      box-shadow:0 14px 30px rgba(36,107,255,.1);\n    }\n\n    .service-card{padding:20px;position:relative}\n    .service-badge{\n      position:absolute;top:14px;right:14px;min-height:28px;padding:6px 10px;border-radius:999px;\n      background:#eef5ff;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;\n    }\n    .service-icon{\n      width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;\n      background:linear-gradient(135deg,#edf4ff,#deebff);color:var(--primary);font-size:23px;font-weight:900;margin-bottom:14px;\n    }\n    .service-card h4,.doctor-info h4,.review-card h4,.pay-box h4{color:var(--dark);font-size:19px;font-weight:900;line-height:1.2}\n    .service-card p,.doctor-info p,.review-card p,.pay-box p{color:var(--muted);font-size:14px;line-height:1.75;margin-top:8px}\n\n    .doctor-card{overflow:hidden;position:relative}\n    .doctor-card img{width:100%;height:230px;object-fit:cover}\n    .doctor-info{padding:16px}\n    .doctor-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}\n    .doctor-pill{\n      min-height:30px;padding:6px 10px;border-radius:999px;background:#eef5ff;color:var(--primary);\n      font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;display:inline-flex;align-items:center\n    }\n    .doctor-rating{font-size:13px;font-weight:800;color:var(--dark)}\n    .price-chip{\n      position:absolute;top:14px;left:14px;\n      min-height:34px;padding:8px 12px;border-radius:999px;\n      background:rgba(20,36,67,.86);color:#fff;font-size:12px;font-weight:800;letter-spacing:.03em;\n      display:inline-flex;align-items:center;justify-content:center;backdrop-filter:blur(10px)\n    }\n    .doctor-prices{display:grid;gap:8px;margin-top:12px}\n    .doctor-price-row{\n      display:flex;justify-content:space-between;gap:10px;align-items:center;\n      padding:10px 12px;border-radius:16px;background:#fff;border:1px solid #e8eff9;\n    }\n    .doctor-price-row span{font-size:12px;color:var(--muted);font-weight:700}\n    .doctor-price-row strong{font-size:14px;color:var(--dark);font-weight:900}\n\n    .field,.field-full{display:flex;flex-direction:column;gap:8px}\n    .field-full{grid-column:1 \/ -1}\n    .label{font-size:14px;font-weight:800;color:var(--dark)}\n    .help{font-size:12px;color:var(--muted);line-height:1.6;margin-top:-2px}\n    .input,.select,.textarea{\n      width:100%;min-height:56px;padding:0 16px;border-radius:18px;background:#fff;border:1px solid #dbe5f5;color:var(--dark);outline:none;transition:.2s ease;\n    }\n    .textarea{min-height:130px;padding:16px;resize:vertical}\n    .input:focus,.select:focus,.textarea:focus{border-color:#8fc0ff;box-shadow:0 0 0 4px rgba(36,107,255,.08)}\n\n    .date-strip{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}\n    .date-chip{\n      padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:#fbfdff;cursor:pointer;transition:.2s ease;min-width:110px;text-align:center;\n    }\n    .date-chip strong{display:block;font-size:15px;color:var(--dark);font-weight:900}\n    .date-chip span{display:block;font-size:12px;color:var(--muted);margin-top:3px}\n    .date-chip.active{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;box-shadow:0 12px 24px rgba(36,107,255,.2)}\n    .date-chip.active strong,.date-chip.active span{color:#fff}\n\n    .slot{padding:16px;text-align:center}\n    .slot strong{display:block;color:var(--dark);font-size:15px;font-weight:900}\n    .slot span{display:block;color:var(--muted);font-size:12px;margin-top:4px}\n\n    .payment-rules{\n      padding:18px;border-radius:22px;background:linear-gradient(180deg,#fffaf0 0%, #fff5dc 100%);\n      border:1px solid #ffe6a6;color:#8c6400;font-size:14px;line-height:1.8;font-weight:600;margin-bottom:18px;\n    }\n    .pay-option{\n      border:1px solid var(--line);background:#fbfdff;border-radius:24px;padding:20px;transition:.22s ease;\n    }\n    .pay-option h4{color:var(--dark);font-size:20px;font-weight:900}\n    .pay-option p{color:var(--muted);font-size:14px;line-height:1.75;margin-top:8px}\n    .pay-option .amount{display:block;margin-top:14px;color:var(--primary);font-size:28px;font-weight:900;letter-spacing:-.8px}\n    .pay-option .sub{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:700}\n    .pay-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}\n    .method{\n      padding:16px;border-radius:18px;border:1px solid #e3ecfa;background:#fff;\n    }\n    .method strong{display:block;color:var(--dark);font-size:14px;font-weight:800;margin-bottom:4px}\n    .method span{display:block;color:var(--muted);font-size:12px;line-height:1.6}\n\n    .review-card{padding:20px}\n    .review-list{display:grid;gap:10px;margin-top:14px}\n    .review-row{display:flex;justify-content:space-between;gap:14px;padding-bottom:10px;border-bottom:1px solid #edf3fb;align-items:flex-start}\n    .review-row:last-child{padding-bottom:0;border-bottom:none}\n    .review-key{font-size:13px;color:var(--muted);font-weight:700}\n    .review-value{font-size:14px;color:var(--dark);font-weight:800;text-align:right}\n\n    .actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}\n    .actions-left,.actions-right{display:flex;gap:12px;flex-wrap:wrap}\n    .btn{\n      border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;\n      min-height:52px;padding:0 22px;border-radius:16px;font-size:15px;font-weight:800;transition:.22s ease;\n    }\n    .btn-primary{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 12px 24px rgba(36,107,255,.22)}\n    .btn-primary:hover{transform:translateY(-2px)}\n    .btn-secondary{background:#fff;color:var(--dark);border:1px solid var(--line)}\n    .btn-secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}\n    .btn-dark{background:linear-gradient(135deg,#142443,#21396b);color:#fff;box-shadow:0 16px 30px rgba(20,36,67,.18)}\n    .btn-dark:hover{transform:translateY(-2px)}\n\n    .sidebar{position:sticky;top:20px;display:grid;gap:18px}\n    .summary h3,.assist h4{color:var(--dark);font-weight:900}\n    .summary h3{font-size:24px;margin-bottom:14px}\n    .summary p,.assist p{color:var(--muted);font-size:14px;line-height:1.8}\n    .summary-list{display:grid;gap:14px;margin-top:18px}\n    .summary-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}\n    .summary-placeholder{color:#9aa8bf;font-style:italic;font-weight:700}\n    .summary-pending{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:6px 10px;border-radius:999px;background:#f3f6fb;color:#8a97ad;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}\n    .summary-key{font-size:13px;color:var(--muted);font-weight:700}\n    .summary-value{font-size:14px;color:var(--dark);font-weight:800;text-align:right}\n    .divider{height:1px;background:#e8eff9;margin:16px 0}\n    .highlight{\n      border-radius:22px;padding:18px;background:linear-gradient(135deg,#14316f,#2252b8);color:#fff;box-shadow:var(--shadow-lg);\n    }\n    .highlight h4{font-size:18px;font-weight:900;margin-bottom:8px}\n    .highlight p{color:rgba(255,255,255,.86);font-size:13px;line-height:1.75}\n    .bullets{display:grid;gap:8px;margin-top:12px}\n    .bullets div{font-size:13px;line-height:1.6;color:rgba(255,255,255,.9)}\n    .assist .btn{width:100%}\n\n    .secure-box{\n      padding:18px;border-radius:22px;background:#f4fff8;border:1px solid #cdeedb;\n    }\n    .secure-box strong{display:block;color:var(--dark);font-size:16px;font-weight:900;margin-bottom:6px}\n    .secure-box span{display:block;color:#4e6d5c;font-size:13px;line-height:1.7}\n\n    @media (max-width:1200px){\n      .layout,.intro-grid{grid-template-columns:1fr}\n      .sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}\n      .steps{grid-template-columns:repeat(3,minmax(0,1fr))}\n      .service-grid,.doctor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}\n    }\n    @media (max-width:900px){\n      .intro h1{font-size:38px;letter-spacing:-1px}\n      .service-grid,.doctor-grid,.slot-grid,.review-grid,.form-grid,.payment-grid,.pay-methods,.steps,.sidebar,.intro-points{grid-template-columns:1fr}\n      .head{flex-direction:column}\n    }\n    @media (max-width:640px){\n      .container{width:min(var(--container),calc(100% - 18px))}\n      .booking-wrap{padding:18px 0 60px}\n      .card,.intro-visual{border-radius:24px}\n      .card-pad{padding:20px}\n      .intro h1{font-size:32px}\n      .head h2,.head h3{font-size:25px}\n      .actions{flex-direction:column-reverse;align-items:stretch}\n      .actions-left,.actions-right{width:100%}\n      .actions .btn{width:100%}\n    }\n  <\/style>\n\n\n  <main class=\"booking-wrap\">\n    <div class=\"container\">\n      <div class=\"layout\">\n        <div class=\"stack\">\n\n          \n\n          <section class=\"card card-pad\">\n            <div class=\"head\">\n              <div>\n                <h2>Booking &amp; payment flow<\/h2>\n                <p>The patient first chooses service, then doctor, then appointment, then details, then payment, and finally review.<\/p>\n              <\/div>\n              <div class=\"tag\" id=\"stepStatus\">Step 1 of 6<\/div>\n            <\/div>\n\n            <div class=\"steps\" id=\"stepsNav\">\n              <div class=\"step active\"><div class=\"step-index\">1<\/div><div class=\"step-title\">Service<\/div><div class=\"step-note\">Choose pathway<\/div><\/div>\n              <div class=\"step\"><div class=\"step-index\">2<\/div><div class=\"step-title\">Doctor<\/div><div class=\"step-note\">Select specialist<\/div><\/div>\n              <div class=\"step\"><div class=\"step-index\">3<\/div><div class=\"step-title\">Date &amp; Time<\/div><div class=\"step-note\">Pick slot<\/div><\/div>\n              <div class=\"step\"><div class=\"step-index\">4<\/div><div class=\"step-title\">Patient Info<\/div><div class=\"step-note\">Add details<\/div><\/div>\n              <div class=\"step\"><div class=\"step-index\">5<\/div><div class=\"step-title\">Payment<\/div><div class=\"step-note\">Choose payment<\/div><\/div>\n              <div class=\"step\"><div class=\"step-index\">6<\/div><div class=\"step-title\">Review<\/div><div class=\"step-note\">Confirm request<\/div><\/div>\n            <\/div>\n          <\/section>\n\n          <section class=\"card card-pad panel active\" data-step=\"1\">\n            <div class=\"head\">\n              <div>\n                <h3>1. Choose the service<\/h3>\n                <p>At this stage, the patient selects the exact service they need. Services that require travel to Iran are separated from services that can be completed online.<\/p>\n              <\/div>\n              <div class=\"tag\">Service selection<\/div>\n            <\/div>\n\n            <div class=\"service-grid\" id=\"serviceGrid\">\n              <article class=\"service-card active\" data-service=\"Dental Treatment\" data-mode=\"iran\">\n                <div class=\"service-badge\">In Iran<\/div>\n                <div class=\"service-icon\">\ud83e\uddb7<\/div>\n                <h4>Dental<\/h4>\n                <p>For implants, restorative treatment, cosmetic dental work, and in-person dental procedures in Iran.<\/p>\n              <\/article>\n\n              <article class=\"service-card\" data-service=\"Skin Treatment\" data-mode=\"iran\">\n                <div class=\"service-badge\">In Iran<\/div>\n                <div class=\"service-icon\">\u2728<\/div>\n                <h4>Skin<\/h4>\n                <p>For in-person dermatology care, skin procedures, aesthetic treatment, and clinic-based services in Iran.<\/p>\n              <\/article>\n\n              <article class=\"service-card\" data-service=\"Eye Treatment\" data-mode=\"iran\">\n                <div class=\"service-badge\">In Iran<\/div>\n                <div class=\"service-icon\">\ud83d\udc41<\/div>\n                <h4>Eye<\/h4>\n                <p>For ophthalmology appointments, eye examinations, Lasik pathways, and other in-person eye care in Iran.<\/p>\n              <\/article>\n\n              <article class=\"service-card\" data-service=\"Cosmetic Surgery\" data-mode=\"iran\">\n                <div class=\"service-badge\">In Iran<\/div>\n                <div class=\"service-icon\">\ud83d\udc8e<\/div>\n                <h4>Cosmetic Surgery<\/h4>\n                <p>For rhinoplasty, facial procedures, body contouring, and aesthetic surgery performed in Iran.<\/p>\n              <\/article>\n\n              <article class=\"service-card\" data-service=\"General Surgery Consultation\" data-mode=\"iran\">\n                <div class=\"service-badge\">In Iran<\/div>\n                <div class=\"service-icon\">\ud83c\udfe5<\/div>\n                <h4>General Surgery<\/h4>\n                <p>For in-person surgical evaluation, hospital coordination, pre-operative review, and treatment planning in Iran.<\/p>\n              <\/article>\n\n              <article class=\"service-card\" data-service=\"Hair Transplant\" data-mode=\"iran\">\n                <div class=\"service-badge\">In Iran<\/div>\n                <div class=\"service-icon\">\ud83e\uddd1<\/div>\n                <h4>Hair Transplant<\/h4>\n                <p>For hair restoration, transplant planning, scalp assessment, and clinic-based procedures in Iran.<\/p>\n              <\/article>\n\n              <article class=\"service-card\" data-service=\"Online Psychology Consultation\" data-mode=\"online\">\n                <div class=\"service-badge\">Online<\/div>\n                <div class=\"service-icon\">\ud83e\udde0<\/div>\n                <h4>Psychology Consultation<\/h4>\n                <p>For remote mental health support, counseling, therapy intake, and psychology consultations across different branches.<\/p>\n              <\/article>\n\n              <article class=\"service-card\" data-service=\"Online Skin Consultation\" data-mode=\"online\">\n                <div class=\"service-badge\">Online<\/div>\n                <div class=\"service-icon\">\ud83d\udcbb<\/div>\n                <h4>Online Skin Consultation<\/h4>\n                <p>For remote dermatology review, skin condition assessment, and online skin-care planning before any travel decision.<\/p>\n              <\/article>\n\n              <article class=\"service-card\" data-service=\"Online Nutrition Consultation\" data-mode=\"online\">\n                <div class=\"service-badge\">Online<\/div>\n                <div class=\"service-icon\">\ud83e\udd57<\/div>\n                <h4>Nutrition Consultation<\/h4>\n                <p>For diet planning, weight management, wellness guidance, and structured nutrition consultations online.<\/p>\n              <\/article>\n            <\/div>\n\n            <div class=\"actions\">\n              <div class=\"actions-left\"><\/div>\n              <div class=\"actions-right\"><button class=\"btn btn-primary next-btn\">Continue<\/button><\/div>\n            <\/div>\n          <\/section>\n\n          <section class=\"card card-pad panel\" data-step=\"2\">\n            <div class=\"head\">\n              <div>\n                <h3>2. Choose your doctor<\/h3>\n                <p>Each doctor card includes visible pricing. In-Iran service uses a reservation deposit, while online consultation is paid in full.<\/p>\n              <\/div>\n              <div class=\"tag\">Doctor &amp; price<\/div>\n            <\/div>\n\n            <div class=\"doctor-grid\" id=\"doctorGrid\">\n              <article class=\"doctor-card active\" data-doctor=\"Dr. Nika Rahimi\" data-specialty=\"Ophthalmologist\" data-iran-price=\"120\" data-online-price=\"280\">\n                <div class=\"price-chip\">From $120<\/div>\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1559839734-2b71ea197ec2?auto=format&amp;fit=crop&amp;w=900&amp;q=80\" alt=\"Dr. Nika Rahimi\">\n                <div class=\"doctor-info\">\n                  <h4>Dr. Nika Rahimi<\/h4>\n                  <p>Eye specialist for consultation, surgical planning, laser vision pathways, and pre-treatment review.<\/p>\n                  <div class=\"doctor-meta\">\n                    <div class=\"doctor-pill\">Ophthalmologist<\/div>\n                    <div class=\"doctor-rating\">\u2605 4.9<\/div>\n                  <\/div>\n                  <div class=\"doctor-prices\">\n                    <div class=\"doctor-price-row\"><span>Reservation for treatment in Iran<\/span><strong>$120 deposit<\/strong><\/div>\n                    <div class=\"doctor-price-row\"><span>Online consultation<\/span><strong>$280 full payment<\/strong><\/div>\n                  <\/div>\n                <\/div>\n              <\/article>\n\n              <article class=\"doctor-card\" data-doctor=\"Dr. Arman Daryaei\" data-specialty=\"Dental Specialist\" data-iran-price=\"150\" data-online-price=\"320\">\n                <div class=\"price-chip\">From $150<\/div>\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618498082410-b4aa22193b38?auto=format&amp;fit=crop&amp;w=900&amp;q=80\" alt=\"Dr. Arman Daryaei\">\n                <div class=\"doctor-info\">\n                  <h4>Dr. Arman Daryaei<\/h4>\n                  <p>Dental specialist for implants, cosmetic restorative work, and treatment coordination for international patients.<\/p>\n                  <div class=\"doctor-meta\">\n                    <div class=\"doctor-pill\">Dental Specialist<\/div>\n                    <div class=\"doctor-rating\">\u2605 4.8<\/div>\n                  <\/div>\n                  <div class=\"doctor-prices\">\n                    <div class=\"doctor-price-row\"><span>Reservation for treatment in Iran<\/span><strong>$150 deposit<\/strong><\/div>\n                    <div class=\"doctor-price-row\"><span>Online consultation<\/span><strong>$320 full payment<\/strong><\/div>\n                  <\/div>\n                <\/div>\n              <\/article>\n\n              <article class=\"doctor-card\" data-doctor=\"Dr. Sara Vaziri\" data-specialty=\"Dermatologist\" data-iran-price=\"110\" data-online-price=\"240\">\n                <div class=\"price-chip\">From $110<\/div>\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1594824476967-48c8b964273f?auto=format&amp;fit=crop&amp;w=900&amp;q=80\" alt=\"Dr. Sara Vaziri\">\n                <div class=\"doctor-info\">\n                  <h4>Dr. Sara Vaziri<\/h4>\n                  <p>Skin and aesthetic care specialist with a premium, patient-centered approach for local and remote cases.<\/p>\n                  <div class=\"doctor-meta\">\n                    <div class=\"doctor-pill\">Dermatologist<\/div>\n                    <div class=\"doctor-rating\">\u2605 4.9<\/div>\n                  <\/div>\n                  <div class=\"doctor-prices\">\n                    <div class=\"doctor-price-row\"><span>Reservation for treatment in Iran<\/span><strong>$110 deposit<\/strong><\/div>\n                    <div class=\"doctor-price-row\"><span>Online consultation<\/span><strong>$240 full payment<\/strong><\/div>\n                  <\/div>\n                <\/div>\n              <\/article>\n\n              <article class=\"doctor-card\" data-doctor=\"Dr. Leila Moradi\" data-specialty=\"Psychologist\" data-iran-price=\"0\" data-online-price=\"190\">\n                <div class=\"price-chip\">From $190<\/div>\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1651008376811-b90baee60c1f?auto=format&amp;fit=crop&amp;w=900&amp;q=80\" alt=\"Dr. Leila Moradi\">\n                <div class=\"doctor-info\">\n                  <h4>Dr. Leila Moradi<\/h4>\n                  <p>Psychologist for online counseling, emotional support, therapy intake, and structured consultation across different psychology branches.<\/p>\n                  <div class=\"doctor-meta\">\n                    <div class=\"doctor-pill\">Psychologist<\/div>\n                    <div class=\"doctor-rating\">\u2605 4.9<\/div>\n                  <\/div>\n                  <div class=\"doctor-prices\">\n                    <div class=\"doctor-price-row\"><span>Reservation for treatment in Iran<\/span><strong>Not applicable<\/strong><\/div>\n                    <div class=\"doctor-price-row\"><span>Online consultation<\/span><strong>$190 full payment<\/strong><\/div>\n                  <\/div>\n                <\/div>\n              <\/article>\n            <\/div>\n\n            <div class=\"actions\">\n              <div class=\"actions-left\"><button class=\"btn btn-secondary prev-btn\">Back<\/button><\/div>\n              <div class=\"actions-right\"><button class=\"btn btn-primary next-btn\">Continue<\/button><\/div>\n            <\/div>\n          <\/section>\n\n          <section class=\"card card-pad panel\" data-step=\"3\">\n            <div class=\"head\">\n              <div>\n                <h3>3. Select date and time<\/h3>\n                <p>Show a few strong options only. The page stays cleaner when there are no large crowded calendars.<\/p>\n              <\/div>\n              <div class=\"tag\">Schedule<\/div>\n            <\/div>\n\n            <div class=\"date-strip\" id=\"dateStrip\">\n              <div class=\"date-chip active\" data-date=\"June 18, 2026\"><strong>18 Jun<\/strong><span>Thursday<\/span><\/div>\n              <div class=\"date-chip\" data-date=\"June 19, 2026\"><strong>19 Jun<\/strong><span>Friday<\/span><\/div>\n              <div class=\"date-chip\" data-date=\"June 22, 2026\"><strong>22 Jun<\/strong><span>Monday<\/span><\/div>\n              <div class=\"date-chip\" data-date=\"Flexible\"><strong>Flexible<\/strong><span>Any date<\/span><\/div>\n            <\/div>\n\n            <div class=\"slot-grid\" id=\"slotGrid\">\n              <div class=\"slot active\" data-slot=\"09:00 AM\"><strong>09:00 AM<\/strong><span>Available<\/span><\/div>\n              <div class=\"slot\" data-slot=\"11:30 AM\"><strong>11:30 AM<\/strong><span>Available<\/span><\/div>\n              <div class=\"slot\" data-slot=\"02:00 PM\"><strong>02:00 PM<\/strong><span>Available<\/span><\/div>\n              <div class=\"slot\" data-slot=\"04:30 PM\"><strong>04:30 PM<\/strong><span>Available<\/span><\/div>\n            <\/div>\n\n            <div class=\"actions\">\n              <div class=\"actions-left\"><button class=\"btn btn-secondary prev-btn\">Back<\/button><\/div>\n              <div class=\"actions-right\"><button class=\"btn btn-primary next-btn\">Continue<\/button><\/div>\n            <\/div>\n          <\/section>\n\n          <section class=\"card card-pad panel\" data-step=\"4\">\n            <div class=\"head\">\n              <div>\n                <h3>4. Enter patient information<\/h3>\n                <p>Only essential details are requested here so the process stays smooth and premium.<\/p>\n              <\/div>\n              <div class=\"tag\">Patient info<\/div>\n            <\/div>\n\n            <div class=\"form-grid\">\n              <div class=\"field\">\n                <label class=\"label\" for=\"fullName\">Full name<\/label>\n                <input class=\"input\" id=\"fullName\" type=\"text\" placeholder=\"Your full name\">\n              <\/div>\n              <div class=\"field\">\n                <label class=\"label\" for=\"email\">Email address<\/label>\n                <input class=\"input\" id=\"email\" type=\"email\" placeholder=\"name@email.com\">\n              <\/div>\n              <div class=\"field\">\n                <label class=\"label\" for=\"phone\">Phone \/ WhatsApp<\/label>\n                <input class=\"input\" id=\"phone\" type=\"text\" placeholder=\"+1 000 000 0000\">\n              <\/div>\n              <div class=\"field\">\n                <label class=\"label\" for=\"country\">Country of residence<\/label>\n                <select class=\"select\" id=\"country\">\n                  <option>Canada<\/option>\n                  <option>United States<\/option>\n                  <option>United Kingdom<\/option>\n                  <option>Germany<\/option>\n                  <option>Australia<\/option>\n                <\/select>\n              <\/div>\n              <div class=\"field-full\">\n                <label class=\"label\" for=\"notes\">Medical or booking notes<\/label>\n                <div class=\"help\">Briefly explain your situation, what you need, or any details the team should know.<\/div>\n                <textarea class=\"textarea\" id=\"notes\" placeholder=\"I would like to schedule an initial consultation and understand the next step for treatment.\"><\/textarea>\n              <\/div>\n            <\/div>\n\n            <div class=\"actions\">\n              <div class=\"actions-left\"><button class=\"btn btn-secondary prev-btn\">Back<\/button><\/div>\n              <div class=\"actions-right\"><button class=\"btn btn-primary next-btn\">Continue<\/button><\/div>\n            <\/div>\n          <\/section>\n\n          <section class=\"card card-pad panel\" data-step=\"5\">\n            <div class=\"head\">\n              <div>\n                <h3>5. Payment<\/h3>\n                <p>The system automatically changes the payable amount depending on whether the service is for treatment in Iran or for a full online consultation.<\/p>\n              <\/div>\n              <div class=\"tag\">Payment stage<\/div>\n            <\/div>\n\n            <div class=\"payment-rules\" id=\"paymentRuleText\">\n              For treatment in Iran, the patient pays a reservation deposit now. The remaining medical fees are handled later through the treatment coordination process.\n            <\/div>\n\n            <div class=\"payment-grid\" id=\"paymentOptions\">\n              <article class=\"pay-option active\" data-payment=\"card\">\n                <h4>Pay now<\/h4>\n                <p id=\"paymentCardDescription\">Reservation deposit for the selected doctor and service.<\/p>\n                <span class=\"amount\" id=\"paymentAmount\">$120<\/span>\n                <span class=\"sub\" id=\"paymentSub\">Secure deposit payment<\/span>\n              <\/article>\n\n              <article class=\"pay-option\" data-payment=\"invoice\">\n                <h4>Receive invoice link<\/h4>\n                <p>A payment link can be sent to the patient email address after this request is submitted.<\/p>\n                <span class=\"amount\" id=\"invoiceAmount\">$120<\/span>\n                <span class=\"sub\">Requested payment amount<\/span>\n              <\/article>\n            <\/div>\n\n            <div class=\"pay-methods\">\n              <div class=\"method\"><strong>Credit \/ Debit Card<\/strong><span>Best for fast online payment and instant confirmation.<\/span><\/div>\n              <div class=\"method\"><strong>Stripe \/ Payment Gateway<\/strong><span>Can be connected directly to your site for secure checkout.<\/span><\/div>\n              <div class=\"method\"><strong>Invoice Link<\/strong><span>Good if you want the coordination team to follow up manually.<\/span><\/div>\n            <\/div>\n\n            <div class=\"actions\">\n              <div class=\"actions-left\"><button class=\"btn btn-secondary prev-btn\">Back<\/button><\/div>\n              <div class=\"actions-right\"><button class=\"btn btn-dark next-btn\">Continue to Review<\/button><\/div>\n            <\/div>\n          <\/section>\n\n          <section class=\"card card-pad panel\" data-step=\"6\">\n            <div class=\"head\">\n              <div>\n                <h3>6. Review your admission<\/h3>\n                <p>Everything is shown clearly before final submission, including selected doctor, pricing, and payment rule.<\/p>\n              <\/div>\n              <div class=\"tag\">Final review<\/div>\n            <\/div>\n\n            <div class=\"review-grid\">\n              <article class=\"review-card\">\n                <h4>Service &amp; doctor<\/h4>\n                <div class=\"review-list\">\n                  <div class=\"review-row\"><div class=\"review-key\">Service<\/div><div class=\"review-value\" id=\"reviewService\">Dental Treatment<\/div><\/div>\n                  <div class=\"review-row\"><div class=\"review-key\">Doctor<\/div><div class=\"review-value\" id=\"reviewDoctor\">Dr. Arman Daryaei<\/div><\/div>\n                  <div class=\"review-row\"><div class=\"review-key\">Specialty<\/div><div class=\"review-value\" id=\"reviewSpecialty\">Dental Specialist<\/div><\/div>\n                <\/div>\n              <\/article>\n\n              <article class=\"review-card\">\n                <h4>Appointment<\/h4>\n                <div class=\"review-list\">\n                  <div class=\"review-row\"><div class=\"review-key\">Date<\/div><div class=\"review-value\" id=\"reviewDate\">June 18, 2026<\/div><\/div>\n                  <div class=\"review-row\"><div class=\"review-key\">Time<\/div><div class=\"review-value\" id=\"reviewTime\">09:00 AM<\/div><\/div>\n                  <div class=\"review-row\"><div class=\"review-key\">Country<\/div><div class=\"review-value\" id=\"reviewCountry\">Canada<\/div><\/div>\n                <\/div>\n              <\/article>\n\n              <article class=\"review-card\">\n                <h4>Patient<\/h4>\n                <div class=\"review-list\">\n                  <div class=\"review-row\"><div class=\"review-key\">Full name<\/div><div class=\"review-value\" id=\"reviewName\">\u2014<\/div><\/div>\n                  <div class=\"review-row\"><div class=\"review-key\">Email<\/div><div class=\"review-value\" id=\"reviewEmail\">\u2014<\/div><\/div>\n                  <div class=\"review-row\"><div class=\"review-key\">Phone<\/div><div class=\"review-value\" id=\"reviewPhone\">\u2014<\/div><\/div>\n                <\/div>\n              <\/article>\n\n              <article class=\"review-card\">\n                <h4>Payment summary<\/h4>\n                <div class=\"review-list\">\n                  <div class=\"review-row\"><div class=\"review-key\">Payment type<\/div><div class=\"review-value\" id=\"reviewPaymentType\">Reservation deposit<\/div><\/div>\n                  <div class=\"review-row\"><div class=\"review-key\">Amount due now<\/div><div class=\"review-value\" id=\"reviewPaymentAmount\">$150<\/div><\/div>\n                  <div class=\"review-row\"><div class=\"review-key\">Method<\/div><div class=\"review-value\" id=\"reviewPaymentMethod\">Pay now<\/div><\/div>\n                <\/div>\n              <\/article>\n            <\/div>\n\n            <div class=\"secure-box\" style=\"margin-top:18px\">\n              <strong>Submission note<\/strong>\n              <span>After final submission, you can connect the pay-now section to Stripe or any payment gateway. The current code is designed to make that integration straightforward.<\/span>\n            <\/div>\n\n            <div class=\"actions\">\n              <div class=\"actions-left\"><button class=\"btn btn-secondary prev-btn\">Back<\/button><\/div>\n              <div class=\"actions-right\"><button class=\"btn btn-primary\" id=\"submitBtn\">Submit Admission Request<\/button><\/div>\n            <\/div>\n          <\/section>\n\n        <\/div>\n\n        <aside class=\"sidebar\">\n          <section class=\"card card-pad summary\">\n            <h3>Admission Summary<\/h3>\n            <p>This panel keeps the user oriented while the main area stays clean and focused.<\/p>\n\n            <div class=\"summary-list\">\n              <div class=\"summary-item\"><div class=\"summary-key\">Service<\/div><div class=\"summary-value summary-placeholder\" id=\"summaryService\">Not selected yet<\/div><\/div>\n              <div class=\"summary-item\"><div class=\"summary-key\">Doctor<\/div><div class=\"summary-value summary-placeholder\" id=\"summaryDoctor\">Not selected yet<\/div><\/div>\n              <div class=\"summary-item\"><div class=\"summary-key\">Date<\/div><div class=\"summary-value summary-placeholder\" id=\"summaryDate\">Not selected yet<\/div><\/div>\n              <div class=\"summary-item\"><div class=\"summary-key\">Time<\/div><div class=\"summary-value summary-placeholder\" id=\"summaryTime\">Not selected yet<\/div><\/div>\n              <div class=\"summary-item\"><div class=\"summary-key\">Pay now<\/div><div class=\"summary-value\"><span class=\"summary-pending\" id=\"summaryAmount\">Pending<\/span><\/div><\/div>\n              <div class=\"summary-item\"><div class=\"summary-key\">Patient<\/div><div class=\"summary-value summary-placeholder\" id=\"summaryName\">Not entered yet<\/div><\/div>\n            <\/div>\n\n            <div class=\"divider\"><\/div>\n\n            <div class=\"highlight\">\n              <h4>Payment logic<\/h4>\n              <p id=\"sidebarPaymentText\">In-Iran services use a reservation deposit. Online consultation must be paid in full before booking is confirmed.<\/p>\n              <div class=\"bullets\">\n                <div>\u2022 cleaner layout without header clutter<\/div>\n                <div>\u2022 premium doctor cards with visible prices<\/div>\n                <div>\u2022 payment integrated into the flow<\/div>\n                <div>\u2022 easier to convert and easier to trust<\/div>\n              <\/div>\n            <\/div>\n          <\/section>\n\n          <section class=\"card card-pad assist\">\n            <h4 style=\"font-size:20px;margin-bottom:8px\">Need help before paying?<\/h4>\n            <p style=\"margin-bottom:14px\">You can keep this section for WhatsApp, live chat, or a support callback before the patient completes payment.<\/p>\n            <button class=\"btn btn-secondary\">Contact Support<\/button>\n          <\/section>\n        <\/aside>\n      <\/div>\n    <\/div>\n  <\/main>\n\n  <script>\n    const state = {\n      currentStep: 1,\n      service: 'Dental Treatment',\n      mode: 'iran',\n      doctor: '',\n      specialty: '',\n      iranPrice: 150,\n      onlinePrice: 320,\n      date: '',\n      time: '',\n      fullName: '',\n      email: '',\n      phone: '',\n      country: 'Canada',\n      notes: '',\n      paymentMethod: 'Pay now',\n      paymentType: 'Reservation deposit',\n      amountNow: 120\n    };\n\n    const stepStatus = document.getElementById('stepStatus');\n    const steps = document.querySelectorAll('#stepsNav .step');\n    const panels = document.querySelectorAll('.panel');\n\n    function recalcPayment(){\n      if(state.mode === 'online'){\n        state.amountNow = state.onlinePrice;\n        state.paymentType = 'Full payment';\n        document.getElementById('paymentRuleText').textContent = 'For online consultation, full payment is required before the booking is confirmed.';\n        document.getElementById('paymentCardDescription').textContent = 'Full consultation fee for the selected doctor.';\n        document.getElementById('paymentSub').textContent = 'Secure full payment';\n        document.getElementById('sidebarPaymentText').textContent = 'Online consultation must be paid in full before the appointment is confirmed.';\n      } else {\n        state.amountNow = state.iranPrice;\n        state.paymentType = 'Reservation deposit';\n        document.getElementById('paymentRuleText').textContent = 'For treatment in Iran, the patient pays a reservation deposit now. The remaining medical fees are handled later through the treatment coordination process.';\n        document.getElementById('paymentCardDescription').textContent = 'Reservation deposit for the selected doctor and service.';\n        document.getElementById('paymentSub').textContent = 'Secure deposit payment';\n        document.getElementById('sidebarPaymentText').textContent = 'In-Iran services use a reservation deposit. Online consultation must be paid in full before booking is confirmed.';\n      }\n\n      document.getElementById('paymentAmount').textContent = `$${state.amountNow}`;\n      document.getElementById('invoiceAmount').textContent = `$${state.amountNow}`;\n    }\n\n    function updateUI(){\n      stepStatus.textContent = `Step ${state.currentStep} of 6`;\n\n      steps.forEach((step, index) => {\n        step.classList.remove('active','done');\n        if(index + 1 < state.currentStep) step.classList.add('done');\n        if(index + 1 === state.currentStep) step.classList.add('active');\n      });\n\n      panels.forEach(panel => {\n        panel.classList.toggle('active', Number(panel.dataset.step) === state.currentStep);\n      });\n\n      recalcPayment();\n\n      const summaryService = document.getElementById('summaryService');\n      const summaryDoctor = document.getElementById('summaryDoctor');\n      const summaryDate = document.getElementById('summaryDate');\n      const summaryTime = document.getElementById('summaryTime');\n      const summaryAmount = document.getElementById('summaryAmount');\n      const summaryName = document.getElementById('summaryName');\n\n      summaryService.textContent = state.currentStep >= 1 && state.service ? state.service : 'Not selected yet';\n      summaryDoctor.textContent = state.currentStep >= 2 && state.doctor ? state.doctor : 'Not selected yet';\n      summaryDate.textContent = state.currentStep >= 3 && state.date ? state.date : 'Not selected yet';\n      summaryTime.textContent = state.currentStep >= 3 && state.time ? state.time : 'Not selected yet';\n      summaryName.textContent = state.fullName ? state.fullName : 'Not entered yet';\n\n      summaryService.classList.toggle('summary-placeholder', !(state.currentStep >= 1 && state.service));\n      summaryDoctor.classList.toggle('summary-placeholder', !(state.currentStep >= 2 && state.doctor));\n      summaryDate.classList.toggle('summary-placeholder', !(state.currentStep >= 3 && state.date));\n      summaryTime.classList.toggle('summary-placeholder', !(state.currentStep >= 3 && state.time));\n      summaryName.classList.toggle('summary-placeholder', !state.fullName);\n\n      if(state.currentStep >= 5){\n        summaryAmount.outerHTML = `<span class=\"summary-value\" id=\"summaryAmount\">$${state.amountNow}<\/span>`;\n      } else {\n        summaryAmount.outerHTML = `<span class=\"summary-pending\" id=\"summaryAmount\">Pending<\/span>`;\n      }\n\n      document.getElementById('reviewService').textContent = state.service || '\u2014';\n      document.getElementById('reviewDoctor').textContent = state.doctor || '\u2014';\n      document.getElementById('reviewSpecialty').textContent = state.specialty || '\u2014';\n      document.getElementById('reviewDate').textContent = state.date || '\u2014';\n      document.getElementById('reviewTime').textContent = state.time || '\u2014';\n      document.getElementById('reviewCountry').textContent = state.country;\n      document.getElementById('reviewName').textContent = state.fullName || '\u2014';\n      document.getElementById('reviewEmail').textContent = state.email || '\u2014';\n      document.getElementById('reviewPhone').textContent = state.phone || '\u2014';\n      document.getElementById('reviewPaymentType').textContent = state.paymentType;\n      document.getElementById('reviewPaymentAmount').textContent = `$${state.amountNow}`;\n      document.getElementById('reviewPaymentMethod').textContent = state.paymentMethod;\n    }\n\n    document.querySelectorAll('.next-btn').forEach(btn => {\n      btn.addEventListener('click', () => {\n        if(state.currentStep < 6){\n          if(state.currentStep === 4){\n            state.fullName = document.getElementById('fullName').value.trim();\n            state.email = document.getElementById('email').value.trim();\n            state.phone = document.getElementById('phone').value.trim();\n            state.country = document.getElementById('country').value;\n            state.notes = document.getElementById('notes').value.trim();\n          }\n          state.currentStep += 1;\n          updateUI();\n          window.scrollTo({top: 0, behavior: 'smooth'});\n        }\n      });\n    });\n\n    document.querySelectorAll('.prev-btn').forEach(btn => {\n      btn.addEventListener('click', () => {\n        if(state.currentStep > 1){\n          state.currentStep -= 1;\n          updateUI();\n          window.scrollTo({top: 0, behavior: 'smooth'});\n        }\n      });\n    });\n\n    document.querySelectorAll('#serviceGrid .service-card').forEach(card => {\n      card.addEventListener('click', () => {\n        document.querySelectorAll('#serviceGrid .service-card').forEach(c => c.classList.remove('active'));\n        card.classList.add('active');\n        state.service = card.dataset.service;\n        state.mode = card.dataset.mode;\n        document.querySelectorAll('#dateStrip .date-chip').forEach(c => c.classList.remove('active'));\n    const firstDate = document.querySelector('#dateStrip .date-chip');\n    if(firstDate) firstDate.classList.add('active');\n    document.querySelectorAll('#slotGrid .slot').forEach(s => s.classList.remove('active'));\n    const firstSlot = document.querySelector('#slotGrid .slot');\n    if(firstSlot) firstSlot.classList.add('active');\n\n    updateDoctorCompatibility();\n    updateUI();\n      });\n    });\n\n    document.querySelectorAll('#doctorGrid .doctor-card').forEach(card => {\n      card.addEventListener('click', () => {\n        document.querySelectorAll('#doctorGrid .doctor-card').forEach(c => c.classList.remove('active'));\n        card.classList.add('active');\n        state.doctor = card.dataset.doctor;\n        state.specialty = card.dataset.specialty;\n        state.iranPrice = Number(card.dataset.iranPrice);\n        state.onlinePrice = Number(card.dataset.onlinePrice);\n        updateDoctorCompatibility();\n        updateUI();\n      });\n    });\n\n    function updateDoctorCompatibility(){\n      const doctorCards = document.querySelectorAll('#doctorGrid .doctor-card');\n      doctorCards.forEach(card => {\n        const specialty = card.dataset.specialty;\n        let visible = true;\n\n        if(state.service === 'Dental Treatment') visible = specialty === 'Dental Specialist';\n        if(state.service === 'Skin Treatment' || state.service === 'Online Skin Consultation') visible = specialty === 'Dermatologist';\n        if(state.service === 'Eye Treatment') visible = specialty === 'Ophthalmologist';\n        if(state.service === 'Online Psychology Consultation') visible = specialty === 'Psychologist';\n        if(state.service === 'Cosmetic Surgery') visible = specialty === 'Dermatologist';\n        if(state.service === 'General Surgery Consultation') visible = specialty === 'Ophthalmologist' || specialty === 'Dental Specialist';\n        if(state.service === 'Hair Transplant') visible = specialty === 'Dermatologist';\n        if(state.service === 'Online Nutrition Consultation') visible = specialty === 'Psychologist';\n\n        card.style.display = visible ? '' : 'none';\n      });\n\n      const visibleActive = Array.from(doctorCards).find(card => card.style.display !== 'none' && card.classList.contains('active'));\n      if(!visibleActive){\n        const firstVisible = Array.from(doctorCards).find(card => card.style.display !== 'none');\n        if(firstVisible){\n          doctorCards.forEach(c => c.classList.remove('active'));\n          firstVisible.classList.add('active');\n          state.doctor = firstVisible.dataset.doctor;\n          state.specialty = firstVisible.dataset.specialty;\n          state.iranPrice = Number(firstVisible.dataset.iranPrice);\n          state.onlinePrice = Number(firstVisible.dataset.onlinePrice);\n        }\n      }\n    }\n\n    document.querySelectorAll('#dateStrip .date-chip').forEach(chip => {\n      chip.addEventListener('click', () => {\n        document.querySelectorAll('#dateStrip .date-chip').forEach(c => c.classList.remove('active'));\n        chip.classList.add('active');\n        state.date = chip.dataset.date;\n        updateUI();\n      });\n    });\n\n    document.querySelectorAll('#slotGrid .slot').forEach(slot => {\n      slot.addEventListener('click', () => {\n        document.querySelectorAll('#slotGrid .slot').forEach(s => s.classList.remove('active'));\n        slot.classList.add('active');\n        state.time = slot.dataset.slot;\n        updateUI();\n      });\n    });\n\n    document.querySelectorAll('#paymentOptions .pay-option').forEach(option => {\n      option.addEventListener('click', () => {\n        document.querySelectorAll('#paymentOptions .pay-option').forEach(o => o.classList.remove('active'));\n        option.classList.add('active');\n        state.paymentMethod = option.dataset.payment === 'card' ? 'Pay now' : 'Invoice link';\n        updateUI();\n      });\n    });\n\n    document.getElementById('fullName').addEventListener('input', e => {\n      state.fullName = e.target.value.trim();\n      updateUI();\n    });\n    document.getElementById('email').addEventListener('input', e => {\n      state.email = e.target.value.trim();\n      updateUI();\n    });\n    document.getElementById('phone').addEventListener('input', e => {\n      state.phone = e.target.value.trim();\n      updateUI();\n    });\n    document.getElementById('country').addEventListener('change', e => {\n      state.country = e.target.value;\n      updateUI();\n    });\n    document.getElementById('notes').addEventListener('input', e => {\n      state.notes = e.target.value.trim();\n      updateUI();\n    });\n\n    document.getElementById('submitBtn').addEventListener('click', () => {\n      alert('Admission request submitted successfully. You can now connect the payment step to Stripe or your preferred gateway.');\n    });\n\n    updateDoctorCompatibility();\n    updateUI();\n  <\/script>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-102","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/parsheal.com\/index.php\/wp-json\/wp\/v2\/pages\/102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/parsheal.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/parsheal.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/parsheal.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/parsheal.com\/index.php\/wp-json\/wp\/v2\/comments?post=102"}],"version-history":[{"count":5,"href":"https:\/\/parsheal.com\/index.php\/wp-json\/wp\/v2\/pages\/102\/revisions"}],"predecessor-version":[{"id":159,"href":"https:\/\/parsheal.com\/index.php\/wp-json\/wp\/v2\/pages\/102\/revisions\/159"}],"wp:attachment":[{"href":"https:\/\/parsheal.com\/index.php\/wp-json\/wp\/v2\/media?parent=102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}