/* Header Styles */
/* Base mobile styles - mobile first approach */
.mobile-header-whole {
  display: block;
}

/* Mobile logo section with white background */
.mobile-logo {
  display: block !important;
  background-color: #ffffff;
  padding: 15px 20px;
  text-align: center;
  border-bottom: 2px solid #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mobile-logo .logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 10px;
}

.mobile-logo .logo-img {
  max-width: 50px;
  height: auto;
  display: block;
}

.mobile-logo .logo-text {
  font-weight: bold;
  font-size: 1.2em;
  color: #000;
  letter-spacing: 1px;
}

.mobile-header {
  display: flex !important;
  flex-direction: column;
  background-color: #000;
  padding: 10px 15px;
  border-bottom: 1px solid #333;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYV2NkYGD4z8DAwMgABXgPxF/x0DhwDAA3sR6cAaL7Q7YAAAABJRU5ErkJggg==");
  background-size: 20px 20px;
  position: relative;
  z-index: 0;
  transition: all 0.3s ease;
}

/* More selective hiding - only hide specific elements that interfere with mobile design */
/* Don't hide ALL displayTop elements - be more specific */
@media (max-width: 768px) {
  /* Hide the original header top but preserve menu functionality */
  .header-top.custom-header {
    display: none !important;
  }
  .header-top .rom {
    display: none !important;
  }
  /* .original-header-top {
    display: none !important;
  }
   */
  /* Hide specific elements that cause issues, but not the menu */
  .header-nav:not(.main-menu),
  .header-banner,
  .top-menu:not(.main-menu),
  .user-info:not(.mobile-account),
  .header_user_info:not(.mobile-account),
  .block-contact,
  .block-social,
  .currency-selector,
  .language-selector {
    display: none !important;
  }

  /* Keep menu-related displayTop elements visible */
  .menu-section,
  .menu-section * {
    display: block !important;
    z-index: -1;
  }
}

/* Mobile header layout */
.mobile-header-layout {
  display: flex;
  justify-content: space-around;
  align-items: self-end;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  transition: all 0.3s ease;
}

/* Hide icons when search is active */
.mobile-header.search-active .mobile-header-layout {
  display: none;
}

/* Mobile icon styles */
.mobile-icon {
  filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  width: 24px;
  height: 24px;
  display: block;
}

.mobile-icon-account {
  filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  width: 26px;
  height: 26px;
  display: flex;
}
.header-text,
.header-text-cart {
  display: flex;
  font-size: 1rem;
}
/* Mobile button and link styles */
.mobile-menu-toggle button,
.mobile-search button,
.mobile-account button {
  background: none;
  border: none;
  padding: 0 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  text-decoration: none;
  min-height: 44px;
  justify-content: center;
}

/* Mobile Search Bar Styles */
.mobile-search-bar {
  display: none;
  width: 100%;
  padding: 0;
  animation: slideDown 0.3s ease-out;
}

.mobile-search-bar.active {
  display: block;
}

.mobile-search-input-container {
  display: flex;
  align-items: center;
  /* margin-top: 10px; */
  padding: 5px 10px;
  gap: 5px;
}

.mobile-search-input-container:focus-within {
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.15);
}

#mobile-search-input {
  flex: 1;
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  padding: 10px 15px;
  outline: none;
}

#mobile-search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.mobile-search-submit,
.mobile-search-close {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  min-width: 36px;
  height: 36px;
}

.mobile-search-submit:hover,
.mobile-search-close:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.mobile-search-submit .mobile-icon,
.mobile-search-close .mobile-icon {
  width: 20px;
  height: 20px;
}

/* Animation for search bar */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.mobile-search-bar.closing {
  animation: slideUp 0.3s ease-out;
}

/* Menu section - IMPORTANT: Keep this visible and functional on mobile */
.menu-section {
  display: none;
  position: relative;
  z-index: 0;
}

.menu-section.active {
  display: block !important;
  background-color: #000;
  padding: 10px;
  border-bottom: 1px solid #333;
  color: #fff;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYV2NkYGD4z8DAwMgABXgPxF/x0DhwDAA3sR6cAaL7Q7YAAAABJRU5ErkJggg==");
  background-size: 20px 20px;
}

