/* ================================= */
/*  TABLE OF CONTENTS */
/* ================================= */
/* 
    VARIABLES
    1- GENERAL STYLES
    1.1 Global Resets
    1.2 Typography
    1.3 Utilities
    1.4 FORM ELEMENTS
    1.5 LAYOUT & CONTAINER
    1.6 ALERTS & MESSAGES
    1.7 ALIGNMENT
    1.8 Icons styling 


    2- COMPONENTS
    2.1 Buttons
    2.2 Search Input
    2.3 Headings 
    2.5 Custom Modal
    2.6 Boostrap select
    2.7 Custom Modal Styling (Overrides Bootstrap Defaults)
    2.8 intl tel input
    2.9 Custom Radio
    2.10 ON/OFF toggle button
    2.11 HEADER: delete this and replace with new header styling
    2.12 Form Styling
        2.12.1 - Error Handling
        2.12.2 - Form Field Styling
        2.12.3 - Input & Label Styling
        2.12.4 - Radio Button & Checkbox Styling
        2.12.5 - Keyword Styling
        2.12.6 - Textarea

    2.14 Map Section: Container and Controls
    2.15 Profile Picture Card
    2.16 Show more link
    2.17 Media Gallery carousel- Profile
    2.18 Reviews and Ratings
    2.20  Empty state
    2.21 Footer
    2.22 Datatables
    2.23 Profile status
    2.24 keywords list table 
    2.25 Rounded keywords tags
    2.26 List item saver
    2.27 Toast
    2.28 Media library modal
    2.29 Light Gallery
    2.30 Custom confirm modal
    2.31 Checkbox Component 
    2.33 Note Banner
    2.34 Pagination
    2.35 Search Bar
    2.36 Custom radio group
    2.37 Accordian Component
    2.38 Dropdown Component


    3- PUBLIC PAGES
    3.1 Profile status guide
    3.2 Member Profile
    3.3 landing page 
    3.4 Categories list
    3.5 Advert cluster page
    3.6 Plaza list 
    3.7 Gallery Preview page 
    3.8 Plaza details view
    3.9 Post ads page 
    3.10 FAQ page
    3.11 Member details page 
    3.12 Category details page
    3.13 Manage searches page 
    3.14 Templates Listing page 
    3.15 Transalations page  
    3.16 Search keywords Page - find this page, if this page no more exist then delete this block of code
    3.17 hmp - find this page
    3.18 Post job - find this page
    3.19 Settings page
    3.20 business member profile creation form 
    3.21 Signup/SignIn
    3.22 Library page

    4- DASHBOARD PAGES
    4.1 Menu Manager - Overview page

    4- ANIMATIONS

    5- MEDIA QUERIES




*/

/* ------- Imports ----- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

/* ------ VARIABLES ------- */
:root {
  --color-primary: #2e5dc0;
  --color-primary-accent: #154ab7;
  --color-primary-subtle: #e9ecef;
  --color-link: #0b5ec2;
  --color-danger: #e60000;
  --color-red-light: #fde2e1;
  --color-green-light: #d1e6dd;
  --color-black: #000000;
  --color-text: #4f575f;
  --color-input-border: #e6ebf1;
  --color-input-background: #f8f9fa;
  --hover-bg-light: #f8f9fa;
  --color-primary-light: #f4f6fc;
  --text-muted: #858181;
  --color-hover-bg: #f8f9fa;
  --divider: #e8e8e8;
  --color-input-control-border: #ccc8c8;
  --transition: all 0.3s ease;
  --dark-gray: #6c757d;
  --color-border: #e6ebf1;
  --color-divider: #e8e8e8;
  /* ---- */
  --color-secondary: #eb841d;
  --color-text-muted: #cdd4d8;
  /* Muted or light text for secondary use */
  --color-success: #279d42;
  --color-neutral-light: #7f7f7f;

  --color-primary-muted: #b5c4d6;
  --color-pending: #fdf5e4;
  --color-pending-border: #f8ebcf;
  --color-step-background-inactive: #f5f5f6;

  --color-info-background: #212529;
  /* --empty-state-color: #888888; */
}

/* ================================= */
/* 1️- GENERAL STYLES */
/* ================================= */

/* 1.1 Global Resets */
html {
  font-size: 16px;
}

body {
  font-family: 'Times New Roman', Times, serif;
  overflow-x: hidden !important;
  letter-spacing: 0.55px;
  scrollbar-width: thin !important;
  position: relative;
}

section {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* 1.2 TYPOGRAPHY 
----------------------------------- */

/* headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.6px;
}

h3 {
  font-size: 1.39rem;
}

h4 {
  font-size: 1.2rem;
}

/* Paragraphs & Text Elements */
p,
ol,
li {
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.25rem;
  letter-spacing: 0.55px;
}

a,
a:hover {
  font-size: 1rem;
  color: var(--color-link);
}

label {
  font-size: 1rem;
}

*:focus {
  box-shadow: none !important;
}

/* Special Text Styles */
.note-text {
  font-size: 0.9rem;
}

.secondary-notes {
  color: #494848;
  font-size: 0.9rem;
}

.link {
  color: var(--color-link);
  text-decoration: underline;
  cursor: pointer;
}

.text-black {
  color: #000;
}

/* 1.3 UTILITIES 
-------------------------- */
.full-width {
  width: 100%;
}

.ptb-1 {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.red-text {
  color: rgb(230, 5, 5);
}

.full-height {
  height: 90vh;
}

.width-50 {
  width: 50%;
}

.txt-capitalize {
  text-transform: capitalize;
}

.mr-10 {
  margin-right: 10px;
}

.danger {
  color: var(--color-danger) !important;
}

.bg-danger {
  background-color: var(--color-danger);
  color: #fff;
}

.blurred {
  opacity: 0.4;
}

.pad-x-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.hidden p {
  color: rgb(168, 167, 167) !important;
}

/* Disabled link */
.disabled-link {
  pointer-events: none;
  color: gray;
  cursor: not-allowed;
  opacity: 0.6;
}

/* 1.4 FORM ELEMENTS 
-------------------------- */

/* Radio Buttons */
input[type='radio'] {
  cursor: pointer;
}

input[type='radio']:checked {
  accent-color: var(--color-primary) !important;
}

/* Time Input Styling */
input[type='time']::-webkit-datetime-edit-hour-field:focus,
input[type='time']::-webkit-datetime-edit-minute-field:focus,
input[type='time']::-webkit-datetime-edit-second-field:focus,
input[type='time']::-webkit-datetime-edit-ampm-field:focus {
  background-color: #b0c7e2;
}

input[readonly] {
  background-color: #fff;
}

/* 1.5 LAYOUT & CONTAINER 
-------------------------- */
/* content wrapper */
.content-wrapper {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

/* ---- */
.container {
  padding: 0 25px;
}

.container-lg {
  padding-inline: 20px;
}

.plaza .container,
footer .container,
section > .container,
section.container,
.banner .container,
.categories_details.container,
.adverts.container,
.profile_benefits,
.profile_features,
.services {
  padding-inline: 20px !important;
}

/*  Border & Background */
.border-cl {
  border: 1px solid rgb(174, 174, 174);
  border-radius: 5px;
}

.bg {
  background-color: #f7f7f7;
}

/* CSS to ensure equal height */
.equal-height-row {
  display: flex;
  flex-wrap: wrap;
}

.equal-height-row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

/* Ensure flex items grow to fill the container */
.equal-height-row > [class*='col-'] > * {
  flex-grow: 1;
}

/* 1.6 ALERTS & MESSAGES
-------------------------- */

.alert {
  padding: 10px 10px;
  font-size: 0.9rem;
}

.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.8rem 1rem;
}

.btn-close {
  font-size: 0.8rem !important;
}

/* 1.7 ALIGNMENT
-------------------------- */
.text-md-right {
  text-align: right;
}

/* 1.8 Icons styling 
----------------------------------------- */

/* Add and close icons */
.add-icon,
.close-icon {
  width: 20px;
  cursor: pointer;
}

.close-icon {
  margin-top: -5px;
  margin-inline: -3px;
  width: 22px;
}

.tag-remove .close-icon {
  width: 20px;
}

.edit-icon {
  color: var(--color-link);
  padding-right: 5px;
}

/* Edit and delete icons */
.delete-icon {
  color: var(--color-danger);
  padding-right: 5px;
  font-size: 0.9rem !important;
}

/* search-icon */
.search-icon {
  color: #a1a1a1;
  font-size: 0.9rem;
  margin-top: 5px;
}

.search-holder ~ .search-icon {
  display: none !important;
}

/* period icon */
.period-icon {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
  background-color: #000;
}

.period-icon.open {
  background-color: var(--color-success);
}

.period-icon.close {
  background-color: var(--color-danger);
}

/* ================================= */
/* 2- COMPONENTS */
/* ================================= */

/* 2.1 Buttons
-------------------------- */

/* General button styles */
.btn {
  padding: 0.35rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  transition: all 0.2s;
}

/* Submit button (form submission) */
.btn-submit {
  background-color: var(--color-primary);
  color: #fff;
}

.btn-submit:hover {
  color: #fff;
  background-color: var(--color-primary-accent);
  transform: scale(1.02);
}

/* Back & cancel button  */
.btn-secondary {
  background-color: var(--color-primary-subtle);
  color: #000;
  border: 1px solid #e4e0e0;
}

.btn-secondary:hover {
  color: #000;
  background-color: #d3d9df;
  transform: scale(1.02);
  border: 1px solid #e4e0e0;
}

/* delete button */
.btn-danger {
  background-color: var(--color-danger);
  color: #fff;
}

.btn-danger:hover {
  color: #fff;
  background-color: #d70000;
  transform: scale(1.02);
}

/* Border button (transparent with color change on hover) */
.border-btn {
  background-color: transparent;
  color: var(--color-primary);
  outline: none;
  border: 2px solid var(--color-primary);
  transition: background-color color 0.15s;
  padding: 0.32rem 0.8rem;
}

.border-btn:hover {
  background-color: var(--color-primary);
  color: #fff;
  transform: scale(1.02);
}

.border-btn a:hover {
  color: #fff;
}

.back-btn {
  border: 1px solid rgb(227, 226, 226);
  color: black;
}

/* back button */
.back-button {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  color: #333;
  font-weight: 600;
}

.back-button img {
  margin-right: 0px;
  width: 1.4rem;
  height: 1.4rem;
}

/* edit button */
.btn-edit {
  background-color: #fff;
  box-shadow: 0 0 20px rgba(26, 25, 25, 0.17);
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 3px;
}

.btn-edit img {
  width: 1.3rem;
}

.btn-edit:hover {
  background-color: var(--color-primary-light);
}

.primary-btn,
.back-btn,
.submit-btn {
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.475rem 0.85rem;
  border-radius: 5px;
  border: 1px solid var(--color-primary);
  font-size: 1rem;
  transform: translateZ(0) scale(1);
  transition: transform 0.2s;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.primary-btn:not(:disabled):hover,
.back-btn:not(:disabled):hover,
.submit-btn:not(:disabled):hover {
  transform: scale(1.05);
}

.primary-btn:not(:disabled):hover:active,
.back-btn:not(:disabled):hover:active {
  transform: scale(1.05) translateY(0.125rem);
}

.primary-btn:hover {
  color: #fff;
}

.primary-btn:focus,
.back-btn:focus {
  outline: 0 solid rgba(0, 0, 0, 0);
}

/* Hollow button (transparent background) */
.hollow-btn {
  background-color: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

/* Borderless button (no background, no border) */
.borderless-btn {
  background-color: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.borderless-btn.primary {
  color: var(--color-link);
}

.borderless-btn.underline {
  text-decoration: underline;
}

/* disabled next button */
.nextbtn[disabled] {
  background-color: #ccc;
  color: #888;
  cursor: not-allowed;
  border: 1px solid #ccc;
}

/* Disabled button */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary modal button */
.modal-primary-btn {
  background-color: var(--color-primary);
  color: #fff;
  text-transform: capitalize;
  opacity: 0.9;
}

.modal-primary-btn:hover {
  opacity: 1;
  color: #fff;
}

/* Edit button for info item */
.info-item p .edit-btn {
  display: inline-block;
  padding-top: -10px;
}

/* 2.2 Search Input
------------------------------------------ */

.search-bar-container button {
  border-radius: 5px;
}

/* Search bar layout */
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  max-width: 350px;
  width: 100%;
}

/* Input field styles */
.search-input {
  flex: 1;
  border: none;
  outline: none;
  width: 100%;
  padding: 0.2rem 1rem 0.2rem 0 !important;
}

/* Search and clear icons styles */
.input-search-icon,
.clear-input-icon {
  display: inline-block;
  width: 1.3rem;
  height: auto;
  object-fit: contain;
}

.clear-input-icon {
  width: 1.3rem;
  margin-right: 0.3rem;
}

.input-search-icon {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
  margin-left: 8px;
  margin-right: 0.3rem;
}

.search-icon,
.clear-input-icon {
  cursor: pointer;
}

@supports (-webkit-touch-callout: none) {
  .input-search-icon,
  .clear-input-icon {
    width: 20px;
    height: 20px;
  }
}

/* Hide clear input icon by default */
.clear-input-icon {
  display: none;
}

/* 2.3 Headings 
----------------------------------------- */
.page-heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.section-heading {
  font-size: 1.4rem;
}

/* 2.5 Custom Modal
----------------------------------------- */

/* Full-width modal with proper positioning and shadow */
.custom-modal-content {
  position: absolute;
  top: 2rem;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

/* Ensure full-width modals take up available space */
#confirmLocationModal .modal-dialog,
#provincesModal .modal-dialog,
#regionsModal .modal-dialog,
.full-width-modal .modal-dialog {
  margin: 0;
  padding: 0;
  max-width: 100%;
  height: 100%;
}

/* Enable scrolling inside modal body */
#confirmLocationModal .modal-body,
#provincesModal .modal-body,
#regionsModal .modal-body,
.full-width-modal .modal-body {
  height: 100%;
  overflow-y: auto;
}

/* Overlay Close Button */
.custom-overlay-close {
  position: fixed;
  top: 0px;
  right: 10px;
  z-index: 1055;
  /* Ensure it appears above the modal */
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  cursor: pointer;
  background-color: transparent;
  height: fit-content;
}

/* Custom close button styling */
.custom-overlay-close::before {
  content: '\00d7';
  /* Unicode for "×" (close symbol) */
  font-size: 2rem;
  color: rgb(255, 255, 255);
  /* icon color */
  display: inline-block;
  background: transparent !important;
  margin-top: -5px;
}

/* 2.6 Boostrap select
----------------------------------------- */

.bootstrap-select {
  width: 100% !important;
}

.bootstrap-select:not([class*='col-']):not([class*='form-control']):not(.input-group-btn) {
  width: 100%;
  outline: none !important;
}

.bootstrap-select .dropdown-item {
  padding: 0.6rem 1rem !important;
  font-size: 1rem;
  border-radius: 0.3rem;
}

.bootstrap-select .dropdown-item:hover {
  background-color: var(--dropdown-hover-bg);
}

.dropdown-item.active,
.dropdown-item:active {
  color: #000;
  text-decoration: none;
  background-color: var(--color-primary-light);
}

.dropdown-item.active,
.dropdown-item.selected {
  background-color: var(--color-primary-light);
}

.dropdown-item.selected:hover {
  background-color: var(--color-primary-light);
}

.bootstrap-select .dropdown-toggle {
  padding: 0.485rem 0.75rem;
  border: 1px solid var(--color-input-border);
  background-color: var(--color-input-background);
  min-height: 44.47px;
}

.bootstrap-select > .dropdown-toggle:focus,
.focused-border .dropdown-toggle {
  box-shadow: 0 0 0 0.5 black !important;
  border: 1.5px solid var(--color-primary) !important;
  box-shadow: 0 0 0px 0.25 #c7c7c731;
  outline: none !important;
  background-color: #fff;
}

.bootstrap-select .dropdown-menu {
  padding: 5px !important;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.12);
  border: none !important;
  margin-top: 5px !important;
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
  position: absolute;
  display: inline-block;
  right: 15px;
  top: 10px;
  font-size: 0.7rem;
}

.bootstrap-select button {
  width: 100% !important;
  border-radius: 0.4rem !important;
}

.bs-searchbox .form-control:focus {
  border: 2px solid var(--color-border);
  outline: none !important;
}

.delivery-type-select {
  border-radius: 3px;
  background-color: var(--color-input-background);
  border: 1px solid var(--color-border);
}

.delivery-type-select .dropdown-toggle {
  border: none !important;
}

.delivery-fee-select .dropdown-toggle {
  padding: 0.43rem 0.75rem !important;
}

/* 2.7 Custom Modal Styling (Overrides Bootstrap Defaults)
------------------------------------------------------------------- */

.modal-body {
  overflow-x: hidden;
}

.modal-header,
.modal-body {
  padding-inline: 20px;
  border-bottom: 0;
}

.modal-header .btn-close {
  font-size: 0.9rem;
}

.modal-title {
  font-size: 1.2rem;
}

.modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0 auto;
  width: 90%;
  max-width: 500px;
}

.modal .close {
  box-sizing: content-box;
  font-size: 2rem;
  line-height: 0.8rem;
  color: #000;
  background-color: transparent;
  border: 0;
  border-radius: 0.25rem;
  opacity: 0.5;
}

.modal .close:hover {
  opacity: 1;
}

.modal-footer {
  border-top: 0;
}

.modal .error {
  padding-bottom: 2px;
}

#confirm_modal .modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
}

#confirm_modal .modal-content {
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

#confirm_modal .modal-body {
  padding: 5px 20px;
}

/* 2.8 intl tel input
--------------------------------------------- */

#intel-phone .form-field label {
  top: 25%;
  font-size: 0.9rem;
}

.iti__selected-flag {
  margin-top: 5px;
  padding-top: 0;
  height: fit-content;
  display: flex;
  top: 43%;
  padding-left: 12px;
}

.form-group .iti__selected-flag {
  margin-top: -2px;
}

.iti {
  display: block !important;
}

.iti__search-input {
  padding: 5px 10px !important;
}

.update-phone .iti__selected-flag {
  margin-top: -17px !important;
  line-height: 10px;
}

.update-phone .iti__dropdown-content {
  margin-top: 20px !important;
}

.update-phone {
  padding-bottom: 70px !important;
}

/* 2.9 Custom Radio
--------------------------------------------- */

.custom-radio {
  display: inline-block;
  padding: 10px;
  border: 1px solid #eaeaea;
  margin-right: 10px;
  cursor: pointer;
  background-color: var(--light-bg);
  margin: 10px 0;
  border-radius: 0.25rem;
}

.custom-radio.selected {
  background-color: var(--color-primary-light);
  color: #fff;
}

.custom-radio .radio-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px !important;
  height: 18px;
  border-radius: 50%;
  margin-top: 2px;
  border: 1px solid rgb(119, 119, 119);
}

.custom-radio .radio-icon.selected {
  border: 0.3rem solid var(--color-primary);
}

.custom-radio .radio-content {
  width: calc(100% - 22px);
  padding-left: 10px;
}

.custom-radio .radio-heading {
  color: #000;
}

.radio-icon-active.selected {
  background-color: var(--color-primary);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
}

.radio-icon-active.selected + .radio-icon {
  border: 1px solid rgb(241, 13, 13);
}

/* 2.10 ON/OFF toggle button
--------------------------------------------- */

.toggle {
  position: relative;
  display: inline-block;
  width: 2.2rem;
  height: 1.2rem;
  margin-right: 5px;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(227, 227, 227);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 20px;
}

.toggle .slider:before {
  position: absolute;
  content: '';
  height: 0.95rem;
  width: 0.95rem;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

.toggle input:checked + .slider {
  background-color: var(--color-primary);
}

.toggle input:focus + .slider {
  box-shadow: 0 0 1px blue;
}

.toggle input:checked + .slider:before {
  -webkit-transform: translateX(17px);
  -ms-transform: translateX(17px);
  transform: translateX(17px);
}

/* 2.11 HEADER: delete this and replace with new header styling
--------------------------------------------- */
@media (min-width: 992px) {
  .top-section .nav-btn {
    display: none !important;
  }
}

header {
  display: block;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 1000;
}

header .header-inner {
  width: 100%;
  height: 64px;
  padding: 0 initial;
  background-color: transparent;
}

.inner-header {
  background: var(--color-primary-light);
  padding-bottom: 0px;
  padding-top: 0;
  /* padding-bottom: 30px; */
}

header .only_header {
  padding-bottom: 0 !important;
}

header .header-logo {
  display: inline-block;
  overflow: hidden;
  padding: 21px 38px 21px 5px;
}

header .header-logo img {
  display: block;
  max-height: 35px;
}

header .header-categories {
  display: block;
  position: relative;
  float: left;
  border-left: 1px solid rgba(255, 255, 255, 0.157);
}

header .header-menu {
  float: right;
}

header .header-menu ul {
  height: 64px;
  margin: 10px 0;
}

header .header-menu ul li {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  line-height: 64px;
  margin-left: 20px;
  margin-top: 1px;
}

header .header-menu ul li a {
  color: var(--color-primary);
  padding-bottom: 2px;
  font-size: 1rem;
}

header .header-menu ul li a:hover {
  border-bottom: 2px solid var(--color-primary);
}

/* login button */
header .header-menu ul li .login-btn {
  border: 1px solid var(--color-primary);
  color: #fff;
  background-color: var(--color-primary);
  padding: 3px 15px 5px;
  border-radius: 3px;
  transition: 0.3s;
}

header .header-menu ul li .login-btn:hover {
  color: var(--color-primary);
  background-color: transparent;
  text-decoration: none !important;
}

/* adi talk button */
.adi-talk-btn img {
  width: 21px;
  margin-top: -5px;
}

/* dropdown */
header .header-menu ul li ul.dropdown {
  width: 100%;
  width: 140px;
  height: fit-content;
  position: absolute;
  z-index: 999;
  display: none;
  right: 0px;
  top: 50px;
  padding-left: 0 !important;
  animation: fadeIn 0.3s;
  line-height: 0;
  box-shadow: 0 0 20px 0 rgb(182, 182, 182);
  padding-left: 0 !important;
}

header .header-menu ul li ul.dropdown::before {
  position: absolute;
  content: '';
  height: 10px;
  width: 10px;
  background-color: #eeeff1;
  right: 10px;
  top: -5px;
  transform: rotate(45deg);
  z-index: -1;
}

header .header-menu ul li:hover ul.dropdown {
  display: block;
}

header .header-menu ul li ul.dropdown li {
  display: block;
  width: 100%;
  background-color: #eeeff1;
  line-height: 40px;
  margin-left: 0;
  float: right;
  cursor: pointer;
}

header .header-menu ul li ul.dropdown li:hover {
  background-color: #dde0e5;
}

header .header-menu ul li ul.dropdown li a {
  padding: 5px;
  padding-left: 20px;
}

header .header-menu ul li ul.dropdown li a:hover {
  border-bottom: 0;
}

.lang-arrow {
  font-size: 15px;
}

#nav-lang a:hover {
  text-decoration: none !important;
}

.fa-check {
  font-size: 16px;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}

.nav-slider {
  display: block;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* sidebar Menu for logged in users */
#sidebarMenu {
  position: fixed;
  right: -100%;
  top: 0px;
  display: block;
  z-index: 999;
  width: 350px;
  height: 100%;
  transition: 0.3s;
  background: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.217);
}

#sidebarMenu li a:hover {
  border-bottom: 0;
}

#sidebarMenu.active {
  right: 0;
}

#sidebarMenu .fa-times {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid black;
  text-align: center;
  font-size: 1rem;
  padding-top: 5px;
}

.sidebarMenuInner {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebarMenuInner li {
  list-style: none;
  color: #4a6c84;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px;
  width: 100%;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebarMenuInner li span {
  display: block;
  /* font-size: 30px; */
  color: #4a6c84;
}

.sidebarMenuInner li a i {
  font-size: 1rem;
}

.sidebarMenuInner li a {
  color: #4a6c84;
  font-weight: 500 !important;
  text-transform: capitalize;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

#sidebarMenu li {
  line-height: normal;
  padding: 15px 0;
}

#sidebarMenu .dropdown-item {
  margin-left: 20px;
}

#sidebarMenu .dropdown-item:hover {
  background-color: transparent;
  color: var(--color-content-primary);
}

li.dropdown button.dropdown-toggle {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
}

li.dropdown button.dropdown-toggle {
  color: var(--color-content-primary);
  font-weight: 500;
  font-size: 1rem;
}

li.dropdown button.dropdown-toggle i {
  font-size: 1rem;
}

.dropdown.open .dropdown-menu {
  display: contents;
}

li.dropdown .dropdown-menu a {
  line-height: normal;
  padding: 10px;
}

/* nav */
.sidebar {
  overflow-y: auto;
  position: fixed;
  top: 0px;
  left: -250px;
  width: 250px;
  height: 100%;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
  opacity: 0.9;
  z-index: 11111111;
}

nav .nav-categories li {
  display: block;
  position: relative;
}

nav.open {
  left: 0px;
  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.275);
  opacity: 1;
}

nav .nav-separator {
  width: 100%;
  height: 1px;
  margin: 7px 0;
  background-color: rgba(0, 0, 0, 0.175);
}

.iconmenubar {
  list-style: none;
  display: flex;
  padding-left: 0;
  width: fit-content;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.iconmenubar li {
  text-align: center;
  padding: 15px 5px;
  width: 135px;
  margin: 10px;
  background: #fff;
  border: 2px solid #dfdfdf;
  border-radius: 5px;
}

.iconmenubar a:hover li {
  box-shadow: 0px 0px 20px 0px rgba(235, 235, 235, 1);
}

.iconmenubar li h4 {
  margin-bottom: 0;
  padding-top: 10px;
  font-weight: 600;
  color: var(--color-content-primary);
  font-size: 1rem;
}

/* mobile menu */
header .mobile-menu {
  display: flex;
  width: fit-content;
  float: right;
  list-style: none;
}

header .mobile-menu li {
  line-height: 38px;
  margin: 20px 0;
}

header .mobile-menu li a {
  font-size: 1rem;
}

header .mobile-menu li .login-btn {
  border: 1px solid var(--color-content-primary);
  color: var(--color-content-primary);
  padding: 3px 15px 5px;
  border-radius: 3px;
  transition: 0.3s;
}

header .mobile-menu li .login-btn:hover {
  color: #fff;
  background-color: transparent;
  background-color: var(--color-content-primary);
}

header .mobile-menu .nav-btn {
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 38px;
  margin: 12px 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

header .mobile-menu .nav-btn a {
  font-size: 25px;
  color: var(--color-content-primary);
}

header .mobile-menu {
  display: none;
}

/* mobile sidebar */

.sidebar ul {
  padding-left: 0;
}

.sidebar ul li {
  position: relative;
  margin: 0;
  line-height: 40px;
}

.sidebar ul li a {
  color: var(--color-content-primary);
  font-weight: 600;
  font-size: 17px;
}

.sidebar ul li a:hover {
  opacity: 0.8;
  text-decoration: none;
}

nav .nav-categories {
  padding: 20px;
}

nav .nav-categories li {
  display: flex;
  padding-bottom: 10px;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 10px;
  line-height: 30px;
}

nav .nav-categories li a {
  display: block;
  width: 100%;
  font-size: 1rem;
  color: var(--color-content-primary);
  text-decoration: none;
}

nav .nav-categories li img {
  padding-right: 10px;
  width: 40px;
  max-width: fit-content;
}

.nav-categories li h4 {
  margin-bottom: 0;
  font-weight: normal;
  color: var(--color-content-primary);
  font-size: 16px;
}

.d-none-mobile {
  display: block;
}

.d-none-desktop {
  display: none;
}

.nav-links li {
  display: block;
}

.nav-links ul li a {
  font-weight: normal;
}

.nav-links .adi-talk-btn img {
  width: 30px;
  margin-right: -10px;
}

.nav-links a {
  font-weight: normal !important;
}

.nav-links .sidebar-dropdown {
  display: block;
}

.nav-links .sidebar-submenu {
  display: none;
}

/* 2.12 Form Styling
-------------------------------------------------- */

/* 2.12.1 - Error Handling */
.form-container .error-container {
  margin-top: -12px;
  display: none;
}

.form-container .error-container .error-description {
  color: var(--color-danger);
  margin-left: 3px;
  font-size: 0.9rem;
}

.form-group .error {
  margin-top: 2px;
}

.error,
.input-error-message {
  color: var(--color-danger);
  font-size: 0.9rem;
  width: fit-content;
}

.error.info-message {
  color: rgb(109, 109, 109);
}

.input-error {
  border-color: var(--color-danger) !important;
}

.maxlength-feedback-container {
  /* display: flex;
  justify-content: space-between; */
  width: 100%;
  font-size: 0.8em;
  margin-top: 0.25rem;
  min-height: 1.2em;
  width: fit-content;
  float: right;
}

.maxlength-counter {
  color: #666;
  transition: color 0.2s;
  margin-top: 5px;
  float: right;
  width: fit-content;
}

.maxlength-counter.at-limit {
  color: rgb(109, 109, 109);
  font-weight: bold;
}

/* 2.12.2 - Form Field Styling */
.form-group .form-field {
  position: relative;
  width: 100%;
  margin: 15px 0;
}

.form-field input,
.form-field select {
  border: 1px solid #c6d4f1;
  width: 100%;
  font-size: 1rem;
  color: #000;
  background: transparent;
  border-radius: 0.4rem !important;
  padding: 22px 0.7rem 5px;
  outline: none;
  transition: box-shadow 0.2s ease-in-out, border 0.15s ease-in-out;
}

.form-field select {
  padding-right: 36px !important;
}

.form-field input:hover {
  background-color: #fff;
}

/* Floating Label Style */
.form-field label {
  position: absolute;
  top: 46%;
  left: 0.5rem;
  padding: 0 4px;
  color: #717171;
  font-size: 1rem;
  font-weight: 100;
  pointer-events: none;
  transform: translateY(-50%);
  transition: all 0.2s ease-in-out;
}

.form-field input:focus,
.form-field select:focus {
  border: 1.5px solid var(--color-primary);
}

.form-field select:focus {
  padding: 22px 1rem 5px 0.5rem;
}

.form-field input + label.active {
  top: 25%;
  font-size: 0.9rem;
  color: rgb(103, 103, 103);
}

/* Required Field Indicator */
.required::after {
  content: ' *';
  color: rgb(210, 14, 14);
}

/* 2.12.3 - Input & Label Styling */
.form-controls,
.form-textarea {
  padding: 0.43rem 0.75rem;
  margin-bottom: 20px;
  border: 1px solid var(--color-input-border);
  width: 100%;
  border-radius: 0.4rem;
  background-color: var(--color-input-background);
}

.form-controls:focus,
.form-textarea:focus {
  border: 1.5px solid var(--color-primary);
  background-color: #fff;
  outline: none;
}

.form-label {
  font-weight: bold;
  margin: 0.6rem 0;
  display: block;
}

.form-group .field-instruction {
  margin: -0.3rem 0 0.7rem;
}

/* 2.12.4 - Radio Button & Checkbox Styling */
.radio-group .radio-item input {
  width: 20px;
  height: 20px;
  margin-top: 0px;
  background-color: var(--color-input-control-border);
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* radio button style 2 */
.radio-group .selection-box {
  width: fit-content;
}

.radio-group-flex {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.radio-group-flex .selection-box {
  margin-right: 0;
}

.selection-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px;
  margin-right: 15px;
  background-color: var(--color-input-background);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.selection-box:hover {
  background-color: #fff;
}

.selection-box.selected {
  border-color: #000;
  background-color: var(--color-primary-light);
}

.selection-box .icon {
  font-size: 20px;
  margin-right: 10px;
  color: var(--color-info-background);
}

.selection-box .text {
  font-size: 14px;
  font-weight: bold;
  color: var(--color-info-background);
}

/* checkbox */
.checkbox {
  width: 20px;
  height: 20px;
}

/* 2.12.5 - Keyword Styling */
#divKeywords .controls {
  margin-bottom: -10px !important;
}

#divKeywords .keyword {
  display: inline-block;
  background-color: #f5f5f5;
  padding: 5px 10px;
  border-radius: 10px;
  text-transform: capitalize;
  margin-right: 10px;
  border: 1px solid rgb(199, 197, 197);
}

#divKeywords .keyword a {
  margin-left: 10px;
  color: #000;
}

#divKeywords .keyword a i {
  font-weight: normal;
}

/* 2.12.6 - Textarea */
.form-textarea {
  padding: 0.43rem 0.75rem;
  border: 1px solid var(--color-input-border);
  width: 100%;
  border-radius: 0.4rem;
  background-color: var(--color-input-background);
  margin-bottom: -5px;
}

/* 2.14 Map Section: Container and Controls
-------------------------------------------------- */

.service-area-map .map-container {
  aspect-ratio: 16 / 5;
  background-color: var(--color-primary-light);
  position: relative;
}

.map-container .map {
  width: 100%;
  height: 100%;
}

.btn-show-map {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background-color: var(--color-link);
  color: #fff;
  padding: 0.3rem 0.7rem;
}

/*  2.15 Profile Picture Card 
--------------------------------------------------- */

/* Card Container */
.profile-picture-card {
  max-width: 300px;
  background-color: var(--color-primary-light);
  padding: 20px;
  position: relative;
  text-align: center;
}

/* Image Container */
.profile-picture-card .image-container {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid var(--color-input-border);
  overflow: hidden;
  margin-inline: auto;
}

.profile-picture-card .image-container img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

/* Controls */
.profile-picture-card .controls {
  position: absolute;
  top: 1px;
  left: 1px;
  display: none;
}

.profile-picture-card .controls button {
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.profile-picture-card .controls button:hover {
  border: 1px solid var(--color-primary-muted);
}

.profile-picture-card .controls i {
  font-size: 1.2rem;
}

/*  Dropdown */
.controls .dropdown-list a {
  width: 120px;
}

/*  Placeholder Icon */
.profile-picture-card .placeholder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.35);
  padding: 10px;
  border-radius: 50%;
  display: block;
}

.profile-picture-card .placeholder-icon i {
  display: block;
}

/*  2.16 Show more link
--------------------------------------------------- */

.show-more-link {
  color: var(--color-link) !important;
  font-size: 1rem;
  padding-left: 0;
}

/* 2.17 Media Gallery carousel- Profile
-------------------------------------------------- */
.gallery-container {
  display: flex;
  overflow: hidden;
}

.gallery-container .gallery-item {
  flex: 0 0 32.8%;
  /* Only display 3 images at a time */
  position: relative;
}

.gallery-container .gallery-item .delete-icon {
  position: absolute;
  top: 5px;
  right: 0px;
  width: 1.3rem;
  height: 1.3rem;
  color: white;
  border-radius: 50%;
  text-align: center;
  cursor: pointer;
}

.gallery-container .gallery-item .delete-icon i {
  font-size: 1.1rem;
  color: var(--color-danger);
  display: block;
}

.carousel-navigation {
  display: flex;
  justify-content: flex-end;
  /* Align navigation to the right */
}

.carousel-navigation img {
  width: 1.3rem;
}

.carousel-prev,
.carousel-next {
  background-color: #f3f3f3;
  border: 1px solid var(--color-border);
  padding: 0.1rem 0.5rem;
  cursor: pointer;
  width: 2.222rem;
  height: 2.222rem;
  border-radius: 20px;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-prev {
  margin-right: 5px;
}

.carousel-prev:hover,
.carousel-next:hover {
  border: 1px solid var(--color-primary-muted);
  color: var(--color-primary);
  background-color: #d5deea;
}

.carousel-prev[disabled],
.carousel-next[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.gallery-container .img-responsive {
  width: 100%;
  aspect-ratio: 16 / 10;
  /* Maintain a 16:9 aspect ratio */
  object-fit: cover;
  object-position: center;
}

#carousel-gallery {
  display: flex;
  transition: all 0.5s ease;
  list-style-type: none;
  padding-left: 0;
  gap: 5px;
}

#image-preview-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  justify-content: center;
  align-items: center;
  z-index: 1111;
  opacity: 0;
  /* Initially hidden */
  visibility: hidden;
  /* Hidden state */
  transition: opacity 0.6s ease-in-out, visibility 0s 0.6s;
}

