updated ui

components/blog-details/MostReadBlogs.js

@@ -12,6 +12,7 @@ import "swiper/css/pagination";
 import "swiper/css/navigation";
 import "swiper/css/navigation";
 import { BlogData } from "../blog/BlogItem.js";
 import { BlogData } from "../blog/BlogItem.js";
 import Image from "next/image.js";
 import Image from "next/image.js";
+import ActiveLink from "../common/ActiveLink.js";
 const MostReadBlogs = () => {
 const MostReadBlogs = () => {
   return (
   return (
     <section className="most-read-blogs-session">
     <section className="most-read-blogs-session">
@@ -26,7 +27,8 @@ const MostReadBlogs = () => {
                 </div>
                 </div>
               </motion.div>
               </motion.div>
               <div className="view-all-btn">
               <div className="view-all-btn">
-                <Button variant="primary">View All</Button>
+                <ActiveLink prefetch href="/blog"><Button variant="primary">View All</Button></ActiveLink>
+
               </div>
               </div>
             </div>
             </div>
           </div>
           </div>
@@ -74,7 +76,7 @@ const MostReadBlogs = () => {
                             <div className="info">
                             <div className="info">
                               <div className="read-row">
                               <div className="read-row">
                                 <span className="image-container">
                                 <span className="image-container">
-                                  <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
+                                  <Image priority layout="fill" alt="" className="image img-fluid" src="/images/icons/clock.svg" />
                                 </span>
                                 </span>
                                 <div className="">{data.read}</div>
                                 <div className="">{data.read}</div>
                               </div>
                               </div>

components/detail/Detail.js

@@ -109,7 +109,7 @@ const Detail = () => {
           </div>
           </div>
         )}
         )}
         <GuestReviews activityById={activityById} />
         <GuestReviews activityById={activityById} />
-        <SimilarExperiences allActivitiesData={allActivitiesData} />
+        <SimilarExperiences allActivitiesData={allActivitiesData} activityById={activityById} />
         <Faqs faqs={faqs} />
         <Faqs faqs={faqs} />
         <SignUpToExperienceOurPlatform />
         <SignUpToExperienceOurPlatform />
       </main>
       </main>

components/detail/DetailInfo.js

@@ -20,6 +20,7 @@ import { sanitizeTimeRange } from "../../services/imageHandling";
 
 
 const DetailInfo = ({ activityById }) => {
 const DetailInfo = ({ activityById }) => {
   const router = useRouter();
   const router = useRouter();
+  console.log("activityById >>>>>", activityById)
   const dispatch = useDispatch();
   const dispatch = useDispatch();
   useEffect(() => {
   useEffect(() => {
     dispatch(getCurrentEndUser());
     dispatch(getCurrentEndUser());
@@ -176,7 +177,7 @@ const DetailInfo = ({ activityById }) => {
         </Modal.Body>
         </Modal.Body>
       </Modal>
       </Modal>
       {activityById && (
       {activityById && (
-        <Modal
+        <Modal dialogClassName="modal-01-session"
           centered
           centered
           show={enquiryModal}
           show={enquiryModal}
           onHide={() => {
           onHide={() => {
@@ -186,19 +187,19 @@ const DetailInfo = ({ activityById }) => {
           }}
           }}
         >
         >
           <Modal.Header>
           <Modal.Header>
-            <h4>Send Enquiry</h4>
+            <h2>Send Enquiry</h2>
           </Modal.Header>
           </Modal.Header>
           <Modal.Body>
           <Modal.Body>
             <div>Experience Name:</div>
             <div>Experience Name:</div>
-            <div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
+            <div className="text01">
               {activityById.data.attributes.name}
               {activityById.data.attributes.name}
             </div>
             </div>
             <div className="mt-3">Full Name:</div>
             <div className="mt-3">Full Name:</div>
-            <div className="" style={{ fontWeight: "bold" }}>
+            <div className="text01">
               {endUser?.attributes.name}
               {endUser?.attributes.name}
             </div>
             </div>
             <div className="mt-3">Email ID:</div>
             <div className="mt-3">Email ID:</div>
-            <div className="" style={{ fontSize: "22px", fontWeight: "bold" }}>
+            <div className="text01">
               {endUser?.attributes.email}
               {endUser?.attributes.email}
             </div>
             </div>
             <div className="row d-flex justify-content-center">
             <div className="row d-flex justify-content-center">

components/detail/SimilarExperiences.js

@@ -15,7 +15,8 @@ import { cleanImage } from "../../services/imageHandling.js";
 import { useRouter } from "next/router.js";
 import { useRouter } from "next/router.js";
 import WishlistComponent from "./WIshlistComponent.js";
 import WishlistComponent from "./WIshlistComponent.js";
 import { useSelector } from "react-redux";
 import { useSelector } from "react-redux";
-const SimilarExperiences = ({ allActivitiesData }) => {
+import ActiveLink from "../common/ActiveLink.js";
+const SimilarExperiences = ({ allActivitiesData, activityById }) => {
   const router = useRouter();
   const router = useRouter();
   const [listingData, setListingData] = useState([]);
   const [listingData, setListingData] = useState([]);
   const { endUser } = useSelector(state => state.endUser);
   const { endUser } = useSelector(state => state.endUser);
@@ -71,7 +72,10 @@ const SimilarExperiences = ({ allActivitiesData }) => {
                   </div>
                   </div>
                 </motion.div>
                 </motion.div>
                 <div className="view-all-btn">
                 <div className="view-all-btn">
-                  <Button variant="primary">View All</Button>
+                  <ActiveLink prefetch href={`/listing?category=${activityById?.data.attributes.category?.data?.id}`}>
+                    <Button variant="primary">View All</Button>
+                  </ActiveLink>
+
                 </div>
                 </div>
               </div>
               </div>
             </div>
             </div>

components/home/BrowseExperiences.js

@@ -18,6 +18,8 @@ import { useSelector } from "react-redux";
 import Link from "next/link.js";
 import Link from "next/link.js";
 import ActiveLink from "../common/ActiveLink.js";
 import ActiveLink from "../common/ActiveLink.js";
 const BrowseExperiences = ({ allActivitiesData }) => {
 const BrowseExperiences = ({ allActivitiesData }) => {
+  console.log("allActivitiesData>>>>>>", allActivitiesData);
+
   const { endUser } = useSelector(state => state.endUser);
   const { endUser } = useSelector(state => state.endUser);
   const calculateRating = data => {
   const calculateRating = data => {
     let value = 0;
     let value = 0;
@@ -108,7 +110,7 @@ const BrowseExperiences = ({ allActivitiesData }) => {
                                         {/* {console.log(">>", calculateRating(data?.attributes?.reviews.data))} */}
                                         {/* {console.log(">>", calculateRating(data?.attributes?.reviews.data))} */}
                                         {<span className="number">{calculateRating(data?.attributes?.reviews.data)}</span>}
                                         {<span className="number">{calculateRating(data?.attributes?.reviews.data)}</span>}
                                         <span className="image-container">
                                         <span className="image-container">
-                                          <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/star.svg" />
+                                          <Image layout="fill" alt="" priority className="image img-fluid" src="/images/icons/star.svg" />
                                         </span>
                                         </span>
                                       </div>
                                       </div>
                                     )}
                                     )}
@@ -133,11 +135,24 @@ const BrowseExperiences = ({ allActivitiesData }) => {
                                       // onClick={() => {
                                       // onClick={() => {
                                       //   router.push(`/activities/${data.id}`);
                                       //   router.push(`/activities/${data.id}`);
                                       // }}
                                       // }}
-                                      variant="primary"
+                                      variant="primary me-2"
                                     >
                                     >
                                       Explore Now
                                       Explore Now
                                     </Button>
                                     </Button>
                                   </ActiveLink>
                                   </ActiveLink>
+
+                                  {data?.attributes.link && (
+                                    <Button
+                                      // disabled={loading}
+                                      onClick={() => {
+                                        window.open(data?.attributes?.link, "_blank", "noopener,noreferrer");
+                                      }}
+                                      variant="primary"
+                                    >
+                                      Book Now
+                                    </Button>
+                                  )}
+
                                 </div>
                                 </div>
                               </div>
                               </div>
                             </div>
                             </div>

components/listing/ListingItems.js

@@ -194,10 +194,21 @@ const ListingItems = ({ allActivitiesData, loading, gridClass, totalCount }) =>
                                   onClick={() => {
                                   onClick={() => {
                                     router.push(`/activities/${data.id}`);
                                     router.push(`/activities/${data.id}`);
                                   }}
                                   }}
-                                  variant="primary"
+                                  variant="primary me-2"
                                 >
                                 >
                                   Explore Now
                                   Explore Now
                                 </Button>
                                 </Button>
+                                {data?.attributes.link && (
+                                  <Button
+                                    // disabled={loading}
+                                    onClick={() => {
+                                      window.open(data?.attributes?.link, "_blank", "noopener,noreferrer");
+                                    }}
+                                    variant="primary"
+                                  >
+                                    Book Now
+                                  </Button>
+                                )}
                               </div>
                               </div>
                             </div>
                             </div>
                           </div>
                           </div>

components/signup/Signup.js

@@ -270,7 +270,7 @@ const Signup = props => {
                               onChange={handleChange}
                               onChange={handleChange}
                               onBlur={handleBlur}
                               onBlur={handleBlur}
                             />
                             />
-                            <span className="checkmark"></span>I Agree to the <a onClick={() => { setIsOpenEis(true) }}>terms & conditions*</a>
+                            <span className="checkmark"></span>I Agree to the <a className="cl-blue" onClick={() => { setIsOpenEis(true) }}>terms & conditions*</a>
                           </label>
                           </label>
                           <br />
                           <br />
 
 

components/vendor/BusinessDetails.js

@@ -89,7 +89,7 @@ const BusinessDetails = () => {
   useEffect(() => {
   useEffect(() => {
     setbrandLogo(vendorDetails?.attributes.brandLogo.data?.id)
     setbrandLogo(vendorDetails?.attributes.brandLogo.data?.id)
   }, [])
   }, [])
-  
+
   const ApprovalStatus = () => {
   const ApprovalStatus = () => {
     if (loadedUser) {
     if (loadedUser) {
       switch (loadedUser.approved) {
       switch (loadedUser.approved) {
@@ -212,7 +212,7 @@ const BusinessDetails = () => {
                                 </div>
                                 </div>
                               </div>
                               </div>
                               <div className="col-12  col-lg-5">
                               <div className="col-12  col-lg-5">
-                                <div className="input-group">
+                                <div className="input-group align-items-center">
                                   <label>Brand Logo</label>
                                   <label>Brand Logo</label>
                                   {/* <div className="custom-file">
                                   {/* <div className="custom-file">
                                     <input
                                     <input
@@ -230,7 +230,7 @@ const BusinessDetails = () => {
                                     </label>
                                     </label>
                                   </div> */}
                                   </div> */}
                                   <UploadImageCustom disabled={disableFields} setImage={setbrandLogo} isPdf={false} populatedImages={vendorDetails?.attributes.brandLogo} />
                                   <UploadImageCustom disabled={disableFields} setImage={setbrandLogo} isPdf={false} populatedImages={vendorDetails?.attributes.brandLogo} />
-                                  <p className="textS">Upload in .PNG or .JPG/JPEG format</p>
+                                  <p className="textS pe-5 pt-2">Upload in .PNG or .JPG/JPEG format</p>
                                   {errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
                                   {errors.brandLogoFile && touched.brandLogoFile && <span className="form-error">{errors.brandLogoFile}</span>}
                                 </div>
                                 </div>
                               </div>
                               </div>
@@ -359,7 +359,7 @@ const BusinessDetails = () => {
                     </li>
                     </li>
                     <li>
                     <li>
                       <Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
                       <Image alt="" src="/images/vendor/call.svg" width="32" height="32" />
-                      <p>+1 (407) 8798 789</p>
+                      <p className="number">+1 (407) 8798 789</p>
                     </li>
                     </li>
                   </ul>
                   </ul>
                 </div>
                 </div>

components/vendor/OrderListing.js

@@ -143,18 +143,18 @@ const OrderListing = () => {
         <div className="col-12 col-lg-12">
         <div className="col-12 col-lg-12">
           <div className="rightContent">
           <div className="rightContent">
             <div className="d-flex align-items-center justify-content-between px-2 mb-2"> */}
             <div className="d-flex align-items-center justify-content-between px-2 mb-2"> */}
-              <div className="mb-3">
-                <h2 style={{fontSize: 28}}>Orders</h2>
-                <p>View all the orders</p>
-              </div>
-              {/* <div>
+      <div className="mb-3 d-flex align-items-center justify-content-between">
+        <h2 style={{ fontSize: 28 }}>Orders</h2>
+        <p><a href="">View all the orders</a></p>
+      </div>
+      {/* <div>
                 <Button type="button" variant="" className="btnAdd m-0">
                 <Button type="button" variant="" className="btnAdd m-0">
                   <Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
                   <Image alt="" width="16" height="16" src="/images/vendor/icon-filter.svg" className="me-2" /> Filter
                 </Button>
                 </Button>
               </div>
               </div>
             </div> */}
             </div> */}
-            <Table columns={columns} dataSource={data} onChange={onChange} />
-          {/* </div>
+      <Table columns={columns} dataSource={data} onChange={onChange} />
+      {/* </div>
         </div>
         </div>
       </div> */}
       </div> */}
       <Modal
       <Modal

components/vendor/UpdateActivity.js

@@ -217,7 +217,7 @@ const UpdateActivity = () => {
                     }}
                     }}
                     validationSchema={activityDetailsValidationSchema}
                     validationSchema={activityDetailsValidationSchema}
                     // enableReinitialize={true}
                     // enableReinitialize={true}
-                    onSubmit={values => {}}
+                    onSubmit={values => { }}
                   >
                   >
                     {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue, resetForm }) => (
                     {({ values, errors, touched, handleChange, handleBlur, handleSubmit, setFieldValue, resetForm }) => (
                       <Form
                       <Form
@@ -558,7 +558,7 @@ const UpdateActivity = () => {
                                         setMonths(e);
                                         setMonths(e);
                                       }}
                                       }}
                                       options={monthsArray}
                                       options={monthsArray}
-                                      // value={values.months}
+                                    // value={values.months}
                                     />
                                     />
                                     {/* {touched.months && errors.months && (
                                     {/* {touched.months && errors.months && (
                                     <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
                                     <span className="form-error" style={{ color: "red", fontSize: "10px" }}>
@@ -1053,7 +1053,7 @@ const UpdateActivity = () => {
                   </li>
                   </li>
                   <li>
                   <li>
                     <img src="/images/vendor/call.svg" className="img-fluid" />
                     <img src="/images/vendor/call.svg" className="img-fluid" />
-                    <p>+1 (407) 8798 789</p>
+                    <p className="number">+1 (407) 8798 789 asdasd</p>
                   </li>
                   </li>
                 </ul>
                 </ul>
               </div>
               </div>

pages/index.js

 import Home from "../components/home/Home";
 import Home from "../components/home/Home";
 import Layout from "../components/layout/Layout";
 import Layout from "../components/layout/Layout";
-import { getActivitiesByVendor, getActivitiesForEndUser } from "../redux/actions/activityAction";
+import { getActivitiesByVendor, getActivitiesForEndUser, getActivityById } from "../redux/actions/activityAction";
 import { getAllCategories } from "../redux/actions/categoriesAction";
 import { getAllCategories } from "../redux/actions/categoriesAction";
 import { getHomeBanner } from "../redux/actions/homeBannerAction";
 import { getHomeBanner } from "../redux/actions/homeBannerAction";
 import { getTestimonial } from "../redux/actions/testimonialAction";
 import { getTestimonial } from "../redux/actions/testimonialAction";
@@ -32,18 +32,19 @@ export const getServerSideProps = wrapper.getServerSideProps(store => async ({ r
     await store.dispatch(getTestimonial())
     await store.dispatch(getTestimonial())
     await store.dispatch(getActivitiesForEndUser())
     await store.dispatch(getActivitiesForEndUser())
     await store.dispatch(getHomeBanner())
     await store.dispatch(getHomeBanner())
+    await store.dispatch(getActivityById())
 
 
-  return {
-    props: {},
-    // Next.js will attempt to re-generate the page:
-    // - Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
-    // - After the 10-second window, the next request will still show the cached (stale) page
-    // - Next.js triggers a regeneration of the page in the background.
-    // - Once the page generates successfully, Next.js will invalidate the cache and show the updated page. If the background regeneration fails, the old page would still be unaltered.
-    // In seconds
-    // revalidate: Number(process.env.NEXT_PUBLIC_ISR_REVALIDATE_AFTER)
-  };
-} catch (error) {
-  console.log("index.js", error);
-}
+    return {
+      props: {},
+      // Next.js will attempt to re-generate the page:
+      // - Any requests to the page after the initial request and before 10 seconds are also cached and instantaneous.
+      // - After the 10-second window, the next request will still show the cached (stale) page
+      // - Next.js triggers a regeneration of the page in the background.
+      // - Once the page generates successfully, Next.js will invalidate the cache and show the updated page. If the background regeneration fails, the old page would still be unaltered.
+      // In seconds
+      // revalidate: Number(process.env.NEXT_PUBLIC_ISR_REVALIDATE_AFTER)
+    };
+  } catch (error) {
+    console.log("index.js", error);
+  }
 });
 });

styles/globals.css

@@ -270,12 +270,12 @@ h6 {
   position: relative;
   position: relative;
 }
 }
 
 
-.image-container>span {
+.image-container > span {
   position: unset !important;
   position: unset !important;
   /* display: inline-block !important; */
   /* display: inline-block !important; */
 }
 }
 
 
-.image-container.d-inblock>span {
+.image-container.d-inblock > span {
   position: unset !important;
   position: unset !important;
   display: inline-block !important;
   display: inline-block !important;
 }
 }
@@ -376,7 +376,7 @@ header {
   font-size: 0.833vw;
   font-size: 0.833vw;
 }
 }
 
 
-.header-search>.form-control {
+.header-search > .form-control {
   font-size: 0.833vw;
   font-size: 0.833vw;
 }
 }
 
 
@@ -434,16 +434,16 @@ header {
   border-radius: 0 0 8rem 8rem;
   border-radius: 0 0 8rem 8rem;
 }
 }
 
 
-.home-banner-bg>span {
+.home-banner-bg > span {
   height: 100%;
   height: 100%;
   display: block;
   display: block;
 }
 }
 
 
-.home-banner-bg>span>span {
+.home-banner-bg > span > span {
   height: 100% !important;
   height: 100% !important;
 }
 }
 
 
-.home-banner-bg>span>span .image {
+.home-banner-bg > span > span .image {
   object-fit: cover !important;
   object-fit: cover !important;
   border-radius: 0 0 136px 136px;
   border-radius: 0 0 136px 136px;
 }
 }
@@ -509,7 +509,7 @@ header {
   position: relative;
   position: relative;
 }
 }
 
 
-.owl-custom01.owl-carousel .owl-nav button.owl-prev>span {
+.owl-custom01.owl-carousel .owl-nav button.owl-prev > span {
   background: url(/images/icons/arrow-left.svg) no-repeat center;
   background: url(/images/icons/arrow-left.svg) no-repeat center;
   width: 14px;
   width: 14px;
   height: 22px;
   height: 22px;
@@ -517,7 +517,7 @@ header {
   display: block;
   display: block;
 }
 }
 
 
-.owl-custom01.owl-carousel .owl-nav button.owl-next>span {
+.owl-custom01.owl-carousel .owl-nav button.owl-next > span {
   background: url(/images/icons/arrow-right.svg) no-repeat center;
   background: url(/images/icons/arrow-right.svg) no-repeat center;
   width: 14px;
   width: 14px;
   height: 22px;
   height: 22px;
@@ -749,6 +749,7 @@ span.form-error,
 .form-container select {
 .form-container select {
   padding: 12px 5px;
   padding: 12px 5px;
   background-color: transparent;
   background-color: transparent;
+  font-family: sans-serif !important;
 }
 }
 
 
 .form-container textarea {
 .form-container textarea {
@@ -872,7 +873,7 @@ span.form-error,
   user-select: none;
   user-select: none;
 }
 }
 
 
-.check-container input:checked~.checkmark:after {
+.check-container input:checked ~ .checkmark:after {
   display: block;
   display: block;
 }
 }
 
 
@@ -900,7 +901,7 @@ span.form-error,
   width: 0;
   width: 0;
 }
 }
 
 
-.check-container input:checked~.checkmark {
+.check-container input:checked ~ .checkmark {
   background-color: #fff;
   background-color: #fff;
 }
 }
 
 
@@ -1036,7 +1037,7 @@ span.form-error,
   justify-content: center;
   justify-content: center;
 }
 }
 
 
-.btn-edit>span:first-child {
+.btn-edit > span:first-child {
   margin-top: 0.2rem;
   margin-top: 0.2rem;
 }
 }
 
 
@@ -1114,7 +1115,7 @@ span.form-error,
   color: #808080;
   color: #808080;
 }
 }
 
 
-.card-booking-content>p:last-child {
+.card-booking-content > p:last-child {
   margin-bottom: 0;
   margin-bottom: 0;
 }
 }
 
 
@@ -1157,7 +1158,7 @@ span.form-error,
   color: #808080;
   color: #808080;
 }
 }
 
 
-.card-booking-content .description>span {
+.card-booking-content .description > span {
   color: #646464;
   color: #646464;
   text-decoration: underline;
   text-decoration: underline;
 }
 }
@@ -1167,7 +1168,7 @@ span.form-error,
   font-weight: 600;
   font-weight: 600;
 }
 }
 
 
-.card-booking-content .price>span {
+.card-booking-content .price > span {
   font-size: 0.8rem;
   font-size: 0.8rem;
   color: #808080;
   color: #808080;
 }
 }
@@ -1203,7 +1204,7 @@ span.form-error,
   margin-bottom: 1rem;
   margin-bottom: 1rem;
 }
 }
 
 
-.card-booking-content .details-div>p:first-child {
+.card-booking-content .details-div > p:first-child {
   font-family: "Sofia Pro Light";
   font-family: "Sofia Pro Light";
   font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320));
   font-size: calc(14px + (14 - 14) * (100vw - 320px) / (1920 - 320));
   line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
   line-height: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
@@ -1213,7 +1214,7 @@ span.form-error,
   margin-bottom: 0;
   margin-bottom: 0;
 }
 }
 
 
-.card-booking-content .details-div>p:last-child {
+.card-booking-content .details-div > p:last-child {
   font-family: "Sofia Pro Light";
   font-family: "Sofia Pro Light";
   font-size: 16px;
   font-size: 16px;
   font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
   font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
@@ -1291,7 +1292,10 @@ span.form-error,
   margin-bottom: 0;
   margin-bottom: 0;
   margin-left: 1rem;
   margin-left: 1rem;
 }
 }
-
+.helplist li p.number {
+  font-size: calc(16px + (16 - 16) * (100vw - 320px) / (1920 - 320));
+  line-height: calc(16px + (20 - 16) * (100vw - 320px) / (1920 - 320));
+}
 .business-details p {
 .business-details p {
   margin-left: 0;
   margin-left: 0;
   margin-bottom: 1rem;
   margin-bottom: 1rem;
@@ -1394,7 +1398,7 @@ span.form-error,
   align-items: center;
   align-items: center;
 }
 }
 
 
-.primary-sidebar ul li a>span {
+.primary-sidebar ul li a > span {
   flex: 0 0 auto;
   flex: 0 0 auto;
 }
 }
 
 
@@ -1447,7 +1451,7 @@ span.form-error,
   align-items: center;
   align-items: center;
 }
 }
 
 
-.sidebar ul li a>span {
+.sidebar ul li a > span {
   flex: 0 0 auto;
   flex: 0 0 auto;
 }
 }
 
 
@@ -1601,12 +1605,12 @@ span.form-error,
 }
 }
 
 
 /* On mouse-over, add a grey background color */
 /* On mouse-over, add a grey background color */
-.radioContainer:hover input~.checkmark {
+.radioContainer:hover input ~ .checkmark {
   background-color: #fff;
   background-color: #fff;
 }
 }
 
 
 /* When the radio button is checked, add a blue background */
 /* When the radio button is checked, add a blue background */
-.radioContainer input:checked~.checkmark {
+.radioContainer input:checked ~ .checkmark {
   color: #0070bd;
   color: #0070bd;
 }
 }
 
 
@@ -1618,7 +1622,7 @@ span.form-error,
 }
 }
 
 
 /* Show the indicator (dot/circle) when checked */
 /* Show the indicator (dot/circle) when checked */
-.radioContainer input:checked~.checkmark:after {
+.radioContainer input:checked ~ .checkmark:after {
   display: block;
   display: block;
 }
 }
 
 
@@ -2032,10 +2036,12 @@ span.form-error,
   border-radius: 24px 24px 0 0;
   border-radius: 24px 24px 0 0;
   object-fit: cover !important;
   object-fit: cover !important;
 }
 }
