@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Quicksand:wght@300..700&display=swap");
:root {
  --blue: #00285f;
  --light-blue: #8093af;
  --sky-blue: #0094fa;
}

.font-quicksand {
  font-family: "Quicksand", sans-serif;
}

.font-opensans {
  font-family: "Open Sans", sans-serif;
}

/* Category Image Card Css */

.group:hover .card-img {
  transform: scale(1.3);
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.5s ease;
  -webkit-transition: transform 1.5s ease;
  -moz-transition: transform 1.5s ease;
  -ms-transition: transform 1.5s ease;
  -o-transition: transform 1.5s ease;
}

.hover-reveal {
  transform: translateY(5px);
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transform: translateY(5px);
  -moz-transform: translateY(5px);
  -ms-transform: translateY(5px);
  -o-transform: translateY(5px);
}

.group:hover .hover-reveal {
  transform: translateY(-15px);
  opacity: 1;
  -webkit-transform: translateY(-15px);
  -moz-transform: translateY(-15px);
  -ms-transform: translateY(-15px);
  -o-transform: translateY(-15px);
}

.box-shadow-bottom {
  box-shadow: rgba(0, 0, 0, 1) 0px -23px 25px 0px,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
/* Accordion */
.accordion-icon.open { transform: rotate(180deg); transition: transform .2s; }

/* Menu Modal */

.tab-button.active {
  color: #fff;
  background-color: #0094fa;
}

/* Recent Review Css */

.rating-btn.active .rating-icon {
  filter: brightness(0) invert(1);
}

.rating-btn {
  border-width: 1px;
  transition: all 0.3s ease;
}

.rating-btn.star {
  border-color: #0094fa;
  color: #0094fa;
}

.rating-btn.heart {
  border-color: #fbb116;
  color: #fbb116;
}

.rating-btn.like {
  border-color: #ef16b2;
  color: #ef16b2;
}

.rating-btn.comment {
  border-color: #73cf42;
  color: #73cf42;
}

.rating-btn.flag {
  border-color: #e76a30;
  color: #e76a30;
}

.rating-btn.active.star {
  background-color: #0094fa;
  color: white;
}

.rating-btn.active.heart {
  background-color: #fbb116;
  color: white;
}

.rating-btn.active.like {
  background-color: #ef16b2;
  color: white;
}

.rating-btn.active.comment {
  background-color: #73cf42;
  color: white;
}

.rating-btn.active.flag {
  background-color: #e76a30;
  color: white;
}

/* Bottom Category Image Card */

.card:hover img {
  transition: all 1.2s ease-in-out;
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  -webkit-transition: all 1.2s ease-in-out;
  -moz-transition: all 1.2s ease-in-out;
  -ms-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
}

.card:hover .caption {
  font-size: 28px;
  transition: all 1.2s ease-in-out;
  transform: translateY(-15px);
  -webkit-transform: translateY(-15px);
  -moz-transform: translateY(-15px);
  -ms-transform: translateY(-15px);
  -o-transform: translateY(-15px);
  -webkit-transition: all 1.2s ease-in-out;
  -moz-transition: all 1.2s ease-in-out;
  -ms-transition: all 1.2s ease-in-out;
  -o-transition: all 1.2s ease-in-out;
}

.featured-image {
  background-image: url("../images/bottom-subscribe-banner.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
}


svg.eye-open,
svg.eye-closed {
    position: absolute;
    right: 0;
}

.modal-content{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0;
}

/* START::Custom card design */

.card-wraper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.image-wraper {
    position: relative;
    width: 40%;
}
img.food-image {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
}

img.user-raundedn-img {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    right: -22%;
    transform: translate(-14%, -50%);
}

.card-left-content {
    width: 60%;
    padding-left: 50px;
}

.bottom-content {
    padding: 1rem 2rem 1rem 1rem;
}
/* END::Custom card design */



/* List view page style */


main.page-layout {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    
}

.left-side-list {
    width: 100%;
    max-width: 60%;
    padding-top: calc(0px + 120px);
    padding-left: 20px ;
    padding-right: 20px;
}
.right-map-fixed{
  width: 100%;
  max-width: 40%;
  height: 100vh;
}

.right-map-fixed iframe {
    position: fixed;
    top: 0;
}

button.h-\[36px\].w-\[36px\].flex.items-center.justify-center.text-yellow-500.p-2.rounded-full.border.border-yellow-500 i.fas,
button.h-\[36px\].w-\[36px\].flex.items-center.justify-center.p-2.rounded-full.border.color-yellow-500.bg-white.border-yellow-500 i.fas {
    color: #fbb116;
}
.toggle-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 2rem;
}


.toggle-list .listing-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    max-width: calc(50% - 0.5rem);
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    overflow: hidden;
    
}
.toggle-list .listing-card:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px;
}


.listing-card {
    max-width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
    -ms-border-radius: 0.5rem;
    -o-border-radius: 0.5rem;
    overflow: hidden;
  
}

.listing-card:hover{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;

}
.toggle-list .listing-card .card-wraper {
    width: 100%;
}

 .toggle-list .listing-card .card-pop {
    width: 100%;
}