#image-preview-modal.show {
  visibility: visible;
  /* Make the modal visible */
  opacity: 1;
  /* Fully visible */
  transition: opacity 0.6s ease-in-out, visibility 0s 0s;
}

#image-counter {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 16px;
  color: white;
}

.img-cont {
  height: 100%;
  width: 50%;
  margin: auto;
  object-fit: contain;
}

#preview-prev,
#preview-next {
  position: absolute;
  top: 50%;
  font-size: 16px;
  color: white;
  cursor: pointer;
  background: #151515;
  border: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#preview-prev:hover,
#preview-next:hover {
  background-color: #2e2e2e;
}

#preview-prev img,
#preview-next img {
  color: #fff;
}

#preview-prev {
  left: 20px;
}

#preview-next {
  right: 20px;
}

.no-scroll {
  overflow: hidden;
}

#preview-prev:disabled,
#preview-next:disabled {
  background-color: #151515;
}

#preview-prev:disabled:hover,
#preview-next:disabled:hover {
  background-color: #151515;
}

#close-preview {
  padding: 0;
  position: absolute;
  top: 9px;
  right: 20px;
  font-size: 30px;
  color: white;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

video {
  cursor: pointer;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background-color: black;
}

.video-thumbnail {
  opacity: 0.8;
  object-fit: cover;
  background-color: black;
}

.video-icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

/* Video thumbnail container */
.video-thumbnail-container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
}

/* Wrapper for the play icon */
.play-icon-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.553);
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
  z-index: 1111;
}

/* Play button styling */
.play-button {
  color: white;
  font-size: 1.3rem;
  border: none;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  /* opacity: 0.8; */
  transition: opacity 0.3s ease;
  background-color: transparent;
  text-align: center;
  padding-left: 0.6rem;
}

.play-button:hover {
  opacity: 1;
}

/* Style for video thumbnail */
.video-thumbnail {
  width: 100%;
  height: auto;
}

/* 2.18 Reviews and Ratings
----------------------------------------------- */
/* Overall Ratings Section */
.rating-section .overall-ratings {
  border: 1px solid var(--color-border);
  padding: 20px;
  border-radius: 5px;
}

.rating-section .average-rating {
  width: 40%;
  border-right: 1px solid var(--color-border);
}

.rating-section .rating-display {
  width: 60%;
  padding-left: 20px;
}

/* Rating Value */
.rating-value {
  font-size: 1.2rem;
  margin-bottom: 0rem;
}

/* Star Rating Layout */
.star-rating {
  display: flex;
}

.star {
  position: relative;
  width: 20px;
  height: 20px;
  background: rgb(231, 231, 231);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  /* Shape of a star */
}

.star.filled {
  background: #ffa41c;
}

/* Rating Row Layout */
.rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0px;
}

.stars {
  display: flex;
}

.star {
  font-size: 10px;
  color: rgb(231, 231, 231);
}

.star.filled {
  color: #ffa41c;
}

/* Rating Count and Progress Bar */
.total-rating-count {
  font-size: 0.9rem;
}

.progress-bar {
  flex: 1;
  background: rgb(231, 231, 231);
  height: 6px;
  border-radius: 5px;
  overflow: hidden;
  margin-left: 10px;
}

.progress {
  height: 100%;
  background: rgb(231, 231, 231);
  border-radius: 5px;
}

.rating-count {
  padding-left: 10px;
  font-size: 14px;
  width: 30px;
}

/* Smaller Star Size for Rating Display */
.rating-display .star {
  width: 15px;
  height: 15px;
}

/* Reviews Section */
.reviews-section {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 10px;
}

.reviews-section .product-link {
  font-size: 0.9rem;
  color: #000;
  margin-top: 5px;
}

.reviews-section .product-link a {
  text-decoration: underline;
  color: #000;
  font-size: 0.9rem;
}

.reviews-section .truncated-text {
  margin-bottom: 0;
}

.reviews-section .truncated-text p {
  margin-bottom: 0;
}

.reviews-section .user-info {
  font-size: 0.9rem;
  margin-top: 10px;
}

.reviews-section .star {
  width: 15px;
  height: 15px;
}

/* Individual Review */
.review {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

.review.show {
  opacity: 1;
}

.truncated-text {
  margin: 10px 0;
}

/* User Info Layout */
.user-info {
  display: flex;
  align-items: center;
}

.user-image {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

/* 2.19 Pagination
----------------------------------------*/

.pagination {
  display: flex;
  justify-content: end;
  margin-top: 20px;
}

.pagination .page {
  border: 1px solid transparent;
  padding: 0.167rem 0.667rem;
  cursor: pointer;
  border-radius: 6px;
  background-color: transparent;
  opacity: 1;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  color: #000;
}

.pagination .page.active {
  border: 1px solid transparent;
  background-color: #dde5f7;
}

.pagination .page.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.pagination .navigation-button {
  background-color: var(--color-primary-light);
  border-radius: 0.4rem;
  border: none;
  width: 2.222rem;
  height: 2.222rem;
}

.pagination .navigation-button i {
  font-size: 0.9rem;
  color: #000;
}

.pagination .page-numbers-container {
  background-color: var(--color-primary-light);
  margin: 0 10px;
  border-radius: 0.4rem;
  padding: 0 0.2rem;
  display: flex;
  align-items: center;
}

.pagination button:hover,
.pagination .page.active:hover {
  background-color: #dde5f7;
}

.pagination button:disabled:hover {
  background-color: #f3f3f3;
}

/* 2.20  Empty state
---------------------------------------- */
.empty-state {
  padding: 20px 0;
  text-align: center;
}

.empty-state p {
  color: #888888;
  font-size: 0.9rem;
  user-select: none;
}

/* 2.21 Footer
-----------------------------------*/
footer {
  background-color: var(--color-primary);
  position: relative;
}

footer .pt-20 {
  padding-top: 30px;
}

/* Footer top section */
footer .footertop {
  background-color: white;
  padding: 20px;
  box-shadow: rgba(0, 0, 0, 0.123) 0px 7px 29px 0px;
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  justify-content: space-between;
}

footer .footertop p {
  display: inline-block;
  color: var(--color-text) !important;
  padding-right: 0 !important;
  width: 80%;
}

/*Call-to-action button inside the footer top */
footer .footertop .primary-btn {
  display: inline-block;
  width: fit-content;
}

/* Footer main content */
footer .content {
  padding-top: 60px;
  padding-bottom: 45px;
}

footer .content p,
footer .footer-links a {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin: 2px 0;
}

footer .footer-links a:hover {
  text-decoration: underline !important;
}

footer .content h3,
footer h4 {
  color: #fff;
}

footer .content h3 {
  font-size: 1.39rem;
}

footer .content p {
  font-size: 1rem;
  padding-right: 60px;
}

/* Footer buttons */
footer .secondary-btn {
  background-color: var(--color-secondary);
  color: #fff;
  border: 1px solid transparent;
  margin-right: 0.5rem;
}

footer .secondary-btn:hover {
  background-color: transparent;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

footer .btn-share {
  background-color: transparent;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

footer .btn-share:hover {
  background-color: var(--color-secondary);
  color: #fff;
  border: 1px solid var(--color-secondary);
}

footer .content h4 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 3px;
}

/* footer links */
footer .content .d-flex a {
  margin-top: -10px;
}

footer .content .footer-links a {
  display: block;
  margin: 2px 0;
}

/* footer multilang container */
.footer-multi-lang {
  background-color: var(--color-text-muted);
  border-radius: 3px;
  padding: 4px 20px;
  margin-top: 10px;
  cursor: pointer;
  display: none;
  font-size: 1rem;
}

.footer-multi-lang .lang-arrow {
  float: right;
  margin-top: 5px;
}

.langs-lists {
  background-color: #fff;
  padding: 4px 20px;
  display: none;
  width: 75%;
}

.langs-lists a {
  color: black !important;
  display: block;
  padding: 5px 0;
  font-size: 1rem;
  border-bottom: 1px solid rgb(235, 233, 233);
}

.active-dropdown {
  display: block;
}

/* footer bottom */
footer .footer-bottom p {
  background-color: var(--color-footer-bottom);
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.89rem;
  padding: 8px 0;
  margin-bottom: 0;
}

/* 2.22 Datatables
-----------------------------------*/

.table-responsive {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.dataTables_filter,
.dataList_length {
  margin-bottom: 20px !important;
}

.dataTable thead {
  background-color: #f2f7fa !important;
}

.dataTable {
  margin-bottom: 20px !important;
}

.dataTable th,
.dataTable td,
.dataTables_info {
  font-size: 0.9rem;
}

.trackOrders_tbl table {
  width: 600px;
  overflow-x: auto;
}

/* 2.23 Profile status
----------------------------------------------*/
.profile-status,
.modify-pause {
  padding: 0.2rem 0.5rem;
  font-size: 0.9rem;
  border-radius: 1rem;
  margin-top: 0.2rem;
}

.modify-pause {
  border: 1px solid var(--color-primary-muted);
  margin-left: 0.2rem;
  color: var(--color-text);
  background-color: transparent;
}

.modify-pause:hover {
  background-color: var(--color-primary-light);
}

.profile-status.active {
  background-color: #dff5d8;
  color: #217a00;
}

.profile-status.paused {
  background-color: #fff3cd;
  color: #856404;
}

.profile-status.pending {
  background-color: #fee2e2;
  color: #d32f2f;
}

.profile-status.suspended {
  background-color: #fde3d6;
  color: #c62828;
}

.profile-status.deactivated {
  background-color: #eceff1;
  color: #37474f;
}

.profile-status.close {
  background-color: #f0f0f0;
  color: #616161;
}

/* 2.24 keywords list table 
--------------------------------------------------- */
.keywords-list {
  border: 1px solid var(--color-border);
}

.keywords-list,
.tag-Container {
  clear: both;
}

.keywords-list .add-icon {
  margin-right: 0;
}

.keywords-list .keyword {
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-collapse: collapse;
  cursor: pointer;
}

.keywords-list .keyword.added {
  background-color: var(--color-primary-light);
}

.keywords-list .keyword p {
  margin-bottom: 0;
}

/*  2.25 Rounded keywords tags
------------------------------------------------- */

.tag-Container {
  border: 1px solid var(--color-border);
  padding: 10px;
  margin-bottom: 0.8rem;
}

.tag-Container .selected-tags {
  display: flex;
  flex-wrap: wrap;
}

.tag-item {
  display: inline-block;
  width: fit-content;
  border: 1.5px solid var(--color-border);
  background-color: var(--color-primary-light);
  padding: 0.2rem 0.7rem 0.2rem;
  border-radius: 2.222rem;
  margin: 5px 0;
  margin-right: 0.4rem;
  display: flex;
  justify-content: space-between;
  overflow: visible;
}

.tag-item .tag-text {
  margin-right: 5px;
  text-transform: capitalize;
}

.tag-item.pending {
  background-color: var(--color-pending);
  border: 1px solid var(--color-pending-border);
}

.tag-item .tooltip-btn {
  width: 1.4rem;
  margin-top: -5px;
}

.tag-item .tooltip-btn img {
  width: 100%;
}

.tag-item.pending p {
  color: #c9982d;
}

.tag-item.pending .delete_icon {
  color: #c9982d;
}

.tag-item p {
  display: inline;
  /* margin-right: .5rem; */
  margin-bottom: 0;
  font-size: 0.9rem;
}

.tag-item .delete_icon {
  color: #8ca0b8;
  cursor: pointer;
  font-size: 1rem;
  border: 1px solid var(--color-primary-muted);
  transition: 0.1s all;
}

.tag-item .close-icon {
  width: 1.4rem;
}

.tag-item .delete_icon:hover {
  background-color: #000;
}

.tooltip {
  display: block !important;
  opacity: 1 !important;
  z-index: 9999 !important;
}

/* 2.26 List item saver
---------------------------------------- */

/* List Item Styles */
#existingLists {
  max-height: 300px;
  overflow-y: auto;
}

#existingLists .list,
#listModal .creat-list {
  border: 1px solid var(--color-border);
  border-radius: 0.3rem;
  padding: 0.6rem 1rem;
  margin-top: 0.7rem;
  cursor: pointer;
  transition: 0.2s;
  color: #000;
}

#existingLists .list:first-child {
  margin-top: 0;
}

#existingLists .list:hover {
  background-color: #f8f8f8;
}

#existingLists .list .list-name {
  user-select: none;
}

/* Heart Icon Styles */
#existingLists .list .icon {
  margin-right: 0.5rem;
  width: 1.2rem;
}

#existingLists .list .icon {
  fill: none;
  stroke: var(--color-primary-muted);
  stroke-width: 2;
}

/* Saved List Styles */
#existingLists .list.saved-list {
  border: 1px solid var(--color-border);
  background-color: #f8f8f8;
}

#existingLists .list.saved-list .icon {
  fill: #ff385c !important;
  stroke: #ff385c;
}

/* Create List Modal Styles*/
#listModal .creat-list {
  background-color: var(--color-primary-light);
  width: 100%;
  text-align: left;
  padding-inline: 0.9rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#listModal .creat-list:hover {
  background-color: var(--color-border);
}

#listModal .creat-list img {
  margin-top: -3px;
  width: 1.3rem;
}

/* Heart Icon Styles (For Action Button) */
.heart-icon {
  width: 1rem;
  fill: none;
  stroke: black;
  stroke-width: 2;
  cursor: pointer;
  display: inline-block;
}

.heart-icon.saved {
  fill: #ff385c;
  stroke: none;
}

/* 2.27 Toast
----------------------------------------- */

/* Toast Container */
#toast-container,
#inToastContainer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
}

#toast-container {
  max-width: 700px;
  min-width: 350px;
  width: fit-content;
  height: fit-content;
  position: fixed;
  top: 10px;
  right: 10px;
  left: auto;
  transform: none;
  z-index: 2002;

  align-items: center;
}

#inToastContainer {
  margin-top: -1rem;
}

/* Toast Styles */
.toasts {
  background-color: #2c2727;
  display: flex;
  justify-content: center;
  padding: 0.5rem 1rem;
  box-shadow: 0 0px 15px rgba(0, 0, 0, 0.111);
  z-index: 111111;
  border-radius: 5px;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.toasts.no-title {
  align-items: center;
}

.toasts .icon-wrapper {
  width: 2rem;
  height: 2rem;
  /* background: #fff; */
  border-radius: 50%;
  box-sizing: border-box;
  padding: 0.4rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.toasts .icon {
  background: var(--primary);
  border-radius: 50%;
  height: 100%;
  width: 100%;
  position: relative;
}

.toasts .icon::before,
.toasts .icon::after {
  position: absolute;
  content: '';
  background: var(--secondary);
  border-radius: 5px;
  top: 50%;
  left: 50%;
}

.toasts .toast-message {
  padding: 0px 10px 0px 5px;
  flex: 1;
}

.toasts .toast-message h4,
.toasts .toast-message p {
  margin: 0;
  line-height: 1.2em;
}

.toasts .toast-message h4 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
}

.toasts .toast-message p {
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #eeeeee;
}

.toasts .toast-close {
  position: relative;
  padding: 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0);
  transition: background 0.2s ease-in-out;
}

.toasts .toast-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

.toasts .toast-close::before,
.toast-close::after {
  position: absolute;
  content: '';
  height: 12px;
  width: 1px;
  border-radius: 5px;
  background: #ffffff;
  top: 50%;
  left: 50%;
  transition: background 0.2s ease-in-out;
}

.toasts .toast-close:hover::before,
.toast-close:hover::after {
  background: #ffffff;
}

.toasts .toast-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.toasts .toast-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.toasts .timer {
  width: 0%;
  height: 4px;
  background: var(--primary);
  position: absolute;
  bottom: 0;
  left: 0;
  border-top-right-radius: 5px;
  box-shadow: 0 0 8px var(--primary);
}

.toasts .timer-animation {
  animation: countdown 5s linear forwards;
}

/* When toast becomes visible */
.toasts.toast-show {
  opacity: 1;
  transform: translateX(0);
}

/* When toast is hiding */
.toasts.toast-hide {
  opacity: 0;
  transform: translateX(100%);
}

@keyframes countdown {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

/* Success Styling  */

.toasts.success {
  --primary: #279d42;
  --secondary: #e3fee6;
}

.toasts.success .icon {
  transform: rotate(-45deg);
}

.toasts.success .icon::before {
  width: 10px;
  height: 3px;
  transform: translate(calc(-50% + 1px), calc(-50% + 1px));
}

.toasts.success .icon::after {
  width: 3px;
  height: 6px;
  transform: translate(calc(-50% - 3px), calc(-50% - 1px));
}

/* Warning Styling  */
.toasts.warning {
  --primary: #f29208;
  --secondary: #ffeedf;
}

.toasts.warning .icon::before {
  width: 3px;
  height: 3px;
  transform: translate(-50%, calc(-50% + 4px));
}

.toasts.warning .icon::after {
  width: 3px;
  height: 7px;
  transform: translate(-50%, calc(-50% - 2px));
}

/* Error Styling  */

.toasts.error {
  --primary: #e63435;
  --secondary: #ffeaec;
}

.toasts.error .icon::before {
  width: 3px;
  height: 3px;
  transform: translate(-50%, calc(-50% + 4px));
}

.toasts.error .icon::after {
  width: 3px;
  height: 7px;
  transform: translate(-50%, calc(-50% - 2px));
}

/* Info Styling */

.toasts.info {
  --primary: #42c0f2;
  --secondary: #cfeffc;
}

.toasts.info .icon::before {
  width: 3px;
  height: 7px;
  transform: translate(-50%, calc(-50% + 2px));
}

.toasts.info .icon::after {
  width: 3px;
  height: 3px;
  transform: translate(-50%, calc(-50% - 4px));
}

/* 2.28 Media library modal
----------------------------------------- */

.modal-header-one {
  padding-top: 20px !important;
}

#uploadArea {
  border: 1px dashed var(--color-primary);
  transition: border-color 0.3s ease;
}

#uploadArea.drag-over {
  border-color: #0376f0;
  /* Change border color on drag-over */
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
  background-color: #007bff21;
}

/* ~~ No files found state ~~ */

.upload-area {
  border: 1px solid #b5c4d6;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}

.upload-area .upload-icon {
  margin-top: 1.4rem;
  margin-bottom: 1rem;
}

.upload-area .upload-icon img {
  width: 2.5rem;
}

.upload-area #static-upload {
  position: relative;
  top: -5px;
  padding-bottom: 2rem;
}

.upload-area #static-upload h5 {
  color: #000 !important;
  font-weight: bold !important;
}

.upload-area #static-upload p {
  font-size: 1rem;
  margin: 0 auto;
  max-width: 90%;
  color: #000;
}

.upload-area #static-upload .underLintxt {
  margin: 8px;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: underline silver;
}

.upload-area #static-upload div span:nth-child(2) {
  font-size: 1rem;
  color: black;
  text-decoration: none;
}

.upload-area #static-upload div span {
  color: var(--color-link);
  font-size: 1rem;
  text-decoration: none;
  text-decoration: underline;
}

#noCardMessage {
  display: none;
  padding: 45px 30px;
  text-align: center;
  font-size: 1rem;
  border-radius: 10px;
  position: relative;
  top: -33px;
}

/* ~~ tabs ~~ */

.custom-tabs {
  display: flex;
  margin-bottom: 20px;
  padding: 2px;
  background: #f7f7f7;
  width: fit-content;
  border-radius: 10px;
}

.custom-tabs .custom-tab {
  cursor: pointer;
  border-bottom: 2px solid transparent;
  background: #f7f7f7;
  user-select: none;
  padding: 11px 11px;
  font-size: 0.9rem;
}

.custom-tabs .custom-tab:hover {
  background-color: #f1f0f0;
}

.select {
  border-radius: 0px 10px 10px 0px;
}

.custom-tab:first-child {
  border-radius: 10px 0 0px 10px;
}

.custom-tab.active {
  background-color: #dde5f7ea;
  border-radius: 7px;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.custom-tab.active:hover {
  background-color: #dde5f7ea;
}

#custom-tabs {
  display: none;
}

/* ~~ File Uploading Section ~~ */
#static-upload-show {
  display: none;
  height: 100% !important;
}

#static-upload-show .content {
  width: 100%;
  height: 120% !important;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 0 !important;
  padding-left: 10px;
  padding-right: 10px;
}

#static-upload-show span {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: block;
  margin: auto;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

#static-upload-show p {
  color: var(--color-text);
  font-size: 16px;
  margin-top: 10px;
}

#static-upload-show .onMObile {
  display: none;
}

.onMobileShow {
  display: none;
  margin: auto;
  position: absolute;
  left: 50%;
  right: 50%;
  left: 42%;
  width: 76px;
  bottom: 10%;
  position: fixed;
  bottom: 5%;
  position: fixed;
  z-index: 10;
}

/* ~~  File Items ~~ */
.file-upload.active {
  background-color: #dde5f7ea;
  border-radius: 7px;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}

.file-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  max-width: 100%;
  padding-bottom: 20px;
}

.file-grid .file-item,
.file-grid .upload-area {
  width: 100%;
  height: 0;
  /* Required to make padding-top work */
  padding-top: 75%;
  /* 4:3 aspect ratio (3/4 * 100) */
  position: relative;
}

.file-grid .upload-area {
  padding-top: 0%;
  height: 100%;
}

.file-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;

  width: 100%;
  height: 100%;
  background-color: #fff;
}

#file-itemBg {
  background-repeat: no-repeat;
  background-size: cover;
}

.file-item img,
.file-item video {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.file-item {
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.crossClose {
  display: none;
}

.file-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(189, 8, 8, 0);
  transition: background 0.15s ease-in-out;
  cursor: pointer;
}

.file-item img,
.file-item video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2 !important;
  display: block !important;
}

.file-item:hover::after {
  background: rgb(0, 0, 0, 0.1);
}

.file-grid.show-more {
  max-height: none;
}

#show-btn-div {
  margin: 10px;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

#show-btn-div .show-more-btn {
  z-index: 1000;
  position: relative;
}

/* Images */

.file-item img.uploadImg {
  transition: transform 0.1s ease, z-index 0s;
}

.file-item img:hover {
  animation: 0.3s ease-in-out;
  cursor: pointer;
  z-index: 1;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  background: #00000031;
  border-radius: 50px;
  border: 1px solid;
  padding: 0;
}

/* Videos */

.file-item video {
  width: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.videoUpload {
  pointer-events: none;
}

/* Selected Files Design */

.file-item.selected {
  border: 2px solid #007bff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.file-item img#croppedImage,
.videoUpload {
  background-color: rgb(243, 243, 243);
}

.file-item img#croppedImage:hover,
.videoUpload:hover {
  background-color: rgb(0, 0, 0, 0.1);
}

.file-item.selected .videoUpload {
  background-color: rgba(0, 123, 255, 0.1);
}

.file-item.selected img#croppedImage {
  background-color: rgba(0, 123, 255, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.file-item.selected::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/icons/check-tick.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 1000;
}

.file-item {
  transition: opacity 0.3s ease;
  position: relative;
}

.file-item:not(.selected) {
  opacity: 1;
  border: 1px solid #dde5f7;
}

.file-item.selected {
  background: none !important;
}

/* Files Uploading State - rounded circle */

.loading-indicator-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.parentloading-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 80%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-indicator {
  position: relative;
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

.loading-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.loading-indicator svg circle {
  transition: stroke-dashoffset 0.1s linear;
}

.percentage-text {
  position: absolute;
  font-size: 19px;
  font-weight: bold;
  color: black;
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* Action Menu */

.menu-option svg {
  display: flex;

  margin-right: 10px !important;
  justify-content: space-between;
  align-items: center;
}

.menu-option img {
  width: 20px;
}

.menu-option .preview {
  width: 15px;
}

.menu-option {
  padding: 1px;
  cursor: pointer;
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  position: relative;
}

.menu-option span {
  margin-right: 9px;
  display: flex;
}

.menu-option p {
  padding: 0;
}

.menu-option:hover {
  background-color: var(--color-primary-light);
}

.menu-options {
  position: absolute;
  top: 30px;
  right: 10px;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  display: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease-in-out;
}

.menu-options {
  position: absolute;
  top: 30px;
  right: 10px;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  display: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease-in-out;
}

.menu-options {
  z-index: 200;
  width: 155px;
  text-align: left;
  border-radius: 3px;
  top: 44px;
  display: none;
}

.menu-option .preview {
  width: 12px !important;
}

.dots-menu {
  position: absolute;
  top: 15px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
  color: white;
  background: #ffffff;
  border: 1px solid #dde5f7;
  border-radius: 4px;
  width: 1.8rem;
  height: 1.2rem;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.083);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dots-menu img {
  display: block !important;
  margin: auto;
  width: 100% !important;
  margin-top: 0px;
}

.dots-menu {
  z-index: 100;
  font-size: 25px;
}

/* ~~ Preview Section ~~ */
#previewModal {
  position: fixed;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 11111111111;
}

#previewModal #back-closeModal {
  color: black;
  font-size: 1.2rem;
  font-weight: normal;
  position: absolute;
  padding: 0px 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: fit-content;
  left: 0;
  z-index: 1;
  top: 42px;
}

#previewModal #modalContent {
  background: white;
  width: 100%;
  height: 95vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
}

#previewModal #modelContStart {
  max-width: 600px;
  width: 90%;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
}

#previewModal #modelContStart video {
  max-width: 100%;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
}

/* ~~ Crop Section ~~ */

.cropper-bg {
  background-image: none !important;
}

.cropper-container.cropper-bg {
  background-image: none !important;
}

#crop-cancel {
  background-color: #e9ecef;
  color: #000;
  border: 1px solid #e4e0e0;
}

.cropper-modal {
  background: none !important;
}

#cropBtn {
  display: flex;
  justify-content: center;
  /* margin-top: 30px; */
  margin-bottom: 30px;
}

#cropConfirm,
.crop-cancel {
  margin-right: 10px;
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  background-color: #2e5dc0;
  color: white;
  font-size: 16px;
  border-radius: 10px;
  margin-top: 10px;
}

#libraryModal .modal-body {
  max-height: 93vh;
}

#libraryModal .modal-header {
  padding-inline: 0;
}

#libraryModal .modal-title {
  font-size: 1.4rem;
}

#libraryModal .modal-dialog {
  overflow: hidden;
}

#libraryModal .modal .modal-content {
  background: white;
  border-radius: 0px;
  text-align: center;
  position: relative;
  animation: slideIn 0.3s ease-in-out;
  width: 100%;
  overflow: auto;
  position: relative;
  height: 100vh;
}

.modal-Content-Start.content {
  display: none;
}

.modal-Content-Start.content.active {
  display: block;
}

#libraryModal .close-btn-modal {
  top: 10px;
  right: 15px;
  font-size: 30px;
  cursor: pointer;
}

/*  Skeleton-loader */
.skeleton-loader {
  width: 100%;
  height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
}

.media-library .btn-submit {
  z-index: 1000;
}

#toast-container {
  z-index: 2002;
}

/*  2.29 Light Gallery
----------------------------------------- */

.gallery-view {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1000;
}

.gallery-view .gallery-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.gallery-view .main-gallery {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gallery-view .main-gallery img {
  width: 100%;
  max-width: fit-content;
}

/* Thumbnail styling */

.thumbnail-container {
  height: auto;
  background: #0000;
  padding: 10px;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  white-space: nowrap;
  scroll-snap-type: x mandatory;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.thumbnail-container::-webkit-scrollbar {
  display: none;
}

.thumbnail-container {
  scrollbar-width: none;
}

.thumbnail-container {
  -ms-overflow-style: none;
}

.thumbnail-parent {
  width: 45px;
  height: 33px;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  scroll-snap-type: x mandatory;
}

.thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.thumbnail.active,
.thumbnail:hover {
  border: 2px solid orangered;
}

/* video thumbail */
.thumbnail-parent {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 60px;
  height: 50px;
  overflow: hidden;
}

.thumbnail-parent .thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.thumbnail-parent .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  background-color: rgba(0, 0, 0, 0.313);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.thumbnail-parent .play-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* Gallery arrow Btns */
.gallery-view .gallery-content .main-gallery .nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  border: none;

  cursor: pointer;
  font-size: 24px;
  transition: background 0.3s;
  z-index: 100;
  background: rgb(0 0 0 / 72%);
  padding: 10px;
}

.gallery-view .gallery-content .main-gallery .nav-button {
  display: none;
}

.gallery-view .gallery-content .main-gallery .nav-button:hover {
  filter: brightness(1.5);
  background-color: #2b2b2b !important;
}

/* open Gallery Navigation  */
.gallery-view .controls {
  position: absolute;
  top: 0px;

  right: 10px;
  display: flex;
  gap: 5px;
  z-index: 1000;
}

.control-button:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.gallery-view .control-button {
  background: transparent;
  color: #939393;
  border: none;
  padding: 8px;
  cursor: pointer;
  transition: background 0.3s;
  border-radius: 50px;
  height: 37px;
  display: flex;
  background: rgba(0, 0, 0, 0.5);

  align-items: center;
  justify-content: center;
  /* width: 43px; */
  padding: 11px;
  margin-top: 20px;
}

.gallery-view .control-button.zoom-plus {
  padding: 9px !important;
}

.gallery-view .control-button.zoom-minus {
  padding: 10px !important;
}

.gallery-view .control-button:hover {
  filter: brightness(1.5);
}

.gallery-view .control-button.zoom-minus {
  display: none;
}

.control-button.zoom-plus.swipe-left {
  transform: translateX(-30px);
}

.gallery-view .control-button.close {
  font-weight: 600;
  position: relative;
  font-size: 33px;
  cursor: pointer;
  z-index: 1001;
  color: #939393;
}

.gallery-view {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.gallery-view.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* Gallery Counter */
.gallery-view .counter {
  position: absolute;
  top: 17px;
  left: 0px;
  background: rgba(0, 0, 0, 0.5);
  color: #939393;
  padding: 8px 16px;
}

/*open gallery  Image Show  */
.mainGalleryMedia {
  transition: transform 0.3s ease-in-out;
}

.gallery-view .main-gallery .gallery-media {
  max-height: 65vh;
}

#mainGalleryMedia video ~ #zoomInBtn,
#mainGalleryMedia video ~ #zoomOutBtn {
  display: none !important;
}

.mainGalleryMedia video {
  width: 85%;
  display: block;
  margin: auto;

  height: 80vh;
}

.mainGalleryMedia {
  transition: transform 0.3s ease-in-out;
}

.mainGalleryMedia.swipe-right {
  transform: translateX(30px);
}

/*  2.30 Custom confirm modal
----------------------------------------- */

.custom-delete-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  /* Hidden by default via inline style */
  justify-content: center;
  align-items: start;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 111111111111;
}

/* Modal Content */
.custom-delete-content {
  background: #fff;
  width: 400px;
  max-width: 90%;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.3s ease;
  margin-top: 40px;
  padding: 0 6px;
}

/* Header */
.custom-delete-header {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.custom-delete-header button {
  position: relative;
  top: -17px;
  font-weight: bold;
}

.custom-delete-header img {
  margin-top: 20px;
}

.custom-delete-title {
  margin: 0;
}

.custom-delete-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  margin-left: auto;
}

/* Body */
.custom-delete-body {
  padding: 0 1rem;
}

/* Footer */
.custom-delete-footer {
  padding: 0 1rem 1.5rem 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.custom-delete-content h5 {
  font-size: 20px;
  font-weight: 800;
}

.custom-delete-content p {
  font-size: 16px;
  color: black;
  line-height: 20px;
}

/* Buttons */
.custom-delete-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.error-popup-modal {
  margin: auto !important;
  margin-top: 10px !important;
  padding: 20px 20px 0 20px;
}

/* Error popup */
.error-popup-modal .custom-delete-footer .retry {
  background: #2e5dc0;
  color: white;
}

/*  2.31 Checkbox Component
----------------------------------------- */
.checkbox-container {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.custom-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--color-input-control-border);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  position: relative;
  margin-right: 8px;
}

.custom-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.custom-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-label {
  font-size: 1rem;
  color: #000000;
  cursor: pointer;
  user-select: none;
}

/*  2.33 Note Banner
----------------------------------------- */
.info-banner {
  padding: 10px 17px;
  border-radius: 0.4rem;
  margin-bottom: 20px;
}

.info-banner.info-banner--info {
  background-color: #f0f9fe;
  border-left: 3px solid var(--color-primary);
}

.info-banner.mt-4 {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.info-banner p {
  margin: 0;
  font-size: 1rem;
  color: #434343;
}

/*  2.34 Pagination
----------------------------------------- */
/* Pagination Container */
.pagination-container {
  margin: 20px 0;
  border: 1px solid #d5d4d4;
  width: fit-content;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Pagination Buttons */
.pagination-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.3rem 0.95rem;
  margin: 0;
  border: none;
  border-radius: 6px;
  background-color: transparent;
  color: #333;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 5px 0;
}

/* Hover State */
.pagination-btn:not(.disabled):hover {
  background-color: var(--hover-bg-light);
}

/* Active State */
.pagination-btn.active {
  background-color: #edf2fd;
  color: rgb(0, 0, 0);
  font-weight: normal;
}

.pagination-btn.active:hover {
  background-color: #edf2fd;
}

/* Disabled State */
.pagination-btn.disabled {
  background-color: transparent;
}

.pagination-btn.disabled img {
  filter: grayscale(100%) brightness(1.5);
  opacity: 0.8;
}

/* Ellipsis Style */
.pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #666;
  font-size: 14px;
}

/* Focus State (Accessibility) */
.pagination-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pagination-btn .icon {
  width: 1.3rem;
}

/*  2.35 Search Bar
----------------------------------------- */
.adi-search-container {
  max-width: 350px;
}

.adi-search-container .search-input-container {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 4px 16px;
  transition: var(--transition);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #cccccc;
}

.adi-search-container .search-input-container:focus-within {
  background-color: #fff;
  /* box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15); */
  border: 1px solid var(--color-primary);
}

.adi-search-container .search-input-container img {
  width: 20px;
  height: 20px;
  margin-right: 0.4rem;
  opacity: 0.6;
}

.adi-search-container .search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  color: #000;
  outline: none;
  padding: 0px 0;
}

.adi-search-container .search-input::placeholder {
  color: var(--dark-gray);
  font-weight: 400;
}

.adi-search-container .search-clear {
  background: none;
  border: none;
  color: var(--dark-gray);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  margin-left: 8px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.adi-search-container .search-clear img {
  display: inline-block;
  margin: 0 auto;
}

.adi-search-container .search-clear:hover {
  background-color: var(--divider);
  color: var(--text-color);
}

/* Animation for clear button */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.adi-search-container .search-clear[style*='display: block'] {
  display: flex !important;
  animation: fadeIn 0.2s ease-out;
}

/*  2.36 Custom radio group      
----------------------------------------- */
.custom-radio-group-style .radio-item {
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.2rem;
  background-color: #fff;
  transition: border-color 0.3s ease;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
}

.custom-radio-group-style .radio-item.selected {
  background-color: var(--color-primary-light);
}

.custom-radio-group-style .radio-item:hover {
  background-color: var(--hover-bg-light);
}

.custom-radio-group-style .radio-item input[type='radio'] {
  margin-top: 5px;
}

.custom-radio-group-style .radio-item label {
  cursor: pointer;
}

.custom-radio-group-style h6 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.custom-radio-group-style .radio-description {
  margin-bottom: 0;
}

/*  2.37 Accordian Component      
----------------------------------------- */

.aadi-accordion-component {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: visible;
  transition: all 0.3s ease;
}

.aadi-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 0.5px solid var(--color-border);
  cursor: pointer;
  flex-wrap: wrap;
}

.aadi-accordion-header-content {
  display: flex;
  gap: 4px;
}

.aadi-accordion-title {
  margin: 0;
  font-size: 1.111rem;
  /* 20px */
  font-weight: 600;
  color: #1e293b;
  padding-right: 0.5rem;
  margin-right: 0.5rem;
}