-
+.business-details :where(.css-dev-only-do-not-override-1kuana8).ant-upload-wrapper.ant-upload-picture-card-wrapper {
+  display: block;
+}
 .top-rated {
 .top-rated {
   position: absolute;
   position: absolute;
-  bottom: 10px;
+  bottom: 12px;
   left: 10px;
   left: 10px;
   background: #fff;
   background: #fff;
   border-radius: 6px;
   border-radius: 6px;
@@ -2045,12 +2051,29 @@ span.form-error,
   height: calc(25px + (25 - 25) * (100vw - 320px) / (1920 - 320)) !important;
   height: calc(25px + (25 - 25) * (100vw - 320px) / (1920 - 320)) !important;
   padding-top: 7px;
   padding-top: 7px;
 }
 }
-
+.modal-01-session h2 {
+  font-size: calc(32px + (32 - 32) * (100vw - 320px) / (1920 - 320));
+  line-height: calc(44px + (44 - 44) * (100vw - 320px) / (1920 - 320));
+}
+.modal-01-session .text01 {
+  font-size: calc(20px + (20 - 20) * (100vw - 320px) / (1920 - 320));
+  padding-top: 0.2rem;
+  padding-bottom: 1rem;
+}
 .info .top-name .title {
 .info .top-name .title {
   font-size: 0.885vw;
   font-size: 0.885vw;
   line-height: 20px;
   line-height: 20px;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 5px;
+  /* height: 40px; */
+}
+.cl-blue {
+  color: #0a58ca !important;
 }
 }
