/* Remove default browser focus outlines and selection highlights for all input elements */
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* Remove the blue highlight/selection border that appears on focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Specifically target phone input fields */
input[type="tel"]:focus,
input[type="phone"]:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

/* Remove any webkit-specific focus styles */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove focus ring on all focusable elements */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure our custom focus styles take precedence */
.custom-focus-border {
  border-color: var(
    --lc-success
  ) !important; /* Use CSS variable instead of hard-coded color */
}

/* Web-specific styles for place order item cards */
.place-order-item-card {
  width: 100% !important;
  max-width: none !important; /* Remove max-width constraint for full width usage */
}

/* Ensure text wrapping for item names and descriptions */
.place-order-item-text {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  flex: 1 !important; /* Allow text to take available space */
}

/* Compact layout for place order items on web */
.place-order-item-container {
  padding: 6px 10px !important; /* Reduced padding for more compact design */
  margin: 2px 0 !important; /* Reduced margin */
}

/* Reduce image sizes by 30% for more compact layout */
.place-order-item-image {
  width: 42px !important; /* Reduced from 60px (30% reduction) */
  height: 42px !important; /* Reduced from 60px (30% reduction) */
  object-fit: cover !important;
  border-radius: 4px !important; /* Slightly smaller border radius */
}

/* Price and measurement unit container */
.place-order-price-container {
  max-width: 100px !important;
  text-align: right !important;
}

/* Cart item image fix for RN Web + expo-image */
/* Target the expo-image wrapper via a class applied on the Image component */
.cart-item-image {
  position: relative;
  overflow: hidden; /* clip inner img to rounded corners provided by RN style */
}
/* Force the inner <img> to render and fill the square */
.cart-item-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  opacity: 1 !important;
  display: block !important;
  z-index: 1 !important;
}

/* Seller name styling with proper wrapping */
.place-order-seller-name {
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Responsive adjustments for mobile web */
@media (max-width: 750px) {
  .place-order-item-card {
    width: 100% !important;
    margin: 0 !important; /* Remove side margins for full width */
  }

  .place-order-item-container {
    padding: 4px 6px !important; /* Even more compact on mobile */
  }

  .place-order-item-image {
    width: 35px !important; /* 30% reduction from 50px */
    height: 35px !important; /* 30% reduction from 50px */
  }
}

/* Ensure proper text wrapping in React Native Web */
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Compact button styling for place order */
.place-order-button-compact {
  padding: 6px 16px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}