.aadi-accordion-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.778rem;
  /* 14px */
  color: var(--text-color);
  position: relative;
}
.aadi-accordion-meta::before {
  content: '';
  position: absolute;
  left: -10px;
  height: 20px;
  width: 1px;
  background-color: #d7d7d7;
  top: 50%;
  transform: translateY(-50%);
}
.aadi-accordion-dot {
  width: 4px;
  height: 4px;
  background-color: rgb(49, 49, 49);
  border-radius: 50%;
}

.aadi-accordion-actions {
  display: flex;
  align-items: center;
  gap: 0px;
}

.aadi-accordion-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.aadi-accordion-toggle-icon {
  transition: transform 0.3s ease;
  width: 1.2rem;
  height: 1.2rem;
}

.aadi-accordion-component.expanded .aadi-accordion-toggle-icon {
  transform: rotate(180deg);
}

.aadi-accordion-content {
  display: none;
  padding: 16px;
  border-top: 1px solid red;
}

.aadi-accordion-component.expanded .aadi-accordion-content {
  display: block;
}
.aadi-accordion-component .aadi-dropdown-button {
  margin-top: 4px !important;
}

/*  2.38 Dropdown Component      
----------------------------------------- */

.aadi-dropdown-component {
  position: relative;
  display: inline-block;
  pointer-events: auto !important;
}

.aadi-dropdown-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 28px;
  height: 17px;
  border: 1px solid var(--divider);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background-color: white;
  position: relative;
  padding: 0 2px;

  cursor: pointer;
}

.aadi-dropdown-icon {
  width: 85%;
}

.aadi-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  border: 1px solid var(--divider);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  border-radius: 6px;
  z-index: 1000;
  display: none;
  min-width: 200px;
}

.aadi-dropdown-component.open .aadi-dropdown-menu {
  display: block;
}

.aadi-dropdown-option {
  padding: 8px 12px;
  font-size: 0.9rem;
  color: #334155;
  cursor: pointer;
}

.aadi-dropdown-option:hover {
  background-color: var(--hover-bg-light);
}

.aadi-deactivate-option {
  color: #dc2626;
}

.aadi-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  border-top: 1px solid var(--divider);
  padding: 0 16px;
  box-sizing: border-box;
}

.aadi-accordion-component.expanded .aadi-accordion-content {
  padding: 16px;
}

/* ================================= */
/* 3- PUBLIC PAGES */
/* ================================= */

/*  3.1 Profile status guide
--------------------------------------------------------- */

/* status-guide-table */
.status-guide-table {
  max-width: 900px;
  width: 100%;
  border-collapse: collapse;
}

.status-guide-table table,
.status-guide-table th,
.status-guide-table td {
  border: 1px solid #dddddd;
}

.status-guide-table th,
.status-guide-table td {
  padding: 12px;
  text-align: left;
}

.status-guide-table th {
  background-color: #f2f2f2;
}

.status-guide-table .profile-status {
  width: fit-content;
}

.status-guide-table p {
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* 3.2 Member Profile
-------------------------------------------- */

/* flex parent container */
.business-cards-container {
  max-width: 600px;
  margin: 0 auto;
}

.business-cards-container .bb-1 {
  border-bottom: none;
}

.business-cards-container a.primary-btn:hover {
  color: #fff;
}

.business-cards-container #businessCardsHolder {
  flex-direction: column;
  gap: 0;
}

/* business card */
.business-cards-container .business-card {
  border-radius: 0px;
  margin: 0px 0;
}

.business-cards-container .business-card h3 {
  font-size: 1.2rem;
  color: #000;
}

/* Column width control */
#column1 {
  width: 45% !important;
}

#column2 {
  width: 55% !important;
}

#column2 .business-card {
  margin-left: 2rem;
}

/*  profile info  */
.business-cards-container .profile-info {
  background-color: var(--color-primary-light);
  position: relative;
  padding: 0;
}

.business-cards-container .profile-info .btn-edit-logo {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* business header alignment*/
.business-cards-container .profile-info .business-header {
  width: 50%;
  text-align: center;
  padding-inline: 15px;
  padding-top: 1.2rem;
  padding-bottom: 0;
}

.business-cards-container .profile-info .business-details {
  width: 50%;
}

/* Star icon and status indicator styling */
.business-cards-container .profile-info .business-details #starIcon {
  width: 1.2rem;
  margin-right: 3px;
  margin-top: -4px;
}

/* Styling for business logos and placeholder */
.business-cards-container .profile-info .business-header .logo,
#editBusinessInfo .logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  background-color: #fff;
  margin: 0 auto;
  margin-bottom: 10px;
  position: relative;
}

/* Placeholder logo if image is unavailable */
.business-cards-container .profile-info .business-header .logo img,
#editBusinessInfo .logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: none;
  /* Hide by default */
}

.business-cards-container .profile-info .business-header .placeholder-logo,
#editBusinessInfo .placeholder-logo {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-muted);
  color: #000;
  font-size: 36px;
  border-radius: 50%;
  font-weight: bold;
}

/* Status indicator on the logo */
.business-cards-container .profile-info .business-header .logo .status-indicator {
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  bottom: 5px;
  right: 5px;
  background-color: var(--color-danger);
  border: 3.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
}

/* Green status */
.business-cards-container .profile-info .business-header .logo .status-indicator.green {
  background-color: green;
}

/* Edit button positioning */
.business-cards-container .profile-info .business-header .logo .edit-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(0%, 0%);
  border: none;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.business-cards-container .profile-info .business-header .business-name {
  font-size: 1.2rem;
  margin-bottom: 0;
  color: #000;
}

/* Business status and username styling */
.business-cards-container .profile-info .business-header .business-status-info,
.business-cards-container .profile-info .business-header .busi-uname {
  font-size: 0.85rem;
}

.business-cards-container .profile-info .business-header .at-symbol {
  font-size: 0.7rem;
}

.business-cards-container .profile-info .business-details {
  padding-left: 20px;
  padding-top: 1.2rem;
  padding-bottom: 0.8rem;
}

.business-cards-container .profile-info .business-details .info-box .info-label {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.business-cards-container .profile-info .business-details .info-box .star-icon {
  font-size: 0.9rem;
}

.business-cards-container .profile-info .business-details .info-box h4 {
  font-size: 1rem;
}

.business-cards-container .profile-info .business-details .info-box a {
  text-decoration: none;
}

.business-cards-container .profile-info .business-details .info-box a h4 {
  color: #000;
}

/* business actions */
.business-cards-container .business-actions,
.business-cards-container .action-group {
  border-top: 1px solid var(--color-primary-muted);
  padding: 10px;
  flex-wrap: wrap;
}

.business-cards-container .action-group {
  border-top: none;
}

.business-cards-container .business-actions a,
.business-cards-container .action-group a {
  font-size: 0.9rem;
  display: inline-block;
  margin: 0 0.1rem 0px;
  padding: 5px 6px;
  border-radius: 7px;
  color: var(--color-text);
  text-decoration: none;
}

.business-cards-container .action-group img {
  width: 25px;
  object-fit: contain;
}

.business-cards-container .business-actions a {
  background-color: #dde5f7;
  transition: 0.3s ease;
}

.business-cards-container .business-actions a:hover {
  background-color: #fff;
}

.business-cards-container .business-actions img {
  width: 17px;
  height: 17px;
  margin-top: -4px;
}

.business-cards-container .action-group a {
  text-decoration: underline;
  margin: 0 2px;
}

.business-cards-container .business-actions i {
  margin-right: 2px;
  color: var(--color-primary);
}

.business-cards-container .action-group img {
  width: 0.9rem;
  object-fit: contain;
  margin-right: 3px;
}

/*  */
.action-website {
  position: relative;
  display: inline-block;
  padding-right: 20px;
}

.action-website .edit-btn {
  position: absolute;
  top: 10%;
  right: -0px;
  transition: right 0.3s, opacity 0.3s;
}

.action-website:hover .edit-btn {
  right: 0;
  opacity: 1;
}

/* business status */
.business-cards-container .profile-info .business-status {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 1px solid var(--color-primary-muted);
  border-radius: 25px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
}

/* - map location  - */
.business-cards-container .location-map .map-container {
  width: 100%;
  aspect-ratio: 16 / 10 !important;
  /* Maintain a 16:9 aspect ratio */
  background-color: #fff;
  border: 1px solid var(--color-border);
  position: relative;
}

.business-cards-container .location-map .show-map-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: inline-block;
  background-color: var(--color-link);
  color: #fff;
  font-size: 0.9rem;
  padding: 0.3rem 0.6rem;
}

.business-cards-container .about {
  padding-top: 10px;
}

.business-cards-container #businessOverview p {
  margin-bottom: 0;
}

.business-cards-container .about-info-items .info-item {
  padding: 0.4em 0rem;
  background: rgb(255, 255, 255);
  background-color: #fff;
  display: flex;
  align-items: baseline;
  justify-content: left;
  padding-right: 20px;
  margin-bottom: -0.3rem;
}

.business-cards-container .about-info-items .staff-detail {
  align-items: center;
}

.business-cards-container .about-info-items .info-item .info-content {
  flex: 1;
}

.business-cards-container .about-info-items .info-item p {
  margin-bottom: 0;
  color: #636363;
  display: inline-block;
}

.business-cards-container .about-info-items .info-icon {
  width: 25px;
  margin-right: 0.5rem;
}

.business-cards-container .about-info-items .info-icon img {
  object-fit: contain;
}

.business-cards-container .about-info-items .working-hours-container .see-all-hours-btn {
  padding-left: 0.5rem;
}

/* business keywords */
.business-card .keyword-list a {
  display: inline-block;
  padding: 0.3rem 0.5rem;
  font-size: 0.95rem;
  background-color: var(--color-primary-light);
  color: var(--color-text);
  text-decoration: none;
  margin-right: 0.1rem;
  margin-bottom: 0.6rem;
  border-radius: 0.3rem;
  transition: all 0.1s ease-in-out;
}

.business-card .keyword-list a:hover {
  background-color: var(--color-border);
}

/* opening hours and open/close status */
#workingHoursModal .btn-close {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 0.7rem;
}

#workingHoursModal .header h3 {
  color: #000;
  font-size: 1.4rem;
}

.business-hours {
  overflow: hidden;
  width: 90%;
  margin: 0 auto;
  padding: 0px 0px 15px;
}

.business-hours table {
  width: 100%;
}

.business-hours table tr {
  border: 0;
  border-bottom: 1px solid rgb(199, 199, 199);
}

.business-hours table tr:last-child {
  border-bottom: none;
}

.business-hours table td:first-child {
  width: 40%;
}

.business-hours table td {
  text-align: center;
  border: none;
  padding: 0.5rem 0;
}

.business-hours table tr .day-of-week {
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: capitalize;
}

.today {
  color: var(--color-link);
}

.business-status-label.open,
.business-status-label.closed {
  margin-right: 0.6rem;
}

.business-status-label.open:after {
  content: ' Open';
  color: var(--color-success);
}

.business-status-label.closed:after {
  content: ' Closed';
  color: rgb(230, 5, 5);
  vertical-align: middle;
}

/* 3.3 landing page 
--------------------------------------- */

.banner {
  background-color: #083a76;
  width: 100%;
  position: relative;
  margin-bottom: 80px;
}

.banner .circle {
  width: 100%;
  background-color: #083a76;
  height: 100%;
  position: absolute;
  top: 100px;
  border-radius: 50%;
  z-index: 0;
}

.banner .circle .circlee {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #094081;
}

.banner .circle .circle1 {
  margin-left: 20px;
}

.banner .circle .circle2 {
  margin-top: -50px !important;
  margin-left: 5px;
}

.banner .circle .circle3 {
  display: block;
  width: 115px;
  height: 115px;
  border-radius: 50%;
  background-color: #094081;
  margin-left: 90px;
  margin-top: -40px;
}

.banner .right-circles {
  float: right;
  margin-right: 20px;
  position: absolute;
  bottom: 130px;
  right: 0px;
}

/* banner header */
.banner .inner-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  z-index: 1111;
}

.banner .inner-header .header-menu a {
  color: #fff;
}

.banner .header-menu ul li a:hover {
  border-bottom: 2px solid #fff;
}

.banner .inner-header .header-menu .dropdown {
  box-shadow: none;
}

.banner .inner-header .header-menu .dropdown a {
  color: var(--color-primary);
}

.banner .inner-header .login-btn {
  background-color: var(--color-secondary);
  color: #fff;
}

.banner .inner-header .login-btn:hover {
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

.banner .mobile-menu .nav-btn a {
  font-size: 25px;
  color: #fff;
}

/* banner text */
.banner .text {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 140px;
  padding-bottom: 80px;
  margin: 0 auto;
  max-width: 930px;
}

.banner .text h2 {
  font-size: 3.5rem;
  color: var(--color-secondary);
}

.banner .text h4 {
  font-size: 1.5rem;
  color: rgb(226, 225, 225);
  font-weight: 500;
  margin-top: -5px;
}

.banner .text ol {
  display: inline-block;
  text-align: left;
  padding: 5px 0;
  margin-bottom: 0;
  max-width: 85%;
}

.banner .text p,
.banner .text ol li {
  color: rgb(228, 227, 227);
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.5rem;
}

.banner .btn_group .white-btn {
  background-color: #fff;
  color: var(--color-primary);
  border: 1px solid white;
}

.banner .btn_group .white-btn:hover {
  background-color: transparent;
  color: #fff;
}

.banner .btn_group .readmore-btn {
  background-color: transparent;
  color: #fff;
  border: 1px solid white;
}

.banner .btn_group .readmore-btn:hover {
  background-color: #fff;
  color: var(--color-primary);
}

/* business profile */
.business-profile {
  display: flex;
  padding: 20px 0 0;
}

.business-profile p {
  margin-right: 60px;
}

.business-profile .business-profile__img {
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 100%; */
  height: 280px;
  background: linear-gradient(#083a76e0, #083a76d2), url('../images/welcome-img.jpg');
  background-position: center;
  margin-bottom: -20px;
}

.business-profile .business-profile__img h4 {
  position: relative;
  color: var(--color-secondary);
  font-weight: 500;
  font-size: 1.7rem;
}

.business-profile .business-profile__img h4 .arrow-up {
  color: var(--color-success);
  font-size: 2rem;
}

.business-profile .business-profile__img h4 .arrow-down {
  color: var(--color-danger);
  font-size: 2rem;
}

.business-profile .business-profile__img h4::before {
  content: '';
  width: 15%;
  height: 2px;
  background-color: var(--color-secondary);
  position: absolute;
  top: 20px;
  left: -50px;
}

.business-profile .business-profile__img h4::after {
  content: '';
  width: 15%;
  height: 2px;
  background-color: var(--color-secondary);
  position: absolute;
  top: 20px;
  right: -50px;
}

.business-profile .link {
  color: var(--color-primary);
}

/* categories */
.categories {
  background-color: #f8f8f8;
  margin-bottom: 120px;
}

.categories .category .category_header {
  background-color: var(--color-primary);
  padding: 15px 0 10px;
  border-radius: 10px 10px 0 0;
  padding-left: 50px;
  position: relative;
}

.categories .category .category_header .category_no {
  width: 35px;
  height: 35px;
  background-color: var(--color-secondary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1.1rem;
  position: absolute;
  bottom: -15px;
  left: 15px;
}

.categories .category .category_header h4 {
  color: #fff;
  font-size: 1rem;
}

.categories .category .category_body {
  background-color: #fff;
  padding-top: 20px;
  padding-left: 70px;
  padding-bottom: 30px;
}

.categories .category .category_body p {
  line-height: 1.4rem;
  position: relative;
}

.categories .category .category_body p::before {
  content: '';
  width: 17px;
  height: 4px;
  background-color: var(--color-primary);
  position: absolute;
  top: 12px;
  left: -25px;
}

.categories .text-left {
  text-align: left;
}

/* 3.4 Categories list
---------------------------------------------- */

.categories_details {
  padding-top: 40px;
  padding-bottom: 40px;
}

.categories_details h4 {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.categories_details .category {
  display: flex;
  border-radius: 5px;
  background-color: #f2f7fa;
  padding: 10px 10px;
  transition: 0.2s ease-in-out;
  margin: 10px 0;
  width: 100%;
  text-decoration: none;
}

.categories_details .category:hover,
.categories_details .category:focus {
  background: var(--color-primary);
  color: #fff;
}

/* category number */
.categories_details .category .cat_no p {
  width: 35px;
  height: 35px;
  background-color: var(--color-secondary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 0;
  margin-right: 5px;
  font-size: 1rem;
}

/* category name */
.categories_details .category .cat_name p {
  margin: 0;
  margin-top: 5px;
  font-size: 1rem;
  color: #000;
  transition: 0.2s ease-in-out;
}

.categories_details .category:hover > .cat_name p {
  color: #fff !important;
}

/* 3.5 Advert cluster page  
------------------------------------------------- */
.advert-cluster-page {
  padding: 90px 0;
}

.adverts {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.adverts .col-lg-15 {
  border: none;
  display: flex;
  align-items: stretch;
  padding: 0;
}

.adverts .advert {
  margin: 5px;
  background-color: #f2f7fa;
  text-align: center;
  padding: 2rem 0.8rem 0.8rem;
  width: 100%;
  border-radius: 5px;
  text-decoration: none;
}

.adverts .advert:hover {
  background-color: var(--color-primary-light);
}

.adverts .advert > div:first-child {
  width: 60px;
  height: auto;
  max-height: 100%;
  margin: 0 auto;
}

.adverts .advert img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.adverts h4 {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.adverts p {
  margin-top: 10px;
}

.adverts .cluster_name {
  color: var(--color-secondary);
}

.adverts .categories_details .category {
  display: flex;
  align-items: center;
  border-radius: 5px;
  background-color: #f2f7fa;
  margin: 8px 0;
}

.adverts .categories_details .category:hover,
.adverts .categories_details .category:focus {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.adverts .categories_details .category .cat_no p {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  background-color: var(--color-primary);
}

.adverts .categories_details .category .cat_name p {
  margin-top: 0 !important;
}

.adverts .categories_details .category:hover .cat_name p {
  color: #000 !important;
}

/* 3.6 Plaza list  
------------------------------------------------- */

.plaza {
  background-color: #f8f8f8;
}

.gray-bg1 {
  border-radius: 15px;
}

.gray-bg1 .less-gutter input {
  border: none;
  margin-bottom: 1px;
  outline: none;
  color: #000;
}

/* list/grid button */
.layout_btn {
  border: 1px solid var(--color-border);
  background-color: #fff;
  color: #000;
  padding: 0px 6px;
}

#list.active,
#grid.active,
#list2.active,
#grid2.active {
  background-color: var(--color-primary-light);
}

/* sidebar */
.filters_sidebar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 295px;
  margin-right: 24px;
  padding: 20px;
  position: sticky;
  top: 0;
  overflow-y: scroll;
  max-height: calc(100vh - 10px);
  transition: all 0.5s ease-in-out;
}

.close_sidebar {
  display: none;
}

/* Scrollbar width */
.filters_sidebar::-webkit-scrollbar {
  width: 5px;
}

/* Scrollbar thumb (the draggable part) */
.filters_sidebar::-webkit-scrollbar-thumb {
  background-color: #c2c2c2;
  border-radius: 20px;
}

/* Scrollbar track (the background part) */
.filters_sidebar::-webkit-scrollbar-track {
  background-color: #eeeeee;
}

.filters_sidebar .filter {
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}

.filters_sidebar h3 {
  font-size: 1rem;
  text-transform: capitalize;
}

.filters_sidebar .price_flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 20px;
}

.filters_sidebar .price,
.filters_sidebar .price_flex {
  position: relative;
}

.filters_sidebar .price_flex input {
  width: 95%;
}

.filters_sidebar .price label {
  font-style: normal;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 24px;
  color: var(--color-text);
  margin-bottom: 6px;
}

.filters_sidebar input {
  padding-left: 20px;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  z-index: 1;
  background: transparent;
  color: #555658 !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none;
}

.filters_sidebar input:focus {
  outline: 0 !important;
}

.filters_sidebar .price_flex span {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 9;
  font-size: 0.9rem;
}

.filters_sidebar .checkbox_text {
  font-size: 0.9rem;
  margin-left: 5px;
  color: var(--color-text);
  text-transform: capitalize;
}

.filters_sidebar .checkboxHolder label {
  cursor: pointer;
  top: 3px;
  position: relative;
}

.filters_sidebar .checkboxHolder input[type='checkbox'] {
  margin: 4px 0 0;
  line-height: normal;
  width: 17px;
  height: 17px;
  font-size: 0.9rem;
  cursor: pointer;
}

.filters_sidebar .filter_dropdown {
  display: block;
  cursor: pointer;
}

.filters_sidebar .clear_all {
  font-size: 0.9rem;
  color: var(--color-link);
  text-decoration: underline !important;
}

.filters_sidebar .list-unstyled {
  list-style: none;
}

.filters_sidebar .list-unstyled li {
  display: inline-block;
  color: var(--color-text);
  background-color: #f2f7fa;
  border: 1px solid var(--color-border);
  padding: 4px 8px;
  margin: 4px 0;
  margin-right: 5px;
  border-radius: 4px;
}

.filters_sidebar .list-unstyled li a {
  text-decoration: none;
}

.filters_sidebar .list-unstyled li span {
  color: var(--color-text);
  font-size: 0.9rem;
}

.filters_sidebar .list-unstyled li:hover {
  background-color: #e0ecf3;
  color: #fff;
}

.filters_sidebar .list-unstyled li .close {
  font-size: 1rem;
  color: #000;
  margin-top: 2px;
  margin-left: 10px;
}

.filters_sidebar .fa-chevron-down,
.search_results .filter_icon {
  font-size: 0.8rem;
  color: var(--color-text);
}

/* search results */
.search_results {
  width: calc(100% - 295px);
}

.talent-sec .search_results {
  width: 100%;
}

.talent-sec .search_results .job_searchbar {
  width: 72%;
}

#talent {
  width: 100%;
}

.search_results .results_no {
  font-size: 0.9rem;
}

.search_results .links a {
  color: var(--color-primary);
  text-decoration: underline !important;
}

/* products_list */
#products {
  gap: 10px;
  /* justify-content: space-between; */
}

#products .item {
  width: 32%;
}

#products .job_item {
  width: 49%;
}

#talent .job_item {
  width: 32%;
}

.view-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  padding-left: 0;
  margin-bottom: 0;
  padding: 0;
}

.thumbnail {
  padding: 0px !important;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  width: 100%;
  border: 1px solid #fff;
}

/* list view */
.item.list-group-item,
.job_item.list-group-item {
  float: none;
  width: 100%;
  background-color: transparent;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 !important;
  border: 0;
}

.item.list-group-item {
  margin-bottom: 10px !important;
}

.item.list-group-item .img-event {
  float: left;
  width: 250px;
  height: 150px !important;
}

.item.list-group-item .img-event img {
  width: 100%;
  height: 100%;
}

.item.list-group-item .list-group-image {
  margin-right: 10px;
}

.item.list-group-item .thumbnail {
  margin-bottom: 0px;
  display: inline-block;
}

.item.list-group-item .caption {
  float: left;
  width: calc(100% - 250px);
  margin: 0;
}

.item.list-group-item:before,
.item.list-group-item:after {
  display: table;
  content: ' ';
}

.item.list-group-item:after {
  clear: both;
}

/* grid-view */
.service-head-boxx {
  height: 100%;
  border: 1px solid var(--color-border);
}

.service-head-boxx .thumbnail {
  height: 100%;
}

.service-head-boxx:hover {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.196);
  padding-bottom: 0 !important;
}

.service-head-boxx .img-event {
  height: 150px;
  width: 100%;
  cursor: pointer;
}

.service-head-boxx .img-event img {
  width: 100%;
  height: 100%;
}

.service-head-boxx h4 {
  margin-bottom: 4px;
  margin-top: 5px;
  color: var(--color-primary) !important;
  font-size: 1rem;
}

.service-head-boxx h4 a {
  color: var(--color-text) !important;
  font-size: 1.1rem !important;
  display: inline-block;
  margin-bottom: 3px;
}

.service-head-boxx .service_details {
  padding: 10px 12px 0;
  margin: 0 0px;
}

.service_details .text span {
  display: block;
}

.service-head-boxx .service_details .text {
  cursor: pointer;
}

.service-head-boxx p {
  font-size: 16px;
}

.service-head-boxx .location {
  font-size: 16px;
  margin-bottom: 0px;
}

.service-head-boxx .service_details_bottom {
  border-top: 1px solid var(--color-border);
  margin-top: 10px;
  padding-top: 5px;
}

.service-head-boxx .service_details_bottom .price {
  color: var(--color-secondary);
  font-size: 1.1rem;
}

.service-head-boxx .service_details_bottom .price span {
  font-size: 0.8rem;
  padding-right: 5px;
}

.service-head-boxx .service_details .links {
  width: fit-content;
}

.service-head-boxx .service_details .links .btn {
  padding: 0;
}

.service-head-boxx .service_details .links .icon {
  position: relative;
  cursor: pointer;
  display: inline;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  margin-right: 2px;
  border-radius: 10px;
}

.service-head-boxx .service_details .links .tooltip {
  position: absolute;
  top: 0;
  left: -10px;
  font-size: 14px;
  width: fit-content;
  background: var(--color-text);
  color: #fff;
  padding: 5px 8px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  border-radius: 4px;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.service-head-boxx .service_details .links .tooltip::before {
  position: absolute;
  content: '';
  height: 8px;
  /* width: fit-content; */
  background: #fff;
  bottom: 3px;
  left: -50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: translate(-50%) rotate(45deg);
  -moz-transform: translate(-50%) rotate(45deg);
  -ms-transform: translate(-50%) rotate(45deg);
  -o-transform: translate(-50%) rotate(45deg);
  -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -ms-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.service-head-boxx .service_details .links .icon:hover .tooltip {
  top: -30px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.service-head-boxx .service_details .links .icon:hover span,
.service-head-boxx .service_details .links .icon:hover .tooltip {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.01);
}

.service-head-boxx .icon .plaza-btn {
  width: 35px;
  height: 30px;
  vertical-align: middle;
  /* padding-top: 5px; */
  background-color: #f2f7fa;
}

.service-head-boxx .icon .plaza-btn img {
  margin-left: -5px;
}

/* buttons */
.plaza-btn {
  color: var(--color-primary);
}

.plaza-btn:hover {
  color: var(--color-primary);
}

/* sort_dropdown   */
.sort_dropdown {
  position: relative;
}

.sort_dropdown button,
.search_results .filter_btn {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  background-color: var(--color-primary-light);
  border: 1px solid transparent;
  border-radius: 2px;
}

.search_results .filter_btn {
  display: none;
}

.sort_dropdown button:hover,
.search_results .filter_btn:hover {
  border: 1px solid var(--color-primary-muted);
}

.sort_dropdown i {
  font-size: 0.8rem;
}

.sort_dropdown .sort_dropdown__items {
  float: right;
  background-color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.082);
  position: absolute;
  right: 0;
  z-index: 111;
  transition: all 0.5s ease-in;
}

.sort_dropdown__items a {
  display: block;
  border: 1px solid #f2f7fa;
  width: 200px;
  margin: 0;
  padding: 7px 10px 7px 15px;
  text-align: left;
  color: var(--color-text);
  font-size: 0.9rem;
  text-decoration: none;
}

.sort_dropdown__items a:hover {
  background-color: #f2f7fa;
}

.hide_dropdown {
  display: none;
}

.show_dropdown {
  display: block;
}

/* pagination */
.pagination_page span {
  color: #7e7e7e;
  font-size: 0.9rem;
}

.pagination_page .primary-btn {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding-inline: 40px;
  margin-top: 12px;
}

.pagination_page .primary-btn:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* compare results */
#overlay_compare {
  position: fixed;
  z-index: 1111;
  bottom: 43px;
  left: 0%;
  width: 100%;
}

#overlay_compare .product_thumb {
  background-color: var(--light-bg);
  border: 1px solid #e7e6e6;
  position: relative;
  margin: 10px 0px;
  width: 24%;
}

#overlay_compare .products {
  box-shadow: 0 0 20px 0 rgba(20, 20, 20, 0.195);
  max-width: 700px;
  width: 60%;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
  border: 1px solid #dde5eb;
  padding-bottom: 20px;
  padding: 15px;
  border-radius: 10px;
}

#overlay_compare .product_thumb .delete_btn {
  position: absolute;
  right: -13px;
  top: -15px;
  border: 0;
  z-index: 1111;
  background-color: transparent;
  color: rgb(185, 16, 16);
}

#overlay_compare .product_image {
  width: 100%;
  height: 100px;
}

#overlay_compare .product_image img {
  width: 100%;
  height: 100%;
}

#overlay_compare .product_meta {
  padding: 10px 5px;
}

#overlay_compare .product_meta p {
  margin: 0;
}

#overlay_compare .product_meta .title {
  font-size: 0.8rem;
}

#overlay_compare .product_meta .price {
  font-size: 0.9rem;
  color: #000;
}

#overlay_compare .products .btn {
  padding: 0.3rem 1rem;
}

#overlay_compare .products .back-btn {
  border: 2px solid #6c757d;
  background-color: var(--color-text);
  color: #fff;
}

#overlay_compare .products .primary-btn:hover {
  color: #fff;
}

body.no-scroll {
  overflow: hidden;
  /* Hide vertical scrollbar */
}

/* 3.7 Gallery Preview page  
------------------------------------------------- */

.gallery {
  height: fit-content;
  padding-bottom: 0;
  overflow-y: hidden;
}

/* tabs */
.gallery .nav-tabs {
  justify-content: center;
  border-top: 1px solid rgb(228, 227, 227);
  border-bottom: 0;
  /* margin: 5px 0; */
}

.gallery .nav-tabs button {
  color: var(--color-text);
  font-size: 1rem;
  padding: 3px 0;
  display: inline-block;
  margin: 5px 15px 10px;
  border: none;
}

.gallery .nav-tabs button.active {
  color: #000;
  border-bottom: 2px solid var(--color-secondary) !important;
}

.expanded_carousel {
  height: fit-content;
  position: relative;
  margin-bottom: 40px;
}

.gallery .swiper {
  height: 94%;
  position: relative;
  width: 100%;
}

.gallery .thumbs .swiper-slide {
  width: 20%;
  height: 100%;
  opacity: 0.9;
}

.gallery .thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid var(--color-secondary);
}

.gallery .thumbs .swiper-wrapper {
  justify-content: center;
}

.gallery .thumbs {
  height: fit-content;
  box-sizing: border-box;
  margin-top: 20px;
  position: relative;
}

.gallery .fa-chevron-left {
  color: var(--color-secondary);
  margin-right: 30px;
}

.gallery .go-back {
  color: var(--color-secondary);
  font-size: 1rem;
  display: block;
  margin-top: -2px;
  margin-left: -20px;
}

.gallery .header .details {
  border-right: 1px solid var(--color-primary-muted);
  padding-right: 40px;
  padding: 10px 0;
}

.gallery .header {
  padding: 10px 0;
  background-color: #f2f7fa;
}

.gallery .product_details {
  width: 100%;
  display: none !important;
}

.gallery .header h3 {
  color: var(--color-primary);
  font-size: 1.39rem;
  position: relative;
  margin-bottom: 0;
}

.gallery .header p {
  margin: 0;
}

.gallery .header .price {
  color: var(--color-secondary);
  font-size: 1.2rem;
  font-weight: 500;
  margin-left: 10px;
}

.gallery .imperfection {
  padding: 30px 0;
  text-align: center;
  max-width: 700px;
  width: 100%;
  background-color: var(--color-primary-light);
  padding: 30px;
}

.gallery .disclaimer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  padding-bottom: 5px;
  margin: 0 auto;
}

.gallery .disclaimer i {
  font-size: 1.5rem;
  color: var(--color-primary);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.swiper-button-prev:after {
  content: 'prev';
  font-size: 1rem;
}

.swiper-button-next:after {
  content: 'next';
  font-size: 1rem;
}

.swiper-button-next,
.swiper-button-prev {
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 0.6rem;
}

/* 3.8 Plaza details view   
------------------------------------------------- */

.product_carousel {
  width: 100%;
}

.product_details {
  width: 100%;
  padding-top: 20px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
}

.swiper {
  width: 100%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  background-size: cover;
  background-position: center;
}

.mySwiper2 {
  width: 100%;
}

.mySwiper2 {
  height: auto;
}

.mySwiper {
  height: auto;
  box-sizing: border-box;
  padding: 0px 0;
}

.mySwiper {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-top: 4px;
}

.mySwiper .swiper-slide,
.mySwiper4 .swiper-slide {
  width: 20%;
  height: auto;
  opacity: 0.8;
}

.mySwiper .swiper-slide-thumb-active,
.mySwiper4 .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid var(--color-secondary);
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 1.1rem !important;
}

.product_carousel .swiper-slide {
  height: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  position: relative;
}

.product_carousel .swiper-slide img {
  height: auto;
}

.product_details .section-heading {
  margin-bottom: 5px !important;
}

.product_details .price {
  font-size: 1.3rem;
  color: var(--color-secondary);
  margin-top: 0px;
}

.product_details .price span {
  font-size: 1.1rem;
}

.product_details .location {
  color: var(--color-text);
}

.product_details .contact {
  background-color: var(--color-primary-light);
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
}

.product_details .contact h4 {
  font-size: 1rem;
}

.product_features .feature .fa-check {
  background-color: white;
  color: var(--color-primary);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.079);
  float: left;
}

.product_details .primary-btn:hover {
  color: #fff;
}

/* table styling */
.product_features .feature table {
  width: 100%;
  margin-top: 20px;
}

.product_features .feature table tr,
.product_features .feature table td {
  border: 1px solid var(--color-border);
  padding: 8px 10px;
}

.product_features .feature table .title {
  font-weight: 600;
  text-transform: capitalize;
  color: var(--color-text);
  width: 35%;
}

.location_map {
  width: 100%;
}

.location_map iframe {
  width: 100%;
  height: 100%;
  background-color: #f2f7fa;
}

.product_features .location_map #map_div {
  height: auto !important;
  width: 100%;
  border: 1px solid var(--color-border);
}

/* 3.9 Post ads page   
------------------------------------------------- */

.form_holder {
  max-width: 600px;
  min-height: 330px;
  padding: 1rem 0px 1rem;
  border-radius: 5px;
  background: #fff;
  /* box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.043); */
  overflow: hidden;
  margin: 30px auto;
}

.form_holder > .d-flex {
  display: flex;
  align-items: center;
}

.form_holder h6 {
  margin: 0;
}

.form_holder h6,
.form_holder h5 {
  color: var(--color-primary);
  width: 20%;
  font-size: 1rem;
}

.form_holder h6 {
  width: fit-content;
  margin-right: 0.5rem;
}

.form_holder h5 {
  width: 100%;
  font-size: 1.1rem;
  text-align: center;
  text-transform: none;
}

.form_holder p {
  margin-top: -5px;
}

.form_holder .inputs_holder {
  width: 100%;
}

.form_holder .location {
  display: flex;
  align-items: center;
  width: fit-content;
}

.form_holder .location span {
  width: fit-content;
  margin-top: 0px;
}

.form_holder .location input[type='radio'] {
  width: 20px;
  height: 20px;
  margin-left: 0.8rem;
  margin-right: 0.4rem;
}

.form_holder .other_address {
  background-color: var(--dropdown-hover-bg);
  padding: 20px;
  padding-bottom: 10px;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  display: none;
  margin: 10px 0 20px;
}

.form_holder .spot_location {
  color: var(--color-secondary);
  text-decoration: underline !important;
}

.form_holder .upload_btn {
  background-color: transparent;
  color: var(--color-primary);
  border: none;
  margin-left: 10px;
}

/* post_ads_images */
.form_holder .file-area {
  text-align: center;
}

.file-area .file-dummy {
  background-color: transparent;
  border: 2px dashed #07306244;
  padding: 1rem 0.5rem 0.3rem !important;
  position: relative;
}

