/* BodyRub Theme Custom Styles */

/* Font Display Optimization - Override FontAwesome to prevent invisible text */
/* This ensures text is visible immediately while FontAwesome loads (prevents FOIT) */
/* Note: favorite_items plugin FontAwesome CDN load has been commented out - using Osclass core FontAwesome instead */
/* CRITICAL: Use absolute URLs to main domain (not CDN) to avoid CORS issues */
@font-face {
  font-family: 'FontAwesome';
  src: url('https://bodyrubpage.com/oc-includes/osclass/gui/css/font-awesome-4.1.0/fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('https://bodyrubpage.com/oc-includes/osclass/gui/css/font-awesome-4.1.0/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'),
       url('https://bodyrubpage.com/oc-includes/osclass/gui/css/font-awesome-4.1.0/fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'),
       url('https://bodyrubpage.com/oc-includes/osclass/gui/css/font-awesome-4.1.0/fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'),
       url('https://bodyrubpage.com/oc-includes/osclass/gui/css/font-awesome-4.1.0/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Show fallback font immediately, swap when FontAwesome loads */
}

/* Base HTML & Body */
html,body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  height:100%;
  background-color:#f8fafc;
}

/* Page Content Wrapper - Responsive padding for fixed header */
.page-content-wrapper {
  padding-top: 0; /* Mobile: no padding (header is not fixed) */
}

@media (min-width: 768px) {
  .page-content-wrapper {
    padding-top: 50px; /* Desktop: padding for fixed header */
  }
  
  /* Remove padding-top from content when breadcrumbs are present */
  body:has(.breadcrumb-wrapper) .page-content-wrapper {
    padding-top: 0;
  }
}


/* Line Clamp */
.line-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

/* Horizontal Scroll Wrapper */
.horizontal-scroll-wrapper{
  position:relative;
}

/* Dot Indicators */
.dot-indicator{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#e2e8f0;
  transition:background 0.3s;
}

.dot-indicator.active{
  background:#10b981;
}

/* Carousel Dots */
.carousel-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:12px 0;
}


/* Override Tailwind's text-sm class on form inputs (CRITICAL for iOS zoom prevention) */
@media (max-width: 767px) {
  /* Target inputs/selects/textarea with text-sm class - highest specificity */
  body input[type="text"].text-sm,
  body input[type="email"].text-sm,
  body input[type="password"].text-sm,
  body input[type="tel"].text-sm,
  body input[type="url"].text-sm,
  body input[type="number"].text-sm,
  body input[type="search"].text-sm,
  body textarea.text-sm,
  body select.text-sm,
  /* Also target without type selector for maximum coverage */
  body .text-sm[type="text"],
  body .text-sm[type="email"],
  body .text-sm[type="password"],
  body .text-sm[type="tel"],
  body .text-sm[type="url"],
  body .text-sm[type="number"],
  body .text-sm[type="search"] {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }
}