/* Desktop styles - show desktop, hide mobile */
@media (min-width: 769px) {
  .mobile-icon {
    filter: unset;
    margin-bottom: 8px;
  }
  .mobile-header-whole {
    display: none !important;
  }

  .mobile-header {
    display: none !important;
  }

  .mobile-logo {
    display: none !important;
  }

  .header-top.custom-header {
    display: block !important;
  }

  .original-header-top {
    display: block !important;
  }

  .menu-section {
    display: none !important;
  }
}

/* Existing desktop icon styles */
.header-text,
.icon-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.user-greeting {
  font-size: 1em;
  line-height: 1.2;
}

.my-page {
  font-size: 1em;
  line-height: 1.2;
}

/* .blockcart .header-icon {
  display: inline-block !important;
  visibility: visible !important;
} */

/* Ensure proper container styling */
.header_content {
  position: relative;
  z-index: 1000;
  overflow: visible;
}

body,
html {
  overflow-x: visible;
}

/* Mobile cart - keep desktop styling and functionality */
.mobile-cart {
  position: relative;
}

.mobile-cart .blockcart {
  display: block !important;
  margin-right: 20px;
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
  .mobile-logo {
    padding: 12px 15px;
  }

  .mobile-logo .logo-img {
    max-width: 35px;
  }

  .mobile-logo .logo-text {
    font-size: 1.5em;
  }

  .mobile-header {
    padding: 10px 12px 12px 10px;
  }

  .mobile-header-layout {
    justify-content: space-between;
  }

  .mobile-menu-toggle button,
  .mobile-search button,
  .mobile-account button {
    padding: 0 5px;
    min-height: 40px;
  }

  .mobile-icon {
    width: 22px;
    height: 22px;
  }

  #mobile-search-input {
    font-size: 14px;
    padding: 8px 12px;
  }
}

/* Additional styling for better mobile logo appearance */
@media (max-width: 768px) {
  .mobile-logo .logo-container:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }

  .mobile-logo .logo-text {
    font-family: "Arial", sans-serif;
    text-transform: uppercase;
  }
}