.file-area .file-dummy img {
  width: 3.5rem;
  height: auto;
}

.form_holder .back_btn {
  color: rgb(59, 59, 59);
  font-size: 1rem;
}

.images_previews h6 {
  padding-top: 1rem;
}

.images_previews .preview {
  width: 33.3%;
  height: 120px;
  padding: 6px 4px;
  position: relative;
}

.images_previews .preview img {
  width: 100%;
  height: 100%;
  position: relative;
}

.form_holder .close {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #050404;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form_holder .close span {
  color: #fff;
}

#myModal_map .modal-content {
  padding-bottom: 60px;
}

#myModal_map .modal-dialog {
  width: 90%;
  max-width: 1250px;
}

#myModal_map #save_button {
  z-index: 999;
  position: absolute;
  left: 43% !important;
}

/* 3.10 FAQ page   
------------------------------------------------- */

.accordionMenu {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px;
}

.accordionMenu input[type='checkbox'] {
  display: none;
}

.accordionMenu .accordianHeader {
  display: block;
  padding: 0.7rem 0.9rem;
  background: #fff;
  font-size: 1rem;
  color: #000;
  position: relative;
  cursor: pointer !important;
  border: 1px solid var(--color-border);
  font-weight: 500;
  margin-bottom: 12px;
  padding-right: 20px;
  font-weight: bold;
  border-radius: 5px;
}

.accordionMenu .accordianHeader::after {
  display: block;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border: transparent transparent transparent #000;
  position: absolute;
  right: 10px;
  top: 20px;
  z-index: 10;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.accordionMenu .content {
  max-height: 0;
  height: 0;
  overflow: hidden;
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}

.accordionMenu .content .inner {
  font-size: 1rem;
  color: #4f575f;
  background: #fff;
  padding: 15px 15px;
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.084);
  margin-bottom: 20px;
  border: 1px solid var(--color-border);
  border-top: 0;
}

.accordionMenu .content .inner p {
  margin: 5px 0;
}

.accordionMenu input[type='radio']:checked + .accordianHeader {
  margin-bottom: 0 !important;
}

.activeAccordian + .accordianHeader {
  margin-bottom: 0 !important;
}

.accordionMenu input[type='radio']:checked + .accordianHeader:after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.activeAccordian + .accordianHeader:after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.accordionMenu input[type='radio']:checked + .accordianHeader + .content {
  max-height: 2000px;
  height: auto;
}

.activeAccordian + .accordianHeader + .content {
  max-height: 2000px;
  height: auto;
}

.accordionMenu form textarea {
  height: 100px;
}

/* 3.11 Member details page   
------------------------------------------------- */

.memberDetails_tabs {
  margin-top: 30px;
  margin-bottom: -30px;
}

.memberDetails_tabs .tabs {
  max-width: 550px;
  min-height: 330px;
  border-radius: 5px;
  background: #fff;
  margin: 0 auto;
}

.memberDetails_tabs .tabs .tab-header {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 5px;
}

.tabs .tab-header > div {
  width: calc(100% / 2);
  text-align: left;
  color: rgb(131, 130, 130);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: capitalize;
  outline: none;
}

.memberDetails_tabs .tabs .tab-header > div.active {
  color: var(--color-primary);
}

.memberDetails_tabs .tabs .tab-indicator {
  position: relative;
  width: calc(100% / 2);
  height: 5px;
  background-color: var(--color-secondary);
  border-radius: 5px;
  transition: all 500ms ease-in-out;
}

.memberDetails_tabs .tabs .tab-body {
  position: relative;
  height: calc(100% -60px);
  color: black;
}

.memberDetails_tabs .tabs .tab-body h2 {
  color: violet;
}

.memberDetails_tabs .tabs .tab-body > div {
  position: absolute;
  top: -200%;
  opacity: 0;
  margin-top: 5px;
  transform: scale(0.9);
  transition: opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out;
  width: 100%;
}

.memberDetails_tabs .tabs .tab-body > div.active {
  top: 0px;
  opacity: 1;
  transform: scale(1);
  margin-top: 0px;
}

.memberDetails_tabs .controls input {
  width: 100% !important;
  position: relative;
  margin-bottom: 0;
}

.memberDetails_tabs .controls i {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1rem;
  color: #808080;
  cursor: pointer;
}

.memberDetails_tabs .controls .fa-eye {
  color: var(--color-primary);
}

.memberDetails_tabs .controls {
  display: flex;
  align-items: center;
}

.memberDetails_tabs .controls > div {
  flex: 1;
  display: flex;
  align-items: center;
}

.memberDetails_tabs .controls .input-form {
  width: 100%;
  flex-grow: 1;
  padding-right: 35px;
}

.memberDetails_tabs .controls .fa-eye-slash {
  position: absolute;
  right: 15px;
  cursor: pointer;
}

.memberDetails_tabs .controls .generate_btn {
  margin-left: 5px;
}

.memberDetails_tabs .generate_btn {
  width: fit-content;
  background-color: var(--color-primary);
  padding-inline: 0.3rem !important;
  color: #fff;
  border: 1px solid var(--color-primary);
}

.memberDetails_tabs #newPwdeye {
  position: absolute;
  top: 10px;
  right: 150px;
}

.memberDetails_tabs .back-btn {
  background-color: var(--color-text);
  color: #fff;
}

.memberDetails_tabs .submit-btn:hover {
  color: #fff;
}

/* 3.12 Category details page   
------------------------------------------------- */

.categoryHero_section {
  background-color: #f0f0f0;
}

.categoryHero_section .container,
.profile_benefits,
.profile_offerings .container,
.profile_steps .container,
.profile_features {
  max-width: 1140px !important;
}

.categoryHero_section,
.profile_benefits,
.profile_offerings,
.profile_features,
.profile_steps {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.categoryHero_section img {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  object-position: 80% 80%;
}

.categoryHero_section .heading {
  font-size: 1.5rem;
  margin-bottom: 0;
}

.categoryHero_section .sub_heading {
  font-size: 1.2rem;
  color: var(--color-text);
}

.profile_benefits ol {
  padding-left: 24px;
}

.profile_benefits .image {
  height: 600px;
  width: 100%;
}

.profile_benefits .image img {
  height: 100%;
  width: 100%;
}

.profile_offerings {
  background-color: #f8f8f8;
}

.profile_offerings .image {
  height: 280px;
  margin-top: 0 !important;
}

.profile_offerings .image img {
  height: 100%;
}

.profile_steps {
  background: linear-gradient(#032956ca, #042f63da), url(../images/secbg1.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top;
}

.profile_steps .section-heading {
  color: #fff;
}

.profile_steps .primary-btn {
  background-color: var(--color-secondary);
}

.profile_steps p,
.profile_steps ol li {
  color: #e8e8e8;
}

.profile_steps ol li {
  margin-left: -10px;
}

.profile_steps ol li {
  line-height: 0.8rem;
}

.profile_steps .secondary-btn {
  background-color: #fff;
  color: #000;
  padding: 0.475rem 0.85rem;
  border-radius: 5px;
  border: 1px solid #fff;
  font-size: 1rem;
  transform: translateZ(0) scale(1);
  transition: transform 0.2s;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.profile_steps .secondary-btn:not(:disabled):hover {
  transform: scale(1.05);
}

.profile_steps .secondary-btn:not(:disabled):hover:active {
  transform: scale(1.05) translateY(0.125rem);
}

.profile_features img {
  /* max-height: 540px !important; */
  height: 100%;
  width: 100%;
}

.profile_features .text {
  height: fit-content;
  margin-top: 20px;
}

.profile_features ol {
  padding-left: 20px;
}

.profileContent .text {
  margin-top: 24px;
}

.profileContent .feature {
  background-color: #f0f0f0;
  text-align: center;
  padding: 10px 0;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: 40px;
}

.profile_features .row {
  display: flex;
  align-items: stretch !important;
}

/* 3.13 Manage searches page   
------------------------------------------------- */

/* selected services */
.services {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.services .section-heading {
  font-size: 1.2rem;
}

.selected_services .service_box {
  display: inline-block;
  width: fit-content;
  border: 1px solid var(--color-primary-muted);
  padding: 0.2rem 10px 0.2rem 10px;
  border-radius: 40px;
  margin: 5px 0;
  margin-right: 5px;
}

.selected_services .service_box p {
  display: inline;
  margin-right: 10px;
  margin-bottom: 0;
}

.delete_icon {
  display: inline-block;
  color: #aa0b0b;
  font-size: 0.8rem;
  width: 22px;
  height: 22px;
  border: 1px solid #aa0b0b;
  border-radius: 50%;
  text-align: center;
  padding-top: 3px;
  margin-top: 1px;
  cursor: pointer;
}

.delete_icon:hover {
  color: #fff;
  background-color: #aa0b0b;
}

/* search input */
/* .searchInput {
    max-width: 600px;
    width: 100%;
    display: flex;
    align-items: center;
    margin: 20px 0 15px;
}

.search-holder {
    flex: 1;
    position: relative;
}

.search-holder input {
    width: 100%;
    padding-right: 30px;
    margin-bottom: 0;
} */

/* .search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
} */

/* .searchElse-btn-holder {
    margin-left: 5px;
}

.searchElse-btn-holder .btn {
    white-space: nowrap;
} */

/* Search Keywords  */
.search_keywords {
  margin: 20px 0;
  padding: 15px 10px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
}

.search_keywords .info_btn {
  display: inline-block;
  margin-top: -3px;
}

.search_keywords a .fa-question {
  font-size: 0.9rem;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align: center;
  padding-top: 5px;
  margin-left: 20px;
  background-color: var(--color-secondary);
  color: #fff;
}

.search_keywords .keywords p {
  display: inline-block;
  border: 1px solid var(--color-primary-muted);
  padding: 5px 10px 8px;
  border-radius: 40px;
  margin: 4px 0;
  margin-right: 5px;
  font-size: 0.94rem;
}

.search_keywords .keywords a {
  display: inline-block;
  margin-right: 10px;
  text-decoration: underline !important;
  font-size: 0.94rem;
}

/* keywords list */
.keywords_list {
  padding-inline: 15px;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 0px;
}

.keywords_list .keyword {
  padding: 8px 7px 8px;
}

.keywords_list .keyword p {
  margin-bottom: 0;
}

/* 3.14 Templates Listing page   
------------------------------------------------- */

.templates {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.templates .template_holder {
  width: 100%;
  margin-right: 0;
}

.templates .domain_link {
  font-size: 1rem;
  margin-right: 0rem;
  margin-bottom: 0;
  float: none;
  text-align: center;
}

.templates .template_box {
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.147);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 5px;
}

.templates .template_box img {
  width: 100%;
  height: auto;
}

.templates .template_box .bottom_links {
  padding: 8px 0;
  background-color: var(--color-primary-light);
  display: flex;
  justify-content: center;
  align-items: center;
}

.templates .template_box .bottom_links a {
  font-size: 0.9rem;
  display: inline-block;
  padding: 4px 10px;
  text-decoration: none;
}

.templates .template_box .bottom_links .customize_btn {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-secondary);
  color: #fff;
  border-radius: 5px;
  transform: translateZ(0) scale(1);
  transition: transform 0.2s;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.templates .template_box .bottom_links .select_btn {
  border: 1px solid var(--color-primary);
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 5px;
  transform: translateZ(0) scale(1);
  transition: transform 0.2s;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.templates .template_box .bottom_links .customize_btn:not(:disabled):hover,
.templates .template_box .bottom_links .select_btn:not(:disabled):hover {
  transform: scale(1.05);
}

.templates .template_box .bottom_links .customize_btn:hover:active,
.templates .template_box .bottom_links .customize_btn:hover:active {
  transform: scale(1.05) translateY(0.125rem);
}

.templates .template_box .bottom_links .preview_btn {
  border: 1px solid var(--color-primary);
  background-color: transparent;
  color: var(--color-content-primary);
  border-radius: 5px;
  margin-left: 7px;
  transition: background-color 0.2s, color 0.1s;
}

.templates .template_box .bottom_links .preview_btn:hover {
  background-color: var(--color-primary);
  color: #fff;
}

/* 3.15 Transalations page   
------------------------------------------------- */

.translations {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.translations .form_group .controls {
  width: 90%;
}

.translations .form_group .controls input {
  margin-bottom: 10px;
}

.translations .search_results table {
  width: 100%;
  margin-top: 10px;
}

.translations .search_results table th,
.translations .search_results table td {
  border: 1px solid var(--color-primary-muted);
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.translations .search_results table th {
  color: var(--color-primary);
  font-size: 1.1rem;
}

.translations .search_results table td {
  color: var(--color-text);
  font-size: 1rem;
}

.translations .modal-content {
  margin: auto;
}

.translations form .primary-btn {
  margin-left: 5px;
  margin-right: 0px;
}

.translations .col-md-7 .primary-btn {
  margin-left: 0;
}

.translations #suggestion_modal {
  padding-right: 0 !important;
  margin: 20px 0px !important;
  padding: 0 0px;
  width: 100%;
}

/* 3.16 Search keywords Page   
------------------------------------------------- */

.offered-keywords {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.offered-keywords .pending_keyword {
  background-color: var(--color-secondary);
  cursor: pointer;
}

.offered-keywords .pending_keyword p {
  color: #fff;
}

.offered-keywords .pending_keyword .delete_icon {
  color: #fff;
  border: 1px solid #fff;
}

.offered-keywords .message_box {
  border: 1px solid #dddddd;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
}

.offered-keywords .message_box p {
  margin-bottom: 5px;
}

.offered-keywords #addWord_btn {
  display: none;
}

.offered-keywords #noResults_found {
  display: none;
}

.offered-keywords #addWord_cancel {
  display: none;
}

.offered-keywords #keyword_type {
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.offered-keywords .searchInput {
  margin-top: 2rem;
}

/* 3.17 hmp   
------------------------------------------------- */

.searchForm {
  margin-top: 40px;
}

#searchAroundd,
#placetoSearch {
  max-width: 500px;
}

#searchAroundd input,
#placetoSearch input {
  padding-top: 0.475rem;
  padding-bottom: 0.475rem;
}

.voice-icon {
  display: none;
}

.quickSearchesSection-buttons {
  float: right;
}

.quickSearchesSection-buttons .info-btn {
  float: right;
}

.result-box {
  position: relative;
  background: #f2f7fa;
  border-radius: 10px;
  padding: 1.3rem;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.126);
}

.resultBox-container {
  margin-bottom: 10px;
  margin-top: 30px;
}

.result-box:hover {
  background: var(--color-primary-light);
}

.result-box span.result-number {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--color-secondary);
  color: #ffffff;
  border-radius: 50px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 0.89rem;
}

.result-box img {
  margin-bottom: 10px;
  width: 30%;
  height: auto;
  object-fit: contain;
}

.result-box.text-center h5 {
  font-size: 1rem;
  margin-top: 5px;
  color: var(--color-primary);
}

/* active result box styling */
.resultBox-container .activeResultBox {
  background-color: var(--color-primary);
}

.resultBox-container .activeResultBox h5 {
  color: white;
}

.activee {
  border: 1px solid #cddce7;
  margin: 10px 4px;
  padding: 20px 25px 5px;
  border-radius: 5px;
}

.row_restaurant .result-box {
  margin-bottom: 30px;
  background: #f5f5f5;
}

.row_restaurant .result-box:hover {
  background: #e5e5e5;
}

#selected_cat a {
  text-decoration: none;
}

/* 3.18 Post job   
------------------------------------------------- */

.form-container {
  background-color: #fafafa;
}

.form-container h4 {
  font-size: 1.2rem;
  color: #000;
}

.form-container h5 {
  font-size: 1rem;
  color: #000;
}

.form-container .myform {
  padding: 20px 15px 20px;
}

.form-container .form {
  max-width: 600px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.077);
  margin: 0 auto;
  position: relative;
}

.form-container input {
  border-radius: 5px;
}

.form-container input:focus,
.form-container textarea:focus {
  background-color: #fff;
}

.form-container input.err {
  border-bottom: 4px solid rgb(197, 9, 9) !important;
}

.form-container .form_subheading {
  font-size: 1rem;
}

.form-container .tab .controls {
  margin: 0.5rem 0;
}

.form-container .table .salary_modal .table {
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--color-primary-muted);
  border-collapse: collapse;
}

.form-container .table {
  border: 1px solid var(--color-primary-muted);
}

.salary_modal .table {
  border: 1px solid var(--color-primary-muted);
}

.form-container .table .text,
.salary_modal .table .text {
  padding: 10px;
}

.form-container textarea,
.salary_modal textarea,
.modal textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  padding: 5px 12px;
  font-size: 1rem;
  border-radius: 5px;
}

.form-container .table input,
.form-container .table select,
.salary_modal .table input,
.salary_modal .table select {
  width: 100%;
  margin-right: 10px;
  padding-bottom: 0 !important;
  /* margin-bottom: 15px !important; */
  /* margin-top: 10px; */
  padding-left: 3px !important;
  border: none !important;
}

.form-container .table select,
.salary_modal .table select {
  /* margin-top: 14px; */
  width: 90px !important;
}

.form-container select {
  text-transform: capitalize;
}

.form-container .table .field span,
.salary_modal .table .field span {
  /* margin-top: 10px; */
  color: var(--color-content-secondary);
  margin-left: 10px;
}

#starting-at {
  display: none;
}

#divKeywords .controls {
  margin-bottom: -10px !important;
}

#divKeywords .keyword {
  display: inline-block;
  background-color: #f5f5f5;
  padding: 5px 10px 5px 10px;
  border-radius: 10px;
  text-transform: capitalize;
  margin-right: 10px;
  border: 1px solid rgb(199, 197, 197);
}

#divKeywords .keyword a {
  margin-left: 10px;
  color: #000;
  text-decoration: none;
  font-size: 0.8rem;
  cursor: pointer;
}

#divKeywords .keyword a i {
  font-weight: normal;
}

.form-container .btns {
  display: flex;
  justify-content: space-between;
  align-items: normal;
}

.form-container .prev-stp {
  border: none;
  font-weight: 400;
  background-color: transparent;
  /* padding: 1rem 0rem; */
  border-radius: 7px;
  color: var(--color-text);
  cursor: pointer;
  font-size: 1rem;
  padding-left: 0;
}

.form-container .nextbtn {
  margin-left: auto;
}

/* 3.19 Settings page   
------------------------------------------------- */

/* 3.20 business member profile creation form 
-------------------------------------------------------------*/

.step-form-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.check-icon {
  color: #fff;
}

.step-form-wrapper .form-header h3 {
  color: #000;
  font-size: 1.6rem;
}

.step-form-wrapper .steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px;
}

.step-form-wrapper .steps .step {
  margin-right: 1rem;
  display: flex;
  align-items: center;
  margin-bottom: 0.3rem;
  background-color: #fff;
  border: 1px solid var(--color-border);
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.3rem;
}

.step-form-wrapper .step .step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 0.3rem;
  background-color: var(--color-step-background-inactive);
  border: 1px solid var(--color-border);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.4rem;
}

.step-form-wrapper .step.active .step-number {
  background-color: var(--color-primary);
  color: #fff;
}

.step-form-wrapper .step.active {
  background-color: var(--color-primary-light);
}

.step-content .text-start p {
  font-size: 0.9rem;
  color: var(--color-neutral-light);
}

.step-content .expandable-box {
  border: 1px solid var(--color-border);
  border-radius: 5px;
  margin-bottom: 1.5rem;
}

.step-content .expandable-box.active .box-body {
  display: block;
}

.step-form-wrapper .form-body .step-content {
  display: none;
}

.step-form-wrapper .form-body .step-content.active {
  display: block;
}

.step-content .expandable-box .box-header {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  cursor: pointer;
}

.step-content .expandable-box .box-header,
.step-content .expandable-box .box-body {
  padding: 0.6rem 1rem;
}

.step-content .expandable-box.active .box-header {
  background-color: #f2f6f9;
}

.step-content .expandable-box .box-header h4 {
  color: #000;
  font-weight: 600;
  margin-bottom: 0;
  margin-top: 0.1rem;
}

.step-content h4 {
  font-size: 1.1rem;
}

.step-content .expandable-box .box-body {
  display: none;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.step-content .form-controls {
  max-width: 450px;
}

.underline {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  margin: 10px 0 20px;
}

#no-results-message {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
  margin-bottom: 25px;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.service-area-map {
  display: none;
}

.service-area-map .added-Keywords {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.service-area-map .tag-item {
  background: transparent;
  display: inline-block;
}

.service-area-form .added-Keywords {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/*  */
.selections .tag-item {
  border-radius: 0.3rem;
  background-color: transparent;
  text-transform: capitalize;
}

#map-container {
  flex-grow: 1;
}

.selected-area {
  color: var(--color-link);
}

/*  3.21 Signup/SignIn 
-------------------------------------------------- */

.sign-up-form {
  background-color: #fff;
  padding: 40px 30px;
  margin: 0 auto;
  max-width: 500px;
}

.sign-up-form h5 {
  font-size: 1rem;
}

.sign-up-form .centered-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  color: var(--color-text);
}

.sign-up-form .centered-text::before,
.sign-up-form .centered-text::after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background-color: #000;
  margin: 0 10px;
}

/* show password icon */
.show-password-icon {
  position: absolute;
  left: 93%;
  top: 26%;
  cursor: pointer;
}

/* remember-checkbox */
.remember-checkbox input[type='checkbox'] {
  width: 20px;
  height: 20px;
}

/* Social Signup Options */
.form-container .card-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.form-container .card-container .card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px;
  border: 1px solid #ccc;
  width: 100%;
  border-radius: 0.25rem;
  text-decoration: none;
}

.form-container .card-container .card span {
  color: var(--color-text);
}

.form-container .card img {
  width: 35px;
}

.form-container .card .facebook-icon {
  width: 30px;
  margin-right: 6px;
}

.form-container .form-group .error-icon {
  display: none;
}

/* verification options styling */
.verification-options {
  max-width: 300px;
}

.verification-options .verification-option {
  border: 1px solid var(--color-input-border);
  padding: 10px 15px;
  margin-right: 15px;
  width: 50%;
  border-radius: 0.25rem;
  cursor: pointer;
}

.verification-options .verification-option:hover {
  background-color: var(--color-primary-light);
}

.verification-options .verification-option .icon {
  font-size: 25px;
  object-fit: contain;
}

.verification-options .verification-option .icon i {
  font-size: 20px;
}

.verification-options .verification-option .icon img {
  width: 40px;
  margin-top: -7px;
  object-fit: contain;
}

/* Signup Container & ADI Details */

.sign-in-container {
  max-width: 500px;
}

.sign-up-container .adi-details {
  padding-top: 20px;
  display: none;
}

.sign-up-container .adi-details h2 {
  color: var(--color-primary);
  font-size: 1.4rem;
}

.sign-up-container .adi-details .feature {
  margin: 10px 0;
  background-color: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.077);
  padding: 15px;
}

.sign-up-container .adi-details h3 {
  color: black;
  font-size: 1rem;
}

.sign-up-container .adi-details h3 i {
  font-size: 1rem;
}

.sign-up-container .flex-column {
  flex: 1;
}

.password-set-success .text-center .circle-check-icon {
  color: var(--color-primary);
  font-size: 2rem;
}

.tab .tag-Container .delete_icon {
  border: 1px solid var(--color-primary-muted);
}

/*  3.22 Library page 
-------------------------------------------------- */

.go-to-modal button:hover {
  transform: scale(1.05);
  background: #154ab7;
}

#SecondModal {
  height: 90vh;
}

.modal2 .modal-header {
  border-bottom: none !important;
  padding: 0 !important;
  padding-top: 80px !important;
  margin-bottom: 10px;
}

.modal2 .header-main {
  width: 100%;
  height: 50px;
  background: #b5c4d6;
  position: fixed;
  left: 0;
}

.slect-btn-and-tab-sec {
  display: flex;
  justify-content: space-between;
}

/* selection controls */
#selection-controls {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.129) !important;
}

#selection-controls {
  width: fit-content;
  background: white;
  margin: auto;
  border-radius: 5px;
  padding: 0 20px;
  white-space: nowrap;
}

.btn-controls {
  padding: 10px 0;
  border: none;
  background: transparent;
  font-size: 18px;
  color: black !important;
}

.btn-controls:hover {
  color: var(--color-link) !important;
}

#toggle-select-mode-btn {
  display: none;
}

div#selection-controls .btn-controls span {
  padding: 0 10px;
  margin: 0 10px;
}

.show-controls-btn-mobile {
  z-index: 200;
}

/* ================================= */
/* 4- DASHBOARD PAGES */
/* ================================= */

/*  4.1 Menu Manager - Overview page
-------------------------------------------------- */

.content-container {
  display: flex;
  width: 100%;
  position: relative;
  background-color: var(--color-primary-light);
}

.content-wrapper {
  padding-left: 20px;
  padding-right: 20px;
}

/* Sidebar Styles */
.dashboard-sidebar {
  background-color: #fff;
  width: 290px;
  border-right: 1px solid var(--color-border);
  min-height: calc(100vh - 60px);
  transition: transform 0.3s ease, width 0.3s ease;
  position: relative;
  z-index: 1000;
}

.dashboard-sidebar .sidebar-menu {
  padding: 30px 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Sidebar toggle button */
.sidebar-toggle {
  display: none;
  position: absolute;
  top: 10px;
  right: -40px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1001;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.dashboard-sidebar .menu-item {
  padding: 0 20px 0 40px;
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none;
  color: #000000;
  text-transform: none;
  line-height: 1.45;
  border-radius: 8px;
  margin: 0 15px;
  transition: background-color 0.2s ease;
}

.dashboard-sidebar .menu-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Sidebar label control - prevent flash during resize */
.dashboard-sidebar .sidebar .menu-item span {
  display: none;
  /* Hidden by default */
}

/* Main Content Styles */
.main-content {
  flex: 1;
  background-color: var(--color-primary-light);
  min-height: calc(100vh - 60px);
}

/* Menu Manager Content Styles */
.menu-manager-content {
  padding: 30px 50px 20px 30px;
  background-color: var(--color-primary-light);
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Tabs Styles */
.menu-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab {
  padding: 8px 15px;
  border-radius: 20.5px;
  cursor: pointer;
  font-size: 16px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid #e6ebf1;
  color: #000;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tab.active {
  background-color: var(--color-primary);
  color: white;
  border: 1px solid var(--color-primary);
}

/* Menu Content Styles */
.menu-content {
  background-color: var(--color-primary-light);
  border-radius: 5px;
  padding: 0;
  margin-top: 10px;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
  background-color: var(--color-primary-light);
  padding: 0;
}

.section-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 0;
}

.search-for-items {
  display: flex;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 6px 12px;
  width: 240px;
  background-color: white;
}

.search-for-items i {
  color: #666;
  font-size: 14px;
}

.search-for-items input {
  border: none;
  outline: none;
  margin-left: 8px;
  width: 100%;
  font-size: 14px;
  color: var(--text-muted);
  background-color: transparent;
}

.search-for-items .clear-icon {
  color: #999;
  font-size: 14px;
  cursor: pointer;
  margin-left: 5px;
  display: none;
  transition: color 0.2s ease;
}

.search-for-items .clear-icon:hover {
  color: #333;
}

.search-for-items.has-text .clear-icon {
  display: block;
}

.section-description {
  font-size: 18px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 20px;
  line-height: 1.15;
  color: #000000;
}

/* No Items Section Styles */
.no-items-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 40px auto;
  width: 100%;
  max-width: 510px;
}

.loading-spinner {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner-border {
  width: 60px;
  height: 60px;
  color: var(--color-primary) !important;
  border-width: 0.25em;
}

.no-items-title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin: 0;
  text-transform: capitalize;
}

/* Add Items Button Styles */
.add-items-button {
  text-align: center;
  margin-top: 10px;
}

.add-items-button .btn {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 700;
  font-size: 18px;
  padding: 10px 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: capitalize;
}

.add-items-button .btn i {
  font-size: 14px;
  color: white;
}

/* Menu Categories Styles */
.menu-categories {
  width: 100%;
  background-color: var(--color-primary-light);
  margin-top: 15px;
}

.category-item {
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e2e2e2;
  cursor: pointer;
  flex-wrap: wrap;
}

.drag-handle {
  cursor: grab;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
  touch-action: none;
  /* Prevent browser handling of touch events */
}

.drag-handle img {
  width: 18px;
  height: 18px;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.category-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  gap: 18px;
}

.category-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.category-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-left: 2px;
}

.category-meta::before {
  content: '';
  position: absolute;
  left: -10px;
  height: 20px;
  width: 1px;
  background-color: #d7d7d7;
  top: 50%;
  transform: translateY(-50%);
}

.category-status {
  font-size: 14px;
  color: #4f575f;
  text-transform: capitalize;
}

.category-dot {
  width: 4px;
  height: 4px;
  background-color: #000;
  border-radius: 50%;
}

.item-count {
  font-size: 14px;
  color: #4f575f;
}

.category-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  position: relative;
}

.menu-kebab {
  width: 28px;
  height: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background-color: white;
  position: relative;
  padding: 0 2px;
}

.menu-kebab img {
  width: 16px;
  height: 16px;
  opacity: 1;
  filter: brightness(0);
  pointer-events: none;
  /* Make sure clicks go through to the parent */
}

.toggle-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: transparent;
  transition: transform 0.2s ease;
}

.toggle-icon:hover {
  transform: scale(1.1);
}

.toggle-icon img {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
  filter: brightness(0);
}

/* MAIN HEADER */
/* Header Styles */
.main-header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);

  width: 100%;
  position: relative;
  z-index: 1003;
  /* Higher z-index to ensure it's above all other elements */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.header-left {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 999;
  /* Same as logo-link */
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1000;
}

/* Mobile menu toggle button */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: 10px;
  z-index: 1010;
}

.logo-link {
  display: block;
  position: relative;
  z-index: 999;
  /* Lower than search box but still high */
}

.logo {
  height: 30px;
  width: auto;
}

.search-container {
  position: relative;
  z-index: 1051;
  /* Higher than main-header's z-index (1050) */
  display: flex;
  align-items: center;
  margin-left: auto;
  /* Push to the right side */
  margin-right: 10px;
  /* Add right margin to create space between search and header-right */
}

.search-box {
  display: flex;
  align-items: center;
  border: 1px solid #cccccc;
  border-radius: 8px;
  padding: 6px 8px 6px 8px;
  /* Reduced horizontal padding */
  width: 220px;
  background-color: white;
  transition: width 0.3s ease;
  position: relative;
  z-index: 1051;
  /* Same as search-container, higher than main-header */
  overflow: visible;
  /* Ensure content can overflow if needed */
}

.search-box i {
  color: #666;
  font-size: 14px;
  flex-shrink: 0;
  position: relative;
  z-index: 1052;
  /* Even higher than search-box and search-container */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  /* Ensure minimum width */
  margin-left: 0;
  /* Ensure no left margin */
}

.search-box input {
  border: none;
  outline: none;
  margin-left: 6px;
  width: 100%;
  min-width: 0;
  /* Allow input to shrink */
  font-size: 14px;
  color: var(--text-muted);
  background-color: transparent;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

.search-box .clear-icon {
  color: #999;
  font-size: 14px;
  cursor: pointer;
  margin-left: 5px;
  display: none;
  transition: color 0.2s ease;
}

.search-box .clear-icon:hover {
  color: #333;
}

.search-box.has-text .clear-icon {
  display: block;
}

.icon-item {
  position: relative;
  cursor: pointer;
  color: #000;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.icon-item i {
  font-size: 20px;
}

.header-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.notification-icon {
  position: relative;
}

.notification-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--color-danger);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.cart-icon {
  position: relative;
}

.notification-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
}

.header-divider {
  height: 20px;
  width: 1px;
  background-color: #d7d7d7;
  margin: 0 2px;
}

.user-profile {
  text-decoration: none;
}

.profile-circle {
  width: 28px;
  height: 28px;
  background-color: #b5c4d6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #000;
  font-family: 'Abhaya Libre ExtraBold', serif;
}

/* Hide dashboard header on desktop */
.dashboard-header {
  display: none;
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  height: 60px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  justify-content: space-around;
  align-items: center;
  padding: 0 10px;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
  text-decoration: none;
  font-size: 20px;
  flex: 1;
  height: 100%;
}

.bottom-nav-icon {
  width: 20px;
  height: 20px;
}

.cart-icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #f73838;
  color: white;
  font-size: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-circle-small {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #b5c4d6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
  display: none;
  /* Hidden by default, shown only on mobile */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  height: 60px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.bottom-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  text-decoration: none;
  font-size: 22px;
  flex: 1;
  height: 100%;
}

/* Ensure all icons have the same size */
.bottom-nav-item i {
  font-size: 22px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom-nav-icon {
  width: 24px;
  height: 24px;
}

.cart-icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: #f73838;
  color: white;
  font-size: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.profile-circle-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Menu Item Styles */
.category-items {
  padding: 0;
}

.menu-item-row {
  display: flex;
  align-items: center;
  padding: 15px 15px;
  border-bottom: 1px solid #e2e2e2;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  flex-wrap: nowrap;
}

.menu-item-row:last-child {
  border-bottom: none;
}

.menu-item-row:hover {
  background-color: var(--color-hover-bg);
}

.menu-item-image {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 15px;
}

.menu-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  /* Needed for text truncation */
  max-width: 100%;
  overflow: hidden;
}

.menu-item-name {
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  width: 100%;
}

/* Highlight for search results */
.highlight {
  background-color: #ffff00;
  font-weight: bold;
  padding: 0 2px;
  border-radius: 2px;
}

.menu-item-price {
  font-size: 16px;
}

.menu-item-status-container {
  margin: 0 15px;
  position: relative;
}

.menu-item-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  padding: 2px 10px;
  border: 1px solid #d7d7d7;
  border-radius: 13px;
  width: fit-content;
  cursor: pointer;
  min-width: 130px;
  background-color: white;
  justify-content: flex-start;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.menu-item-status.available .status-dot {
  background-color: #198111;
}

.menu-item-status.out-of-stock .status-dot {
  background-color: #7f7f7f;
}

.menu-item-status.hidden .status-dot {
  background-color: #e60000;
}

/* Ensure hidden icon is visible */
.menu-item-status.hidden .status-icon,
.status-option[data-value='hidden'] .status-icon {
  display: inline-block;
  margin-right: 2px;
  width: 12px;
  height: 12px;
}

.status-toggle {
  width: 16px;
  height: 16px;
  margin-left: auto;
}

.status-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  margin-top: 5px;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: none;
  pointer-events: auto !important;
}

.status-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-option:hover {
  background-color: var(--color-hover-bg);
}

.status-icon {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  display: block;
}

.menu-item-actions {
  margin-left: 15px;
  position: relative;
}

.kebab-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 160px;
  background-color: white;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
  margin-top: 5px;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: none;
}

.kebab-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 16px;
}

.kebab-option:hover {
  background-color: var(--color-hover-bg);
}

.kebab-option.remove {
  color: #dc3545;
}

/* Make sure the kebab menu and its options are always clickable */
.menu-kebab,
.kebab-dropdown,
.kebab-option {
  pointer-events: auto !important;
}

.menu-item-image-placeholder {
  width: 60px;
  height: 60px;
  border: 1px solid #7f7f7f;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  overflow: hidden;
}

.menu-item-image-placeholder i {
  font-size: 24px;
  color: #7f7f7f;
}

.no-items-message,
.empty-category-message {
  padding: 15px 0;
  color: #7f7f7f;
  font-style: italic;
  text-align: center;
}

/* No Results Message Styles */
.no-results-message {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 18px;
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens */
}