/* Form Inputs - Base Styles (Mobile: 16px to prevent iOS zoom) */
@media (max-width: 767px) {
  .form-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background-color: #ffffff;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

/* Desktop: Smaller font size for compact design */
@media (min-width: 768px) {
.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
  input[type="search"],
textarea,
select {
    font-size: 0.875rem !important; /* 14px */
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    background-color: #ffffff;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}

.form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.form-input:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  border-color: #94a3b8;
}

textarea {
  min-height: 100px !important;
  resize: vertical !important;
  font-family: inherit;
  line-height: 1.5;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.form-label,
label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  margin-bottom: 0.5rem;
}

.form-checkbox,
input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  color: #10b981;
  border-color: #cbd5e1;
  border-radius: 0.25rem;
  cursor: pointer;
  accent-color: #10b981;
}

.form-checkbox:focus,
input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

input[type="radio"] {
  width: 1rem;
  height: 1rem;
  color: #10b981;
  border-color: #cbd5e1;
  cursor: pointer;
  accent-color: #10b981;
}

input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

/* Buttons */
.btn-primary {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(to right, #10b981, #059669);
  color: white;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: background-color 0.2s;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background: linear-gradient(to right, #059669, #047857);
}

.btn-secondary {
  width: 100%;
  padding: 0.75rem 1.5rem;
  background-color: #6b7280;
  color: white;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: background-color 0.2s;
  border: none;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #4b5563;
}

/* Card Styles */
.card {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  padding: 2rem;
}

.card-shadow {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  padding: 2rem;
}

/* Spacing Utilities */
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

/* Text Styles */
.text-primary { color: #10b981; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-900 { color: #0f172a; }

/* User Dashboard Sidebar - Ensure visibility on desktop */
@media (min-width: 1024px) {
  #user-sidebar-desktop {
    display: block !important;
  }
}

@media (max-width: 1023px) {
  #user-sidebar-desktop {
    display: none !important;
  }
}

/* Style ALL user_menu items consistently (theme + plugins) */
#user-sidebar-desktop .user_menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#user-sidebar-desktop .user_menu li a {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

#user-sidebar-desktop .user_menu li a:hover {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
}

#user-sidebar-desktop .user_menu li a.active,
#user-sidebar-desktop .user_menu li.active a {
  background-color: #d1fae5 !important;
  color: #047857 !important;
}

#user-sidebar-desktop .user_menu li a i.fa {
  font-size: 1rem;
  width: 1.25rem;
  text-align: center;
}

/* Style plugin menu items in mobile header menu */
#mobileMenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mobileMenu li a {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

#mobileMenu li a:hover {
  background-color: #f1f5f9 !important;
  color: #059669 !important;
}

#mobileMenu li a.active,
#mobileMenu li.active a {
  background-color: #d1fae5 !important;
  color: #047857 !important;
}

#mobileMenu li a i.fa {
  font-size: 1.25rem;
  width: 1.25rem;
  text-align: center;
}

/* Favorite Heart Icon - Theme-specific styling (plugin CSS handles base SVG) */
.fi_make_favorite {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  overflow: visible !important;
}

/* Ensure SVG heart icons display correctly - override any cached FontAwesome */
.fi_make_favorite span {
  font-family: inherit !important;
  font-size: 0 !important;
  color: transparent !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  position: relative !important;
  line-height: 0 !important;
}

.fi_make_favorite span::before {
  content: '' !important;
  font-family: inherit !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8' stroke='%2394a3b8' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.fi_make_favorite:hover span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444' stroke='%23ef4444' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.fi_make_favorite.is_favorite span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444' stroke='%23ef4444' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.fi_make_favorite.is_favorite:hover span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626' stroke='%23dc2626' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
}