.listing-card .card-wraper {
    width: 50%;
}

.listing-card .card-pop {
    width: 50%;
}

.card-wraper{
  position: relative;
}


.category-icons-list {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.listing-card img.product-dynamic-img {
    height: 100%;
    min-height: 450px;
    object-fit: cover;
}

.listing-card .card-pop {
    padding: 1.5rem;
}
.right-map-fixed-mobile {
    display: none;
}
.header-bg {
    background: linear-gradient(90.28deg, #002250 9.7%, #547eb7 92.95%);
}
/* start::Coupan page */

.manage-right {
    width: 70%;
}

.manage-left {
    width: 30%;
}

/* End::Coupan page */


/* Media QUery Start */

@media (max-width:1535px) {
  img.food-image {
    max-height: 159px;
}
}

@media (max-width:1024px) {
  img.food-image {
    max-height: 159px;
}

.card-left-content {
    width: 60%;
    padding-left: 32px;
}
img.user-raundedn-img {
    width: 50px;
    height: 50px;
}
img.food-image {
    max-height: 139px;
}

img.user-raundedn-img {
    right: -20%;
}
.rating-btn {
    padding: 6px;
}

/* List view page */
.left-side-list{
  max-width: 100%;
}
.grid-card .card-wraper {
    width: 65%;
}

 .right-map-fixed-mobile {
    display: block;
    height: 500px;
    margin-bottom: 1.5rem;

  }
}

@media (max-width: 767px) {
  .manage-left{
    width: 100%;
  }
  .manage-right{
    width: 100%;
  }

  img.food-image {
    max-height: 117px;
}

.card-left-content {
    padding-left: 20px;
}
  .mobile-hidden {
    display: none !important;
  }

  .featured-image {
    background-image: url("../images/subscribe-banner-small.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
  }
 
  
}

/* modal hide/show */

#previewModal {
  display: none;
}

#previewModal.active {
  display: flex;
}

/* make modal center and responsive */

#previewModal .modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.45);
  z-index: 60;
}

/* small tweak so iframe fills right pane */

#previewModal .map-pane iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ensure cloned card inside modal uses full width of left pane */

#previewCard .card {
  width: 100% !important;
}

/* small responsive heights */

@media (max-width: 767px) {
  #previewModal .modal-container {
    flex-direction: column;
    max-height: 95vh;
    overflow: auto;
  }
  #previewModal .modal-left,
  #previewModal .modal-right {
    width: 100%;
  }
  #previewModal .modal-right {
    height: 300px;
  }
  .hero-search {
    margin: 20px !important;
  }
}

@media (min-width: 768px) {
  #previewModal .modal-container {
    flex-direction: row;
    max-height: 90vh;
  }
  #previewModal .modal-left {
    width: 50%;
    overflow: auto;
  }
  #previewModal .modal-right {
    width: 50%;
    height: auto;
  }
}


@media screen and (max-width:640px) {
.card-wraper {
    flex-direction: column;
}
.image-wraper {
    position: relative;
    width: 100%;
}
img.food-image {
    max-height: 360px;
}
img.user-raundedn-img {
    right: unset;
    left: 40px;
    bottom: -80px;
    top: unset;
    width: 80px;
    height: 80px;
}
.card-left-content {
    width: 100%;
    padding-top: 55px;
    padding-left: 34px;
}

.bottom-content {
    padding-left: 34px;
}
br.break-line {
    display: none;
}
.toggle-list .listing-card {
    max-width: 100%;
}
main.page-layout {
    flex-direction: column;
}
.right-map-fixed{
  display: none;
}

.right-map-fixed-mobile {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
}
}

@media screen and (max-width:430px) {
  img.food-image {
    max-height: 280px;
}
  button.rating-btn {
    padding: 8px;
}
img.rating-icon {
    width: 20px;
}
.bottom-content {
    padding-left: 0px;
}
.card-left-content {
    padding-left: 0px;
    padding-bottom: 16px;
}
img.user-raundedn-img {
    right: unset;
    left: 10px;
    bottom: -60px;
    top: unset;
    width: 60px;
    height: 60px;
}
}
/* ensure modal close button visibility */


@media screen and (max-width:1240px) and (min-width:1024px) {

  .right-map-fixed {
    max-width: 30%;
}

.left-side-list {
    max-width: 70%;
}
  .grid-card .card-wraper {
    width: 85%;
}

.listing-card .card-pop {
    padding: 1rem;
}
}

.modal-close-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: none;
  cursor: pointer;
  z-index: 70;
}

/* Read-more / line-clamp helper */
.clamped p,
.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* limits to 4 lines */
  overflow: hidden;
}

.full-details.expanded,
.full-details.expanded p {
  display: block;
  -webkit-line-clamp: unset;
}

.readmore-btn {
  cursor: pointer;
}

/* Ensure footer sticks to bottom and no extra whitespace on short pages/mobile */
html, body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The main page content should grow to fill available space so footer sits at bottom */
.page-content {
  flex: 1 0 auto;
}

/* Footer should not add unexpected extra space */
footer {
  flex-shrink: 0;
  margin: 0;
}
