/* ================================= */
/*  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;
}
@media (max-width: 768px) {
  .container {
    padding: 0;
  }
}
.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;
}
.top-cart-badge {
  position: absolute;
  bottom: -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,
  .adi-user-account-register-sign-in-btns {
    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: 180px;
  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: 100%;
    max-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;
  text-align: left;
}
.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: fit-content;
  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;
  padding: 0px 10px;
}
.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;
  padding-bottom: 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: 100;
  }
}
@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;
  }
}
/* styling for the ADI Restaurant menu list page */
.adi-restaurant-menu-cart-wrapper {
  width: 100vw;
  padding: 30px 80px 30px 80px;
  height: fit-content;
}
.adi-restaurant-menu-list-cart--container {
  background-color: white;
  justify-content: center;
  width: 100%;
  gap: 8px;
}
.adi-restaurant-menu-list--container {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  /* box-shadow: var(--shadow-default); */
  padding: 10px;
  max-height: 700px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.adi-restaurant-menu-cart--container {
  width: 800px;
  max-width: 500px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);

  max-height: 800px;
}
.adi-available-menu-cuisines {
  width: 100%;
}
.menu-cusines-container {
  flex-wrap: wrap;
  padding: 5px;
  height: 100%;
  max-height: 115px;
  overflow-y: auto;
  display: flex;
  gap: 8px;
  scrollbar-width: thin;
}
.adi-menu-list-cusine-variant {
  padding: 5px;
  border-radius: 4px;
  width: fit-content;
  cursor: pointer;
  font-weight: 500;
  /* border: 1px solid #0a0f17; */
  height: 30px;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.1s ease;
}
.adi-menu-list-cusine-variant:hover {
  outline: 1px solid var(--color-primary);

  transform: translateY(-1px);
}
.adi-menu-list-cusine-variant--selected {
  outline: 1px solid var(--color-primary);
}
.adi-available-cuisine-items--container {
  display: grid;
  column-gap: 12px;
  row-gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 10px;
  padding: 5px;
}
.adi-available-cuisine-items {
  position: relative;
  height: 320px;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--hover-bg-light);
}
.adi-available-cuisine-items > img {
  margin-top: 1px;
  margin-left: 1px;
  border-radius: 12px 12px 0px 0px;
  width: calc(100% - 2px);
  object-fit: cover;
  height: 200px;
}
.adi-cuisine-item-details-container {
  width: 100%;
  height: 100%;
  padding: 10px;
}
.cusine-item-name-desciption {
  height: 100%;
  justify-content: space-between;
}
.cuisine-item-name {
  position: relative;
  font-size: 22px;
  font-weight: 500;
  color: #4a6c84;
  cursor: pointer;
}
.cuisine-item-name-price-container {
  padding-right: 20px;
  padding-left: 20px;
  position: absolute;
  top: 168px;
  right: 1px;
  background-color: white;
  opacity: 0.9;
  border-radius: 6px 0px 0px 0px;
  z-index: 10;
}
.cuisine-item-price-quantity {
  position: absolute;
  width: 100%;
  padding-right: 20px;
  bottom: 10px;
}
.cuisine-item-price {
  font-size: 25px;
  color: #333333;
}
.cuisine-item-description {
  color: var(--color-text);
}
.food-icon {
  position: absolute;
  top: 5px;
  right: -18px;
  width: 16px;
  height: 16px;
  border: 2px solid;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.food-icon span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}
.veg {
  border-color: #27ae60;
}
.veg span {
  background: #27ae60;
}
.nonveg {
  border-color: #e74c3c;
}
.nonveg span {
  background: #e74c3c;
}
.cuisine-item-change-quantity {
  height: 37.5px;
  align-items: center;
  padding: 0px 10px 0px 10px;
  gap: 10px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  background-color: white;
}
.cuisine-item-quantity-plus-icon {
  width: 16px;
  cursor: pointer;
}
.cuisine-item-quantity-minus-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.cuisine-item-quantity {
  font-size: 22px;
}
/* Cart styling */
.divider-line {
  width: calc(100% - 2px);
  margin-left: 1px;
  border: 1px solid var(--color-divider);
}
.adi-restaurant-menu-cart--container > h2 {
  width: 100%;
  padding: 10px;
  margin-bottom: 0;
}
.adi-restaurant-cart--container {
  width: 100%;
  height: 100%;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
.adi-restaurant-cart-item-details {
  width: 100%;
  margin-left: 10px;
}
.adi-restaurant-cart-item-name {
  color: var(--color-primary);
  font-weight: 500;
}
.adi-restaurant-cart-item-restaurant {
  color: var(--color-text);
  font-size: 16px;
}
.adi-restaurant-cart-item {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid var(--color-divider);
  padding: 10px;
}
.adi-restaurant-cart-item-img--container {
  min-width: 80px;
  max-width: 80.01px;
  height: 80px;
  overflow: hidden;
  border-radius: 4px;
}
.restaurant-cart-bin-icon {
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.adi-restaurant-cart-item-img--container > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-cuisine-item-change-quantity {
  gap: 5px;
  width: 70px;
  height: 30px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  padding: 2px;
}
.adi-restaurant-cart-item-price {
  color: #333333;
}
.cart-item-change-quantity-remove {
  align-items: center;
}
.adi-restaurant-menu-cart--container {
  position: relative;
}
.restaurant-cart-total-section {
  border-top: 1px solid var(--color-divider);
  padding: 10px;
  position: absolute;
  width: 100%;
  bottom: 0;
  background-color: white;
}
.restaurant-cart-sub-prices {
  color: var(--color-text);
}
.restaurant-delivery-pickup-container {
  margin-top: 10px;
  margin-bottom: 10px;
}
.restaurant-cart-delivery-icon {
  width: 30px;
  height: 20px;
}
.restaurant-cart-deliver-pickup {
  gap: 20px;
}
.restaurant-cart-delivery-icon-container {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 5px 10px 5px 10px;
  gap: 5px;
  cursor: pointer;
}
.restaurant-cart-delivery-icon-container--selected {
  outline: 2px solid var(--color-primary);
}
.font-weight-bold {
  font-weight: 700;
}

.adi-menu-list-cusine-variant--selected {
  border: 2px solid #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.adi-restaurant-cart-item.slide-out {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.adi-cuisine-item-description.truncated {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adi-cuisine-item-description-wrapper {
  position: relative;
  padding-bottom: 20px;
}
.adi-more-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  background: none;
  border: none;
  color: #3b82f6;
  cursor: pointer;
  font-size: 0.8em;
  padding: 0;
  font-weight: bold;
}
.restaurant-cart-delivery-icon-container {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.restaurant-cart-delivery-icon-container--selected {
  background-color: #e0f2fe;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.restaurant-cart-delivery-icon-container--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.adi-menu-list-cusine-variant--selected {
  border: 2px solid #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.adi-restaurant-cart-item.slide-out {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.adi-cuisine-item-description.truncated {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adi-cuisine-item-description-wrapper {
  position: relative;
  padding-bottom: 20px;
}
.adi-more-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  background: none;
  border: none;
  color: #3b82f6;
  cursor: pointer;
  font-size: 0.8em;
  padding: 0;
  font-weight: bold;
}
.restaurant-cart-delivery-icon-container {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.restaurant-cart-delivery-icon-container--selected {
  background-color: #e0f2fe;
  border-radius: 20px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.restaurant-cart-delivery-icon-container--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.cart-checkout-btn-disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
.cart-checkout-btn-enabled {
  background-color: #3b82f6;
  cursor: pointer;
}
.restaurant-view-cart-btn {
  display: none;
}

@media (min-width: 360px) and (max-width: 767px) {
  .adi-available-cuisine-items--container {
    grid-template-columns: repeat(1, 1fr);
  }

  /* .adi-restaurant-menu-cart--container {
    display: none;
  } */
  .adi-restaurant-cart--container {
    max-height: 350px;
    padding-bottom: 200px;
  }
  .adi-restaurant-menu-cart--container {
    /* position: fixed; */
    /* bottom: 60px; */
    /* transform: translateX(100%); */
    max-width: 100%;
    background-color: white;
    z-index: 20;
    /* height: 100dvh; */

    /* max-height: calc(100dvh - 125px); */
  }
  .adi-restaurant-menu-cart-wrapper {
    padding: 20px;
  }

  /*
  .adi-restaurant-menu-cart--container-slide-in {
    transform: translateX(0);
    visibility: visible;
  }
  .restaurant-view-cart-btn {
    display: flex;
  } */
  /* .restaurant-view-cart-btn,
  .restaurant-hide-cart-btn {
    position: fixed;
    top: 65px;
    right: 20px;
    border: none;
    background-color: white;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  }
  .restaurant-hide-cart-btn {
    z-index: 40;
    right: 15px;
    top: 70px;
  } */
  .cuisine-item-name {
    font-size: 18px;
  }
  .cuisine-item-name-price-container {
    top: 174px;
  }
  .adi-restaurant-menu-cart--container {
    height: 100%;
    /* min-height: 600px; */
  }
  .restaurant-cart-total-section {
    padding: 30px;
  }
  .adi-more-btn {
    position: absolute;
    bottom: 10px;
    right: 0;
  }
}
@media (min-width: 360px) and (max-width: 400px) {
  .cuisine-item-name > span {
    max-width: 170px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
  }
}
@media (min-width: 768px) and (max-width: 993px) {
  .adi-restaurant-cart--container {
    max-height: 220px;
    padding-bottom: 50px;
  }
  /* .adi-restaurant-menu-cart--container {
    position: fixed;
    bottom: 0px;
    right: 0;
    transform: translateX(100%);
    max-width: 500px;
    background-color: white;
    z-index: 20;
    height: 100dvh;

    max-height: calc(100dvh - 60px);
    visibility: hidden;
    transition: all 0.3s ease;
  } */
  /* .adi-restaurant-menu-cart--container-slide-in {
    transform: translateX(0);
    visibility: visible;
  } */
  .adi-restaurant-menu-cart-wrapper {
    padding: 20px;
  }
  /* .restaurant-view-cart-btn {
    display: flex;
  } */
  /* .restaurant-view-cart-btn,
  .restaurant-hide-cart-btn {
    position: fixed;
    top: 65px;
    right: 10px;
    border: none;
    background-color: white;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  }
  .restaurant-hide-cart-btn {
    z-index: 40;
    right: 15px;
    top: 70px;
  } */
  .adi-restaurant-menu-cart--container {
    min-height: 600px;
  }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .adi-available-cuisine-items--container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 994px) {
  .restaurant-hide-cart-btn {
    display: none;
  }
  .adi-restaurant-menu-cart--container {
    height: 800px;
    max-height: 700px;
  }
}
/* nav-settings-drop-down stylings and extras */

.nav-settings-drop-down-container {
  position: fixed;

  width: auto;
  /* padding: 22px; */
  height: auto;
  z-index: 1000 !important;
}
.nav-settings-drop-down,
.account-settings-drop-down {
  width: auto;
  /* padding: 22px; */
  height: auto;
  display: flex;
  flex-direction: column;
  border-radius: 3px;
  box-shadow: var(--shadow-inset-light);
  background-color: white;
  box-shadow: var(--shadow-default);
}
.nav-settings-drop-down {
  position: relative;
}
.account-settings-drop-down {
  max-height: 410px;
  display: none;
  overflow-y: auto;
  position: absolute;
  left: 100%;

  /* Style the scrollbar track */

  /* Style the scrollbar thumb */
}
.account-settings-drop-down::-webkit-scrollbar {
  width: 5px;
  background-color: white;
}
.account-settings-drop-down::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0; /* Makes the thumb rounded */
}

.nav-settings-drop-down-option {
  display: flex;
  text-wrap: nowrap;
  align-items: center;
  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;
  padding: 8px 22px;
  font-size: 18px;
}
.nav-settings-drop-down-option:hover {
  color: black;
  font-size: 18px;
  background-color: var(--hover-bg-light);
}

.account-settings-arrow {
  margin-left: 8px;
}
.account-settings-arrow-active {
  transform: rotateZ(180deg);
}
.settings-tick-icon {
  width: 20px;
  margin-left: 8px;
}
@media (min-width: 360px) and (max-width: 767px) {
  .nav-settings-drop-down-container {
    bottom: 61px;
    left: 10px;
  }
  .nav-settings-drop-down-option {
    font-size: 14px;
  }
  .nav-settings-drop-down-option:hover {
    font-size: 14px;
  }
  .account-settings-drop-down {
    bottom: 0;
    max-height: 300px;
  }

  .membership-dropdown {
    top: 65px;
  }
  .default-page-dropdown {
    bottom: 0;
  }
  .qr-settings-dropdown {
    bottom: 0;
  }
}
@media (min-width: 768px) {
  .nav-settings-drop-down-container {
    top: 65px;
    right: 270px;
  }
  .membership-dropdown {
    top: 65px;
  }
  .default-page-dropdown {
    top: 100px;
  }
  .qr-settings-dropdown {
    top: 135px;
  }
}
/* Freight pages styling */
/* flatpickr styling */
.flatpickr-input {
  width: 150px;
  padding: 7px 2rem;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.flatpickr-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
/* Custom styling for the Flatpickr calendar to match the theme */
.flatpickr-calendar {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #3498db;
  border-color: #3498db;
}
.flatpickr-day.today.selected {
  background: #2980b9;
  border-color: #2980b9;
}
/* styling for the search-filter secitons */
.freight-search-filter-section {
  padding: 20px 0px;
  width: 100%;
}
.freight-search-section {
  gap: 10px;
  flex-direction: column;
}
.freight-search-date-group,
.freight-search-place-group {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  gap: 8px;
  height: fit-content;
  max-width: fit-content;
  padding: 10px 30px;
}
.freight-search-date-group > h5,
.freight-search-place-group > h5 {
  margin: 0;
}
.freight-search-button {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  gap: 8px;
  height: fit-content;
  max-width: fit-content;
  padding: 10px 30px;
  border: none;
  background-color: var(--color-primary);
  color: white;
  font-size: 18px;
}
.freight-listings-wrapper {
  width: 100%;
  padding: 20px 80px;
}
.freight-listings-container {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  padding: 20px;
  border-radius: 8px;
  background-color: var(--hover-bg-light);
}
/* Freight Cards Styling */
/* Card container styling */
.adi-freight-card-container {
  position: relative;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);

  width: 100%;
  padding: 1.5rem;
  color: #1f2937;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  cursor: pointer;
}
.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  z-index: 100;
  white-space: nowrap;
  display: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none; /* Make tooltip non-clickable */
}
.adi-freight-card-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Specific section styles */
.adi-freight-header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1rem;
}

.adi-freight-transport-type {
  font-size: 1.125rem;
  font-weight: 600;
  /* color: #3730a3; */
  color: var(--color-primary);
  max-width: 150px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.adi-freight-posted-date {
  font-size: 14px;
  color: var(--color-text);
}

.adi-freight-location-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.adi-freight-location-group {
  display: flex;
  flex-direction: column;
}

.adi-freight-location-group.start {
  align-items: flex-start;
}

.adi-freight-location-group.end {
  align-items: flex-end;
}

.adi-freight-location-name {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.adi-freight-location-label {
  font-size: 0.75rem;
  color: #6b7280;
}

.adi-freight-arrow-icon {
  color: #6366f1;
  width: 1.5rem;
  height: 1.5rem;
  transform: rotate(90deg);
}

/* Footer section styles */
.adi-freight-footer-section {
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adi-freight-status-group {
  display: flex;
  align-items: center;
}

.adi-freight-status-group > * + * {
  margin-left: 0.5rem;
}

.adi-freight-status-text {
  font-size: 0.75rem;
  color: #6b7280;
}

.adi-freight-status-value {
  font-size: 0.875rem;
  font-weight: 700;
}
.adi-freight-status-value-open {
  color: #16a34a;
}
.adi-freight-status-value-close {
  color: #dc3545;
}
.adi-freight-status-value-available {
  color: #eb841d;
}
.adi-freight-card-date {
  font-size: 0.75rem;
  color: var(--color-text);
}

/* Media query for desktop layout */
@media (min-width: 768px) {
  .adi-freight-arrow-icon {
    transform: rotate(0deg);
  }
}
.freight-listings-cards-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 12px;
  column-gap: 12px;
}
.freight-request-heading-filter-group {
  margin-bottom: 10px;
}
.freight-filter-btn {
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  background-color: white;
  border-radius: 3px;

  padding: 5px 10px;
}
.freight-filter-icon {
  width: 18px;
}
.freight-filter-section {
  position: relative;
  display: flex;
  gap: 8px;
}
.freight-filter-drop-down {
  position: absolute;
  right: 0px;
  top: 105%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);

  background-color: white;
  z-index: 10;
  border-radius: 2px;
}
.freight-filter-drop-down-option {
  font-weight: var(--font-weight-normal);

  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
  text-transform: capitalize;
  cursor: pointer;
  padding: 8px 22px;
  font-size: 18px;
}
.freight-filter-drop-down-option:hover {
  background-color: var(--hover-bg-light);
}
/* styling for freight details page */
.freight-detailed-view-section--wrapper {
  width: 100%;
  height: fit-content;
  padding: 80px;
}

.freight-detailed-view-section,
.freight-map-location-display {
  width: 100%;
  height: 100vh;
}
.freight-map-location-display {
  position: relative;
}
.freight-detailed-view-section {
  gap: 12px;
  margin-bottom: 150px;
  position: relative;
  flex-direction: row-reverse;
}
.freight-complete-details-section {
  width: 50%;
  height: 100%;
}
#freightMap {
  height: 100%;
  width: 100%;

  border-radius: 2px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Base card container styling */
.adi-freight-detailed-card-container {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  padding: 30px;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.talk-and-call-icons-freight {
  padding: 20px 40px;
  height: 50px;
}
.talk-and-call-icons {
  width: 18px;
  height: 18px;

  transition: all ease 0.3s;
  cursor: pointer;
}

/* Hover effect for all cards */
.adi-freight-detailed-card-container:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Base styling for the content layout */
.adi-freight-detailed-main-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.adi-freight-detailed-contact-info {
  display: flex;
  flex-direction: column;
  gap: 15px;

  margin-top: 20px;
}

.adi-freight-detailed-data-row {
  display: flex;
  flex-direction: column;
}

/* Separator styles */
.adi-freight-detailed-separator {
  width: 100%;
  height: 1px;
}

/* --- Design 4: "Bold & Colorful" --- */
.adi-freight-detailed-card-design-4 {
  background-color: #ffffff;
  color: #333;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.adi-freight-detailed-card-design-4 .adi-freight-detailed-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.adi-freight-detailed-card-design-4 .adi-freight-detailed-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

.adi-freight-detailed-card-design-4 .adi-freight-detailed-card-status {
  font-size: 0.8rem;
  font-weight: 700;
  color: #16a34a;
  background-color: #dcfce7;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.adi-freight-detailed-card-design-4 .adi-freight-detailed-data-label {
  font-size: 16px;

  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.adi-freight-detailed-card-design-4 .adi-freight-detailed-data-value {
  font-size: 16px;
  font-weight: 500;
  color: #374151;
  line-height: 1.4;
  word-wrap: break-word;
}

.adi-freight-detailed-card-design-4 .adi-freight-detailed-separator {
  background-color: #e5e7eb;
}
.freight-location-steps-btn {
  position: absolute;
  z-index: 1000;
  right: 10px;
  top: 10px;
  border: none;
  background-color: white;
  /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); */
  border: 2px solid var(--color-divider);
}
.freight-map-details-switch-btn {
  position: absolute;
  z-index: 10;
  left: 10px;
  top: 10px;
  border: none;
  background-color: white;

  border: 2px solid var(--color-divider);
}
.mapDetailBtnShadow {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.leaflet-routing-container {
  margin-top: 41px !important;
  display: none;
}
/* New entry creation */
.adi-btn-primary {
  background-color: var(--color-primary);
  border: none;
  color: white;
  font-size: 18px;
}
.adi-btn-secondary {
  font-size: 18px;
  border: none;
  background-color: var(--hover-bg-light);
}

.adi-btn-primary:hover {
  opacity: 0.9;
}

.adi-modal-content {
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  background-color: white;
}

.adi-modal-header {
  border-bottom: none;
}

.adi-modal-footer {
  border-top: none;
}

.adi-form-label {
  font-weight: 500;
}

.adi-card {
  border-radius: 0.75rem;
  border: 1px solid #e2e8f0;
  background-color: #fff;
}

.adi-switcher {
  display: flex;
  border-radius: 0.5rem;
  background-color: #f1f5f9;
  padding: 0.25rem;
  margin-bottom: 1rem;
}

.adi-switcher-btn {
  flex-grow: 1;
  text-align: center;
  padding: 0.5rem;
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

.adi-switcher-btn.active {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* New List styling */
@media (min-width: 1280px) {
  .freight-listings-cards-container {
    display: none;
  }
}
@media (max-width: 1279px) {
  .freight-list-listings-container {
    display: none;
  }
}
.freight-list-listings-container {
  gap: 10px;
}
.adi-freight-list-ext {
  width: 100%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  align-items: center;

  background-color: #fff;
  border-radius: 8px;
  padding: 10px 20px;
  color: #1f2937;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  cursor: pointer;
}
.adi-freight-list-ext:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.adi-freight-list-transport {
  font-size: 1.5rem;
  width: 300px;
  min-width: 299.99999px;
  font-weight: 600;
  /* color: #3730a3; */
  color: var(--color-primary);

  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.adi-freight-list-from-text,
.adi-freight-list-to-text {
  width: 150px;
  min-width: 149.9999px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-left: 22px;
  font-size: 1.125rem;

  font-weight: 700;
}
.adi-freight-list-to-text {
  margin-left: 40px;
}
.adi-freight-list-arrow-icon {
  margin-left: 22px;
}
/* Metadata Section */
.adi-list-metadata-section {
  display: flex;
  align-items: center;
  /* margin-left: auto; */
  font-size: 1rem;
}

.adi-list-metadata-section span {
  margin-left: 1rem;
}

.adi-list-status-pill {
  font-weight: 500;

  padding: 3px 10px;
  border-radius: 6px;
  margin-left: auto;
}
.adi-list-status-pill-open {
  color: #16a34a;
  background-color: #dcfce7;
}
.adi-list-status-pill-in-progress {
  color: #c98205;
  background-color: #fef3c7;
}

.adi-list-status-pill-completed {
  color: #2563eb;
  background-color: #dbeafe;
}

.adi-list-status-pill-default {
  color: #4b5563;
  background-color: #e5e7eb;
}
.talk-and-call-freight-btns {
  /* background-color: transparent;
  border: 1px solid var(--color-divider); */
  gap: 8px;
  font-size: 18px;
  /* border-radius: 8px;
  transition: all ease 0.3s;
  padding: 5px 10px; */
}
/* .talk-and-call-freight-btns:hover {
  transform: scale(1.1);
} */
.freight-search-modal-body {
  padding: 0 !important;
}

.freight-search-modal-header {
  padding: 10px 10px 0px 10px;
}
#date-range {
  width: fit-content;
}

.freight-map-details-switch-btn {
  display: none;
}
/* media queries here */
@media (min-width: 993px) and (max-width: 1300px) {
  .freight-listings-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  .freight-listings-cards-container {
    grid-template-columns: repeat(1, 1fr);
  }
  .freight-search-section {
    flex-direction: column;
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .freight-search-modal-btn {
    display: none;
  }
  .freight-listings-cards-container {
    grid-template-columns: repeat(1, 1fr);
  }
  .adi-freight-location-label {
    display: none;
  }
  .freight-listings-wrapper,
  .freight-detailed-view-section--wrapper {
    padding: 20px;
  }
  .adi-freight-header-section,
  .adi-freight-location-section,
  .adi-freight-footer-section,
  .freight-search-section,
  .freight-detailed-view-section {
    flex-direction: column;
  }
  .freight-map-details-switch-btn {
    display: block;
  }
  .freight-complete-details-section {
    width: 100%;
  }
  #freightMap {
    position: fixed !important;
    height: 100vh;
    width: 100vw !important;
    top: 60px;
    left: 0;
  }
  .leaflet-control {
    margin-top: 1000px !important;
  }
  .adi-freight-detailed-card-header {
    margin-top: 10px;
  }
  .flatpickr-input {
    width: 130px;
    padding: 7px 10px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
  }
  .freight-search-date-group > h5,
  .freight-search-place-group > h5 {
    font-size: 18px;
  }
  #freight-from-date,
  #freight-to-date,
  #freight-from-place,
  #freight-to-place {
    width: 80px;
    font-size: 14px;
    padding: 7px 5px;
  }
  .freight-search-button {
    padding: 8px 40px;
    font-size: 16px;
  }
}
/* ADI INNS MEMBER PAGE STYLING */
.adi-inns-container {
  width: 100%;
  padding: 20px 80px 80px 80px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-radius: 0.5rem;
  /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04); */
  overflow: hidden;
}
.adi-inns-title-section {
  background-color: #e5e7eb;
  text-align: center;
  padding: 1rem;
}
.adi-inns-title-section h1 {
  font-size: 1.25rem;
  font-weight: 600;
}
.adi-inns-tabs {
  display: flex;
  justify-content: center;
  padding: 1rem 0 0 0;
  gap: 1rem;
}
.adi-inns-tab-button {
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background-color: transparent;
  font-weight: 500;
  color: #4a5568;
  text-align: center;
  min-width: 150px;
}
.adi-inns-tab-button:hover {
  background-color: #f0f4f8;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.adi-inns-tab-button.active {
  background-color: var(--color-primary);
  color: white;
  border-color: #3182ce;
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.adi-inns-instruction-section {
  text-align: center;
  padding: 1rem;
  background-color: #f3f4f6;
  border-top: 1px solid #e5e7eb;
}
.adi-inns-instruction-section p {
  font-size: 0.875rem;
  font-style: italic;
}
.adi-inns-tab-content {
  display: none;
  padding: 1rem;
}
.adi-inns-tab-content.active {
  display: block;
}
.adi-inns-features-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}
#adi-inns-features-tab-text {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .adi-inns-features-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.adi-inns-feature-column {
  display: flex;
  flex-direction: column;
}
.adi-inns-feature-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}
.adi-inns-feature-item span {
  margin-left: 0.5rem;
}
.adi-inns-feature-item:hover {
  background-color: #f0f4f8;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.adi-inns-feature-item.selected {
  background-color: #3182ce;
  color: white;
  border-color: #3182ce;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* room cards styling */
.adi-inns-all-room-types-display-section {
  gap: 8px;
  flex-wrap: wrap;
}
.adi-inns-room-type-card {
  background-color: #ffffff;
  border: 1px solid #e0e6ed;
  border-radius: 12px;
  padding: 10px 15px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  min-width: 200px;
  cursor: pointer;
}

/* Hover and Active states */
.adi-inns-room-type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.adi-inns-room-type-card.active {
  background-color: #007bff;
  border-color: #007bff;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.adi-inns-room-type-card-card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0;
  transition: color 0.2s ease-in-out;
}

.adi-inns-room-type-card.active .adi-inns-room-type-card-card-title {
  color: #ffffff;
}
.adi-inns-room-type-details-section {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 30px;
  padding: 50px;
  gap: 12px;
  background-color: #f3f4f6;
  position: relative;
  width: 100%;
}

.adi-inns-room-img-display-section {
  width: 100%;
  max-width: 400px;

  height: 300px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
}
.adi-inns-room-img-list {
  display: flex;
  overflow-x: auto;
  gap: 16px; /* Adjust as needed for spacing between images */
  white-space: nowrap;
  scroll-snap-type: x mandatory; /* The main property for snapping */
  scroll-behavior: smooth; /* For a smoother scrolling animation */
  scrollbar-width: none;
  height: inherit;
}

.adi-inns-room-imgs {
  scroll-snap-align: center; /* Aligns each image to the center of the viewport */
  /* Or use 'start' if you want them to align to the left side */
  height: inherit;
  object-fit: cover;

  max-width: 400px;
  width: 100%;
}
.slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 12px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.slider-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.slider-button.prev {
  left: 10px;
}

.slider-button.next {
  right: 10px;
}

/* Styling for disabled buttons */
.slider-button:disabled {
  background-color: rgba(0, 0, 0, 0.2);
  cursor: not-allowed;
}

/* amenities display */
.adi-inns-room-details-display-section {
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); */
  height: 100%;
  padding: 30px;
  background-color: #d3d3d3;
  width: 100%;
}
.adi-inns-room-summary-img-container {
  gap: 12px;
}
.adi-inns-room-summary-card {
  box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 30px;
  background-color: white;
  max-width: 400px;
  width: 100%;
  text-wrap: wrap;
  height: fit-content;
}
.adi-inns-room-summary-card > p {
  text-wrap: wrap;
  height: fit-content;
}
.amenities-content-and-heading {
  height: 100%;
  width: 100%;
}
.adi-inns-room-type-amenities-display {
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* display: grid; */
  /* grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px; */
  animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.adi-inns-room-type-amenities-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.adi-inns-room-type-amenities-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
}

.card-text {
  font-size: 1.25rem;
  /* font-weight: 600; */
  color: #1e293b;
  text-transform: capitalize;
  line-height: 1.4;
}
.adi-inns-room-details-edit {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.adi-inns-optional-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  width: fit-content;
}
.adi-inns-room-optional-extras {
  gap: 8px;
  flex-wrap: wrap;
}
/* styling for feedback */
.adi-inns-feedback-option-container {
  /* margin-top: 80px; */
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  width: 500px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.adi-inns-feedback-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  background-color: #fff;
}
.adi-inns-feedback-text {
  padding: 5px 16px;
  font-size: 1.1em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #f8f9fa;
}
.adi-inns-feedback-button {
  border: none;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  color: white;
  padding: 10px 16px;

  transition: background-color 0.2s ease;
  background-color: #6c757d;
}
.adi-inns-feedback-button:hover {
  background-color: #5a6268;
}
.adi-inns-feedback-button.selected {
  background-color: #007bff;
}
.adi-inns-feedback-button.selected:hover {
  background-color: #0056b3;
}
/* Custom styles for the modal content to match the image */
.adi-inns-modal .modal-header .btn-close {
  margin: 0;
}
.adi-inns-modal-tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.adi-inns-modal-tab {
  text-align: center;
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
  background-color: #f8f9fa;
  border: 1px solid #ccc;
  border-radius: 4px;
  flex-grow: 1;
  margin: 0 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
}
.adi-inns-modal-tab:first-child {
  margin-left: 0;
}
.adi-inns-modal-tab:last-child {
  margin-right: 0;
}
.adi-inns-modal-tab.active {
  background-color: #007bff;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.adi-inns-modal-tab:not(.active):hover {
  background-color: #f1f1f1;
  transform: translateY(-2px);
}
.adi-inns-modal-tab.active:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}
.adi-inns-modal-textarea-container {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 15px;
  position: relative;
}
.adi-inns-modal-textarea-container textarea {
  width: 100%;
  height: 80px;
  border: none;
  resize: none;
  font-size: 1em;
  outline: none;
  background-color: transparent;
}
.adi-inns-info-description {
  position: relative;
}
.adi-inns-char-counter {
  position: absolute;
  bottom: 5px;
  right: 15px;
  font-size: 0.8em;
  color: #666;
}
.adi-inns-tab-feedback-content {
  display: none;
}
.adi-inns-tab-feedback-content.active {
  display: block;
}
.adi-inns-data-submit-section {
  padding: 1rem;
}
.adi-inns-data-submit-section-btns {
  width: 100px;
  height: 40px;
  font-size: 1rem;
}
/* Prperty-Information tab styling */
.adi-inns-form-wrapper {
  background-color: #fff;
  display: flex;
  justify-content: center;
  padding: 30px 40px 40px 40px;
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  width: 100%;
  box-sizing: border-box;
}

/* Form styling */

.adi-inns-form-group {
  margin-bottom: 25px;
}

.adi-inns-form-group label {
  display: block;
  margin-bottom: 8px;
  color: #555;
  font-weight: 500;
}

.adi-inns-form-group input[type="text"],
.adi-inns-form-group input[type="number"],
.adi-inns-form-group textarea,
.adi-inns-form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.adi-inns-form-group input:focus,
.adi-inns-form-group textarea:focus,
.adi-inns-form-group select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.adi-inns-form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.adi-inns-char-counter {
  text-align: right;
  font-size: 0.8rem;
  color: #888;
  margin-top: 5px;
}

/* Address Grid styling */
.adi-inns-address-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

@media (max-width: 600px) {
  .adi-inns-address-grid {
    grid-template-columns: 1fr;
  }
}

.adi-inns-address-grid .adi-inns-form-group {
  margin-bottom: 0;
}

/* Room types section styling */
#room-types-container {
  margin-top: 20px;
}

.adi-inns-room-type-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.adi-inns-room-type-btn {
  background-color: #f7f9fb;
  color: #4a4a4a;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.adi-inns-room-type-btn:hover {
  background-color: #e6e9ed;
}

.adi-inns-room-type-btn.adi-inns-active {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

.adi-inns-selected-room-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.adi-inns-selected-room-item span {
  font-weight: bold;
  flex-grow: 1;
  text-wrap: nowrap;
}

.adi-inns-selected-room-item input[type="number"] {
  width: 80px;
}

/* Action Buttons styling */
.adi-inns-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
}

.adi-inns-action-button {
  padding: 12px 25px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
  border: none;
}

.adi-inns-action-button.adi-inns-submit {
  background-color: #007bff;
  color: #fff;
}

.adi-inns-action-button.adi-inns-submit:hover {
  background-color: #0056b3;
}

.adi-inns-action-button.adi-inns-cancel {
  background-color: #f0f0f0;
  color: #4a4a4a;
}

.adi-inns-action-button.adi-inns-cancel:hover {
  background-color: #e0e0e0;
}
/* ends here */
@media (min-width: 360px) and (max-width: 767px) {
  .adi-inns-container {
    padding: 20px;
  }
  .adi-inns-room-type-details-section {
    padding: 10px;
  }
  .adi-inns-room-details-edit {
    background-color: white;

    right: 0;
    top: -40px;
  }
  .adi-inns-tabs {
    flex-wrap: wrap;
  }
  .adi-inns-tab-button {
    width: 200px;
  }
  .adi-inns-all-room-types-display-section {
    justify-content: center;
  }
  .adi-inns-room-type-details-section {
    flex-direction: column;
    margin-top: 50px;
  }
  .adi-inns-room-type-card-card-title {
    font-size: 1rem;
  }
  .adi-inns-room-type-card {
    width: 100%;
  }
  .adi-inns-room-img-display-section {
    overflow-x: scroll; /* Makes the images scrollable */
    scroll-snap-type: x mandatory; /* Snaps the scroll to each image */
    -webkit-overflow-scrolling: touch; /* Improves scrolling smoothness on iOS */
    -ms-overflow-style: none; /* Hides scrollbar on IE/Edge */
    scrollbar-width: none; /* Hides scrollbar on Firefox */
  }
  .adi-inns-room-img-display-section::-webkit-scrollbar {
    display: none; /* Hides scrollbar on Chrome/Safari */
  }

  .adi-inns-room-img-list {
    display: flex;
    white-space: nowrap; /* Prevents images from wrapping */
  }

  .adi-inns-room-imgs {
    flex: 0 0 100%; /* Makes each image take up full container width */
    width: 100%;
    scroll-snap-align: start; /* Aligns the snap point to the start of each image */
    margin-right: 16px; /* Space between images */
  }
  .adi-inns-room-optional-extras {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .adi-inns-optional-item {
    width: 100%;
    justify-content: center;
  }
  .feedback-options-and-submit-btn {
    flex-direction: column-reverse;
  }
  .adi-inns-feedback-option-container {
    width: 100%;
  }
  .adi-inns-feedback-row {
    display: flex;
    flex-direction: column;
  }
  .adi-inns-title-section {
    padding: 10px;
  }
  .adi-inns-title-section h1 {
    font-size: 1rem;
    font-weight: 600;
  }
  #adi-inns-features-tab-text {
    font-size: 14px;
  }
  .adi-inns-room-type-buttons {
    flex-direction: column;
  }
  .adi-inns-form-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
  }
  .adi-inns-form-wrapper {
    padding: 10px;
  }
  .adi-inns-selected-room-item {
    flex-direction: column;
  }
}
@media (min-width: 993px) {
  .adi-inns-room-img-display-section {
    min-width: 399.9999px;
  }
  #selected-rooms-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
  }
}
/* CSS FOR ADI INNS PAGES STARTS HERE */
/* Styling for Hotels Search page */
.adi-inns-user-container {
  width: 100%;
  padding: 20px 80px 80px 80px;
  margin: 0 auto;
}

.adi-inns-user-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  position: sticky;
  background-color: white;
  top: 1px;
  border-radius: 12px;
  z-index: 1;
  padding: 20px;
  width: 100%;
  margin-top: 55px;
}
@media (min-width: 768px) {
  .adi-inns-user-header {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  .adi-inns-user-b-modal {
    margin-top: 10000px;
    width: 100%;
    height: fit-content;
  }
}

.adi-inns-user-header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.adi-inns-user-controls {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: space-around;
}
/* @media (min-width: 1190px) {
  .adi-inns-user-controls {
    position: absolute;
    bottom: 40px;
    right: 0;
  }
  .adi-inns-user-header {
    margin-bottom: 0px;
  }
} */

.adi-inns-user-toggle-button,
.adi-inns-user-compare-button,
.adi-inns-user-map-toggle-button {
  /* background-color: var(--color-primary); */
  /* color: white; */
  background-color: transparent;
  border: none;
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 1rem;
  /* font-weight: 600; */
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.adi-inns-user-compare-button.hidden {
  display: none;
}
.adi-inns-compare-btn {
  position: relative;
}
.adi-inns-live-compare-count {
  position: absolute;
  top: -10px;
  right: -10px;
  color: var(--color-link);
}
.adi-inns-user-toggle-button:hover,
.adi-inns-user-compare-button:hover,
.adi-inns-user-map-toggle-button:hover {
  /* background-color: #357abd; */
  transform: translateY(-2px);
}

.adi-inns-user-compare-count {
  background-color: #ff4d4f;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 0.75rem;
  position: absolute;
  top: -5px;
  right: -5px;
  font-weight: bold;
}

/* --- View Container Styles --- */
.adi-inns-user-listings-container {
  display: grid;
  gap: 8px;
}

.adi-inns-user-listings-container.adi-inns-user-list-view {
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 1200px) {
  .adi-inns-user-listings-container.adi-inns-user-list-view {
    grid-template-columns: repeat(2, 1fr);
  }
}
.adi-inns-user-listings-container.adi-inns-user-grid-view {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* grid-template-columns: repeat(6, 1fr); */
}

/* --- Hotel Card Base Styles --- */
.adi-inns-user-hotel-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease-in-out, border-color 0.3s;
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid #ddd; /* Default border */
}

/* New class for selected state with a blue outline */
.adi-inns-user-hotel-card.adi-inns-user-selected-for-compare {
  border: 2px solid #4a90e2;
  box-shadow: 0 0 10px rgba(74, 144, 226, 0.5);
}

.adi-inns-user-hotel-card .adi-inns-user-select-compare {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  color: #4a90e2;
  border: 1px solid #4a90e2;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  display: none; /* Initially hidden */
}

.adi-inns-user-container.in-compare-mode .adi-inns-user-select-compare {
  display: block; /* Show when in comparison mode */
}

.adi-inns-user-hotel-card .adi-inns-user-select-compare:hover {
  background-color: #4a90e2;
  color: white;
}

.adi-inns-user-hotel-card .adi-inns-user-select-compare.selected {
  background-color: #4a90e2;
  color: white;
}

.adi-inns-user-hotel-card:hover {
  transform: translateY(-5px);
}

/* --- List View Specific Styles --- */
.adi-inns-user-list-view .adi-inns-user-hotel-card {
  flex-direction: row;
  height: fit-content;
  /* align-items: center; */
  padding: 14px;
}

/* @media (max-width: 768px) {
  
} */

.adi-inns-user-list-view .adi-inns-user-hotel-image-container {
  /* flex: 0 0 300px; */

  max-width: 250px;
  min-height: 100%;
}

@media (max-width: 768px) {
  .adi-inns-user-list-view .adi-inns-user-hotel-image-container {
    flex: 1 1 auto;
    width: 100%;
    height: 200px;
  }
}

.adi-inns-user-list-view .adi-inns-user-hotel-details {
  padding: 0 0 0 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-width: 0; /* Fix for scrollable tags */
}

.adi-inns-user-list-view .adi-inns-user-hotel-details-top {
  display: flex;
  flex-direction: column;
}

.adi-inns-user-list-view .adi-inns-user-hotel-details-bottom {
  margin-top: auto;
  align-self: flex-end;
  text-align: right;
}

.adi-inns-user-list-view .adi-inns-user-hotel-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--color-link);
  cursor: pointer;
  max-width: 350px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.adi-inns-user-list-view .adi-inns-user-hotel-location {
  color: #666;
  font-size: 1rem;
  margin: 0px 0px 0px 0px;
  max-width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.adi-inns-user-hotel-meta {
  /* margin-top: 10px; */
  margin: 0;
  font-size: 1rem;
  color: #666;
  text-wrap: nowrap;
}

.adi-inns-user-hotel-meta .adi-inns-user-rating {
  font-weight: 600;
  color: #333;
  text-wrap: nowrap;
}

/* --- Scrollable Tags and Common Styles --- */
.adi-inns-user-tags-container {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 5px; /* For scrollbar visibility */
  /* margin-top: 10px; */

  /* Hide the scrollbar */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Hide the scrollbar for Webkit browsers (Chrome, Safari) */
.adi-inns-user-tags-container::-webkit-scrollbar {
  display: none;
}

.adi-inns-user-tags-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
}

.adi-inns-user-tags-container li {
  display: inline-block;
  background-color: #e2e8f0;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #0e0d0d;
  flex-shrink: 0;
}

.adi-inns-user-list-view .adi-inns-user-hotel-price {
  font-size: 18px;
  font-weight: 700;
  color: #eb841d;
  /* margin-top: 10px; */
}
.adi-inns-user-hotel-price > span {
  color: var(--color-primary);
}
/* --- Grid View Specific Styles --- */
.adi-inns-user-grid-view .adi-inns-user-hotel-card {
  flex-direction: column;
  padding: 6px 6px 0px 6px;
}

.adi-inns-user-grid-view .adi-inns-user-hotel-image-container {
  width: 100%;
  /* max-width: 200px; */
  height: 100%;
}

.adi-inns-user-grid-view .adi-inns-user-hotel-details {
  padding: 15px;
}

.adi-inns-user-grid-view .adi-inns-user-hotel-name {
  font-size: 1.25rem;
  max-width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 600;
  margin: 0; /* Updated to remove all default margins */
  color: var(--color-link);
  cursor: pointer;
}

/* New style to align name and rating on the same line in grid view */
.adi-inns-user-grid-view .adi-inns-user-hotel-details-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.adi-inns-pin-icon {
  margin-left: 0;
  width: 16px;
}
.adi-inns-user-grid-view .adi-inns-user-hotel-meta {
  margin: 0; /* Added to remove top margin in grid view */
}
.adi-inns-user-hotel-location {
  display: flex;
  align-items: center;
}
.adi-inns-user-grid-view .adi-inns-user-hotel-location {
  color: #666;
  font-size: 0.85rem;
}

.adi-inns-user-grid-view .adi-inns-user-hotel-price {
  font-size: 1rem;
  font-weight: 700;
  /* color: #4a90e2; */
  color: #eb841d;

  margin-top: 10px;
}
.adi-inns-user-grid-view .adi-inns-user-hotel-discount {
  font-size: 12px;
  padding: 5px 10px;
}
/* --- Image Swiper Styles (for both views) --- */
.adi-inns-user-hotel-image-container {
  position: relative;
  overflow: hidden;
  touch-action: pan-y; /* Allows horizontal swiping */
}
.adi-inns-user-hotel-discount {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  font-weight: bold;
  border-radius: 12px 0pc 12px 0px;
  z-index: 0;
}

.adi-inns-user-hotel-image-swiper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  height: 100%;
}

.adi-inns-user-hotel-image-swiper img {
  width: 100%;
  min-height: 100%;
  object-fit: cover;

  border-radius: 12px;
}

.adi-inns-user-swiper-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.3s;
}

.adi-inns-user-hotel-card:hover .adi-inns-user-swiper-nav,
.adi-inns-user-popup-content:hover .adi-inns-user-swiper-nav {
  opacity: 1;
}

.adi-inns-user-swiper-nav button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.adi-inns-user-swiper-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.adi-inns-user-swiper-dot {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: background-color 0.3s;
}

.adi-inns-user-swiper-dot.adi-inns-user-active {
  background-color: #4a90e2;
}

/* --- Comparison Modal Styles --- */
.adi-inns-user-comparison-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  padding-top: 40px;
}

.adi-inns-user-comparison-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

.adi-inns-user-comparison-content {
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-height: 90%;
  overflow-y: auto;
  position: relative;
}

.adi-inns-user-comparison-content::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
}

.adi-inns-user-comparison-content::-webkit-scrollbar-thumb {
  background-color: #4a90e2;
  border-radius: 12px;
}

.adi-inns-user-comparison-content h2 {
  margin-top: 0;
  font-size: 1.8rem;
  text-align: center;
  color: #4a90e2;
}

.adi-inns-user-close-modal {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #666;
}

.adi-inns-user-comparison-message {
  text-align: center;
  font-style: italic;
  color: #666;
  margin-top: 20px;
}

/* --- NEW Comparison Grid and Card Styles --- */
.adi-inns-user-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* margin-top: 20px; */
}

@media (max-width: 1024px) {
  .adi-inns-user-comparison-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .adi-inns-user-comparison-grid {
    grid-template-columns: 1fr;
  }
}

.adi-inns-user-comparison-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 1px solid #ddd;
  position: relative;
}

.adi-inns-user-comparison-card .adi-inns-user-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

.adi-inns-user-comparison-card .adi-inns-user-details {
  padding: 15px;
  /* flex-grow: 1; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px;
}

.adi-inns-user-comparison-card .adi-inns-user-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--color-link);
}
.adi-inns-user-comparison-room-type-price,
.adi-inns-user-comparison-room-type-extra-price {
  color: var(--color-primary);
}
.adi-inns-user-comparison-card .adi-inns-user-rating {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 10px;
}

.adi-inns-user-comparison-card .adi-inns-user-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #4a90e2;
  margin-top: auto;
}

.adi-inns-user-book-now-button {
  background-color: #4a90e2;
  color: white;
  border: none;
  width: 90%;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.3s;
  position: absolute;
  bottom: 10px;
}

.adi-inns-user-book-now-button:hover {
  background-color: #357abd;
}

/* --- Map Container Styles --- */
#map-container {
  height: 80vh; /* Takes up 80% of the viewport height */
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}
#map-toggle-mobile-list-btn {
  display: none;
}

/* --- Leaflet Popup Styles --- */
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  padding: 0;
}

.leaflet-popup-content {
  padding: 0;
  margin: 0;
  min-width: 250px;
  max-width: 350px;
}

.adi-inns-user-popup-content {
  display: flex;
  flex-direction: column;
  position: relative;
  background: white;
  border-radius: 12px;
  overflow: hidden;
}

.adi-inns-user-popup-content .adi-inns-user-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.adi-inns-user-popup-content .adi-inns-user-details-container {
  padding: 10px 0 0 0;
}

.adi-inns-user-popup-content .adi-inns-user-hotel-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-link);
  cursor: pointer;
}

.adi-inns-user-popup-content .adi-inns-user-hotel-location {
  color: #666;
  font-size: 0.9rem;
  margin-top: 5px;
  margin-bottom: 0;
}

.adi-inns-user-popup-content .adi-inns-user-hotel-rating {
  font-size: 0.9rem;
  color: #4a90e2;
  margin-top: 5px;
  margin-bottom: 0;
}

.adi-inns-user-popup-content .adi-inns-user-hotel-price {
  /* font-size: 1.5rem; */
  font-weight: 700;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 18px;
  color: #eb841d;
  /* margin-top: 10px; */
}
.adi-inns-user-view-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  transition: all 0.3s ease;
}
.adi-inns-user-view-toggle-btn:hover {
  transform: translateY(-2px);
}
.adi-inns-user-view-toggle-btn > img {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}
/* Styling for Hotel booking page */
.adi-inns-user-b-container {
  padding: 20px 80px 80px 80px;
}
/* #booking-modal-overlay .adi-inns-user-b-modal{
  max-width: 500px !important;
} */

.adi-inns-user-b-inner-container {
  background-color: #f2f2f2;
  padding: 20px 60px;
  border-radius: 12px;
}
.adi-inns-user-b-header {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  margin-bottom: 20px;
}
.adi-inns-user-b-title-rating-container > h1 {
  color: var(--color-link);
  font-size: 2rem;
  margin-bottom: 10px;
}
.adi-inns-user-b-header > h2 {
  color: #eb841d;
}
#hotel-rating {
  font-weight: 500;
  color: #0e0d0d;
}
.adi-inns-user-b-location-rating {
  font-size: 1.1em;
  /* color: #6c757d; */
  display: flex;
  /* justify-content: center; */
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.adi-inns-user-b-rating {
  font-weight: 600;
  color: #007bff;
}

.adi-inns-user-b-features-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.adi-inns-user-b-features-list li {
  background-color: #e9ecef;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.9em;
  color: #333;
  font-weight: 500;
}

/* Image gallery styling */
.adi-inns-user-b-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.adi-inns-user-b-image-gallery img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Room cards styling */
.adi-inns-user-b-rooms-section {
  /* margin-top: 40px; */
  padding: 0;
}
.adi-inns-user-b-rooms-section > h2 {
  margin-bottom: 20px;
  font-size: 1.5rem;
}
.adi-inns-user-b-room-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.adi-inns-user-b-room-card {
  background-color: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.adi-inns-user-b-room-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
}

.adi-inns-user-b-room-image-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.adi-inns-user-b-image-slider-inner {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.adi-inns-user-b-room-image-slider img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  flex-shrink: 0;
}

.adi-inns-user-b-slider-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  padding: 0 10px;
}

.adi-inns-user-b-slider-nav button {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 10px 15px 10px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5em;
  line-height: 1;
  transition: background 0.3s ease;
}

.adi-inns-user-b-slider-nav button:hover {
  background: rgba(0, 0, 0, 0.8);
}

.adi-inns-user-b-card-content {
  padding: 10px 25px 25px 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.adi-inns-user-b-room-type {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-link);
  margin: 0 0 10px 0;
}

.adi-inns-user-b-room-summary {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
}

.adi-inns-user-b-amenities-list {
  list-style-type: none;
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.adi-inns-user-b-amenities-list li {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 0px 10px;
  border-radius: 8px;
  font-size: 12px;
}

.adi-inns-user-b-book-button {
  display: block;
  width: 100%;
  padding: 10px 15px;
  background: linear-gradient(92deg, #53b2fe, #065af3);
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  border: none;
  cursor: pointer;
  margin-top: auto;
}

.adi-inns-user-b-book-button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

.adi-inns-user-b-room-price {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  /* margin-top: -10px; */
  margin-bottom: 10px;
}

/* Message box for booking confirmation */
.adi-inns-user-b-message-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  color: white;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: none;
  text-align: center;
}

.adi-inns-user-b-message-box.adi-inns-user-b-show {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .adi-inns-user-b-room-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Modal Styling --- */
.adi-inns-user-b-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 2099;
  overflow-y: auto;
  padding: 60px 0;
}

.adi-inns-user-b-modal-overlay.adi-inns-user-b-open {
  display: flex;
}

.adi-inns-user-b-modal {
  margin-top: 270px;
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 700px;
  position: relative;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.adi-inns-user-b-modal-overlay.adi-inns-user-b-open .adi-inns-user-b-modal {
  transform: scale(1);
  opacity: 1;
}

.adi-inns-user-b-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.adi-inns-user-b-modal-header h3 {
  margin: 0;
  color: #1a1a1a;
  font-size: 1.5em;
}

.adi-inns-user-b-modal-close-btn {
  background: none;
  border: none;
  font-size: 1.8em;
  cursor: pointer;
  color: #6c757d;
  line-height: 1;
}

.adi-inns-user-b-modal-price {
  font-size: 1.2em;
  font-weight: 600;
  color: #007bff;
}

.adi-inns-user-b-modal-body .adi-inns-user-b-form-group {
  margin-bottom: 20px;
}

.adi-inns-user-b-modal-body label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.adi-inns-user-b-modal-body input,
.adi-inns-user-b-modal-body select {
  width: 100%;
  padding: 12px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  font-size: 1em;
}

.adi-inns-user-b-modal-body .adi-inns-user-b-form-row {
  display: flex;
  gap: 15px;
}

.adi-inns-user-b-modal-body
  .adi-inns-user-b-form-row
  .adi-inns-user-b-form-group {
  flex: 1;
}

.adi-inns-user-b-modal-book-btn {
  width: 100%;
  padding: 15px;
  background-color: #007bff;
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.adi-inns-user-b-modal-book-btn:hover {
  background-color: #0056b3;
}
/* New styling for the hotel info card */
.adi-inns-user-b-info-card {
  width: fit-content;
  max-width: 600px;
  background-color: #fff;
  padding: 20px;
  height: fit-content;
  margin-bottom: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Container for rating section */
.adi-inns-user-b-info-card-rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Rating badge and text container */
.adi-inns-user-b-info-card-rating-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* Rating number badge styling */
.adi-inns-user-b-info-card-rating-badge {
  background-color: #3b82f6;
  color: white;
  padding: 8px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: bold;
}

.adi-inns-user-b-info-card-rating-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adi-inns-user-b-info-card-rating-main {
  font-size: 18px;
  font-weight: bold;
  color: #1a1a1a;
}

.adi-inns-user-b-info-card-rating-count {
  font-size: 14px;
  color: #777;
}

.adi-inns-user-b-info-card-link {
  margin-left: 12px;
  color: #3b82f6;
  text-decoration: none;
  font-weight: bold;
}

.adi-inns-user-b-info-card-link:hover {
  text-decoration: underline;
}

hr {
  border: none;
  height: 1px;
  background-color: #e0e0e0;
  margin: 0;
}

/* Container for location section */
.adi-inns-user-b-info-card-location {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.adi-inns-user-b-info-card-location-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

.adi-inns-user-b-info-card-location-icon svg {
  width: 40px;
  height: 40px;
  fill: #3b82f6;
}

.adi-inns-user-b-info-card-location-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.adi-inns-user-b-info-card-location-main {
  font-size: 18px;
  font-weight: bold;
  color: #1a1a1a;
}

.adi-inns-user-b-info-card-location-desc {
  font-size: 14px;
  color: #777;
}
/* Swiper section styling */

.adi-inns-user-b-both-swipers {
  gap: 16px;
}
.adi-inns-user-b-swiper-section {
  width: 100%;
  height: fit-content;
  /* max-width: 480px; */
  /* margin-bottom: 40px; */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.adi-inns-user-b-swiper-section h2 {
  text-align: center;
  margin-bottom: 10px;
  color: #555;
}

/* Swiper wrapper to contain the slider and navigation buttons */
.adi-inns-user-b-swiper-wrapper {
  position: relative;
  width: 100%;
}

/* New styling for the image count text */
.adi-inns-user-b-swiper-image-count {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 10;
}

/* Core swiper styling for horizontal scroll and snapping */
.adi-inns-user-b-swiper-container {
  width: 100%;
  height: auto;
  display: flex; /* Use flexbox for a horizontal layout */
  overflow-x: scroll; /* Enable horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  scroll-snap-type: x mandatory; /* Snap to images after scrolling */
}

/* Individual image styling within the swiper */
.adi-inns-user-b-swiper-container img {
  width: 100%; /* Make each image take up the full width of the container */
  height: auto;
  aspect-ratio: 1000 / 600; /* Maintain aspect ratio */
  object-fit: cover;
  scroll-snap-align: center; /* Center the image in the scroll viewport */
  flex-shrink: 0; /* Prevent images from shrinking */
}

/* Hide scrollbars for a cleaner look */
.adi-inns-user-b-swiper-container::-webkit-scrollbar {
  display: none;
}
.adi-inns-user-b-swiper-container {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Navigation button styling */
.adi-inns-user-b-swiper-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
  user-select: none;
  transition: background-color 0.3s ease;
}

.adi-inns-user-b-swiper-nav-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.adi-inns-user-b-swiper-nav-button.adi-inns-user-b-swiper-left {
  left: 0;
  border-radius: 0 50% 50% 0;
}

.adi-inns-user-b-swiper-nav-button.adi-inns-user-b-swiper-right {
  right: 0;
  border-radius: 50% 0 0 50%;
}

/* Hidden state for buttons */
.adi-inns-user-b-swiper-nav-button.adi-inns-user-b-swiper-hidden {
  opacity: 0;
  pointer-events: none; /* Prevents clicks on the hidden button */
}
/* Review section styles - Modern UI */
.adi-inns-user-b-reviews-section {
  padding: 20px;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.adi-inns-user-b-reviews-header {
  margin-bottom: 20px;
}

.adi-inns-user-b-reviews-header h2 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.adi-inns-user-b-reviews-main {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

@media (min-width: 768px) {
  .adi-inns-user-b-reviews-main {
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start; /* Aligns items at the start of the cross axis */
  }
}

.adi-inns-user-b-reviews-panels {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (min-width: 768px) {
  .adi-inns-user-b-reviews-left-panel {
    flex: 0 0 40%;
  }
  .adi-inns-user-b-reviews-right-panel {
    flex: 1;
  }
}

.adi-inns-user-b-rating-summary {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e9ecef;
}

.adi-inns-user-b-rating-summary-badge {
  background-color: #3b82f6;
  color: white;
  padding: 15px 20px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.adi-inns-user-b-rating-summary-text {
  display: flex;
  flex-direction: column;
}

.adi-inns-user-b-rating-summary-title {
  font-weight: bold;
  font-size: 18px;
}

.adi-inns-user-b-rating-summary-info {
  font-size: 14px;
  color: #777;
}

.adi-inns-user-b-rating-breakdown {
  margin-top: 20px;
}

.adi-inns-user-b-rating-breakdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.adi-inns-user-b-rating-breakdown-label {
  width: 80px;
  font-size: 14px;
  color: #555;
}

.adi-inns-user-b-progress-bar-container {
  flex-grow: 1;
  background-color: #e9ecef;
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}

.adi-inns-user-b-progress-bar {
  height: 100%;
  background-color: #3b82f6;
  border-radius: 4px;
}

.adi-inns-user-b-review-percent {
  font-size: 14px;
  width: 40px;
  text-align: right;
  color: #555;
}

.adi-inns-user-b-last-ratings {
  margin-top: 30px;
}

.adi-inns-user-b-last-ratings h3,
.adi-inns-user-b-review-categories h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.adi-inns-user-b-last-ratings-list {
  display: flex;
  gap: 10px;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.adi-inns-user-b-last-ratings-list::-webkit-scrollbar {
  height: 8px;
}

.adi-inns-user-b-last-ratings-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.adi-inns-user-b-last-ratings-item {
  background-color: #3b82f6;
  color: white;
  padding: 12px;
  border-radius: 10px;
  flex-shrink: 0;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.adi-inns-user-b-review-categories {
  margin-top: 30px;
}

.adi-inns-user-b-review-category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e9ecef;
}

.adi-inns-user-b-review-category-item:last-child {
  border-bottom: none;
}

.adi-inns-user-b-review-category-label {
  font-size: 16px;
  color: #555;
}

.adi-inns-user-b-review-category-score {
  background-color: #e9ecef;
  color: #333;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
}

.adi-inns-user-b-filter-sort-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}

.adi-inns-user-b-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.adi-inns-user-b-filter-group-label {
  font-weight: bold;
  color: #555;
  flex-basis: 100%;
}

.adi-inns-user-b-filter-button {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s, color 0.2s;
}

.adi-inns-user-b-filter-button:hover {
  background-color: #e0e0e0;
}

.adi-inns-user-b-filter-button.active {
  background-color: #3b82f6;
  color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.adi-inns-user-b-review-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.adi-inns-user-b-review-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
}

.adi-inns-user-b-review-meta-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.adi-inns-user-b-review-rating-badge {
  background-color: #3b82f6;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.adi-inns-user-b-review-user {
  font-weight: bold;
  font-size: 16px;
}

.adi-inns-user-b-review-user-group {
  font-size: 14px;
  color: #777;
}

.adi-inns-user-b-review-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 5px;
}

.adi-inns-user-b-review-text {
  line-height: 1.6;
  color: #555;
  margin-top: 10px;
}

.adi-inns-user-b-review-details {
  font-size: 14px;
  color: #777;
  margin-top: 15px;
}

.adi-inns-user-b-room-item {
  display: flex;
  gap: 15px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.adi-inns-user-b-room-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.adi-inns-user-b-room-image {
  width: 150px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.adi-inns-user-b-room-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.adi-inns-user-b-room-details h3 {
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 5px 0;
}

.adi-inns-user-b-room-details p {
  font-size: 14px;
  color: #555;
  margin: 0 0 10px 0;
}

.adi-inns-user-b-room-details ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12px;
  color: #777;
}

.adi-inns-user-b-room-details li {
  padding: 3px 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.adi-inns-user-b-sort-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.adi-inns-user-b-sort-container select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  background-color: white;
  cursor: pointer;
}

/* Pagination styles */
.adi-inns-user-b-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.adi-inns-user-b-pagination-button {
  padding: 10px 14px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s, color 0.2s;
}

.adi-inns-user-b-pagination-button:hover:not(.disabled):not(.active) {
  background-color: #e0e0e0;
}

.adi-inns-user-b-pagination-button.active {
  background-color: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.adi-inns-user-b-pagination-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Map Section Styles */
#adi-inns-user-b-map {
  height: 100%;
  width: 300px;

  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* margin-top: 20px; */
  z-index: 0;
}

.adi-inns-user-b-map-card {
  background-color: #fff;
  /* width: 100%; */
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* margin-top: 20px; */
}
@media (min-width: 1200px) {
  .adi-inns-user-b-map-card {
    width: 100%;
    min-width: 450px;
  }
  #adi-inns-user-b-map {
    width: 100%;
  }
  /* .adi-inns-separate-swiper-container {
    min-width: 1100px;
  } */
}
.adi-inns-user-b-map-card h2 {
  font-size: 20px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 10px;
}

.adi-inns-user-b-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}

.adi-inns-user-b-card-header {
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 8px;
}

.adi-inns-user-b-guest-title {
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 8px;
}

.adi-inns-user-b-input-group {
  display: flex;
  gap: 8px;
}

.adi-inns-user-b-input-group > select,
.adi-inns-user-b-input-group > input {
  flex: 1;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.adi-inns-user-b-add-guest-btn {
  color: #2563eb;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
}

.adi-inns-user-b-login-prompt {
  background-color: #e5e7eb;
  padding: 12px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.adi-inns-user-b-login-btn {
  background-color: white;
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.adi-inns-user-b-error-message {
  color: #ef4444;
  font-size: 0.75rem;
  margin-top: 4px;
  display: none;
}
.adi-inns-user-b-error-message.visible {
  display: block;
}

.adi-inns-user-b-list {
  list-style: disc;
  margin-left: 20px;
  color: #4b5563;
  font-size: 0.875rem;
}
.adi-inns-user-b-list li {
  margin-bottom: 0.5rem;
}
.adi-inns-user-b-link {
  color: #2563eb;
  text-decoration: none;
}
.adi-inns-user-b-link:hover {
  text-decoration: underline;
}
.adi-inns-user-search-pref-booking-container {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 5px 20px 5px 0;
  border-radius: 12px;
  max-width: 1200px;
  width: 100%;
  flex-wrap: wrap;
  gap: 20px;
}

.adi-inns-user-search-pref-text-section {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-right: 20px;
}

.adi-inns-user-search-pref-main-heading {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.adi-inns-user-search-pref-sub-heading {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.adi-inns-user-search-pref-input-section {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: white;
  /* justify-content: flex-start; */
  margin-top: 8px;
  padding: 20px;
  border-radius: 8px;
  gap: 15px;
  /* flex-wrap: wrap; */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.adi-inns-user-search-pref-select-wrapper {
  position: relative;
  /* flex-grow: 1; */
  /* min-width: 180px; */
  text-wrap: nowrap;
}

/* Styling for both select and input elements for consistency */
.adi-inns-user-search-pref-select-wrapper select,
.adi-inns-user-search-pref-select-wrapper input {
  width: 100%;
  /* max-width: 180px; */
  padding: 4px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  font-size: 18px;
  color: #333;
  /* background-color: #f7f7f7; */
  box-sizing: border-box; /* To include padding and border in the element's total width and height */
}
.adi-inns-user-search-pref-select-wrapper input {
  margin-left: 8px;
  min-width: 180px;
}

/* Custom styling for the rooms & guests input */
.adi-inns-user-search-pref-custom-dropdown {
  padding: 7.5px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  /* background-color: #f7f7f7; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.adi-inns-user-search-pref-custom-dropdown
  .adi-inns-user-search-pref-display-text {
  font-weight: bold;
  color: #000;
}

.adi-inns-user-search-pref-select-wrapper select:focus,
.adi-inns-user-search-pref-select-wrapper input:focus,
.adi-inns-user-search-pref-custom-dropdown:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.adi-inns-user-search-pref-button-section {
  flex-shrink: 0;
}

.adi-inns-user-search-pref-update-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.adi-inns-user-search-pref-update-button:hover {
  background-color: #0056b3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .adi-inns-user-search-pref-booking-container {
    flex-direction: column;
    align-items: stretch;
  }

  .adi-inns-user-search-pref-text-section {
    padding-right: 0;
    margin-bottom: 15px;
    text-align: center;
  }

  .adi-inns-user-search-pref-input-section {
    flex-direction: column;
    gap: 10px;
  }

  .adi-inns-user-search-pref-select-wrapper {
    min-width: 100%;
  }

  .adi-inns-user-search-pref-button-section {
    width: 100%;
    text-align: center;
  }

  .adi-inns-user-search-pref-update-button {
    width: 100%;
  }
}

/* Custom dropdown for Rooms & Guests */
.adi-inns-user-guest-select-drop-down {
  position: relative;
  z-index: 100;
  width: 100%;
  /* max-width: 270px; */
}
.adi-inns-user-search-pref-dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  max-width: 275px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px;
  z-index: 100;
  border-radius: 8px;
  top: 100%;
  left: 0;
  margin-top: 5px;
  text-wrap: wrap;
}
.adi-inns-user-search-pref-dropdown-content .adi-inns-user-list-view {
  z-index: 100;
}
.adi-inns-user-search-pref-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.adi-inns-user-search-pref-dropdown-item:last-child {
  border-bottom: none;
}

.adi-inns-user-search-pref-dropdown-label {
  display: flex;
  flex-direction: column;
}

.adi-inns-user-search-pref-dropdown-label small {
  font-size: 12px;
  color: #999;
}

.adi-inns-user-search-pref-counter {
  display: flex;
  align-items: center;
}

.adi-inns-user-search-pref-counter-btn {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  cursor: pointer;
}

.adi-inns-user-search-pref-counter-value {
  width: 30px;
  text-align: center;
  font-weight: bold;
}

.adi-inns-user-search-pref-apply-btn {
  background-image: linear-gradient(to right, #007bff, #0056b3);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
}
/* General container styling */
.adi-inns-user-comparison-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0;
}

.adi-inns-user-comparison-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.adi-inns-user-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.adi-inns-user-details {
  color: #333;
  padding: 16px;
}

.adi-inns-user-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adi-inns-user-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.adi-inns-user-rating {
  font-size: 0.9rem;
  color: #777;
}

.adi-inns-user-price {
  margin-top: 8px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #007bff;
}

.adi-inn-user-comparison-separator {
  border-bottom: 1px solid #e0e0e0;
  margin: 12px 0;
}

.adi-inns-user-additional-details h4,
.optional-extras h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.adi-inns-user-additional-details h4 {
  background-color: #fafafa;
  padding: 5px;
  border-radius: 8px;
}
.room-type {
  margin-bottom: 16px;
}

.room-type strong {
  display: block;
  font-size: 1rem;
  color: #222;
}

.room-type .count,
.room-type .price,
.room-type .summary {
  display: block;
  font-size: 0.9rem;
  color: #555;
  margin: 4px 0;
}

.room-type .amenities {
  display: flex;
  /* flex-wrap: wrap; */
  align-items: center;
  overflow-x: auto;
  gap: 8px;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.room-type .amenities::-webkit-scrollbar {
  height: 6px;
}

.room-type .amenities::-webkit-scrollbar-track {
  background: transparent;
}

.room-type .amenities::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.room-type .amenities span {
  background-color: #f0f0f0;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 0.85rem;
  /* font-size: 0.6rem; */
  color: #444;
  flex-shrink: 0;
}

.optional-extras {
  font-size: 0.9rem;
}
.optional-extras h4 {
  background-color: #fafafa;
  padding: 5px;
  border-radius: 8px;
}
.optional-extras div {
  padding: 8px;
  /* background-color: #fafafa; */
  border-radius: 6px;
  margin-bottom: 8px;
  transition: background-color 0.3s;
}

.optional-extras div:hover {
  background-color: #f0f0f0;
}

.optional-extras .extra-name {
  font-weight: 500;
}

.optional-extras .extra-price {
  color: #777;
}
.adi-inns-user-mobile-hotel-search-booking-container {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  overflow: hidden;
  box-sizing: border-box;
}

.adi-inns-user-mobile-hotel-search-booking-row {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.adi-inns-user-mobile-hotel-search-input-group {
  flex: 1;
  padding: 1rem;
  position: relative;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  border-bottom: 1px solid #e0e0e0;
}

.adi-inns-user-mobile-hotel-search-input-group:hover {
  background-color: #f9f9f9;
}

.adi-inns-user-mobile-hotel-search-input-group:not(:last-child) {
  border-right: none;
}

.adi-inns-user-mobile-hotel-search-input-label {
  font-size: 0.8rem;
  color: #555;
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
}

.adi-inns-user-mobile-hotel-search-input-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.adi-inns-user-mobile-hotel-search-sub-value {
  font-size: 0.9rem;
  font-weight: 400;
  color: #888;
}

.adi-inns-user-mobile-hotel-search-arrow {
  color: #888;
  font-weight: 700;
  font-size: 0.8rem;
}

.adi-inns-user-mobile-hotel-search-location-container {
  /* background-color: #f6f9fc; */
  border-bottom: 1px solid #e0e0e0;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  display: flex;
  flex-direction: column;
}

.adi-inns-user-mobile-hotel-search-location-search-group {
  padding: 0 1rem;
  position: relative;
  /* border-bottom: 1px solid #e0e0e0; */
}

.adi-inns-user-mobile-hotel-search-location-display-group {
  padding: 0 1rem 1rem 1rem;
  position: relative;
}

.adi-inns-user-mobile-hotel-search-location-value {
  font-size: 2.25rem;
  font-weight: 700;
  margin-top: -0.25rem;
}
.adi-inns-user-mobile-hotel-search-location-sub-value {
  font-size: 1rem;
  color: #555;
  margin-top: 0.25rem;
}

.adi-inns-user-mobile-hotel-search-rooms-guests-value {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.adi-inns-user-mobile-hotel-search-rooms-guests-value span {
  margin-right: 0.5rem;
}

/* Modal styling adjustments for mobile responsiveness */
.modal-body {
  padding: 0;
}
.modal-content {
  border-radius: 1rem;
  border: none;
}

#checkin-checkout-input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.adi-inns-user-mobile-hotel-search-date-display-container {
  display: flex;
  width: 100%;
}

.adi-inns-user-mobile-hotel-search-check-date-group {
  flex: 1;
}

.adi-inns-user-mobile-hotel-search-search-button {
  padding: 10px 1rem;
  /* width: 200px; */
  background-color: #1a73e8;
  color: white;
  font-weight: 600;
  font-size: 1.2rem;
  text-align: center;
  /* border-top: 1px solid #e0e0e0; */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  margin: 0 50px 30px 50px;
}

.adi-inns-user-mobile-hotel-search-search-button:hover {
  background-color: #1558b3;
}

/* Dropdown Styles */
.adi-inns-user-mobile-hotel-search-dropdown-container {
  width: 100%;
  background-color: white;

  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
  padding: 2rem;
  z-index: 1050;
  display: none; /* Hidden by default */
  margin-bottom: 40px;
  border-bottom: 1px solid #e0e0e0;
}

.adi-inns-user-mobile-hotel-search-dropdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #f0f2f5;
}

.adi-inns-user-mobile-hotel-search-dropdown-row:last-child {
  border-bottom: none;
}

.adi-inns-user-mobile-hotel-search-dropdown-row-label {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  font-weight: 500;
}

.adi-inns-user-mobile-hotel-search-dropdown-row-label
  .adi-inns-user-mobile-hotel-search-sub-value {
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

.adi-inns-user-mobile-hotel-search-counter {
  display: flex;
  align-items: center;
}

.adi-inns-user-mobile-hotel-search-counter-btn {
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  cursor: pointer;
  color: #555;
  transition: background-color 0.2s ease;
}

.adi-inns-user-mobile-hotel-search-counter-btn:hover {
  background-color: #f0f0f0;
}

.adi-inns-user-mobile-hotel-search-counter-value {
  width: 40px;
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
}

.adi-inns-user-mobile-hotel-search-apply-btn {
  display: block;
  width: 80%;
  padding: 0.75rem;
  background-color: var(--color-link);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  justify-self: center;
  cursor: pointer;
}

.adi-inns-user-mobile-hotel-search-apply-btn:hover {
  background-color: #1558b3;
}

/* New styles for search and location input fields */
.adi-inns-user-mobile-hotel-search-search-input-container {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.adi-inns-user-mobile-hotel-search-search-input-container i {
  font-size: 1.25rem;
  color: #888;
  margin-right: 0.75rem;
}

.adi-inns-user-mobile-hotel-search-search-input-container input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  width: 100%;
}

.adi-inns-user-mobile-hotel-search-location-value-container {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

.adi-inns-user-mobile-hotel-search-location-value-container input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  width: 100%;
}

.adi-inns-user-mobile-hotel-search-location-value-container
  .adi-inns-user-mobile-hotel-search-sub-value {
  font-size: 0.8rem;
}

.adi-inns-user-mobile-hotel-search-date-container {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  position: relative;
}

.adi-inns-user-mobile-hotel-search-date-container
  .adi-inns-user-mobile-hotel-search-date-label {
  font-weight: 600;
  color: #000;
  margin-right: 0.5rem;
}

.adi-inns-user-mobile-hotel-search-date-container
  .adi-inns-user-mobile-hotel-search-date-value {
  font-weight: 400;
  color: #555;
}

/* New style for the rooms & guests group */
.adi-inns-user-mobile-hotel-search-rooms-guests-container {
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}
.adi-inns-user-mobile-search-modal-dialog {
  width: 100vw !important;
  height: 100vh !important;
}
.adi-inns-user-mobile-search-modal-content {
  height: 100%;
  min-width: 100vw !important;
  border-radius: 0;
}
.adi-inns-separate-swiper-container {
  gap: 12px;
}
@media (min-width: 768px) and (max-width: 1200px) {
  .adi-inns-user-b-both-swipers {
    flex-wrap: wrap;
    width: 100%;
    gap: 0;
    /* flex-direction: column; */
  }
  .adi-inns-user-b-map-card {
    width: 100%;
    height: 300px;
  }
  #adi-inns-user-b-map {
    width: 100%;
  }
  .adi-inns-separate-swiper-container {
    margin-bottom: 20px;
  }
}
/* media queries */
@media (min-width: 360px) and (max-width: 767px) {
  .adi-inns-separate-swiper-container {
    flex-direction: column;
  }
  .adi-inns-user-container {
    padding: 20px;
  }
  .adi-inns-user-list-view .adi-inns-user-hotel-image-container {
    /* flex: 0 0 300px; */

    max-width: 100%;
    min-height: 100%;
  }
  .adi-inns-user-hotel-image-swiper img {
    min-width: 100%;
    min-height: 100%;
  }
  .adi-inns-user-list-view .adi-inns-user-hotel-card {
    flex-direction: column;
    /* height: auto; */
    text-align: center;
    justify-content: center;
  }
  .adi-inns-user-list-view .adi-inns-user-hotel-details {
    padding: 20px 0 0 0;
  }
  .adi-inns-user-hotel-location {
    display: flex;
    justify-content: center;
  }
  .adi-inns-empty-div {
    display: none;
  }
  .adi-inns-user-controls {
    width: 100%;
    /* flex-direction: column; */
    justify-content: space-around;
    align-items: center;
  }
  .adi-inns-user-toggle-button {
    display: none;
  }
  .leaflet-bottom {
    z-index: 999 !important;
  }
  /* for booking page */
  .adi-inns-user-b-container {
    padding: 20px 5px;
  }
  .adi-inns-user-b-room-image-slider img {
    height: 200px;
  }
  .adi-inns-user-b-card-content {
    padding: 10px 25px;
  }
  .adi-inns-user-b-room-price {
    font-size: 1.2em;
    font-weight: 600;
    color: #007bff;
    margin-top: -10px;
    margin-bottom: 10px;
  }
  .adi-inns-user-b-amenities-list {
    margin-bottom: 10px;
  }
  .adi-inns-user-b-location-rating {
    margin: 0 0 10px 0;
  }
  .adi-inns-user-list-view .adi-inns-user-hotel-details-top {
    align-items: center;
  }
  /* .adi-inns-user-view-toggle-btn {
    z-index: 2000;
  } */
  #map-container {
    position: fixed;
    height: 100vh; /* Takes up 80% of the viewport height */
    width: 100vw !important;
    left: 0 !important;
    top: 60px;
    border-radius: 0px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    z-index: 10;
  }
  #map-toggle-mobile-list-btn {
    display: block;
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 20;
    background-color: white;
    padding: 5px;
  }
  .adi-inns-user-b-swiper-section {
    margin-bottom: 0;
  }
  .adi-inns-user-b-both-swipers {
    flex-direction: column;
    align-items: center;
  }

  .adi-inns-user-b-inner-container {
    padding: 10px;
  }
  .adi-inns-user-b-modal-overlay {
    padding: 20px 0;
  }
  .adi-inns-user-b-modal {
    /* margin-top: 330px; */
    width: 100%;
    height: fit-content;
  }
  .leaflet-popup-content {
    width: 150px;
  }
  .adi-inns-user-b-map-card {
    padding: 10px 0 0 0;
  }
  #adi-inns-user-b-map {
    border-radius: 0 0 8px 8px;
    margin-top: 10px;
  }
  .adi-inns-user-b-map-card > h2 {
    padding: 0px 15px;
    margin-bottom: 0;
  }
  .adi-inns-user-b-last-ratings-list {
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    scrollbar-width: none; /* For Firefox */
    overflow-x: auto; /* Use 'auto' instead of 'scroll' for a more flexible experience */
    touch-action: pan-x; /* Use 'pan-x' to enable horizontal scrolling via touch */
    /* Add 'white-space: nowrap;' to keep all items on a single line */
    white-space: nowrap;
  }
  .adi-inns-user-b-last-ratings-list::-webkit-scrollbar {
    display: none;
  }
  .adi-inns-user-search-pref-booking-container {
    display: none;
  }
}

/* ____________________ADI INNS LANDING PAGE STYLES ______________________________ */
.adi-inns-landing-page-body {
  /* background-color: #f2f2f2; */
  background-color: white;
  width: 100vw;
  height: fit-content;
}
.adi-inns-hmp-content {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 20px 60px 60px 60px;

  height: fit-content;
}
.adi-inns-hmp-container {
  width: 100%;

  padding: 18px;
  background-color: #f8f7f9;
  border-radius: 8px;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}
.adi-inns-hmp-page-titles {
  align-items: center;
}
/* Specific styles for H1 heading using a class */
.adi-inns-hmp-page-title {
  margin: 0;
  font-weight: 700;
  color: #2c3e50;
  /* text-align: center; */
  font-size: 2.5rem;
}

/* Specific styles for H2 headings using a class */
.adi-inns-hmp-section-title {
  margin: 0;
  font-weight: 700;
  /* text-align: center; */
  font-size: 1.75rem;

  color: #34495e;
}

/* Swiper container styles */
.adi-inns-hmp-swiper-container,
.adi-inns-hmp-top-hotel-swiper-container {
  display: flex;
  overflow-x: scroll;
  gap: 1.5rem;
  padding: 1rem 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.adi-inns-hmp-top-hotel-swiper-container {
  /* flex-wrap: wrap; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 768px) and (max-width: 993px) {
  .adi-inns-hmp-top-hotel-swiper-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 360px) and (max-width: 767px) {
  .adi-inns-hmp-top-hotel-swiper-container {
    grid-template-columns: repeat(1, 1fr);
  }
}
.adi-inns-hmp-swiper-container::-webkit-scrollbar,
.adi-inns-hmp-top-hotel-swiper-container::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Swiper wrapper for navigation buttons */
.adi-inns-hmp-top-city-swiper-wrapper {
  position: relative;
  padding: 0; /* Space for buttons */
}

/* Modern button styles for the city and hotel image sliders */
.adi-inns-hmp-top-city-swiper-nav-btn,
.adi-inns-hmp-top-hotel-image-swiper button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  color: #34495e;
  border: none;
  cursor: pointer;
  padding: 0 0 4px 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.8;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.adi-inns-hmp-top-city-swiper-nav-btn:hover,
.adi-inns-hmp-top-hotel-image-swiper button:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  background-color: rgba(255, 255, 255, 0.6);
}

.adi-inns-hmp-top-city-prev-btn {
  left: 10px;
}

.adi-inns-hmp-top-city-next-btn {
  right: 10px;
}

.adi-inns-hmp-top-city-card,
.adi-inns-hmp-top-hotel-card {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: center;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

.adi-inns-hmp-top-city-card {
  position: relative;
  width: 250px; /* Needed for absolute positioning of overlay */
}
.adi-inns-hmp-top-hotel-card {
  width: 100%;
}
.adi-inns-hmp-top-city-card:hover,
.adi-inns-hmp-top-hotel-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.adi-inns-hmp-top-city-image {
  width: 100%;
  height: 150px;

  object-fit: cover;
  display: block;
  transition: transform 0.3s ease-in-out;
}

.adi-inns-hmp-top-hotel-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
  flex-shrink: 0;
}

.adi-inns-hmp-top-hotel-card-content {
  padding: 1.5rem;
  text-align: center;
}

/* Specific style for h3 inside hotel card content */
.adi-inns-hmp-top-hotel-card-content h3 {
  margin-top: 0;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 0.5rem 0;
}

.adi-inns-hmp-top-hotel-card-content p {
  font-size: 1rem;
  margin: 0;
  color: #7f8c8d;
}

.adi-inns-hmp-top-hotel-card .adi-inns-hmp-top-hotel-card-content {
  text-align: left;
  padding-top: 0;
}

.adi-inns-hmp-top-hotel-image-swiper {
  position: relative;
  overflow: hidden;
}

.adi-inns-hmp-top-hotel-image-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.adi-inns-hmp-top-hotel-image-swiper .adi-inns-hmp-top-hotel-prev-btn {
  left: 10px;
}

.adi-inns-hmp-top-hotel-image-swiper .adi-inns-hmp-top-hotel-next-btn {
  right: 10px;
}

/* Styles for the rating label */
.adi-inns-hmp-top-hotel-rating-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  z-index: 5;
}

.adi-inns-hmp-top-hotel-rating-label .adi-inns-hmp-top-hotel-star-icon {
  color: #f1c40f;
}

/* Styles for the hotel info overlay */
.adi-inns-hmp-top-hotel-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  padding: 1rem;
  padding-top: 3rem; /* Extra padding to fade in the gradient */
  color: white;
  z-index: 4;
}

/* Specific style for h3 inside hotel info overlay */
.adi-inns-hmp-top-hotel-info-overlay h3 {
  margin-top: 0;
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0;
  color: white;
}

/* Styles for the city name overlay */
.adi-inns-hmp-top-city-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  padding: 1.5rem 1rem;
  color: white;
  z-index: 4;
  text-align: center;
}

/* Specific style for h3 inside city info overlay */
.adi-inns-hmp-top-city-info-overlay h3 {
  margin-top: 0;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0;
  color: white;
}

.adi-inns-hmp-top-hotel-features-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  cursor: grab;
}

.adi-inns-hmp-top-hotel-features-list::-webkit-scrollbar {
  display: none;
}

.adi-inns-hmp-top-hotel-features-list.adi-inns-hmp-active {
  cursor: grabbing;
}

.adi-inns-hmp-top-hotel-features-list li {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  display: inline-block;
  font-size: 0.875rem;
  color: #ecf0f1;
  flex-shrink: 0; /* Prevents shrinking */
  backdrop-filter: blur(4px);
}

/* New spinner animation CSS */
.adi-inns-hmp-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #2c3e50;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 2rem auto; /* Center the spinner */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Animation Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Apply animation to hotel cards */
.adi-inns-hmp-top-hotel-card {
  animation: fadeInUp 0.5s ease-out forwards;
}
.adi-inns-listing-redirect-btn-container {
  display: flex;
  justify-content: flex-end;
}
/* .adi-inns-listing-redirect-btn {
  border: none;
  background-color: transparent;
  color: red;
} */
.adi-inns-listing-redirect-btn {
  /* Box model */
  border: 2px solid #007bff;
  border-radius: 5px;
  padding: 8px 24px;

  /* Typography */
  font-family: "Segoe UI", "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #007bff;
  text-decoration: none;
  text-transform: uppercase;

  /* Interaction */
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.adi-inns-listing-redirect-btn:hover {
  background-color: #007bff;
  color: #fff;
}
/* NEW ADI INNS SEARCH BAR STYLING  */
/* .adi-inns-user-search-bar-container {
  width: 100%;
} */
.adi-inns-user-search-bar-wrapper {
  padding: 20px 60px;
  width: 100%;
  margin-bottom: 15px;
}
.search-bar-input-pref-search-container-wrapper {
  background-color: #f8f7f9;
  position: relative;
  width: 100%;
  padding: 28px 28px 50px 28px;
  /* background-color: white; */
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
.search-bar-input-pref-search-container {
  width: 100%;
  position: relative;
  max-width: 900px;
  background-color: transparent;
  width: 100%;
}
.adi-inns-user-search-container {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;

  padding: 10px 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.adi-inns-user-search-icon {
  height: 20px;
  width: 20px;
  margin-right: 10px;
}

.adi-inns-user-search-input {
  flex-grow: 1;
  border: none;
  outline: none;
  font-size: 16px;
  color: #333;
}
.adi-inns-search-bar-search-btn {
  position: absolute;
  display: block;
  bottom: -15%;
  width: 100%;
  max-width: 490px;
  font-size: 20px;
  padding: 13px 15px;
  font-size: 24px;
  background: linear-gradient(92deg, #53b2fe, #065af3);
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  border: none;
  cursor: pointer;
  margin-top: auto;
}
.adi-inns-search-bar-search-btn:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}
.adi-inns-mic-btn-gr {
  background: linear-gradient(92deg, #53b2fe, #065af3);
}
.adi-inns-user-search-suggestions-container {
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;
  left: 0;
  top: 70px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  z-index: 200;
  height: 200px;
}
/* STYLING FOR HOTEL REVIEW FORM */
.adi-inns-user-b-form-review-form-container {
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
  max-width: 600px;
  width: 100%;
}

.adi-inns-user-b-form-heading {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.adi-inns-user-b-form-form-group {
  margin-bottom: 20px;
}

.adi-inns-user-b-form-form-group label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: #555;
  margin-bottom: 8px;
}

.adi-inns-user-b-form-form-group input,
.adi-inns-user-b-form-form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box; /* To include padding and border in the element's total width and height */
}

.adi-inns-user-b-form-form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.adi-inns-user-b-form-star-rating {
  display: flex;
  justify-content: center;
  gap: 5px;
  font-size: 30px;
  cursor: pointer;
  user-select: none;
  margin-right: 20px;
}

.adi-inns-user-b-form-star {
  color: #ccc;
  transition: color 0.2s ease-in-out;
}

.adi-inns-user-b-form-star.filled {
  color: #ffd700;
}

.adi-inns-user-b-form-star-rating:hover .adi-inns-user-b-form-star {
  color: #ffd700;
}

.adi-inns-user-b-form-star-rating
  .adi-inns-user-b-form-star:hover
  ~ .adi-inns-user-b-form-star {
  color: #ccc;
}

.adi-inns-user-b-form-submit-button {
  display: block;
  width: 100%;
  padding: 15px;
  background-color: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.adi-inns-user-b-form-submit-button:hover {
  background-color: #0056b3;
}
.adi-inns-user-b-form-form-group-rating-container label,
div {
  margin: 0;
}
.adi-inns-user-b-anonymous-review-checkbox-container {
  display: flex;
  align-items: center;
  background-color: white;
  margin-bottom: 20px;
  border-radius: 8px;
}

.adi-inns-user-b-anonymous-review-checkbox-container input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  position: relative;
  transition: all 0.2s ease-in-out;
}

.adi-inns-user-b-anonymous-review-checkbox-container
  input[type="checkbox"]:checked {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.adi-inns-user-b-anonymous-review-checkbox-container
  input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.adi-inns-user-b-anonymous-review-checkbox-container label {
  user-select: none;
  margin-left: 0.75rem;
  font-size: 1rem;
  color: #333;
  cursor: pointer;
}
/* media queries for responsiveness */
@media (min-width: 360px) and (max-width: 767px) {
  .adi-inns-hmp-content {
    padding: 0;
  }
  .adi-inns-hmp-section-title {
    font-size: 1rem;
    color: var(--color-primary);
  }
  .adi-inns-hmp-page-title {
    font-size: 18px;
    color: var(--color-link);
  }
  .adi-inns-listing-redirect-btn {
    padding: 3px 5px;
    font-size: 12px;
  }
  .adi-inns-user-search-pref-select-wrapper input {
    margin-left: 0;
  }
  .adi-inns-check-in-check-out-divs {
    display: none;
  }
  .adi-inns-user-b-map-card {
    overflow: hidden;
    padding-right: 10px;
  }
  #adi-inns-user-b-map {
    height: 250px;
    width: 100%;
    margin: 0 10px 10px 10px;
  }
  .adi-inns-user-b-title-rating-container {
    flex-direction: column;
  }
  .adi-inns-user-b-info-card-rating {
    display: none;
  }
  .adi-inns-user-b-map-card,
  .adi-inns-user-b-both-swipers {
    width: 100%;
  }
  .adi-inns-user-search-bar-wrapper {
    display: none;
  }
  .adi-inns-user-header {
    margin-bottom: 0;
    padding-top: 0;
    margin-top: 0;
  }
  .adi-inns-user-comparison-grid {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media (min-width: 360px) and (max-width: 400px) {
  .adi-inns-hmp-page-titles {
    flex-direction: column;
  }
}
@media (min-width: 768px) and (max-width: 993px) {
  .adi-inns-user-search-pref-input-section {
    flex-wrap: wrap;
  }
  .adi-inns-user-search-pref-select-wrapper {
    min-width: 100%;
  }
}
/* Responsive design */
/* @media (max-width: 768px) {
  body {
    padding: 1rem;
  }
  .adi-inns-hmp-container {
    padding: 1rem;
  }
  .adi-inns-hmp-page-title {
    font-size: 2rem;
  }
  .adi-inns-hmp-section-title {
    font-size: 1.5rem;
  }
  .adi-inns-hmp-top-city-card,
  .adi-inns-hmp-top-hotel-card {
    width: 250px;
  }
  .adi-inns-hmp-top-city-swiper-nav-btn,
  .adi-inns-hmp-top-hotel-image-swiper button {
    width: 30px;
    height: 30px;
  }
  .adi-inns-hmp-top-city-swiper-wrapper {
    padding: 0 40px;
  }
} */
.adi-menu-modification-body {
  padding: 30px 80px 30px 80px;
  letter-spacing: 0;
}
.adi-menu-modification-content {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
  /* box-shadow: var(--shadow-default); */
  padding: 10px;
  max-height: 700px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.your-menu-heading {
  margin: 0;
}
.adi-menu-modification-dishes-container {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  width: 100%;
}
.adi-menu-modification-dish-card {
  width: 100%;
  /* max-width: 400px; */
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 8px 12px 8px 8px;

  gap: 16px;
  transition: transform 0.2s ease-in-out;
  border: 1px solid #e5e7eb;
}
.adi-menu-modification-dish-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}
.adi-menu-modification-card-img-container {
  width: fit-content;
  min-width: 79.999px;
  max-width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  overflow: hidden;
}
.adi-menu-modification-card-img {
  /* width: 80px; */
  min-width: inherit;
  max-width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}
.adi-menu-modification-dish-card-name {
  width: 100%;
  font-size: 1.25rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 200px;
}
.adi-menu-modification-dish-card-details-btns {
  width: 100%;
  justify-content: space-between;
}
.adi-menu-modification-dish-card-price {
  font-weight: 600;
  color: var(--color-primary);
}
.adi-menu-edit-modal-image {
  height: 300px;
}

.adi-menu-edit-modal-details-container,
.adi-menu-edit-form,
.adi-menu-edit-delete-text,
.adi-add-dish-modal-from {
  padding: 0 20px;
}

/* media queries */
@media (min-width: 360px) and (max-width: 768px) {
  .adi-mobile-search-modal-content {
    padding: 10px;
  }
  .adi-menu-modification-body {
    padding: 10px;
  }
  .adi-menu-adi-add-dish-modal-content,
  .adi-menu-adi-add-dish-modal-dialog,
  .adi-menu-adi-edit-dish-modal-dialog,
  .adi-menu-adi-edit-dish-modal-content {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0;
  }
  /* .adi-menu-adi-edit-modal-body {
    padding: 0 !important;
    padding-inline: 0 !important;
    flex: auto auto auto !important;
  } */
  .adi-menu-adi-edit-modal-footer {
    justify-content: flex-start;
  }
  .adi-menu-adi-add-dish-modal-content,
  .adi-menu-adi-edit-dish-modal-content {
    padding: 0 0 50px 0;
  }
}
.adi-plaza-page-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 60px;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
/* Main Category Container */
.adi-plaza-container {
  position: relative;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  padding: 10px 0;
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.adi-plaza-main-title {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin: 0 0 15px 20px;
}

/* --- Main Category Swiper Wrapper (Two Rows Grid) --- */
.adi-plaza-swiper-main-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  height: fit-content;

  overflow-x: scroll;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 10px 20px;
}
.adi-plaza-swiper-main-wrapper::-webkit-scrollbar {
  display: none;
}

/* --- Individual Main Category Card --- */
.adi-plaza-card-main {
  width: 150px;
  height: 140px;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: inherit;
  background-color: #fcfcfc;
}

.adi-plaza-card-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
  border-color: #007bff;
  background-color: #eaf5ff;
}

.adi-plaza-card-main-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  margin-bottom: 8px;
  border: 3px solid #f0f0f0;
  transition: border-color 0.2s;
}

.adi-plaza-card-main-title {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  padding: 0 5px;
}

/* --- Swiper Scroll Buttons (Main) --- */
.adi-plaza-swiper-button {
  position: absolute;
  top: 50%;
  /* Base transform for centering */
  transform: translateY(-50%);
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  /* UPDATED: Added transform to transition for smooth scaling */
  transition: background-color 0.2s, opacity 0.3s, transform 0.2s ease-out;
  outline: none;
}

/* NEW RULE: Scale up when the main container is hovered */
.adi-plaza-container:hover .adi-plaza-swiper-button:not(.hidden) {
  transform: scale(1.15) translateY(-50%);
}

.adi-plaza-swiper-button:hover {
  background-color: #e6e6e6;
  /* Ensure the individual button hover provides slightly stronger feedback */
  transform: scale(1.25) translateY(-50%);
}
.adi-plaza-swiper-button i {
  color: #555;
  font-size: 18px;
}
.adi-plaza-swiper-button.left {
  left: -22px;
}
.adi-plaza-swiper-button.right {
  right: -22px;
}
.adi-plaza-swiper-button.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Media query for mobile: hide buttons for better touch scrolling */
@media (max-width: 600px) {
  .adi-plaza-swiper-button {
    display: none;
  }
  .adi-plaza-container {
    padding: 10px;
    box-shadow: none;
  }
  .adi-plaza-swiper-main-wrapper {
    padding: 0;
    height: fit-content;
  }
}

/* --- Modal Specific Styles (Subcategories) --- */

/* Custom class for modal header */
.adi-plaza-modal-header {
  border-bottom: none;
  padding-bottom: 10px;
}

/* Custom class for modal body */
.adi-plaza-modal-body {
  padding: 0;
}

.adi-plaza-modal-scroll-controls {
  padding: 0; /* Ensures the scroll container is tight to the edges */
}

/* Container for Subcategory Cards */
.adi-plaza-swiper-sub-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 20px;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.adi-plaza-swiper-sub-wrapper::-webkit-scrollbar {
  display: none;
}

/* Individual Subcategory Card */
.adi-plaza-card-sub {
  flex: 0 0 auto;
  min-width: 120px;
  width: 100%;
  height: 120px;
  /* margin-right: 15px; */
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #333;
  background-color: #fcfcfc;
}
/* .adi-plaza-card-sub:first-child {
  margin-left: 20px;
}
.adi-plaza-card-sub:last-child {
  margin-right: 20px;
} */

.adi-plaza-card-sub:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #eaf5ff;
}

.adi-plaza-card-sub-img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  margin-bottom: 5px;
}

.adi-plaza-card-sub-title {
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}

/* Modal Swiper Scroll Buttons */
.adi-plaza-swiper-modal-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: opacity 0.3s;
}
.adi-plaza-swiper-modal-button.left {
  left: 0;
}
.adi-plaza-swiper-modal-button.right {
  right: 0;
}
.adi-plaza-swiper-modal-button.hidden {
  opacity: 0;
  pointer-events: none;
}

.adi-plaza-swiper-modal-button i {
  font-size: 14px;
  color: #555;
}
.adi-plaza-toastify-message {
  position: fixed;
  bottom: 20px; /* Bottom right corner */
  right: 20px;
  width: 350px; /* Fixed width for the message card */
  height: 70px;
  z-index: 1000;

  /* Modern Styles */
  border-radius: 12px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.05);
  border: none;
  overflow: hidden;

  /* Initial state: Off-screen to the right */
  transform: translateX(110%);
  /* Transition for the slide effect (0.4s is a good speed for toasts) */
  transition: transform 0.4s ease-out;
  opacity: 0;
  visibility: hidden;

  /* Content Layout */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  font-size: 16px;
  color: #4a4a4a;

  box-sizing: border-box;
}

/* State when the message is visible (Slide In) */
.adi-plaza-toastify-message.show {
  transform: translateX(0); /* Move to its final position */
  opacity: 1;
  visibility: visible;
}

/* Style for the green checkmark icon container */
.adi-plaza-toastify-success-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e8f5e9; /* Light green background for modern pop */
}

/* Style for the message text content */
.adi-plaza-toastify-text-content {
  flex-grow: 1;
  text-align: left;
  line-height: 1.4;
  padding-top: 3px;
}

/* --- Progress Bar Styles --- */

/* The container for the progress bar, positioned at the bottom */
.adi-plaza-toastify-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px; /* Thin bar height */
  background-color: #e0e0e0; /* Light background for the track */
}

/* The filling bar that animates */
.adi-plaza-toastify-progress-bar {
  height: 100%;
  background-color: #4caf50; /* Green fill */
  width: 100%; /* Start full */
}

/* Keyframe animation for the countdown effect */
@keyframes adi-plaza-toastify-progress-animation {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* Apply the animation when the toast is visible */
.adi-plaza-toastify-message.show .adi-plaza-toastify-progress-bar {
  /* 4s duration (from VISIBILITY_DURATION_MS), linear timing, forwards keeps it at 0% */
  animation: adi-plaza-toastify-progress-animation 4s linear forwards;
}
/* Utility Colors - NOW PREFIXED */
.adi-plaza-color-danger {
  color: #dc3545;
}
.adi-plaza-color-info {
  color: #0dcaf0;
}
.adi-plaza-color-warning {
  color: #ffc107;
}
.adi-plaza-color-success {
  color: #198754;
}
.adi-plaza-color-primary {
  color: #007bff;
}
.adi-plaza-color-gray-dark {
  color: #6c757d;
}

/* NEW: Main container for the overall layout. Now a single column. */
#plaza-main-wrapper {
  display: grid;
  gap: 30px;
  padding-top: 20px;
  grid-template-columns: 1fr;
}

/* === MODULAR CONTENT STYLES (The only remaining column) === */

.adi-plaza-modular-content {
  display: flex;
  width: 100%;
  margin-top: 12px;

  align-items: center;
  flex-direction: column;
  gap: 12px;
}

.adi-plaza-content-block-card {
  width: 100%;
  max-width: 1200px;
  background-color: #fff;
  padding: 20px;
  border-radius: 2px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.adi-plaza-content-block-card .swiper {
  height: fit-content;
  padding-right: 100px;
}
.adi-plaza-content-block-title {
  font-size: 18px;
  font-weight: 700;
  color: #007bff;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
/* Icon spacing using margin-right */
.adi-plaza-content-block-title span.icon {
  margin-right: 10px;
  font-size: 1.2em;
}

/* Subtitle for the sub-blocks (Hot Right Now / Trending in Location) */
.adi-plaza-sub-block-title {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* --- Trending List Styles --- */
.adi-plaza-trending-blocks-wrapper {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .adi-plaza-trending-blocks-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  #adi-plaza-hot-right-now-block {
    border-right: 1px solid #eee; /* Add a subtle divider */
    padding-right: 20px;
  }
  #adi-plaza-trending-in-location-block {
    padding-left: 20px;
  }
}

.adi-plaza-trending-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.adi-plaza-trending-item {
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
}
.adi-plaza-trending-item:last-child {
  border-bottom: none;
}
.adi-plaza-trending-item a {
  color: #333;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.adi-plaza-trending-item a:hover {
  color: #007bff;
  /* text-decoration: underline; */
}

/* Badge for Hot Right Now */
.adi-plaza-trending-badge {
  font-size: 11px;
  font-weight: 600;
  background-color: #ffeded;
  color: #ff4d4d;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Badge for Trending in Location */
.adi-plaza-location-badge {
  font-size: 11px;
  font-weight: 600;
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 3px 8px;
  border-radius: 4px;
}

/* --- Swiper Styles for Testimonials --- */
.adi-plaza-testimonial-swiper-wrapper {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  width: 100%;
}

.adi-plaza-testimonial-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 5px;
}

.adi-plaza-testimonial-quote {
  background-color: #f0faff;
  border-left: 4px solid var(--color-primary);
  padding: 15px;
  border-radius: 8px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.adi-plaza-testimonial-quote p {
  font-style: italic;
  font-size: 15px;
  margin: 0 0 10px 0;
  color: #333;
  line-height: 1.5;
}
.adi-plaza-testimonial-quote .author {
  display: block;
  text-align: right;
  font-weight: 600;
  font-style: normal;
  font-size: 13px;
  color: var(--color-link);
}

/* Dots Indicator */
.adi-plaza-testimonial-dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.adi-plaza-dot {
  height: 8px;
  width: 8px;
  background-color: #ccc;
  border-radius: 50%;
  display: inline-block;
  margin: 0 4px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}

.adi-plaza-dot.active {
  background-color: var(--color-link);
  transform: scale(1.2);
}

/* --- Affiliate Tools/Services --- */

/* @media (max-width: 600px) {
  .adi-plaza-affiliate-widget {
    flex-basis: 48%;
    margin-bottom: 5px;
  }
} */

/* --- Community Poll Styles --- */
.adi-plaza-poll-question {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 15px;
  color: #333;
}
.adi-plaza-poll-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adi-plaza-poll-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f9f9f9;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  transition: background-color 0.2s;
}
.adi-plaza-poll-btn:hover:not(.voted) {
  background-color: #eaf3ff;
  border-color: #007bff;
}
.adi-plaza-poll-btn.voted {
  background-color: #d1e7fd;
  border-color: #007bff;
  font-weight: 700;
  cursor: default;
}

.adi-plaza-poll-results {
  margin-top: 15px;
  display: none;
}
.adi-plaza-result-bar-container {
  margin-bottom: 8px;
}
.adi-plaza-result-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: #555;
  margin-bottom: 3px;
}
.adi-plaza-poll-result-bar {
  height: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
}
.adi-plaza-poll-result-fill {
  height: 100%;
  background-color: #007bff;
  transition: width 0.5s ease-out;
}

/* --- Tips & How-Tos Styles --- */
.adi-plaza-tip-callout {
  background-color: #f0faff;
  border-left: 5px solid var(--color-primary);
  padding: 15px;
  border-radius: 8px;
  color: #333;
}
.adi-plaza-tip-callout p {
  margin: 0 0 5px 0;
  font-size: 14px;
  line-height: 1.4;
}
.adi-plaza-tip-callout a {
  color: #007bff;
  font-weight: 600;
  text-decoration: none;
}
.adi-plaza-tip-callout a:hover {
  text-decoration: underline;
}

/* --- Mini Dashboard Styles --- */
.adi-plaza-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.adi-plaza-dashboard-widget {
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  transition: box-shadow 0.2s;
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  font-weight: 600;
  display: block;
}
.adi-plaza-dashboard-widget:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-size: 1rem;
}
.adi-plaza-dashboard-widget .icon {
  font-size: 20px;
  color: #1890ff;
  margin-bottom: 5px;
  display: block;
}

/* Cleanup for utility classes used in the HTML - NOW PREFIXED */
.adi-plaza-text-center {
  text-align: center;
}
.adi-plaza-text-muted {
  color: #6c757d;
  font-size: 0.85em;
}
.adi-plaza-d-block {
  display: block;
}
.adi-plaza-mt-3 {
  margin-top: 1rem;
}
/* Trending Categories Grid */
.adi-plaza-trending-categories-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* Trending Category Card */
.adi-plaza-trending-category-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.adi-plaza-trending-category-card:hover {
  background: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.adi-plaza-trending-category-card img {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
}

.adi-plaza-trending-category-card span {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
/* Partner Services Swiper */
.partnerServicesSwiper {
  position: relative;
  width: 100%;
  padding: 10px 0;
}

.partnerServicesSwiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  padding-left: 40px;
  padding-right: 100px;
}

.partnerServicesSwiper .swiper-slide {
  flex: 0 0 auto;
  width: fit-content; /* adjust size */
  text-align: center;
}
/* Partner Services Swiper Navigation */
.partnerServicesSwiper .adi-plaza-swiper-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.partnerServicesSwiper .adi-plaza-swiper-button.left {
  left: 0; /* push left button outside */
}

.partnerServicesSwiper .adi-plaza-swiper-button.right {
  right: 0; /* push right button outside */
}

.partnerServicesSwiper .adi-plaza-swiper-button i {
  font-size: 14px;
  color: #555;
}

.adi-plaza-affiliate-widget {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  transition: box-shadow 0.2s, background 0.2s;
  white-space: normal; /* allow wrapping */
  word-break: break-word; /* break long words if needed */
}

.adi-plaza-affiliate-widget:hover {
  background: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.adi-plaza-affiliate-widget .icon {
  font-size: 18px;
  flex-shrink: 0;
}
.adi-plaza-affiliate-widget > span {
  text-wrap: nowrap;
}
/* Media query for mobile: hide buttons for better touch scrolling */
@media (max-width: 600px) {
  .adi-plaza-swiper-button {
    display: none;
  }
  .adi-plaza-content-block-card .adi-plaza-swiper-button {
    display: none;
  }
  .partnerServicesSwiper .swiper-wrapper {
    padding-left: 8px;
  }
  .adi-plaza-container {
    padding: 10px;
    box-shadow: none;
  }
  .adi-plaza-swiper-main-wrapper {
    padding: 0;
    height: fit-content;
  }
  .adi-plaza-trending-categories-cards-container {
    gap: 8px;
  }
}
.adi-plaza-subcategories-modal-dialog {
  display: flex;
  justify-content: center;
  width: 100vw !important;
}
.adi-plaza-subcategories-modal-content {
  width: calc(100vw - 10%);
  height: fit-content;
}
.adi-plaza-modal-body {
  width: 100%;
}
.adi-plaza-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.adi-plaza-pagination-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: #f5f5f5;
  color: #333;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.adi-plaza-pagination-btn:hover:not(.active):not(:disabled) {
  background: #e9ecef;
}

.adi-plaza-pagination-btn.active {
  background: var(--color-link);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

.adi-plaza-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.adi-plaza-pagination-arrow {
  font-weight: bold;
  font-size: 16px;
  background: #fff;
  border: 1px solid #ddd;
}

.adi-plaza-pagination-dots {
  padding: 6px 10px;
  color: #666;
  font-size: 14px;
}
.adi-plaza-fade-out {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.adi-plaza-fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.adi-plaza-card-hidden {
  opacity: 0;
  transform: translateY(20px);
}

.adi-plaza-card-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.adi-inns-filters-toggle-btn {
  position: relative;
}

.adi-inns-filters-toggle-btn .adi-plaza-filters-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #dc3545; /* red dot */
  border-radius: 50%;
  display: none; /* hidden by default */
}

.adi-inns-filters-toggle-btn .adi-plaza-filters-indicator.active {
  display: block;
}
.adi-plaza-detailed-view-spec-slider-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.adi-plaza-detailed-view-spec-list-wrapper {
  overflow: hidden; /* hides scroll bar */
  flex: 1;
}
.adi-plaza-detailed-view-spec-slider-container {
  position: relative; /* needed for absolute buttons */
  display: flex;
  align-items: center;
  width: 100%;
}

.adi-plaza-btn-slide-light {
  /* Common Existing Styles */
  padding: 2px 12px 4px 12px !important;
  /* Base Appearance */
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;

  /* Subtle Box Shadow */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  /* Smooth Transitions */
  transition: all 0.2s ease-in-out;
}

/* Hover Effect */
.adi-plaza-btn-slide-light:hover {
  background-color: #f7f7f7;
  border-color: #cccccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Active/Clicked State */
.adi-plaza-btn-slide-light:active {
  background-color: #eeeeee;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

.adi-plaza-detailed-view-spec-next-btn {
  right: -20px;
  margin-left: 10px;
}

.adi-plaza-detailed-view-spec-prev-btn {
  left: -20px;
  margin-right: 10px;
}
#specList {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;

  -ms-overflow-style: none; /* IE */
  scrollbar-width: none; /* Firefox */
}

#specList::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

#specList li {
  width: 100%;
  padding: 8px 12px;
  background: #f4f4f4;
  border-radius: 6px;
  white-space: nowrap;
  user-select: none;
}

.adi-plaza-detailed-view-spec-nav {
  display: none; /* hidden by default */
  background: #333;
  color: #fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 20px;
  z-index: 1;
  align-items: center;
  justify-content: center;
}

.adi-plaza-detailed-view-spec-nav:disabled {
  opacity: 0.5;
  cursor: default;
}
.adi-plaza-detailed-view-reviews-container-section-container {
  padding: 40px 0px 0px 20px;
  width: 100%;
  margin: 0px auto;
  border-left: 1px solid #eeeeee; /* adi-border-color */
  /* border-radius: 12px; */
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); 
  background-color: #fafafa; */
}

.adi-plaza-detailed-view-reviews-container-section-container h2 {
  color: #333333; /* adi-text-dark */
  border-bottom: 3px solid #1f4f8f; /* adi-primary-dark */
  padding-bottom: 12px;
  margin-bottom: 25px;
  font-size: 1.5rem;
  font-weight: 700;
}

/* ========================================================= */
/* MODERN AVERAGE RATING DISPLAY (Horizontal Badge) */
/* ========================================================= */

.adi-plaza-detailed-view-reviews-container-average-rating {
  margin-bottom: 35px;
  text-align: left;
}

.adi-plaza-detailed-view-reviews-container-rating-badge-box {
  display: inline-flex; /* Use inline-flex for fit-content width */
  align-items: stretch;
  background-color: #ffffff; /* adi-card-bg */
  border: 1px solid #eeeeee; /* adi-border-color */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.adi-plaza-detailed-view-reviews-container-rating-badge-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.adi-plaza-detailed-view-reviews-container-rating-score-pill {
  background-color: #3b82f6; /* adi-primary-dark */
  color: white;
  padding: 15px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.adi-plaza-detailed-view-reviews-container-rating-score-pill
  .adi-plaza-detailed-view-reviews-container-score {
  font-size: 2.5em;
  font-weight: 800;
  line-height: 1;
}

.adi-plaza-detailed-view-reviews-container-rating-score-pill
  .adi-plaza-detailed-view-reviews-container-rating-label {
  font-size: 0.8em;
  opacity: 0.9;
  margin-top: 3px;
  font-weight: 400;
}

.adi-plaza-detailed-view-reviews-container-rating-details {
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #e6f0fa; /* adi-primary-light */
}

.adi-plaza-detailed-view-reviews-container-star-group {
  white-space: nowrap;
  margin-bottom: 5px;
  line-height: 1;
}

.adi-plaza-detailed-view-reviews-container-star {
  font-size: 1.4em;
  margin: 0 1px;
  display: inline-block;
  line-height: 1;
}

.adi-plaza-detailed-view-reviews-container-star.adi-plaza-detailed-view-reviews-container-filled {
  color: #ffc107; /* adi-rating-gold */
}

.adi-plaza-detailed-view-reviews-container-star.adi-plaza-detailed-view-reviews-container-empty {
  color: #dcdcdc; /* Lighter empty star */
  opacity: 0.8;
}

.adi-plaza-detailed-view-reviews-container-count {
  font-size: 0.9em;
  color: #333333; /* adi-text-dark */
  font-weight: 500;
}

/* Individual Review Cards */
.adi-plaza-detailed-view-reviews-container-reviews-list {
  display: grid;
  gap: 20px;
}

.adi-plaza-detailed-view-reviews-container-review-card {
  padding: 20px;
  border: none;
  border-radius: 8px;
  background-color: #ffffff; /* adi-card-bg */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); /* Subtle lift */
  transition: box-shadow 0.3s ease;
}

.adi-plaza-detailed-view-reviews-container-review-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* More pronounced lift on hover */
}

.adi-plaza-detailed-view-reviews-container-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.9em;
}

.adi-plaza-detailed-view-reviews-container-author {
  font-weight: 600;
  color: #333333; /* adi-text-dark */
  font-size: 1.1em;
}

.adi-plaza-detailed-view-reviews-container-date {
  color: #777777; /* adi-text-muted */
  font-size: 0.85em;
}

.adi-plaza-detailed-view-reviews-container-review-rating {
  margin-bottom: 12px;
  line-height: 1;
}

.adi-plaza-detailed-view-reviews-container-review-comment {
  margin-bottom: 0;
  color: #333333; /* adi-text-dark */
  line-height: 1.6;
}
.adi-plaza-detailed-view-reviews-wrapper {
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding-right: 20px;
}
.adi-plaza-detailed-view-reviews-wrapper
  .adi-inns-user-b-form-form-group
  input[type="text"] {
  background-color: #f3f4f6 !important;
}
/* sania */
.adi-plaza-create-ad-modal-dialog #propertiesContainer input {
  padding: 0.4rem 0.75rem !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  border-radius: 0.375rem !important;
  background-color: #fff !important;
  width: 100% !important;
  border: 1px solid #ced4da !important;
}
.adi-plaza-create-ad-modal-dialog #propertiesContainer input {
  margin-bottom: 15px !important;
}
.adi-plaza-create-ad-modal-dialog #propertiesContainer input:last-child {
  margin-bottom: 0 !important;
}

.adi-plaza-create-ad-modal-dialog .modal-content {
  padding: 0 !important;
}
.adi-plaza-create-ad-modal-dialog .modal-header,
.adi-plaza-create-ad-modal-dialog .modal-body {
  padding: 20px;
  background-color: #fff !important;
}
.adi-plaza-create-ad-modal-dialog .modal-body {
  box-shadow: none !important;
  padding-top: 0 !important;
}
.adi-plaza-entries-container {
  box-shadow: none !important;
}
.adi-plaza-entries-row {
  margin-top: -5px !important;
  align-items: center !important;
}
.adi-plaza-entries-switch {
  margin-bottom: 0 !important;
}
.adi-menu-adi-add-dish-modal-dialog .adi-add-dish-modal-from {
  padding-inline: 0 !important;
  margin-top: -5px !important;
}
.adi-menu-adi-add-dish-modal-dialog .adi-add-dish-modal-from .form-label {
  font-size: 1rem !important;
}
.adi-menu-adi-edit-dish-modal-content {
  padding: 0 !important;
}
.adi-menu-adi-edit-dish-modal-content .modal-header {
  padding: 20px;
}
/* .adi-inns-user-mobile-hotel-search-location-search-group{
  padding-left: 0 !important;
  margin-top: 5px !important;
 }
 .adi-inns-user-mobile-hotel-search-location-display-group,
 .adi-inns-user-mobile-hotel-search-input-group{
   padding-left: 0 !important;
 } */
.adi-inns-user-mobile-search-modal-content,
.adi-inns-user-mobile-search-modal-dialog .modal-content {
  padding-inline: 0 !important;
  padding-right: 20px !important;
}
.adi-inns-user-mobile-search-modal-content .modal-header,
.adi-inns-user-mobile-search-modal-dialog .modal-header {
  padding-inline: 15px !important;
}
.adi-inns-user-b-form-review-form-container input {
  background-color: #f3f4f6 !important;
}
.adi-inns-user-header .adi-inns-user-search-pref-input-section {
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
#modalSubcategoryWrapper {
  padding-inline: 0 !important;
}
.adi-Jobs-MyJobs-Listings-Filter-SearchModal-body input {
  padding-inline: 12px !important;
}
/* Responsive adjustments */
@media (max-width: 600px) {
  .adi-plaza-detailed-view-reviews-container-section-container {
    margin: 20px 10px;
    padding: 15px;
  }

  .adi-plaza-detailed-view-reviews-container-rating-badge-box {
    width: 100%; /* Full width on small screens */
    flex-direction: column;
  }

  .adi-plaza-detailed-view-reviews-container-rating-details {
    align-items: center;
  }
}
/* .adi-plaza-filters-modal {
} */
.adi-plaza-filters-modal-dialog {
  max-width: 60% !important;
  width: 90% !important;
}
.adi-plaza-create-ad-btn:hover {
  background-color: var(--color-primary);
}
/* .adi-plaza-create-ad-modal-dialog{
  max-width: 80% !important;
  width: 90% !important;
} */
/* .adi-plaza-filters-modal-content {
} */
.adi-plaza-filters-attributes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.adi-plaza-filters-modal-section {
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.adi-plaza-filters-modal-section-heading {
  /* 1. Base Styling: Typography & Layout */
  /* A sharp, professional font choice */
  font-size: 1.125rem; /* Slightly larger for clarity */
  font-weight: 600;
  color: #1f2937; /* Deep, professional blue-grey */

  /* 2. Label Appearance (Rectangle/Box) */
  display: inline-block;
  padding: 8px 12px;
  margin: 0 0 10px 0; /* Space below the heading */
  cursor: pointer;

  /* Initial State: Very minimal radius */
  border-radius: 4px; /* Slight, professional rounding */

  /* Key Professional Element: Subtle Bottom Line */
  border-bottom: 2px solid #e5e7eb; /* Light grey base line */

  /* Transition for Smooth Effect */
  transition: background-color 0.25s ease, border-bottom 0.25s ease,
    box-shadow 0.25s ease;
}

/* 3. Hover State: Interaction and Emphasis */
.adi-plaza-filters-modal-section-heading:hover {
  /* Highlight the Background */
  background-color: #f9fafb; /* A very light hover background */

  /* Emphasize the Border */
  border-bottom: 2px solid #3b82f6; /* Bold color on hover (e.g., a corporate blue) */

  /* Subtle "Lift" Effect */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Very light shadow for a lift */
}

/* Optional: Focus state for accessibility (if it's a focusable element) */
.adi-plaza-filters-modal-section-heading:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.adi-plaza-user-comparison-content {
  width: 95% !important;
}
/* --- Fully Transparent noUiSlider --- */
#priceRangeSlider {
  margin: 35px 5px 0px;
  background: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* === Remove any parent backgrounds === */
#priceRangeSlider .noUi-target,
#priceRangeSlider .noUi-connects,
#priceRangeSlider .noUi-base,
#priceRangeSlider .noUi-origin,
#priceRangeSlider .noUi-background {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* === Blue Active Track === */
#priceRangeSlider .noUi-connect {
  background: var(--bs-primary);
  border-radius: 8px;
  height: 6px;
  box-shadow: 0 0 8px rgba(13, 110, 253, 0.4);
  transition: all 0.3s ease;
}

/* === Track height / layout === */
#priceRangeSlider .noUi-base {
  height: 6px;
  border-radius: 8px;
}

/* === Handles (thumbs) === */
#priceRangeSlider .noUi-handle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--bs-primary);
  box-shadow: 0 2px 6px rgba(13, 110, 253, 0.25);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover / Focus */
#priceRangeSlider .noUi-handle:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 10px rgba(13, 110, 253, 0.4);
}

#priceRangeSlider .noUi-handle:focus,
#priceRangeSlider .noUi-handle:active {
  outline: none;
  box-shadow: 0 0 0 6px rgba(13, 110, 253, 0.2);
}

/* === Tooltips === */
#priceRangeSlider .noUi-tooltip {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 500;
  background: var(--bs-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#priceRangeSlider .noUi-tooltip::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: var(--bs-primary);
}

/* === Transparent Touch Area === */
#priceRangeSlider .noUi-touch-area {
  background: transparent !important;
  cursor: grab;
}

/* Optional subtle glow when active (modern browsers only) */
#priceRangeSlider:has(.noUi-active) .noUi-connect {
  box-shadow: 0 0 12px rgba(13, 110, 253, 0.6);
}
/* Hide the default handle bars in noUiSlider */
#priceRangeSlider .noUi-handle::before,
#priceRangeSlider .noUi-handle::after {
  display: none !important;
  content: none !important;
}
/* === ADI Plaza Independent Image Zoom View === */
#adiPlazaZoomSafeOverlay {
  position: fixed;
  top: 10%;
  right: calc(100vw - 99%);
  /* transform: translateY(-50%); */
  width: calc(100vw - 52%);
  height: calc(100vh - 40%);
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-size: 200%;
  background-position: center;
  display: none;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
  background-color: #fff;
}

@media (max-width: 992px) {
  #adiPlazaZoomSafeOverlay {
    display: none !important;
  }
}

/* media queires  */
@media (min-width: 360px) and (max-width: 768px) {
  .adi-plaza-page-body {
    padding: 10px;
  }
  .adi-plaza-detailed-view-container {
    padding: 0;
  }
  .adi-plaza-sub-categories-detailed-view-main-container {
    margin: 0px !important;
  }
  .adi-plaza-detailed-view-reviews-wrapper,
  .adi-plaza-sub-categories-detailed-view-right-container,
  .adi-plaza-sub-categories-detailed-view-main-container {
    box-shadow: none !important;
  }
  .adi-plaza-container {
    padding: 10px 8;
  }
  .adi-plaza-toastify-message {
    bottom: 70px; /* Bottom right corner */
    padding: 8px;
  }
  .adi-plaza-toastify-text-content {
    font-size: 12px;
  }
  .adi-plaza-subcategories-modal-content,
  .adi-plaza-subcategories-modal-dialog {
    padding: 0 12px;
  }
  .adi-plaza-swiper-main-wrapper {
    grid-template-rows: repeat(1, 1fr);
  }
  .adi-plaza-content-block-card {
    padding: 12px;
  }
  .adi-plaza-content-block-title {
    margin-bottom: 0;
  }
  .adi-plaza-main-title {
    font-size: 20px;

    margin: 0 0 15px 0px;
  }
  .adi-plaza-card-main-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
  }
  .adi-plaza-detailed-view-reviews-wrapper {
    flex-direction: column-reverse;
  }
  .adi-plaza-detailed-view-reviews-container-section-container {
    border-left: none;
  }
  .adi-plaza-filters-modal-dialog,
  .adi-plaza-create-ad-modal-dialog {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
  }
  .adi-plaza-filters-modal-content {
    border-radius: 0;
  }
}
/* ADI Inns page to Plaza*/
.adi-plaza-sub-categories-meta {
  flex-wrap: wrap;
  gap: 8px;
}
.adi-plaza-sub-categories-meta-infos {
  /* Shape & Spacing */
  display: inline-block;
  padding: 5px 14px;
  border-radius: 9999px; /* Ensures a perfect pill shape */

  /* Appearance */
  background-color: #f7f7f7;
  color: #343a40;
  font-size: 0.85rem;
  font-weight: 500;

  /* Soft Shadow */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef; /* Very light border for definition */
}
.adi-plaza-sub-categories-cards-img-container {
  max-height: 150px;
}
.adi-plaza-sub-categories-card-img {
  min-width: 100%;
}
.adi-plaza-sub-categories-features-comparison {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
.adi-plaza-sub-categories-comparison-description-container {
  padding-bottom: 40px;
}
.adi-plaza-sub-categories-comparison-price {
  font-size: 18px;
  font-weight: 700;
  color: #eb841d;

  width: 90%;

  position: absolute;
  bottom: 60px;
}
.adi-plaza-sub-categories-leaflet-popup-img-swiper {
  max-height: 200px;
}
.adi-plaza-user-header {
  margin-top: 0;
}
@media (min-width: 993px) {
  .adi-plaza-item-card {
    height: 100% !important;
  }
}

/* ADI Plaza Detailed View Styling */

.adi-plaza-sub-categories-detailed-view-main-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  margin: 20px auto;

  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.adi-plaza-sub-categories-detailed-view-left-container,
.adi-plaza-sub-categories-detailed-view-right-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
.adi-plaza-sub-categories-detailed-view-left-container {
  border-right: 1px solid #e0e0e0;
}
.adi-plaza-sub-categories-detailed-view-image-slider {
  position: relative;
  height: 350px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}
.adi-plaza-sub-categories-detailed-view-image-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  border-radius: 10px;
}
.adi-plaza-sub-categories-detailed-view-image-slider img.active {
  display: block;
  animation: fadeIn 0.6s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.adi-plaza-sub-categories-detailed-view-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.3s;
}
.adi-plaza-sub-categories-detailed-view-slider-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}
.adi-plaza-sub-categories-detailed-view-slider-btn.prev {
  left: 15px;
}
.adi-plaza-sub-categories-detailed-view-slider-btn.next {
  right: 15px;
}

.adi-plaza-sub-categories-detailed-view-specifications {
  background: #fff;
  padding: 20px;
  margin-top: 15px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.adi-plaza-sub-categories-detailed-view-specifications h3 {
  margin-top: 0;
  color: var(--color-link);
  font-size: 1.3rem;
  border-bottom: 2px solid #eee;
  padding-bottom: 8px;
  margin-bottom: 15px;
}

#adiPlazaDetailedMap {
  height: 350px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 5;
}

.adi-plaza-sub-categories-detailed-view-popup-slider {
  position: relative;
  text-align: center;
}
.adi-plaza-sub-categories-detailed-view-popup-slider img {
  width: 220px;
  height: 150px;
  object-fit: cover;
  display: none;
  border-radius: 8px;
}
.adi-plaza-sub-categories-detailed-view-popup-slider img.active {
  display: block;
}
.adi-plaza-sub-categories-detailed-view-popup-slider button {
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 6px 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}
.adi-plaza-sub-categories-detailed-view-popup-slider .prev {
  left: 5px;
}
.adi-plaza-sub-categories-detailed-view-popup-slider .next {
  right: 5px;
}
.adi-plaza-sub-categories-detailed-view-popup-slider .info {
  margin-top: 8px;
  font-size: 0.9rem;
  text-align: left;
  background: #f9f9f9;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.adi-plaza-sub-categories-detailed-view-popup-slider .info p {
  margin: 4px 0;
}
.adi-plaza-sub-categories-detailed-view-popup-slider .info p:last-child {
  color: #eb841d;
}
.adi-plaza-sub-categories-detailed-view-popup-slider .info b {
  color: var(--color-link);
}

.adi-plaza-sub-categories-detailed-view-details {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.adi-plaza-sub-categories-detailed-view-details h3 {
  margin-top: 0;
  font-size: 1.4rem;
  margin-bottom: 12px;
  color: var(--color-link);
}
.adi-plaza-sub-categories-detailed-view-details p {
  margin: 8px 0;
  font-size: 1rem;
  line-height: 1.4;
}
.adi-plaza-sub-categories-detailed-view-details b {
  color: #eb841d;
}

@media (min-width: 360px) and (max-width: 993px) {
  .adi-plaza-sub-categories-detailed-view-main-container {
    flex-direction: column;
  }
  .adi-plaza-sub-categories-detailed-view-left-container {
    border-right: none;
  }
}
@media (min-width: 360px) and (max-width: 768px) {
  .adi-plaza-sub-categories-detailed-view-image-slider {
    height: 250px;
  }
  #specList {
    display: flex;
    flex-direction: column;
  }
}
/* Entries creation page styling */
.adi-plaza-create-entries-container {
  display: flex;
  justify-content: center;
}
.adi-plaza-entries-container {
  width: 100%;
  max-width: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  /* padding: 32px; */
  animation: adi-plaza-entries-fadeIn 0.6s ease;
}
@keyframes adi-plaza-entries-fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
h1 {
  margin: 0 0 24px;
  font-size: 26px;
  text-align: center;
  color: #1f2937;
  font-weight: 700;
}
label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
}
.adi-plaza-entries-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.adi-plaza-entries-row input[type="text"] {
  flex: 1;
}
/* select,
input[type="text"],
input[type="number"],
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  margin-bottom: 18px;
  background: #f9fafb;
  transition: border-color 0.2s, box-shadow 0.2s;
} */
/* select:hover,
input[type="text"]:hover,
input[type="number"]:hover,
textarea:hover {
  border-color: #9ca3af;
}
select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
} */
textarea {
  resize: vertical;
  min-height: 100px;
}
.adi-plaza-entries-switch {
  position: relative;
  display: inline-block;
  width: 74px;
  height: 36px;
}
.adi-plaza-entries-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.adi-plaza-entries-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #e5e7eb;
  border-radius: 36px;
  transition: 0.4s;
}
.adi-plaza-entries-slider:before {
  position: absolute;
  content: "Rent";
  height: 28px;
  width: 36px;
  left: 4px;
  bottom: 4px;
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  transition: 0.4s;
}
input:checked + .adi-plaza-entries-slider {
  background: var(--color-primary);
}
input:checked + .adi-plaza-entries-slider:before {
  transform: translateX(30px);
  content: "Sale";
}
.adi-plaza-entries-btn {
  display: inline-block;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  background: #f3f4f6;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.adi-plaza-entries-btn:hover {
  background: #e5e7eb;
}
.adi-plaza-entries-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}
.adi-plaza-entries-btn-primary {
  width: 100%;
  margin-top: 16px;
  height: 40px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
}
.adi-plaza-entries-btn-primary:hover {
  background: #1d4ed8;
}
#output {
  margin-top: 24px;
  background: #f3f4f6;
  padding: 16px;
  border-radius: 12px;
  font-size: 14px;
  white-space: pre-wrap;
  max-height: 260px;
  overflow: auto;
}
.adi-plaza-entries-location-container {
  margin-top: 24px;
}
.adi-plaza-entries-toggle-buttons {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.hidden {
  display: none;
}
.adi-plaza-entries-upload-container {
  border: 2px dashed #9ca3af;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  color: #6b7280;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-top: 24px;
  margin-bottom: 16px;
}
.adi-plaza-entries-upload-container.dragover {
  border-color: #2563eb;
  background: #f0f7ff;
  color: #2563eb;
}
.adi-plaza-entries-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.adi-plaza-entries-preview img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.adi-plaza-entries-preview-item {
  position: relative;
  display: inline-block;
}
.adi-plaza-entries-remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 12px;
  cursor: pointer;
}
.adi-plaza-entries-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: var(--color-primary);
  color: #fff;
  padding: 14px 22px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-weight: 600;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  z-index: 1000;
}
.adi-plaza-entries-toast.show {
  opacity: 1;
  transform: translateY(0);
}
/* ADI JOBS RESUME STYLES -- SAVITABH */
.adi-jobs-my-jobs-page-body {
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  padding: 1rem 60px;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
.adi-jobs-my-jobs-listing-filter-container {
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  background-color: #ffffff;
  /* Option 1 */
  padding: 12px;
  width: 100%;
  max-width: 1200px;
  border-radius: 12px;
  /* margin-bottom: 12px; */
  /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
}
@media (min-width: 993px) {
  .adi-jobs-my-jobs-page-body {
    margin-bottom: 400px;
  }
}
@media (max-width: 993px) {
  .adi-jobs-my-jobs-listing-filter-container {
    gap: 12px;
    flex-wrap: wrap;
  }
}
.adi-jobs-my-jobs-listing-filter-groups {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  width: 100%;
  /* max-width: 260px; */
  gap: 8px;
  padding: 8px 0;
}

.adi-jobs-my-jobs-listing-filter-groups span {
  color: #374151;
  font-weight: 600;
  font-size: 1.125rem;
  min-width: 45px;
}

.adi-jobs-my-jobs-listing-filter-groups input[type="search"] {
  flex-grow: 1;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 4px 10px 4px;
  font-size: 1rem;
  color: #111827;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-sizing: border-box;
}

.adi-jobs-my-jobs-listing-filter-groups input[type="search"]::placeholder {
  color: #9ca3af;
  font-weight: 400;
  padding-left: 10px;
}

.adi-jobs-my-jobs-listing-filter-groups input[type="search"]:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}
/* The main container for the dropdown */
.adi-jobs-my-jobs-listing-filters-dropdown-container {
  position: relative;
  width: 100%;
  max-width: 150px;
  user-select: none; /* Prevents text selection */
}
.adi-jobs-my-jobs-listing-filters-btns-btn {
  /* Background: Gradient Blue */
  /* background: linear-gradient(145deg, #007bff, #0056b3); */
  background-color: var(--color-primary);
  color: #ffffff;
  text-wrap: nowrap;

  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  margin-left: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-transform: capitalize;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.adi-jobs-my-jobs-listing-filters-btns-btn:hover {
  background: linear-gradient(145deg, #0056b3, #003d80);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Active/Pressed State */
.adi-jobs-my-jobs-listing-filters-btns-btn:active {
  background: #003d80;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
}
/* The button that triggers the dropdown */
.adi-jobs-my-jobs-listing-filters-dropdown-selected {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 8px 16px;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.adi-jobs-my-jobs-listing-filters-dropdown-selected:hover {
  border-color: #a5b4fc;
}

.adi-jobs-my-jobs-listing-filters-dropdown-container.adi-jobs-my-jobs-listing-filters-active
  .adi-jobs-my-jobs-listing-filters-dropdown-selected {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
  border-color: #818cf8;
}

.adi-jobs-my-jobs-listing-filters-selected-text {
  font-weight: 500;
  font-size: 1rem;
  color: #111827;
}

/* The chevron icon */
.adi-jobs-my-jobs-listing-filters-dropdown-chevron {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
  color: #6b7280;
}

.adi-jobs-my-jobs-listing-filters-dropdown-container.adi-jobs-my-jobs-listing-filters-active
  .adi-jobs-my-jobs-listing-filters-dropdown-chevron {
  transform: rotate(180deg);
}

/* The dropdown menu itself */
.adi-jobs-my-jobs-listing-filters-dropdown-menu {
  position: absolute;
  /* top: calc(100% + 8px); */
  left: 0;
  right: 0;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 8px 0;
  margin: 0;
  z-index: 10;
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.adi-jobs-my-jobs-listing-filters-dropdown-container.adi-jobs-my-jobs-listing-filters-active
  .adi-jobs-my-jobs-listing-filters-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
@media (min-width: 786px) {
  .adi-jobs-my-jobs-listing-filters-dropdown-menu {
    /* top: calc(100% + 8px); */
    bottom: 110%;
  }
}
/* .adi-jobs-my-jobs-listing-filters-dropdown-menu-large {
  top: calc(-100% + 8px);
} */
/* Dropdown menu items */
.adi-jobs-my-jobs-listing-filters-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 1rem;
}

.adi-jobs-my-jobs-listing-filters-dropdown-item:hover {
  background-color: #f3f4f6;
}

/* Status indicators for each option */
.adi-jobs-my-jobs-listing-filters-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.adi-jobs-my-jobs-listing-filters-status-open {
  background-color: #22c55e;
} /* Green */
.adi-jobs-my-jobs-listing-filters-status-paused {
  background-color: #f59e0b;
} /* Amber */
.adi-jobs-my-jobs-listing-filters-status-closed {
  background-color: #ef4444;
} /* Red */
.adi-jobs-my-jobs-listing-filters-status-all {
  background-color: #787777;
}

/* styling for job listing container */
.adi-jobs-my-jobs-listing-posted-jobs-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;

  border-radius: 12px;
}

/* --- Header Styling --- */
.adi-jobs-my-jobs-listing-posted-jobs-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px 0;
  border-bottom: 2px solid #e9ecef;
}

.adi-jobs-my-jobs-listing-posted-jobs-header h1 {
  font-size: 2.5rem;
  color: #0056b3;
  font-weight: 700;
}

/* ========================================================== */
/* DEFAULT VIEW (Mobile/Card Design - up to 767px) */
/* ========================================================== */

/* Job Listings Grid */
#job-listings-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}

/* List Header is hidden by default (mobile view) */
.adi-jobs-my-jobs-listing-posted-jobs-list-header {
  display: none;
}

/* Job Card Styling */
.adi-jobs-my-jobs-listing-posted-jobs-job-card {
  /* background: linear-gradient(to right, #ffffff, #e0f2f7); */
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 25px;
  transition: box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.adi-jobs-my-jobs-listing-posted-jobs-job-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Delete Fade Out Animation */
@keyframes adi-jobs-my-jobs-listing-posted-jobs-fadeOut {
  from {
    opacity: 1;
    max-height: 500px;
    margin-bottom: 25px;
    padding: 25px;
  }
  to {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding: 0 25px;
  }
}
.adi-jobs-my-jobs-listing-posted-jobs-job-card.adi-jobs-my-jobs-listing-posted-jobs-fading {
  animation: adi-jobs-my-jobs-listing-posted-jobs-fadeOut 0.5s ease-out forwards;
  pointer-events: none;
  overflow: hidden;
}

/* --- Card Action Dropdown (Edit/Delete) --- */
.adi-jobs-my-jobs-listing-posted-jobs-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.adi-jobs-my-jobs-listing-posted-jobs-action-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: #6c757d;
  padding: 5px;
  border-radius: 6px;
  transition: background-color 0.2s;
  line-height: 1;
  transform: rotate(90deg);
  background-color: white;
  color: var(--color-primary);
  border: 1px solid #ddd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 4px;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.adi-jobs-my-jobs-listing-posted-jobs-action-icon:hover {
  background-color: #e9ecef;
}

.adi-jobs-my-jobs-listing-posted-jobs-action-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 100px;
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 20;
  overflow: hidden;
  display: none;
}

.adi-jobs-my-jobs-listing-posted-jobs-dropdown-item {
  display: block;
  padding: 4px 15px;
  text-decoration: none;
  color: #343a40;
  font-size: 0.9rem;
  transition: background-color 0.2s;
  cursor: pointer;
}

.adi-jobs-my-jobs-listing-posted-jobs-dropdown-item:hover {
  background-color: #e9ecef;
}

.adi-jobs-my-jobs-listing-posted-jobs-dropdown-item.adi-jobs-my-jobs-listing-posted-jobs-delete-option {
  color: #dc3545;
}

/* --- Status Dropdown Styling --- */
.adi-jobs-my-jobs-listing-posted-jobs-status-dropdown-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  z-index: 5;
}

.adi-jobs-my-jobs-listing-posted-jobs-status-badge {
  /* Now a button */
  border: none;
  cursor: pointer;
  padding: 12px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
  /* width: 180px; */
  /* text-transform: uppercase; */
  letter-spacing: 0.5px;
  transition: background-color 0.2s, color 0.2s;
  position: relative;
  display: flex;
  /* gap: 3px; */
}
/* @media (max-width: 768px) {
  .adi-jobs-my-jobs-listing-posted-jobs-status-badge:after {
   
    content: "";
    position: absolute;
    top: 50%; 
    right: 12px; 
    transform: translateY(-50%); 

    
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px; 
    border-color: #ffffff transparent transparent transparent; 
  }
} */
.adi-jobs-my-jobs-listing-posted-jobs-status-badge:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.2);
}

/* Status Colors */
.adi-jobs-my-jobs-listing-posted-jobs-status-open {
  background: linear-gradient(to bottom right, #28a745, #57c84d);
  color: #ffffff;
}

.adi-jobs-my-jobs-listing-posted-jobs-status-closed {
  background: linear-gradient(to bottom right, #dc3545, #d6642d);
  color: #ffffff;
}

.adi-jobs-my-jobs-listing-posted-jobs-status-paused {
  background: linear-gradient(to bottom, #ffc107, #e0a406);
  color: #ffffff;
}

/* Status Options Dropdown */
.adi-jobs-my-jobs-listing-posted-jobs-status-options {
  position: absolute;
  top: -100%; /* Place below the badge */
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  /* max-width: 90px; */
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: none;
}

.adi-jobs-my-jobs-listing-posted-jobs-status-options.adi-jobs-my-jobs-listing-posted-jobs-active {
  display: block;
}

.adi-jobs-my-jobs-listing-posted-jobs-status-options button {
  display: block;
  width: 100%;
  padding: 2px;
  text-align: center;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  text-transform: capitalize;
  transition: background-color 0.1s;
}

.adi-jobs-my-jobs-listing-posted-jobs-status-options button:hover {
  background-color: #e9ecef;
}
/* Color the status text inside the options */
.adi-jobs-my-jobs-listing-posted-jobs-status-options
  button.adi-jobs-my-jobs-listing-posted-jobs-status-open-text {
  color: #28a745;
  font-weight: 600;
}
.adi-jobs-my-jobs-listing-posted-jobs-status-options
  button.adi-jobs-my-jobs-listing-posted-jobs-status-paused-text {
  color: #ffc107;
  font-weight: 600;
}
.adi-jobs-my-jobs-listing-posted-jobs-status-options
  button.adi-jobs-my-jobs-listing-posted-jobs-status-closed-text {
  color: #dc3545;
  font-weight: 600;
}

/* Metadata, Proposals, etc. (Existing Styles) */
.adi-jobs-my-jobs-listing-posted-jobs-job-title {
  font-size: 1.4rem !important;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1.2;
  color: var(--color-primary);
}
.adi-jobs-my-jobs-listing-posted-jobs-company-name {
  font-size: 1rem;
  color: #0056b3;
  font-weight: 600;
  margin-bottom: 15px;
}
.adi-jobs-my-jobs-listing-posted-jobs-metadata {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.adi-jobs-my-jobs-listing-posted-jobs-metadata-item {
  align-self: start;
  grid-row: 1 / span 2;
  font-size: 0.9rem;
  color: #6c757d;
}
.adi-jobs-my-jobs-listing-posted-jobs-date-group p {
  margin: 0;
}
.adi-jobs-my-jobs-listing-posted-jobs-metadata-item strong {
  color: #343a40;
  margin-right: 5px;
  font-weight: 600;
}
.adi-jobs-my-jobs-listing-posted-jobs-footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #e9ecef;
}
.adi-jobs-my-jobs-listing-posted-jobs-proposals {
  align-self: start; /* Start from the top */
  grid-row: 1 / span 2;
  padding: 3px 12px;
  border-radius: 8px;
  background-color: #f8fafc; /* light neutral background */
  color: #2e5dc0; /* brand blue text */
  border: 1px solid #cfd8e3; /* subtle border */
  transition: all 0.25s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.adi-jobs-my-jobs-listing-posted-jobs-proposals:hover {
  background-color: #e9f0ff; /* light blue tint on hover */
  border-color: var(--color-primary);
  color: var(--color-primary); /* deeper blue */
  box-shadow: 0 2px 6px rgba(46, 93, 192, 0.15);
}

.adi-jobs-my-jobs-listing-posted-jobs-proposals:active {
  background-color: #dbeafe; /* slightly deeper active */
  box-shadow: 0 1px 3px rgba(46, 93, 192, 0.25) inset;
}
/* .adi-jobs-my-jobs-listing-posted-jobs-proposals span {
  font-weight: 400;
  margin-left: 5px;
  color: #6c757d;
} */
.adi-jobs-my-jobs-listing-posted-jobs-proposals-outer-span {
  position: relative;
  font-size: 0.9rem !important;
}
.adi-jobs-my-jobs-listing-posted-jobs-proposals-inner-span {
  font-size: 0.875rem !important;
  position: absolute;
  top: -20px;
  right: -20px;
  text-align: center;
  border-radius: 999999px;
  padding: 0px 6px;
  background-color: var(--color-primary);
  color: #ffffff;
}

/* --- Modal Styling for Bootstrap-like Animation --- */
.adi-jobs-my-jobs-listing-posted-jobs-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none; /* Initially hidden */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0; /* Start hidden for fade-in */
  transition: opacity 0.3s ease-in-out; /* Overlay fade transition */
}

.adi-jobs-my-jobs-listing-posted-jobs-modal-overlay.adi-jobs-my-jobs-listing-posted-jobs-active {
  /* Only controls the opacity transition, display is handled by JS */
  opacity: 1;
}

.adi-jobs-my-jobs-listing-posted-jobs-modal-content {
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  /* Initial state for slide-in */
  transform: translateY(-50px);
  transition: transform 0.3s ease-in-out; /* Content slide transition */
}

.adi-jobs-my-jobs-listing-posted-jobs-modal-overlay.adi-jobs-my-jobs-listing-posted-jobs-active
  .adi-jobs-my-jobs-listing-posted-jobs-modal-content {
  /* End state for slide-in */
  transform: translateY(0);
}

.adi-jobs-my-jobs-listing-posted-jobs-modal-header h3 {
  color: #dc3545;
  margin-bottom: 10px;
  font-size: 1.5rem;
}
.adi-jobs-my-jobs-listing-posted-jobs-modal-body p {
  margin-bottom: 20px;
  color: #6c757d;
}
.adi-jobs-my-jobs-listing-posted-jobs-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.adi-jobs-my-jobs-listing-posted-jobs-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
.adi-jobs-my-jobs-listing-posted-jobs-btn-cancel {
  background-color: #e9ecef;
  color: #343a40;
}
.adi-jobs-my-jobs-listing-posted-jobs-btn-cancel:hover {
  background-color: #d8dee4;
}
.adi-jobs-my-jobs-listing-posted-jobs-btn-delete {
  background-color: #dc3545;
  color: #ffffff;
}
.adi-jobs-my-jobs-listing-posted-jobs-btn-delete:hover {
  background-color: #c82333;
}

.adi-jobs-my-jobs-listing-filter-btns {
  width: 100%;
  flex-direction: column;
  /* max-width: 400px; */
  gap: 8px;
  /* justify-content: space-between; */
  /* align-items: center; */
}
.adi-jobs-my-jobs-listing-filter-btns > span {
  color: #374151;
  font-weight: 600;
  font-size: 1.125rem;
  min-width: 45px;
}
/* Job posting modal styling  */
/* Prefixed Class: .form-container (Adjusted for Modal) */

@media (min-width: 993px) {
  #jobPostingModal .modal-dialog {
    max-width: 1200px;
    min-height: 600px;
    width: 40%;
  }

  #jobPostingModal .modal-content {
    min-height: 80vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 20px;
    min-height: 600px;
  }
}

.adi-jobs-my-jobs-post-job-form-container {
  background-color: #ffffff;
  border-radius: 16px;
  /* Removed fixed width and central box-shadow as the modal handles the layout */
  box-shadow: none;
  max-width: 100%; /* Take full modal width */
  width: 100%;
  position: relative;
  overflow: hidden;
  min-height: initial; /* Let content dictate height */
  padding: 0;
  /* padding-bottom: 100px; */
}

/* Modal specific styling to match container's look */
.modal-content {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 20px;
}

.modal-header {
  border-bottom: none;
  padding: 0 0 20px 0;
}

.modal-body {
  padding: 0; /* Remove default modal body padding to let the form control padding */
}

/* Ensure the H1 maintains its prefix styling */
.adi-jobs-my-jobs-post-job-form-h1 {
  color: #1e3a8a;
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
  font-weight: 700;
  padding-top: 20px; /* Add internal padding to the title */
}

/* Prefixed Class: .step-title */
.adi-jobs-my-jobs-post-job-form-step-title {
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.6rem;
  font-weight: 600;
}

/* Prefixed Class: .section */
.adi-jobs-my-jobs-post-job-form-section {
  margin-bottom: 35px;
  padding: 25px;
  border: 1px solid #e0e7ff;
  border-radius: 12px;
  background-color: #f9fbff;
  transition: box-shadow 0.3s;
}

.adi-jobs-my-jobs-post-job-form-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Prefixed Class: .section-label */
.adi-jobs-my-jobs-post-job-form-section-label {
  display: block;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 15px;
  font-size: 1.2rem;
  border-bottom: 2px solid #eff6ff;
  padding-bottom: 8px;
}

/* Input, Select, and Textarea Styling (Prefixed Class) */
.adi-jobs-my-jobs-post-job-form-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 1rem;
  color: #1f2937;
  background-color: #ffffff;
  transition: border-color 0.3s, box-shadow 0.3s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea.adi-jobs-my-jobs-post-job-form-input {
  resize: vertical;
  min-height: 150px;
}

.adi-jobs-my-jobs-post-job-form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  outline: none;
}

select.adi-jobs-my-jobs-post-job-form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 1em;
  padding-right: 30px;
}

/* Prefixed Class: .flex-row */
.adi-jobs-my-jobs-post-job-form-flex-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.adi-jobs-my-jobs-post-job-form-flex-row > div {
  flex: 1;
  min-width: 180px;
}

/* Warning Message for Search Tags */
#tag-warning {
  color: #ef4444;
  font-size: 0.9rem;
  margin-top: 8px;
  display: none;
}

/* Prefixed Class: .form-group */
.adi-jobs-my-jobs-post-job-form-form-group {
  margin-bottom: 15px;
}

.adi-jobs-my-jobs-post-job-form-form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: #4b5563;
  font-weight: 500;
}

/* Prefixed Class: .checkbox-group */
.adi-jobs-my-jobs-post-job-form-checkbox-group {
  display: flex;
  gap: 30px;
  align-items: center;
  padding: 15px;
  background-color: #f0f4f8;
  border-radius: 8px;
  flex-wrap: wrap;
}

.adi-jobs-my-jobs-post-job-form-checkbox-group input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  border: 2px solid #3b82f6;
  margin-right: 8px;
  vertical-align: middle;
  accent-color: #3b82f6;
}

.adi-jobs-my-jobs-post-job-form-checkbox-group label {
  margin-bottom: 0;
  font-weight: 400;
  color: #1f2937;
  display: inline-block;
}

/* --- BUTTON STYLING --- */

/* Prefixed Class: .button-wrapper */
.adi-jobs-my-jobs-post-job-form-button-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

/* Prefixed Class: .button-group */
.adi-jobs-my-jobs-post-job-form-button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  gap: 20px;
}

/* Prefixed Class: .back-button */
.adi-jobs-my-jobs-post-job-form-back-button {
  width: 100px;
  padding: 12px;
  background-color: #9ca3af;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(156, 163, 175, 0.2);
}

.adi-jobs-my-jobs-post-job-form-back-button:hover {
  background-color: #6b7280;
  box-shadow: 0 6px 10px rgba(156, 163, 175, 0.3);
}

/* Prefixed Class: .continue-button */
.adi-jobs-my-jobs-post-job-form-continue-button {
  width: 100px;
  padding: 12px;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(16, 22, 185, 0.2);
}

.adi-jobs-my-jobs-post-job-form-button-group
  .adi-jobs-my-jobs-post-job-form-continue-button {
  width: auto;
  flex-grow: 1;
  max-width: 200px;
}

.adi-jobs-my-jobs-post-job-form-continue-button:hover {
  background-color: var(--color-link);
  box-shadow: 0 6px 10px rgba(16, 16, 185, 0.3);
}

.adi-jobs-my-jobs-post-job-form-continue-button:active {
  transform: scale(0.98);
}

/* --- FORM STEP & ANIMATION STYLES --- */
/* Prefixed Class: .form-step */
.adi-jobs-my-jobs-post-job-form-form-step {
  /* Position relative to the parent #multi-step-form inside the modal body */
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding: 0 40px;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    opacity 0.4s ease-out;
  box-sizing: border-box;
}

/* The multi-step container needs position: relative and overflow: hidden */
#adi-jobs-my-jobs-post-job-form-multi-step-form {
  position: relative;
  overflow: hidden;
  /* Height will be set by JS dynamically to prevent collapse */
}

/* Prefixed Class: .hidden-step */
.adi-jobs-my-jobs-post-job-form-hidden-step {
  display: none;
  opacity: 0;
}

/* Prefixed Class: .slide-out-left */
.adi-jobs-my-jobs-post-job-form-slide-out-left {
  transform: translateX(-100%);
  opacity: 0;
}

/* Prefixed Class: .slide-in-right */
.adi-jobs-my-jobs-post-job-form-slide-in-right {
  transform: translateX(0);
  opacity: 1;
}

/* Prefixed Class: .slide-out-right */
.adi-jobs-my-jobs-post-job-form-slide-out-right {
  transform: translateX(100%);
  opacity: 0;
}

/* Prefixed Class: .slide-in-left */
.adi-jobs-my-jobs-post-job-form-slide-in-left {
  transform: translateX(0);
  opacity: 1;
}

/* Results output styling (Prefixed ID: #final-results) */
#adi-jobs-my-jobs-post-job-form-final-results {
  margin-top: 30px;
  padding: 20px;
  background: #eef2ff;
  border-radius: 10px;
  border-left: 5px solid #3b82f6;
  color: #1f2937;
}

/* Prefixed ID: #data-output */
#adi-jobs-my-jobs-post-job-form-data-output {
  background: #ffffff;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: left; /* Align text left inside the pre block */
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .adi-jobs-my-jobs-post-job-form-flex-row {
    flex-direction: column;
    gap: 15px;
  }
  .adi-jobs-my-jobs-post-job-form-form-step {
    padding: 20px;
  }
  .adi-jobs-my-jobs-post-job-form-button-wrapper,
  .adi-jobs-my-jobs-post-job-form-button-group {
    justify-content: center;
  }
  .adi-jobs-my-jobs-post-job-form-continue-button,
  .adi-jobs-my-jobs-post-job-form-back-button,
  .adi-jobs-my-jobs-post-job-form-button-group
    .adi-jobs-my-jobs-post-job-form-continue-button {
    width: 100%;
    max-width: 100%;
  }
  .adi-jobs-my-jobs-post-job-form-checkbox-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .fixed-top-right-btn {
    position: static;
    margin-bottom: 20px;
    display: block;
    width: 100%;
  }
}
/* proposal view page styles */
.adi-jobs-my-jobs-view-proposals-container {
  width: 100%;
  max-width: 1200px;
  height: 86vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(13, 32, 66, 0.08);
  border: 1px solid #e6eef8;
  overflow: hidden;
  display: flex;
  position: relative;
}
.adi-jobs-my-jobs-view-proposals-left-section {
  width: 27%;
  background: #fafbfc;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}
.adi-jobs-my-jobs-view-proposals-job-details {
  padding: 1.125rem;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(90deg, #f9fafc, #fff);
}
.adi-jobs-my-jobs-view-proposals-job-details h2 {
  margin: 0 0 8px;
  color: var(--color-link);
  font-size: 1.3rem;
}
.adi-jobs-my-jobs-view-proposals-job-details p {
  margin-bottom: 8px;
}
.adi-jobs-my-jobs-view-proposals-applicants {
  padding: 18px;
  overflow-y: auto;
}

.adi-jobs-my-jobs-view-proposals-applicant-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;

  padding: 6px 14px;
  margin-bottom: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Highlighted applicant card when their resume is being viewed */
.adi-jobs-my-jobs-view-proposals-applicant-card.active {
  background-color: #e6f7ff; /* Subtle blue */
  border-color: #91d5ff;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.adi-jobs-my-jobs-view-proposals-applicant-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}
.adi-jobs-my-jobs-view-proposals-applicant-card img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.adi-jobs-my-jobs-view-proposals-applicant-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.adi-jobs-my-jobs-view-proposals-applicant-info h4 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--color-link);
}
.adi-jobs-my-jobs-view-proposals-applicant-info p {
  margin: 4px 0;
  color: #475569;
  font-size: 0.85rem;
}
.adi-jobs-my-jobs-view-proposals-applicant-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.adi-jobs-my-jobs-view-proposals-applicant-buttons button {
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s ease;
}
.adi-jobs-my-jobs-view-proposals-view-btn {
  background: var(--color-link);
}
.adi-jobs-my-jobs-view-proposals-chat-btn {
  background: #10b981;
}

.adi-jobs-my-jobs-view-proposals-right-section {
  position: absolute;
  top: 0;
  right: -100%;
  width: 65%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: right 0.4s ease, opacity 0.3s ease;
  opacity: 0;
  box-shadow: -8px 0 25px rgba(15, 32, 64, 0.1);
  border-left: 1px solid #e2e8f0;
  z-index: 100;
}
.adi-jobs-my-jobs-view-proposals-right-section.active {
  right: 0;
  opacity: 1;
}

.adi-jobs-my-jobs-view-proposals-chat-header {
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.adi-jobs-my-jobs-view-proposals-chat-header span {
  font-size: 1rem;
}
.adi-jobs-my-jobs-view-proposals-chat-box {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  background: #f8fafc;
}
.adi-jobs-my-jobs-view-proposals-chat-header > button {
  /* Appearance */
  border: none;
  background-color: transparent; /* No background color initially */
  color: #4a5568; /* Darker gray color for the 'X' */
  cursor: pointer;
  line-height: 1; /* Ensures 'X' is properly centered */

  /* Size and Shape */
  width: 28px;
  height: 28px;
  font-size: 1.1rem;
  font-weight: 500; /* Makes the 'X' slightly bolder */
  border-radius: 50%; /* Perfect circle shape */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Animation */
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

/* -------------------------------------------
   Interaction States
   ------------------------------------------- */
.adi-jobs-my-jobs-view-proposals-chat-header > button:hover {
  background-color: #e2e8f0; /* Light gray background on hover */
  color: #1a202c; /* Darken the 'X' color */
}

.adi-jobs-my-jobs-view-proposals-chat-header > button:focus {
  outline: 2px solid #3b82f6; /* A clear, accessible blue focus ring */
  outline-offset: 2px;
  background-color: #e2e8f0;
}

.adi-jobs-my-jobs-view-proposals-chat-header > button:active {
  transform: scale(0.95); /* Slight press effect when clicked */
}
.adi-jobs-my-jobs-view-proposals-message {
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 70%;
  font-size: 0.9rem;
  line-height: 1.4;
}
.adi-jobs-my-jobs-view-proposals-sent {
  background: #2563eb;
  color: #fff;
  align-self: flex-end;
}
.adi-jobs-my-jobs-view-proposals-received {
  background: #e2e8f0;
  align-self: flex-start;
}
.adi-jobs-my-jobs-view-proposals-chat-input {
  display: flex;
  padding: 14px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
}
.adi-jobs-my-jobs-view-proposals-chat-input input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}
.adi-jobs-my-jobs-view-proposals-chat-input button {
  border: none;
  border-radius: 8px;
  margin-left: 10px;
  height: fit-content;
  padding: 8px 12px;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
}
/* === ADI Job Details Modal (Prefixed Version) === */
.adi-jobs-detail-modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.adi-jobs-detail-modal-header {
  background: linear-gradient(135deg, #1e40af, #2563eb);
  color: #fff;
  padding: 1.2rem 1.5rem;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.adi-jobs-detail-modal-icon {
  width: 45px;
  height: 45px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
}

.adi-jobs-detail-modal-body {
  padding: 1.8rem;
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Info Grid */
.adi-jobs-detail-modal-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem 1rem;
  background: #f9fafc;
  padding: 1rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  border: 1px solid #e5e7eb;
}

/* Section Headings */
.adi-jobs-detail-modal-section h6 {
  color: #1e3a8a;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 1rem;
  position: relative;
}

.adi-jobs-detail-modal-section h6::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 35px;
  height: 2px;
  background-color: #2563eb;
  border-radius: 2px;
}

.adi-jobs-detail-modal-section {
  margin-top: 1.2rem;
}

.adi-jobs-detail-modal-section p {
  margin: 0.3rem 0 0.8rem;
}

/* Application details */
.adi-jobs-detail-modal-application-methods p {
  margin: 0.25rem 0;
  font-size: 0.95rem;
}

.adi-jobs-detail-modal-application-methods a {
  text-decoration: none;
  color: #2563eb;
  font-weight: 500;
}

.adi-jobs-detail-modal-application-methods a:hover {
  text-decoration: underline;
}

/* Tags Styling */
.adi-jobs-detail-modal-tags {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.adi-jobs-detail-modal-tags::before {
  content: "Tags:";
  font-weight: 600;
  color: #111827;
}

.adi-jobs-detail-modal-tags span {
  background: #e0e7ff;
  color: #1e3a8a;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 576px) {
  .adi-jobs-detail-modal-body {
    padding: 1rem;
  }
  .adi-jobs-detail-modal-info-grid {
    grid-template-columns: 1fr;
  }
}
/* === Resume Fade Animation === */
.adi-jobs-resume-fade {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.adi-jobs-resume-fade.show {
  opacity: 1;
  transform: translateY(0);
}

/* responsive mobile: stack layout, chat slides from bottom */
@media (min-width: 360px) and (max-width: 767px) {
  .adi-jobs-my-jobs-view-proposals-container {
    flex-direction: column;
    width: 100%;

    height: auto;
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid #eef4fb;
  }
  .adi-jobs-my-jobs-view-proposals-left-section {
    width: 100%;
    border-right: none;
  }
  .adi-jobs-my-jobs-view-proposals-job-details {
    padding: 16px;
    margin: 18px;
    border-radius: 12px;
  }
  .adi-jobs-my-jobs-view-proposals-applicants {
    padding: 12px;
  }
  .adi-jobs-my-jobs-view-proposals-applicant-card {
    flex-direction: row;
    align-items: center;
    padding: 12px;
  }
  .adi-jobs-my-jobs-view-proposals-applicant-card img {
    width: 56px;
    height: 56px;
  }
  .adi-jobs-my-jobs-view-proposals-applicant-info {
    margin-left: 6px;
  }
  .adi-jobs-my-jobs-view-proposals-applicant-buttons {
    margin-top: 6px;
  }

  /* chat slides from bottom on mobile */
  .adi-jobs-my-jobs-view-proposals-right-section {
    position: fixed;
    left: 0;
    right: 0;
    bottom: -100%;
    top: auto;
    height: 72vh;
    width: 100%;
    border-left: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -12px 30px rgba(15, 32, 64, 0.12);
    transition: bottom 0.36s cubic-bezier(0.25, 0.9, 0.3, 1), opacity 0.28s ease;
  }
  .adi-jobs-my-jobs-view-proposals-right-section.active {
    bottom: 60px !important;
    opacity: 1;
  }
  .adi-jobs-my-jobs-view-proposals-chat-box {
    padding: 16px;
  }
  .adi-jobs-my-jobs-view-proposals-chat-input {
    padding: 12px;
  }
}
/* ========================================================== */
/* LIST VIEW (Desktop Design - 768px and wider) */
/* ========================================================== */
@media (min-width: 768px) {
  #job-listings-container {
    display: block;
    gap: 0;
    border: none;
    border-radius: 4px;
    overflow: hidden;
  }

  .adi-jobs-my-jobs-listing-posted-jobs-list-header {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr 1.5fr 2fr;
    padding: 15px 25px;
    background-color: white;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    position: relative;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-list-header-mobile-view {
    display: none;
  }
  /* .adi-jobs-my-jobs-listing-posted-jobs-list-header-search-add-btns {
    position: absolute;
    background-color: transparent;
    border: none;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    padding: 4px;
  } */
  .adi-jobs-my-jobs-listing-posted-jobs-list-header-search-add-btns {
    position: absolute;
  }

  .adi-jobs-my-jobs-listing-posted-jobs-list-header-search-btn {
    right: 45px;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-list-header-add-btn {
    right: 10px;
  }
  /* Align quantitative and date columns to match the centered content */
  .adi-jobs-my-jobs-listing-posted-jobs-list-header-col-proposals,
            .adi-jobs-my-jobs-listing-posted-jobs-status-header,
            .adi-jobs-my-jobs-listing-posted-jobs-list-header-col-dates /* <-- ADDED ALIGNMENT */ {
    text-align: center;
  }

  .adi-jobs-my-jobs-listing-posted-jobs-job-card {
    grid-template-columns: 3fr 2fr 2fr 1.5fr 2fr;
    grid-template-rows: auto auto;
    align-items: start;
    padding: 12px 25px;
    box-shadow: none;
    border-radius: 12px;
    border-bottom: 1px solid #e9ecef;
    transition: background-color 0.2s ease;
    display: grid;
    margin-bottom: 12px;
  }

  .adi-jobs-my-jobs-listing-posted-jobs-job-card:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Keep shadow subtle here */
    background-color: #ffffff;
  }

  .adi-jobs-my-jobs-listing-posted-jobs-card-actions {
    top: 69%;
    right: 15px;
    transform: translateY(-50%);
  }

  .adi-jobs-my-jobs-listing-posted-jobs-job-details-group {
    display: contents;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-job-title {
    grid-column: 1 / 2;
    margin-bottom: 0;
    font-size: 1.1rem;
    cursor: pointer;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-company-name {
    grid-column: 1 / 2;
    margin-bottom: 0;
    font-size: 0.85rem;
    color: #6c757d;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-job-id {
    display: none;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-metadata {
    display: contents;
    margin-bottom: 0;
  }

  .adi-jobs-my-jobs-listing-posted-jobs-location-item {
    grid-column: 2 / 3;
    font-size: 0.9rem;
    color: #343a40;
    display: block;
    align-self: center;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-location-item strong {
    display: none;
  }

  .adi-jobs-my-jobs-listing-posted-jobs-date-group {
    grid-column: 3 / 4;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.9rem;
    justify-content: center;
    text-align: center; /* <-- ADDED CONTENT ALIGNMENT */
  }

  .adi-jobs-my-jobs-listing-posted-jobs-footer-info {
    display: contents;
    border-top: none;
    padding-top: 0;
  }

  .adi-jobs-my-jobs-listing-posted-jobs-proposals {
    grid-column: 4 / 5;
    flex-direction: column;
    font-size: 1.2rem;
    justify-self: center;
    align-self: center;
    grid-row: 1 / span 2;
    cursor: pointer;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-end-date {
    grid-column: 4 / 5;
    margin-top: 15px !important;
    justify-self: center;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-proposals span {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 400;
  }

  /* === STATUS COLUMN ALIGNMENT FOR DROPDOWN WRAPPER === */
  .adi-jobs-my-jobs-listing-posted-jobs-status-dropdown-wrapper {
    grid-column: 5 / 6; /* Mapped to column 5 */
    justify-self: center;
    align-self: center;
    /* Start from the top */
    grid-row: 1 / span 2;
  }

  /* Adjust status options positioning for list view */
  .adi-jobs-my-jobs-listing-posted-jobs-status-options {
    top: -70%;
    left: 50%;
    width: 80px;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-action-icon {
    position: absolute;
    top: -30px;
    right: -4px;
  }
}
/* resume view container styling */
/* Resume Container (Card Effect) */
#adi-job-proposals-resume-container {
  max-width: 900px; /* Slightly wider */
  margin: 0 auto;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08); /* Lighter shadow */
  border-radius: 16px; /* Increased rounded corners */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #ffffff; /* Crisp white card background */
  position: relative; /* Added for absolute positioning of the PDF button */
}

/* Styling for the Download PDF Button */
#adi-job-proposals-resume-download-pdf-btn,
#adi-resume-display-invite-interview-btn {
  position: absolute;
  top: 20px;
  padding: 10px 15px;
  background-color: #2e5dc0; /* Deep Blue Accent */
  color: white;
  border: none;
  border-radius: 6px; /* Slightly rounded */
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  z-index: 10; /* Ensure it's above other content */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s, transform 0.1s;
}
#adi-job-proposals-resume-download-pdf-btn {
  right: 20px;
}
#adiNextStep {
  background-color: var(--color-primary);
}
#adi-resume-display-invite-interview-btn {
  left: 20px;
}
#adi-job-proposals-resume-download-pdf-btn:hover {
  background-color: #244a99; /* Slightly darker blue for hover */
}

#adi-job-proposals-resume-download-pdf-btn:active {
  transform: scale(0.98);
}

/* Header (Profile/Contact Info) - Clean and White */
.adi-job-proposals-resume-header {
  background-color: #ffffff; /* Crisp white card background */
  color: #212529; /* Primary text */
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid #dee2e6; /* Light border/divider color */
}

.adi-job-proposals-resume-header h1 {
  font-size: 2.5em;
  margin: 0 0 5px 0;
  font-weight: 800; /* Bolder name */
  color: #212529; /* Primary text */
}

.adi-job-proposals-resume-header h2 {
  font-size: 1.2em;
  margin: 0 0 20px 0;
  font-weight: 500;
  color: #2e5dc0; /* Deep Blue Accent */
}

.adi-job-proposals-resume-contact-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 25px;
  font-size: 0.9em;
  color: #6c757d; /* Secondary text */
}

.adi-job-proposals-resume-contact-info span {
  display: flex;
  align-items: center;
}
.adi-job-proposals-resume-contact-info-phone::before,
.adi-job-proposals-resume-contact-info-address::before,
.adi-job-proposals-resume-contact-info-email::before {
  margin-right: 6px;
  color: #2e5dc0; /* Deep blue accent */
  font-size: 1.1em;
  line-height: 1;
  vertical-align: middle;
}
.adi-job-proposals-resume-contact-info-email::before {
  content: "✉️"; /* Unicode envelope */
}

.adi-job-proposals-resume-contact-info-phone::before {
  content: "📞"; /* Unicode phone symbol */
}
.adi-job-proposals-resume-contact-info-address::before {
  content: "📍"; /* Unicode location pin */
}

.adi-job-proposals-resume-profile-picture {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #2e5dc0; /* Deep Blue Accent */
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Main Layout (Sidebar + Content) */
.adi-job-proposals-resume-content-area {
  display: flex;
  flex-direction: row;
}

/* Sidebar Styling */
.adi-job-proposals-resume-sidebar {
  flex: 0 0 320px; /* Slightly wider sidebar */
  background-color: #f7f9fa; /* Very light gray for sidebar differentiation */
  padding: 30px;
}

/* Main Content Styling */
.adi-job-proposals-resume-main-content {
  flex-grow: 1;
  padding: 30px 40px;
}

/* Section Styling */
.adi-job-proposals-resume-section-title {
  font-size: 1.6em;
  color: #212529; /* Primary text */
  font-weight: 700;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 5px;
}

/* Underline effect for section title */
.adi-job-proposals-resume-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 3px;
  background-color: #2e5dc0; /* Deep Blue Accent */
  border-radius: 2px;
}

/* Objective */
.adi-job-proposals-resume-objective-text {
  font-style: normal;
  font-weight: 400;
  margin-bottom: 40px;
  padding: 10px 0;
  font-size: 1rem;
  color: #6c757d; /* Secondary text */
}

/* Experience and Education Items - Timeline Look */
.adi-job-proposals-resume-item {
  margin-bottom: 30px;
  padding-left: 20px;
  position: relative;
  /* Accent color timeline */
  border-left: 2px solid #dee2e6; /* Light border/divider color */
}

/* Timeline dot */
.adi-job-proposals-resume-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 5px;
  width: 10px;
  height: 10px;
  background-color: #2e5dc0; /* Deep Blue Accent */
  border-radius: 50%;
}

.adi-job-proposals-resume-item:last-child {
  border-left: none; /* End the line on the last item */
}

.adi-job-proposals-resume-item h3 {
  font-size: 1.15em;
  margin: 0;
  color: #212529; /* Primary text */
  font-weight: 600;
}

.adi-job-proposals-resume-item h4 {
  font-size: 1em;
  margin: 3px 0;
  color: #6c757d; /* Secondary text */
  font-weight: 400;
}

.adi-job-proposals-resume-dates {
  font-size: 0.85em;
  color: #6c757d; /* Secondary text */
  margin: 5px 0 10px 0;
  opacity: 0.8;
}

.adi-job-proposals-resume-description {
  font-size: 1rem;
  margin: 10px 0 0 0;
}

/* Sidebar Lists (Skills, Languages, etc.) - Tag/Chip Style */
.adi-job-proposals-resume-sidebar-list {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.adi-job-proposals-resume-sidebar-list li {
  background-color: #ffffff; /* White background */
  color: #2e5dc0; /* Blue text */
  border: 1px solid #2e5dc0; /* Blue border */
  padding: 6px 14px;
  border-radius: 25px; /* Fully rounded pills */
  font-size: 0.85em;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s;
  cursor: default;
}

.adi-job-proposals-resume-sidebar-list li:hover {
  background-color: #2e5dc0; /* Deep Blue Accent */
  color: #ffffff; /* White text */
}
.adi-jobs-resume-view-container {
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px; /* Thin scrollbar */
  }

  /* Track (the background of the scrollbar) */
  &::-webkit-scrollbar-track {
    background: transparent; /* Often left transparent or light for contrast */
  }

  /* Handle/Thumb (the draggable part) */
  &::-webkit-scrollbar-thumb {
    background-color: #a2a0a0; /* Gray color */
    border-radius: 0; /* No border radius */
  }

  /* Handle/Thumb when hovered */
  &::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Slightly darker gray on hover for interaction */
  }
}
/* Responsive Design */
@media (max-width: 800px) {
  #adi-job-proposals-resume-container {
    flex-direction: column;
    border-radius: 0;
  }
  .adi-job-proposals-resume-content-area {
    flex-direction: column;
  }
  .adi-job-proposals-resume-sidebar {
    flex: none;
    width: auto;
    order: 2; /* Sidebar after main content */
    border-top: 1px solid #dee2e6; /* Line color */
  }
  .adi-job-proposals-resume-main-content {
    order: 1;
    padding: 20px;
  }
  .adi-job-proposals-resume-header {
    padding: 20px 10px;
  }
  .adi-job-proposals-resume-contact-info {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  #adi-job-proposals-resume-download-pdf-btn,
  #adi-resume-display-invite-interview-btn {
    top: 10px;
    padding: 8px 12px;
    font-size: 0.8em;
  }
  #adi-job-proposals-resume-download-pdf-btn {
    right: 20px;
  }
  #adi-resume-display-invite-interview-btn {
    left: 40px;
  }
}

.adi-jobs-my-jobs-listing-filter-suggestions-container {
  position: absolute;
  top: 100%; /* Just below the input field */
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #d1d5db; /* subtle grey */
  border-radius: 6px;
  z-index: 1000;
  display: none; /* hidden until needed */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.adi-jobs-my-jobs-listing-filter-suggestions-container .suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.95rem;
  color: #333;
  transition: background-color 0.2s ease;
}

.adi-jobs-my-jobs-listing-filter-suggestions-container .suggestion-item:hover {
  background-color: #f3f6ff; /* light blue hover */
  color: #2e5dc0; /* your accent blue */
}
.adi-resume-my-own-resume-display-container {
  max-width: 400px;
  width: 100%;
  text-align: center;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Custom style for the status options inside the modal */
.adi-resume-my-own-resume-display-status-option {
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}
.adi-resume-my-own-resume-display-status-option:hover {
  background-color: #f1f4f8;
  border-color: var(--color-primary);
}
.adi-resume-my-own-resume-display-status-option.active {
  background-color: #e9ecef;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
#adi-resume-my-own-resume-display-dropdown-btn {
  background-color: var(--color-primary);
  height: 44.5px;
}
#adi-resume-my-own-resume-display-dropdown-btn:hover {
  background-color: var(--color-link);
}
.adi-resume-my-own-resume-display-main-container {
  position: absolute;
  width: 200px;
  top: 20px;
}
.adi-jobs-create-resume-page-body .form-group textarea {
  background-color: white !important;
  border: 1px solid #ddd !important;
}

@media (min-width: 768px) {
  .adi-resume-my-own-resume-display-main-container {
    left: 20px;
  }
  /* Tooltip container */
  .adi-jobs-my-jobs-listing-posted-jobs-status-badge {
    position: relative;
    cursor: pointer;
  }

  /* Tooltip text */
  .adi-jobs-my-jobs-listing-posted-jobs-status-badge::after {
    content: "Job Status";
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 999;
  }

  /* Tooltip arrow */
  .adi-jobs-my-jobs-listing-posted-jobs-status-badge::before {
    content: "";
    position: absolute;
    bottom: 85%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 999;
  }

  /* Show tooltip on hover */
  .adi-jobs-my-jobs-listing-posted-jobs-status-badge:hover::after,
  .adi-jobs-my-jobs-listing-posted-jobs-status-badge:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
  }
}
.adi-jobs-my-jobs-listing-posted-jobs-list-header-search-add-btns {
  top: 13px;
  background-color: white;
  color: var(--color-primary);
  border: 1px solid #ddd;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 4px;
  transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.adi-jobs-my-jobs-listing-posted-jobs-list-header-search-add-btns:hover {
  background-color: #f7f9fa;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1),
    inset 0 0 0 3px rgba(66, 133, 244, 0.2);
  transform: translateY(-2px);
  color: #357ae8;
}

.adi-jobs-my-jobs-listing-posted-jobs-list-header-search-add-btns:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(66, 133, 244, 0.5);
  background-color: #f0f4f7;
}
#adiProgressBar {
  transition: width 0.4s ease-in-out;
}
.adi-job-proposals-resume-container-close-btn {
  display: none !important;
}
.adi-proposals-invite-for-interview-options {
  max-width: 210px;
  width: 100%;
  display: flex !important;
  justify-content: center;
}
@media (min-width: 360px) and (max-width: 767px) {
  .adi-jobs-my-jobs-page-body {
    padding: 10px 20px;
  }
  .adi-jobs-my-jobs-listing-filter-groups {
    min-width: 100%;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-metadata-item,
  .adi-jobs-my-jobs-listing-posted-jobs-metadata {
    margin-bottom: 0;
  }
  #job-listings-container {
    gap: 12px;
  }
  #jobPostingModal .modal-dialog {
    width: 100%;
    border-radius: 0;
  }

  #jobPostingModal .modal-content {
    min-height: 80vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 20px;
    border-radius: 0;
  }
  .adi-jobs-resume-view-container {
    position: fixed;
    top: 60px;
    transform: translateX(100%);
    width: 100vw;
    height: calc(100dvh - 65px);
    transition: transform 0.4s ease-in-out;
  }
  .adi-jobs-resume-view-container.active {
    transform: translateX(0%);
  }
  .adi-job-proposals-resume-container-close-btn {
    display: block !important;
  }
  .adi-resume-my-own-resume-display-main-container {
    left: 10px;
    top: 10px;
    width: 109px;
  }
  .adi-resume-my-own-resume-display-inner-container {
    position: relative;
  }
  #adi-resume-my-own-resume-display-dropdown-btn {
    flex-direction: column;
    height: 60px;
  }

  .adi-resume-my-own-resume-display-inner-container > ul > li > a {
    padding: 0px 10px !important;
    font-size: 14px;
  }
  .adi-jobs-my-jobs-listing-posted-jobs-list-header-mobile-view {
    display: flex;
  }
  .adi-jobs-my-jobs-listing-filters-dropdown-menu {
    top: calc(100% + 8px);
  }
}

/* ADI JOBS RESUME STYLES ENDS HERE*/
/* -------------------------------######-----------------****--------------------######------------------- */

/* -----------------
Credit Purchase Page - Sania Ghous
------------------------- */
.credit-purchase-page-container {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 3rem;
}

/* HEADER STYLING */
.credit-purchase-page-header-section {
  background-color: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.credit-purchase-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-items: center;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #e9ecef;
}

.credit-purchase-page-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a1a1a;
  text-align: left;
  margin-bottom: 0;
}

.credit-purchase-page-balance-label {
  font-size: 1rem;
  font-weight: 500;
  color: #6c757d;
  margin-right: 10px;
}

.credit-purchase-page-balance-highlight {
  font-size: 1.1rem;
  padding: 0.5rem 0.5rem;
  border-radius: 0.5rem;
  font-weight: 800;
  background-color: var(--color-primary);
  box-shadow: 0 3px 6px rgba(13, 110, 253, 0.3);
  min-width: 35px;
  color: white;
}

/* Conversion Rate */
.credit-purchase-page-conversion-rate {
  background-color: #f8f9fa;
  color: #495057;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  border: 1px solid #dee2e6;
  font-size: 0.95rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* List Column Header */
.credit-purchase-page-header-item {
  display: grid;
  grid-template-columns: 2fr 2fr 120px;
  font-weight: 700;
  color: #495057;
  padding: 0.75rem 1.5rem;
  background-color: #ffffff;
  border-radius: 4px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Individual List Item Style */
.credit-purchase-page-item {
  display: grid;
  grid-template-columns: 2fr 2fr 120px;
  align-items: center;
  padding: 0.85rem 1.5rem;
  background-color: white;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.017);
  transition: background-color 0.2s ease, box-shadow 0.3s ease,
    transform 0.3s ease;
}

.credit-purchase-page-item:hover {
  background-color: #fcfcfc;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.credit-purchase-page-credits {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
}

.credit-purchase-page-price {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0f5132;
  text-align: left;
}

.credit-purchase-page-purchase-btn {
  padding: 0.65rem 1rem;
  font-weight: 600;
  margin-left: auto;
  background-color: var(--color-primary);
}

/* Animation for page change */
.credit-purchase-page-fade-in {
  animation: creditPurchasePageFadeIn 0.5s ease-in-out;
}

@keyframes creditPurchasePageFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* History Modal Styling */
.credit-purchase-page-history-item {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #dee2e6;
  align-items: center;
  font-size: 1.1rem;
}

.credit-purchase-page-history-item:last-child {
  border-bottom: none;
}

/* Utility and Mobile Overrides */
.credit-purchase-page-icon-sm {
  width: 20px;
  height: 20px;
  vertical-align: -0.125em;
}

.credit-purchase-page-pagination-container .pagination .page-item .page-link {
  border-radius: 6px !important;
  margin: 0 4px;
  color: #000 !important;
}
.credit-purchase-page-pagination-container
  .pagination
  .page-item.active
  .page-link {
  background: var(--color-link) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 8px 14px !important;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3) !important;
  font-size: 1rem !important;
}
#credit-purchase-page-purchase-modal {
  padding-right: 0 !important;
}
.credit-purchase-page-history-modal {
  padding-inline: 15px !important;
}
@media (min-width: 360px) and (max-width: 767px) {
  .credit-purchase-page-heading {
    font-size: 1.2rem;
  }
  .credit-purchase-page-conversion-rate {
    padding: 0.45rem 0.5rem;
    font-size: 0.7rem;
  }

  .credit-purchase-page-balance-highlight {
    font-size: 1rem;
    padding: 0.4rem 0.5rem;
    min-width: 1rem;
  }
  #credit-purchase-page-history-btn {
    border: none;
    display: block;
  }
  .available-credits-flex {
    flex-direction: column;
  }
  .available-credits-section {
    margin: 0 auto;
  }
  .credit-purchase-page-container {
    padding-inline: 15px;
  }
  .credit-purchase-page-item,
  .credit-purchase-page-header-item {
    grid-template-columns: 2.5fr 2fr 95px;
    padding-inline: 1rem;
  }
  .credit-purchase-page-purchase-btn {
    padding: 0.4rem 0.6rem;
  }
  .credit-purchase-page-header-section {
    padding: 1.2rem;
  }
  .credit-purchase-page-credits {
    font-size: 1.05rem;
  }
  .credit-purchase-page-price {
    font-size: 1rem;
  }
}

/* -----------------
Transport Active Contracts Page - Sania Ghous
------------------------- */

.Plat-Comp-LayoutRoot {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 3rem;
}
.Plat-Comp-PageHeroHeader {
  background-color: white;
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.Plat-Comp-PageHeroTitle {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-dark);
  text-align: left;
  margin-bottom: 0;
}
/* Desktop/Default Grid Layout */
.Plat-Comp-DataGridHeaderRow {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.5fr 1fr auto;
  font-weight: 700;
  color: var(--color-text-secondary);
  padding: 0.75rem 1.5rem;
  background-color: #ffffff;
  border-radius: 4px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.Plat-Comp-DataGridItemRow {
  /* Default is Grid for Desktop */
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.5fr 1fr auto;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background-color: white;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.017);
  transition: background-color 0.2s ease, box-shadow 0.3s ease,
    transform 0.3s ease;
  /* z-index: 1; */
}

.Plat-Comp-DataGridItemRow:hover {
  background-color: #fcfcfc;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  /* z-index: 2; */
}
/* Default Button Class (Not used in the card view) */
.Plat-Comp-DataGridItemRowButton {
  padding: 0.65rem 1rem;
  font-weight: 600;
  margin-left: auto;
  background-color: var(--color-primary);
}
.Plat-Comp-FooterPaginationBlock .pagination .page-item .page-link {
  border-radius: 6px !important;
  margin: 0 4px;
  color: #000 !important;
}
.Plat-Comp-FooterPaginationBlock .pagination .page-item.active .page-link {
  background: var(--color-link) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 8px 14px !important;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3) !important;
  font-size: 1rem !important;
}

@media (min-width: 360px) and (max-width: 767px) {
  .Plat-Comp-LayoutRoot {
    padding-inline: 15px;
  }
  .Plat-Comp-PageHeroHeader {
    padding: 1.2rem;
  }
  .Plat-Comp-PageHeroTitle {
    font-size: 1.2rem;
  }

  /* Hide the Desktop Header */
  .Plat-Comp-DataGridHeaderRow {
    display: none !important;
  }

  /* Override Grid to Card Layout */
  .Plat-Comp-DataGridItemRow {
    display: flex; /* Change from grid to flex for stacking */
    flex-direction: column;
    align-items: flex-start; /* Stack items to the left */
    padding: 1.25rem; /* Better padding for card look */
    gap: 0; /* Remove default flex gap */
  }
}

/* --- Modal Styling --- */
#transport-active-contracts-confirmation-modal .modal-content {
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

#transport-active-contracts-confirmation-modal .modal-title {
  font-weight: 600;
  font-size: 1.125rem; /* text-lg */
}
#transport-active-contracts-confirmation-modal .modal-body {
  padding: 0 1.5rem;
}
#transport-active-contracts-confirmation-modal .modal-footer {
  padding: 1rem;
  border-top: 1px solid var(--color-border-light);
}

/* --- Ellipsis for Text Overflow --- */
.transport-active-contracts-Plat-Comp-DataGridItemRow {
  padding: 0.65rem 1.5rem;
  margin-bottom: 0.5rem;
}
.transport-active-contracts-Plat-Comp-DataGridItemRow .ellipsis-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.transport-active-contracts-Plat-Comp-DataGridItemRow .ellipsis-cell a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  min-width: 0;
}

/* --- Button Styles --- */
.btn-primary.transport-agreements-contract-close-button {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  padding: 0.45rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.btn-primary.transport-agreements-contract-close-button:hover {
  background-color: var(--color-link);
}
#transport-active-contracts-confirmation-modal .btn-danger {
  background-color: #ef4444;
  border-color: var(--color-red-danger);
  border-radius: 0.5rem;
  transition: all 0.2s;
}
#transport-active-contracts-confirmation-modal .btn-danger:hover {
  background-color: var(--color-danger);
  color: #fff;
  border-color: #b91c1c;
}

/* 1. ANIMATION FOR REMOVAL (FADE-OUT & COLLAPSE) */
.fade-out-and-collapse {
  max-height: 50px;
  opacity: 1;
  transition: opacity 0.5s ease-out, max-height 0.6s ease-out,
    padding 0.6s ease-out, margin 0.6s ease-out, border 0.6s ease-out;
}
.fade-out-and-collapse.is-collapsing {
  opacity: 0 !important;
  max-height: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  overflow: hidden !important;
}

/* 2. ANIMATION FOR LIST CONTAINER (PAGINATION FADE) */
#transport-active-contracts-plans-list-container {
  transition: opacity 0.3s ease-in-out;
}
.transport-active-contracts-list-container-loading {
  opacity: 0;
}

/* 3. ANIMATION FOR NEWLY APPENDED ROW (PULLING UP FROM NEXT PAGE) */
.transport-active-contracts-newly-added-row {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease-out 0.2s, transform 0.4s ease-out 0.2s;
}
.transport-active-contracts-newly-added-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.transport-active-contracts-header-item {
  grid-template-columns: 1.2fr 1.5fr 1fr 1fr auto;
}

.transport-active-contracts-header {
  width: 100%;
}
.transport-active-contracts-add-btn {
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-link);
  text-decoration: none; /* Remove underline */
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer !important;
}
.transport-active-contracts-add-btn:hover {
  text-decoration: underline;
  font-size: 1.1rem;
}
.transport-active-contracts-Plat-Comp-DataGridItemRow .transport-card-line,
.transport-active-contracts-company-name {
  font-size: 1.1rem !important;
}

.transport-active-contracts-Plat-Comp-DataGridItemRow .transport-card-line {
  padding-right: 15px;
}
.transport-active-contracts-Plat-Comp-LayoutRoot {
  max-width: 1200px;
}
.transport-active-contracts-Plat-Comp-DataGridItemRow,
.transport-active-contracts-header-item {
  grid-template-columns: 1.3fr 1.5fr 0.8fr 0.8fr 50px;
}
.transport-active-contracts-d-label-hide-on-desktop {
  color: #646363;
}
.transport-active-contracts-card-action-container {
  display: flex;
  align-items: center;
}
.transport-active-contracts-close-contract-option:hover {
  background-color: rgba(255, 0, 0, 0.065);
}
/* Ensure dropdown appears above all rows */
.adi-transport-active-contracts-aadi-dropdown-component {
  position: relative;
  z-index: 1 !important;
}

.adi-transport-active-contracts-aadi-dropdown-menu {
  z-index: 2 !important;
  min-width: 160px !important;
}

.adi-transport-active-contracts-aadi-dropdown-menu.show {
  display: block;
}

.adi-transport-active-contracts-hide-dropdown-btn {
  visibility: hidden !important;
}
/* Disable pointer events on everything except the dropdown menu itself */
body.adi-transport-active-contracts-dropdown-open * {
  pointer-events: none !important;
}

body.adi-transport-active-contracts-dropdown-open
  .adi-transport-active-contracts-aadi-dropdown-menu,
body.adi-transport-active-contracts-dropdown-open
  .adi-transport-active-contracts-aadi-dropdown-menu
  * {
  pointer-events: auto !important;
}

/* view details modal styling */
.adi-transport-active-contracts-section-card {
  background-color: #fff;

  border-radius: 8px;
  padding: 10px 20px;
  margin-bottom: 10px;
}
.adi-transport-active-contracts-detail-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.adi-transport-active-contracts-detail-value {
  font-size: 1rem;
  font-weight: 500;
  color: #212529;
  margin-bottom: 10px;
}
.adi-transport-active-contracts-terms-list {
  list-style: none;
  padding-left: 0;
}
.adi-transport-active-contracts-terms-list li {
  padding: 5px 0;
  margin-left: 15px;
  list-style: initial;
}
.adi-transport-active-contracts-terms-list li:last-child {
  border-bottom: none;
}
.adi-transport-active-contracts-agreement-overview {
  border-bottom: 1px solid #e0e6ed;
}
#adi-transport-active-contracts-contractDetailsModal .modal-content {
  padding: 0 !important
  ;
}
#adi-transport-active-contracts-contractDetailsModal .modal-header {
  padding: 20px !important;
}
#contractModal .modal-body,
#transport-companies-page-cancel-confirmation-modal .modal-body,
#transport-companies-page-close-confirmation-modal .modal-body,
#transport-companies-page-close-confirmation-modal .modal-footer,
#credit-purchase-page-purchase-modal .modal-body,
#transport-active-contracts-confirmation-modal .modal-body,
#transport-active-contracts-confirmation-modal .modal-footer {
  padding: 0 !important;
}
#contractModal,
#transport-companies-page-close-confirmation-modal,
#transport-companies-page-cancel-confirmation-modal,
#transport-active-contracts-confirmation-modal {
  padding-inline: 0 !important;
}
#createAdModal,
#filtersModal {
  padding-left: 15px !important;
}
@media (min-width: 360px) and (max-width: 767px) {
  /* Style for each line of data in the card */
  .transport-active-contracts-Plat-Comp-DataGridItemRow .transport-card-line {
    width: 100%;
    margin-bottom: 0.4rem; /* Spacing between lines */
    font-size: 1.1rem !important;
    color: var(--color-text-secondary);
  }
  .transport-active-contracts-Plat-Comp-DataGridItemRow
    .transport-card-line
    strong {
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: 1.1rem !important;
  }

  /* 5th Line: Separator and Button Container */
  .transport-active-contracts-card-action-container {
    width: 100%;
    /* padding-top: 5px; */
    margin-top: 10px;
    height: fit-content;
    border-top: 1px dashed var(--color-border-light);
  }

  /* Close Button Style: Border only, fit-content width */
  .transport-active-contracts-primary-btn-mobile {
    border-radius: 0.5rem;
    padding: 0.4rem 0.8rem;
    transition: all 0.2s ease;
    width: fit-content; /* Key: only take up the content width */
    font-weight: 600;
  }

  .transport-active-contracts-primary-btn-mobile:hover {
    background-color: var(
      --color-link
    ) !important; /* Light red hover background */
  }

  /* Header responsiveness */
  .transport-active-contracts-header {
    flex-direction: column;
  }
  .transport-active-contracts-add-btn {
    margin-top: 5px;
    font-size: 1rem;
  }

  /* Ensure labels are visible on Mobile/Tablet */
  .transport-active-contracts-d-label-hide-on-desktop {
    display: inline;
  }

  .transport-active-contracts-Plat-Comp-DataGridItemRow {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .transport-active-contracts-Plat-Comp-DataGridItemRow .transport-card-line {
    font-size: 0.95rem !important;
  }
  .transport-active-contracts-Plat-Comp-DataGridItemRow
    .transport-card-line-company-name {
    padding-top: 10px;
    padding-right: 30px !important ;
  }
  .transport-active-contracts-Plat-Comp-DataGridItemRow
    .transport-card-line-end-date {
    padding-bottom: 5px;
  }
  /* Reorder: move the dropdown up next to company name */
  .transport-active-contracts-Plat-Comp-DataGridItemRow
    > .transport-active-contracts-card-action-container {
    order: 1;
    align-self: flex-end !important;
    margin-top: -28px; /* pull up near company name */
    width: fit-content;
  }
  .transport-active-contracts-Plat-Comp-DataGridItemRow
    .transport-card-line-address {
    margin-top: 5px;
  }
  .transport-active-contracts-Plat-Comp-DataGridItemRow .transport-card-line {
    margin-bottom: 0;
  }

  .transport-active-contracts-Plat-Comp-DataGridItemRow
    > .transport-card-line:nth-child(1) {
    order: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Other fields remain below */
  .transport-active-contracts-Plat-Comp-DataGridItemRow
    > .transport-card-line:nth-child(2),
  .transport-active-contracts-Plat-Comp-DataGridItemRow
    > .transport-card-line:nth-child(3),
  .transport-active-contracts-Plat-Comp-DataGridItemRow
    > .transport-card-line:nth-child(4) {
    order: 2;
  }

  /* Make sure dropdown stays compact */
  .adi-transport-active-contracts-aadi-dropdown-button {
    padding: 6px;
    float: right;
  }

  .adi-transport-active-contracts-aadi-dropdown-icon {
    width: 18px;
    height: 18px;
  }
  .aadi-dropdown-button.adi-transport-active-contracts-hide-dropdown-btn {
    visibility: visible !important;
  }
}

@media (min-width: 768px) {
  /* Hide the labels only when the grid/table view is active */
  .transport-active-contracts-d-label-hide-on-desktop {
    display: none;
  }
}

/* -----------------
Transport Companies Page - Sania Ghous
------------------------- */
.transport-companies-page-item .btn {
  padding: 0.45rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  transition: all 0.2s;
}

/* NEW CLASSES FOR TABLE STRUCTURE (Desktop Grid) */
.transport-companies-page-header-item {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr 140px;
  font-weight: 700;
  color: #495057;
  padding: 0.75rem 1.5rem;
  background-color: #ffffff;
  border-radius: 4px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.transport-companies-page-item {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr 140px;
  align-items: center;
  padding: 0.65rem 1.5rem;
  background-color: white;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.017);
  transition: background-color 0.2s ease, box-shadow 0.3s ease;
}

.transport-companies-page-item:hover {
  background-color: #fcfcfc;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* --- TRUNCATION FIX (min-width: 0 on grid items) --- */
.transport-companies-page-item > div {
  /* This is crucial for fixing the overflow bug in grid layouts */
  min-width: 0;
}

.transport-companies-page-item .transport-company-name,
.transport-companies-page-item .transport-company-address {
  padding-right: 20px;
}
/* Company Name Link: APPLY TRUNCATION DIRECTLY HERE (Works for both Grid and Flex) */
.transport-companies-page-company-link {
  font-size: 1.1rem !important;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;

  /* Required properties for truncation */
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.transport-companies-page-company-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
  font-size: 1.1rem !important;
}

/* Apply truncation to the Address column (2nd div) */
.transport-companies-page-item > div:nth-child(2) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Status Badges (NEW) */
.transport-companies-page-status-badge {
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.35em 0.65em;
  border-radius: 0.375rem;
  display: inline-block;
}

/* --- Mobile Specific Badge Styling (to ensure correct order) --- */
.transport-companies-page-item
  > div:nth-child(1)
  .transport-companies-page-status-badge {
  flex-shrink: 0; /* Prevents badge from shrinking */
  margin-left: auto;
}

.transport-companies-page-item .status-pending {
  color: #664d03;
  background-color: #fff3cd;
}
.transport-companies-page-item .status-rejected {
  color: #842029;
  background-color: #f8d7da;
}
.transport-companies-page-item .status-closed {
  color: #303030;
  background-color: #eaeaea;
}
.transport-companies-page-item .status-approved {
  color: #0f5132;
  background-color: #d1e7dd;
}

/* Action Button (NEW) */
.transport-companies-page-action-btn {
  padding: 0.5rem 0.4rem;
  font-weight: 600;
  width: 90%;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Loading spinner styles */
.transport-companies-page-loading {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: transport-companies-page-spin 0.7s linear infinite;
}

@keyframes transport-companies-page-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.transport-companies-page-search-filter-bar {
  background: #fff !important;
  padding: 10px;
  margin-bottom: 5px !important;
}
/* --- MOBILE OVERRIDES (Fully Responsive Stacked View) --- */
@media (max-width: 991px) {
  /* Hide the desktop header */
  .transport-companies-page-header-item {
    display: none;
  }
  .transport-companies-page-item .transport-company-name {
    display: flex !important;
    justify-content: space-between;
    padding-right: 0;
  }
  .transport-companies-page-item {
    /* Use flexbox to stack all elements vertically */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    gap: 0.5rem; /* Reduced gap for a tighter look */
  }

  /* Ensure all child divisions take full width and are visible */
  .transport-companies-page-item > div {
    width: 100%;
    text-align: left;
    display: block !important; /* Override desktop grid alignment */
    overflow: visible; /* Prevent accidental truncation of the parent div */
  }

  /* 1. Name and Status on one line - This is the parent of the link and the mobile badge */
  .transport-companies-page-item > div:nth-child(1) {
    order: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    min-width: 0; /* Needed for truncation */
  }

  /* Ensure company link is the main content on line 1 */
  .transport-companies-page-item
    > div:nth-child(1)
    .transport-companies-page-company-link {
    flex: 1;
    min-width: 0;
    max-width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
  .transport-companies-page-item .transport-company-address p {
    font-size: 1rem !important;
    margin-bottom: 0 !important;
  }
  /* 3. Status badge aligned right, stays visible */
  .transport-companies-page-item
    > div:nth-child(1)
    .transport-companies-page-status-badge {
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
  }
  /* 3. Status element: HIDE the desktop status column on mobile */
  .transport-companies-page-item > div:nth-child(3) {
    display: none;
  }

  /* 2. Address */
  .transport-companies-page-item > div:nth-child(2) {
    order: 2;
    font-size: 0.9rem;
    color: #6c757d;
  }

  /* 3. Action Button */
  .transport-companies-page-item > div:nth-child(4) {
    order: 3;
    margin-top: 0.75rem;
  }

  /* Ensure the button takes full width on mobile */
  .transport-companies-page-action-btn {
    width: fit-content;
  }
}

/* Search + Filter Styling */
.transport-companies-page-search-filter-section {
  display: flex;
  width: 100%;
  gap: 12px;
}
.transport-companies-page-search-filter-bar-sec {
  flex: 1;
}
.transport-companies-page-search-filter-bar {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 0.95rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Filter Dropdown */
.transport-companies-page-custom-filter-dropdown {
  position: relative;
  width: 100%;
}

.transport-companies-page-filter-toggle {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px 14px;
  width: 200px;
  text-align: left;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.transport-companies-page-filter-toggle:hover {
  background: #f9f9f9;
}

.transport-companies-page-filter-toggle i {
  transition: transform 0.25s ease;
}
.transport-companies-page-filter-toggle.open i {
  transform: rotate(180deg);
}

.transport-companies-page-filter-menu {
  position: absolute;
  top: calc(100%)-10px;
  right: 0;
  width: 200px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s ease;
  z-index: 1000;
}
.transport-companies-page-filter-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.transport-companies-page-filter-item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
}
.transport-companies-page-filter-item:hover {
  background: #f4f4f4;
}

.transport-companies-page-filter-item.active {
  background: #eef5ff;
  font-weight: 600;
}

.transport-companies-page-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.transport-companies-page-dot-all {
  background: #aaa;
}
.transport-companies-page-dot-none {
  background: #ccc;
}
.transport-companies-page-dot-pending {
  background: #ffc107;
}
.transport-companies-page-dot-approved {
  background: #28a745;
}
.transport-companies-page-dot-rejected {
  background: #dc3545;
}
.transport-companies-page-dot-closed {
  background: #6c757d;
}

@media (max-width: 768px) {
  .transport-companies-page-search-filter-bar {
    flex: 1;
  }
  .transport-companies-page-custom-filter-dropdown {
    flex-shrink: 0;
    width: auto;
  }
  .transport-companies-page-filter-toggle {
    width: 100px;
  }
  .transport-companies-page-filter-menu {
    width: 150px;
  }
  .transport-companies-page-search-filter-section {
    gap: 5px;
  }
  .transport-companies-page-item .transport-company-address {
    margin-top: -5px !important;
  }
  .transport-companies-page-item {
    padding-bottom: 20px;
  }
  .transport-companies-page-item .btn {
    margin-top: -5px !important;
    padding: 8px 15px;
  }
}
/* contract modal styling */
.transport-companies-page-duration-error-message,
.transport-companies-page-addon-error-message {
  color: #dc3545; /* Bootstrap danger color */
  font-size: 0.875em;
  margin-top: 0.25rem;
  display: none; /* Initially hidden */
}
/* Custom class for the dynamic input area */
.transport-companies-page-dynamic-input-area {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-top: 0.5rem;
}
/* New style for clickable 'Add Clause' text */
.transport-companies-page-add-clause-trigger {
  cursor: pointer;
  user-select: none;
}

.transport-companies-page-form-select {
  margin-bottom: 0 !important;
}
.transport-companies-page-text-danger {
  font-size: 1rem !important;
}
.transport-companies-page-input-group {
  padding-inline: 0 !important;
}
.transport-companies-page-input-group input {
  background-color: #ffff;
  margin-right: 10px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem !important;
  padding: 7px 12px;
  margin-bottom: 0;
}
.transport-companies-page-add-new-btn {
  color: var(--color-link);
  font-size: 1rem;
}
.transport-companies-page-btn-outline-add {
  border-radius: 0.25rem !important;
}
.transport-companies-page-modal-primary-btn {
  background-color: var(--color-primary);
}
.transport-companies-page-send-request-btn {
  background-color: var(--color-link);
  color: #fff;
}
.transport-companies-page-send-request-btn:hover {
  background-color: var(--color-link);
  color: #fff;
  filter: brightness(1.2);
}
.transport-companies-page-btn-danger:hover {
  transform: none !important;
}
.transport-companies-page-custom-filter-dropdown .filter-label {
  color: #000 !important;
}

/* --------------
Contracts requests page - Sania Ghous
------------- */

.adi-transport-contract-requests-page-mobile-label {
  color: #646363;
}
.adi-transport-contract-requests-page-custom-filter-dropdown
  .transport-companies-page-filter-menu {
  display: none;
}
.adi-transport-contract-requests-page-custom-filter-dropdown.open
  .transport-companies-page-filter-menu {
  display: block;
}
.adi-transport-contract-requests-page-custom-filter-dropdown.open
  .transport-companies-page-filter-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.adi-transport-contract-requests-page--filter-menu {
  display: none;
}
.Plat-Comp-PageHeroHeader-adi-transport-contract-requests-page {
  padding: 1rem 1.5rem;
}
.adi-transport-contract-requests-page-search-filter-bar {
  margin-bottom: 0 !important;
}
.adi-transport-contract-requests-page--accept-contract-modal .modal-body,
.adi-transport-contract-requests-page--reject-contract-modal .modal-body {
  padding: 0 1.5rem;
}
.adi-transport-contract-requests-page-status {
  font-size: 0.9rem;
}
.adi-transport-contract-requests-page-status-pending {
  color: #664d03;
  background-color: #fff3cd;
}
.adi-transport-contract-requests-page-status-rejected {
  color: #842029;
  background-color: #f8d7da;
}
.adi-transport-contract-requests-page-status-closed {
  color: #303030;
  background-color: #eaeaea;
}
.adi-transport-contract-requests-page-status-approved {
  color: #0f5132;
  background-color: #d1e7dd;
}
/* DROPDOWN COMPONENT STYLING */
.Adi-Plat-Comp-Dropdown-Container {
  position: relative;
  display: inline-block;
}

.Adi-Plat-Comp-Dropdown-Button {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  display: flex;
  width: 28px;
  height: 17px;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: background-color 0.2s ease;
  border: 1px solid var(--divider);
}

.Adi-Plat-Comp-Dropdown-Button:hover {
  background-color: #f1f1f1;
}

.Adi-Plat-Comp-Dropdown-Icon {
  width: 85% !important;
  color: #7f8c8d;
}

.Adi-Plat-Comp-Dropdown-Menu {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
  z-index: 1000;
  min-width: 160px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.25rem 0;
  margin-top: 5px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 9999 !important;
  position: absolute;
}

.Adi-Plat-Comp-Dropdown-Menu.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.Adi-Plat-Comp-Dropdown-Option {
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: #333;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Prevent underlying rows from being interactive when dropdown is open */
.Adi-Plat-Comp-Dropdown-Menu.is-open {
  pointer-events: auto;
}

.adi-transport-contract-requests-Plat-Comp-DataGridItemRow
  :not(:has(.Adi-Plat-Comp-Dropdown-Menu.is-open)) {
  pointer-events: auto;
}

.adi-transport-contract-requests-Plat-Comp-DataGridItemRow
  :has(.Adi-Plat-Comp-Dropdown-Menu.is-open)
  ~ .Plat-Comp-DataGridItemRow {
  pointer-events: none;
}
.adi-transport-contract-requests-Plat-Comp-DataGridItemRow {
  position: relative;
  z-index: 1;
}
.adi-transport-contract-requests-Plat-Comp-DataGridItemRow:hover {
  z-index: 2;
}
@media (min-width: 360px) and (max-width: 767px) {
  .adi-transport-contract-requests-page--aadi-dropdown-menu
    .aadi-dropdown-option {
    padding: 3px 12px;
  }
  .Plat-Comp-PageHeroHeader-adi-transport-contract-requests-page {
    flex-direction: column;
  }
  .adi-transport-contract-requests-page-address {
    margin-top: 5px;
  }
  .adi-transport-contract-requests-page-column-status {
    padding-bottom: 5px;
  }
}

/* ----------------
Adi shop page - Sania Ghous
---------------------- */
.adi-shop-inventory-page-Plat-Comp-LayoutRoot {
  max-width: 1100px;
}
.adi-shop-inventory-page-uploadExcelBtn {
  background-color: var(--color-link);
  color: #fff;
  border-radius: 5px;
}
.adi-shop-inventory-page-uploadExcelBtn:hover {
  background-color: var(--color-link);
  color: #fff;
  filter: brightness(1.15);
}
.adi-shop-inventory-page-search-filter-section {
  width: 80%;
}
.adi-shop-inventory-page-selectall-checkbox,
.adi-shop-inventory-page-row-checkbox {
  width: 1rem;
  height: 1rem;
}
.adi-shop-inventory-page--header-item,
.adi-shop-inventory-page-Plat-Comp-DataGridItemRow {
  grid-template-columns: 50px 1.5fr 1.2fr 1fr 0.7fr 80px;
}
.adi-shop-inventory-page-Plat-Comp-DataGridItemRow {
  padding: 0.65rem 1.5rem;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}
.adi-shop-inventory-page-Plat-Comp-DataGridItemRow:hover {
  z-index: 2;
}
.adi-shop-inventory-page-inventory-list-container {
  transition: opacity 0.3s ease-in-out;
}
.Adi-Plat-Comp-Dropdown-Menu .aadi-dropdown-option {
  padding: 6px 1rem;
}
.adi-shop-inventory-page-inventory-name {
  color: var(--color-link);
  cursor: pointer;
  font-weight: 600;
}
/* Add ellipsis when Name column text overflows */
.adi-shop-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
  cursor: pointer;
  padding-right: 20px;
}

.adi-shop-inventory-page-inventory-name:hover {
  text-decoration: underline;
}
.adi-shop-inventory-page-upload-modal .modal-body,
.adi-shop-inventory-page-edit-inventory-modal .modal-body,
.adi-shop-inventory-page-viewInventoryModal .modal-body,
.adi-shop-inventory-page-deleteConfirmModal .modal-body {
  padding-inline: 20px !important;
}
.adi-shop-inventory-page-edit-inventory-modal .modal-dialog {
  padding: 20px;

  /* margin-right: 40px; */
}
.adi-shop-inventory-page-deleteConfirmModal .modal-body {
  padding-bottom: 30px !important;
}
.adi-modal-btn-submit {
  background-color: var(--color-primary) !important;
  color: white !important;
}
.adi-modal-btn-submit:hover {
  background-color: var(--color-link);
  color: #fff;
  filter: brightness(1.15);
}
.adi-shop-inventory-page-border-btn {
  border: 1px solid var(--color-primary);
}
.adi-shop-inventory-page-floating-delete-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  gap: 15px;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

/* Hide labels on desktop */
@media (min-width: 768px) {
  .adi-shop-inventory-page-mobile-label {
    display: none;
  }
}
.adi-shop-inventory-page-floating-delete-bar.visible {
  visibility: visible !important;
  opacity: 1 !important;
}
/* Form Styling */
.Adi-Plat-Comp-Form-Label {
  font-weight: 700;
  font-size: 1rem;
  color: #343a40;
  margin-bottom: 0.25rem;
}
.Adi-Plat-Comp-Form-Control {
  margin-bottom: 10px !important;
  border-radius: 0.275rem !important;
  padding: 6px 15px !important;
  background-color: #fff !important;
}
.Adi-Plat-Comp-Form-Control:focus {
  box-shadow: 0 0 0 0.05rem rgb(90, 155, 246) !important;
}

/* Validation: remove green ticks/red borders */
.Adi-Plat-Comp-Form-Control.is-valid,
.Adi-Plat-Comp-Form-Control:valid {
  border-color: #ced4da !important;
  background-image: none !important;
  padding-right: 0.75rem !important;
}
.Adi-Plat-Comp-Form-Control.is-invalid,
.Adi-Plat-Comp-Form-Control:invalid {
  border-color: #ced4da !important;
  background-image: none !important;
  padding-right: 0.75rem !important;
}
.invalid-feedback {
  color: var(--color-danger);
  margin-top: -7px;
  font-size: 0.9rem;
}
.Adi-Plat-Comp-Form-Section-Heading {
  font-size: 1rem;
  color: var(--color-primary);
  padding-left: 8px;
}
.Adi-Plat-Comp-Form-Drop-Zone {
  border: 1px solid #ced4da;
  padding: 2rem;
  margin-top: 5px;
}
.Adi-Plat-Comp-Form-Drop-Zone:hover {
  border: 1px solid rgb(69, 145, 216);
}
/* Reorder box */
.adi-shop-inventory-page-reorder-fields {
  padding: 1rem;
  margin-top: 1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: #fcfcfc;
}

/* Style for the displayed values */
.adi-shop-inventory-page-value {
  font-size: 1rem;
  line-height: 1.5;
  padding-left: 0.1rem;
  color: #495057;
  min-height: calc(1.5em + 0.75rem + 2px);
  display: block;
}

/* Reorder fields styling  */
.adi-shop-inventory-page-reorder-fields {
  padding: 1rem;
  margin-top: 1rem;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  background-color: #fcfcfc;
}
/* Subtle “row updated” flash */
@keyframes rowPulse {
  0% {
    background-color: #dee7f0;
  }
  100% {
    background-color: transparent;
  }
}
.Adi-Plat-Comp-row-updated {
  animation: rowPulse 1s ease-in-out;
}
.adi-shop-inventory-page-fa-cloud-arrow-up {
  font-size: 1.5rem;
}
.adi-shop-inventory-page-form-check-input {
  border: 1px solid #acb0b4 !important ;
}
.adi-shop-inventory-page-form-check-label {
  padding-top: 2px;
}
/* Highlight selected rows */
.Plat-Comp-DataGridItemRow.selected-row {
  background-color: #f1f8ff; /* light blue background */
  transition: background-color 0.2s ease;
}
/* Specific z-index handling only for ADI Shop Inventory Page */
body.transport-active-contracts-body
  #floatingDeleteBar.adi-shop-inventory-page-floating-delete-bar {
  z-index: 1040 !important; /* Below the modal */
}

/* Target only the delete confirmation modal and its backdrop */

.adi-shop-inventory-page-deleteConfirmModal.modal.show {
  z-index: 1055 !important; /* Slightly above backdrop */
}

.adi-shop-inventory-page-deleteConfirmModal + .modal-backdrop.show {
  z-index: 1050 !important; /* Backdrop above floating bar */
}
/* Sorting */
.adi-shop-inventory-page-sortable {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.adi-shop-inventory-page-sortable:hover .sort-icon {
  color: #000;
}
.adi-shop-inventory-page-sortable.active-sort {
  font-weight: 600;
  color: #000;
}
.adi-shop-inventory-page-edit-inventory-modal .modal-body,
.adi-shop-inventory-page-edit-inventory-modal .modal-footer,
.adi-shop-inventory-page-viewInventoryModal .modal-body,
.adi-shop-inventory-page-viewInventoryModal .modal-footer,
.adi-shop-inventory-page-deleteConfirmModal .modal-body,
.adi-shop-inventory-page-upload-modal .modal-body,
.adi-shop-inventory-page-upload-modal .modal-footer {
  padding-inline: 0 !important;
}
.Adi-Plat-Comp-Form-Section-Heading {
  padding-left: 10px !important;
}
.adi-shop-inventory-page-edit-inventory-modal .col-md-6,
.adi-shop-inventory-page-viewInventoryModal .col-md-6 {
  padding-left: 15px !important;
}
.adi-shop-inventory-page-upload-modal,
.adi-shop-inventory-page-deleteConfirmModal {
  padding-right: 0 !important;
}
@media (min-width: 360px) and (max-width: 767px) {
  .adi-shop-inventory-page-search-filter-section {
    width: 100%;
  }

  /* Mobile-friendly layout for adi-shop rows */
  /* Make each row a stacked card */
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow {
    display: flex;
    flex-direction: column;
    padding: 12px 14px 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
  }

  /* Hide table header */
  .adi-shop-inventory-page--header-item {
    display: none !important;
  }

  /* --- FIRST LINE (Name + Checkbox + Dropdown) --- */
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(2) {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-link);
    padding-right: 70px;
  }

  /* Position checkbox and dropdown side by side (top-right) */
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(1),
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(6) {
    position: absolute;
    top: 15px;
  }

  /* Checkbox on right side, before dropdown */
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(1) {
    right: 75px;
    z-index: 2;
  }

  /* Dropdown on far right */
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(6) {
    top: 5px;
    right: 12px;
    /* left: 90%; */
    z-index: 3;
    width: fit-content;
  }

  /* Ensure dropdown menu opens above other elements */
  .Adi-Plat-Comp-Dropdown-Menu {
    z-index: 9999 !important;
  }

  /* --- SECOND LINE (Inventory Number) --- */
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(3) {
    order: 3;
    margin-top: 8px;
    font-size: 0.9rem;
    color: #000000;
  }

  /* --- THIRD LINE (Unit Price + Stock together) --- */
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(4),
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(5) {
    order: 4;
  }

  .adi-shop-item-unitprice,
  .adi-shop-item-stock {
    display: flex !important;
    align-items: center;
    font-size: 0.9rem;
    color: #000000 !important;
    width: 100%;
    margin-top: 5px;
  }
  .adi-shop-item-unitprice {
    margin-right: auto;
  }

  .adi-shop-item-stock {
    margin-left: auto;
  }

  /* Disable grid layout from desktop */
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow {
    grid-template-columns: none !important;
  }
  .adi-shop-inventory-page-mobile-label {
    display: inline-block;
    font-size: 0.95rem;
    color: #646363;
  }

  .adi-shop-item-name {
    font-weight: 600;
    font-size: 1rem;
  }
  .adi-shop-inventory-page-floating-delete-bar.visible {
    padding-inline: 0.5rem;
    gap: 8px;
    bottom: 50px;
  }
  .adi-shop-inventory-page-floating-delete-bar .btn-danger {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
  .adi-shop-inventory-page-floating-delete-bar .deselect-All-Btn {
    padding: 0.35rem 0.7rem;
  }

  /* Make the two columns share one flex row */
  .adi-shop-item-unitprice {
    order: 4;

    margin-top: 5px;
  }

  .adi-shop-item-stock {
    order: 5;

    margin-top: 5px;
  }

  /* Force both to sit side by side, not stacked */
  .adi-shop-item-unitprice + .adi-shop-item-stock {
    display: flex;
  }

  /* Optional — hide any transparent color mistake */
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(4),
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(5) {
    color: #000 !important;
  }
  .adi-shop-item-laptop-only {
    display: none !important;
  }
  .adi-shop-inventory-page-mobile-sort-dropdown {
    width: fit-content;
    min-width: 90px;
    padding: 2px 8px;
    font-size: 14px;
    border-radius: 6px;
    display: inline-block;
  }
}
@media (min-width: 360px) and (max-width: 567px) {
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(1) {
    right: 50px;
  }
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(6) {
    left: 90%;
  }
  .adi-shop-inventory-page-viewInventoryModal .modal-dialog {
    margin: 20px !important;
    padding-right: 20px !important;
  }
  .adi-shop-inventory-page-edit-inventory-modal .modal-dialog,
  #adi-transport-active-contracts-contractDetailsModal {
    padding-right: 0px !important;
  }
}
@media (min-width: 360px) and (max-width: 450px) {
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(1) {
    right: 47px;
  }
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(6) {
    left: 88%;
  }
}
@media (min-width: 360px) and (max-width: 370px) {
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(1) {
    right: 42px;
  }
  .adi-shop-inventory-page-Plat-Comp-DataGridItemRow > div:nth-child(6) {
    left: 88%;
  }
}

/* end */

/* -------------------
Speed searches selection page (SANIA)
------------------------------------------ */
/*  Containers  */
.adi-speed-search-selector-page-Plat-Comp-PageHeroHeader,
.adi-speed-search-selector-page-container {
  max-width: 1100px;
  margin: 0 auto;
}

.adi-speed-search-selector-page-Plat-Comp-PageHeroHeader {
  margin-bottom: 10px;
}

.adi-speed-search-selector-page-Plat-Comp-PageHeroHeader p {
  margin-top: 5px;
  margin-bottom: 0;
}

.adi-speed-search-selector-page-container {
  background: #fff;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.016) 0px 4px 10px;
  padding: 30px;
}

/*  Header */

.adi-speed-search-selector-page-Plat-Comp-PageHeroTitle {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

.adi-speed-search-selector-page-header-subtitle {
  color: #4b5563;
  font-size: 1rem;
  margin-top: 5px;
  margin-bottom: 15px;
}

/*  Headings */
.adi-speed-search-selector-page-h2-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 10px 0;
  padding-bottom: 5px;
}

/* Selected Searches  */
.adi-speed-search-selector-page-selectedSearchesList {
  min-height: 40px;
  max-height: 150px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 0 0 4px #f3f9ff;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.adi-speed-search-selector-page-selected-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  background-color: #eef6ff;
  color: #000;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.adi-speed-search-selector-page-selected-item:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.adi-speed-search-selector-page-placeholder-text {
  color: #4b5563;
  font-style: italic;
  margin: 0;
  padding: 5px 0;
}

/*  Search Bar */
.adi-speed-search-selector-page-controls-section {
  margin: 20px 0;
  width: 100%;
  max-width: 500px;
}

.adi-speed-search-selector-page-search-wrapper {
  position: relative;
}

.adi-speed-search-selector-page-search-input {
  width: 100%;
  padding: 8px 18px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1.1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.adi-speed-search-selector-page-search-input:focus {
  outline: none;
  border-color: rgb(73, 121, 210);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
}

.adi-speed-search-selector-page-clearSearch {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  color: #6b7280;
  display: none;
}

/* All Searches Grid  */
#adi-speed-search-selector-page-allSearchesGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  padding: 0;
}

.adi-speed-search-selector-page-search-tag {
  padding: 12px 10px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  box-shadow: inset 0 0 0 1px #d1d5db;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: transparent;
  color: #1f2937;
  border-radius: 0;
  position: relative;
}

.adi-speed-search-selector-page-search-tag:hover {
  background-color: #f3f9ff;
  box-shadow: none;
}

.adi-speed-search-selector-page-search-tag.adi-speed-search-selector-page-is-selected {
  background-color: #eef6ff;
  box-shadow: inset 0 0 0 1px #08337528;
}

.adi-speed-search-selector-page-search-tag.adi-speed-search-selector-page-is-selected:hover {
  background-color: #e0eafc;
}

.adi-speed-search-selector-page-placeholder-no-results-found {
  width: 100%;
  text-align: center;
  padding: 1rem 0.7rem;
  grid-column: 1 / -1;
  background-color: #f9fafb;
  border-top: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
  font-weight: 500;
}

/* Responsive*/
@media (max-width: 1200px) {
  #adi-speed-search-selector-page-allSearchesGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .adi-speed-search-selector-page-controls-section {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .adi-speed-search-selector-page-container {
    padding: 1.2rem;
  }

  #adi-speed-search-selector-page-allSearchesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .adi-speed-search-selector-page-search-tag:hover {
    background-color: transparent;
  }
}
/* ---------------------------------- */
/* ---------------------
Restaurant Food Orders Manager - SANIA GHOUS
-------------------------------------- */
.adi-restuarant-food-orders-page-main {
  min-height: 95vh;
}
/* Search width: desktop fixed, mobile full */
.adi-restuarant-food-orders-page-search-wrap {
  width: 340px;
}

.adi-restuarant-food-orders-page-container {
  max-width: 1300px;
  margin: 0 auto;
}

/* orders summary */
.adi-restuarant-food-orders-page-status-summary {
  text-align: center;
}
.adi-restuarant-food-orders-page-status-summary span {
  font-weight: 600;
  color: #000000;
}
/* search bar */
.adi-restuarant-food-orders-page-clear-search {
  color: #979797;
  font-size: 0.8rem;
}

/* Ensure columns stack well on mobile, but align on desktop */
.adi-restuarant-food-orders-page-order-content-grid > div {
  padding: 0.25rem 0;
}

/* Modal specific item list styling */
.adi-restuarant-food-orders-page-modal-item-row {
  border-radius: 0.5rem;
  transition: background-color 0.1s;
}

/* --- TAB STYLING UPDATES --- */
.adi-restuarant-food-orders-page-nav-tabs {
  border-bottom: none !important;
  padding: 0.5rem;
  margin-bottom: 12px;
}
.adi-restuarant-food-orders-page-nav-link {
  background-color: #f4f4f4;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
  color: #495057;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  margin: 0 0.25rem;
  padding: 0.5rem 1rem;
}
.adi-restuarant-food-orders-page-nav-link:hover {
  background-color: #f0f0f0;
  border-color: #dee2e6 !important;
}
.adi-restuarant-food-orders-page-nav-link.active {
  color: var(--color-link);
  background-color: #eef6ff;
  border-color: var(--color-link) !important;
}

.adi-restuarant-food-orders-page-copy-icon-wrapper {
  position: relative;
  display: inline-block;
}
/* === GRID LAYOUT FOR ORDER TABLE (DESKTOP) === */

.Plat-Comp-DataGridHeaderRow-adi-restuarant-food-orders-page {
  grid-template-columns: 1fr 2.1fr 2fr 0.8fr 0.6fr 1.3fr 110px;
}
.adi-restuarant-food-orders-page-order-content-grid {
  display: grid;
  grid-template-columns: 1fr 2.1fr 2fr 0.8fr 0.6fr 1.3fr 110px;
  align-items: center;
  padding: 0.65rem 1.5rem;
  background-color: white;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.017);
  transition: background-color 0.2s ease, box-shadow 0.3s ease;
}
.adi-restuarant-food-orders-page-order-id,
.adi-restuarant-food-orders-page-item-quantity {
  color: var(--color-link);
}
.adi-restuarant-food-orders-page-item-quantity {
  filter: brightness(1.2);
}
.adi-restuarant-food-orders-page-order-id:hover {
  text-decoration: underline !important;
}
.adi-restuarant-food-orders-page-customer-phone {
  color: #000000;
}
.adi-restuarant-food-orders-page-order-time {
  font-size: 1rem;
}
.adi-restuarant-food-orders-page-accept-btn {
  background-color: var(--color-link);
  color: #fff;
}
.adi-restuarant-food-orders-page-accept-btn:hover {
  background-color: var(--color-link);
  color: #fff;
  filter: brightness(1.2);
}
.adi-restuarant-food-orders-page-rows-secondary-btn {
  background-color: var(--color-primary-subtle);
}
.adi-restuarant-food-orders-page-rows-secondary-btn:hover {
  background-color: #d3d9df;
}
.adi-restuarant-food-orders-page-rows-simple-text-info {
  padding: 0;
  font-size: 1rem;
  width: fit-content !important;
  display: block;
}

.adi-restuarant-food-orders-page-order-content-grid > div:nth-child(6) {
  text-align: center; /* Status */
}
.adi-restuarant-food-orders-page-order-content-grid > div:nth-child(7) {
  text-align: center; /* Action */
}

/* --- Order Status Badge Styles --- */
.adi-restuarant-food-orders-page-status {
  font-weight: 600;
  border-radius: 50px;
  padding: 0.35rem 0.75rem;
  font-size: 0.95rem;
  width: fit-content;
}
.adi-restuarant-food-orders-page-status-open {
  color: #664d03 !important;
  background-color: #fff3cd !important;
}

.adi-restuarant-food-orders-page-status-canceled {
  color: #842029 !important;
  background-color: #f8d7da !important;
}

.adi-restuarant-food-orders-page-status-delivered {
  color: #0f5132 !important;
  background-color: #d1e7dd !important;
}

.adi-restuarant-food-orders-page-status-preparing {
  color: #055160 !important;
  background-color: #cff4fc !important;
}

.adi-restuarant-food-orders-page-status-intransit {
  color: #084298 !important;
  background-color: #cfe2ff !important;
}
.adi-restuarant-food-orders-page-address-label {
  font-size: 1rem;
}
.adi-restuarant-food-orders-page-list-group-item-heading {
  font-size: 0.9rem;
  background-color: #eef6ff;
}
.adi-restuarant-food-orders-page-list-group-item {
  padding: 0.4rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-radius: 0;
}
.adi-restuarant-food-orders-page-list-group-item .price {
  font-size: 1rem;
}
.adi-restuarant-food-orders-page-list-group-item .form-check-input {
  border: 1px solid gray;
}
.adi-restuarant-food-orders-page-list-group-item .form-check-label {
  font-size: 1rem;
}
.adi-restuarant-food-orders-page-list-group-item:last-child {
  border-bottom: none;
}
.adi-restuarant-food-orders-page-order-review-modal
  .adi-restuarant-food-orders-page-list-group,
.adi-restuarant-food-orders-page-order-detail-modal
  .adi-restuarant-food-orders-page-list-group {
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}
.adi-restuarant-food-orders-page-order-review-modal .segment-title,
.adi-restuarant-food-orders-page-order-detail-modal .segment-title {
  color: var(--color-link);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.adi-restuarant-food-orders-page-detail-modal-amount {
  color: var(--color-link);
  filter: brightness(1.2);
}
.adi-restuarant-food-orders-page-detail-modal-amount {
  color: var(--color-link) !important;
  filter: brightness(1.2);
  font-size: 1.1rem;
}
.adi-restuarant-food-orders-page-modal-highlighted-box {
  border: 1px solid rgb(185, 185, 185);
}

.adi-restuarant-food-orders-page-modal-highlighted-box
  .adi-restuarant-food-orders-page-status {
  padding: 0.2rem 1rem;
}
.adi-restuarant-food-orders-page-accept-review-btn {
  background-color: var(--color-link);
  color: #fff;
}
.adi-restuarant-food-orders-page-accept-review-btn:hover {
  background-color: var(--color-link);
  color: #fff;
  filter: brightness(1.2);
}
/* Smooth fade-out when row is removed */
.adi-restuarant-food-orders-page-row-fadeout {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
/* Highlight animation */
.adi-restuarant-food-orders-page-row-highlight {
  animation: rowFlash 1.5s ease;
}

/* Call Button */
.adi-restuarant-food-orders-page-call-btn-inline {
  background-color: #e9ecef;
  color: #495057;
  border: 1px solid #ced4da;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.2s ease;
  margin-top: 0px;

  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.adi-restuarant-food-orders-page-call-btn-inline:hover {
  background-color: #dee2e6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}
.adi-restuarant-food-orders-page-call-btn-inline:active {
  transform: translateY(0);
}

.adi-restuarant-food-orders-page-modal-option-btn {
  display: flex;
  align-items: center;
  justify-content: start;
  width: 100%;
  padding: 1.25rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 500;
  transition: border 0.2s, color 0.1s;
  background-color: #ffffff;
  border: 1px solid #e9ecef;
}
.adi-restuarant-food-orders-page-modal-option-btn:hover {
  border: 1px solid var(--color-link);
  color: var(--color-link);
}

.adi-restuarant-food-orders-page-btn-direct-call {
  color: #495057;
}
/* modal overlay */
.adi-restuarant-food-orders-page-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1061 !important;
  display: none;
}

.adi-restuarant-food-orders-page-modal-overlay.active {
  display: block;
}
#adi-restuarant-food-orders-page-callModal {
  z-index: 1062 !important;
}
/*  Smooth fade like Bootstrap modals */
.adi-restuarant-food-orders-page-modal-overlay.fade {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.adi-restuarant-food-orders-page-modal-overlay.fade.active {
  opacity: 1;
}
.adi-restuarant-food-orders-page-cust-address,
.adi-restuarant-food-orders-page-item-name {
  font-size: 1rem;
}
@keyframes rowFlash {
  0% {
    background-color: #fff3cd;
  }
  50% {
    background-color: #ffeeba;
  }
  100% {
    background-color: transparent;
  }
}
/* --- MOBILE VIEW  --- */

@media (min-width: 360px) and (max-width: 767px) {
  .adi-restuarant-food-orders-page-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .adi-restuarant-food-orders-page-nav-link {
    font-size: 0.8rem;
    border-radius: 0.3rem !important;
    margin: 0 0.15rem; /* Small space between tabs */
    padding: 0.3rem 0.8rem;
    margin-bottom: 8px;
  }
  .adi-restuarant-food-orders-page-nav-tabs {
    padding-bottom: 0;
  }
}

@media (max-width: 992px) {
  .adi-restuarant-food-orders-page-order-content-grid {
    display: block !important;
  }
  .Plat-Comp-DataGridHeaderRow-adi-restuarant-food-orders-page {
    display: none !important;
  }
  .adi-restuarant-food-orders-page-order-content-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0px;
    padding: 1rem;
  }
  .adi-restuarant-food-orders-page-order-content-grid > div {
    width: 100%;
  }

  /* === Row 1: ID (left) + Status (right) === */
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(1),
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(6) {
    order: 1;
    flex: 1 1 48%;
    min-width: 48%;
    flex-shrink: 0;
  }
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(6) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  /* hide “Status:” text */
  .adi-restuarant-food-orders-page-order-content-grid
    > div:nth-child(6)
    .d-lg-none {
    display: none !important;
  }
  .adi-restuarant-food-orders-page-order-id {
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* === Row 2: Customer / Phone / Address === */
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(2) {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .adi-restuarant-food-orders-page-order-content-grid
    > div:nth-child(2)
    span[title] {
    font-size: 1rem;
    line-height: 1.4;
  }

  /* === Row 3: Order Items Heading === */
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(3) {
    order: 3;
    font-weight: 400 !important;
  }
  .adi-restuarant-food-orders-page-order-content-grid
    > div:nth-child(3)
    .d-lg-none {
    font-weight: 700;
    color: #000;
  }

  /* === Row 4: Time & Date inline === */
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(4) {
    order: 4;
  }
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(4) > div {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
  }
  .adi-restuarant-food-orders-page-order-content-grid
    > div:nth-child(4)
    small::before {
    content: " - ";
    color: #6c757d;
  }

  /* === Row 5: Amount (left) + Action Button (right) === */
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(5),
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(7) {
    order: 5;
    flex: 1 1 48%;
    min-width: 48%;
    flex-shrink: 0;
  }
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(5) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(7) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .adi-restuarant-food-orders-page-order-content-grid > div:nth-child(7) .btn {
    width: fit-content !important;
    white-space: nowrap;
  }
  .adi-restuarant-food-orders-page-customer-data {
    display: flex;
    flex-direction: column;
    gap: 2px !important;
  }
}
@media (max-width: 576px) {
  .adi-restuarant-food-orders-page-search-wrap {
    width: 100%;
  }
  .adi-restuarant-food-orders-page-modal-option-btn {
    padding: 0.8rem;
    font-size: 1rem;
  }
  .adi-restuarant-food-orders-page-modal-highlighted-box
    .adi-restuarant-food-orders-page-status {
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
  }
}
@media (min-width: 992px) {
  .adi-restuarant-food-orders-page-order-content-grid > div {
    padding: 0 0.5rem;
  }
}

/* ---------------------------------- */

/* -------------------------------- */
/* ADI JOBS LISTING STYLING--SAVITABH SINGH */
/* Starts here */
/* .adi-jobs-listings-job-content-body {
} */
/* Layout Panels */
.adi-job-listings-jobs-main-container {
  /* Increased padding for better visual separation */
  max-width: 1200px;
  padding-bottom: 50px !important;
}

.adi-job-listings-jobs-panel {
  background-color: #fcfcfc; /* soft-white */
  border-radius: 12px;
  /* shadow-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.adi-jobs-listings-job-tag-scroller {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  white-space: nowrap; /* Prevents wrapping */
  gap: 0.75rem; /* Space between tags */
  padding: 8px 0px;

  /* Scrollbar Hiding (Merged from .hide-scrollbar) */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.btn-color-var-primary {
  background-color: var(--color-primary);
  color: white;
}
/* Hide scrollbar for Webkit browsers (Chrome, Safari) */
.adi-jobs-listings-job-tag-scroller::-webkit-scrollbar {
  display: none;
}

/* Individual Tag/Badge Base Styling (Targeted using descendant selector) */
.adi-jobs-listings-job-tag-scroller > span {
  flex-shrink: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 9999px; /* Full pill shape */
  transition: background-color 0.2s;
  cursor: default;
}
.adi-jobs-job-listing-filter-btn {
  /* General styling to mimic btn-sm and rounded-pill */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 1rem; /* Smaller padding */
  font-size: 0.875rem; /* Smaller font size */
  line-height: 1.5;
  border-radius: 8px; /* Pill shape */
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  /* Grayscale Outline Styling */

  background-color: transparent;
  border: 1px solid #999999; /* Medium gray border */

  /* Box Shadow Styling - soft gray/black shadow */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.05); /* Very light inset shadow */
}
#adi-job-listings-jobs-salary-slider .noUi-tooltip,
.noUi-value {
  font-size: 16px !important;
}

@media (min-width: 768px) {
  #adi-job-listings-jobs-job-list-panel {
    position: sticky !important;
    top: 20px; /* Sticks 20px below the header */
    /* Ensure it doesn't try to fill 100vh, allowing the body to be content-fit */
    max-height: calc(100vh - 40px);
    overflow-y: auto; /* Re-added for the panel itself so the list can scroll */

    /* Scrollbar Style Addition: Thin and Gray */
    /* This rule is for Firefox */
    scrollbar-width: thin;
  }

  /* Styles for WebKit browsers (Chrome, Safari, Edge) */
  #adi-job-listings-jobs-job-list-panel::-webkit-scrollbar {
    width: 6px; /* Width for vertical scrollbar (making it thin) */
    height: 6px; /* Height for horizontal scrollbar */
  }

  /* Style the scrollbar track (the background area) */
  #adi-job-listings-jobs-job-list-panel::-webkit-scrollbar-track {
    background: transparent; /* Makes the track invisible or transparent */
  }

  /* Style the scrollbar thumb (the draggable part) */
  #adi-job-listings-jobs-job-list-panel::-webkit-scrollbar-thumb {
    background-color: #888; /* Gray color for the thumb */
    border-radius: 3px; /* Optional: adds rounded corners to the thumb */
  }

  /* Optional: Style the thumb when hovering */
  #adi-job-listings-jobs-job-list-panel::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Slightly darker gray on hover */
  }
  #adi-job-listings-jobs-filter-options-container {
    scrollbar-width: thin;
  }
}
/* ======================================================= */

/* Job Card List Panel Body */
#adi-job-listings-jobs-job-list-panel .adi-job-listings-jobs-panel-body {
  padding: 15px;
}

/* Job Card Styling: Now looks like a separate card */
.adi-job-listings-jobs-job-card {
  background-color: #fff; /* Ensure it's white */
  border: 1px solid #e0e0e0; /* border-color */
  border-radius: 12px; /* Rounded corners for the card */
  /* shadow-sm */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  padding: 8px 20px;
  margin-bottom: 12px; /* Crucial: Creates the gap between cards */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.adi-job-listings-jobs-job-card:hover {
  /* shadow-md */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08),
    0 2px 4px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px); /* Subtle lift on hover */
  border-color: #b3d1f3; /* Light blue border on hover */
}

.adi-job-listings-jobs-job-card.active {
  border-color: #0855ab; /* primary-blue */
  box-shadow: 0 0 0 2px rgba(8, 85, 171, 0.2); /* Blue outline effect */
  transform: none; /* No lift when active */
}

.adi-job-listings-jobs-job-card .adi-job-listings-jobs-job-title {
  color: #0855ab; /* primary-blue */
  font-weight: 700;
  font-size: 1.2rem;
}

.adi-job-listings-jobs-job-card .adi-job-listings-jobs-company-name {
  font-weight: 600;
  color: #333;
}

/* Detail Panel Styling */
#adi-job-listings-jobs-job-detail-panel .adi-job-listings-jobs-panel-body {
  padding: 30px;
}

/* --- ANIMATION STYLES FOR CARD CLICK --- */
#adi-job-listings-jobs-job-detail {
  /* Apply transition to opacity and transform properties */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Initial state for the animation (hidden/moving) - Applied before content update */
.is-loading {
  opacity: 0;
  transform: translateY(10px);
}
/* --- END ANIMATION STYLES --- */

.adi-job-listings-jobs-detail-header {
  border-bottom: 1px solid #e0e0e0; /* border-color */
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.adi-job-listings-jobs-detail-header h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #212529;
}

.adi-job-listings-jobs-detail-section h5 {
  color: #0855ab; /* primary-blue */
  font-weight: 700;
  margin-top: 25px;
  margin-bottom: 10px;
}

.adi-job-listings-jobs-detail-tag {
  display: inline-block;
  background-color: #e9eef2;
  color: #5a5a5a;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-right: 8px;
  margin-bottom: 8px;
  font-weight: 500;
}

/* Custom Pagination Styling */
#adi-job-listings-jobs-pagination-controls.pagination {
  --bs-pagination-margin-start: 0; /* Remove Bootstrap's default negative margin */
}

#adi-job-listings-jobs-pagination-controls .page-item {
  margin: 0 4px; /* Space between buttons */
}

#adi-job-listings-jobs-pagination-controls .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; /* Make it a rounded square */
  height: 40px;
  border-radius: 8px; /* Rounded corners for the buttons */
  border: 1px solid #d1d5db; /* Light gray border */
  color: #374151; /* Dark text for inactive */
  background-color: #ffffff; /* White background for inactive */
  transition: all 0.2s;
  font-weight: 600;
  padding: 0; /* Remove default padding as size is fixed */
}

#adi-job-listings-jobs-pagination-controls .page-item:first-child .page-link,
#adi-job-listings-jobs-pagination-controls .page-item:last-child .page-link {
  border-radius: 8px; /* Ensure first/last links maintain roundness */
}

#adi-job-listings-jobs-pagination-controls .page-item.active .page-link {
  background-color: var(--color-primary); /* Primary color */
  color: #ffffff; /* White text for active */
  border-color: #0855ab;
  box-shadow: 0 4px 6px -1px rgba(8, 85, 171, 0.2); /* Subtle shadow for active button */
}

#adi-job-listings-jobs-pagination-controls .page-item.disabled .page-link {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

#adi-job-listings-jobs-pagination-controls
  .page-link:hover:not(.active):not(.disabled) {
  background-color: #f3f4f6; /* Subtle hover effect */
}

/* noUiSlider Customization */
#adi-job-listings-jobs-salary-slider {
  /* Adjust size and color for a more modern look */
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

#adi-job-listings-jobs-salary-slider .noUi-connect {
  background: #0855ab; /* Primary color for the active range */
}

#adi-job-listings-jobs-salary-slider .noUi-handle {
  height: 20px;
  width: 20px;
  top: -6px;
  right: -10px; /* Adjust based on width */
  border-radius: 50%;
  border: 1px solid #0855ab;
  background: #fff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Hide the default handle bar */
#adi-job-listings-jobs-salary-slider .noUi-handle::before,
#adi-job-listings-jobs-salary-slider .noUi-handle::after {
  display: none;
}

/* Style pips for better readability */
.noUi-pips {
  font-size: 0.75rem;
  color: #6c757d;
}

/* Mobile Specific Styles */
@media (max-width: 767.98px) {
  /* Removed height constraints on mobile */
  .adi-job-listings-jobs-main-container {
    height: auto;
  }

  /* Remove main panel shadows/borders on mobile for full-width content */
  #adi-job-listings-jobs-job-list-panel,
  #adi-job-listings-jobs-job-detail-panel {
    box-shadow: none;
    border-radius: 0;
    position: static !important; /* Disable sticky on mobile */
  }

  #adi-job-listings-jobs-left-panel,
  #adi-job-listings-jobs-right-panel {
    padding: 0 !important;
  }
  #adi-job-listings-jobs-job-card {
    margin-bottom: 10px;
  }
}
/* ends here */

/* ADI USERNAME-PASSWORD CHANGE PAGE STYLING-----SAVITABH SINGH */
/* starts here */
.adi-user-profile-change-u-p-page-body {
  width: 100%;
  padding: 30px;
}
.adi-user-profile-change-u-p-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(22, 28, 37, 0.08);
  border: 1px solid rgba(22, 28, 37, 0.04);

  width: fit-content;
}

/* Headline inside card */
.adi-user-profile-change-u-p-heading {
  font-size: 22px;
  /* font-weight: 600; */
  margin-bottom: 10px;
  /* color: var(--color-secondary); */
  color: var(--color-link);
}

/* Subtext */
.adi-user-profile-change-u-p-subtext {
  color: #6b7280;
  margin-bottom: 18px;
  font-size: 1rem;
  text-wrap: wrap;
}

/* Form row spacing */
.adi-user-profile-change-u-p-row {
  margin-bottom: 16px;
}

/* Custom input wrapper so we can absolutely position the eye icon */
.adi-user-profile-change-u-p-input-wrap {
  position: relative;
}

/* Inputs: modern flat look */
.adi-user-profile-change-u-p-input {
  width: 100%;
  border: 1px solid rgba(15, 23, 36, 0.08);
  border-radius: 10px;
  padding: 12px 44px 12px 14px; /* leave room on right for icon */
  font-size: 14px;
  height: 44px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  background: #fff;
  color: #0f1724;
}

/* focus ring */
.adi-user-profile-change-u-p-input:focus {
  outline: none;
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.08);
  border-color: var(--color-primary);
}
.adi-user-profile-change-u-p-input::placeholder {
  font-size: 1rem;
}
/* Eye button inside input */
.adi-user-profile-change-u-p-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  width: 36px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  border-radius: 6px;
  padding: 0;
}

/* hover/focus for accessibility */
.adi-user-profile-change-u-p-eye:hover,
.adi-user-profile-change-u-p-eye:focus {
  background: rgba(15, 23, 36, 0.03);
  color: #0f1724;
  outline: none;
}

/* smaller icon */
.adi-user-profile-change-u-p-eye i {
  font-size: 14px;
}

/* Buttons */
.adi-user-profile-change-u-p-btn {
  border-radius: 8px;
  height: fit-content;
  padding: 0px 16px;
  /* font-weight: 600; */
  height: 44px;
  min-width: 140px;
  font-size: 1rem;
}

/* Primary */
.adi-user-profile-change-u-p-btn-primary {
  background: var(--color-primary);
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.12);
}

/* Secondary */
.adi-user-profile-change-u-p-btn-secondary {
  background: transparent;
  border: 1px solid rgba(15, 23, 36, 0.06);
  color: #0f1724;
}

/* Inline small helper text */
.adi-user-profile-change-u-p-help {
  font-size: 1rem;
  color: #6b7280;
  margin-top: 6px;
}

/* Validation states (Bootstrap classes still work, but give them a slight polish) */
.is-invalid.adi-user-profile-change-u-p-input {
  border-color: #ef4444 !important;
  box-shadow: none;
}
.is-valid.adi-user-profile-change-u-p-input {
  border-color: #16a34a !important;
}

/* Validation messages */
.adi-user-profile-change-u-p-feedback {
  color: #ef4444;
  font-size: 13px;
  margin-top: 6px;
}

/* Alerts area spacing */
.adi-user-profile-change-u-p-alert {
  margin-bottom: 12px;
}
.adi-user-profile-change-u-p-current-username-box {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  width: fit-content;
}
/* Responsive tweaks */
@media (max-width: 576px) {
  .adi-user-profile-change-u-p-card {
    padding: 16px;
  }
  .adi-user-profile-change-u-p-input {
    padding-right: 42px;
  }
  .adi-user-profile-change-u-p-btn {
    min-width: 110px;
  }
  .adi-user-profile-change-u-p-page-body {
    padding: 10px;
  }
}

/* ends here */

/* Template Selection Page Styling --- SAVITABH SINGH */
/* starts here */
/* Header Styling */
.adi-template-select-preview-header {
  text-align: center;
  padding: 30px 20px 20px;
  font-size: 2.2rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0;
}

/* Container and Grid Layout */
.adi-template-select-preview-container {
  padding: 0 20px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Filter and Search Bar Styling */
.adi-template-select-preview-filter-bar {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 15px 25px;
  align-items: center;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid #e2e8f0;
}

.adi-template-select-preview-filter-bar input,
.adi-template-select-preview-filter-bar select,
.adi-template-select-preview-current-domain {
  padding: 10px 15px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
  background-color: white;
  color: #334155;
}

.adi-template-select-preview-current-domain {
  width: 100%;
}
.adi-template-select-preview-filter-bar input:focus,
.adi-template-select-preview-filter-bar select:focus {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  outline: none;
}

/* UPDATED ID SELECTOR */
#adi-template-select-preview-search-input {
  flex-grow: 1;
  width: 100%;
}
@media (min-width: 768px) {
  #adi-template-select-preview-search-input,
  .adi-template-select-preview-current-domain {
    max-width: 300px;
  }

  .adi-template-select-preview-current-domain {
    max-width: 520px;
    justify-content: center;
  }
  .adi-template-select-preview-btn-new-tab,
  .adi-template-select-preview-btn-preview {
    max-width: 200px;
  }
}

/* UPDATED ID SELECTOR */
#adi-template-select-preview-category-filter {
  width: 200px; /* Fixed width for filter dropdown */

  appearance: none; /* Hide default arrow styling */
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center; /* move arrow left/right */
}

/* Grid Layout */
.adi-template-select-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
}

/* Keyframe for the subtle fade-in animation on filtered cards (PREFIXED) */
@keyframes adi-template-select-preview-fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modern Card Styling */
.adi-template-select-preview-card {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;

  /* Apply the new prefixed animation */
  animation: adi-template-select-preview-fadeInSlideUp 0.4s ease-out;
}

.adi-template-select-preview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* Selected Card Style */
.adi-template-select-preview-selected {
  border: 2px solid var(--color-link);
  box-shadow: 0 5px 20px var(--color-primary);
}

/* New Wrapper for Image + Label */
.adi-template-select-preview-thumbnail-wrapper {
  position: relative;
  width: 100%;
  /* height: 220px; */
  border-bottom: 1px solid #f0f4f8;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

/* Thumbnail Image Area */
.adi-template-select-preview-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.3s;
}

.adi-template-select-preview-thumbnail:hover {
  opacity: 0.95;
}

/* Content Area */
.adi-template-select-preview-content {
  padding: 15px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.adi-template-select-preview-name {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-link);
  margin-top: 0;
  margin-bottom: 8px;
}
#adi-template-select-preview-modal-label,
#adi-template-select-preview-confirm-modal-label {
  font-size: 1.4rem;
}
.adi-template-select-preview-description {
  font-size: 1rem;
  color: #64748b;
  margin-bottom: 8px;
  flex-grow: 1;
}

/* Category Tag */
.adi-template-select-preview-category {
  display: inline-block;
  /* Updated to a subtle gradient background */
  background: linear-gradient(to right, #f8fafc, #f1f5f9);
  color: #1e293b;
  padding: 6px 12px;

  /* Changed to top-left corner only */
  border-radius: 12px 0 0 0;

  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;

  /* Absolute Positioning relative to .adi-template-select-preview-thumbnail-wrapper */
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 10;
  opacity: 0.8;
  /* Updated box shadow for lift */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.2s;
}
/* --- Button Bar (Footer Actions) --- */
.adi-template-select-preview-footer-actions {
  display: flex;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f4f8;
  margin-top: auto;
}

.adi-template-select-preview-footer-btn {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Primary Button (Select/Customize) */
.adi-template-select-preview-footer-btn-main {
  background-color: var(--color-primary);
  color: white;
  box-shadow: 0 2px 5px rgba(16, 38, 233, 0.3);
}

.adi-template-select-preview-footer-btn-main:hover {
  background-color: var(--color-link);
  transform: translateY(-1px);
}

/* Secondary Button (Preview) */
.adi-template-select-preview-footer-btn-preview {
  background-color: #e2e8f0;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.adi-template-select-preview-footer-btn-preview:hover {
  background-color: #cbd5e1;
}
/* --- END Button Bar --- */

/* Message for No Results */
.adi-template-select-preview-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px;
  font-size: 1.2rem;
  color: #64748b;
  background-color: white;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
}

/* Modal Specific Styling (Kept as is) */
/* .modal-xl .modal-content {
            height: 95vh;
            border-radius: 12px;
        }

        .modal-header {
            border-bottom: 1px solid #e2e8f0;
        }

        .modal-footer {
            border-top: 1px solid #e2e8f0;
            display: flex;
            gap: 10px;
        } */

.adi-template-select-preview-iframe {
  width: 100%;
  height: calc(95vh - 120px);
  border: none;
  border-radius: 0 0 12px 12px;
}
#adi-template-select-preview-modal .modal-dialog {
  width: 100%;
  max-width: 100%;
  margin: 0;
  height: 100vh !important;
  display: flex;
  align-items: stretch;
  padding: 0;
}

#adi-template-select-preview-modal .modal-content {
  display: flex;
  flex-direction: column;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  overflow: hidden;
}

#adi-template-select-preview-modal .modal-header {
  flex: 0 0 auto;
  border-bottom: 1px solid #e2e8f0;
}

#adi-template-select-preview-modal .modal-footer {
  flex: 0 0 auto;
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 10px;
}

#adi-template-select-preview-modal .modal-body {
  flex: 1 1 auto;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}

#adi-template-select-preview-iframe-content,
#adi-template-select-preview-modal .adi-template-select-preview-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  border-radius: 0;
}

#adi-template-select-preview-modal.modal.show {
  padding: 0;
}

/* Modal Footer Button Styles */
.adi-template-select-preview-btn {
  padding: 8px 14px;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;

  transition: all 0.2s ease;
  flex-grow: 1;
  min-width: 0;

  font-size: 1rem;
}

.adi-template-select-preview-btn-new-tab {
  background-color: var(--color-primary);
  color: white;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

.adi-template-select-preview-btn-new-tab:hover {
  background-color: var(--color-link);
  box-shadow: 0 6px 15px rgba(25, 34, 213, 0.4);
}

.adi-template-select-preview-btn-preview {
  background-color: #e2e8f0;
  color: #334155;
  border-color: #cbd5e1;
  font-size: 1rem;
}

.adi-template-select-preview-btn-preview:hover {
  background-color: #cbd5e1;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .adi-template-select-preview-grid {
    grid-template-columns: 1fr;
  }
  .adi-template-select-preview-header {
    font-size: 1.8rem;
    padding: 20px 10px 20px;
  }
  .adi-template-select-preview-filter-bar {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }
  #adi-template-select-preview-category-filter {
    width: 100%;
  }
}

/* ends here */

/* Profile Settings Page Styling --- SANIA GHOUS */
/* Starts here */

/* Your main content expands and pushes footer down */
.adi-profile-settings-main-wrapper {
  min-height: 100vh;
}

.Adi-Plat-Comp-Footer-Modal-Btn {
  background-color: var(--color-link);
}
.adi-profile-settings-page-section-subheading {
  font-size: 1.1rem;
  color: #000000;
  background-color: #f9f9f9;
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #eeeded;
}
/* -- Kebab Menu Styling --  */
.Adi-Plat-Comp-Kebab-Menu-dots-dropdown-toggle {
  padding: 0.4rem 0.7rem;

  border: 1px solid #0d6efd;

  background-color: #eef6ff;
  color: #0d6efd;
  border-radius: 0.3rem;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1;
}

.Adi-Plat-Comp-Kebab-Menu-dots-dropdown-toggle:hover {
  background-color: #d0e6ff;
  color: #0c59cc;
  border-color: #0c59cc;
}
.Adi-Plat-Comp-Kebab-Menu-dots-dropdown-toggle i {
  font-size: 1.1rem !important;
}
.Adi-Plat-Comp-Kebab-Menu-dots-dropdown-toggle.show {
  background-color: #d0e6ff;
}
/* Remove Bootstrap's default arrow from the dropdown toggle */
.Adi-Plat-Comp-Kebab-Menu-dots-dropdown-toggle .dropdown-toggle::after {
  display: none;
}
.Adi-Plat-Comp-Kebab-Menu-dropdown-menu {
  padding: 0;
  border: none;
}
.Adi-Plat-Comp-Kebab-Menu-dropdown-menu .dropdown-divider {
  border-top: 1px solid rgb(222, 222, 222) !important;
}
.Adi-Plat-Comp-Kebab-Menu-dropdown-item {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.Adi-Plat-Comp-Kebab-Menu-dropdown-item-delete {
  color: #dc3545;
}

.Adi-Plat-Comp-Kebab-Menu-dropdown-item-delete:hover {
  background-color: #f8d7da;
  color: #dc3545;
}
/* --- Main Layout Container --- */
.adi-profile-settings-page-tabs-layout {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.017);
  padding: 0;
  overflow: hidden;
}

/* --- Content Area --- */
.adi-profile-settings-page-content {
  padding: 1.3rem 2rem;
}
.adi-profile-settings-page-content .section-header {
  font-size: 1.25rem;
  font-weight: 700;
  color: #212529;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dee2e6;
}
.adi-profile-settings-page-card {
  border: 1px solid #e9ecef;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}

/* Status */
.adi-profile-settings-page-status-active {
  color: #0f5132 !important;
  background-color: #d1e7dd !important;
  font-size: 1rem;
}

.adi-profile-settings-page-status-deactivated,
.adi-profile-settings-page-status-paused {
  color: #842029 !important;
  background-color: #f8d7da !important;
  font-size: 1rem;
}

/* Form Focus */

.adi-profile-settings-page-content .form-control.is-invalid,
.adi-profile-settings-page-content .form-control.is-valid {
  background-image: none !important;
  padding-right: 0 !important;
}
/* Fix for showing red borders on invalid inputs */
.adi-profile-settings-page-content .form-control.is-invalid,
.adi-profile-settings-page-content.form-control.is-invalid:focus {
  border-color: #dc3545 !important;
  box-shadow: none !important;
}

.adi-profile-settings-page-content .btn-submit {
  font-size: 1.1rem;
}
.adi-profile-settings-page-general .border-btn {
  border: 1px solid var(--color-link);
}
.adi-profile-settings-page-general h5 {
  font-size: 1rem;
}
.adi-profile-settings-page-profile-logo-section {
  background-color: #f9fafb;
}
/* Form Styling */
.adi-profile-settings-page-form-label {
  font-size: 1rem;
  color: #000000;
}
.adi-profile-settings-page-input-error {
  border-color: #dc3545 !important; /* red */
}

.adi-profile-settings-page-text-success {
  color: #28a745 !important;
}

.adi-profile-settings-page-tabs-layout input[type="text"],
.adi-profile-settings-page-tabs-layout input[type="email"],
.adi-profile-settings-page-tabs-layout input[type="number"],
.adi-profile-settings-page-tabs-layout select,
.adi-profile-settings-page-tabs-layout textarea,
.adi-profile-settings-page-tabs-layout .flatpickr-input,
.adi-profile-settings-page-pause-modal .flatpickr-input {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 16px;
  background-color: #ffffff;
  transition: all 0.3s;
}
.adi-profile-settings-page-tabs-layout input[type="text"]:focus,
.adi-profile-settings-page-tabs-layout input[type="email"]:focus,
.adi-profile-settings-page-tabs-layout input[type="number"]:focus,
.adi-profile-settings-page-tabs-layout select:focus,
.adi-profile-settings-page-tabs-layout textarea:focus,
.adi-profile-settings-page-tabs-layout .flatpickr-input:focus,
.adi-profile-settings-page-pause-modal .flatpickr-input:focus {
  background-color: #ffffff;
  border: 1px solid var(--color-link);
}
/* Logo */
.adi-profile-settings-page-profile-logo {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

/* FILE UPLOAD */
.adi-profile-settings-page-media-tab h5 {
  color: #000000;
  font-size: 1.05rem;
}
.adi-profile-settings-page-file-upload-label {
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  text-align: center;
  border: 1px solid rgb(167, 166, 166);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adi-profile-settings-page-file-upload-label .adi-profile-settings-page-icon {
  width: 20px;
  margin-right: 8px;
}

.adi-profile-settings-page-file-upload-label:hover {
  background-color: #eef6ff;
  border: 1px solid #c2d1e2;
  cursor: pointer;
}
.drag-active {
  background: #eef7ff !important;
  border: 1px solid #c2d1e2 !important;
}

.adi-profile-settings-page-media-item-wrapper {
  position: relative;
  display: inline-block;
}

.adi-profile-settings-page-media-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255, 255, 255, 0.6);
  color: #000;
  font-weight: bold;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
  z-index: 5;
}

/* CATEGORIES SECTION */
.adi-profile-settings-page-category-selector-container {
  padding: 0;
  box-shadow: none;
}
.adi-speed-search-selector-page-selected-item-pending {
  color: #664d03 !important;
  background-color: #fff3cd;
  border: 1px solid #e7d18f;
}
.adi-speed-search-selector-page-selected-item-pending:hover {
  color: #664d03 !important;
  background-color: #e7d18f;
  border: 1px solid #e7d18f;
}
.adi-profile-settings-page-add-category-tag {
  width: fit-content;
  grid-column: 1 / -1;
  font-size: 1rem;
}
.adi-profile-settings-page-add-category-tag .new-term {
  color: var(--color-link);
  font-weight: 600;
}
#adi-profile-settings-page-selectedPlaceholder {
  display: block !important;
}

/* SERVICE AREA  */
.adi-profile-settings-page-form-check-input {
  border: 1px solid gray;
  margin-top: -3px;
}
.adi-profile-settings-page-form-check-input:checked {
  background-color: var(--color-link);
  color: var(--color-link);
  border-color: var(--color-link);
}
.adi-profile-settings-page-area-definition {
  border: 1px solid #f0f2f4;
  background-color: #f8f9fa;
}
.adi-profile-settings-page-adi-current-map-type {
  border: 1px solid #6c757d !important;
  background: #f0f0f0 !important;
  cursor: not-allowed !important;
}

.adi-profile-settings-page-adi-map-type-clickable {
  cursor: pointer;
  transition: 0.2s ease;
}

.adi-profile-settings-page-adi-map-type-clickable:hover {
  background: #f9fbff;
  border-color: #0d6efd;
}
.adi-profile-settings-page-currentMapTypeTitle {
  color: var(--color-link);
}
/* Style for map type selection in modal */
.adi-profile-settings-page-map-option {
  cursor: pointer;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin-bottom: 10px;
  transition: all 0.2s;
}
.adi-profile-settings-page-map-option:hover {
  background-color: #eef6ff;
  border-color: #9dbbde;
}
.adi-profile-settings-page-map-option.selected {
  border: 1px solid var(--color-link);
  background-color: #eef6ff;
  box-shadow: 0 0 5px rgba(13, 110, 253, 0.3);
}
.adi-profile-settings-page-map-option h6 {
  margin-bottom: 2px;
  font-weight: 600;
}
/* Service Area – Current Scope pill */
.adi-profile-settings-page-adi-service-status-text {
  display: flex;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: #eef6ff;
  border: 1px solid #dbe4ff;
  color: #0b5ec2;
  font-size: 0.95rem;
  font-weight: 500;
}

.adi-profile-settings-page-adi-service-status-label {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
}

.adi-profile-settings-page-adi-service-status-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
  background: #0b5ec2;
  box-shadow: 0 0 0 4px rgba(11, 94, 194, 0.15);
}

.adi-profile-settings-page-service-status-value-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: #ffffff;
  border: 1px dashed rgba(11, 94, 194, 0.35);
  font-weight: 600;
  margin: 5px 0;
}
.adi-profile-settings-page-tab-subheading {
  font-size: 1.1rem;
}

.adi-profile-settings-page-service-area .tab-submit-btn,
.adi-profile-settings-page-service-area .tab-secondary-btn {
  font-size: 1rem;
}

/* tags */
.adi-profile-settings-page-service-area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.adi-profile-settings-page-service-area-tags p {
  font-size: 0.9rem;
}
.adi-profile-settings-page-service-area-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background-color: #ffffff;
  color: #0b5ec2;
  font-size: 0.8rem;
  border: 1px solid var(--color-link);
}

.adi-profile-settings-page-service-area-tag-label {
  margin-right: 0.4rem;
}

.adi-profile-settings-page-service-area-tag-remove {
  border: none;
  background: transparent;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  color: #0b5ec2;
}

.adi-profile-settings-page-service-area-tag-remove:hover {
  color: #dc3545;
}
.adi-profile-settings-page-area-definition .bootstrap-select button {
  background-color: #ffffff;
}

/* radius map */
.adi-profile-settings-radius-map,
.adi-serviceArea-regional-map,
.adi-serviceArea-provincial-map {
  height: 280px;
  border-radius: 8px;
  margin-top: 15px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid rgb(185, 184, 184);
}
.adi-speed-search-selector-page-allSearchesGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  padding: 0;
}
#adi-international-allCountriesGrid {
  grid-template-columns: repeat(5, 1fr);
}
#adi-profile-settings-page-serviceArea_international
  .adi-speed-search-selector-page-h2-heading {
  font-size: 1rem;
}
.adi-profile-settings-page-area-definition .input-group,
.adi-profile-settings-page-area-definition .bootstrap-select {
  max-width: 500px;
  width: 100%;
}
.adi-profile-settings-page-area-definition .form-label,
.adi-profile-settings-page-area-definition small {
  font-size: 1rem;
}
/* Modal */
.modal-dialog.map-wide {
  max-width: 900px !important;
  width: 90%;
}

.adi-profile-settings-page-pause-modal .invalid-feedback {
  margin-top: 5px;
}
/* --- Remove Bootstrap validation icons and green borders --- */
.adi-profile-settings-page-pause-modal .form-control.is-valid,
.adi-profile-settings-page-pause-modal .was-validated .form-control:valid {
  border-color: #ced4da !important;
  background-image: none !important;
  box-shadow: none !important;
  padding-right: 0.75rem !important;
}

/* Keep red borders for invalid but remove red icon */
.adi-profile-settings-page-pause-modal .form-control.is-invalid,
.adi-profile-settings-page-pause-modal .was-validated .form-control:invalid {
  background-image: none !important;
  box-shadow: none !important;
  padding-right: 0.75rem !important;
}

/* Ensure focus behavior stays consistent */
.adi-profile-settings-page-pause-modal .form-control:focus {
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}
.adi-profile-settings-page-pause-modal .form-check-input:checked {
  background-color: var(--bs-primary) !important; /* Bootstrap default blue */
  border-color: var(--bs-primary) !important;
}
/* Labels should not turn green either */
.adi-profile-settings-page-pause-modal .form-check-label.is-valid,
.adi-profile-settings-page-pause-modal .was-validated ~ .form-check-label,
.adi-profile-settings-page-pause-modal .was-validated .form-check-label {
  color: inherit !important;
}
.adi-profile-settings-page-pause-modal .form-check-input,
.adi-profile-settings-page-pause-modal .form-check-input:valid {
  border: 1px solid gray !important;
  color: inherit !important;
}
.adi-profile-settings-page-danger-btn {
  background-color: #e60000 !important;
  border: 1px solid #e60000 !important;
}
.adi-profile-settings-page-danger-btn:hover {
  background-color: #e60000;
  filter: brightness(1.1);
  border: 1px solid #e60000;
}
/* Add dropdown icon for custom selects */
.Adi-Plat-Comp-Select-Dropdown {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gray' class='bi bi-caret-down-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592c.86 0 1.319 1.013.753 1.658l-4.796 5.482a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 35px !important;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 10px;
  transition: border-color 0.25s ease;
}

.Adi-Plat-Comp-Select-Dropdown:focus {
  border-color: #0b5ec2;
  box-shadow: 0 0 0 3px rgba(11, 94, 194, 0.2);
}
@media (max-width: 1200px) {
  .adi-speed-search-selector-page-allSearchesGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 768px) {
  .adi-speed-search-selector-page-allSearchesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Responsive Adjustments for Mobile */
@media (min-width: 360px) and (max-width: 767px) {
  .adi-profile-settings-page-header {
    flex-direction: row;
  }
  .Adi-Plat-Comp-Kebab-Menu-dots-dropdown-toggle {
    padding: 0.3rem 0.6rem;
    line-height: 1;
  }
  .Adi-Plat-Comp-Kebab-Menu-dots-dropdown-toggle i {
    font-size: 1rem !important;
  }
  .adi-profile-settings-page-tabs-layout {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .adi-profile-settings-page-content {
    padding: 20px 15px;
  }
  .adi-profile-settings-page-content .section-header {
    font-size: 1.3rem;
    margin-bottom: 20px;
  }
  .adi-profile-settings-page-adi-service-status-text {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
  }
}

/* Profile Settings Page Styling Ends here */

/* ----------ADI Templates Customisation Page-----SAVITABH SINGH------- */
/* starts here */
.adi-template-customisation-p-body-content,
.adi-template-customisation-p-h-header {
  padding: 20px 10px 0px 40px;
}
/* Main Container for the entire bar */
.adi-template-customisation-p-h-settings-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  gap: 15px;
  margin-bottom: 20px;
}

/* Group for Site Name and Change Button */
.adi-template-customisation-p-h-site-name-group {
  display: flex;
  flex-grow: 1;
  max-width: 300px;
  gap: 10px;
  justify-content: center;
  background-color: transparent;
  border: none;
}

.adi-template-customisation-p-h-site-name-input {
  flex-grow: 1;
  padding: 8px 15px;
  border: 1px solid #ced4da;
  border-radius: 8px;
  font-size: 16px;
  color: #343a40;

  transition: border-color 0.3s;
}

.adi-template-customisation-p-h-site-name-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Button Styling (Used for the top bar buttons only) */
.adi-template-customisation-p-h-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  /* font-weight: 600; */
  color: #ffffff;
  transition: background-color 0.3s, transform 0.1s, opacity 0.3s;
  white-space: nowrap;
}

.adi-template-customisation-p-h-btn:hover {
  opacity: 0.9;
}

.adi-template-customisation-p-h-btn:active {
  transform: scale(0.98);
}

/* Specific Button Styles */
.adi-template-customisation-p-h-btn-change {
  background-color: var(--color-primary); /* Secondary Teal */
}

.adi-template-customisation-p-h-btn-dashboard {
  background-color: var(--color-primary); /* Secondary Teal */
  /* width: 100%; */
  max-width: 140px;
  /* padding: 8px 12px; */
}

/* Group for Status Toggles and Dashboard Button */
.adi-template-customisation-p-h-actions-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

/* --- TOGGLE SWITCH STYLES --- */

.adi-template-customisation-p-h-toggle-control-group {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: space-between;
  min-width: unset;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.adi-template-customisation-p-h-toggle-label {
  font-size: 16px;
  font-weight: 600;

  /* margin-bottom: 4px; */
  width: fit-content;
  text-align: right;
  transition: color 0.3s;
}

/* The actual switch container */
.adi-template-customisation-p-h-toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  margin-bottom: 0;
}

/* Hide default HTML checkbox */
.adi-template-customisation-p-h-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.adi-template-customisation-p-h-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dc3545; /* Disabled Red */
  transition: 0.4s;
  border-radius: 28px;
}

.adi-template-customisation-p-h-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* When checked, change background to green and move the slider */
.adi-template-customisation-p-h-toggle-switch
  input:checked
  + .adi-template-customisation-p-h-toggle-slider {
  background-color: #28a745; /* Enabled Green */
}

.adi-template-customisation-p-h-toggle-switch
  input:checked
  + .adi-template-customisation-p-h-toggle-slider:before {
  transform: translateX(22px);
}

/* Custom highlight style for modal body (retained) */
.adi-template-customisation-p-h-modal-highlight {
  font-weight: 600;
  color: #dc3545; /* Disabled Red for emphasis */
  background-color: #ffe5e5;
  padding: 8px;
  border-radius: 6px;
  margin-top: 15px;
}
/* Sliding Panel */
#adi-template-customisation-p-sliding-panel {
  position: fixed;
  top: 57px;
  left: 0;
  width: 300px;
  height: 100vh;
  background-color: #ffffff;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e0e0e0;
}

#adi-template-customisation-p-sliding-panel.adi-template-customisation-p-open {
  transform: translateX(0);
}

/* Overlay */
#adi-template-customisation-p-overlay {
  position: fixed;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s;
}

#adi-template-customisation-p-sliding-panel.adi-template-customisation-p-open {
  transform: translateX(0);
}

#adi-template-customisation-p-sliding-panel.adi-template-customisation-p-open
  ~ #adi-template-customisation-p-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s, visibility 0s 0s;
}

.adi-template-customisation-p-panel-header {
  padding: 6px 10px;
  font-size: 1.2em;
  font-weight: 600;
  color: #2f2f2f;

  background: #f7f5f2; /* warm subtle tint */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 3px 6px rgba(0, 0, 0, 0.07);
}

.adi-template-customisation-p-checklist {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0;
  list-style: none;
}

.adi-template-customisation-p-checklist-item {
  display: grid;
  grid-template-columns: 35px 1fr 50px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 1.05em;
  color: #444;
  transition: background-color 0.2s;
}

.adi-template-customisation-p-checklist-item:hover {
  background-color: #f9f9f9;
}

.adi-template-customisation-p-checklist-item-text {
  cursor: default;
  font-size: 1rem;
}

/* Checkbox */
.adi-template-customisation-p-custom-checkbox-label {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  height: 100%;
  margin-bottom: 0;
  margin-right: 8px;
  font-size: 1rem;
}

.adi-template-customisation-p-custom-checkbox-label input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

.adi-template-customisation-p-checkbox-box {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.adi-template-customisation-p-custom-checkbox-label
  input[type="checkbox"]:checked
  + .adi-template-customisation-p-checkbox-box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.adi-template-customisation-p-checkbox-box::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.adi-template-customisation-p-custom-checkbox-label
  input[type="checkbox"]:checked
  + .adi-template-customisation-p-checkbox-box::after {
  display: block;
}

/* Edit Button */
.adi-template-customisation-p-edit-button {
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  margin-left: auto;
  font-size: 14px;
}

.adi-template-customisation-p-edit-button:hover {
  background-color: var(--color-link);
  transform: scale(1.02);
}

.adi-template-customisation-p-edit-button:active {
  transform: scale(0.95);
}

.adi-template-customisation-p-edit-button[disabled] {
  background-color: #a0a0a0;
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

.adi-template-customisation-p-edit-button[disabled]:hover {
  background-color: #a0a0a0;
}

.adi-template-customisation-p-edit-button-icon {
  width: 16px;
  height: 16px;
  fill: white;
}

/* Trigger Bar */
#adi-template-customisation-p-trigger-bar {
  position: fixed;
  top: 78px;
  left: 0;
  width: 30px;
  height: 90vh;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #ffffff;
  z-index: 89;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease,
    transform 0.3s ease;

  /* Strong + crisp + deep quad shadow */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3),
    /* slightly tighter + less spread */ 0 5px 14px rgba(0, 0, 0, 0.26),
    /* mid shadow */ 0 2px 6px rgba(0, 0, 0, 0.22),
    /* crisp contour */ 0 0 2px rgba(0, 0, 0, 0.35); /* subtle outline */
}

#adi-template-customisation-p-trigger-bar:hover {
  transform: translateX(2px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38), 0 8px 22px rgba(0, 0, 0, 0.32),
    0 3px 10px rgba(0, 0, 0, 0.28), 0 0 2px rgba(0, 0, 0, 0.4);
}

#adi-template-customisation-p-trigger-bar:hover {
  transform: translateX(2px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28),
    /* heavier lift */ 0 5px 14px rgba(0, 0, 0, 0.22),
    0 1px 4px rgba(0, 0, 0, 0.25), inset 0 0 32px rgba(0, 0, 0, 0.07);
}

#adi-template-customisation-p-sliding-panel.adi-template-customisation-p-open {
  transform: translateX(0);
}

#adi-template-customisation-p-sliding-panel.adi-template-customisation-p-open
  ~ #adi-template-customisation-p-overlay
  ~ #adi-template-customisation-p-trigger-bar {
  left: 300px;
}

.adi-template-customisation-p-trigger-icon {
  width: 32px;
  height: 32px;
  fill: var(--color-primary);
  transition: transform 0.3s;
}

#adi-template-customisation-p-sliding-panel.adi-template-customisation-p-open
  ~ #adi-template-customisation-p-overlay
  ~ #adi-template-customisation-p-trigger-bar
  .adi-template-customisation-p-trigger-icon {
  transform: rotate(180deg);
}

/* Main Content (iframe) */
.adi-template-customisation-p-main-content {
  flex-grow: 1;
  padding: 0;
  /* margin-left: 20px; */
  height: 100vh;
  width: 100%;
}

#adi-template-customisation-p-content-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* ---------- Modal Common Styles (consistent) ---------- */
#adi-template-customisation-p-edit-modal .modal-content,
#adi-template-customisation-p-about-modal .modal-content,
#adi-template-customisation-p-gallery-modal .modal-content,
#adi-template-customisation-p-replace-modal .modal-content,
#adi-template-customisation-p-delete-confirm-modal .modal-content,
#adi-template-customisation-p-testimonials-modal .modal-content,
#adi-template-customisation-p-contact-modal .modal-content,
#adi-template-customisation-p-services-modal .modal-content,
#adi-template-customisation-p-service-delete-confirm-modal .modal-content,
#adi-template-customisation-p-pricing-modal .modal-content {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

#adi-template-customisation-p-edit-modal .modal-header,
#adi-template-customisation-p-about-modal .modal-header,
#adi-template-customisation-p-gallery-modal .modal-header,
#adi-template-customisation-p-replace-modal .modal-header,
#adi-template-customisation-p-delete-confirm-modal .modal-header,
#adi-template-customisation-p-testimonials-modal .modal-header,
#adi-template-customisation-p-contact-modal .modal-header,
#adi-template-customisation-p-services-modal .modal-header,
#adi-template-customisation-p-service-delete-confirm-modal .modal-header,
#adi-template-customisation-p-pricing-modal .modal-header {
  border-bottom: none;
  padding: 20px 25px 10px;
}

#adi-template-customisation-p-edit-modal .modal-body,
#adi-template-customisation-p-about-modal .modal-body,
#adi-template-customisation-p-gallery-modal .modal-body,
#adi-template-customisation-p-replace-modal .modal-body,
#adi-template-customisation-p-delete-confirm-modal .modal-body,
#adi-template-customisation-p-testimonials-modal .modal-body,
#adi-template-customisation-p-contact-modal .modal-body,
#adi-template-customisation-p-services-modal .modal-body,
#adi-template-customisation-p-service-delete-confirm-modal .modal-body,
#adi-template-customisation-p-pricing-modal .modal-body {
  padding: 15px 25px 5px;
}

#adi-template-customisation-p-edit-modal .modal-footer,
#adi-template-customisation-p-about-modal .modal-footer,
#adi-template-customisation-p-gallery-modal .modal-footer,
#adi-template-customisation-p-replace-modal .modal-footer,
#adi-template-customisation-p-delete-confirm-modal .modal-footer,
#adi-template-customisation-p-testimonials-modal .modal-footer,
#adi-template-customisation-p-contact-modal .modal-footer,
#adi-template-customisation-p-services-modal .modal-footer,
#adi-template-customisation-p-service-delete-confirm-modal .modal-footer,
#adi-template-customisation-p-pricing-modal .modal-footer {
  border-top: none;
  padding: 10px 25px 20px;
}

.adi-template-customisation-p-form-group label {
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
}

.adi-template-customisation-p-form-group .form-control {
  border-radius: 8px;
  padding: 10px 15px;
  border: 1px solid #ddd;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
  color: #1f2937;
}

.adi-template-customisation-p-form-group .form-control:focus {
  border-color: #5aa5c9;
  box-shadow: 0 0 0 0.25rem rgba(90, 165, 201, 0.15);
}

/* Submit Buttons */
#adi-template-customisation-p-submit-btn,
#adi-template-customisation-p-about-submit-btn,
#adi-template-customisation-p-gallery-submit-btn,
#adi-template-customisation-p-replace-submit-btn,
#adi-template-customisation-p-testimonials-save-btn,
#adi-template-customisation-p-contact-submit-btn,
#adi-template-customisation-p-services-add-btn,
#adi-template-customisation-p-services-done-btn,
#adi-template-customisation-p-service-delete-confirm-btn,
#adi-template-customisation-p-testimonials-done-btn,
#adi-template-customisation-p-service-add-btn,
#adi-template-customisation-p-pricing-done-btn,
#adi-template-customisation-p-highlights-submit-btn {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: 8px;
  padding: 5.6px 25px;
  /* font-weight: 600; */
  font-size: 1rem;
  transition: background-color 0.2s transform 0.3s;
}

#adi-template-customisation-p-submit-btn:hover,
#adi-template-customisation-p-about-submit-btn:hover,
#adi-template-customisation-p-gallery-submit-btn:hover,
#adi-template-customisation-p-replace-submit-btn:hover,
#adi-template-customisation-p-testimonials-save-btn:hover,
#adi-template-customisation-p-contact-submit-btn:hover,
#adi-template-customisation-p-services-add-btn:hover,
#adi-template-customisation-p-services-done-btn:hover,
#adi-template-customisation-p-service-delete-confirm-btn:hover,
#adi-template-customisation-p-testimonials-done-btn:hover,
#adi-template-customisation-p-pricing-done-btn:hover,
#adi-template-customisation-p-highlights-submit-btn:hover {
  background-color: var(--color-link);
  border-color: var(--color-link);
  transform: scale(1.02);
}
#adi-template-customisation-p-testimonials-done-btn {
  padding: 5.6px 12.8px;
}
/* Delete button */
#adi-template-customisation-p-delete-confirm-btn {
  background-color: #dc3545;
  border-color: #dc3545;
  border-radius: 8px;
  padding: 5.6px 12.8px;

  font-weight: 600;
  transition: background-color 0.2s;
}

#adi-template-customisation-p-delete-confirm-btn:hover {
  background-color: #c82333;
}

/* Drag & Drop */
.adi-template-customisation-p-drag-area {
  border: 2px dashed var(--color-link);
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-bottom: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background-color: #f7fcff;
  display: flex;
}

.adi-template-customisation-p-drag-area.adi-template-customisation-p-drag-over {
  background-color: #e6f7ff;
  border-color: #5aa5c9;
}

.adi-template-customisation-p-upload-text {
  color: var(--color-link);
  font-weight: 600;
  margin-top: 5px;
}

.adi-template-customisation-p-upload-icon {
  color: var(--color-link);
  font-size: 2em;
}

/* hide file inputs used in drag area */
#adi-template-customisation-p-background-image-input,
#adi-template-customisation-p-about-background-image-input,
#adi-template-customisation-p-gallery-image-input,
#adi-template-customisation-p-replace-image-input,
#adi-template-customisation-p-service-image-input {
  display: none;
}

/* Image card */
.adi-template-customisation-p-image-card {
  position: relative;
  height: 10rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.adi-template-customisation-p-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.adi-template-customisation-p-icon-overlay {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.adi-template-customisation-p-icon-overlay button {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: background-color 0.2s;
}

.adi-template-customisation-p-icon-overlay button:hover {
  background-color: #5aa5c9;
  color: white;
}

.adi-template-customisation-p-icon-overlay button.delete-btn:hover {
  background-color: #dc3545;
}

.adi-template-customisation-p-image-comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.adi-template-customisation-p-current-preview,
.adi-template-customisation-p-replacement-preview {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.adi-template-customisation-p-current-preview img,
.adi-template-customisation-p-replacement-preview img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  border-radius: 4px;
}

#adi-template-customisation-p-image-preview-container,
#adi-template-customisation-p-about-image-preview-container {
  position: relative;
  margin-top: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#adi-template-customisation-p-image-preview-container img,
#adi-template-customisation-p-about-image-preview-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#adi-template-customisation-p-image-preview-container button,
#adi-template-customisation-p-about-image-preview-container button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(220, 53, 69, 0.8);
  color: white;
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

#adi-template-customisation-p-image-preview-container button:hover,
#adi-template-customisation-p-about-image-preview-container button:hover {
  background-color: #dc3545;
}

/* Testimonials small */
.adi-template-customisation-p-testimonial-item {
  border: 1px solid #eef2f6;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  background: #fff;
}

.adi-template-customisation-p-testimonial-content {
  flex: 1;
}

.adi-template-customisation-p-testimonial-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.adi-template-customisation-p-testimonial-actions button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}

.adi-template-customisation-p-testimonial-actions button:hover {
  background: rgba(90, 165, 201, 0.12);
}

.adi-template-customisation-p-testimonial-editing {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Services styles */
.adi-template-customisation-p-services-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
}

.adi-template-customisation-p-service-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  border: 1px solid #eef3f6;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.adi-template-customisation-p-service-meta {
  flex: 1;
}

.adi-template-customisation-p-service-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adi-template-customisation-p-service-actions button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.adi-template-customisation-p-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
  align-items: center;
}

/* Pricing modal styles */
.adi-template-customisation-p-pricing-top {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.adi-template-customisation-p-pricing-field-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.adi-template-customisation-p-pricing-field-row .form-control {
  flex: 1;
}
.adi-template-customisation-p-pricing-field-row
  .adi-template-customisation-p-field-delete-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #dc3545;
  font-size: 1rem;
}

@media (min-width: 360px) and (max-width: 768px) {
  #adi-template-customisation-p-sliding-panel {
    width: 85vw;
  }

  #adi-template-customisation-p-sliding-panel.adi-template-customisation-p-open
    ~ #adi-template-customisation-p-overlay
    ~ #adi-template-customisation-p-trigger-bar {
    left: 85vw;
  }
  #adi-template-customisation-p-trigger-bar {
    width: 20px;
    top: 70px;
    height: 84vh;
  }
  .adi-template-customisation-p-services-grid {
    grid-template-columns: 1fr;
  }
}

.adi-template-customisation-p-panel-settings-container {
  width: 100%;
  padding: 10px;
}
@media (min-width: 768px) {
  .adi-template-customisation-p-image-comparison {
    grid-template-columns: 1fr 1fr;
  }
  .adi-template-customisation-p-h-site-name-input {
    flex-grow: 1;
    padding: 8px 15px;
    border: 1px solid #ced4da;
    border-radius: 8px;
    font-size: 16px;
    color: #343a40;
    max-width: 180px;
    transition: border-color 0.3s;
  }
}
@media (min-width: 300px) and (max-width: 440px) {
  .adi-template-customisation-p-h-site-name-input {
    max-width: 200px;
  }
}
/* ========================================================= */
/* RESPONSIVENESS: @media(min-width:360px) and (max-width:768px) */
/* ========================================================= */
@media (min-width: 360px) and (max-width: 768px) {
  .adi-template-customisation-p-h-settings-bar {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
  }

  .adi-template-customisation-p-h-site-name-group,
  .adi-template-customisation-p-h-actions-group {
    width: 100%;
    flex-grow: 0;
    max-width: none;
  }

  .adi-template-customisation-p-h-site-name-group {
    margin-bottom: 8px;
  }

  .adi-template-customisation-p-h-actions-group {
    flex-direction: column;
  }

  .adi-template-customisation-p-h-toggle-control-group {
    width: 100%;
    justify-content: space-between;
    min-width: unset;
    padding: 0;
  }

  .adi-template-customisation-p-h-toggle-label {
    width: auto;
    text-align: left;
  }

  .adi-template-customisation-p-h-btn-dashboard {
    width: 100%;
  }

  #adi-template-customisation-p-sliding-panel {
    top: 61px;
  }
  .adi-template-customisation-p-body-content {
    padding: 10px 0px 0px 0px;
    width: 100vw !important;

    height: fit-content;
  }
  .adi-template-customisation-p-h-header {
    padding: 10px 0px 0px 0px;
    margin-left: 25px;
    margin-right: 10px;
  }
  #adi-template-customisation-p-content-iframe {
    width: 100vw !important;
    scrollbar-width: thin;
  }
}
/* =====================ADI PLAZA MY AD ANALYTICS DASHBOARD----SAVITABH SINGH======================= */
/* starts here */
.adi-my-plaza-ad-analytics-page-body {
  width: 100%;
}

.adi-my-plaza-ad-analytics-page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* background-color: #f5f7fb; */

  max-width: 1200px;
}

.adi-my-plaza-ad-analytics-header {
  padding: 20px 32px;
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.adi-my-plaza-ad-analytics-header-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.adi-my-plaza-ad-analytics-header-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

.adi-my-plaza-ad-analytics-header-right {
  font-size: 12px;
  color: #6b7280;
}

.adi-my-plaza-ad-analytics-main-layout {
  padding: 24px 32px 40px 32px;
  flex: 1;
}

.adi-my-plaza-ad-analytics-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 0;
}

.adi-my-plaza-ad-analytics-card {
  background-color: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  padding: 14px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.adi-my-plaza-ad-analytics-card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
  transform: translateY(-2px);
}

.adi-my-plaza-ad-analytics-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.adi-my-plaza-ad-analytics-card-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: #111827;
  width: 100%;
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adi-my-plaza-ad-analytics-status-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.adi-my-plaza-ad-analytics-status-active {
  background-color: #dcfce7;
  color: #166534;
}

.adi-my-plaza-ad-analytics-status-paused {
  background-color: #fef3c7;
  color: #92400e;
}

.adi-my-plaza-ad-analytics-status-ended {
  background-color: #fee2e2;
  color: #991b1b;
}

.adi-my-plaza-ad-analytics-thumb-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  height: 140px;
  background-color: #e5e7eb;
}

.adi-my-plaza-ad-analytics-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adi-my-plaza-ad-analytics-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 10px;
}

.adi-my-plaza-ad-analytics-metric-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.adi-my-plaza-ad-analytics-metric-pill {
  flex: 1;
  border-radius: 10px;
  background-color: #f3f4f6;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.adi-my-plaza-ad-analytics-metric-label {
  font-size: 11px;
  color: #6b7280;
}

.adi-my-plaza-ad-analytics-metric-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.adi-my-plaza-ad-analytics-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.adi-my-plaza-ad-analytics-rating-pill {
  font-size: 12px;
  color: #f59e0b;
}

.adi-my-plaza-ad-analytics-menu-trigger {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  color: #6b7280;
}

.adi-my-plaza-ad-analytics-menu-trigger:hover {
  background-color: #e5e7eb;
  color: #111827;
}

.adi-my-plaza-ad-analytics-card-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
  border-radius: 6px;
  padding: 4px 0;
  max-width: 150px;
  z-index: 20;
  display: none;
}

.adi-my-plaza-ad-analytics-card-menu-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 1rem;
  cursor: pointer;
  color: #374151;
}

.adi-my-plaza-ad-analytics-card-menu-item:hover {
  background-color: #f3f4f6;
}

.adi-my-plaza-ad-analytics-card-menu-item-delete {
  color: #b91c1c;
}

.adi-my-plaza-ad-analytics-badge {
  display: none !important;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background-color: #e5e7eb;
  color: #4b5563;
}
.adi-my-plaza-ad-analytics-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* State when deleting */
.adi-my-plaza-ad-analytics-card--deleting {
  opacity: 0;
  transform: translateY(8px);
}
/* Delete modal custom bits */
#adi-my-plaza-ad-analytics-delete-modal .modal-content {
  border-radius: 14px;
}

#adi-my-plaza-ad-analytics-delete-modal .modal-header {
  border-bottom: none;
  padding-bottom: 0;
}

#adi-my-plaza-ad-analytics-delete-modal .modal-footer {
  border-top: none;
  padding-top: 0;
}

/* Fullscreen insights modal */
#adi-my-plaza-ad-analytics-insights-modal .modal-dialog {
  max-width: 100vw;
  margin: 0;
  height: 100vh;
}

#adi-my-plaza-ad-analytics-insights-modal .modal-content {
  height: 100%;
  border-radius: 0;
  border: none;
  background-color: #f5f7fb;
  display: flex;
  flex-direction: column;
}

.adi-my-plaza-ad-analytics-insights-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 24px 20px 24px;
}

.adi-my-plaza-ad-analytics-insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.adi-my-plaza-ad-analytics-insights-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adi-my-plaza-ad-analytics-insights-title {
  /* font-size: 18px; */
  font-weight: 600;
}

.adi-my-plaza-ad-analytics-insights-subtitle {
  font-size: 1rem;
  color: #6b7280;
}

.adi-my-plaza-ad-analytics-insights-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.adi-my-plaza-ad-analytics-close-insights-btn {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #111827;
}

.adi-my-plaza-ad-analytics-close-insights-btn:hover {
  background-color: #f3f4f6;
}

.adi-my-plaza-ad-analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.adi-my-plaza-ad-analytics-summary-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

.adi-my-plaza-ad-analytics-summary-label {
  font-size: 11px;
  color: #6b7280;
}

.adi-my-plaza-ad-analytics-summary-value {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.adi-my-plaza-ad-analytics-summary-subvalue {
  font-size: 11px;
  color: #9ca3af;
}

.adi-my-plaza-ad-analytics-filters-section {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.adi-my-plaza-ad-analytics-filters-left {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.adi-my-plaza-ad-analytics-filter-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.adi-my-plaza-ad-analytics-filter-label {
  font-size: 11px;
  color: #6b7280;
}

.adi-my-plaza-ad-analytics-filter-input {
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 6px 8px;
  font-size: 13px;
  background-color: #f9fafb;
}

.adi-my-plaza-ad-analytics-filter-input:focus {
  outline: none;
  border-color: #2563eb;
  background-color: #ffffff;
}

.adi-my-plaza-ad-analytics-filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.adi-my-plaza-ad-analytics-reset-btn {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  padding: 6px 14px;
  font-size: 1rem;
  cursor: pointer;
  color: #111827;
}

.adi-my-plaza-ad-analytics-reset-btn:hover {
  background-color: #f3f4f6;
}

.adi-my-plaza-ad-analytics-insights-body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.adi-my-plaza-ad-analytics-chart-card,
.adi-my-plaza-ad-analytics-map-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.adi-my-plaza-ad-analytics-card-section-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.adi-my-plaza-ad-analytics-card-section-subtitle {
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 8px;
}

.adi-my-plaza-ad-analytics-chart-container {
  flex: 1;
  min-height: 260px;
}

.adi-my-plaza-ad-analytics-map-container {
  flex: 1;
  min-height: 260px;
}

.adi-my-plaza-ad-analytics-chart-legend {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.adi-my-plaza-ad-analytics-chart-legend-item {
  font-size: 11px;
  color: #6b7280;
}

.adi-my-plaza-ad-analytics-period-summary {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.adi-my-plaza-ad-analytics-period-chip {
  font-size: 1rem;
  padding: 4px 8px;
  border-radius: 999px;
  background-color: #f3f4f6;
  color: #4b5563;
}

.adi-my-plaza-ad-analytics-no-data-text {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 8px;
}

.adi-my-plaza-ad-analytics-footer-note {
  margin-top: 8px;
  font-size: 1rem;
  text-align: right;
  color: #9ca3af;
}
.adi-my-plaza-ad-analytics-legend-list {
  margin-top: 10px;
  gap: 18px; /* spacing between items */
}

.adi-my-plaza-ad-analytics-legend-item {
  display: flex;
  align-items: center;
}

.adi-my-plaza-ad-analytics-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin-right: 6px;
}

.adi-my-plaza-ad-analytics-legend-label {
  font-size: 1rem;
  font-weight: 400;
  color: #666;
}

/* Responsive for 360px - 768px */
@media (min-width: 360px) and (max-width: 768px) {
  .adi-my-plaza-ad-analytics-header {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .adi-my-plaza-ad-analytics-main-layout {
    padding: 16px 16px 24px 16px;
  }

  .adi-my-plaza-ad-analytics-cards-grid {
    grid-template-columns: 1fr;
  }

  .adi-my-plaza-ad-analytics-thumb-wrapper {
    height: 160px;
  }

  .adi-my-plaza-ad-analytics-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adi-my-plaza-ad-analytics-filters-section {
    flex-direction: column;
    align-items: stretch;
  }

  .adi-my-plaza-ad-analytics-insights-body {
    grid-template-columns: 1fr;
  }

  .adi-my-plaza-ad-analytics-insights-wrapper {
    padding: 12px 12px 16px 12px;
  }

  .adi-my-plaza-ad-analytics-insights-header {
    /* flex-direction: column; */
    align-items: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .adi-my-plaza-ad-analytics-insights-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .adi-my-plaza-ad-analytics-card-title {
    max-width: 300px;
  }
}
/* ends here */

/*========
 Member Public Profile Page Styling --- SANIA GHOUS 
 ===========*/
/* Starts here */

.adi-member-public-profile-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding-top: 1.5rem;
}
.adi-member-public-profile-wrapper .small {
  font-size: 1rem;
}
/* --- Header Section --- */
.adi-member-public-profile-header-section {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 2px 4px -1px rgba(0, 0, 0, 0.03);
  margin-bottom: 1rem;
  border: 1px solid #e2e8f0;
  position: relative;
}
.adi-member-public-profile-business-name{
    font-size: 1.75rem;
}
/* ---  Custom Tooltip Styles --- */
.adi-member-public-profile-custom-tooltip-wrapper {
  position: relative;
  display: inline-block;
}

/* Special class for Status Dot positioning */
.adi-member-public-profile-status-dot-wrapper {
  position: absolute;
  bottom: 5px;
  right: 5px;
  z-index: 20;
}

.adi-member-public-profile-custom-tooltip-content {
  position: absolute;
  bottom: 100%; /* Position above */
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background-color: #1e293b;
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  pointer-events: none;
  z-index: 100;
  margin-bottom: 8px;
}

.adi-member-public-profile-custom-tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border-width: 4px;
  border-style: solid;
  border-color: #1e293b transparent transparent transparent;
}

.adi-member-public-profile-custom-tooltip-wrapper:hover
  .adi-member-public-profile-custom-tooltip-content,
.adi-member-public-profile-status-dot-wrapper:hover
  .adi-member-public-profile-custom-tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Action Buttons Styling */
.adi-member-public-profile-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
  text-decoration: none;
  font-size: 0.9rem;
}
.adi-member-public-profile-action-btn:hover {
  background: #eef6ff;
  color: var(--color-link);
  border-color: #cbd5e1;
}
.adi-member-public-profile-action-btn.report:hover {
  color: #ef4444;
  background: #fef2f2;
  border-color: #fecaca;
}

/* Header Content Layout */
.adi-member-public-profile-header-content {
  position: relative;
}

.adi-member-public-profile-avatar-container {
  width: 120px;
  height: 120px;
  background-color: #ffffff;
  border-radius: 16px;
  padding: 4px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  position: relative;
  border: 1px solid #e2e8f0;
}

/* Avatar States Styling */
.adi-member-public-profile-avatar-placeholder {
  width: 100%;
  height: 100%;
  background-color: #eef6ff;
  color: var(--color-link);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
}

.adi-member-public-profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Status Dot Specifics */
.adi-member-public-profile-status-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  background-color: #475569;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: help;
  display: block;
}
.adi-member-public-profile-status-dot.open {
  background-color: #22c55e;
}
.adi-member-public-profile-status-dot.closed {
  background-color: #ef4444;
}

.adi-member-public-profile-verified-icon {
  color: #3b82f6;
  margin-left: 6px;
  font-size: 0.6em;
  vertical-align: middle;
}

/* --- Cards --- */
.adi-member-public-profile-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.25rem;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.adi-member-public-profile-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
}

.adi-member-public-profile-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1e293b;
}

.adi-member-public-profile-card-title-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.adi-member-public-profile-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: #eef6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-link);
  font-size: 1rem;
}
.adi-member-public-profile-contact-label {
  font-size: 0.85rem;
}
.adi-member-public-profile-contact-value {
  font-size: 1.05rem;
}
/* --- Map --- */
.adi-member-public-profile-map-container {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 1rem;
  border: 1px solid #e2e8f0;
  position: relative;
}

.adi-member-public-profile-map-expand-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1e293b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 400;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.adi-member-public-profile-map-expand-btn:hover {
  background: #f8fafc;
  color: var(--color-link);
}

/* --- Info & Lists --- */
.adi-member-public-profile-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.adi-member-public-profile-info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}
.adi-member-public-profile-info-label {
  min-width: 24px;
  color: #64748b;
  margin-right: 8px;
  padding-top: 2px;
}
.adi-member-public-profile-info-value {
  color: #1e293b;
  font-weight: 500;
  font-size: 1rem;
}

/* --- Collapsible Logic --- */
.adi-member-public-profile-collapsible-content {
  max-height: 160px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease;
}

.adi-member-public-profile-collapsible-desc {
  max-height: 85px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease;
}

.adi-member-public-profile-collapsible-content.expanded,
.adi-member-public-profile-collapsible-desc.expanded {
  max-height: 1000px;
}

.adi-member-public-profile-collapsible-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to bottom, transparent, #ffffff);
  pointer-events: none;
  transition: opacity 0.3s;
}

.adi-member-public-profile-collapsible-content.expanded
  .adi-member-public-profile-collapsible-overlay,
.adi-member-public-profile-collapsible-desc.expanded
  .adi-member-public-profile-collapsible-overlay {
  opacity: 0;
}

.adi-member-public-profile-toggle-btn {
  background: none;
  border: none;
  color: var(--color-link);
  font-size: 1rem;
  font-weight: 600;
  padding: 0;
  margin-top: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.adi-member-public-profile-toggle-btn:hover {
  text-decoration: underline;
}

/* --- Tags --- */
.adi-member-public-profile-service-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.adi-member-public-profile-service-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background-color: #f8fafc;
  border-radius: 8px;
  font-weight: 600;
  color: #475569;
  font-size: 1rem;
}
.adi-member-public-profile-service-item i {
  margin-right: 10px;
  opacity: 0.7;
}

.adi-member-public-profile-tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
}
.adi-member-public-profile-tag {
  background-color: #f8fafc;
  color: #475569;
  padding: 4px 10px;
  border-radius: 50rem;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.adi-member-public-profile-tag:hover {
  background-color: #eef6ff;
  color: var(--color-link);
  border-color: #bfdbfe;
}

/* --- Gallery Carousel Controls --- */
.adi-member-public-profile-gallery-wrapper {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.adi-member-public-profile-gallery-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  gap: 0.75rem;
}
.adi-member-public-profile-gallery-slide {
  min-width: calc(33.333% - 0.5rem);
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.adi-member-public-profile-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease !important;
  display: block;
}
.adi-member-public-profile-gallery-slide:hover
  .adi-member-public-profile-gallery-img {
  transform: scale(1.05);
}

.adi-member-public-profile-gallery-controls {
  display: flex;
  gap: 6px;
}
.adi-member-public-profile-gallery-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.8rem;
  padding: 0;
}
.adi-member-public-profile-gallery-btn:hover:not(:disabled) {
  background: #f7f7f7;
  color: var(--color-link);
  border-color: var(--color-link);
}
.adi-member-public-profile-gallery-btn:disabled {
  opacity: 0.4;
  cursor: default;
  background: #f1f5f9;
}
/* NEW Fade Animation for Modal Image */
.adi-member-public-fade-out {
  opacity: 0 !important;
  transition: opacity 0.25s ease-out !important;
}

.adi-member-public-fade-in {
  opacity: 1 !important;
  transition: opacity 0.25s ease-in !important;
}

/* Gallery Responsive Overrides */
@media (max-width: 768px) {
  .adi-member-public-profile-gallery-slide {
    min-width: 100%; /* Full width on mobile */
  }
}

/* --- Review Overview --- */
.adi-member-public-profile-rating-overview {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}
.adi-member-public-profile-rating-box {
  text-align: center;
  min-width: 80px;
}
.adi-member-public-profile-rating-big {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
}
.adi-member-public-profile-rating-stars-static {
  color: #f59e0b;
  font-size: 0.8rem;
  margin-top: 4px;
}
.adi-member-public-profile-rating-bars {
  flex: 1;
  width: 100%;
}
.adi-member-public-profile-rating-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.8rem;
  color: #64748b;
}
.adi-member-public-profile-progress-bg {
  flex: 1;
  height: 6px;
  background-color: #f1f5f9;
  border-radius: 10px;
  overflow: hidden;
}
.adi-member-public-profile-progress-fill {
  height: 100%;
  background-color: #f59e0b;
  border-radius: 10px;
  display: block;
}

/* --- Reviews List --- */
.adi-member-public-profile-reviewsContainer {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.adi-member-public-profile-review-card {
  background-color: #f8fafc;
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid transparent;
}
.adi-member-public-profile-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.adi-member-public-profile-review-author {
  font-weight: 600;
  color: #1e293b;
  font-size: 1rem;
}

.adi-member-public-profile-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 1rem;
}
.adi-member-public-profile-page-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: white;
  color: #1e293b;
  cursor: pointer;
  transition: 0.2s;
  font-size: 0.85rem;
}
.adi-member-public-profile-page-btn:hover {
  background: #f1f5f9;
}
.adi-member-public-profile-page-btn.active {
  background: var(--color-link);
  color: white;
  border-color: var(--color-link);
}

/* --- Opening Hours --- */
.adi-member-public-profile-hours-table {
  width: 100%;
  font-size: 1rem;
}
.adi-member-public-profile-hours-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #e2e8f0;
}
.adi-member-public-profile-hours-row:last-child {
  border-bottom: none;
}
.adi-member-public-profile-day {
  color: #475569;
}
.adi-member-public-profile-time {
  font-weight: 500;
  color: #1e293b;
}
.adi-member-public-profile-closed {
  color: #ef4444;
  font-weight: 500;
}

/* --- Buttons --- */
.adi-member-public-profile-btn-chat,
.adi-member-public-profile-btn-call,
.adi-member-public-profile-btn-website {
  border: none;
  color: white;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 1rem;
  flex: 1;
}
.adi-member-public-profile-btn-chat {
  background-color: #e6f0ff; /* Light tint of primary */
  color: var(--color-link);
}
.adi-member-public-profile-btn-chat:hover {
  background-color: #dbeafe;
  color: #094b9e;
}
.adi-member-public-profile-btn-call {
  background-color: var(--color-link);
  color: white;
}
.adi-member-public-profile-btn-call:hover {
  background-color: #094b9e;
  color: white;
  box-shadow: 0 4px 12px rgba(11, 94, 194, 0.2);
  font-size: 1rem;
}
.adi-member-public-profile-btn-website {
  background-color: white;
  border: 1px solid #e2e8f0;
  color: var(--color-link);
}
.adi-member-public-profile-btn-website:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  font-size: 1rem;
}

.adi-member-public-profile-btn-directions {
  background-color: transparent;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  padding: 0.6rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 100%;
  font-size: 1rem;
}
.adi-member-public-profile-btn-directions:hover {
  background-color: #f8fafc;
  border-color: #cbd5e1;
  font-size: 1rem;
}

.adi-member-public-profile-btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.95rem;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: var(--color-link);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.adi-member-public-profile-btn-sm:hover {
  background-color: #e2e8f0;
}

/* --- Full Screen Modal Styling  --- */

.adi-member-public-profile-modal-fullscreen-custom .modal-dialog {
  width: 100vw !important;
  max-width: none !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

.adi-member-public-profile-modal-fullscreen-custom .modal-content {
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: rgba(0, 0, 0, 0.95);
  width: 100% !important;
}

.adi-member-public-profile-modal-fullscreen-custom .modal-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;
}

/* Map Modal Specific */
.adi-member-public-profile-map-modal-content {
  background-color: white !important;
}
.adi-member-public-profile-map-modal-body {
  position: relative;
  width: 100%;
  flex: 1; /* Grow to fill vertical space */
  height: 100vh; 
  overflow: hidden; /
}
.adi-member-public-profile-map-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: white;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Modal Main Image Area */
.adi-member-public-profile-modal-main-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-bottom: 80px;
}
.adi-member-public-profile-modal-img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transition: opacity 0.4s ease;
  opacity: 1;
}
.adi-member-public-profile-modal-img.fade-out {
  opacity: 0;
}

/* Modal Thumbnails Strip */
.adi-member-public-profile-modal-thumb-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}
.adi-member-public-profile-modal-thumb-container {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
  max-width: 100%;
  width: 100%;
  justify-content: center;
}
.adi-member-public-profile-modal-thumb-container::-webkit-scrollbar {
  display: none;
}
.adi-member-public-profile-modal-thumb {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.2s;
  border: 2px solid transparent;
  object-fit: cover;
  flex-shrink: 0;
}
.adi-member-public-profile-modal-thumb.active,
.adi-member-public-profile-modal-thumb:hover {
  opacity: 1;
  border-color: var(--color-link);
  transform: scale(1.1);
}

.adi-member-public-profile-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: 0.2s;
  font-size: 1.5rem;
}
.adi-member-public-profile-modal-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}
.adi-member-public-profile-modal-prev {
  left: 20px;
}
.adi-member-public-profile-modal-next {
  right: 20px;
}

.adi-member-public-profile-thumb-nav {
  position: absolute;
  bottom: 0;
  width: 40px;
  height: 80px;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 21;
}
.adi-member-public-profile-thumb-prev {
  left: 0;
}
.adi-member-public-profile-thumb-next {
  right: 0;
}
.adi-member-public-profile-reviewsContainer {
  transition: opacity 0.3s ease-in-out;
}
.adi-member-public-profile-reviewsContainer.reviews-fade-out {
  opacity: 0;
}

@media (max-width: 991px) {
  .adi-member-public-profile-header-content {
    text-align: center;
  }
  .adi-member-public-profile-avatar-container {
    margin: 0 auto 0.5rem auto;
  }
  .adi-member-public-profile-actions-row {
    justify-content: center;
  }
  .adi-member-public-profile-actions-container {
    justify-content: center !important;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
.adi-member-public-profile-business-name{
    font-size: 1.45rem;
}
}

 /* Member Public Profile Page Ends here */

 
/* -----------------
======= MY PLAZA PRINTING ADS Page - Sania Ghous
------------------------- */

/* Custom Fixed Height Utility and Core Card Styles */
.adi-my-plaza-ads-list-page-fixed-height {
  height: fit-content;
}
#adi-my-plaza-ads-list-page-list-container
  .adi-my-plaza-ads-list-page-transport-card-line-price {
  text-align: right;
  padding-right: 2rem;
}
.adi-my-plaza-ads-list-page-header-item .price-label {
  padding-right: 2rem;
}
.adi-my-plaza-ads-list-page-ad-template {
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
  background-color: white;
  display: flex;
  flex-direction: column;
}

/* Typography */
.adi-my-plaza-ads-list-page-ad-title {
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 5px 0;
}

.adi-my-plaza-ads-list-page-ad-category {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
}

.adi-my-plaza-ads-list-page-ad-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0b5ec2;
  margin-bottom: 0;
  display: block;
  line-height: 1;
}

/* Contact Details Styling */
.adi-my-plaza-ads-list-page-contact-item {
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
}

.adi-my-plaza-ads-list-page-contact-item a {
  color: inherit;
  text-decoration: none;
}

/* Status/Metadata Display */
.adi-my-plaza-ads-list-page-status-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background-color: #f8f9fa; /* bg-light */
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  line-height: 1.2;
  text-transform: capitalize;
  color: #000000;
}

/* --- Branding Stamp  --- */
.adi-my-plaza-ads-list-page-branding-stamp {
  font-size: 0.8rem;
  font-weight: 600;
  color: #42454d;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 4px 8px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  line-height: 1;
  z-index: 20;
  border: 1px solid #e5e7eb;
  height: fit-content;
  margin: 1rem 1rem 0.7rem;
  width: fit-content;
}

/* Ensure content has enough bottom padding to not be hidden by the stamp */
.adi-my-plaza-ads-list-page-content-padding {
  padding: 1.25rem;
  padding-bottom: 2.5rem;
}
.adi-my-plaza-ads-list-page-ad-content {
  flex-grow: 1;
}

.adi-my-plaza-ads-list-page-logo-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  background-color: #0b5ec2;
  color: white;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 900;
  margin-right: 5px;
  object-fit: cover;
}
.adi-my-plaza-ads-list-page-logo-img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  vertical-align: middle;
  display: inline-block;
}
.adi-my-plaza-ads-list-page-branding-stamp:hover {
  font-size: 0.8rem;
  color: #000000;
}
/* == TEMPLATE SPECIFIC STYLES === */

/* TEMPLATE 1 */
#adi-my-plaza-ads-list-page-ad-1 {
  background-color: #1f2937;
  color: white;
}
#adi-my-plaza-ads-list-page-ad-1
  .adi-my-plaza-ads-list-page-t1-image-container {
  height: 40%;
  position: relative;
}
#adi-my-plaza-ads-list-page-ad-1 .adi-my-plaza-ads-list-page-t1-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
}
#adi-my-plaza-ads-list-page-ad-1 .adi-my-plaza-ads-list-page-ad-content {
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.25rem;
}
#adi-my-plaza-ads-list-page-ad-1 .adi-my-plaza-ads-list-page-ad-title {
  color: #f9fafb;
}
#adi-my-plaza-ads-list-page-ad-1 .adi-my-plaza-ads-list-page-ad-category {
  color: #2cd4bf;
}
#adi-my-plaza-ads-list-page-ad-1 .adi-my-plaza-ads-list-page-ad-description {
  color: #d1d5db;
  margin-bottom: 0.4rem !important;
}
#adi-my-plaza-ads-list-page-ad-1 .adi-my-plaza-ads-list-page-contact-item {
  color: #d1d5db;
}
#adi-my-plaza-ads-list-page-ad-1 .adi-my-plaza-ads-list-page-ad-price {
  color: #2cd4bf;
}
.adi-my-plaza-ads-list-page-status-item-temp1 {
  background-color: #374151;
  color: #e5e4e4;
  border: none;
}
#adi-my-plaza-ads-list-page-ad-1 .template1-footer {
  border-top: 1px solid #4f6a8a;
}
#adi-my-plaza-ads-list-page-ad-1 .adi-my-plaza-ads-list-page-t1-qrCode {
  z-index: 10000;
  height: 100px;
  position: absolute;
  right: 5px;
  top: 5px;
}

/* TEMPLATE 2:(Split) */
#adi-my-plaza-ads-list-page-ad-2 {
  display: grid;
  grid-template-columns: 40% 60%;
  border: 1px solid #e5e7eb;
}
#adi-my-plaza-ads-list-page-ad-2 .template2-footer {
  padding-top: 1rem;
}
#adi-my-plaza-ads-list-page-ad-2 .adi-my-plaza-ads-list-page-t2-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
}
#adi-my-plaza-ads-list-page-ad-2 .adi-my-plaza-ads-list-page-ad-content {
  padding: 1rem;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  height: 100%;
}
#adi-my-plaza-ads-list-page-ad-2 .adi-my-plaza-ads-list-page-ad-title {
  color: #0b5ec2;
  font-size: 1.3rem;
}
#adi-my-plaza-ads-list-page-ad-2 .adi-my-plaza-ads-list-page-contact-details {
  margin-top: 0.5rem;
}
.adi-my-plaza-ads-list-page-t2-image-container {
  position: relative;
  height: 100%;
}
#adi-my-plaza-ads-list-page-ad-2 .adi-my-plaza-ads-list-page-qrCode {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 10000;
  height: 100px;
}

/* TEMPLATE 3:  */
#adi-my-plaza-ads-list-page-ad-3 {
  border: 2px solid #d3d3d3;
  padding: 0;
}
#adi-my-plaza-ads-list-page-ad-3
  .adi-my-plaza-ads-list-page-t3-image-container {
  width: 100%;
  height: 50%;
  position: relative;
}
#adi-my-plaza-ads-list-page-ad-3 .adi-my-plaza-ads-list-page-t3-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  position: relative;
}
#adi-my-plaza-ads-list-page-ad-3 .adi-my-plaza-ads-list-page-t3-qrCode {
  z-index: 10000;
  height: 100px;
  position: absolute;
  right: 5px;
  top: 5px;
}
#adi-my-plaza-ads-list-page-ad-3 .adi-my-plaza-ads-list-page-ad-title {
  color: #000000;
}
#adi-my-plaza-ads-list-page-ad-3 .adi-my-plaza-ads-list-page-ad-content {
  padding: 0.75rem 1.25rem;
  height: 50%;
}
#adi-my-plaza-ads-list-page-ad-3 .adi-my-plaza-ads-list-page-ad-price {
  color: #0b5ec2;
  font-size: 1.5rem;
}

/* TEMPLATE 4:  */
#adi-my-plaza-ads-list-page-ad-4 {
  background-color: #ffffff;
  border: 1px solid #bae6fd;
}
#adi-my-plaza-ads-list-page-ad-4 .adi-my-plaza-ads-list-page-t4-header {
  background-color: #000000;
  color: white;
  padding: 1.5rem 1.25rem 0.5rem;
  position: relative;
  height: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 50px;
}
#adi-my-plaza-ads-list-page-ad-4 .adi-my-plaza-ads-list-page-t4-profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  position: absolute;
  bottom: -50px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
#adi-my-plaza-ads-list-page-ad-4 .adi-my-plaza-ads-list-page-ad-content {
  padding: 1rem 1.25rem;
  text-align: center;
}
#adi-my-plaza-ads-list-page-ad-4 .adi-my-plaza-ads-list-page-ad-title {
  margin-top: 0.5rem;
  font-size: 1.6rem;
  color: #000000;
}
#adi-my-plaza-ads-list-page-ad-4 .adi-my-plaza-ads-list-page-ad-category {
  color: #0077b6;
}
#adi-my-plaza-ads-list-page-ad-4 .adi-my-plaza-ads-list-page-contact-details {
  margin-top: 0.75rem;
}
.adi-my-plaza-ads-list-page-ad-4 .adi-my-plaza-ads-list-page-ad-price {
  color: black;
}
.adi-my-plaza-ads-list-page-ad-4 .adi-my-plaza-ads-list-page-qrCode {
  z-index: 10000;
  height: 100px;
  position: absolute;
  right: 5px;
  top: 5px;
}
/* TEMPLATE 5:  (Text Only) */
#adi-my-plaza-ads-list-page-ad-5 {
  border-left: 5px solid #d3d3d3;
  background-color: #fff;
  padding: 1.5rem;
  justify-content: space-between;
}
#adi-my-plaza-ads-list-page-ad-5 .adi-my-plaza-ads-list-page-contact-details {
  margin-top: 0.75rem;
}

/* TEMPLATE 6:  */
#adi-my-plaza-ads-list-page-ad-6 {
  color: white;
  padding: 1.5rem;
  padding-bottom: 0;
  justify-content: space-between;
}
#adi-my-plaza-ads-list-page-ad-6 .adi-my-plaza-ads-list-page-ad-title {
  color: #ffffff;
}
#adi-my-plaza-ads-list-page-ad-6 .adi-my-plaza-ads-list-page-contact-item {
  color: #d1d5db;
}
#adi-my-plaza-ads-list-page-ad-6 .adi-my-plaza-ads-list-page-ad-price {
  color: #ffac03;
}
#adi-my-plaza-ads-list-page-ad-6 .adi-my-plaza-ads-list-page-ad-address,
#adi-my-plaza-ads-list-page-ad-6 .adi-my-plaza-ads-list-page-ad-category,
#adi-my-plaza-ads-list-page-ad-6 .adi-my-plaza-ads-list-page-ad-description,
#adi-my-plaza-ads-list-page-ad-1 .adi-my-plaza-ads-list-page-ad-address {
  color: #e5e7eb;
}
#adi-my-plaza-ads-list-page-ad-6 .adi-my-plaza-ads-list-page-status-item {
  border-color: #4b5563;
  background-color: #4e555b;
  color: #fff !important;
}

/* TEMPLATE 7:  */
#adi-my-plaza-ads-list-page-ad-7 {
  background-color: #ffffff;
  color: rgb(0, 0, 0);
  border: 1px solid #bae6fd;
}
#adi-my-plaza-ads-list-page-ad-7 .adi-my-plaza-ads-list-page-t6-header {
  padding: 1rem;
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
#adi-my-plaza-ads-list-page-ad-7 .adi-my-plaza-ads-list-page-ad-content {
  padding: 0.5rem 1rem 1.5rem 1rem;
  height: 100%;
}
#adi-my-plaza-ads-list-page-ad-7 .adi-my-plaza-ads-list-page-ad-title {
  color: white;
  margin-top: 0;
}
#adi-my-plaza-ads-list-page-ad-7 .adi-my-plaza-ads-list-page-ad-category {
  color: #bfdbfe;
  margin-bottom: 0;
}
#adi-my-plaza-ads-list-page-ad-7 .adi-my-plaza-ads-list-page-ad-description {
  color: #000000;
}
#adi-my-plaza-ads-list-page-ad-7 .adi-my-plaza-ads-list-page-contact-item {
  color: #0f0f10;
}
#adi-my-plaza-ads-list-page-ad-7 .adi-my-plaza-ads-list-page-status-item {
  background-color: #f0f9ff;
}

/* TEMPLATE 8: Events */
#adi-my-plaza-ads-list-page-ad-8 {
  border: 1px solid #d1d5db;
  background-color: #fff;
}
#adi-my-plaza-ads-list-page-ad-8 .adi-my-plaza-ads-list-page-ad-title {
  color: #000000;
}
#adi-my-plaza-ads-list-page-ad-8 .adi-my-plaza-ads-list-page-ad-price {
  color: #0b5ec2;
}
.adi-my-plaza-ads-list-page-ad-content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.adi-my-plaza-ads-list-page-contact-details.full-width {
  margin-bottom: 1.5rem; /* Space before price/badges */
}

#adi-my-plaza-ads-list-page-ad-6 .adi-my-plaza-ads-list-page-status-item {
  color: #000000;
}
/* without image templates */
.adi-my-plaza-ads-list-page-ad-withoutImage-template {
  padding: 1.5rem;
  padding-bottom: 0;
}

/* SELECTED OVERLAY for Templates */
.adi-my-plaza-ads-list-page-template-selected-wrapper {
  position: relative;
  cursor: pointer;
}

/* Blue overlay */
.adi-my-plaza-ads-list-page-template-selected-wrapper.selected::after {
  content: "✓  Selected";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 94, 194, 0.55); /* blue overlay */
  color: white;
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  z-index: 10;
}

/* == MULTI STEP MODAL STYLING == */

.adi-my-plaza-ads-list-ad-customizationModal .modal-header {
  border-bottom: 1px solid #d4e0eb;
}
.adi-my-plaza-ads-list-ad-customizationModal .modal-lg {
  max-width: 800px;
  width: 95%;
}
.adi-my-plaza-ads-list-ad-customizationModal .form-check-input {
  width: 1.2rem;
  height: 1.2rem;
  border-color: #b9b9b9;
}
.adi-my-plaza-ads-list-ad-customizationModal .form-check-input:checked {
  background-color: var(--color-link);
  border-color: var(--color-link);
}
.adi-my-plaza-ads-list-ad-customizationModal .form-check-label {
  font-size: 1.1rem;
  margin-bottom: 0;
  padding-top: 5px;
  text-transform: capitalize;
}
.adi-my-plaza-ads-list-ad-customizationModal .btn {
  font-size: 1rem;
}
.adi-my-plaza-ads-list-ad-customizationModal h5 {
  font-size: 1.1rem;
}
.adi-my-plaza-ads-list-ad-customizationModal .light-btn {
  background-color: #e6f0ff;
}
.adi-my-plaza-ads-list-ad-customizationModal .light-btn:hover {
  background-color: #d4deed;
}
/*  NEW STEPPER DESIGN CSS */
.adi-my-plaza-ads-list-page-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1rem;
  position: relative;
}

/* Prefixed Step Class */
.adi-my-plaza-ads-list-page-step {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: color 0.3s;
  color: #6c757d; /* Inactive text */
  text-align: center;
}

/* Prefixed Step Indicator Class */
.adi-my-plaza-ads-list-page-step-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f3f4f6; /* Inactive background */
  border: 2px solid #d1d5db; /* Inactive border */
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  z-index: 10;
  transition: all 0.3s;
}

/* Prefixed Step Label Class */
.adi-my-plaza-ads-list-page-step-label {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.3s;
}

/* Prefixed Connecting Line / Progress Bar */
.adi-my-plaza-ads-list-page-step-line {
  position: absolute;
  height: 3px;
  background-color: #d1d5db;
  top: 15px;
  left: 16px;
  right: 16px;
  z-index: 5;
}

/* Active State */
.adi-my-plaza-ads-list-page-step.active {
  color: var(--color-link);
}

.adi-my-plaza-ads-list-page-step.active
  .adi-my-plaza-ads-list-page-step-indicator {
  background-color: var(--color-link);
  border-color: var(--color-link);
  color: white;
  transform: scale(1.05);
}

/* Completed State  */
.adi-my-plaza-ads-list-page-step.completed {
  color: var(--color-link);
}
.adi-my-plaza-ads-list-page-step.completed
  .adi-my-plaza-ads-list-page-step-indicator {
  background-color: white;
  border-color: var(--color-link);
  color: var(--color-link);
}

@media (min-width: 768px) {
  .adi-my-plaza-ads-list-page-step-label {
    font-size: 1rem; /* Larger font on desktop */
  }
}

/* Template/Image Box Styling */
.adi-my-plaza-ads-list-page-selection-box {
  height: 150px;
  border: 2px solid #d4e0eb;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: white;
}

.adi-my-plaza-ads-list-page-selection-box:hover {
  border-color: #6c757d;
  box-shadow: 0 0 0 0.25rem rgba(11, 94, 194, 0.25);
}

.adi-my-plaza-ads-list-page-selection-box.selected {
  border-color: var(--color-link);
  box-shadow: 0 0 0 0.25rem rgba(11, 94, 194, 0.5);
  background-color: #eef6ff;
}

.adi-my-plaza-ads-list-page-template-placeholder {
  border: 1px dashed #d4e0eb;
}

/* Action Button Styling */
.adi-my-plaza-ads-list-ad-customizationModal .btn-primary {
  background-color: var(--color-link);
  border-color: var(--color-link);
  transition: background-color 0.2s;
}
.adi-my-plaza-ads-list-ad-customizationModal .btn-primary:hover {
  background-color: #084aa0;
  border-color: #084aa0;
}

/* Blank Preview Box  */
#adi-my-plaza-ads-list-page-previewBox {
  background-color: #f8fafc;
  border: 1px solid #d4e0eb;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  padding: 20px;
}
#adi-my-plaza-ads-list-page-previewBox .adi-my-plaza-ads-list-page-ad-title {
  font-size: 1.7rem;
  margin-bottom: 0;
}
#adi-my-plaza-ads-list-page-previewBox .adi-my-plaza-ads-list-page-ad-category {
  font-size: 1rem;
}
#adi-my-plaza-ads-list-page-previewBox .adi-my-plaza-ads-list-page-status-item {
  font-size: 1rem;
}
#adi-my-plaza-ads-list-page-previewBox
  .adi-my-plaza-ads-list-page-t3-qrCode
  img {
  width: 70px !important;
  height: 70px !important;
}
#adi-my-plaza-ads-list-page-previewBox
  #adi-my-plaza-ads-list-page-ad-3
  .adi-my-plaza-ads-list-page-ad-title {
  margin-bottom: 0.9rem;
}
#adi-my-plaza-ads-list-page-previewBox
  #adi-my-plaza-ads-list-page-ad-3
  .adi-my-plaza-ads-list-page-ad-category {
  margin-top: 1rem;
}
#adi-my-plaza-ads-list-page-previewBox
  #adi-my-plaza-ads-list-page-ad-1
  .adi-my-plaza-ads-list-page-ad-category {
  margin-top: 1rem;
}
#adi-my-plaza-ads-list-page-previewBox
  #adi-my-plaza-ads-list-page-ad-1
  .adi-my-plaza-ads-list-page-ad-title {
  margin-bottom: 1rem;
}
#adi-my-plaza-ads-list-page-previewBox
  #adi-my-plaza-ads-list-page-ad-1
  .adi-my-plaza-ads-list-page-status-item {
  background-color: #374151;
  color: #e5e4e4;
  border: none;
}
#adi-my-plaza-ads-list-page-previewBox
  #adi-my-plaza-ads-list-page-ad-1
  .adi-my-plaza-ads-list-page-ad-price {
  margin-bottom: 0.7rem;
}
/* Image thumbnails */
.adi-my-plaza-ads-list-page-image-thumbnail {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 0.25rem;
  cursor: pointer;
  border: 3px solid transparent;
  transition: border-color 0.2s;
  border-radius: 8px;
}
.adi-my-plaza-ads-list-page-image-thumbnail:hover {
  opacity: 0.8;
}
.adi-my-plaza-ads-list-page-image-thumbnail.selected {
  border-color: var(--color-link);
}
.adi-my-plaza-ads-list-page-image-thumbnail.selected-image {
  border: 3px solid var(--color-link);
  padding: 2px;
  border-radius: 4px;
}
.adi-my-plaza-ads-list-page-search-filter-section {
  max-width: 350px;
}
@media (min-width: 360px) and (max-width: 767px) {
  .transport-active-contracts-company-name {
    margin-right: 20px;
  }
  .adi-my-plaza-ads-list-page-image-thumbnail {
    width: 100%;
    height: 70px;
  }
  #adi-my-plaza-ads-list-page-list-container
    .adi-my-plaza-ads-list-page-transport-card-line-price {
    text-align: left;
    padding-right: 0rem;
  }
}
/* Ends here */
/* #----------------------------------------# */
/* -----------------
===== VAT Rates Listing Page - Sania Ghous =====
------------------------- */
.adi-vat-rate-selector-page-header-item,
.adi-vat-rate-selector-page-Plat-Comp-DataGridItemRow {
  grid-template-columns: 1fr 0.7fr 1fr 3fr 100px;
}
.adi-vat-rate-selector-page-header-item .price-label {
  padding-right: 3rem;
}
#adi-vat-rate-selector-page-list-container
  .adi-vat-rate-selector-page-line-price {
  text-align: right;
  padding-right: 3rem;
}
.adi-vat-rate-selector-page-select-vat-btn {
  width: 100px;
  background-color: var(--color-link);
  color: #ffffff;
  border: none;
  border-radius: 0.3rem;
}

.adi-vat-rate-selector-page-select-vat-btn.selected {
  background-color: #198754;
}
.adi-vat-rate-selector-page-select-vat-btn.selected:hover {
  background-color: #198754;
}
.adi-vat-rate-selector-page-select-vat-btn:hover {
  filter: brightness(1.2);
  background-color: var(--color-link);
  color: #ffffff;
}

.adi-vat-rate-selector-page-vat-selected-row {
  background: #f3f8ff !important;
  border: 1px solid #a6bdd6 !important;
}
.adi-vat-rate-selector-page-Plat-Comp-DataGridItemRow {
  margin-bottom: 0.5rem;
}

@media (min-width: 360px) and (max-width: 767px) {
  .adi-vat-rate-selector-page-select-vat-btn {
    width: fit-content;
    background-color: var(--color-link);
    color: #ffffff;
    border: none;
    border-radius: 0.3rem;
    padding: 4px 1rem;
    margin-top: 5px;
  }
   #adi-vat-rate-selector-page-list-container
    .adi-vat-rate-selector-page-line-price {
    text-align: left;
    padding-right: 0rem;
  }
}

/* -- VAT Rates Listing Page -Ends here --- */

/* #----------------------------------------# */

.hidden {
  display: none !important;
}