.no-results-text {
  color: #000;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.search-term {
  font-weight: bold;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.clear-filter {
  color: #0b5ec2;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
  /* Keep "Clear Filter" on one line */
  flex-shrink: 0;
  /* Prevent shrinking */
}

/* Toast Styles */
.custom-toast-container {
  max-width: 500px;
}

.custom-toast-container .toast {
  background-color: #2c2727;
  border-left: 4px solid #2e5dc0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Right-to-left slide animation */
  transform: translateX(100%);
  opacity: 0;
  width: fit-content;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Toast show animation */
.custom-toast-container .toast.show {
  transform: translateX(0);
  opacity: 1;
}

/* Toast hide animation */
.custom-toast-container .toast.hide {
  transform: translateX(100%);
  opacity: 0;
}

.custom-toast-container .toast-header {
  background-color: transparent;
  border-bottom: none;
  color: #000;
}

.custom-toast-container .toast-body {
  padding: 0.5rem 1rem;
}

.custom-toast-container {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 100;
  max-width: 550px;
}

/* Category Deactivated Toast */
.custom-toast-container .toast.category-deactivated,
.custom-toast-container .toast.item-hidden,
.custom-toast-container .toast.item-removed,
.custom-toast-container .toast.item-out-of-stock,
.custom-toast-container .toast.item-available {
  background-color: #2c2727;
  border-left: none;
  border-radius: 5px;
  color: white;
  display: flex;
  align-items: center;
  padding: 12px 20px;
  gap: 10px;
  margin-top: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* Right-to-left slide animation for custom toasts */
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Custom toast show animation */
.custom-toast-container .toast.category-deactivated.show,
.custom-toast-container .toast.item-hidden.show,
.custom-toast-container .toast.item-removed.show,
.custom-toast-container .toast.item-out-of-stock.show,
.custom-toast-container .toast.item-available.show {
  transform: translateX(0);
  opacity: 1;
}

/* Custom toast hide animation */
.custom-toast-container .toast.category-deactivated.hide,
.custom-toast-container .toast.item-hidden.hide,
.custom-toast-container .toast.item-removed.hide,
.custom-toast-container .toast.item-out-of-stock.hide,
.custom-toast-container .toast.item-available.hide {
  transform: translateX(100%);
  opacity: 0;
}

.custom-toast-container .toast.category-deactivated .toast-header,
.custom-toast-container .toast.category-deactivated .toast-body,
.custom-toast-container .toast.item-hidden .toast-header,
.custom-toast-container .toast.item-hidden .toast-body,
.custom-toast-container .toast.item-removed .toast-header,
.custom-toast-container .toast.item-removed .toast-body,
.custom-toast-container .toast.item-out-of-stock .toast-header,
.custom-toast-container .toast.item-out-of-stock .toast-body,
.custom-toast-container .toast.item-available .toast-header,
.custom-toast-container .toast.item-available .toast-body {
  padding: 0;
  background-color: transparent;
  color: white;
}

.custom-toast-container .toast.category-deactivated .toast-header,
.custom-toast-container .toast.item-hidden .toast-header,
.custom-toast-container .toast.item-removed .toast-header,
.custom-toast-container .toast.item-out-of-stock .toast-header,
.custom-toast-container .toast.item-available .toast-header {
  display: none;
}

.custom-toast-container .toast.category-deactivated .toast-body,
.custom-toast-container .toast.item-hidden .toast-body,
.custom-toast-container .toast.item-removed .toast-body,
.custom-toast-container .toast.item-out-of-stock .toast-body,
.custom-toast-container .toast.item-available .toast-body {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.custom-toast-container .toast.category-deactivated .success-icon,
.custom-toast-container .toast.item-removed .success-icon,
.custom-toast-container .toast.item-available .success-icon {
  width: 20px;
  height: 20px;
  background-color: #279d42;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.custom-toast-container .toast.item-available .success-icon i {
  display: inline-block;
  margin-top: 0px !important;
  padding-left: 10px !important;
}

/* Ellipse 253 styling from Figma design */
.custom-toast-container .toast.item-removed .success-icon.ellipse-253,
.custom-toast-container .toast.item-available .success-icon.ellipse-253 {
  background-color: #279d42;
}

.custom-toast-container .toast.item-hidden .hidden-icon {
  width: 20px;
  height: 20px;
  background-color: #e63435;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.custom-toast-container .toast.category-deactivated .success-icon i,
.custom-toast-container .toast.item-hidden .hidden-icon i,
.custom-toast-container .toast.item-removed .success-icon i,
.custom-toast-container .toast.item-available .success-icon i {
  color: white;
  font-size: 12px;
}

.custom-toast-container .toast-message {
  padding-right: 20px;
}

/* Out of Stock Toast Icon */
.custom-toast-container .toast.item-out-of-stock .out-of-stock-icon {
  width: 20px;
  height: 20px;
  background-color: #f29208;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.custom-toast-container .toast.item-out-of-stock .out-of-stock-icon .exclamation-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.custom-toast-container .toast.item-out-of-stock .out-of-stock-icon .exclamation-mark::before {
  content: '';
  width: 2px;
  height: 8px;
  background-color: white;
  border-radius: 1px;
  position: absolute;
  top: 3px;
}

.custom-toast-container .toast.item-out-of-stock .out-of-stock-icon .exclamation-mark::after {
  content: '';
  width: 2px;
  height: 2px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  bottom: 3px;
}

.custom-toast-container .toast.category-deactivated .toast-message,
.custom-toast-container .toast.item-hidden .toast-message,
.custom-toast-container .toast.item-removed .toast-message,
.custom-toast-container .toast.item-out-of-stock .toast-message,
.custom-toast-container .toast.item-available .toast-message {
  font-size: 1rem;
  flex-grow: 1;
}

.custom-toast-container .toast.category-deactivated .close-icon,
.custom-toast-container .toast.item-hidden .close-icon,
.custom-toast-container .toast.item-removed .close-icon,
.custom-toast-container .toast.item-out-of-stock .close-icon,
.custom-toast-container .toast.item-available .close-icon {
  cursor: pointer;
  font-size: 16px;
  color: white;
}

/* Drag and Drop Styles */
.category-item.dragging,
.menu-item-row.dragging {
  opacity: 0.95;
  background-color: #f8f9fa;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1000;
  transform: scale(1.01);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  padding-left: 15px;
  padding-right: 15px;
}

.category-item.drag-ending,
.menu-item-row.drag-ending {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.drag-handle:hover {
  transform: scale(1.05);
}

.drag-handle:hover img {
  opacity: 1;
}

.drag-handle:active {
  cursor: grabbing;
  transform: scale(0.95);
}

/* Item Removal Animation */
.menu-item-row {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-item-row.fade-out {
  opacity: 0;
  transform: translateX(10px);
}

/* Category fade-out animation */
.category-item.fade-out {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Independent Items Container Styles */
.independent-items-container {
  margin-top: 20px;
  border-top: none;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Independent Item Styles */
.menu-item-row.independent-item {
  background-color: white;
  border-radius: 8px;
  margin: 0 0 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: none;
  padding: 15px;
}

/* Empty State Styles */
.empty-state-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  background-color: #fff;
  border-radius: 10px;
  margin: 30px 0;
}

.empty-state-image {
  margin-bottom: 20px;
  width: 90px;
}

.empty-state-image img {
  width: 80%;
  height: auto;
  border-radius: 10px;
}

.empty-state-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: capitalize;
}

.empty-state-text {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 1.5rem;
  max-width: 600px;
}

.empty-state-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: capitalize;
}
.empty-state-button img {
  filter: invert(1);
  width: 1.2rem;
}

.kebab-option.deactivate-category {
  color: #dc3545;
}

.category-kebab-dropdown {
  width: 160px !important;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 100;
}

.construction-text {
  font-family: 'Times New Roman', serif;
  font-size: 18px;
  color: #6c757d;
  text-align: center;
}

/* ================================= */
/* 4- ANIMATIONS */
/* ================================= */

/* Define the thunder-like effect animation */
@keyframes thunderEffect {
  0% {
    transform: translateX(-2px);
  }

  25% {
    transform: translateX(2px);
  }

  50% {
    transform: translateX(-2px);
  }

  75% {
    transform: translateX(2px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-20px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* ================================= */
/* 5- MEDIA QUERIES */
/* ================================= */

@media (max-width: 415px) {
  .media-section .media-item img,
  .media-section .media-item video {
    width: 100%;
    height: 95px;
  }
}

@media screen and (max-width: 768px) {
  /* -- 2.28 Media library modal */
  #static-upload-show .content {
    display: flex;
    align-items: start;
  }

  #static-upload-show .onDestop {
    display: none;
  }

  #static-upload-show .onMObile {
    display: block;
  }

  #static-upload-show span {
    width: 40px;
    height: 40px;
    margin: 0;
  }

  #static-upload-show p {
    text-align: left;
  }

  .onMobileShow {
    display: block;
  }

  .file-uploading-div {
    padding-bottom: 30px;
  }

  .crossClose {
    display: block;
  }

  .file-item {
    position: relative;
    overflow: hidden;
  }

  .file-item:hover {
    transform: none;
  }

  .back-closeModal {
    display: none;
  }

  #show-btn-div {
    justify-content: left;
    margin: 30px 0;
    position: relative;
    bottom: 42px;
  }

  .file-grid {
    padding-bottom: 30px;
  }

  .percentage-text {
    font-size: 14px;
  }

  .loading-circle {
    width: 50px;
    height: 50px;
  }

  .loading-indicator {
    top: 13px;
  }

  #videoMenu .playIcon {
    padding-left: 5px;
  }

  #videoMenu .playIcon .preview {
    width: 10px !important;
  }

  /* menu option */
  .menu-option svg {
    margin-right: 0px;
    justify-content: space-between;
    align-items: center;
  }

  .menu-option {
    padding: 1px;
    align-items: center;
    font-size: 12px;
  }

  .menu-option span {
    margin-right: 9px;
    height: 17px;
  }

  .dots-menu {
    position: absolute;
    top: 7px;
  }

  .menu-options {
    width: 106px;
    top: 25px;
    padding: 2px 3px;
    align-items: center;
  }

  .menu-option img {
    width: 15px;
  }

  /* preview section */
  #previewModal #back-closeModal {
    padding: 10px;
  }

  #previewModal {
    top: 0px;
  }

  #previewModal #back-closeModal {
    justify-content: space-between;
    width: 95%;
  }

  .preview_sec a {
    font-size: 16px;
  }

  #previewModal #back-closeModal {
    display: flex;
    align-items: center;
  }

  #previewModal #modelContStart video {
    width: 60%;
  }

  #previewModal #modelContStart {
    width: auto;
  }

  #previewModal #back-closeModal {
    top: 0px;
    font-size: 19px;
  }

  .preview-image {
    width: 95%;
    height: 100%;
  }

  /* crop section */
  #cropConfirm,
  #cropCancel {
    padding: 8px 17px;
    font-size: 16px;
  }

  .divbody {
    margin: 0;
    padding: 0px;
  }

  #libraryModal .modal-body {
    max-height: 100vh;
  }

  .media-library .btn-submit {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    bottom: 5%;
  }

  #toast-container {
    min-width: 95% !important;
    right: 0;
    top: 10px !important;
    transform: translateX(-50%);
    align-items: center;
    left: 50%;
  }

  /* -- 3.22 Library page */
  div#selection-controls .btn-controls span {
    padding: 0 6px;
    margin: 0 6px;
  }

  #selection-controls {
    position: static;
    padding: 0 7px;

    transform: none;
  }

  .btn-controls {
    font-size: 14px;
  }

  .media-library .btn-mob-fix {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    bottom: 5%;
  }

  .show-controls-btn-mobile {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    bottom: 5%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-wrap-mode: nowrap;
    /* flex-direction: column-reverse; */
  }
}

@media (min-width: 576px) {
  /* tooltip */
  .toolTip .tooltiptext {
    width: 140px;
  }

  section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* -- 2.28 Media library modal -- */
  .file-grid {
    grid-template-columns: repeat(3, 1fr);
    /* 3 cards per row */
  }

  .custom-tabs .custom-tab {
    padding: 0.5rem 1.7rem;
    font-size: 1.1rem;
  }

  .parentloading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  #static-upload-show .content {
    width: 100%;
    height: 110% !important;
    min-height: 140px;
  }

  .plaza .container,
  footer .container,
  section > .container,
  section.container,
  .banner .container,
  .services.container,
  .categories_details.container,
  .adverts.container,
  .profile_benefits,
  .profile_features {
    max-width: 100% !important;
    padding-inline: 30px !important;
  }

  /* ---- 2.9 Custom Radio -----  */
  .custom-radio .radio-icon {
    height: 22px;
    width: 22px !important;
  }

  .search-icon {
    display: none;
  }

  #confirm_modal .modal-dialog {
    position: absolute;
    margin: 20px auto;
    left: 50%;
    top: 50%;
    padding: 30px;
    min-width: 500px;
    transform: translate(-50%, -50%);
    /* height: 100%; */
    margin: 0;
  }

  #confirm_modal .modal-content {
    width: 500px;
    max-height: 80vh;
    overflow-y: auto;
  }

  /* -- 2.29 Light Gallery */
  .gallery-view .gallery-content .main-gallery .nav-button {
    display: block;
  }

  .gallery-view .gallery-content .main-gallery .nav-button {
    background: transparent !important;
    padding: 20px;
  }

  .gallery-view .gallery-content .main-gallery .nav-button.prev {
    left: 5px;
    background-color: #242424 !important;
  }

  .gallery-view .gallery-content .main-gallery .nav-button.next {
    right: 5px;
    background-color: #242424 !important;
  }

  /* ---   3.11 Member details page --- */
  .memberDetails_tabs #newPwdeye {
    position: absolute;
    top: 10px;
    right: 165px;
  }

  /* ---- 3.12 Category details page ---- */
  .categoryHero_section,
  .profile_benefits,
  .profile_offerings,
  .profile_features,
  .profile_steps {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* --- 3.14 Templates Listing page --- */
  .templates .domain_link {
    float: right;
    margin-right: 2rem;
  }

  /* 3.20 business member profile creation form  */
  .step-form-wrapper .steps {
    display: flex;
    flex-direction: row;
    width: fit-content;
    flex-wrap: wrap;
  }

  .step-form-wrapper .steps .step {
    margin-right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    border: none;
    width: auto;
    padding: 0;
    border-radius: 0;
  }

  .step-form-wrapper .step.active {
    background-color: transparent;
  }
}

@media (min-width: 768px) {
  /* 2.7 Custom Modal Styling (Overrides Bootstrap Defaults) */
  .modal-dialog {
    display: block;
    min-height: auto;
    margin: 1.75rem auto;
    width: auto;
  }

  /* -- 2.28 Media library modal -- */
  .file-grid {
    grid-template-columns: repeat(4, 1fr);
    /* 4 cards per row */
  }

  #business-tags-h3 {
    display: none;
  }

  .business-cards-container .bb-1 {
    border-bottom: 1px solid var(--color-border);
  }

  .container-lg {
    padding-inline: 30px;
  }

  .business-cards-container {
    max-width: 1140px;
    margin: 0 auto;
  }

  section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .adverts {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* -- 3.21 Signup/SignIn  --- */
  .sign-up-container .adi-details {
    display: unset;
  }

  /* --------- 2.6 Boostrap select ------- */
  .bootstrap-select .dropdown-item {
    padding: 0.38rem 1.5rem;
    font-size: 1rem;
    border-radius: 0.3rem;
  }

  .bootstrap-select {
    width: 100% !important;
  }

  .btn-mobile-width {
    display: inline-block;
    width: auto;
    margin-bottom: 0;
  }

  /* ~~~~~~ 3.2 Member Profile ~~~~~~~~ */
  .business-cards-container #businessCardsHolder {
    flex-direction: row;
    gap: 10px;
  }

  .business-cards-container .profile-info .business-header {
    width: 60%;
  }

  .business-cards-container .profile-info .business-details {
    width: 40%;
  }

  #profileAboutHeading {
    display: block;
  }

  .opening-hours-table tr td:first-child {
    font-weight: bold;
    padding-right: 20px;
  }

  /* 3.7 Gallery Preview page  */
  .gallery .thumbs {
    height: auto;
    padding: 20px 0;
    margin-top: 8px;
    position: absolute;
    bottom: 80px;
  }

  .gallery .header {
    padding: 25px 0;
  }

  /* -------- 3.8 Plaza details view ------- */
  .product_carousel {
    width: 50%;
    margin-right: 10px;
    padding-top: 20px;
  }

  .product_features .feature {
    width: 100%;
    padding-right: 0px;
  }

  .location_map {
    width: 100%;
  }

  /* -------------- 3.10 FAQ page  ---------*/
  .accordionMenu {
    padding: 60px 20px;
  }

  /* -------------- 3.15 Transalations page  ---------*/

  .translations form .primary-btn {
    margin-left: 5px;
    margin-right: -20px;
  }

  /* -------------- 2.22 Datatables  ---------*/
  .trackOrders_tbl table {
    width: 100% !important;
  }

  /* ------ 3.3 landing page ---- */
  .categories .text-left {
    text-align: right;
  }

  /* -----  3.20 business member profile creation form ------ */
  .step-content .expandable-box .box-header,
  .step-content .expandable-box .box-body {
    padding: 0.6rem 1.5rem;
  }

  /* ---  4.1 Menu Manager - Overview page  --- */

  /* Desktop and Medium screens: Fixed sidebar */
  .dashboard-sidebar {
    position: fixed;
    top: 60px;
    /* Below fixed header */
    left: 0;
    height: calc(100vh - 60px);
    z-index: 1000;
  }

  /* Desktop menu item layout - Figma design */
  .menu-item-row {
    position: relative;
  }

  .menu-item-details {
    flex-direction: column;
    gap: 5px;
  }

  .menu-item-name {
    max-width: 250px;
  }

  .menu-item-price {
    position: absolute;
    right: 300px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
  }

  /* MAIN HEADER */
  .main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1003;
  }
}

@media (min-width: 992px) {
  html {
    font-size: 18px;
  }

  /* content wrapper */
  .content-wrapper {
    padding-left: 35px;
    padding-right: 35px;
  }

  /* -- 2.28 Media library modal -- */
  .file-grid {
    grid-template-columns: repeat(4, 1fr);
    /* 4 cards per row */
  }

  .container-lg {
    padding-inline: 15px;
  }

  .plaza .container,
  footer .container,
  section > .container,
  section.container,
  .banner .container,
  .services.container,
  .categories_details.container,
  .adverts.container,
  .profile_features,
  .profile_steps .container,
  .profile_offerings .container,
  .profile_benefits,
  .categoryHero_section .container {
    max-width: 960px !important;
    padding-inline: 15px;
  }

  .dob-label {
    margin-top: 0;
  }

  /* ------ 2.9 Custom Radio ----- */
  .custom-radio {
    padding: 15px;
  }

  .col-lg-15 {
    width: 20%;
    float: left;
  }

  /* --- 2.31 Checkbox Component --  */
  .custom-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 3px;
    width: 5px;
  }

  /* ------ 3.2 Member Profile ------ */
  #column1 {
    width: 45% !important;
  }

  #column2 {
    width: 55% !important;
  }

  /* ---- 3.7 Gallery Preview page ------  */
  .swiper {
    position: relative;
  }

  .swiper-button-next {
    position: absolute;
    top: 45%;
    right: 10px;
  }

  .swiper-button-prev {
    position: absolute;
    top: 45%;
    left: 10px;
  }

  .gallery {
    height: 100vh;
    padding-bottom: 50px;
  }

  .expanded_carousel {
    height: 600px;
  }

  .gallery .go-back {
    display: none;
  }

  .gallery .product_details {
    width: 100%;
    display: flex !important;
  }

  .gallery .header .details {
    padding-right: 40px;
  }

  /* ------- 3.8 Plaza details view --------- */
  .product_carousel {
    width: 50%;
    margin-right: 30px;
  }

  .product_features .feature {
    padding-right: 40px;
  }

  .mySwiper {
    height: auto;
  }

  /* ---- 3.12 Category details page ------ */
  .categoryHero_section img {
    width: 90%;
  }
}

@media (min-width: 1200px) {
  /* content wrapper */
  .content-wrapper {
    padding-left: 50px;
    padding-right: 50px;
  }

  /* -- 2.28 Media library modal -- */
  .file-grid {
    grid-template-columns: repeat(5, 1fr);
    /* 5 cards per row */
  }

  .plaza .container,
  footer .container,
  section > .container,
  section.container,
  .banner .container,
  .categories_details.container,
  .adverts.container,
  .services.container,
  .profile_features,
  .profile_steps .container,
  .profile_offerings .container,
  .profile_benefits,
  .categoryHero_section .container {
    max-width: 1140px !important;
  }

  /* --- 3.21 Signup/SignIn ---   */
  .sign-up-form {
    padding: 40px 40px;
  }

  .sign-up-container .adi-details {
    padding-left: 60px;
  }

  /* ------ 3.2 Member Profile ------ */
  #column1 {
    width: 35% !important;
  }

  #column2 {
    width: 65% !important;
  }

  .rating-section .average-rating {
    width: 25%;
  }

  .rating-section .rating-display {
    width: 50%;
  }

  /* -------- 3.8 Plaza details view -------- */
  .mySwiper2 {
    width: 100%;
  }

  .mySwiper2 {
    height: 350px;
  }
}

@media (min-width: 1101px) {
  /* -- 4.1 Menu Manager - Overview page -- */
  /* Desktop hover effect for sidebar menu items - light blue tone */
  .dashboard-sidebar .menu-item {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .dashboard-sidebar .menu-item:hover::before {
    background-color: var(--color-hover-bg);
  }

  .dashboard-sidebar .menu-item:hover {
    background-color: var(--color-hover-bg);
  }

  .dashboard-sidebar .menu-item.active::before {
    background-color: var(--color-primary-light);
    opacity: 1;
  }

  .dashboard-sidebar .menu-item.active {
    background-color: var(--color-primary-light);
  }

  .dashboard-sidebar .menu-item.active:hover {
    background-color: var(--color-primary-light);
  }

  /* Desktop: Show normal labels */
  .dashboard-sidebar .menu-item span {
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
  }

  /* Desktop: Adjust main content for fixed sidebar and header */
  .main-content {
    margin-left: 300px;
    /* Sidebar width */
    margin-top: 60px;
    /* Header height */
  }
}

@media (min-width: 1400px) {
  /* -- 2.28 Media library modal -- */
  .file-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .plaza .container,
  footer .container,
  section > .container,
  section.container,
  .banner .container,
  .services.container,
  .categories_details.container,
  .adverts.container {
    max-width: 1320px !important;
  }
}

/* col-lg-15 */
.col-md-15,
.col-lg-15 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
  width: 20%;
  float: left;
  border: 1px solid var(--color-primary-muted);
  border-collapse: separate;
  border-collapse: collapse;
}

@media (max-width: 992px) {
  .col-md-15 {
    width: 25%;
    float: left;
  }

  /* --- 3.6 Plaza list */
  .filters_sidebar {
    width: 240px;
  }

  .search_results {
    width: calc(100% - 240px);
  }

  #products .item {
    width: 48.5%;
  }

  .service-head-boxx .img-event {
    height: 130px;
    cursor: pointer;
  }

  #overlay_compare .product_image {
    width: 100%;
    height: 70px;
  }
}

@media (max-width: 768px) {
  /* -- 4.1 Menu Manager - Overview page -- */
  /* Mobile: Show labels normally */
  .dashboard-sidebar .menu-item span {
    display: inline-block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    pointer-events: auto !important;
  }

  .dashboard-sidebar .sidebar-menu .menu-item {
    margin-left: 0;
    padding-left: 20px;
    font-size: 1rem;
  }

  .dashboard-sidebar .sidebar-menu .menu-item .menu-icon {
    width: 20px;
  }

  .page-title {
    font-size: 22px !important;
    margin-bottom: 15px !important;
  }

  .section-title {
    font-size: 20px !important;
  }

  .menu-tabs {
    flex-wrap: nowrap;
    /* Prevent wrapping to next line */
    overflow-x: auto;
    /* Enable horizontal scrolling */
    overflow-y: hidden;
    /* Hide vertical overflow */
    -webkit-overflow-scrolling: touch;
    /* Smooth momentum scrolling on iOS */
    scrollbar-width: none;
    /* Hide scrollbar on Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar on IE/Edge */
    gap: 8px;
    /* Slightly reduce gap for mobile */
    padding: 0 0 8px 0;
    /* Remove horizontal padding to prevent overflow */
    margin: 0;
    /* Remove negative margin */
    scroll-behavior: smooth;
    /* Smooth scrolling animation */
    scroll-snap-type: x proximity;
    /* Snap to tabs when scrolling */
    transform: translateZ(0);
    /* Hardware acceleration */
    will-change: scroll-position;
    /* Optimize for scroll animations */
  }

  .menu-tabs::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar on Chrome/Safari */
  }

  .main-header {
    flex-wrap: nowrap;
    justify-content: space-between;
    height: auto;
    min-height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: visible;
    /* Ensure content can overflow if needed */
    background-color: #fff;
    /* White background for mobile */
  }

  /* Mobile menu toggle button */
  .mobile-menu-toggle {
    display: none;
    /* Hidden by default, shown in mobile media query */
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .mobile-menu-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #000;
    transition: all 0.3s ease;
  }

  /* Compact header style for when scrolling down */
  .main-header.header-compact {
    transform: translateY(-100%);
    box-shadow: none;
    transition: transform 0.3s ease;
  }

  /* Ensure header appears immediately when scrolling up */
  .main-header {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  /* Add padding to body to prevent content from being hidden under fixed header */
  body {
    padding-top: 60px;
  }

  .content-container {
    margin-top: 0;
  }

  .header-left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* Adjust logo size for mobile */
  .header-left .logo {
    height: 24px;
    margin: 0;
  }

  /* Hide search container on mobile */
  .search-container {
    display: none;
  }

  .header-right {
    flex-wrap: nowrap;
    overflow-x: visible;
    padding-right: 5px;
    padding-left: 5px;
    justify-content: flex-end;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
  }

  .menu-manager-content {
    padding: 20px 20px 20px 20px;
  }

  /* For mobile, use flexbox to reorder items */
  .header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* For mobile, only show globe icon and hamburger menu */
  .header-right .icon-item:not(.globe-icon),
  .header-right .header-divider,
  .header-right .user-profile {
    display: none !important;
  }

  /* Ensure globe icon is always visible on mobile */
  .header-right .globe-icon {
    display: flex !important;
  }

  /* Show and adjust globe icon for mobile */
  .header-right .globe-icon {
    display: flex;
    margin-right: 10px;
    order: 1;
  }

  .header-right .globe-icon img {
    width: 25px;
    height: 23px;
  }

  .header-right .globe-icon {
    display: flex !important;
  }

  /* Show and adjust hamburger menu for mobile */
  .mobile-menu-toggle {
    display: flex;
    order: 2;
    margin-left: 5px;
  }

  .icon-item {
    flex-shrink: 0;
  }

  /* Sidebar toggle for mobile */
  .sidebar-toggle {
    display: flex;
  }

  /* Mobile sidebar behavior */
  .dashboard-sidebar {
    position: fixed;
    top: 60px;
    /* Will be dynamically adjusted by JavaScript */
    left: 0;
    height: calc(100vh - 60px);
    /* Will be dynamically adjusted by JavaScript */
    transform: translateX(-100%);
    z-index: 1050;
    /* Higher than header (100) but lower than overlay (1060) */
    width: 250px !important;
    /* Fixed width for consistency */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    background-color: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-sidebar.active {
    transform: translateX(0);
  }

  /* Sidebar overlay styles */
  .sidebar-overlay {
    position: fixed !important;
    top: 60px !important;
    /* Start below header */
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    /* Cover entire viewport including bottom nav */
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 1030 !important;
    /* Above bottom nav (1000) but below sidebar (1050) and header (100) */
    display: block !important;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* Allow clicks to pass through when hidden */
  }

  .sidebar-overlay.show {
    opacity: 1;
    pointer-events: auto;
    /* Enable clicks when visible */
  }

  /* Prevent body scroll when sidebar is open */
  body.sidebar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* Keep menu header as flex row even on mobile */
  .menu-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }

  .search-for-items {
    width: 200px;
  }

  .category-meta::before {
    left: -8px;
    height: 16px;
  }

  .category-info {
    gap: 12px;
  }

  .menu-item-row {
    flex-wrap: wrap;
  }

  .menu-item-details {
    min-width: 150px;
  }

  .menu-item-status-container {
    margin-top: 5px;
  }

  .menu-item-actions {
    margin-top: 5px;
  }

  /* Adjust main content when sidebar is hidden */
  .main-content {
    width: 100%;
    margin-left: 0 !important;
    /* Override any margin from medium screen styles */
  }

  /* Dashboard header with breadcrumb and sidebar button - Only for mobile */
  .dashboard-header {
    display: flex;
    /* Show on mobile */
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    background-color: #fff;
    padding: 10px;
    width: 100%;
    border-radius: 4px;
  }

  .sidebar-button-container {
    flex: 0 0 auto;
  }

  .breadcrumb-nav {
    display: flex;
    align-items: center;
    font-size: 15px;
    margin-left: auto;
  }

  .breadcrumb-link {
    color: #000;
    text-decoration: none;
  }

  .breadcrumb-separator {
    margin: 0 5px;
    color: #000;
  }

  .breadcrumb-current {
    color: #000;
    font-weight: normal;
  }

  /* Open sidebar button - Only visible on mobile */
  .open-sidebar-btn {
    display: flex;
    /* Show on mobile */
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    padding: 0 0 0 2px;
    /* Add left padding to create space */
    margin-right: 2px;
    color: #000;
  }

  .open-sidebar-btn i {
    font-size: 20px;
    margin-right: 8px;
  }

  .mobile-bottom-nav {
    display: flex;
  }

  /* Add padding to the bottom of the content to account for the nav bar */
  body {
    padding-bottom: 60px;
  }

  .menu-categories {
    background-color: #f5f7fa;
    margin-top: 0;
    padding: 0;
  }

  .category-item {
    margin-bottom: 8px;
    border-radius: 0;
    box-shadow: none;
    border: none;
    background-color: #fff;
  }

  .category-header {
    padding: 15px;
    border-bottom: none;
    background-color: #fff;
  }

  .category-title {
    font-size: 18px;
    font-weight: 600;
    color: #000;
  }

  .category-meta {
    gap: 5px;
  }

  .category-meta::before {
    display: none;
  }

  .category-status,
  .item-count {
    font-size: 13px;
    color: #666;
  }

  .category-dot {
    width: 3px;
    height: 3px;
  }

  .category-info {
    gap: 10px;
  }

  .menu-content {
    background-color: #f5f7fa;
    padding: 0;
  }

  /* Remove gap between kebab menu and toggle icon in mobile view */
  .category-actions {
    gap: 0;
  }

  /* Tüm kategoriler için çizgiler - sadece mobil */
  .category-header {
    position: relative;
  }

  /* Kategori header'ının altına tüm genişlikte yatay çizgi */
  .category-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #ddd;
  }

  /* Kategori başlığının sağına dikey çizgi */
  .category-title::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 25px;
    background-color: #ddd;
  }

  .category-title {
    position: relative;
  }

  /* Ensure category kebab menu matches desktop style */
  .category-actions .menu-kebab {
    width: 28px;
    height: 17px;
    min-height: 17px;
    min-width: 28px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2px;
  }

  .category-actions .menu-kebab img {
    width: 16px;
    height: 16px;
    opacity: 1;
    filter: brightness(0);
  }

  .status-dropdown {
    min-width: 110px;
    max-width: 200px;
    position: fixed !important;
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #d7d7d7;
    background-color: white;
    /* top, left ve width değerleri JavaScript ile ayarlanacak */
  }

  /* Make sure status options are properly clickable on mobile */
  .status-option {
    padding: 10px 12px;
    font-size: 15px;
    pointer-events: auto !important;
  }

  .kebab-dropdown {
    position: fixed !important;
    width: 160px;
    display: none;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #d7d7d7;
    background-color: white;
    /* top, left ve width değerleri JavaScript ile ayarlanacak */
  }

  .menu-item-row {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    flex-wrap: nowrap;
    display: flex;
    gap: 0;
  }

  .drag-handle {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: 12px;
  }

  .drag-handle img {
    width: 16px;
    height: 16px;
  }

  .menu-item-image,
  .menu-item-image-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .menu-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .menu-item-details {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: auto;
  }

  .menu-item-name {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .menu-item-price {
    font-size: 15px;
    font-weight: 600;
    color: #2c2c2c;
    line-height: 1.2;
  }

  .menu-item-status-container {
    margin: 0 !important;
    flex-shrink: 0;
    margin-top: 23px !important;
    position: absolute !important;
    left: 168px !important;
  }

  /* Uncategorized items için 2 piksel daha sağa kaydırma */
  .category-item[data-category-id='uncategorized'] .menu-item-status-container {
    left: 160px !important;
  }

  .menu-item-status {
    /* Rectangle 910 */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border: 1px solid #d7d7d7;
    border-radius: 13px;
    background-color: white;
    cursor: pointer;
    width: 91px;
    min-width: 115px;
    height: 20px;
    min-height: 26px;
    white-space: nowrap;
    justify-content: center;
  }

  .menu-item-status .status-icon {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
  }

  .menu-item-status .status-toggle {
    width: 8px;
    height: 8px;
    margin-left: 2px;
    flex-shrink: 0;
  }

  .menu-item-actions {
    margin: 0;
    flex-shrink: 0;
  }

  .menu-kebab {
    width: 32px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .menu-kebab img {
    width: 16px;
    height: 16px;
    opacity: 0.7;
  }

  .category-items {
    background-color: #fff;
    border-radius: 0 0 12px 12px;
  }

  /* Status dropdown positioning for mobile */
  .status-dropdown {
    position: fixed !important;
    min-width: 140px;
    z-index: 1000;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
  }

  .status-option {
    padding: 10px 12px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .status-option:hover {
    background-color: var(--color-hover-bg);
  }

  .status-option .status-icon {
    width: 8px;
    height: 8px;
  }

  .menu-item-image-placeholder i {
    font-size: 20px;
  }

  .no-results-message {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    padding: 0 10px;
    flex-wrap: wrap;
  }

  .no-results-text {
    line-height: 1.4;
    word-break: break-word;
    flex-shrink: 1;
  }

  .search-term {
    word-break: break-word;
    line-height: 1.4;
  }

  .clear-filter {
    margin-top: 0;
    flex-shrink: 0;
  }

  .category-item.dragging,
  .menu-item-row.dragging {
    background-color: #f8f9fa;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
  }

  .modal-dialog.modal-lg {
    max-width: 100%;
    width: 100%;
  }

  .edit-item-modal-content {
    width: 100%;
  }

  .edit-item-title {
    font-size: 20px;
  }

  .edit-item-actions .btn {
    font-size: 16px;
    padding: 8px 16px;
  }

  .edit-item-modal-content {
    width: 100%;
  }

  .edit-item-title {
    font-size: 20px;
  }

  .edit-item-actions .btn {
    font-size: 16px;
    padding: 8px 16px;
  }

  /* 2.5 Custom Modal */
  .custom-overlay-close::before {
    color: black;
    background: transparent !important;
    margin-top: 0px;
    font-weight: 700;
  }

  .custom-modal-content {
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    /* overflow: hidden; */
  }

  .custom-modal-content {
    top: 0rem;
    margin-top: 0 !important;
  }

  .custom-overlay-close {
    position: relative;
    right: 0;
  }

  .custom-modal-content .modal-header {
    margin-top: -10px;
  }

  .custom-modal-content {
    border: none;
    border-radius: 0 !important;
  }

  /* ---------- */
  .col-md-15 {
    width: 33%;
    float: left;
  }

  /* --- 3.6 Plaza list --- */
  .overlay__ {
    background-color: #00000092;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
  }

  .filters_sidebar {
    position: fixed;
    top: 0% !important;
    left: -100%;
    margin-right: -50%;
    width: 70%;
    height: 100vh;
    padding-inline: 50px;
    z-index: 11111;
  }

  .search_results {
    position: relative;
    width: 100%;
  }

  #products .item {
    width: 32%;
  }

  .search_results .filter_btn {
    display: block;
  }

  .showSidebar {
    position: absolute;
    left: 0;
    top: 0;
  }

  .hide_sidebar {
    top: -100%;
  }

  .close_sidebar {
    display: block;
    position: absolute;
    top: 0;
    right: 0%;
    background-color: transparent;
    color: #000;
    z-index: 1111111;
    border: none;
    font-size: 1.4rem;
  }

  .overlay_active {
    display: block;
    position: fixed;
  }

  .service-head-boxx .img-event {
    height: 120px;
    cursor: pointer;
  }

  #overlay_compare .product_thumb {
    width: 48%;
  }

  #overlay_compare .product_image {
    width: 100%;
    height: 90px;
  }

  #overlay_compare .product_thumb .delete_btn {
    position: absolute;
    right: -12px;
    top: -13px;
  }

  #overlay_compare .product_meta .title {
    font-size: 0.9rem;
  }
}