-
 .info .rating-wishlist .rating {
 .info .rating-wishlist .rating {
   background: #002c5f;
   background: #002c5f;
   border-radius: 4px;
   border-radius: 4px;
@@ -2102,7 +2125,7 @@ span.form-error,
   margin-left: 4px;
   margin-left: 4px;
 }
 }
 
 
-.product-info .wishlist-share>div {
+.product-info .wishlist-share > div {
   margin-bottom: 1rem;
   margin-bottom: 1rem;
 }
 }
 
 
@@ -2149,7 +2172,7 @@ span.form-error,
   margin-bottom: 10px;
   margin-bottom: 10px;
 }
 }
 
 
-.browse-experiences-item .info .detail>div {
+.browse-experiences-item .info .detail > div {
   margin-bottom: 0.4rem;
   margin-bottom: 0.4rem;
 }
 }
 
 
@@ -2462,6 +2485,7 @@ footer hr {
   border-color: #c3c3c3;
   border-color: #c3c3c3;
   padding: 0.575rem 2.55rem 0.575rem 0.95rem;
   padding: 0.575rem 2.55rem 0.575rem 0.95rem;
   margin-bottom: 1rem;
   margin-bottom: 1rem;
+  font-family: sans-serif !important;
 }
 }
 
 
 .box-01 .show-all {
 .box-01 .show-all {
@@ -2700,7 +2724,7 @@ footer hr {
   line-height: 2.083vw;
   line-height: 2.083vw;
 }
 }
 
 
-.product-info .price>span {
+.product-info .price > span {
   color: #808080;
   color: #808080;
   font-size: 14px;
   font-size: 14px;
 }
 }
@@ -2711,7 +2735,7 @@ footer hr {
   margin-bottom: 0.5rem;
   margin-bottom: 0.5rem;
 }
 }
 
 