/* Focus styles for accessibility */
#mobile-search-input:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.mobile-search-submit:focus,
.mobile-search-close:focus {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Cart icon container for vertical layout */
.cart-icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* General icon styles */
.header-icon {
  display: inline-block;
}

/* Desktop icon visibility */
.desktop-icon {
  display: inline-block;
}

/* Mobile icon visibility and styling */

/* Hide desktop icon and show mobile icon on smaller screens */
@media (max-width: 768px) {
  .desktop-icon {
    display: none !important; /* Ensure desktop icon is hidden */
  }
  .mobile-icon {
    display: inline-block !important; /* Ensure mobile icon is shown */
  }
  .header-text {
    display: inline-block !important; /* Ensure text is visible on mobile */
  }
}

/* Hide cart text on desktop */
@media (min-width: 769px) {
  .header-text-cart {
    display: none !important; /* Hide text on desktop */
  }
}

/* Make icon container relative for absolute positioning of count */
.cart-icon-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Other existing styles */
.user-greeting {
  font-size: 1em;
}
.my-page {
  font-size: 1em;
  line-height: 1.2;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Noto Sans KR", sans-serif;
}

/* Header container */
.header-top.custom-header {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
}

.header-layout {
  display: flex;
  padding-left: 25rem;
  padding-right: 25rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
}

/* Logo styles */
.logo-container {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 10px;
}

.logo-img {
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.logo-text {
  font-size: 24px;
  font-weight: bold;
  color: #111;
  white-space: nowrap;
}

/* Search bar */
.col-search {
  flex: 1;
  max-width: 500px;
  margin: 0 auto;
}

.search-bar {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
  transition: border-color 0.2s ease;
}

.search-bar:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.search-bar form {
  display: flex;
  width: 100%;
  align-items: center;
}

.search-bar input {
  flex: 1;
  border: none;
  padding: 12px 15px;
  font-size: 14px;
  outline: none;
  background: transparent;
}

.search-bar input::placeholder {
  color: #888;
}

.search-bar select {
  background-color: #f9f9f9;
  border-right: 1px solid #ccc;
  border: none;
  padding: 10px;
  font-size: 14px;
  outline: none;
}

.search-btn,
.search-bar .mic,
.search-bar .search {
  background: none;
  border: none;
  padding: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.search-btn:hover,
.search-bar .mic:hover,
.search-bar .search:hover {
  background-color: #f8f9fa;
}

.search-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Header icons */
.col-icons {
  flex: 0 0 auto;
}

.header-icons {
  display: flex;
  align-items: self-end;
  gap: 0px;
}

.icon-link {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.icon-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: #007bff;
}

.header-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.cart-products-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #dc3545;
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 50%;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile menu toggle */
.mobile-menu-toggle,
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  /* padding: 8px; */
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.mobile-menu-toggle:hover,
.menu-toggle:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.mobile-menu-toggle i {
  font-size: 24px;
  color: #333;
}

/* Hide default elements */
/* .search-widget,
.blockcart {
  display: none;
} */

/* Focus states for accessibility */
.search-bar input:focus,
.icon-link:focus,
.search-btn:focus,
.mobile-menu-toggle:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Hover effects */
@media (hover: hover) {
  .logo-container:hover .logo-img {
    opacity: 0.8;
  }
}

/* Tablet styles */
@media (max-width: 1024px) {
  .header-layout {
    gap: 15px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .col-search {
    max-width: 400px;
  }

  .header-icons {
    gap: 0px;
  }

  .logo-text {
    font-size: 20px;
  }
}

/* Mobile styles */
@media (max-width: 768px) {
  .logo-container {
    justify-content: center;
  }
  .header-top.custom-header {
    padding: 10px 15px;
  }

  .header-layout {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .mobile-menu-toggle,
  .menu-toggle {
    display: block;
  }

  .col-logo {
    flex: 1;
  }

  .col-icons {
  }

  .col-search {
    flex: 1 1 100%;
    max-width: none;
    margin: 10px 0 0 0;
  }

  .logo-img {
    height: 30px;
    max-width: 150px;
  }

  .logo-text {
    font-size: 18px;
  }

  .header-icons {
    gap: 0px;
  }

  .header-text {
    display: none;
  }

  .icon-link {
    padding: 6px;
  }

  .search-bar input {
    padding: 10px 12px;
    font-size: 14px;
  }

  .search-btn {
    padding: 10px;
  }
}

/* Small mobile styles */
@media (max-width: 480px) {
  .header-top.custom-header {
    padding: 8px 12px;
  }

  .header-layout {
    gap: 8px;
  }

  .logo-img {
    height: 25px;
    max-width: 120px;
  }

  .logo-text {
    font-size: 16px;
  }

  .header-icons {
    gap: 8px;
  }

  .icon-link {
    padding: 4px;
  }
  .col-logo {
    flex: 1;
  }

  .col-icons {
  }
  .header-icon,
  .search-icon {
    width: 22px;
    height: 22pxx;
  }

  .search-bar input {
    padding: 8px 10px;
    font-size: 13px;
  }

  .search-btn {
    padding: 8px;
  }

  .cart-products-count {
    font-size: 9px;
    padding: 1px 4px;
    min-width: 14px;
    height: 14px;
  }
}
/* Homepage date time picker modal */
.rental-period {
  display: grid;
  gap: 10px;
  max-width: 350px;
  margin: 20px auto;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;
}

.rental-period label {
  font-weight: bold;
  margin-top: 10px;
  font-size: 16px;
  text-align: left !important;
}

.rental-period .date-time-group {
  display: flex;
  gap: 10px;
}

.rental-period input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.rental-period input[type="text"] {
  flex: 2;
}

.rental-period input[type="time"] {
  flex: 1;
}

.rental-period .duration {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
  text-align: left;
}

.rental-period .save-button {
  background-color: #2e2e2e;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.rental-period .save-button:hover {
  background-color: #444;
}

.rental-period .flatpickr-input {
  background: #fff;
  cursor: pointer;
}

.rental-period input[type="time"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.modal-header {
  border-bottom: 1px solid #e5e5e5;
}

.modal-title {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: left !important;
}

.modal-body-rental {
  padding: 20px;
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  /* gap: 15px; */
  justify-content: left;
  align-items: left;
  width: 100%;
}

.modal-content {
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  text-align: center;
  font-family: "Noto Sans KR", sans-serif;
}
/* SEARCH BAR */
.cart_calculated_time {
  font-weight: 900;
  font-size: 20px;
}

.rentDate,
.returnDate {
  font-weight: 900;
  font-size: 15px;
}
.search-widget form {
  z-index: 20 !important;
}

.mp-recent-searches-container {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  width: 100%;
  background: #000517;
  padding: 20px 15px;
}

.mp-recent-searches-container ul {
  margin: 0;
  text-align: left;
}

.mp-recent-searches-container ul li {
  display: inline-block;
}

.mp-recent-searches-container ul li:not(:last-child) {
  margin-right: 10px;
  margin-right: 10px;
}

.mp-recent-searches-container span {
  display: block;
  color: white;
  padding: 5px 10px;
  border: 1px solid white;
  border-radius: 50px;
}
/* END SEARCH BAR */

/* PRICE PER HR */
.mp-price-hr {
  display: flex !important;
  align-items: center;
}

.mp-price-hr:not(:last-child) {
  margin-bottom: 10px;
}

.mp-price-hr > *:first-child {
  text-align: left;
  /* background: gray; */
  border-radius: 5px;
  color: black;
  padding: 2px 10px;
}

.mp-price-hr > *:last-child {
  flex: 1;
  text-align: right;
  color: black;
  font-size: 18px;
}

.mp-product-price-hr > *:last-child {
  margin-right: -28px;
}

.mp-product-details-price,
.mp-product-details-price .product-price {
  display: block !important;
}

.mp-product-details-price .mp-price-hr > *:first-child {
  border-radius: initial;
  padding: 0;
  color: black;
  font-size: 20px;
  font-weight: 900;
}
/* END PRICE PER HR */

/* MODAL */
.modal .mp-product-details-price {
  margin-top: 20px;
}

.modal .mp-product-details-price span {
  font-size: 16px;
}

.modal .flex-box {
  display: flex !important;
  display: -webkit-flex;
  align-items: center;
  justify-content: end;
}

.modal .bootstrap-touchspin {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  height: 33px;
  margin-right: 15px;
  width: auto;
}

.modal .bootstrap-touchspin .input-group-btn {
  display: inline-block;
  width: initial;
}

.modal .bootstrap-touchspin .btn {
  position: initial !important;
  font-size: 18px;
  height: 30px;
  padding: 3.5px 15px;
}

.modal .bootstrap-touchspin .form-control {
  display: inline-block !important;
  float: none;
  background-color: #afafaf;
  color: white;
  vertical-align: middle;
  text-align: center;
  height: 30px;
}

/* END MODAL */

/* DATETIMEPICKER */
.hs_datepicker_container * {
  font: inherit;
}

.hs_datepicker_container .hs_header_label {
  display: flex;
  align-items: center;
  margin: 0 -15px 10px -15px;
}

.hs_datepicker_container .hs_header_label > *:first-child {
  flex: 1;
}

.hs_datepicker_container .hs_header_label > * {
  padding: 0 15px;
}

.hs_datepicker_container .hs_calculated_results {
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  opacity: 100%;
  color: #333333;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 15px;
  border: 1px solid #e9e9e9;
}

.hs_datepicker_container .hs_calculated_results > * {
  width: 50%;
}

.hs_datepicker_container .hs_calculated_results > *:last-child {
  text-align: right;
}

.hs_datepicker_container .hs_btn_reset_datepicker {
  background-color: #ec4249;
  opacity: 1;
  color: #ffffff;
  font-weight: bolder;
  border-radius: 5px;
  margin: 0 !important;
}

.hs_datepicker_container .hs_btn_reset_datepicker:focus {
  outline: none;
}

.hs_datepicker_container .hs_btn_reset_datepicker:active {
  transform: translateY(-1px);
}

.hs_datepicker_container .hs_body_datepicker {
  display: flex;
  align-items: center;
  margin: 0 -15px;
}

.hs_datepicker_container .hs_body_datepicker > * {
  padding: 0 15px;
  flex: 1;
}

.hs_datepicker_label {
  padding: 8px 10px;
  background-color: #2d2d2d;
  opacity: 1;
  color: #ffffff;
  font-weight: bolder;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  text-align: center;
  display: block;
  margin: 0;
}

.hs_datepicker_container .hs_body_datepicker input {
  opacity: 0;
}

.hs_datepicker_container .hs_datetime_input_label {
  position: relative;
  background: white;
  border: 1px solid #acb5bd;
  display: flex !important;
}

.hs_datepicker_container .hs_datetime_input_label .hs_date_label,
.hs_datepicker_container .hs_datetime_input_label .hs_time_label {
  position: absolute;
  top: 0;
  display: flex;
  height: 100%;
  align-items: center;
  color: #000517;
  font-weight: bolder;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

.hs_datepicker_container .hs_datetime_input_label .hs_date_label {
  left: 15px;
}

.hs_datepicker_container .hs_datetime_input_label .hs_time_label {
  right: 15px;
}

.hs_datepicker_container .hs_datetime_input_label .hs_datetime_icons {
  margin-left: 6px;
}

.hs_datepicker_container .hs_datetime_input_label .hs_datetime_icons img {
  width: 20px;
  max-width: 100%;
}
/* END DATETIMEPICKER */

/* MAP IN ABOUT US */

.mp-maps {
  margin: auto;
  width: 100%;
}

.mp-maps p {
  font-size: 14px;
}

/* MOBILE RESPONSIVE */
@media screen and (max-width: 768px) {
  .mp-custom-menu {
    display: block;
  }

  .mp-add-to-cart {
    display: block;
  }
  .mp-add-to-cart_1 {
    display: block;
  }

  .mp-maps {
    padding: 10px;
    width: 100%;
  }

  .mp-maps p {
    font-size: 12px;
  }
  .hs_datepicker_container .hs_body_datepicker {
    flex-direction: row;
  }
  .hs_datepicker_label {
    padding: 20px;
    background-color: #2d2d2d;
    opacity: 1;
    color: #ffffff;
    font-weight: bolder;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: center;
    display: block;
    margin: 0;
    white-space: nowrap;
  }
}

/* FAQ PAGE */

.accordionLabel {
  border: #b3bbc2 solid 1px;
  border-style: solid;
}

.accordionLabel p {
  font-size: 12px !important;
  margin: 10px;
}

.accordionBtn {
  cursor: pointer;
  text-align: right !important;
  color: #b3bbc2;
  font-size: 10px !important;
}

.accordionValue {
  border: #b3bbc2 solid 1px;
  border-style: solid;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

.accordionValue p {
  font-size: 12px !important;
  margin: 10px;
}

.head-text {
  font-weight: bolder !important;
  font-size: 25px;
}

/* FAQ PAGE 2 */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

/** =======================
   * Contenedor Principal
   ===========================*/

.accordion {
  width: 100% !important;
  margin: 30px auto 20px;
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: #b3bbc2 solid 1px;
  border-style: solid;
}

.accordion .link {
  cursor: pointer;
  display: block;
  padding: 15px 15px 15px 12px;
  color: #000000;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #b3bbc2;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
@media screen and (max-width: 767px) {
  .accordion .link {
    font-size: 12px;
  }
}

.accordion li:last-child .link {
  border-bottom: 0;
}

.accordion li i {
  position: absolute;
  top: 16px;
  left: 12px;
  font-size: 18px;
  color: #b3bbc2;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 12px;
}

.accordion li.open i {
  color: #b3bbc2;
}

.accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*Submenu*/
.submenu {
  display: none;
  background: white;
  font-size: 12px;
}

.submenu li {
  border-bottom: 1px solid #b3bbc2;
  padding: 15px 15px 15px 12px;
}

/*end*/

/* Style for the table headers */
th {
  cursor: pointer; /* Change cursor to pointer when hovering */
}

/* Style for the sorting arrows */
.sort-arrows {
  margin-left: 5px;
}

.sort-arrow {
  font-size: 9px; /* Adjust size as needed */
  color: grey; /* Default color for inactive arrows */
}

.sort-arrow.up.active,
.sort-arrow.down.active {
  color: red; /* Color for the active arrow */
}

.sort-arrow.up.inactive,
.sort-arrow.down.inactive {
  color: grey; /* Color for inactive arrows */
}

/* Hide the reservation detial column header */

.table-container {
  max-height: 400px; /* Set the desired height */
  overflow-y: auto; /* Enable vertical scrolling */
  border: 1px solid #ccc; /* Optional: Add border */
}

#myTable {
  width: 100%; /* Make sure the table takes up the full width of the container */
  border-collapse: collapse; /* Optional: Collapse borders for a cleaner look */
}

#myTable th,
td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #ddd; /* Optional: Add bottom border */
}
@media only screen and (max-width: 767px) {
  .ets-wishlist-product-image img {
    width: 500px !important; /* Adjust the width as needed */
    height: auto !important; /* Maintain aspect ratio */
  }
}