@media (max-width: 567px) {
  .col-md-15 {
    width: 50%;
    float: left;
  }

  /* --- 3.6 Plaza list --- */
  .gray-bg1 {
    padding-inline: 30px;
  }

  #products {
    justify-content: space-between;
  }

  #products .item {
    width: 48.5%;
  }

  .filters_sidebar {
    width: 85%;
    padding-inline: 25px;
    padding-top: 30px;
  }

  .service-head-boxx {
    width: 100%;
    margin: 0 0;
  }

  .service-head-boxx .img-event {
    height: 180px;
    cursor: pointer;
  }

  .service-head-box .thumbnail {
    height: 110px;
    width: 45%;
  }

  .service-head-box .service_details_bottom {
    padding-bottom: 10px;
    padding-top: 5px;
  }

  .service-head-box .service_details_bottom .price span {
    font-size: 1rem;
    padding-right: 2px;
  }

  .service-head-box .service_details_bottom .service_details_bottom {
    display: flex;
    flex-direction: column !important;
  }

  .service-head-box .service_details {
    padding-inline: 5px;
    width: 55%;
  }

  .service-head-box .service_details p {
    font-size: 15px;
  }

  .service-head-box .service_details_bottom .price {
    font-size: 1.1rem;
    margin-bottom: 5px;
  }

  .service-head-box .service_details_bottom .links a {
    display: inline-block;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #f3f3f3;
  }

  .gray-bg1 {
    padding: 0 15px;
  }

  #overlay_compare .products {
    width: 90%;
  }

  #overlay_compare .product_thumb .delete_btn {
    position: absolute;
    right: 0px;
    top: 0px;
  }

  .service-head-boxx .img-event {
    height: 120px;
    cursor: pointer;
  }

  .item.list-group-item .img-event {
    float: left;
    width: 148px !important;
    height: 110px !important;
  }

  .item.list-group-item .caption {
    float: left;
    width: calc(100% - 148px);
    margin: 0;
  }

  .service-head-boxx .service_details {
    padding: 10px 5px 0 10px;
    margin: 0 0px;
    margin-inline: 0;
  }

  .service-head-boxx .service_details p {
    margin-top: 0;
  }

  .service-head-boxx .service_details .price {
    margin-bottom: 0;
  }

  .service-head-boxx .service_details_bottom .price span {
    font-size: 1.1rem;
  }

  .service-head-boxx .service_details h4 {
    margin-top: 0px;
    margin-bottom: 2px;
  }

  .item.list-group-item h4 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .item.list-group-item .service_details_bottom {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    padding-top: 5px;
  }

  .service-head-boxx .icon .plaza-btn i {
    margin-left: -5px;
  }

  /*  4.1 Menu Manager - Overview page*/
  .page-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  #menuManagerHeading {
    display: none;
  }

  .menu-tabs {
    margin: 20px 0 10px !important;
  }

  .section-title {
    font-size: 19px;
  }

  .header-right {
    gap: 4px;
    max-width: 65%;
  }

  .search-for-items {
    padding: 4px 12px;
  }

  /* Ensure body padding is maintained */
  body {
    padding-top: 56px;
    /* Slightly smaller for smaller screens */
  }

  .header-left {
    position: relative;
    z-index: 5;
  }

  .search-container {
    margin-left: auto;
    margin-right: 5px;
    position: relative;
    z-index: 5;
  }

  .search-box {
    width: 110px;
    padding: 4px 5px 4px 5px;
    /* Reduced horizontal padding */
    border-radius: 6px;
  }

  .search-box input {
    font-size: 14px;
    margin-left: 6px;
    /* Ensure there's enough space on the left */
  }

  .icon-item {
    width: 28px;
    height: 28px;
    margin: 0 1px;
  }

  .header-icon {
    width: 18px;
    height: 18px;
  }

  .header-divider {
    height: 18px;
    margin: 0 1px;
  }

  .profile-circle {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  /* Mobile sidebar adjustments */
  .dashboard-sidebar {
    width: 250px !important;
    /* Fixed width for consistency */
  }

  .dashboard-sidebar .menu-item {
    padding: 0px 15px 10px 20px;
    display: flex;
    justify-content: flex-start;
    font-size: 16px;
  }

  .dashboard-sidebar .menu-item span {
    display: inline-block;
  }

  .dashboard-sidebar .menu-icon {
    width: 22px;
    height: 22px;
  }

  .menu-manager-content {
    padding: 15px 20px;
  }

  .menu-content {
    padding: 15px 10px;
  }

  .menu-tabs {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    margin: 0;
    /* Ensure no margin overflow */
    padding-left: 0;
    /* Remove left padding */
    padding-right: 0;
    /* Remove right padding */
  }

  .menu-tabs::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
  }

  .tab {
    flex-shrink: 0;
    /* Prevent tabs from shrinking */
    font-size: 14px;
    padding: 6px 14px;
    /* Slightly more horizontal padding */
    height: 32px;
    white-space: nowrap;
    /* Prevent text wrapping */
    min-width: fit-content;
    /* Ensure tabs fit their content */
  }

  /* Ensure menu header stays at the top on small screens */
  .menu-header {
    padding: 5px 0;
  }

  .search-for-items {
    width: 160px;
  }

  .menu-item-status {
    min-width: 110px;
  }

  .menu-item-image,
  .menu-item-image-placeholder {
    width: 50px;
    height: 50px;
  }

  .category-title {
    font-size: 18px;
  }

  .category-status {
    font-size: 12px;
  }

  .item-count {
    font-size: 12px;
  }

  /* Improve touch targets for mobile */
  .menu-kebab,
  .toggle-icon,
  .menu-item-status {
    min-height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Ensure category kebab menu matches desktop style */
  .category-actions .menu-kebab {
    width: 28px;
    height: 17px;
    min-height: 17px;
    min-width: 28px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2px;
  }

  .category-actions .menu-kebab img {
    width: 16px;
    height: 16px;
    opacity: 1;
    filter: brightness(0);
  }

  /* Ensure menu item kebab menu matches desktop style */
  .menu-item-actions .menu-kebab {
    width: 28px;
    height: 17px;
    min-height: 17px;
    min-width: 28px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2px;
  }

  .menu-item-actions .menu-kebab img {
    width: 16px;
    height: 16px;
    opacity: 1;
    filter: brightness(0);
  }

  .edit-item-content {
    padding: 16px;
  }

  .edit-item-header {
    padding: 16px;
  }

  .edit-item-title {
    font-size: 18px;
  }

  .edit-item-actions {
    padding: 12px 16px;
  }

  .edit-item-actions .btn {
    font-size: 14px;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  /* 4.1 Menu Manager - Overview page */
  .no-results-message {
    font-size: 15px;
    gap: 6px;
    padding: 0 5px;
  }

  .no-results-text {
    font-size: 15px;
  }

  .clear-filter {
    font-size: 15px;
  }
}

@media (max-width: 992px) {
  /* 4.1 Menu Manager - Overview page */
  .dashboard-sidebar {
    width: 80px;
  }

  /* .sidebar .menu-item span {

        display: none;
     } */
}

/* Extra small devices */
@media (max-width: 375px) {
  /* 4.1 Menu Manager - Overview page */

  .menu-manager-content {
    padding: 15px 20px 15px 20px;
  }

  /* Adjust body padding for smaller header */
  body {
    padding-top: 52px;
  }

  .header-right {
    max-width: 60%;
  }

  .search-box {
    width: 90px;
  }

  /* Mobile sidebar adjustments */
  .dashboard-sidebar {
    width: 250px !important;
    /* Fixed width for consistency */
  }

  .dashboard-sidebar .menu-icon {
    width: 20px;
    height: 20px;
  }

  .dashboard-sidebar .menu-item {
    padding: 0 15px 0 15px;
    font-size: 15px;
  }

  .logo {
    height: 22px;
  }

  .search-container {
    margin-left: auto;
    margin-right: 3px;
    position: relative;
  }

  .search-box {
    width: 90px;
    padding: 3px 4px 3px 4px;
    /* Reduced horizontal padding */
    border-radius: 6px;
  }

  .search-box input {
    font-size: 13px;
    margin-left: 5px;
  }

  .search-box .clear-icon {
    font-size: 12px;
  }

  .header-right {
    gap: 2px;
  }

  .icon-item {
    width: 24px;
    height: 24px;
    margin: 0 1px;
  }

  .icon-item i {
    font-size: 16px;
  }

  .header-icon {
    width: 16px;
    height: 16px;
  }

  .profile-circle {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .menu-item-status-container {
    margin: 0 5px;
  }

  .menu-item-status {
    min-width: 90px;
    font-size: 14px;
    padding: 2px 5px;
  }

  .menu-kebab {
    width: 25px;
    height: 20px;
  }

  .menu-item-row {
    padding: 10px;
  }

  .menu-item-name {
    font-size: 14px;
  }

  .menu-item-price {
    font-size: 14px;
  }

  .page-title {
    font-size: 20px;
  }

  .section-title {
    font-size: 18px;
  }

  .tab {
    font-size: 13px;
    padding: 5px 12px;
    /* Slightly more horizontal padding */
    height: 28px;
    flex-shrink: 0;
    /* Prevent tabs from shrinking */
    white-space: nowrap;
    /* Prevent text wrapping */
    min-width: fit-content;
    /* Ensure tabs fit their content */
  }

  .tab:last-child {
    margin-right: 10px;
    /* Right spacing for last tab */
  }

  /* Improve mobile menu layout */
  .menu-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .search-for-items {
    width: 100%;
  }

  /* Adjust dashboard header for small screens */
  .dashboard-header {
    margin-bottom: 10px;
  }

  .open-sidebar-btn {
    font-size: 14px;
  }

  .open-sidebar-btn .sidebar-icon {
    width: 22px;
    height: 22px;
    margin-right: 15px;
    /* Increased margin to create more space between icon and text */
    vertical-align: middle;
  }

  .open-sidebar-btn .sidebar-text {
    padding-left: 5px;
  }

  .breadcrumb-nav {
    font-size: 14px;
  }

  /* Improve category display */
  .category-header {
    padding: 12px 10px;
  }

  .category-info {
    gap: 8px;
  }

  .category-meta {
    flex-wrap: wrap;
  }

  /* Improve menu item layout */
  .menu-item-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu-item-details {
    width: 100%;
    margin-bottom: 8px;
  }

  .menu-item-status-container {
    margin: 5px 0;
  }

  .menu-item-actions {
    align-self: flex-end;
  }

  .mobile-bottom-nav {
    display: flex;
  }

  /* Add padding to the bottom of the content to account for the nav bar */
  body {
    padding-bottom: 60px;
  }

  /* Hide header icons that are duplicated in the bottom nav */
  .header-right .icon-item:nth-child(3),
  .header-right .icon-item:nth-child(4),
  .header-right .icon-item:nth-child(5),
  .header-right .icon-item:nth-child(6),
  .header-right .user-profile {
    display: none;
  }

  .menu-item-image-placeholder i {
    font-size: 18px;
  }

  .no-results-message {
    font-size: 14px;
    margin: 15px 0;
  }

  .no-results-text {
    font-size: 14px;
    line-height: 1.3;
  }

  .search-term {
    font-size: 14px;
    line-height: 1.3;
  }

  .clear-filter {
    font-size: 14px;
  }
}

/* Very small devices */
@media (max-width: 320px) {
  /* 4.1 Menu Manager - Overview page */

  /* Adjust body padding for smallest header */
  body {
    padding-top: 48px;
  }

  .header-left {
    position: relative;
    z-index: 1000;
  }

  .logo {
    height: 20px;
  }

  .header-right {
    max-width: 55%;
    gap: 2px;
  }

  /* Mobile sidebar adjustments */
  .dashboard-sidebar {
    width: 250px !important;
    /* Fixed width for consistency */
  }

  .dashboard-sidebar .menu-item {
    padding: 0 10px 0 10px;
    font-size: 14px;
    /* gap: 10px; */
  }

  .menu-icon {
    width: 18px;
    height: 18px;
  }

  /* Adjust dashboard header for very small screens */
  .dashboard-header {
    margin-bottom: 8px;
  }

  .open-sidebar-btn {
    font-size: 13px;
  }

  .open-sidebar-btn .sidebar-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    /* Increased margin to create more space between icon and text */
    vertical-align: middle;
  }

  .breadcrumb-nav {
    font-size: 13px;
  }

  .search-box {
    width: 70px;
    padding: 3px 3px 3px 3px;
    /* Minimal padding */
    border-radius: 5px;
  }

  .search-box input {
    font-size: 12px;
    margin-left: 3px;
    /* Reduced left margin */
    min-width: 0;
    /* Allow input to shrink */
  }

  .search-box .clear-icon {
    font-size: 11px;
    margin-left: 2px;
  }

  .icon-item {
    width: 22px;
    height: 22px;
  }

  .header-icon {
    width: 14px;
    height: 14px;
  }

  .header-divider {
    height: 16px;
    margin: 0 1px;
  }

  .profile-circle {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  /* Further improve mobile menu layout */
  .page-title {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .tab {
    font-size: 12px;
    padding: 4px 8px;
    height: 26px;
  }

  .section-title {
    font-size: 16px;
  }

  .menu-item-image,
  .menu-item-image-placeholder {
    width: 50px;
    height: 50px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .menu-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .category-title {
    font-size: 16px;
  }

  .menu-item-name,
  .menu-item-price {
    font-size: 13px;
  }

  .menu-item-status {
    min-width: 80px;
    font-size: 12px;
  }

  /* Improve touch targets */
  .menu-kebab,
  .toggle-icon {
    min-height: 30px;
    min-width: 30px;
  }

  /* Remove gap between kebab menu and toggle icon in mobile view */
  .category-actions {
    gap: 0;
  }

  /* Ensure category kebab menu matches desktop style even on very small screens */
  .category-actions .menu-kebab {
    width: 28px;
    height: 17px;
    min-height: 17px;
    min-width: 28px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2px;
  }

  .category-actions .menu-kebab img {
    width: 16px;
    height: 16px;
    opacity: 1;
    filter: brightness(0);
  }

  /* Ensure menu item kebab menu matches desktop style even on very small screens */
  .menu-item-actions .menu-kebab {
    width: 28px;
    height: 17px;
    min-height: 17px;
    min-width: 28px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2px;
  }

  .menu-item-actions .menu-kebab img {
    width: 16px;
    height: 16px;
    opacity: 1;
    filter: brightness(0);
  }

  /* Improve drag handle touch target for mobile */
  .drag-handle {
    padding: 8px;
    margin: 0;
  }
}

/* ----------- delete header responsive --------- */
@media (max-width: 1200px) {
  .iconmenubar li {
    width: 105px !important;
    padding: 10px;
  }
}

@media (max-width: 767px) {
  header .header-menu ul {
    height: 100%;
    overflow-x: scroll;
    margin: 10px 0;
  }

  #sidebarMenu {
    width: 310px;

    height: 90%;
    padding-bottom: 15px;
  }

  li.dropdown .dropdown-menu a {
    padding: 10px 0;
  }

  .fr-hero-details-products img {
    max-width: 100%;
  }

  .filters .nice-select {
    width: 170px !important;
  }

  .fr3-details .fr3-job-detail {
    display: block;
  }

  .adi-go-data .register-holder {
    margin: 10px auto;
  }

  .services-filter-2 h4 {
    font-size: 14px;
  }

  .result-box span.result-number {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    /*z-index: 2;*/
  }

  .fr-c-details {
    margin-top: 30px;
  }

  .fr3-job-detail .fr3-job-img.plaza-listing {
    float: none;
  }

  .fr-expert .fr-expert-content {
    float: none;
  }

  .fr3-job-detail .fr3-job-img {
    margin-right: 0;
  }

  .fr3-job-detail .fr3-job-img img {
    max-width: 100%;
  }

  .data-table-holder h4 {
    text-align: center;
  }

  .map-main-tabs ul.nav {
    display: block;
  }

  .radius-search .nice-select {
    width: auto;
  }

  .counter-area .counter-holder .counter-box:first-child:after {
    content: '';
    position: absolute;
    display: none;
  }

  .btn-group-spacing {
    display: block;
  }

  .btn-group-spacing button {
    margin: 0;
    margin-bottom: 8px;
  }

  .account-section ul.progress-nav.progress-function {
    padding-left: 0;
  }

  .inner-header {
    background: var(--color-primary-light);
    padding-bottom: 30px;
  }

  .iti.iti--allow-dropdown {
    margin-bottom: 10px !important;
  }

  .inner-header .breadcrumb-section h3 {
    padding-top: 15px;
    font-size: 28px;
  }

  header .mobile-menu {
    display: flex;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    letter-spacing: 0.5px;
  }

  .iconmenubar {
    display: none;
  }

  header .header-logo {
    padding-left: 0px;
    padding-right: 0px;
  }

  header .header-menu .ul-base li {
    display: none;
  }

  header .header-menu .ul-base li.mob-show,
  header .header-menu .ul-base .sidebarMenuInner li {
    display: block;
  }

  header .header-inner {
    padding: 0;
  }

  .search-section h3 {
    font-size: 30px;
  }

  .search-section h5 {
    font-size: 20px;
  }

  .search-container {
    padding-top: 10px;
  }

  .imagepart {
    margin-top: 20px;
  }

  .second-section {
    padding: 40px 0;
  }

  .second-section .row {
    padding: 20px;
  }

  .second-section h4 {
    text-align: center;
    padding-bottom: 15px;
  }

  .pro-btn {
    text-align: center;
  }

  .ocean-section {
    padding: 40px 0;
    margin-bottom: 0;
  }

  .ocean-section h3 {
    font-size: 24px;
  }

  .ocean-section p {
    padding-bottom: 0;
  }

  .textpart2 h5 {
    font-size: 24px;
  }

  .categories-section {
    padding: 20px;
    position: relative;
    margin: 0;
  }

  .infobox ul {
    padding-left: 20px;
  }

  .infobox {
    padding: 10px 0;
  }

  .cat-btn {
    text-align: left;
  }

  .fourth-section {
    padding: 40px 0;
  }

  .fourth-section {
    padding: 40px 0;
  }

  .fourth-section .row {
    padding: 20px;
  }

  .fourth-section h4 {
    text-align: center;
    padding-bottom: 15px;
  }

  .footer-top-part {
    padding-top: 40px;
    padding-bottom: 20px;
  }

  .logoimage img {
    width: 80%;
    padding-bottom: 20px;
  }

  .footermenu {
    padding-left: 0;
    display: block;
    float: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }

  .infobox ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
  }

  .footermenu li {
    padding-left: 0;
  }

  .footer-bottom-part {
    padding: 10px 0;
  }

  .footer-bottom-part p {
    margin-bottom: 0;
  }

  .d-none-mobile {
    display: none;
  }

  .d-none-desktop {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #sidebarMenu {
    width: 330px;
    overflow: scroll;
    height: 94%;
    padding-bottom: 15px;
  }

  header .header-menu ul {
    height: 100%;
  }

  .fr-hero-details-information h3 {
    font-size: 20px;
  }

  .adi-go-data .register-holder h4 {
    font-size: 18px;
  }

  .adi-go-data .btn.btn-success {
    margin-bottom: 10px;
  }

  header .mobile-menu {
    display: flex;
  }

  .iconmenubar {
    display: none;
  }

  header .header-inner {
    padding: 0;
  }

  header .header-logo img {
    max-height: 30px;
  }

  .search-section h3 {
    font-size: 40px;
  }

  .text-part {
    padding-top: 40px;
  }

  .first-section {
    margin-top: 0;
  }

  .first-section .row {
    align-items: center;
  }

  .ocean-section h3 {
    font-size: 30px;
  }

  .ocean-section p {
    padding-bottom: 20px;
  }

  .categories-section {
    position: relative;
    margin: 0;
  }

  .textpart2 p {
    font-size: 16px;
    padding-bottom: 0;
  }

  .infobox {
    padding: 10px 0;
  }

  .ocean-section {
    padding: 40px 0;
    margin-bottom: 0;
  }

  .footermenu li {
    padding-left: 10px;
  }

  .footermenu {
    padding: 0;
  }

  .footer-top-part {
    padding: 40px 0 20px;
  }

  .footer-bottom-part {
    padding: 5px 0;
  }

  .footer-bottom-part p {
    margin-bottom: 0;
  }
}

@media (min-width: 991px) and (max-width: 1024px) {
  header .header-menu ul {
    float: right;
  }
}

@media (min-width: 767px) {
  /* -- 2.29 Light Gallery */

  .gallery-view .counter {
    top: 4px;
  }

  .file-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .gallery-view .main-gallery img {
    max-width: 90%;
    max-height: calc(100vh - 150px);
    object-fit: contain;
  }

  .gallery-view .controls {
    right: 11px;
    top: -12px;
  }

  .gallery-view .gallery-content .main-gallery .counter {
    left: 9px;
  }

  .gallery-view .gallery-content .main-gallery .nav-button.prev {
    left: 20px;
    background-color: transparent !important;
  }

  .gallery-view .gallery-content .main-gallery .nav-button.next {
    right: 20px;
    background-color: transparent !important;
  }

  .thumbnail-parent {
    width: 100px;
    height: 80px;
  }

  .thumbnail-container {
    height: 100px;
  }

  .thumbnail {
    border: 2px solid white;
  }

  .gallery-view .control-button.close {
    font-size: 23px;
  }

  .thumbnail-parent {
    width: 90px;
    height: 75px;
  }

  .thumbnail-parent .play-icon {
    width: 35px;
    height: 35px;
  }

  .thumbnail-parent .play-icon svg {
    width: 1.3rem;
    height: 1.3rem;
  }

  /* ---- */

  .progress-nav li {
    height: 7px;
  }

  .progress-nav li:before {
    width: 25px;
    height: 25px;
    top: -9px;
    background-size: 60%;
    font-size: 15px;
  }

  .progress-nav li.active:before {
    width: 28px;
    height: 28px;
    border-width: 8px;
    top: -11px;
  }

  .progress-nav li.active ~ li:before {
    width: 22px;
    height: 22px;
    top: -7px;
  }

  .progress-nav li a {
    font-size: 20px;
    bottom: calc(100% + 23px);
  }
}

@media (min-width: 992px) {
  .data-table-holder table.dataTable {
    display: table;
  }
}

/*  */
@media (max-width: 1200px) {
  .header-menu {
    width: fit-content !important;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 1024px) {
  header .header-menu .ul-base li {
    display: none;
  }

  header .nav-btn.nav-slider {
    float: right;
    margin-top: 22px;
    text-align: end;
  }

  /* .inner-header{
		height: 200px;
	} */
  .header-menu {
    display: none;
  }
}

@media (max-width: 567px) {
  .inner-header {
    height: fit-content;
  }
}

/* Medium screens: Adjust main content for fixed sidebar and header */
@media (min-width: 769px) and (max-width: 1100px) {
  /* -- 4.1 Menu Manager - Overview page -- */
  .main-content {
    margin-left: 85px;
    /* Medium screen sidebar width */
    margin-top: 60px;

    /* Header height */
    min-height: calc(100vh - 60px);
  }

  /* Medium to small screens (769px to 1100px) - Icon-only sidebar with hover labels */
  .dashboard-sidebar {
    width: 85px !important;
    /* Narrower fixed width */
    min-width: 85px !important;
    /* Ensure it stays at least 85px */
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
    /* Smooth animated transition */
    overflow: visible;
    /* Allow labels to show outside sidebar */
    position: fixed !important;
    /* Fixed position for medium screens */
    top: 60px !important;
    /* Below fixed header */
    left: 0 !important;
    height: calc(100vh - 60px) !important;
    z-index: 1001;
    /* Higher z-index for hover expansion */
  }

  .dashboard-sidebar .sidebar-menu {
    gap: 12px;
    /* Tighter spacing for icons */
    padding: 25px 0 20px 0;
  }

  .dashboard-sidebar .menu-item {
    padding: 0 6px;
    display: flex;
    justify-content: center;
    /* Center content when collapsed */
    align-items: center;
    font-size: 16px;
    gap: 0;
    /* No gap when collapsed */
    position: relative;
    height: 44px;
    /* Slightly smaller height */
    /* margin: 0 8px; Tighter margin for narrower sidebar */
    border-radius: 8px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
    overflow: visible;
    /* Allow labels to show outside */
  }

  .dashboard-sidebar .menu-item .menu-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }

  /* Label styling - positioned absolutely to slide out */
  .dashboard-sidebar .menu-item span {
    display: block !important;
    /* Override global hide rule */
    position: absolute !important;
    left: 75px !important;
    /* Position further right from icon */
    opacity: 0 !important;
    visibility: hidden !important;
    /* Prevent flash during resize */
    transform: translateX(-10px) !important;
    transition: none !important;
    /* No transitions by default to prevent flash */
    white-space: nowrap !important;
    background-color: white !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e0e0e0 !important;
    z-index: 1000 !important;
    pointer-events: none !important;
  }

  /* Enable transitions only on hover to prevent resize flash */
  .dashboard-sidebar .menu-item:hover span {
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* Show on hover */
    transform: translateX(0) !important;
  }

  .dashboard-sidebar .menu-item:hover {
    background-color: var(--color-hover-bg);
  }

  /* Active state styling */
  .dashboard-sidebar .menu-item.active {
    background-color: rgba(11, 94, 194, 0.08);
  }

  .header-right {
    gap: 6px;
  }

  .search-box {
    width: 180px;
  }
}

/* search page styling */
:root {
  /* For box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.03) inset; */
  --shadow-inset-light: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.03);

  /* For box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); */
  --shadow-default: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --font-weight-normal: 400;
  --line-height-normal: 100%;
  --letter-spacing-normal: 0;
  --font-weight-bold: 700;
  --font-size-small: 0.875rem;
  --font-size-medium: 1.125rem;
  --font-size-base: 1rem;
}
body {
  padding: 0;
}
/* common styles-custom utility classes */
.flex {
  display: flex;
}
.flex-c {
  flex-direction: column;
}
.space-b {
  justify-content: space-between;
}
.full-h {
  height: 100%;
}
.full-w {
  width: 100%;
}
.flex-a-j {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-a-b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.font-weight-normal {
  font-weight: var(--font-weight-normal);
}
.gap-five {
  gap: 5px;
}
.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  /* transform: scale(0.95); */
  transform: translateX(100%);
}
/* Expanded Search bar styling */

.main-header {
  display: flex;
  flex-direction: column;
}
.no-bottom-border {
  border-bottom: 0;
}
.full-header {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 12px;
  margin-bottom: 12px;
}
.main-header {
  position: fixed;
  top: 0;
}
/* .full-header {
  margin-top: 0;
  margin-bottom: 0;
} */
.expanded-search-bar-content--wrapper {
  margin-top: 2px;
  background-color: white;
}
/* Search bar styling */
.search-bar-content--wrapper,
.expanded-search-bar-content--wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%; /* Allows it to take full width of its parent */
  max-width: 788px; /* Maximum width as per original design */
  /* Add some horizontal padding for smaller screens */
  box-sizing: border-box; /* Include padding in the width */
}
.expanded-search-bar-content--wrapper-container {
  margin-top: 50px;
  width: 100%;
  height: 68px;
  background-color: white;
  z-index: 1000;
}
.search-bar-content--wrapper {
  margin: 50px auto 0 auto;
  z-index: 5000; /* Center horizontally with margin-top, adjust as needed for full page */
}

/* Contains the search bar and the mic button, uses flexbox for arrangement */
.search-bar-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

/* The main search bar container, rounded and with shadow */
.search-bar--container {
  display: flex;
  align-items: center;
  flex-grow: 1; /* Allows it to grow and shrink */
  background-color: #fff;
  border-radius: 9999px; /* Fully rounded */
  box-shadow: var(--shadow-inset-light);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.17);

  border: 1px solid rgba(244, 246, 252, 1); /* Hardcoded border-light */
  height: 53px; /* Fixed height for the search bar */
  min-width: 250px; /* Minimum width for the search bar itself */
}

/* Group for the search icon and input field - now exactly 50% width */
.input-group {
  display: flex;
  align-items: center;
  height: inherit;
  flex: 0 0 50%; /* Takes exactly 50% of parent width, doesn't grow/shrink */
  /* Padding for the content within this group */
  padding-left: 21px; /* Hardcoded --group-internal-padding-x */
  padding-right: 2rem; /* Hardcoded --separator-gap-x */
  min-width: 150px; /* Ensure content is readable even when shrinking */
  box-sizing: border-box; /* Include padding in width calculations */
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.search-input,
.search-bar-location-input {
  flex-grow: 1;
  padding: 0;
  border: none;
  outline: none;
  font-size: var(--font-size-base);
  color: #374151; /* Hardcoded --text-gray-700 */
  min-width: 0; /* Allows input to shrink below its content size */
  background-color: transparent; /* Ensure background is transparent */
  /* Placeholder styling */
  &::placeholder {
    color: #6b7280; /* Hardcoded --text-gray-500 */
  }
}

input[type='search']::-webkit-search-cancel-button {
  cursor: pointer;
}

/* New container for the right half (separator, location, search button) */
.right-content-wrapper {
  display: flex;
  align-items: center;
  flex: 0 0 50%; /* Takes exactly 50% of parent width */
  box-sizing: border-box;
  /* Padding for content within this wrapper, relative to its own edges */
  padding-left: 2rem; /* Hardcoded --separator-gap-x */
}

/* Separator line */
.separator {
  width: 1px;
  height: 24px;
  background-color: #e5e7eb; /* Hardcoded --border-gray-200 */
  flex-shrink: 0; /* Prevent shrinking */
}

/* Group for the location icon and text */
.location-group {
  display: flex;
  height: inherit;
  align-items: center;
  color: #6b7280; /* Hardcoded --text-gray-500 */
  flex-grow: 1; /* Takes remaining space within right-content-wrapper */
  white-space: nowrap;
  min-width: 80px;
  /* Ensure content is readable */
}

.search-bar-location-input {
  outline: none;
  border: none;
}

.search-bar-location-input:focus-within,
.input-group:focus-within,
.location-group:focus-within {
  background-color: var(--color-primary-light);
}

/* Icons within the search bar */
.svg-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0; /* Prevent icons from shrinking */
}

.location-icon {
  margin-right: 0.5rem;
}

.search-location-icon {
  width: 24px;
  height: 24px;
  margin-left: 23px;
  margin-right: 0.5rem;
}

/* Search and Mic buttons */
.search-button,
.mic-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 53px; /* Fixed width for circular buttons */
  height: 53px; /* Fixed height for circular buttons */
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  flex-shrink: 0; /* Prevent shrinking */
  padding: 0; /* Remove default button padding */
  border-radius: 9999px; /* Ensure buttons are fully rounded */
}

.search-button {
  background-color: #2e5dc0; /* Hardcoded --color-primary */
  color: #fff; /* Icon color inside button */
  border: 1px solid rgba(46, 93, 192, 1);

  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 9999px; /* Reapply specific rounding for search bar container */
  border-bottom-right-radius: 9999px;
  margin-left: auto; /* Pushes the button to the far right within its flex container */
  margin-right: -1px; /* Overlap border with container to prevent double border */
}

.search-button:hover {
  background-color: #003380; /* Darker blue on hover */
}

.mic-button {
  background-color: #2e5dc0; /* Hardcoded --color-primary */
  box-shadow: var(--shadow-main);
}

.mic-button:hover {
  background-color: #003380; /* Darker blue on hover */
}

.mic-button img {
  width: 24px; /* Adjust size as needed */
  height: 24px; /* Adjust size as needed */
  filter: brightness(0) invert(1); /* This makes the icon white, assuming original is dark */
}

/* Basic SVG icons for demonstration */
.search-location-icon {
  width: 24px;
  height: 24px;
}

/* Style for the mic icon specifically */
.mic-icon {
  width: 24px;
  height: 24px;
  fill: #fff;
}
/* / */
.content-wrapper {
  position: relative;
}
/* Recent and Saved Searches Area */
.area-below-search-input--wrapper,
.expanded-area-below-search-input--wrapper {
  position: absolute;
  /* top: 130px; */
  top: 50px;
  width: 100%;
  height: fit-content;
  max-width: 559px;
  /* max-height: 310px; */
  margin-top: 10px;
  border: 1px solid rgba(232, 232, 232, 1);
  border-radius: 12px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04) inset;
  background-color: white;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  padding-bottom: 10px;
}

.area-below-search--input {
  padding: 28px 21px 19px 21px;
}
.recent-saved-searches,
.recent-location-searches {
  display: flex;
  flex-direction: column;
}
.search-pills {
  display: flex;
  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap;
  gap: 7px;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  /* Hide scrollbar for Webkit browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Standard syntax */
}
.search-pill {
  height: 35px;
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  gap: 6px;
  padding: 9px 13px 9px 13px;
  text-wrap: nowrap;
  border: 1px solid rgba(190, 184, 184, 1);
  border-radius: 9999px;
  cursor: pointer;
  margin-right: 1px;
  margin-left: 1px;
  transition: all 0.3s ease;
}
.search-pill:hover {
  background-color: var(--hover-bg-light);
}
.pill-icon {
  margin-bottom: 2px;
  height: 22px;
  width: 22px;
}
.searches-heading {
  margin-top: 15px;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}
.searches--common-container,
.location--common-container {
  display: flex;
  height: 100%;
  max-height: 143px;
  flex-direction: column;

  gap: 5px;
  overflow-y: auto;
  scrollbar-width: thin; /* Makes the scrollbar thin */
  scrollbar-color: #e0e0e0 transparent; /* Thumb: light gray, Track: transparent */
}
.location--common-container {
  margin-top: 14px;
}
.searches,
.locations {
  width: 100%;
  min-height: 41px;

  padding: 0px 15px 0 15px;
  border-radius: 20px;

  flex-wrap: nowrap;
}
.searches:hover {
  background-color: var(--color-primary-light);
}
.locations:hover {
  background-color: var(--color-primary-light);
}
.save-delete-buttons {
  display: flex;
  align-items: center;
}
.pointer-cursor {
  cursor: pointer;
}
.search-x-icon {
  margin-left: 4px;
}
.save-search-icon:active {
  fill: rgba(11, 94, 194, 1);
  outline: none;
  color: white;
  stroke: 'none'; /* Blue for outlines/paths */
}
.job-title,
.previous-location {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  cursor: pointer;
}

.previous-location {
  width: 350px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-top: 9px;
}
.subjects-location {
  color: rgba(79, 87, 95, 1);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  cursor: pointer;
}
.recent-saved-toggle {
  padding: 6px 28px 0 28px;

  border-top: 1px solid rgba(232, 232, 232, 1);
}
.saved-searches-text {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-link);
}

/* Styles for the area below the location input */
.area-below-location-input--wrapper,
.expanded-area-below-location-input--wrapper {
  position: absolute;
  top: 50px;

  width: 100%;
  height: fit-content;
  max-width: 488px;
  /* max-height: 330px; */
  margin-top: 10px;
  margin-left: 363px;
  border: 1px solid rgba(232, 232, 232, 1);
  border-radius: 12px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04) inset;
  background-color: white;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}
.area-search-loaction-active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.expanded-area-below-search-input--wrapper,
.expanded-area-below-location-input--wrapper {
  top: 165px;
  height: 330px;
  max-height: 400px;
}
.area-below-location--input,
.expanded-area-below-search-input--wrapper,
.area-below-location--input,
.expanded-area-below-location-input--wrapper {
  padding: 28px 28px 28px 28px;
  height: fit-content;
}