-.product-info .location>span {
+.product-info .location > span {
   color: #808080;
   color: #808080;
   font-size: 16px;
   font-size: 16px;
 }
 }
@@ -2769,7 +2793,7 @@ footer hr {
   padding: 1rem 0;
   padding: 1rem 0;
 }
 }
 
 
-.image-gallery-thumbnail+.image-gallery-thumbnail {
+.image-gallery-thumbnail + .image-gallery-thumbnail {
   margin-left: 1rem;
   margin-left: 1rem;
   border-radius: 12px;
   border-radius: 12px;
 }
 }
@@ -2778,7 +2802,7 @@ footer hr {
   width: 100px;
   width: 100px;
 }
 }
 
 
-.breadcrumb-item+.breadcrumb-item::before {
+.breadcrumb-item + .breadcrumb-item::before {
   content: "";
   content: "";
   background: url(/images/icons/arrow-right-grey.svg) no-repeat;
   background: url(/images/icons/arrow-right-grey.svg) no-repeat;
   width: 24px;
   width: 24px;
@@ -2794,13 +2818,18 @@ footer hr {
   font-size: 0.833vw;
   font-size: 0.833vw;
 }
 }
 
 
-.btn-check:focus+.btn,
+/* .btn-check:focus + .btn,
 .btn:focus,
 .btn:focus,
 button:focus:not(:focus-visible) {
 button:focus:not(:focus-visible) {
   box-shadow: none;
   box-shadow: none;
   background-color: transparent;
   background-color: transparent;
 }
 }
-
+.active-on-day .btn-check:focus + .active-on-day .btn,
+.btn:focus,
+button:focus:not(:focus-visible).active-on-day {
+  box-shadow: inherit;
+  background-color: #00000040;
+} */
 .availability-wrappper {
 .availability-wrappper {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
@@ -2820,7 +2849,7 @@ button:focus:not(:focus-visible) {
   color: #000;
   color: #000;
 }
 }
 
 
-.availability-wrappper li>span {
+.availability-wrappper li > span {
   width: 30px;
   width: 30px;
   display: block;
   display: block;
   margin-right: 10px;
   margin-right: 10px;
@@ -2913,7 +2942,7 @@ button:focus:not(:focus-visible) {
   margin-bottom: 2rem;
   margin-bottom: 2rem;
 }
 }
 
 
-.guest-reviews-session>.container {
+.guest-reviews-session > .container {
   border-top: 1px solid #c9c9c9;
   border-top: 1px solid #c9c9c9;
   padding-top: 3rem;
   padding-top: 3rem;
 }
 }
@@ -3141,7 +3170,7 @@ header .top-btn .user-icon .image-container.arrow-d {
   scrollbar-width: none;
   scrollbar-width: none;
 }
 }
 
 
-.active>.page-link,
+.active > .page-link,
 .page-link.active {
 .page-link.active {
   background-color: #0070bd;
   background-color: #0070bd;
   border-color: #0070bd;
   border-color: #0070bd;
@@ -3277,7 +3306,7 @@ input[type="number"]::-webkit-outer-spin-button {
   background: transparent;
   background: transparent;
 }
 }
 
 
-.swiper-nav button .image-container>span {
+.swiper-nav button .image-container > span {
   width: 14px !important;
   width: 14px !important;
 }
 }
 
 
@@ -3313,7 +3342,7 @@ input[type="number"]::-webkit-outer-spin-button {
   display: block;
   display: block;
 }
 }
 
 
-.page-title-area .banner-bg .image-container>span {
+.page-title-area .banner-bg .image-container > span {
   height: 100% !important;
   height: 100% !important;
 }
 }
 
 
@@ -3477,7 +3506,7 @@ input[type="number"]::-webkit-outer-spin-button {
 
 
 .swiper-pagination-fraction,
 .swiper-pagination-fraction,
 .swiper-pagination-custom,
 .swiper-pagination-custom,
-.swiper-horizontal>.swiper-pagination-bullets,
+.swiper-horizontal > .swiper-pagination-bullets,
 .swiper-pagination-bullets.swiper-pagination-horizontal {
 .swiper-pagination-bullets.swiper-pagination-horizontal {
   bottom: -5px !important;
   bottom: -5px !important;
 }
 }
@@ -3593,11 +3622,11 @@ input[type="number"]::-webkit-outer-spin-button {
   display: block;
   display: block;
 }
 }
 
 
-.blog-item .img-wrapper .image-container>span {
+.blog-item .img-wrapper .image-container > span {
   height: 100% !important;
   height: 100% !important;
 }
 }
 
 
-.blog-item .img-wrapper .image-container>span>.image {
+.blog-item .img-wrapper .image-container > span > .image {
   object-fit: cover;
   object-fit: cover;
   border-radius: 25px 25px 0 0;
   border-radius: 25px 25px 0 0;
 }
 }
@@ -3611,6 +3640,7 @@ input[type="number"]::-webkit-outer-spin-button {
   padding: 0.3rem 0.5rem;
   padding: 0.3rem 0.5rem;
   font-size: 0.677vw;
   font-size: 0.677vw;
   font-weight: 700;
   font-weight: 700;
+  line-height: inherit !important;
 }
 }
 
 
 .blog-item .info {
 .blog-item .info {
@@ -3821,18 +3851,18 @@ input[type="number"]::-webkit-outer-spin-button {
   justify-content: center;
   justify-content: center;
 }
 }
 
 
-.gift-card-amt>ul {
+.gift-card-amt > ul {
   display: grid;
   display: grid;
   grid-gap: 20px;
   grid-gap: 20px;
   grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr));
   grid-template-columns: repeat(auto-fill, minmax(calc(33.33% - 15px), 1fr));
 }
 }
 
 
 .gift-card-amt ul li a,
 .gift-card-amt ul li a,
