{"id":42222,"date":"2024-12-11T15:05:39","date_gmt":"2024-12-11T15:05:39","guid":{"rendered":"https:\/\/theme-dev.cmsmasters.net\/la-diva\/?page_id=42222"},"modified":"2026-07-28T20:05:58","modified_gmt":"2026-07-28T20:05:58","slug":"appointment","status":"publish","type":"page","link":"https:\/\/fablook.co.uk\/?page_id=42222","title":{"rendered":"Appointment"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"42222\" class=\"elementor elementor-42222\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e5184c e-flex e-con-boxed cmsmasters-block-default e-con e-parent\" data-id=\"4e5184c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e19bac elementor-widget__width-inherit cmsmasters-block-default cmsmasters-sticky-default elementor-widget elementor-widget-html\" data-id=\"1e19bac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');\r\n\r\n  * {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  body {\r\n    font-family: Poppins, sans-serif;\r\n    background: #fefdfb;\r\n  }\r\n\r\n  \/* Hero Banner *\/\r\n  .hero-banner {\r\n    background: #fefdfb;\r\n    padding: 70px 40px;\r\n    text-align: center;\r\n    width: 100vw;\r\n    margin-left: calc(-50vw + 50%);\r\n    position: relative;\r\n  }\r\n\r\n  .hero-title {\r\n    font-family: \"Cormorant Garamond\", sans-serif;\r\n    font-weight: 400;\r\n    font-size: 52px;\r\n    color: #98145f;\r\n    margin: 0 0 15px 0;\r\n    letter-spacing: 1px;\r\n  }\r\n\r\n  .hero-subtitle {\r\n    font-family: Poppins, sans-serif;\r\n    font-weight: 400;\r\n    font-size: 16px;\r\n    color: #000000;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* Form Container *\/\r\n  .form-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 60px 40px;\r\n  }\r\n\r\n  .form-card {\r\n    background: #ffffff;\r\n    padding: 50px;\r\n    border: 1px solid #e0e0e0;\r\n    border-radius: 4px;\r\n  }\r\n\r\n  \/* Form Section *\/\r\n  .form-section {\r\n    margin-bottom: 40px;\r\n  }\r\n\r\n  .form-section:last-child {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .section-title {\r\n    font-family: \"Cormorant Garamond\", sans-serif;\r\n    font-weight: 400;\r\n    font-size: 20px;\r\n    color: #fe66cb;\r\n    margin: 0 0 20px 0;\r\n    padding-bottom: 12px;\r\n    border-bottom: 1px solid #fe66cb;\r\n    letter-spacing: 0.5px;\r\n  }\r\n\r\n  \/* Form Group *\/\r\n  .form-group {\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .form-label {\r\n    font-family: Poppins, sans-serif;\r\n    font-weight: 600;\r\n    font-size: 12px;\r\n    color: #333333;\r\n    margin-bottom: 10px;\r\n    display: block;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n  }\r\n\r\n  .form-label .required {\r\n    color: #fe66cb;\r\n  }\r\n\r\n  .form-input,\r\n  .form-select,\r\n  .form-date {\r\n    width: 100%;\r\n    padding: 12px 14px;\r\n    border: 1px solid #d0d0d0;\r\n    border-radius: 4px;\r\n    font-family: Poppins, sans-serif;\r\n    font-size: 14px;\r\n    color: #333333;\r\n    background: #ffffff;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .form-input::placeholder,\r\n  .form-date::placeholder {\r\n    color: #999999;\r\n    font-style: italic;\r\n  }\r\n\r\n  .form-input:focus,\r\n  .form-select:focus,\r\n  .form-date:focus {\r\n    outline: none;\r\n    border-color: #fe66cb;\r\n  }\r\n\r\n  .form-date {\r\n    cursor: pointer !important;\r\n  }\r\n\r\n  .form-date::-webkit-calendar-picker-indicator {\r\n    cursor: pointer;\r\n  }\r\n\r\n  \/* Radio Group *\/\r\n  .radio-group {\r\n    display: flex;\r\n    gap: 40px;\r\n    margin-top: 12px;\r\n  }\r\n\r\n  .radio-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .radio-wrapper input[type=\"radio\"] {\r\n    width: 18px;\r\n    height: 18px;\r\n    cursor: pointer;\r\n    accent-color: #fe66cb;\r\n  }\r\n\r\n  .radio-wrapper label {\r\n    font-family: Poppins, sans-serif;\r\n    font-weight: 500;\r\n    font-size: 14px;\r\n    color: #333333;\r\n    cursor: pointer;\r\n  }\r\n\r\n  \/* Contact Fields *\/\r\n  .contact-fields {\r\n    margin-top: 15px;\r\n  }\r\n\r\n  .contact-field {\r\n    display: none;\r\n  }\r\n\r\n  .contact-field.active {\r\n    display: block;\r\n  }\r\n\r\n  \/* Services Grid *\/\r\n  .services-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 12px;\r\n    margin-top: 15px;\r\n  }\r\n\r\n  .service-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 12px 14px;\r\n    border: 1px solid #d0d0d0;\r\n    border-radius: 4px;\r\n    background: #ffffff;\r\n    cursor: pointer;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .service-item:hover {\r\n    border-color: #fe66cb;\r\n    background: #fffbfd;\r\n  }\r\n\r\n  .service-item input[type=\"checkbox\"] {\r\n    width: 18px;\r\n    height: 18px;\r\n    cursor: pointer;\r\n    accent-color: #fe66cb;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .service-item label {\r\n    font-family: Poppins, sans-serif;\r\n    font-weight: 500;\r\n    font-size: 13px;\r\n    color: #333333;\r\n    cursor: pointer;\r\n    flex: 1;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* Subservices Section *\/\r\n  .subservices-section {\r\n    background: #f9f9f9;\r\n    border: 1px solid #e0e0e0;\r\n    border-radius: 4px;\r\n    padding: 18px;\r\n    margin-top: 15px;\r\n    margin-bottom: 20px;\r\n    display: none;\r\n  }\r\n\r\n  .subservices-section.show {\r\n    display: block;\r\n  }\r\n\r\n  .subservices-title {\r\n    font-family: \"Cormorant Garamond\", sans-serif;\r\n    font-weight: 400;\r\n    font-size: 14px;\r\n    color: #d59999;\r\n    margin: 0 0 15px 0;\r\n    padding-bottom: 10px;\r\n    border-bottom: 1px solid #d59999;\r\n  }\r\n\r\n  .subservices-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 10px;\r\n  }\r\n\r\n  .subservice-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 10px 12px;\r\n    border: 1px solid #d0d0d0;\r\n    border-radius: 4px;\r\n    background: #ffffff;\r\n    cursor: pointer;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .subservice-item:hover {\r\n    border-color: #fe66cb;\r\n  }\r\n\r\n  .subservice-item input[type=\"radio\"] {\r\n    width: 16px;\r\n    height: 16px;\r\n    cursor: pointer;\r\n    accent-color: #fe66cb;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .subservice-label {\r\n    font-family: Poppins, sans-serif;\r\n    font-weight: 500;\r\n    font-size: 12px;\r\n    color: #333333;\r\n    cursor: pointer;\r\n    flex: 1;\r\n    margin: 0;\r\n  }\r\n\r\n  .subservice-price {\r\n    font-family: \"Cormorant Garamond\", sans-serif;\r\n    font-weight: 400;\r\n    font-size: 13px;\r\n    color: #fe66cb;\r\n    font-weight: 600;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  \/* DateTime Row *\/\r\n  .datetime-row {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 20px;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  \/* Total Box *\/\r\n  .total-box {\r\n    background: #d59999;\r\n    padding: 25px;\r\n    border-radius: 4px;\r\n    text-align: center;\r\n    margin: 30px 0;\r\n  }\r\n\r\n  .total-label {\r\n    font-family: Poppins, sans-serif;\r\n    font-weight: 500;\r\n    font-size: 11px;\r\n    color: rgba(255, 255, 255, 0.9);\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  .total-amount {\r\n    font-family: \"Cormorant Garamond\", sans-serif;\r\n    font-weight: 400;\r\n    font-size: 40px;\r\n    color: #ffffff;\r\n    margin: 0;\r\n  }\r\n\r\n  \/* Button *\/\r\n  .form-button {\r\n    background: transparent !important;\r\n    background-color: transparent !important;\r\n    background-image: none !important;\r\n    color: #d59999 !important;\r\n    border: 1.5px solid #d59999v !important;\r\n    border-radius: 4px !important;\r\n    box-shadow: none !important;\r\n    padding: 14px 40px;\r\n    font-family: Poppins, sans-serif !important;\r\n    font-weight: 600 !important;\r\n    font-size: 12px !important;\r\n    text-transform: uppercase !important;\r\n    cursor: pointer;\r\n    letter-spacing: 1.5px !important;\r\n    margin-top: 15px;\r\n  }\r\n\r\n  .form-button::before,\r\n  .form-button::after {\r\n    display: none !important;\r\n    content: none !important;\r\n    background: none !important;\r\n  }\r\n\r\n  .form-button:hover {\r\n    background: #ffffff !important;\r\n    background-color: #ffffff !important;\r\n    color: #fe66cb !important;\r\n  }\r\n\r\n  \/* Policy *\/\r\n  .policy-box {\r\n    background: rgba(254, 102, 203, 0.06);\r\n    border-left: 3px solid #fe66cb;\r\n    border-radius: 4px;\r\n    padding: 18px;\r\n    margin-top: 30px;\r\n  }\r\n\r\n  .policy-text {\r\n    font-family: Poppins, sans-serif;\r\n    font-weight: 400;\r\n    font-size: 11px;\r\n    color: #fe66cb;\r\n    font-style: italic;\r\n    margin: 0;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  \/* Responsive *\/\r\n  @media (max-width: 768px) {\r\n    .hero-title {\r\n      font-size: 32px;\r\n    }\r\n\r\n    .form-container {\r\n      padding: 40px 20px;\r\n    }\r\n\r\n    .form-card {\r\n      padding: 30px 20px;\r\n    }\r\n\r\n    .services-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .subservices-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .datetime-row {\r\n      grid-template-columns: 1fr;\r\n    }\r\n\r\n    .radio-group {\r\n      flex-direction: column;\r\n      gap: 15px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .hero-banner {\r\n      padding: 50px 20px;\r\n    }\r\n\r\n    .hero-title {\r\n      font-size: 24px;\r\n    }\r\n\r\n    .form-container {\r\n      padding: 30px 15px;\r\n    }\r\n\r\n    .form-card {\r\n      padding: 20px 15px;\r\n    }\r\n\r\n    .form-input,\r\n    .form-select,\r\n    .form-date {\r\n      font-size: 13px;\r\n      padding: 11px 12px;\r\n    }\r\n\r\n    .services-grid {\r\n      grid-template-columns: 1fr;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- Hero Banner -->\r\n<div class=\"hero-banner\">\r\n  <h1 class=\"hero-title\">BOOK YOUR PERFECT APPOINTMENT<\/h1>\r\n  <p class=\"hero-subtitle\">Personalized beauty treatments crafted just for you<\/p>\r\n<\/div>\r\n\r\n<!-- Form Container -->\r\n<div class=\"form-container\">\r\n  <div class=\"form-card\">\r\n    <form id=\"appointmentForm\">\r\n\r\n      <!-- Your Information -->\r\n      <div class=\"form-section\">\r\n        <h2 class=\"section-title\">Your Information<\/h2>\r\n\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Full Name <span class=\"required\">*<\/span><\/label>\r\n          <input type=\"text\" class=\"form-input\" placeholder=\"e.g. Jane Doe\" required>\r\n        <\/div>\r\n\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Preferred Contact Method <span class=\"required\">*<\/span><\/label>\r\n          <div class=\"radio-group\">\r\n            <div class=\"radio-wrapper\">\r\n              <input type=\"radio\" id=\"phone-method\" name=\"contactMethod\" value=\"phone\" checked onchange=\"toggleContactField()\">\r\n              <label for=\"phone-method\">Phone<\/label>\r\n            <\/div>\r\n            <div class=\"radio-wrapper\">\r\n              <input type=\"radio\" id=\"email-method\" name=\"contactMethod\" value=\"email\" onchange=\"toggleContactField()\">\r\n              <label for=\"email-method\">Email<\/label>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"contact-fields\">\r\n            <div class=\"contact-field active\" id=\"phoneField\">\r\n              <label class=\"form-label\" style=\"margin-top: 15px;\">Phone Number <span class=\"required\">*<\/span><\/label>\r\n              <input type=\"tel\" class=\"form-input\" id=\"phoneInput\" placeholder=\"e.g. 020 7123 4567\" required>\r\n            <\/div>\r\n            <div class=\"contact-field\" id=\"emailField\">\r\n              <label class=\"form-label\" style=\"margin-top: 15px;\">Email Address <span class=\"required\">*<\/span><\/label>\r\n              <input type=\"email\" class=\"form-input\" id=\"emailInput\" placeholder=\"e.g. jane@example.com\">\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Select Services -->\r\n      <div class=\"form-section\">\r\n        <h2 class=\"section-title\">Select Your Services<\/h2>\r\n\r\n        <div class=\"services-grid\">\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"sig\" name=\"service\" value=\"signature\" onchange=\"toggleSubservices('signature')\">\r\n            <label for=\"sig\">Signature Fab Look<\/label>\r\n          <\/div>\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"threading\" name=\"service\" value=\"threading\" onchange=\"toggleSubservices('threading')\">\r\n            <label for=\"threading\">Threading<\/label>\r\n          <\/div>\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"waxing\" name=\"service\" value=\"waxing\" onchange=\"toggleSubservices('waxing')\">\r\n            <label for=\"waxing\">Waxing<\/label>\r\n          <\/div>\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"bodywax\" name=\"service\" value=\"bodywax\" onchange=\"toggleSubservices('bodywax')\">\r\n            <label for=\"bodywax\">Body Waxing<\/label>\r\n          <\/div>\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"tinting\" name=\"service\" value=\"tinting\" onchange=\"toggleSubservices('tinting')\">\r\n            <label for=\"tinting\">Tinting<\/label>\r\n          <\/div>\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"tintpkg\" name=\"service\" value=\"tintpkg\" onchange=\"toggleSubservices('tintpkg')\">\r\n            <label for=\"tintpkg\">Tinting (Packages)<\/label>\r\n          <\/div>\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"lashext\" name=\"service\" value=\"lashext\" onchange=\"toggleSubservices('lashext')\">\r\n            <label for=\"lashext\">Lash Extensions<\/label>\r\n          <\/div>\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"facial\" name=\"service\" value=\"facial\" onchange=\"toggleSubservices('facial')\">\r\n            <label for=\"facial\">Facial Lab<\/label>\r\n          <\/div>\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"derma\" name=\"service\" value=\"derma\" onchange=\"toggleSubservices('derma')\">\r\n            <label for=\"derma\">Dermalogica Facials<\/label>\r\n          <\/div>\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"makeup\" name=\"service\" value=\"makeup\" onchange=\"toggleSubservices('makeup')\">\r\n            <label for=\"makeup\">Makeup<\/label>\r\n          <\/div>\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"manicure\" name=\"service\" value=\"manicure\" onchange=\"toggleSubservices('manicure')\">\r\n            <label for=\"manicure\">Manicure \/ Pedicure<\/label>\r\n          <\/div>\r\n          <div class=\"service-item\">\r\n            <input type=\"checkbox\" id=\"bridal\" name=\"service\" value=\"bridal\" onchange=\"toggleSubservices('bridal')\">\r\n            <label for=\"bridal\">Bridal Makeup<\/label>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Subservices Container -->\r\n        <div id=\"subservicesContainer\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Schedule Appointment -->\r\n      <div class=\"form-section\">\r\n        <h2 class=\"section-title\">Schedule Your Appointment<\/h2>\r\n\r\n        <div class=\"form-group\">\r\n          <label class=\"form-label\">Appointment Date <span class=\"required\">*<\/span><\/label>\r\n          <input type=\"date\" class=\"form-date\" required>\r\n        <\/div>\r\n\r\n        <div class=\"datetime-row\">\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Hours <span class=\"required\">*<\/span><\/label>\r\n            <select class=\"form-select\">\r\n              <option>-- Select Hour --<\/option>\r\n              <option>09:00<\/option>\r\n              <option>10:00<\/option>\r\n              <option>11:00<\/option>\r\n              <option>12:00<\/option>\r\n              <option>13:00<\/option>\r\n              <option>14:00<\/option>\r\n              <option>15:00<\/option>\r\n              <option>16:00<\/option>\r\n              <option>17:00<\/option>\r\n              <option>18:00<\/option>\r\n            <\/select>\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Minutes <span class=\"required\">*<\/span><\/label>\r\n            <select class=\"form-select\">\r\n              <option>-- Select Minutes --<\/option>\r\n              <option>00<\/option>\r\n              <option>15<\/option>\r\n              <option>30<\/option>\r\n              <option>45<\/option>\r\n            <\/select>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Total -->\r\n      <div class=\"total-box\">\r\n        <div class=\"total-label\">Total Amount<\/div>\r\n        <p class=\"total-amount\" id=\"totalAmount\">\u00a3 0.00<\/p>\r\n      <\/div>\r\n\r\n      <!-- Button -->\r\n      <button type=\"submit\" class=\"form-button\">Book Appointment<\/button>\r\n\r\n      <!-- Policy -->\r\n      <div class=\"policy-box\">\r\n        <p class=\"policy-text\">\r\n          We provide a reminder service via text or email. A minimum of 24hrs is required for cancellation, or a 50% charge will apply. If you do not attend your appointment without notice or cancel on the day, a 100% charge will be applied.\r\n        <\/p>\r\n      <\/div>\r\n    <\/form>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  \/\/ Pricing Database - UPDATED FROM BROCHURE\r\n  const pricingData = {\r\n    signature: {\r\n      name: \"Signature Fab Look\",\r\n      services: [\r\n        { name: \"Henna Brows\", price: 25 },\r\n        { name: \"Brow Lamination\", price: 30 },\r\n        { name: \"Lash Lift (LVL)\", price: 35 },\r\n        { name: \"Lash Lift & Brow Lamination with Tint\", price: 70 }\r\n      ]\r\n    },\r\n    threading: {\r\n      name: \"Threading\",\r\n      services: [\r\n        { name: \"Upper Lip\", price: 4 },\r\n        { name: \"Chin\", price: 4 },\r\n        { name: \"Forehead\", price: 5 },\r\n        { name: \"Lower Lip & Chin\", price: 5 },\r\n        { name: \"Eyebrows\", price: 7 },\r\n        { name: \"Sides\", price: 8 },\r\n        { name: \"Neck\", price: 8 },\r\n        { name: \"Full Face (Excluding Eyebrows)\", price: 25 },\r\n        { name: \"Full Face (Including Eyebrows)\", price: 28 },\r\n        { name: \"Full Face (Including Eyebrows & Neck)\", price: 33 }\r\n      ]\r\n    },\r\n    waxing: {\r\n      name: \"Waxing\",\r\n      services: [\r\n        { name: \"Upper Lip\", price: 5 },\r\n        { name: \"Chin\", price: 5 },\r\n        { name: \"Forehead\", price: 6 },\r\n        { name: \"Lower Lip & Chin\", price: 7 },\r\n        { name: \"Eyebrows\", price: 8 },\r\n        { name: \"Sides\", price: 8 },\r\n        { name: \"Neck\", price: 8 },\r\n        { name: \"Full Face (Excluding Eyebrows)\", price: 28 },\r\n        { name: \"Full Face (Including Eyebrows)\", price: 33 },\r\n        { name: \"Full Face (Including Eyebrows & Neck)\", price: 35 }\r\n      ]\r\n    },\r\n    bodywax: {\r\n      name: \"Body Waxing\",\r\n      services: [\r\n        { name: \"Underarms\", price: 10 },\r\n        { name: \"Back Wax\", price: 10 },\r\n        { name: \"Bikini Line\", price: 10 },\r\n        { name: \"Stomach\", price: 10 },\r\n        { name: \"Full Arms\", price: 15 },\r\n        { name: \"Half Legs\", price: 15 },\r\n        { name: \"Full Legs\", price: 25 },\r\n        { name: \"Hollywood Wax\", price: 25 },\r\n        { name: \"Full Legs + Bikini Line\", price: 30 },\r\n        { name: \"Full Body Wax Excluding Hollywood\", price: 70 },\r\n        { name: \"Full Body Wax Including Hollywood\", price: 90 }\r\n      ]\r\n    },\r\n    tinting: {\r\n      name: \"Tinting\",\r\n      services: [\r\n        { name: \"Eyebrow Tint\", price: 10 },\r\n        { name: \"Eyelash Tint\", price: 12 }\r\n      ]\r\n    },\r\n    tintpkg: {\r\n      name: \"Tinting (Packages)\",\r\n      services: [\r\n        { name: \"Eyebrow Thread + Brow Tint\", price: 17 },\r\n        { name: \"Eyebrow Wax + Brow Tint\", price: 17 },\r\n        { name: \"Tint Special (Brows & Lashes)\", price: 20 },\r\n        { name: \"HD Fab Look (E.B. Thread\/Wax, Brows & Lash Tint)\", price: 26 }\r\n      ]\r\n    },\r\n    lashext: {\r\n      name: \"Lash Extensions\",\r\n      services: [\r\n        { name: \"Strip Lashes\", price: 10 },\r\n        { name: \"Lash Removal\", price: 10 },\r\n        { name: \"Cluster Lashes\", price: 40 },\r\n        { name: \"Classic\", price: 55 },\r\n        { name: \"Hybrid\", price: 55 },\r\n        { name: \"Russian Volume\", price: 60 }\r\n      ]\r\n    },\r\n    facial: {\r\n      name: \"Facial Lab\",\r\n      services: [\r\n        { name: \"Mini Facial \/ Face Clean-up\", price: 30 },\r\n        { name: \"Fruit Facial\", price: 38 },\r\n        { name: \"Herbal Facial\", price: 38 },\r\n        { name: \"Gold Glow\", price: 38 },\r\n        { name: \"Brightning & Glow\", price: 38 }\r\n      ]\r\n    },\r\n    derma: {\r\n      name: \"Dermalogica Facials\",\r\n      services: [\r\n        { name: \"Teen & Glow\", price: 45 },\r\n        { name: \"Face Cleanup & Glow\", price: 45 },\r\n        { name: \"Pro Brightening\", price: 65 },\r\n        { name: \"Pro Calm\", price: 65 },\r\n        { name: \"Pro Clear\", price: 65 },\r\n        { name: \"Pro Firm\", price: 65 }\r\n      ]\r\n    },\r\n    makeup: {\r\n      name: \"Makeup\",\r\n      services: [\r\n        { name: \"Day Makeup\", price: 50 },\r\n        { name: \"Evening Makeup\", price: 50 },\r\n        { name: \"Teen Makeup\", price: 50 },\r\n        { name: \"Photoshoot Makeup\", price: 50 }\r\n      ]\r\n    },\r\n    manicure: {\r\n      name: \"Manicure \/ Pedicure\",\r\n      services: [\r\n        { name: \"Express Russian Manicure\", price: 20 },\r\n        { name: \"Classic Manicure\", price: 25 },\r\n        { name: \"Basic Pedicure complementary polish\", price: 25 },\r\n        { name: \"Deluxe Pedicure complementary polish\", price: 30 },\r\n        { name: \"Gel Toes\", price: 30 },\r\n        { name: \"Builder Gel (BIAB Hand)\", price: 40 },\r\n        { name: \"Gel Spa Pedicure\", price: 42 },\r\n        { name: \"Gel Spa Manicure\", price: 45 },\r\n        { name: \"Nail Art\", price: 5 },\r\n        { name: \"French Tips\", price: 7 },\r\n        { name: \"Gel\", price: 10 },\r\n        { name: \"Signature Combo Pack (Hands & Feet)\", price: 47 },\r\n        { name: \"Spa Hand & Toes Gel Package\", price: 85 }\r\n      ]\r\n    },\r\n    bridal: {\r\n      name: \"Bridal Makeup\",\r\n      services: [\r\n        { name: \"Bridal Makeup (Bride)\", price: 80 },\r\n        { name: \"Bridal Makeup (Bridal Party)\", price: 70 },\r\n        { name: \"Bridal Makeup Trial\", price: 50 }\r\n      ]\r\n    }\r\n  };\r\n\r\n  function toggleContactField() {\r\n    const phoneMethod = document.getElementById('phone-method').checked;\r\n    const phoneField = document.getElementById('phoneField');\r\n    const emailField = document.getElementById('emailField');\r\n    \r\n    if (phoneMethod) {\r\n      phoneField.classList.add('active');\r\n      emailField.classList.remove('active');\r\n      document.getElementById('phoneInput').required = true;\r\n      document.getElementById('emailInput').required = false;\r\n    } else {\r\n      phoneField.classList.remove('active');\r\n      emailField.classList.add('active');\r\n      document.getElementById('phoneInput').required = false;\r\n      document.getElementById('emailInput').required = true;\r\n    }\r\n  }\r\n\r\n  function toggleSubservices(serviceKey) {\r\n    renderSubservices();\r\n    updateTotal();\r\n    \r\n    \/\/ Auto-scroll to subservices section with smooth scroll\r\n    setTimeout(() => {\r\n      const subservicesContainer = document.getElementById('subservicesContainer');\r\n      if (subservicesContainer && subservicesContainer.children.length > 0) {\r\n        subservicesContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n      }\r\n    }, 100);\r\n  }\r\n\r\n  function renderSubservices() {\r\n    const container = document.getElementById('subservicesContainer');\r\n    if (!container) {\r\n      console.error('Subservices container not found');\r\n      return;\r\n    }\r\n    \r\n    const checkedServices = Array.from(document.querySelectorAll('input[name=\"service\"]:checked')).map(cb => cb.value);\r\n    \r\n    let html = '';\r\n    checkedServices.forEach(serviceKey => {\r\n      const service = pricingData[serviceKey];\r\n      if (!service) {\r\n        console.warn(`Service not found: ${serviceKey}`);\r\n        return;\r\n      }\r\n      \r\n      html += `\r\n        <div class=\"subservices-section show\">\r\n          <div class=\"subservices-title\">${service.name}<\/div>\r\n          <div class=\"subservices-grid\">\r\n      `;\r\n      \r\n      service.services.forEach((sub, idx) => {\r\n        const subId = `${serviceKey}_${idx}`;\r\n        html += `\r\n          <div class=\"subservice-item\">\r\n            <input type=\"checkbox\" id=\"${subId}\" name=\"subservice\" value=\"${sub.price}\" onchange=\"updateTotal()\">\r\n            <label for=\"${subId}\" class=\"subservice-label\">${sub.name}<\/label>\r\n            <span class=\"subservice-price\">\u00a3${sub.price}<\/span>\r\n          <\/div>\r\n        `;\r\n      });\r\n      \r\n      html += `\r\n          <\/div>\r\n        <\/div>\r\n      `;\r\n    });\r\n\r\n    container.innerHTML = html;\r\n  }\r\n\r\n  function updateTotal() {\r\n    let total = 0;\r\n    const allSelectedSubs = Array.from(document.querySelectorAll('input[name=\"subservice\"]:checked'));\r\n    \r\n    allSelectedSubs.forEach(checkbox => {\r\n      total += parseFloat(checkbox.value);\r\n    });\r\n\r\n    const totalElement = document.getElementById('totalAmount');\r\n    if (totalElement) {\r\n      totalElement.textContent = `\u00a3 ${total.toFixed(2)}`;\r\n    }\r\n  }\r\n\r\n  document.getElementById('appointmentForm').addEventListener('submit', function(e) {\r\n    e.preventDefault();\r\n    alert('Thank you! Your appointment has been booked. We will send a confirmation shortly.');\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BOOK YOUR PERFECT APPOINTMENT Personalized beauty treatments crafted just for you Your Information Full Name * Preferred Contact Method * Phone Email Phone Number * Email Address * Select Your Services Signature Fab Look Threading Waxing Body Waxing Tinting Tinting (Packages) Lash Extensions Facial Lab Dermalogica Facials Makeup Manicure \/ Pedicure Bridal Makeup Schedule Your&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-42222","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/42222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fablook.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=42222"}],"version-history":[{"count":18,"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/42222\/revisions"}],"predecessor-version":[{"id":43651,"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/42222\/revisions\/43651"}],"wp:attachment":[{"href":"https:\/\/fablook.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=42222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}