/* Favorite Heart on Main Image - Large Size */
.mainImage .absolute {
  position: absolute !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.mainImage .fi_make_favorite {
  position: relative !important;
  z-index: 31 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 50% !important;
  padding: 10px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.mainImage .fi_make_favorite span {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  position: relative !important;
  visibility: visible !important;
}

.mainImage .fi_make_favorite span::before {
  content: '' !important;
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transition: all 0.2s !important;
  /* Large heart SVG for main image - default (outline gray) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.mainImage .fi_make_favorite:hover span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.mainImage .fi_make_favorite.is_favorite span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ef4444' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
}

.mainImage .fi_make_favorite.is_favorite:hover span::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dc2626' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'%3E%3C/path%3E%3C/svg%3E") !important;
}

@media (min-width: 768px) {
  .mainImage .fi_make_favorite {
    padding: 14px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    width: 56px !important;
    height: 56px !important;
  }
  .mainImage .fi_make_favorite span {
    width: 28px !important;
    height: 28px !important;
  }
  .mainImage .fi_make_favorite span::before {
    font-size: 28px !important;
    line-height: 28px !important;
    width: 28px !important;
    height: 28px !important;
  }
}

/* Pagination Styles (Backpagegals Style) */
.paginate {
  text-align: center;
  clear: both;
  margin: 25px 0;
  float: left;
  width: 100%;
}

.paginate ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.paginate ul li {
  display: inline-block;
  margin: 0;
}

.paginate ul li a,
.paginate ul li span {
  display: inline-block;
  padding: 8px 12px;
  min-width: 38px;
  text-align: center;
  text-decoration: none;
  color: #374151;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  transition: all 0.2s ease;
}

.paginate ul li a:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
  color: #111827;
}

.paginate ul li .searchPaginationSelected {
  background-color: #10b981;
  color: #ffffff;
  border-color: #10b981;
  font-weight: 600;
  cursor: default;
}

.paginate ul li .searchPaginationPrev,
.paginate ul li .searchPaginationNext,
.paginate ul li .searchPaginationLast {
  padding: 8px 10px;
}

.paginate ul li .searchPaginationPrev i,
.paginate ul li .searchPaginationNext i,
.paginate ul li .searchPaginationLast i {
  font-size: 14px;
}

.paginate ul li .searchPaginationNonSelected:not(a) {
  border-color: transparent;
  background-color: transparent;
  cursor: default;
  padding: 8px 4px;
}

/* First and Last button styles */
.paginate ul li .list-first {
  margin-right: 8px;
}

.paginate ul li .list-last {
  margin-left: 8px;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .paginate ul {
    gap: 2px;
  }
  
  .paginate ul li a,
  .paginate ul li span {
    padding: 6px 8px;
    min-width: 34px;
    font-size: 12px;
  }
}

/* Breadcrumbs Styling */
.breadcrumb-wrapper {
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding-top: 0; /* Mobile: no padding (header is not fixed) */
}

@media (min-width: 768px) {
  .breadcrumb-wrapper {
    padding-top: 50px; /* Desktop: padding for fixed header */
  }
}

.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.breadcrumb a {
  color: #475569;
  text-decoration: none;
  transition: color 0.2s;
  font-size: 0.875rem;
}

.breadcrumb a:hover {
  color: #10b981;
  text-decoration: underline;
}

.breadcrumb .breadcrumb.root a {
  color: #64748b;
}

.breadcrumb .breadcrumb.last {
  color: #334155;
  font-weight: 500;
}

.breadcrumb .breadcrumb.last span {
  color: #334155;
}

.breadcrumb .breadcrumb.separator {
  color: #94a3b8;
  margin: 0 0.25rem;
  font-size: 0.75rem;
}

.breadcrumb .breadcrumb.separator span {
  color: #94a3b8;
}

.breadcrumb .breadcrumb-data-vocabulary-wrapper {
  display: inline-flex;
  align-items: center;
}

.breadcrumb .breadcrumb-data-vocabulary-wrapper a {
  color: #475569;
}

.breadcrumb .breadcrumb-data-vocabulary-wrapper a:hover {
  color: #10b981;
}

/* Category breadcrumbs */
.breadcrumb .breadcrumb.category a {
  color: #475569;
}

.breadcrumb .breadcrumb.category a:hover {
  color: #10b981;
}

/* Location breadcrumbs */
.breadcrumb .breadcrumb.region a,
.breadcrumb .breadcrumb.city a {
  color: #475569;
}

.breadcrumb .breadcrumb.region a:hover,
.breadcrumb .breadcrumb.city a:hover {
  color: #10b981;
}

/* Mobile breadcrumbs */
@media (max-width: 767px) {
  .breadcrumb-wrapper {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .breadcrumb {
    font-size: 1rem !important;
    gap: 0.25rem;
    line-height: 1.5;
  }
  
  .breadcrumb a {
    font-size: 1rem !important;
  }
  
  .breadcrumb .breadcrumb.separator {
    font-size: 0.875rem !important;
    margin: 0 0.25rem;
  }
  
  .breadcrumb .breadcrumb-data-vocabulary-wrapper a {
    font-size: 1rem !important;
  }
  
  .breadcrumb .breadcrumb.category a,
  .breadcrumb .breadcrumb.region a,
  .breadcrumb .breadcrumb.city a {
    font-size: 1rem !important;
  }
}

/* Item Details Page - Mobile Font Size Adjustments (Google Mobile-Friendly) */
@media (max-width: 767px) {
  /* Main Title - Increase from text-xl (20px) to 24px */
  body.item-details-page section h1,
  body.item-details-page h1.text-xl {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.4 !important;
  }
  
  /* Section Headings (Description, Attributes, Comments) - Increase from text-lg (18px) to 20px */
  body.item-details-page h2.text-lg,
  body.item-details-page h2 {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.4 !important;
  }
  
  /* Seller Name - Increase from text-lg (18px) to 20px */
  body.item-details-page h4.text-lg {
    font-size: 1.25rem !important; /* 20px */
    line-height: 1.4 !important;
  }
  
  /* Meta Information Row - Increase from text-xs (12px) to 14px */
  body.item-details-page section .text-xs {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5 !important;
  }
  
  /* Description Content - Increase from text-sm (14px) to 16px */
  body.item-details-page div.text-sm.text-slate-700,
  body.item-details-page .text-sm.text-slate-700 {
    font-size: 1rem !important; /* 16px */
    line-height: 1.6 !important;
  }
  
  /* All text-sm elements in main content - Increase to 16px */
  body.item-details-page main .text-sm,
  body.item-details-page main p.text-sm,
  body.item-details-page main div.text-sm,
  body.item-details-page main span.text-sm {
    font-size: 1rem !important; /* 16px */
    line-height: 1.6 !important;
  }
  
  /* Comment Text */
  body.item-details-page .text-sm.text-slate-700.leading-relaxed {
    font-size: 1rem !important; /* 16px */
    line-height: 1.6 !important;
  }
  
  /* Comment Author Names */
  body.item-details-page h3.text-sm {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5 !important;
  }
  
  /* Badges (Premium, Professional) - Increase from text-[10px] to 12px */
  body.item-details-page span[class*="text-\[10px\]"] {
    font-size: 0.75rem !important; /* 12px */
  }
  
  /* Status Banners */
  body.item-details-page .page-content-wrapper p.text-xs {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5 !important;
  }
  
  /* Seller Information Card Headings */
  body.item-details-page .text-sm.font-bold.uppercase {
    font-size: 0.875rem !important; /* 14px */
  }
  
  /* Phone Number Links */
  body.item-details-page a[href^="tel:"] {
    font-size: 1.125rem !important; /* 18px */
  }
  
  /* Tab Buttons - Increase font and padding */
  body.item-details-page button[id$="Tab"],
  body.item-details-page button.text-sm.font-semibold {
    font-size: 1rem !important; /* 16px */
    padding: 0.875rem 1rem !important;
    min-height: 44px !important;
  }
  
  /* Form Labels */
  body.item-details-page label.text-xs {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5 !important;
  }
  
  /* Form Inputs - Ensure 16px to prevent zoom on iOS */
  body.item-details-page input[type="text"],
  body.item-details-page input[type="email"],
  body.item-details-page input[type="tel"],
  body.item-details-page input[type="password"],
  body.item-details-page textarea,
  body.item-details-page select {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5 !important;
  }
  
  /* Buttons - Increase from text-sm (14px) to 16px and ensure touch targets */
  body.item-details-page button.text-sm,
  body.item-details-page button[type="submit"].text-sm,
  body.item-details-page a.text-sm.button {
    font-size: 1rem !important; /* 16px */
    padding: 0.75rem 1.25rem !important;
    min-height: 44px !important;
  }
  
  /* Comment Count */
  body.item-details-page .text-base.font-normal {
    font-size: 1.125rem !important; /* 18px */
  }
  
  /* Attribute Labels and Values */
  body.item-details-page .text-sm.font-medium,
  body.item-details-page .text-sm.font-semibold {
    font-size: 1rem !important; /* 16px */
    line-height: 1.5 !important;
  }
  
  /* "No images available" */
  body.item-details-page .text-slate-400.text-sm {
    font-size: 1rem !important; /* 16px */
  }
  
  /* All text-xs elements - Increase to 14px */
  body.item-details-page .text-xs,
  body.item-details-page span.text-xs,
  body.item-details-page p.text-xs,
  body.item-details-page label.text-xs,
  body.item-details-page a.text-xs,
  body.item-details-page div.text-xs {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.5 !important;
  }
  
  /* Manage Listing Buttons */
  body.item-details-page a.text-xs.font-medium {
    padding: 0.625rem 0.875rem !important;
    min-height: 36px !important;
  }
}


/* ============================================
   PREVENT iOS AUTO-ZOOM ON FORM INPUTS
   Site-wide fix - High specificity to override Tailwind utility classes
   Loads early in <head> to prevent CLS (Cumulative Layout Shift)
   ============================================ */
@media (max-width: 767px) {
  /* Target form inputs directly with high specificity to override Tailwind classes */
  body input[type="text"],
  body input[type="email"],
  body input[type="password"],
  body input[type="tel"],
  body input[type="url"],
  body input[type="number"],
  body input[type="search"],
  body textarea,
  body select,
  /* Also target with class selectors for maximum specificity */
  body input[type="text"].form-input,
  body input[type="email"].form-input,
  body input[type="password"].form-input,
  body input[type="tel"].form-input,
  body textarea.form-input,
  body select.form-input {
    font-size: 16px !important; /* Use px instead of rem for maximum compatibility */
    -webkit-text-size-adjust: 100% !important;
  }
}

/* Logo image - maintain aspect ratio to prevent vertical stretching on mobile */
header picture img,
header img[alt*="BodyRubPage"] {
  object-fit: contain !important;
  object-position: left center;
}

/* Hamburger menu button - mobile only styles */
@media (max-width: 767px) {
  button#menuBtn {
    font-size: 2.25rem !important; /* 36px */
    margin-left: 1rem !important;
    margin-top: -5px !important;
    padding-left: 0.75rem !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Item details page - Floating gallery scrollbar and fixed dimensions */
.item-details-page .grid.grid-cols-2[style*="max-height"] {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.item-details-page .grid.grid-cols-2[style*="max-height"]::-webkit-scrollbar {
  width: 8px;
}

.item-details-page .grid.grid-cols-2[style*="max-height"]::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.item-details-page .grid.grid-cols-2[style*="max-height"]::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.item-details-page .grid.grid-cols-2[style*="max-height"]::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Gallery container - prevent layout shift */
.item-details-page .gallery-container {
  min-width: 0;
  flex-shrink: 0;
  width: 100%;
}

@media (min-width: 1024px) {
  .item-details-page .gallery-container {
    width: 340px !important;
    max-width: 340px !important;
    flex-basis: 340px !important;
  }
}

.item-details-page .gallery-grid {
  width: 100%;
  column-gap: 0.5rem !important;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  padding-bottom: 0.5rem !important;
}

@media (min-width: 768px) {
  .item-details-page .gallery-grid {
    gap: 0.75rem !important;
    row-gap: 0.75rem !important;
    column-gap: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

/* Gallery grid - fixed height for 6 images on desktop */
@media (min-width: 1024px) {
  .item-details-page .gallery-grid {
    max-height: 474px !important;
    overflow-y: auto;
  }
}

/* Gallery thumbnails - fixed width, height adjusts automatically */
.item-details-page .gallery-grid a {
  display: block;
  line-height: 0;
  height: auto;
  align-self: start;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
}

/* Mobile: Add bottom spacing between gallery rows */
@media (max-width: 767px) {
  .item-details-page .gallery-grid a {
    margin-bottom: 0.5rem !important;
  }
}

.item-details-page .gallery-grid a img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important;
}

/* Modal styles */
[id$="Modal"] {
  transition: opacity 0.3s ease-in-out;
}

[id$="Modal"]:not(.hidden) {
  display: flex;
}

[id$="Modal"] .bg-opacity-50 {
  transition: opacity 0.3s ease-in-out;
}

/* Modal panel - optimum width and centered */
[id$="Modal"] .relative.max-w-lg {
  max-width: 32rem !important; /* 512px */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Mobile text ads - ensure hidden on desktop (768px and above) */
@media (min-width: 768px) {
  /* Target the mobile text ads container - it has md:hidden class but ensure it's hidden */
  div[class*="md:hidden"][class*="flex"][class*="gap-2"] {
    display: none !important;
  }
}

/* Item Details Page - Mobile Styles */
@media (max-width: 767px) {
  .item-details-page h3.text-xl {
    font-size: 1.5rem !important; /* 24px */
    line-height: 1.4 !important;
    text-align: center;
  }
  
  /* Mobile: Phone number - 24px and bold */
  .item-details-page .phone-number-mobile,
  .item-details-page a[href^="tel:"].phone-number-mobile {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
  }
}

/* Item Details Page - Desktop Styles */
@media (min-width: 768px) {
  /* Desktop: Phone number - 18px (medium weight) */
  .item-details-page .phone-number-mobile,
  .item-details-page a[href^="tel:"].phone-number-mobile {
    font-size: 18px !important;
    font-weight: 500 !important;
  }
  
  /* Desktop: Location and phone number - left align */
  .item-details-page .flex.items-center.gap-1\.5 {
    justify-content: flex-start !important;
  }
  
  /* Desktop: Contact & Share buttons - left align */
  .item-details-page .flex.flex-wrap.gap-2 {
    justify-content: flex-start !important;
  }
}

/* Favorite Button Heart Icon - Red when favorited, Grey when not */
.save-favorite-btn .favorite-heart-icon {
  transition: fill 0.2s ease;
}

/* Default state: Grey heart (not favorited) */
.save-favorite-btn .favorite-heart-icon {
  fill: #94a3b8; /* slate-400 */
}

.save-favorite-btn:hover .favorite-heart-icon {
  fill: #64748b; /* slate-500 */
}

/* Favorited state: Red heart */
.save-favorite-btn.is-favorited .favorite-heart-icon {
  fill: #ef4444; /* red-500 */
}

.save-favorite-btn.is-favorited:hover .favorite-heart-icon {
  fill: #dc2626; /* red-600 */
}

/* Hide scrollbar for horizontal scroll containers */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

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

/* Footer gradient text branding */
footer a.no-bg {
  background: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}

footer a.no-bg span.bg-clip-text,
footer a.no-bg span[class*="bg-clip-text"],
footer a.no-bg span[class*="bg-gradient"] {
  background-image: linear-gradient(to right bottom, rgb(52, 211, 153), rgb(16, 185, 129), rgb(13, 148, 136)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  display: inline-block;
  background-color: transparent !important;
  font-weight: 900 !important;
}

/* Contact Form Styling */
#contact .input-box select,
#contact .input-box textarea {
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid rgb(203, 213, 225);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  transition: all 0.2s;
}

#contact .input-box select:focus,
#contact .input-box textarea:focus {
  outline: none;
  ring: 2px;
  ring-color: rgb(16, 185, 129);
  border-color: rgb(16, 185, 129);
}

#contact .input-box textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}

#contact .input-box input[type="file"] {
  display: none;
}

#contact #error_list li {
  margin-bottom: 0.5rem;
}

#contact #error_list:not(.hidden) {
  display: block;
}

/* Flash Message Styling */
.flashmessage {
  position: relative;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.flashmessage-ok {
  background-color: rgb(220, 252, 231);
  border: 1px solid rgb(167, 243, 208);
  color: rgb(5, 46, 22);
}

.flashmessage-error {
  background-color: rgb(254, 242, 242);
  border: 1px solid rgb(254, 202, 202);
  color: rgb(127, 29, 29);
}

.flashmessage-info {
  background-color: rgb(239, 246, 255);
  border: 1px solid rgb(191, 219, 254);
  color: rgb(30, 58, 138);
}

.flashmessage .btn.ico-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flashmessage .btn.ico-close:hover {
  opacity: 1;
}