-.gift-card-amt ul li label>span {
+.gift-card-amt ul li label > span {
   font-size: 14px;
   font-size: 14px;
 }
 }
 
 
-.gift-card-amt ul li input[type="radio"]:checked+label {
+.gift-card-amt ul li input[type="radio"]:checked + label {
   background: #0070bd;
   background: #0070bd;
   color: #fff;
   color: #fff;
 }
 }
@@ -3869,7 +3899,7 @@ input[type="number"]::-webkit-outer-spin-button {
   display: inline-block;
   display: inline-block;
 }
 }
 
 
-.tooltip-btn:hover+.tooltips {
+.tooltip-btn:hover + .tooltips {
   display: block;
   display: block;
 }
 }
 
 
@@ -3904,7 +3934,8 @@ input[type="number"]::-webkit-outer-spin-button {
   border-radius: 9px;
   border-radius: 9px;
 }
 }
 
 
-.gift-card-rt .form-01 .link-a {}
+.gift-card-rt .form-01 .link-a {
+}
 
 
 .gift-card-session .result-box {
 .gift-card-session .result-box {
   text-align: center;
   text-align: center;
@@ -4065,7 +4096,8 @@ img:hover {
   margin-top: 1.5rem;
   margin-top: 1.5rem;
 }
 }
 
 
-.load-more .pagination .page-item {}
+.load-more .pagination .page-item {
+}
 
 
 .page-item:not(:first-child) .page-link {
 .page-item:not(:first-child) .page-link {
   margin-left: 10px;
   margin-left: 10px;
@@ -4179,7 +4211,9 @@ footer .footer-link ul {
 .suitable-age-group .anticon.anticon-down {
 .suitable-age-group .anticon.anticon-down {
   display: none;
   display: none;
 }
 }
-
+.vendor-signup .btn-light {
+  background: #fff;
+}
 @media (min-width: 992px) {
 @media (min-width: 992px) {
   .navbar-expand-lg .navbar-nav .nav-link {
   .navbar-expand-lg .navbar-nav .nav-link {
     margin: 0 2rem;
     margin: 0 2rem;
@@ -4410,7 +4444,7 @@ footer .footer-link ul {
     font-size: 4.667vw;
     font-size: 4.667vw;
   }
   }
 
 
-  .gift-card-amt>ul {
+  .gift-card-amt > ul {
     grid-gap: 10px;
     grid-gap: 10px;
   }
   }
 
 
@@ -4486,7 +4520,7 @@ footer .footer-link ul {
   }
   }
 
 
   .gift-card-amt ul li a,
   .gift-card-amt ul li a,
-  .gift-card-amt ul li label>span {
+  .gift-card-amt ul li label > span {
     font-size: 12px;
     font-size: 12px;
   }
   }
 
 
@@ -4632,7 +4666,7 @@ footer .footer-link ul {
     width: 3.585vw;
     width: 3.585vw;
   }
   }
 
 
-  .header-search>.form-control {
+  .header-search > .form-control {
     font-size: 3vw;
     font-size: 3vw;
     margin-bottom: 1rem;
     margin-bottom: 1rem;
   }
   }
@@ -4654,7 +4688,7 @@ footer .footer-link ul {
     line-height: 4vw;
     line-height: 4vw;
   }
   }
 
 
-  .home-banner-bg>span>span .image {
+  .home-banner-bg > span > span .image {
     border-radius: 0 0 20px 20px;
     border-radius: 0 0 20px 20px;
   }
   }
 
 
@@ -4772,7 +4806,7 @@ footer .footer-link ul {
     top: 40%;
     top: 40%;
   }
   }
 
 
-  .swiper-nav button .image-container>span {
+  .swiper-nav button .image-container > span {
     width: 10px !important;
     width: 10px !important;
   }
   }
 
 
@@ -4910,7 +4944,7 @@ footer .footer-link ul {
     top: 0.8rem !important;
     top: 0.8rem !important;
   }
   }
 
 
-  .rbt-menu>.dropdown-item {
+  .rbt-menu > .dropdown-item {
     font-size: 13px;
     font-size: 13px;
   }
   }
 
 
@@ -4945,4 +4979,4 @@ footer .footer-link ul {
 /* min height */
 /* min height */
 .min-height-40 {
 .min-height-40 {
   min-height: 40vh;
   min-height: 40vh;
-}
\ No newline at end of file
+}