/* Styling for Mic button's modal window */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  background-color: rgba(0, 0, 0, 0.29);

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 2000;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal Content Box */
.mic-modal-content {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  padding: 24px;
  width: 100%;
  height: 100%;
  max-width: 556px;
  max-height: 395px;
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  position: relative;
}

.modal-overlay.active .mic-modal-content {
  transform: translateY(0); /* Slide up animation */
}

/* Close Button */
.modal-close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #888;
  transition: color 0.2s ease;
  /* padding: 5px; */
  /* Increase clickable area */
}

.modal-close-button:hover {
  color: #333;
}

/* Mic Icon Styling */
.mic-icon-container {
  width: 100%;
  height: 100%;
  margin-top: 170px;
  border-radius: 50%; /* Circular shape */
  margin: 20px auto; /* Center the icon */
  transition: background-color 0.3s ease;
}

.modal-mic-button {
  background-color: var(--color-primary);
  width: 100%;
  height: 100%;
  max-height: 80px;
  max-width: 80px;
  border-radius: inherit;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
.mic-svg {
  width: 100%; /* Size of the microphone SVG */
  height: 100%;
  max-width: 38.8px;
  max-height: 38.8px;
}

.modal-mic-button:hover {
  opacity: 0.9;
  scale: 1.02;
}
.modal-mic-button:active {
  scale: 0.95;
}

/* Listening Text */
.modal-listening-text {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 0;
  font-weight: 500;
}
/* Search Result and Map Display styles */

.search-results-display {
  display: flex;
  margin-top: 28px;
  width: 100%;
}
.search-page-search-results {
  display: flex;
  flex-direction: column;
  padding: 0;
  transition: all 0.3s ease;
  margin-top: 0;
}
.card-container-wrapper {
  display: flex;
  flex-direction: column;

  /* margin-bottom: 75px; */
}
.filter-section {
  margin-bottom: 11px;
}
.results-found {
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}
.filter-group {
  display: flex;
  align-items: center;
  width: 96px;
  height: 36px;

  gap: 8px;
  padding: 8px;
  border-radius: 2px;
  border: 1px solid var(--color-divider);
  cursor: pointer;
}
.filter-button {
  width: 17px;
  height: 18px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  outline: none;
  display: flex;
}

.card-container {
  background-color: rgba(255, 255, 255, 1); /* Darker background for the card */
  padding: 18px 0px 18px 0px;
  margin-bottom: 18px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0) inset;
  border-radius: 10px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
  border: 1px solid rgba(230, 235, 241, 1);
  /* Max width for a card-like appearance */
  /* White text for contrast */
  /* Subtle border */
}

/* Reverted to .header-section for consistency with original request */
.card-header-section {
  display: flex;
  align-items: flex-start;
  padding: 0px 28px 0px 28px;
}

.card-header-image {
  width: 80px;
  height: 80px;
  border-radius: 2px;
  object-fit: cover;
  margin-right: 25px;
}

.card-header-info {
  display: flex;
  flex-direction: column;
  margin-top: 11px;
}

.card-header-info h2 {
  margin: 0 0 5px 0;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.card-header-section:hover .card-header-info h2 {
  color: var(--color-link);
}
.rating-distance {
  display: flex;
  gap: 3px;
  align-items: center;
  color: rgba(79, 87, 95, 1);
  text-wrap: nowrap;
}
.card-star {
  width: 15px;
  height: 15px;
}
.rated-by {
  color: var(--color-black);
}
.info-dot-icon {
  margin-left: 8px;
  margin-right: 8px;
}

.location-section {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);

  padding: 0px 28px 0px 28px;
  margin-top: 16px;
  margin-bottom: 8px;
}

.card-location-icon {
  width: 17px;
  height: 17px;
  fill: currentColor; /* Inherit color from parent */
}
.tags-wrapper {
  width: 100%;

  overflow: hidden;
}
.tags-section {
  display: flex;

  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent tags from wrapping */
  overflow-y: hidden;

  padding: 0px 28px 0px 28px; /* Space for scrollbar */
  margin-bottom: 20px;
  margin-right: 28px;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  /* Hide scrollbar for Webkit browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* Standard syntax */
}

.tags-section::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.tag {
  background-color: var(--color-primary-light);

  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: capitalize;
  flex-shrink: 0;
  padding: 8px 15px;
  border-radius: 5px;
  margin-right: 5px;
  border: 1px solid rgba(230, 235, 241, 1);
  cursor: pointer;
  transition: background-color 0.3s ease;

  /* Ensure tags are selectable despite parent's user-select: none */
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

.tag:last-child {
  margin-right: 0; /* No margin on the last tag */
}

.tag:hover {
  background-color: #e6ebf1;
}

/* Reverted to .footer-section for consistency with original request */
.card-footer-section {
  padding: 8px 28px 0px 28px;
  font-size: 0.9rem;
  border-top: 1px solid rgba(232, 232, 232, 1);
}

.status-dot {
  width: 7px;
  height: 7px;
  /* Green dot for "Open" */
  border-radius: 50%;
  margin-right: 8px;
}

/* Style for Open status (Green) */
.status-dot.open {
  background-color: var(--color-success);
}

/* Style for Closed status (Red) */
.status-dot.closed {
  background-color: #dc3545; /* A common red color */
}

/* Optional: Style for unknown/N/A status if you want a different color */
.status-dot.unknown {
  background-color: #6c757d; /* A gray color */
}
.hours-info {
  display: flex;
  align-items: center;
}

.right-circles {
  display: flex;
  gap: 5px; /* Space between circles */
}

.card-circle {
  position: relative; /* Needed for absolute positioning of the tooltip */
  transition: all 0.3s ease; /* Smooth transition for hover effects */

  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0.5008px solid rgba(209, 209, 209, 1);
  cursor: pointer;
}
.circle-icons {
  width: 18px;
}
/* Custom tooltip styling */

/* Hover effects for the icon wrapper */
.card-circle:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Styling for the Font Awesome icons themselves */

/* Styling for the tooltip text */
.card-circle .tooltip {
  visibility: hidden; /* Hidden by default */
  background-color: black; /* Dark background for tooltip */
  color: #fff; /* White text color */
  text-align: center;
  border-radius: 6px; /* Rounded corners for tooltip */
  padding: 8px 12px;
  position: absolute; /* Positioned relative to .icon-wrapper */
  z-index: 1; /* Ensure tooltip appears above other content */
  bottom: 120%; /* Position the tooltip above the icon, leaving some space */
  left: 50%;
  transform: translateX(-50%); /* Center the tooltip horizontally */
  opacity: 0; /* Fully transparent by default */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth fade-in/out */
  white-space: nowrap; /* Prevent text from wrapping inside tooltip */
  font-size: var(--font-size-small);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow for tooltip */
}

/* Arrow/pointer for the tooltip */
.card-circle .tooltip::after {
  content: '';
  position: absolute;
  top: 100%; /* Position at the bottom of the tooltip */
  left: 50%;
  margin-left: -5px; /* Center the arrow */
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent; /* Dark arrow pointing down */
}

/* Show tooltip on hover */
.card-circle:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/* Map Display Section  */
.map-display {
  display: flex;
  position: sticky;
  top: 10px;
  left: 565px;
  /* max-width: 890px; */
  width: 100%;
  height: 100vh;
  margin-left: 12px;
}
/* This is to be romoved when the real map is avaiable */
.map-img {
  width: 100%; /* Now, this 100% refers to the dynamically calculated width of .map-display */
  height: auto; /* Maintains aspect ratio */
  display: block;
}
/* .is-sticky {
  position: sticky;
  top: 78px;
  left: 565px; 
  width: 100%; 
  z-index: 1000;
} */
.pagination-wrapper {
  display: flex;
  /* position: fixed;
  top: calc(100vh - 10%); */
  width: 100%;
  justify-content: center;
  padding: 0 60px 0 60px;
}

/* Pagination CSS */
.pagination-container {
  display: flex;
  gap: 4px; /* Reduced gap for a tighter look */
  background-color: #ffffff;
  padding: 8px; /* Reduced padding */
  border-radius: 10px; /* Rounded corners for the container */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  justify-content: center; /* Center items within the container */
  max-width: 100%; /* Ensure container is responsive */
  margin-top: 0;
  border: 1px solid rgba(213, 217, 217, 1);
}

.pagination-button {
  min-width: 36px; /* Slightly smaller min-width for buttons */
  height: 36px; /* Slightly smaller height */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px; /* Reduced horizontal padding */
  border: none; /* No border for default state */
  background-color: transparent; /* Transparent background for default state */
  color: #333333;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none; /* Prevent text selection */
  white-space: nowrap; /* Prevent text from wrapping inside buttons */
  border-radius: 8px; /* Rounded corners for individual buttons */
}

.pagination-button:hover:not(.active):not(.disabled) {
  background-color: rgba(237, 242, 253, 1); /* Subtle background on hover */
}

.pagination-button.active {
  background-color: #e0efff; /* Lighter blue for active page */
  /* Darker blue text for active page */
  border: 1px solid #cce0ff; /* Subtle border for active page */
  cursor: default;
}

.pagination-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: transparent; /* Disabled buttons are also transparent */
  color: #999999;
}

.pagination-button.ellipsis {
  pointer-events: none; /* Make ellipsis non-clickable */
  background-color: transparent;
  color: #333333;
  opacity: 1; /* Ellipsis should not be faded */
  cursor: default;
}

/* Styling for SVG arrows */
.pagination-button svg {
  width: 7.6px; /* Increased from 7.6px */
  height: 13.3008px; /* Increased from 13.2px, maintaining aspect ratio */
  fill: currentColor;
  display: block;
}
/*Styling for sliding windows  */
.overlay-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.41);
  /* Semi-transparent black */
  z-index: 4000; /* Ensure overlay is above other content */
  opacity: 0; /* Initially hidden */
  visibility: hidden; /* Initially hidden */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
  display: flex;
  justify-content: flex-end; /* Align content to the right */
}

.header-sliding-window {
  position: fixed; /* Fixed position relative to viewport */
  top: 0;
  right: 0; /* Position at the right edge */
  transform: translateX(100%); /* Initially off-screen to the right */
  width: fit-content; /* Take full width on small screens */
  /* max-width: 453px; */
  /* Max width as requested */
  height: 100vh;
  /* Full height of the viewport */
  background-color: rgba(255, 255, 255, 1); /* White background */
  z-index: 4001; /* Ensure window is above overlay */
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2); /* Shadow on the left */
  transition: transform 0.3s ease; /* Smooth sliding transition using transform */
  box-sizing: border-box; /* Include padding in width/height */
  display: flex;
  flex-direction: column;
}

/* Classes to show/hide the elements - Corrected to match HTML classes */
.overlay-header.show {
  opacity: 1; /* Slide into view */

  visibility: visible;
}

.header-sliding-window.show {
  transform: translateX(0);
}
.sliding-window-heading-btn {
  height: 54px;
  width: 100%;
  padding: 17px 29px 17px 29px; /* Padding inside the window */

  border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.sliding-window-heading {
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: capitalize;
  margin: 0;
}
.sliding-close-button {
  background: none;
  border: none;

  transition: all 0.2s ease;
  cursor: pointer;
}

.sliding-close-button:hover {
  transform: scale(1.15); /* Moderate enlargement */
  background-color: #f0f0f0; /* Very light gray */
  border-color: #b0b0b0; /* A light, visible border on hover */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
/* Styling for Cart */
.cart-items-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 545px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding-bottom: 150px;
}

.cart-items {
  padding: 29px;
  border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.cart-item-img {
  width: 87px;
  height: 98px;
}
.item-details-container {
  margin-left: 16px;
  margin-top: 12px;
}
.cart-product-name,
.cart-product-price,
.product-quantity {
  color: rgba(0, 0, 0, 1);

  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: capitalize;
  text-wrap: nowrap;
}
.cart-product-price {
  color: rgba(137, 135, 135, 1);
}
.items-quantity {
  display: flex;
  margin-top: 10px;
}
.change-quantity {
  display: flex;
  align-items: center;
  width: 89px;
  height: 28px;
  border-radius: 2px;
  justify-content: space-around;
  border: 1px solid rgba(227, 227, 227, 1);
}
.decrease-item,
.increase-item {
  border: none;
  background: none;
  padding: 0;
}
.remove-cart-product {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.decrease-btn {
  width: 8px;
  border-radius: 2px; /* Slightly rounded corners for the bars */

  border: 1.5008px solid rgba(0, 0, 0, 1);
}
.cart-product-total-price {
  align-self: self-end;
  margin-left: 74px;
  margin-bottom: 7px;
}
.item-details {
  display: flex;
}
/* Styling for Plus icon created using html */
/* starts here */
.plus-icon-wrapper {
  position: relative;

  border-radius: 8px;
}

.plus-icon-bar {
  position: absolute;
  border: 1.5008px solid rgba(0, 0, 0, 1);
  box-sizing: border-box;
  border-radius: 2px;
}

.plus-icon-bar--horizontal {
  width: 8px;
  height: 1px;
}

.plus-icon-bar--vertical {
  width: 1px;
  height: 8px;
}
.empty-cart-message {
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  width: 475.48px;
  padding: 29px;
}
.cart-bin-icon {
  cursor: pointer;
}
.cart-window {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: fit-content;
}
/* ends here */
.cart-total-wrapper {
  border-top: 1px solid rgba(232, 232, 232, 1);
  /* margin-top: 220px; */
  position: absolute;
  background-color: white;
  bottom: 0;
  width: 100%;
}
.cart-total-checkout {
  padding: 11px 29px 11px 29px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.subtotal-heading,
.cart-subtotal-price,
.checkout-summary-note,
.cart-checkout-btn {
  font-weight: var(--font-weight-bold);
  font-size: 1.25rem;
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: capitalize;
  margin: 0;
}
.cart-subtotal-price,
.checkout-summary-note,
.cart-checkout-btn {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-medium);
}
.cart-subtotal {
  padding-right: 10px;
}
.checkout-summary-note {
  font-size: 17px;
  color: rgba(0, 0, 0, 1);
  margin: 5px 0 4px 0;
  text-wrap: nowrap;
  letter-spacing: var(--letter-spacing-normal);
  line-height: var(--line-height-normal);
  height: 36px;
}
.cart-checkout-btn {
  border: none;
  width: 100%;
  height: 44px;
  border-radius: 5px;
  color: white;
  background-color: var(--color-primary);
}
/* Styling for message sliding window starts here*/
.messages-window,
.notification-window {
  position: relative;
  height: 100%;
}
.messages-display-section {
  width: fit-content;
  height: 100%;
  max-height: 700px;
  padding-bottom: 200px;
  overflow-y: auto;
}

.message-container--wrapper {
  padding: 10px 10px 0px 9px;
  width: 100%;
}
.message-content-wrapper {
  padding: 10px 20px 10px 20px;
  border-radius: 10px;
  width: 100%;
  transition: all 0.3s ease;
  cursor: pointer;
}
.message-content-wrapper:hover {
  background-color: rgba(248, 249, 250, 1);
}
.message-content-container {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.message-content,
.message-sender-time {
  display: flex;
}

.message-content {
  flex-direction: column;
  width: 100%;
}
.sender-picture-container {
  min-width: 60px;
  max-width: 60.01px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
}
.sender-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.message-sender-time {
  justify-content: space-between;
}
.message-sender-name,
.message-timestamp,
.unread-message-count,
.message-txt {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-wrap: nowrap;
}
.message-sender-name {
  font-weight: var(--font-weight-bold);
}
.message-timestamp,
.unread-message-count {
  font-size: var(--font-size-small);
  color: rgba(101, 97, 97, 1);
}

.message-txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 290px;
  color: rgba(0, 0, 0, 1);
}
.unread-msg-container {
  padding: 0px 6.5008px 0px 6.5008px;
  height: 20px;
  border-radius: 9999px;
  background-color: var(--color-primary);
}
.unread-message-count {
  color: white;
}
.slide-view-all-msg {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 3px;
  width: 100%;
  border-top: 1px solid rgba(226, 226, 226, 1);
  height: 54px;
  padding: 0px 29px 0px 29px;
  background-color: white;
  bottom: 0;
}
.slide-all-msg-txt {
  color: var(--color-link);
  text-decoration: underline;
}
.unread-notification-container {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-primary);
}
/* Styling for message sliding window ends here*/

/* Styling for USER drop down */
.user-drop-down {
  position: fixed;
  top: 65px;
  right: 50px;
  width: 295px;
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 3px;
  box-shadow: var(--shadow-inset-light);
  background-color: white;
  box-shadow: var(--shadow-default);
  z-index: 1000;
}
.user-wrapper {
  padding: 22px;
  display: flex;
}

.profile-dashboard-content,
.other-user-links-content {
  /* padding: 22px; */
  display: flex;
}
.user-wrapper {
  align-items: center;
  gap: 12px;
}
.profile-dashboard-content,
.other-user-links-content {
  flex-direction: column;
  /* gap: 14px; */
}

.name-username-img,
.profile-dashboard,
.other-user-links {
  display: flex;
  border-bottom: 0.5008px solid rgba(232, 232, 232, 1);
}
.user-full-name {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}
.user-username {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-text);
}
.user-drop-down-common-txt,
.currency-name-txt {
  font-size: var(--font-size-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: capitalize;
}
.name-username-img {
  align-items: center;
}
.user-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 41px;
  max-width: 41.1px;
  height: 41px;
  border-radius: 50%;
  overflow: hidden;
}
.user-drop-down-img {
  width: inherit;
  height: inherit;
}
.full-name-username,
.profile-dashboard,
.other-user-links {
  display: flex;
  flex-direction: column;
}
.user-drop-down-link,
.profile-dashboard,
.user-profile-link,
.user-dashboard-link {
  text-decoration: none;
  color: rgba(0, 0, 0, 1);
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-medium);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: capitalize;
  cursor: pointer;
}
.user-profile-link,
.user-dashboard-link,
.user-drop-down-link {
  padding: 8px 22px;
  font-size: 18px;
}

.user-profile-link:hover,
.user-drop-down-link:hover,
.user-dashboard-link:hover {
  color: black;
  font-size: 18px;
  background-color: var(--hover-bg-light);
}
.user-sign-out {
  padding: 22px;
}
.user-sign-out-btn {
  width: 256px;
  height: 36px;
  border: none;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.user-sign-out-btn:hover {
  color: white;
  background-color: var(--color-primary);
}
/* Styling for Language and Currency drop down */
.language-currency-drop-down {
  position: fixed;
  top: 65px;
  right: 253px;
  width: 295px;
  display: flex;
  flex-direction: column;
  border-radius: 3px;
  background-color: white;
  box-shadow: var(--shadow-inset-light);

  box-shadow: var(--shadow-default);
  z-index: 1000;
  transition: all 0.3s ease;
}
.language-currency-container {
  display: flex;
  justify-content: space-between;
  padding: 15px 22px 15px 22px;

  border-bottom: 0.5008px solid rgba(232, 232, 232, 1);
}
.mobile-lang-curr-x-icon {
  display: none;
}
.language-currency-heading {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: rgba(0, 0, 0, 1);
  margin: 0;
}
.change-language-currency {
  display: flex;
  padding: 15px 22px 15px 22px;

  flex-direction: column;
  gap: 13px;
}
.language-change,
.currency-change {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-small);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: rgba(0, 0, 0, 1);
}
.currency-btn,
.language-btn {
  height: 35px;
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(230, 235, 241, 1);
  background-color: rgba(248, 249, 250, 1);
  border-radius: 6px;
}
.language-btn > img,
.currency-btn > img {
  transform: rotate(270deg);
}
.language-btn-container {
  width: 100%;
}
.selected-language,
.selected-currency {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}
/* Styling for language selection wih radio */
.language-selection,
.currency-selection {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}
.lang-selection-txt {
  font-size: 16px;
}
.lang-selection-txt,
.curr-selection-txt,
.dark-left-arrow {
  margin-left: 22px;
}
.lang-selection-txt,
.Curr-selection-txt {
  margin-bottom: 5px;
}
.language-selection-radio,
.currency-selection-radio {
  display: flex;
  align-items: center;
  margin-left: 12px;
  width: 273px;
  height: 32px;
  border-radius: 5px;
  padding-left: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.language-selection-radio:hover {
  background-color: var(--color-primary-light);
}
.dark-left-arrow {
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  width: 14px;
  height: 11px;
}

.radio-container {
  display: flex;
  flex-direction: column;
  width: 267px;
  /* Stack radio options vertically */
  gap: 16px;
  cursor: pointer;
  /* Space between radio options */
}

/* Custom styling for radio inputs */
/* Wrapper for each custom radio option */
.custom-radio-display {
  padding-top: 5px;
  cursor: pointer;
}
.custom-radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: var(--font-size-base);
  color: #333;
}

/* Hide the default browser radio button */
.custom-radio-option input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.custom-radio-label {
  display: flex;
  align-items: center;

  user-select: none;
  flex-grow: 1;
  cursor: pointer;
}
.custom-radio-label,
.currency-txt-symbol {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: capitalize;
  color: rgba(0, 0, 0, 1);
}
.currency-txt-symbol {
  width: 100%;

  padding-right: 25px;
  display: flex;
  justify-content: space-between;
}

/* Style for the container of the custom radio visuals (outer circle) */
.custom-radio-display {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #ccc;
  background-color: #fff;
  margin-right: 10px;
  box-sizing: border-box;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  flex-shrink: 0; /* Prevent it from shrinking */
}

/* Style for the custom radio button inner dot (the inner circle) */
.custom-radio-display::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease-in-out;
}

/* When the radio input is checked, apply styles to its sibling label's custom-radio-display */
.custom-radio-option input[type='radio']:checked + .custom-radio-label .custom-radio-display {
  border-color: rgba(46, 93, 192, 1);
  background-color: #2e5dc0;
}

/* When the radio input is checked, show the inner dot */
.custom-radio-option input[type='radio']:checked + .custom-radio-label .custom-radio-display::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Focus styles for accessibility - Removed outline as requested */
.custom-radio-option input[type='radio']:focus + .custom-radio-label .custom-radio-display {
  outline: none;
}

/* Hover effect for the label's custom radio display */
.custom-radio-option:hover .custom-radio-display {
  border-color: #8ab4f8;
}
.zap-drop-down {
  display: flex;
  flex-direction: column;
  gap: 11px;
  position: fixed;
  top: 65px;
  right: 290px;
  width: fit-content;
  height: fit-content;
  /* padding: 10px 0px; */
  background-color: white;
  box-shadow: var(--shadow-inset-light);

  box-shadow: var(--shadow-default);
  z-index: 1000;
}
.resume-jobs,
.favourite-listings {
  display: flex;
  flex-direction: column;
  /* gap: 11px; */
  /* padding: 11px 12px 0px 12px; */
  /* padding: 11px 0px; */
}
.resume-jobs {
  border-top: 1px solid rgba(232, 232, 232, 1);
}
.zap-drop-down-links {
  text-decoration: none;
  color: rgba(0, 0, 0, 1);
  padding: 5px 20px;
}
.zap-drop-down-links:hover {
  color: rgba(0, 0, 0, 1);
  background-color: var(--hover-bg-light);
}
/* Styling for filter overlay and filter window */
.filter-overlay {
  background-color: rgba(0, 0, 0, 0.32);
  height: 100vh;
  width: 100vw;
  z-index: 2000;
}
.filter-window,
.filter-overlay {
  visibility: hidden;
  top: 0;
  left: 0;
  opacity: 0;

  transition: all 0.3s ease;
}
.filter-overlay {
  position: fixed;
}
.filter-window {
  position: relative;
  height: 100%;
}
.filter-overlay-active {
  opacity: 1;
  visibility: visible;
}

.filter-window {
  width: 391px;
  height: 100%;
  z-index: 2010;
  transform: translateX(-100%);
  background-color: white;
}
.filter-window-inner--content {
  height: 100%;
  max-height: 600px;
  overflow-y: auto;
  padding-bottom: 140px;
}
.filter-window-active {
  transform: translateX(0);

  opacity: 1;

  visibility: visible;
}
.filter-heading-close-btn {
  padding: 15px 34px 15px 34px;
  border-bottom: 1px solid rgba(226, 226, 226, 1);
}
.filter-heading,
.status-heading {
  font-weight: var(--font-weight-bold);
  font-size: 1.5rem;
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  margin: 0;
}
.filters-applied {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 34px 20px 34px;
}
.applied-filter {
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: uppercase;
  color: rgba(0, 0, 0, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.applied-filter-container {
  padding: 9px 21px 9px 21px;
  border-radius: 5px;
  background-color: var(--color-primary-light);
}
.filter-applied-x-icon {
  width: 10px;
  height: 9px;
}
.status-heading,
.rating-heading,
.distance-heading {
  margin-top: 30px;
  padding-left: 34px;
  font-size: 18px;
}
.rating-heading,
.distance-heading {
  margin-top: 18px;
  margin-bottom: 0;
}
.filter-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 34px;
  margin-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(226, 226, 226, 1);
}
.filter-status-checkbox {
  cursor: pointer;
  width: 19px;
  height: 17px;
}
.filter-status-checkbox:checked {
  accent-color: var(--color-link);
}

.filter-radio-container,
.filter-radio-container-distance {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  padding-left: 34px;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(226, 226, 226, 1);
}
.filter-radio-container-distance {
  border-bottom: none;
}
.rating-radio-label,
.distance-radio-label {
  font-weight: var(--font-weight-normal);
  font-size: 18px;
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: capitalize;
}
.apply-filter-button {
  position: absolute;
  bottom: 5px;
  border: none;
  background-color: var(--color-primary);
  width: 318px;
  height: 47px;
  color: white;
  border-radius: 5px;
  margin-left: 34px;
}
/* Mobile UI modifications */
.user-sliding-window,
.user-sliding-overlay {
  display: none;
}
.mobile-search-icon-bar {
  display: none;
}
.hidden {
  display: none;
}

.mobile-globe-icon {
  display: none;
}
.general-sliding-overlay {
  position: fixed;
  visibility: hidden;
  top: 0;
  left: 0;
  min-width: 100vw;
  min-height: 100vh;

  opacity: 0;
  background-color: rgba(0, 0, 0, 0.29);
  transition: all 0.5s ease;
}
.general-sliding-overlay--active {
  visibility: visible;
  opacity: 1;
  z-index: 1000;
}
.mobile-results-found {
  display: none;
}
/* Responsive adjustments */
@media (min-width: 360px) and (max-width: 767px) {
  html {
    overflow-x: hidden !important;
  }
  body {
    font-size: 16px;
  }
  .mobile-content-wrapper-padding {
    padding-bottom: 60px;
  }
  .search-bar-content--wrapper {
    display: none;
  }
  .search-results-display {
    flex-direction: column;
  }

  .map-display {
    display: none;
    /* position: fixed; */

    max-width: 100%;
    height: calc(100dvh - 80px);
    margin: 0;
  }
  .map-display-block {
    display: none;
  }
  .card-container-wrapper {
    width: 100%;
    display: grid;
  }
  .card-container {
    padding: 12px 0px 12px 0px;
  }
  .search-page-search-results {
    width: 100%;
  }
  .search-results-display {
    width: 100%;
    margin-top: 5px;
  }
  .card-header-image {
    width: 80px;
    height: 70px;
    margin-right: 12px;
  }

  .card-header-section,
  .location-section,
  .tags-section,
  .card-footer-section {
    padding: 0px 12px 0px 12px;
  }
  .card-footer-section {
    padding-top: 5px;
  }
  .user-sliding-window,
  .user-sliding-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    height: 735px;
    background-color: white;
    z-index: 1000;
  }
  .user-sliding-overlay {
    transform: translateX(-100%);
    visibility: hidden;
    width: 100vw;
    height: 100vh;
    z-index: 5050;
    background-color: rgba(0, 0, 0, 0.27);
    transition: all 0.3s ease;
  }

  .profile-dashboard-content,
  .user-wrapper,
  .other-user-links-content {
    padding: 20px;
  }
  .user-wrapper {
    width: 100%;
  }
  .user-sign-out-btn {
    width: 340px;
    height: 41px;
  }

  .full-name-username {
    width: 100%;
  }
  .user-full-name-x-icon {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .user-slide-x-icon {
    width: 15px;
    height: 15px;
    cursor: pointer;
  }
  .user-sliding-overlay-active {
    transform: translateX(0);

    opacity: 1;

    visibility: visible;
  }
  .filter-section {
    display: flex;
    align-items: center;
    padding: 0;
    width: 100%;
    background-color: transparent;
    /* height: 59px; */
    height: auto;
    border-radius: 10px;

    /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11); */
  }
  .mobile-results-found {
    width: 110px;
    display: flex;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-text);
    text-wrap: nowrap;
    margin-bottom: 10px;
    /* margin-bottom: 7px; */
  }
  .filter-side-span {
    display: none;
  }
  .filter-group {
    width: 35px;
  }
  .results-found {
    display: none;
  }
  .mobile-search-icon-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
  }
  .mobile-search-details {
    display: flex;
    gap: 6px;
    /* flex-direction: column; */
  }
  .mobile-search-title {
    text-wrap: nowrap;
  }
  .mobile-search-title,
  .mobile-search-location {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
  }
  /* .mobile-search-location {
    font-size: 0.8125rem;
    color: var(--color-text);
  } */
  .pagination-wrapper {
    padding: 0;
    left: 0;
    right: 0;
    top: calc(100dvh - 19%);
  }
  .mobile-search-overlay {
    width: 100vw;
    height: 100vh;
    position: fixed;
    visibility: hidden;
    transform: translateX(-100%);
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.43);
    transition: all 0.3s ease;
  }
  .mobile-search-overlay-active {
    visibility: visible;
    transform: translateX(0);
  }

  .mobile-search-container {
    width: 100vw;
    height: 418px;
    background-color: white;
  }
  .mobile-search-heading-x {
    padding: 20px;

    border-bottom: 1px solid rgba(232, 232, 232, 1);
  }
  .mobile-search-heading-x > img {
    width: 12px;
    height: 12px;
  }
  .mobile-search-heading-x > h2 {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-medium);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
  }

  .mobile-search-inputs-tags {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;
    padding: 20px;
  }
  .mobile-search-input-container,
  .mobile-search-location-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    position: relative;
    border: 1px solid rgba(181, 196, 214, 1);
  }
  .mobile-search-icon-input,
  .mobile-location-icon-input {
    padding: 14px;
    display: flex;
    width: 100%;
    gap: 8px;
  }
  .mobile-search-input {
    border: none;
    width: 100%;
    outline: none;
  }
  .mobile-search-input::placeholder {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    color: rgba(123, 124, 129, 1);
  }
  .mobile-search-mic--container {
    display: flex;
    gap: 8px;
  }
  .mobile-search-btn {
    width: 100%;
    max-width: 100%;
    height: 40px;
    border: none;
    color: white;
    background-color: var(--color-primary);
    border-radius: 5px;
  }
  .mobile-mic {
    width: 44px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background-color: var(--color-primary);
  }
  /* .mobile-search-pill-container {
    max-width: 376px;
  } */
  .mobile-area-below-search-input--wrapper,
  .mobile-area-below-location-input--wrapper {
    border: 1px solid rgba(232, 232, 232, 1);
    z-index: 1050;
    width: 100%;
  }
  .mobile-area-below-search-input--wrapper,
  .mobile-area-below-location-input--wrapper {
    width: 100.5%;
    top: 56px;
    background-color: white;
    position: absolute;
    border-radius: 5px;
  }
  .searches-heading {
    padding: 14px;
    margin: 0;
  }
  .searches,
  .locations {
    min-height: 25px;
    padding: 0px 14px 0px 14px;
  }
  .searches:hover {
    background-color: white;
  }
  .locations:hover {
    background-color: white;
  }
  .mobile-area-below-search--input,
  .mobile-area-below-location--input,
  .recent-location-searches {
    width: 100%;
  }
  .searches--common-container,
  .location--common-container {
    margin-top: 0px;
    gap: 5px;
    padding-bottom: 14px;
  }
  .location--common-container,
  .locations {
    width: 100%;
  }
  .location--common-container {
    padding-top: 14px;
  }
  .search-details,
  .location-details {
    display: flex;

    flex-wrap: nowrap;
    max-width: 270px;
    text-wrap: nowrap;
    cursor: pointer;
  }

  .recent-saved-toggle {
    padding: 14px;
  }
  .subjects-location {
    overflow: hidden;

    text-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;

    text-overflow: ellipsis;
  }
  /* .mic-modal-content {
    position: fixed;
    min-width: 100vw;
    min-height: 455px;
    border-radius: 0;
    top: 0;
  } */
  .mobile-mic-content {
    padding: 20px;
  }
  .mobile-mic-icon-container {
    width: 70px;
    height: 70px;
    border: none;
    border-radius: 50%;
    background-color: var(--color-primary);
  }
  .mobile-mic-heading-btn {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-medium);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);

    width: 100%;
    height: 100%;
  }
  .mobile-mic-btn-container {
    height: 220px;
  }
  .mobile-mic-back-btn {
    gap: 5px;
  }
  .mobile-mic-back-btn > img {
    width: 7px;
  }
  .mobile-mic-back-btn {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
  }
  .mobile-mic-back-btn > span {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: capitalize;
  }
  .general-globe-icon {
    display: none;
  }
  .mobile-globe-icon {
    display: block;
  }
  .mobile-lang-curr-x-icon {
    display: block;
  }
  .language-currency-drop-down {
    bottom: 0;
    top: auto;
    height: 240px;
    left: 0;

    width: 100vw;
    transform: translateY(100%);
    z-index: 1050;
  }
  .mobile-lang-curr-drop-down--active {
    transform: translateY(0%);
  }
  .show-map-list-btn {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    text-wrap: nowrap;
    padding: 9px;
    top: calc(100dvh - 11.5%);
    left: 2px;
    z-index: 1000;
    height: 27px;
    border-radius: 3px;
    border: none;
    background-color: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-default);
  }
  .pagination-container {
    height: 50px;
    gap: 0px;
  }
  .pagination-button {
    padding: 0;
  }
  .card-container-wrapper {
    padding-bottom: 30px;
  }
  .message-content {
    max-width: 260px;
  }
  .message-txt {
    max-width: 200px;
  }

  .cart-window,
  .cart-items-list {
    width: 100vw;
  }

  .checkout-summary-note {
    text-wrap: wrap;
  }
  .cart-product-total-price {
    align-self: self-end;
    margin-left: auto;
    margin-bottom: 7px;
  }
  .search-results-section-slide {
    transform: translateX(0);
  }
  .sort-span {
    display: none;
  }
  .apply-filter-button {
    bottom: 100px;
  }
  .filter-group-mobile {
    display: none;
  }
  .show-map-list-btn {
    display: none;
  }
}
@media (max-width: 400px) {
  .cart-total-wrapper,
  .slide-view-all-msg {
    bottom: 60px;
  }
}

/* --- Medium Devices (e.g., landscape tablets, small desktops) --- */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 16px;
  }
  .area-below-location-input--wrapper,
  .expanded-area-below-location-input--wrapper {
    right: 0;
  }
  .map-display {
    display: none;
    /* position: fixed; */
    /* top: auto; */
    /* bottom: 7%; */
    /* min-height: 100dvh; */
    max-width: 100%;
    /* left: 0; */
    margin: 0;
    width: 100vw;
  }
  .mobile-content-wrapper-padding {
    padding-bottom: 60px;
  }
  .mobile-search-container {
    display: none;
  }
  .card-container-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
    column-gap: 10px;
    margin-bottom: 50px;
  }
  .search-page-search-results {
    width: 100%;
  }
  .card-container {
    width: 100%;
    margin: 0;
  }
  .show-map-list-btn {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-small);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    text-wrap: nowrap;
    padding: 9px;
    top: calc(100dvh - 9%);
    left: 30px;
    z-index: 1000;
    height: 27px;
    border-radius: 3px;
    border: none;
    background-color: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-default);
  }
  .pagination-wrapper {
    padding: 0;
    left: 0;
    right: 0;
    top: calc(100dvh - 18%);
  }
  .search-results-display {
    flex-direction: column;
  }

  .tags-wrapper {
    width: 100%;

    overflow: hidden;
  }
  .switch-map-list-mobile {
    display: none;
  }
}
/* media queries for tags section to not break layout */
@media (min-width: 952px) and (max-width: 991px) {
  .tags-section {
    max-width: 420px;
  }
}
@media (min-width: 910px) and (max-width: 951px) {
  .tags-section {
    max-width: 400px;
  }
}
@media (min-width: 874px) and (max-width: 909px) {
  .tags-section {
    max-width: 380px;
  }
}
@media (min-width: 860px) and (max-width: 873px) {
  .tags-section {
    max-width: 360px;
  }
}
@media (min-width: 790px) and (max-width: 859px) {
  .tags-section {
    max-width: 340px;
  }
}
@media (min-width: 768px) and (max-width: 790px) {
  .tags-section {
    max-width: 310px;
  }
}
@media (min-width: 731px) and (max-width: 767px) {
  .tags-section {
    max-width: 670px;
  }
}
@media (min-width: 730px) and (max-width: 750px) {
  .tags-section {
    max-width: 650px;
  }
}
@media (min-width: 721px) and (max-width: 731px) {
  .tags-section {
    max-width: 620px;
  }
}
@media (min-width: 710px) and (max-width: 720px) {
  .tags-section {
    max-width: 610px;
  }
}
@media (min-width: 690px) and (max-width: 711px) {
  .tags-section {
    max-width: 600px;
  }
}
@media (min-width: 660px) and (max-width: 691px) {
  .tags-section {
    max-width: 590px;
  }
}
@media (min-width: 627px) and (max-width: 659px) {
  .tags-section {
    max-width: 550px;
  }
}
@media (min-width: 602px) and (max-width: 626px) {
  .tags-section {
    max-width: 530px;
  }
}
@media (min-width: 572px) and (max-width: 601px) {
  .tags-section {
    max-width: 500px;
  }
}
@media (min-width: 545px) and (max-width: 571px) {
  .tags-section {
    max-width: 470px;
  }
}
@media (min-width: 513px) and (max-width: 544px) {
  .tags-section {
    max-width: 440px;
  }
}
@media (min-width: 480px) and (max-width: 512px) {
  .tags-section {
    max-width: 410px;
  }
}
@media (min-width: 449px) and (max-width: 479px) {
  .tags-section {
    max-width: 390px;
  }
}
@media (min-width: 418px) and (max-width: 448px) {
  .tags-section {
    max-width: 370px;
  }
}
@media (min-width: 387px) and (max-width: 417px) {
  .tags-section {
    max-width: 330px;
  }
}
@media (min-width: 356px) and (max-width: 386px) {
  .tags-section {
    max-width: 320px;
  }
}
@media (min-width: 355px) and (max-width: 385px) {
  .tags-section {
    max-width: 310px;
  }
}
@media (max-width: 400px) {
  .tags-section {
    max-width: 320px;
  }
}

/* --- Extra Large Devices (e.g., large desktops) --- */
@media (min-width: 993px) {
  body {
    font-size: 18px;
  }
  .mobile-search-container {
    display: none;
  }
  .tags-section {
    max-width: 509px;
  }
  .show-map-list-btn {
    display: none;
  }
  .pagination-wrapper {
    justify-content: start;
  }
  .switch-map-list-mobile {
    display: none;
  }
}
/* latest search page css */
.auto-search-suggestion {
  font-weight: 400;
  font-size: 18px;
  color: var(--color-text);
  cursor: pointer;
}
.auto-search-suggestion:hover {
  color: var(--color-primary);
}
.auto-populated-searches-container {
  max-height: 200px;
  overflow-y: auto;
}
.default-search-results-text {
  width: 538px;
  font-size: 3rem;
  font-weight: 400;
  color: var(--color-text);
}

.mic-button {
  transition: transform 0.3s ease;
}

/* Animation for the listening state */
.mic-button.listening {
  background-color: var(--color-primary);
  animation: pulse-glow 1.5s infinite;
}
@keyframes pulse-glow {
  0%,
  100% {
    /* transform: scale(1); */
    visibility: hidden;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    transform: scale(1.1);
    visibility: visible;
    box-shadow: 0 0 0 15px rgba(34, 197, 94, 0);
  }
}
#map,
#map2 {
  width: 100%;
  height: 100vh;

  /* margin-top: 20px; */
}

/* Style for a custom message box instead of alert */

/* Custom popup styling to match the user's image */
.custom-popup .leaflet-popup-content-wrapper {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  padding: 15px;
}

/* This CSS hides the popup tip (the small arrow at the bottom) */
.custom-popup .leaflet-popup-tip-container,
.custom-popup .leaflet-popup-tip {
  display: none;
}

.custom-popup .leaflet-popup-content {
  margin: 0;
  min-width: 250px;
  color: #333;
}

.custom-popup .leaflet-popup-close-button {
  color: #333;
  font-size: 20px;
  top: 8px;
  right: 8px;
}

.custom-popup .header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  position: relative;
}

.custom-popup .profile-pic {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

.custom-popup .details {
  flex-grow: 1;
}

.custom-popup h3 {
  margin: 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: #111;
}

.custom-popup .rating {
  display: flex;
  align-items: center;
  color: #555;
  font-size: 0.9rem;
}

.custom-popup .star-icon {
  color: #fdd835;
  margin-right: 5px;
  font-size: 1.1rem;
}

.custom-popup .info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.custom-popup .info-text {
  display: flex;
  font-family: 'Times New Roman', Times, serif;
  align-items: center;
  font-size: 0.9rem;
}

.custom-popup .status-open {
  font-weight: bold;
}

.custom-popup .buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.custom-popup .contact-btn,
.custom-popup .directions-btn {
  width: 48%;
  padding: 10px;
  font-family: 'Times New Roman', Times, serif;
  border-radius: 8px;
  font-weight: normal;
  cursor: pointer;
  transition: background-color 0.2s;
}

.custom-popup .contact-btn {
  background-color: var(--color-primary);
  color: white;
  border: none;
}

.custom-popup .contact-btn:hover {
  background-color: #0056b3;
}

.custom-popup .directions-btn {
  background-color: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  text-wrap: nowrap;
}

.custom-popup .directions-btn:hover {
  background-color: #f0f8ff;
}
.sort-group {
  margin-right: 2px;
}
.sort-icon {
  width: 17px;
}
.filter-sort-group {
  position: relative;
  user-select: none;
}
.results-sorting-options-wrapper {
  background-color: white;
  position: absolute;
  border-left: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  border-right: 1px solid var(--color-divider);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);

  transition: all 0.3s ease;
  top: 37px;
  /* right: 98px; */
}
.results-sorting-option {
  font-size: 18px;
  border-top: 1px solid var(--color-divider);
  text-wrap: nowrap;
  padding: 5px 10px;
  cursor: pointer;
}
.results-sorting-option:hover {
  background-color: var(--hover-bg-light);
}
.search-results-section-slide {
  transform: translateX(-100%);
}
/* spinner css */
.spinner-container {
  width: 528px; /* Changed width to 528px */
  height: 200px; /* Fixed height */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid rgba(0, 0, 0, 0.1); /* Subtle dark border for light mode */
  background-color: #ffffff; /* White background for the container */
  border-radius: 16px; /* More rounded corners */
}

/* The actual spinner element */
.spinner {
  width: 120px; /* Size of the spinner circle */
  height: 120px;
  border-radius: 50%; /* Make it a perfect circle */
  position: relative;
}

/* Pseudo-element for the single animating arc with fading effect */
.spinner::before {
  content: '';
  position: absolute;
  /* Adjust position and size to cover the parent's border area */
  top: -4px; /* Adjusted offset for thinner border */
  left: -4px; /* Adjusted offset for thinner border */
  width: calc(100% + 8px); /* Adjusted width for thinner border */
  height: calc(100% + 8px); /* Adjusted height for thinner border */
  border-radius: 50%;
  box-sizing: border-box; /* Include padding and border in element's total width/height */

  /* Use conic-gradient for the arc and its fade */
  /* The arc now spans 180 degrees (half circumference) with fade-in and fade-out. */
  background: conic-gradient(transparent 0deg, transparent 0deg, /* Start of the invisible part */ hsl(220, 90%, 55%) 20deg, /* Arc fades in from 0deg to 20deg */ hsl(220, 90%, 55%) 160deg, /* Solid part of the arc from 20deg to 160deg */ transparent 180deg, /* Arc fades out from 160deg to 180deg */ transparent 360deg /* Rest of the circle remains transparent */);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%; /* Ensure gradient covers the entire pseudo-element */

  /* This is the key for the line thickness and making the gradient appear as a ring. */
  -webkit-mask: radial-gradient(circle at center, transparent calc(50% - 4px), /* Inner transparent part for line thickness */ black calc(50% - 2px), /* Start of the visible line */ black calc(50% + 2px), /* End of the visible line */ transparent calc(50% + 4px) /* Outer transparent part */);
  mask: radial-gradient(circle at center, transparent calc(50% - 4px), black calc(50% - 2px), black calc(50% + 2px), transparent calc(50% + 4px));

  /* Apply an initial rotation to position the arc at the top,
               then apply the continuous spin animation. */
  transform: rotate(-90deg); /* Start the arc from the top */
  animation: spin 1.2s linear infinite;
  transform-origin: center center; /* Ensure rotation is around the center */
}

/* Keyframes for forward rotation */
@keyframes spin {
  0% {
    transform: rotate(-90deg);
  } /* Start animation from the top */
  100% {
    transform: rotate(270deg);
  } /* Rotate 360 degrees from start position */
}
/* styling for directions section */
.map-directions-display {
  width: inherit;
  height: inherit;
  position: relative;
}
.go-to-marker-btn {
  position: absolute;
  z-index: 1000;
  top: 30px;
  left: 10px;
  height: 36px;
  background-color: white;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
  border: 1px solid var(--color-divider);
}
.go-to-marker-img {
  height: 20px;
  width: 50px;
}
.directions-steps-container {
  position: absolute;
  z-index: 1000;
  top: 30px;
  right: 10px;
  height: 36px;
  width: 96px;
  background-color: white;
  border: 1px solid var(--color-divider);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
}
.show-steps-btn {
  background-color: transparent;
  border: none;
  text-wrap: nowrap;
}
.steps-container {
  position: absolute;
  transform: translateX(100%);
  visibility: hidden;
  top: 36px;
  right: 0px;
  width: 300px; /* Adjust width as needed */
  height: 300px;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px;
  scrollbar-width: thin;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Ensure it's on top of the map tiles */
}
.steps-container-slideIn {
  transform: translateX(0);
  visibility: visible;
}
.steps-container h2 {
  margin-top: 0;
  font-size: 1.2em;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.steps-container ol {
  padding-left: 20px;
  list-style-type: decimal;
}
.steps-container li {
  margin-bottom: 8px;
  line-height: 1.4;
  color: #555;
}

.location-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
  gap: 1rem; /* gap-4 */
  margin-bottom: 1.5rem; /* mb-6 */
}

.location-card {
  color: #ffffff; /* text-white */
  padding: 1.5rem; /* p-6 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  cursor: pointer; /* cursor-pointer */
  transition: background-color 0.3s ease-in-out; /* transition duration-300 */
}
.location-card.blue {
  background-color: #3b82f6;
} /* bg-blue-500 */
.location-card.blue:hover {
  background-color: #2563eb;
} /* hover:bg-blue-600 */
.location-card.green {
  background-color: #22c55e;
} /* bg-green-500 */
.location-card.green:hover {
  background-color: #16a34a;
} /* hover:bg-green-600 */
.location-card.purple {
  background-color: #a855f7;
} /* bg-purple-500 */
.location-card.purple:hover {
  background-color: #9333ea;
} /* hover:bg-purple-600 */
.location-card.red {
  background-color: #ef4444;
} /* bg-red-500 */
.location-card.red:hover {
  background-color: #dc2626;
} /* hover:bg-red-600 */
.location-card.yellow {
  background-color: #eab308;
} /* bg-yellow-500 */
.location-card.yellow:hover {
  background-color: #ca8a04;
} /* hover:bg-yellow-600 */
.location-card.indigo {
  background-color: #6366f1;
} /* bg-indigo-500 */
.location-card.indigo:hover {
  background-color: #4f46e5;
} /* hover:bg-indigo-600 */
.location-card.pink {
  background-color: #ec4899;
} /* bg-pink-500 */
.location-card.pink:hover {
  background-color: #db2777;
} /* hover:bg-pink-600 */
.location-card.teal {
  background-color: #14b8a6;
} /* bg-teal-500 */
.location-card.teal:hover {
  background-color: #0d9488;
} /* hover:bg-teal-600 */
.auto-populated-searches-container-mobile,
.auto-populated-locations-container-mobile {
  padding-left: 14px;
  max-height: 130px;
  overflow-y: auto;
  scrollbar-width: thin;
}

@keyframes micBlink {
  0% {
    opacity: 0.3;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.3;
    transform: scale(0.9);
  }
}

/* Class to apply the blinking animation */
.mic-listening {
  animation: micBlink 1.5s infinite ease-in-out;
  color: #ef4444; /* Red color for active state */
}

.ms-container {
  width: 100px;
  height: 30px; /* Changed from 50px to 40px */
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 20px; /* Changed from 25px to 20px (half of 40px) */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  cursor: pointer;
}
#msSelectedModuleName {
  font-size: 14px;
}
.ms-selected-display {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  color: #333;
  background-color: #f9f9f9;
  box-sizing: border-box;
  z-index: 2;
  border-radius: 20px; /* Changed from 25px to 20px */
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.ms-absolute-wrapper {
  position: absolute;
  top: 105%;
  left: 50%;
  transform: translateX(-50%);
  height: 40px; /* Changed from 50px to 40px */
  width: max-content;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 20px; /* Changed from 25px to 20px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  padding: 0 8px;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}

.ms-container.ms-expanded {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.ms-container.ms-expanded .ms-absolute-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ms-module-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  width: 100%;
  justify-content: space-around;
}

.ms-module-item {
  padding: 2px 10px;
  color: #555;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  border-radius: 20px; /* Changed from 25px to 20px */
  white-space: nowrap;
  margin: 0 4px;
}

.ms-module-item:hover {
  background-color: #e8e8e8;
  color: #333;
}
@media (min-width: 360px) and (max-width: 767px) {
  .ms-module-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .ms-absolute-wrapper {
    height: fit-content;
    padding: 12px 0px;
  }
  .ms-module-item {
    width: auto; /* Allow the width to shrink to the content */
    text-align: left; /* Align the text to the left */
  }
  .distance-span,
  .mobile-search-location {
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
  }
  .mobile-search-location {
    max-width: 110px;
  }
  .results-sorting-options-wrapper {
    right: 0;
    z-index: 1000;
  }
}
/* The spinner container, absolutely positioned to cover the parent */
#map-spinner-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7); /* Equivalent to Tailwind's bg-white/70 */
  backdrop-filter: blur(4px); /* Equivalent to Tailwind's backdrop-blur-sm */
  z-index: 2000;
}

/* The spinner's visual style */
.map-spinner {
  width: 70px;
  height: 70px;
  border: 5px solid #e5e7eb; /* Equivalent to Tailwind's border-gray-200 */
  border-top-color: #3b82f6; /* Equivalent to Tailwind's border-blue-500 */
  border-radius: 50%;
  animation: map-spin 1s linear infinite;
}

/* The animation for the spinner */
@keyframes map-spin {
  to {
    transform: rotate(360deg);
  }
}
.mobile-results-found,
.mobile-search-title,
.mobile-search-location {
  color: #2d3748;
  padding: 5px;
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
/* --- Custom Modal Styling to override Bootstrap defaults --- */
.module-selector-modal .modal-content {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.module-selector-modal .modal-title {
  font-size: 1.2em;
  font-weight: 700;
  color: #333;
}

.module-selector-modal .modal-body {
  padding-top: 0;
}

.module-selector-modal-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 15px;
  color: #555;
  font-size: 14px;
  font-weight: 600;
  background-color: #f0f2f5;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-decoration: none; /* For bootstrap grid links */
}

.module-selector-modal-item:hover {
  background-color: #e8e8e8;
  transform: translateY(-2px);
}
.adi-modules-switch-list {
  padding-top: 20px;
}
.center-adi-modules {
  display: flex;
  align-items: center;

  gap: 5px;
  width: 100%;
}
@media (min-width: 360px) and (max-width: 767px) {
  .filter-group {
    padding: 0;
    border: none;
    height: 25px;
    background-color: white;
  }
  .map-display {
    position: fixed;
    min-width: 100vw;
    min-height: 100vh;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
  }
  .filter-section {
    z-index: 500;
  }
  .leaflet-control-zoom {
    /* bottom: 50px !important;
    right: 10px !important; */
    display: none;
  }
  /* .main-header {
    width: 100vw !important;
  } */
  body {
    padding-top: 60px;
  }
  #mainHeader {
    position: fixed;
    width: 100%;
  }
  .go-to-marker-btn {
    left: 20px;
  }
  .directions-steps-container {
    right: 20px;
  }
  .go-to-marker-btn,
  .directions-steps-container {
    top: 93px;
  }

  #switch-map-list-mobile-btn {
    margin-left: 1px;
    width: fit-content;
    padding: 0px 10px;
  }
  #switch-map-list-mobile {
    width: 15px;
  }
}
@media (min-width: 360px) and (max-width: 573px) {
  .center-adi-modules {
    display: flex;

    justify-content: flex-start;
    width: 100%;
    text-wrap: nowrap;
  }
  .module-selector-modal-item {
    width: 100%;
    padding-left: 40%;
  }
}
@media (min-width: 767px) {
  .custom-module-modal-container {
    margin-top: 200px;
  }
}
/* modified mobile search bootstrap window css */
@media (max-width: 768px) {
  .globe-icon2 {
    display: block !important;
  }
  #mobile-globe-icon1 {
    display: none !important;
  }
  .header-right .globe-icon {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .globe-icon2 {
    display: none !important;
  }
  /* .globe-icon1 img {
    display: block !important;
  } */
}

#moduleSelectorModal .module-selector-modal-item {
  padding: 10px !important;
}

@media (max-width: 767px) {
  #moduleSelectorModal .center-adi-modules {
    flex-direction: column;
  }
}
/* end */
/* Styling for the Homepage */
/* Write all your styling in this style.css */

/* -----------------------------------------
  RESPONSIVENESS
  Please write ALL your responsive code 
  under this single section only.
  Avoid spreading media queries throughout 
  different sections.
  
  Guidelines:
  - Limit the number of breakpoints; use only necessary ones.
  - Avoid using excessively large margins or paddings,
    as this often leads to adding unnecessary breakpoints.
-------------------------------------------- */

/* General Styles */
html {
  font-size: 16px;
}

.homepage-content {
  width: 100vw;
  /* padding: 20px 90px 0px 90px !important; */
  height: fit-content;
  position: relative;

  /* background-color: blueviolet; */
}
.speed-searches-edit-group {
  width: 100%;
  padding: 10px;
}
.speed-searches-title {
  font-size: 25.2px;
  color: var(--color-primary);
  text-wrap: nowrap;
  font-weight: 600;
}
.edit-speed-searches-btn {
  font-size: 18px;
}
.edit-speed-searches-icon {
  width: 30px;
  height: 30px;
}
.speed-searches-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  padding: 25px 0px;
  /* max-width: 900px; */
  /* margin: auto; */
  /* max-height: 600px;
  overflow-y: auto; */
  overflow-x: hidden;
  justify-items: center;
  scrollbar-width: thin; /* Center cards within grid columns */
}

.speed-search-card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
  width: 312px;
  height: 70px; /* Adjusted height for better fit */
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid #e2e8f0;
}

.speed-search-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

.speed-search-icon-container {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.3s ease-in-out;
  background-color: #dbeafe; /* A light blue fallback */
}

.speed-search-icon {
  width: 46px;
  height: 46px;
  border-radius: 2px;
}

.speed-search-card-title {
  flex-grow: 1;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
  margin: 0;
}
#loading {
  font-size: 1.25rem;
  color: #4b5563;
}
.page-footer {
  margin-top: 50px;
  background-color: #083a76;
  padding: 40px 60px;
  width: 100vw;
  height: fit-content;
  color: white;
}
.page-footer-container {
  display: flex;
  width: 100%;
}
.footer-text-one {
  color: #eb841d;
  font-weight: 100;
}
.adi-footer-about-section {
  display: flex;
  flex-direction: column;
}
.adi-one-footer-text {
  margin: 0;
  font-weight: 400;
}
.adi-footer-description {
  max-width: 350px;
  font-size: 16px;
}
.page-footer-link {
  color: white;
  font-weight: 300;
}
.page-footer-link:hover {
  color: #eb841d;
}
.footer-link-group-titles {
  color: #eb841d;

  font-size: 20px;
  padding: 10px 0px;
  font-weight: 600;
}
.footer-copyright-text {
  margin-top: 30px;
  font-weight: 100;
  color: #eb841d;
}
/* Translator css */

/* Keyframes for pulse effects */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}
@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}
.translator-animate-pulse-red {
  animation: pulse 1.5s infinite;
}
.translator-animate-pulse-green {
  animation: pulse-green 1.5s infinite;
}

/* Main app container styling */
.translator-open-modal-btn {
  background-color: #2563eb;
  color: white;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease-in-out;
  border: none;
  cursor: pointer;
}
.translator-open-modal-btn:hover {
  background-color: #1d4ed8;
}

/* Modal styling */
.translator-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: 1100;
}
.translator-modal-overlay.translator-active {
  opacity: 1;
  visibility: visible;
}

.translator-modal-content {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 1.5rem;
  width: 100%;
  max-width: 40rem;
  max-height: 90vh; /* Prevents overflow on small screens */
  overflow-y: auto; /* Adds a scrollbar if content overflows */
  position: relative;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.translator-modal-overlay.translator-active .translator-modal-content {
  transform: scale(1);
  opacity: 1;
}

/* Modal header styling */
.translator-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
.translator-modal-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
}
.translator-close-modal-btn {
  color: #9ca3af;
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 1;
  transition: color 0.2s ease-in-out;
  border: none;
  background: none;
  cursor: pointer;
}
.translator-close-modal-btn:hover {
  color: #4b5563;
}

/* Form and input styling */
.translator-message-box {
  padding: 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  text-align: center;
  display: none;
}
.translator-message-box.translator-info {
  background-color: #dbeafe;
  color: #1e40af;
}
.translator-message-box.translator-danger {
  background-color: #fee2e2;
  color: #991b1b;
}
.translator-message-box.translator-success {
  background-color: #d1fae5;
  color: #065f46;
}

.translator-language-selectors {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.translator-language-selectors > div {
  flex: 1;
}
.translator-language-selectors label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.translator-language-selectors select {
  width: 100%;
  padding: 0.625rem;
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.translator-language-selectors select:focus {
  outline: 2px solid #3b82f6;
  border-color: #3b82f6;
}

.translator-switch-btn {
  background-color: #e5e7eb;
  color: #4b5563;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  margin-bottom: 0.25rem;
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
  border: none;
  cursor: pointer;
}
.translator-switch-btn:hover {
  transform: rotate(180deg);
}

.translator-mic-section {
  text-align: center;
}
.translator-mic-section p {
  color: #374151;
  margin-bottom: 0.5rem;
}
.translator-mic-btn {
  background-color: var(--color-primary);
  color: white;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.875rem;
  margin: 0 auto;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease-in-out;
  border: none;
  cursor: pointer;
}
.translator-mic-btn:hover {
  background-color: var(--color-primary-accent);
}
.translator-mic-btn.translator-active {
  background-color: #22c55e;
}

textarea {
  width: 100%;
  min-height: 5rem; /* Allow text boxes to be flexible */
  padding: 1rem;
  background-color: #f3f4f6;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  outline: none;
  resize: none;
}

.translator-result-section label {
  display: block;
  color: #374151;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.translator-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.translator-controls audio {
  width: 100%;
  display: none;
}
.translator-controls button,
.translator-controls a {
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.translator-play-audio-btn {
  background-color: #22c55e;
  color: white;
  display: none;
}
.translator-play-audio-btn:hover {
  background-color: #16a34a;
}
.translator-download-link {
  background-color: #e5e7eb;
  color: #374151;
  display: none;
}
.translator-download-link:hover {
  background-color: #d1d5db;
}

/* ends here */
@media (min-width: 360px) and (max-width: 767px) {
  .homepage-content {
    width: 100vw;
    padding: 20px !important;
    height: fit-content;
    position: relative;

    /* background-color: blueviolet; */
  }
  .speed-search-card {
    width: 100%;
    height: 50px;
    padding: 10px;
    gap: 8px;
  }

  .speed-searches-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .speed-search-icon-container {
    width: 30px;
    height: 30px;
  }

  .speed-search-icon {
    width: 26px;
    height: 26px;
  }

  .speed-search-card-title {
    font-size: 14px;
  }
  .page-footer {
    margin-bottom: 60px;
  }
  .page-footer-container {
    flex-direction: column;
  }
  .footer-copyright-text {
    font-size: 10px;
    font-weight: 600;
  }
  .expanded-search-bar-content--wrapper-container {
    display: none;
  }
}
@media (min-width: 993px) {
  .page-footer-container {
    gap: 150px;
  }
  .speed-search-card {
    width: 100%;
  }
  .speed-searches-container {
    padding-left: 100px;
    padding-right: 100px;
  }
  .edit-speed-searches-icon {
    margin-right: 80px;
  }
  .edit-speed-searches-icon {
    position: absolute;
    top: -50px;
    right: 40px;

    z-index: 1100;
  }
}
@media (min-width: 1080px) and (max-width: 1400px) {
  .speed-search-card {
    width: 100%;
  }
  .speed-searches-container {
    padding: 30px;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1079px) {
  .speed-search-card {
    width: 100%;
  }
  .speed-searches-container {
    padding: 50px;
    grid-template-columns: repeat(2, 1fr);
  }
}
/* styling for utilites modal */
/* Styling for the button that opens the modal */
.adi--utilities-opener {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background-color: #007bff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.adi--utilities-opener:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

/* Base modal styling - hidden by default */
.adi--modal {
  display: none;
  position: fixed;
  z-index: 1100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Modal content styling */
.adi--modal-content {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  position: relative;
  max-width: 90%;
  width: 600px;
}

/* Show modal with fade-in animation */
.adi--modal.adi--show {
  display: flex;
  opacity: 1;
}

/* Hide modal with fade-out animation */
.adi--modal.adi--hide {
  opacity: 0;
}

.adi--modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.adi--modal-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.adi--modal-close {
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  color: #aaa;
  transition: color 0.2s;
}

.adi--modal-close:hover {
  color: #555;
}

/* Container for the icons using CSS Grid */
.adi--icons-container {
  display: grid;
  grid-gap: 20px;
}

/* Styling for each individual icon block */
.adi--icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  transition: background-color 0.2s, transform 0.2s;
}

.adi--icon-item:hover {
  background-color: #f8f9fa;
  transform: scale(1.05);
}

.adi--icon-item i {
  font-size: 50px;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.adi--icon-item p {
  margin: 0;
  font-size: 14px;
  color: #555;
}

/* --- MEDIA QUERIES --- */

/* Mobile devices (360px to 767px) */
@media (min-width: 360px) and (max-width: 767px) {
  .adi--modal-content {
    padding: 15px;
  }

  .adi--icons-container {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
  }

  .adi--icon-item i {
    font-size: 40px;
  }
}

/* Tablets (768px to 993px) */
@media (min-width: 768px) and (max-width: 993px) {
  .adi--icons-container {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
  }

  .adi--icon-item i {
    font-size: 45px;
  }
}

/* Desktops (994px and up) */
@media (min-width: 994px) {
  .adi--icons-container {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
  }

  .adi--icon-item {
    flex-basis: 22%; /* Not needed for grid, but kept for consistency */
  }
}
/* Styling for the fallback content */
.adi--section {
  background-color: #f1f5f9;
  color: #1e293b;
  line-height: 1.6;
  margin-top: 30px;
  padding: 0;
  display: block;
}

.adi--section .adi--container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}
.adi--container {
  border-radius: 16px;
}
/* Header Styling */
.adi--section .adi--header {
  background-color: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 1.5rem 0;
  text-align: center;
}

.adi--section .adi--header h1 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Main Content Section */
.adi--section .adi--main-content {
  padding: 3rem 0;
  text-align: center;
}

.adi--section .adi--main-content h2 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.25;
  color: #1e293b;
  margin-bottom: 1.5rem;
}

.adi--section .adi--main-content p {
  max-width: 64rem;
  margin: 0 auto;
  font-size: 1.125rem;
  color: #475569;
}

/* Value Proposition Cards */
.adi--section .adi--value-props {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 10px;
}

.adi--section .adi--card {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.adi--section .adi--card:hover {
  transform: scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.adi--section .adi--card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.adi--section .adi--card-icon {
  font-size: 3rem;
  margin-right: 1rem;
}

.adi--section .adi--card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.adi--section .adi--card p {
  font-size: 1.125rem;
  color: #475569;
}

/* Responsive design for tablets and desktops */
@media (min-width: 768px) {
  .adi--section .adi--value-props {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive design for larger desktops */
@media (min-width: 1024px) {
  .adi--section .adi--main-content h2 {
    font-size: 3rem;
  }
}
/* ADI FOOD PAGE STYLING */
.adi-food-search-bar--wrapper {
  margin-top: 60px;
  width: 100%;
}
.adi-food-search-form {
  position: relative;
}
.food-search-bar--container {
  display: flex;
  align-items: center;
  position: relative;
  width: 650px;
  height: 50px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  background-color: white;
  border-radius: 30px;
  padding-left: 25px;
}
.food-search-btn {
  position: absolute;
  right: 2px;
  top: 2px;
  height: 95%;
  border-radius: 0px 50px 50px 0px;
  width: 60px;
  border: none;
  background-image: linear-gradient(to right, #6a8cd4, #2e5dc0);
  transition: background-image 0.3s ease;
}
.food-search-btn:hover {
  background-image: linear-gradient(to right, #2e5dc0, #6a8cd4);
}
.adi-food-search-input {
  width: 490px;
  outline: none;
  border: none;
  font-size: var(--font-size-base);
  color: #374151;
  &::placeholder {
    color: #6b7280;
    font-size: 16px;
  }
}
.adi-food-search-suggestions-container {
  position: absolute;
  top: 60px;
  left: 20px;
  border-radius: 5px;

  width: 510px;
  padding: 10px;
  z-index: 10;
  box-shadow: var(--shadow-default);
  height: fit-content;
  background-color: white;
  max-height: 250px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.auto-search-suggestion {
  font-size: 18px;
}

/* styling for the cuisine seciton */
.adi-food-cuisines-container--wrapper {
  margin-top: 80px;
  width: 100%;
}
.adi-food-cuisines-container {
  display: grid;

  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.adi-restaurant-container {
  width: 100%;
  max-width: 900px;
  display: grid;
  padding: 20px;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.adi-food-modal-dialog {
  display: flex !important;

  justify-content: center !important;
}
.adi-food-modal-content {
  position: relative;
  min-width: 1200px !important;
  height: fit-content !important;
}
.adi-cuisine-card-outer {
  position: relative;
  /* width: 220px;
  height: 80px; */
  width: 312px;
  height: 70px;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all ease 0.3s;
  border: 1px solid #e2e8f0;

  cursor: pointer;
}
.adi-cuisine-card-outer:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

.cuisine-background {
  background-image: linear-gradient(to right, #f7d794, #c2a061);
}
.restaurant-background {
  background-image: linear-gradient(to right, #8bc34a, #4caf50);
}
.adi-cuisine-card-inner {
  position: absolute;
  /* top: 1px; */
  top: 0;
  /* left: 1px; */
  align-items: center;
  padding: 20px;
  /* width: calc(100% - 2px); */
  /* height: calc(100% - 10px); */
  height: 100%;
  width: 100%;
  gap: 15px;
  border-radius: inherit;
  background-color: white;
}
.adi-icon-container {
  flex-shrink: 0;

  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-radius: 50%; */
  border-radius: 12px;

  transition: all 0.3s ease-in-out;
  background-color: #dbeafe; /* A light blue fallback */
  overflow: hidden;
}

.adi-restaurant-icon {
  width: 46px;
  height: 46px;
  border-radius: 2px;

  object-fit: cover;
}
.adi-cuisine-name,
.adi-restaurant-name {
  margin-left: 10px;
  font-size: 18px;
  flex-grow: 1;
  font-weight: 700;
  color: #1f2937;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
}
.adi-restaurant-name {
  font-size: 20px;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avaiable-restaurant-indicator {
  position: absolute;
  right: -5px;
  top: -5px;

  height: 20px;
  width: 20px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background-color: #8b0000;
  border-radius: 50%;
}
.adi-food-map-container,
.food-map-directions-display {
  height: 600px; /* or any other fixed height */
  width: 100%;
  position: absolute;
  z-index: 2000;
  margin-bottom: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#mapFood {
  height: 100%;
  width: 100%;
}
#mapFoodDirections {
  height: 100%;
  width: 100%;
}
.food-map-directions-display {
  width: inherit;
  height: inherit;
  position: relative;
}
.food-go-to-marker-btn {
  position: absolute;
  z-index: 1000;
  top: 30px;
  left: 10px;
  height: 36px;
  background-color: white;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
  border: 1px solid var(--color-divider);
}
.food-show-list-btn {
  position: absolute;
  z-index: 1000;
  top: 30px;
  right: 110px;
  height: 36px;
  background-color: white;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
  border: 1px solid var(--color-divider);
}
.food-go-to-marker-img {
  height: 20px;
  width: 50px;
}
.food-directions-steps-container {
  position: absolute;
  z-index: 1000;
  top: 30px;
  right: 10px;
  height: 36px;
  width: 96px;
  background-color: white;
  border: 1px solid var(--color-divider);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.11);
}
.food-show-steps-btn {
  background-color: transparent;
  border: none;
  text-wrap: nowrap;
}

.food-steps-container {
  position: absolute;
  transform: translateX(100%);
  visibility: hidden;
  top: 36px;
  right: 0px;
  width: 300px; /* Adjust width as needed */
  height: 300px;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px;
  scrollbar-width: thin;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Ensure it's on top of the map tiles */
}
.steps-container-slideIn {
  transform: translateX(0);
  visibility: visible;
}
.food-steps-container h2 {
  margin-top: 0;
  font-size: 1.2em;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.food-steps-container ol {
  padding-left: 20px;
  list-style-type: decimal;
}
.food-steps-container li {
  margin-bottom: 8px;
  line-height: 1.4;
  color: #555;
}
@media (min-width: 993px) and (max-width: 1300px) {
  .adi-food-cuisines-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .adi-food-cuisines-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .adi-food-modal-content {
    min-width: 550px !important;
  }
}
@media (min-width: 360px) and (max-width: 600px) {
  .adi-food-cuisines-container--wrapper {
    margin-top: 10px;
    width: 100%;
    padding: 20px;
  }
  .adi-food-cuisines-container {
    width: 100%;

    grid-template-columns: repeat(2, 1fr);
  }
  .food-search-bar--container {
    max-width: 340px;
  }
  .adi-icon-container {
    width: 30px;
    height: 30px;
  }
  .adi-restaurant-icon {
    width: 26px;
    height: 26px;
  }
  .adi-food-search-input {
    /* width: 200px; */

    &::placeholder {
      color: #6b7280;
      font-size: 14px;
    }
  }
  .adi-cuisine-card-outer {
    width: 100%;
    height: 50px;
  }
  .adi-cuisine-card-inner {
    padding: 10px;
  }
  .adi-cuisine-name,
  .adi-restaurant-name {
    margin-left: 5px;
    font-size: 14px;
  }
  .adi-food-modal-content {
    min-width: 350px !important;
  }
}
@media (min-width: 601px) and (max-width: 767px) {
  .adi-food-cuisines-container {
    width: 100%;
    max-width: 500px;
    grid-template-columns: repeat(2, 1fr);
  }
  .adi-cuisine-card-outer {
    width: 100%;
    height: 60px;
  }
}

/* end */
.hidden {
  display: none;
}