/* Define primary colors */
:root {
  --primary-color: #1FB9B3; /* Blue */
  --secondary-color: #ffffff; /* White */
  --border-color: #888; /* Darker grey for better visibility */
  --input-bg-color: #f2f2f2; /* Light grey background for inputs */
  --error-color: #c00; /* Red */
}

/* WooCommerce Product Table Row Styling */
.wc-product-table-wrapper tr.odd td {
  background-color: var(--secondary-color);
}
.wc-product-table-wrapper tr.even td {
  background-color: var(--secondary-color);
}

/* General styling for product options */
.wpo-options-container {
  --wpo-input-focus-color: var(--primary-color);
  --wpo-input-border-radius: 4px;
  --wpo-input-border-color: var(--border-color);
  --wpo-input-background-color: var(--input-bg-color);
  --wpo-input-error-color: var(--error-color);
  --wpo-input-font-size: 15px;
  --wpo-description-font-size: 13px;
  --wpo-group-name-font-size: 1.5em;
  --wpo-option-name-font-size: 1.3em;
  --wpo-option-price-font-size: 14px;
  background-color: var(--secondary-color);
  padding: 20px;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Improved styling for Width and Height inputs */
.wpo-options-container .wpo-field.width input,
.wpo-options-container .wpo-field.height input {
  background-color: var(--input-bg-color) !important; /* Light grey */
  color: #333; /* Dark text */
  border: 1px solid var(--border-color); /* Darker grey border */
  padding: 10px; /* Add padding for better spacing */
  margin-bottom: 5px; /* Add spacing below */
  box-sizing: border-box;
}

/* Improved styling for Width Fraction and Height Fraction dropdowns */
.wpo-options-container .wpo-field.width-fraction select,
.wpo-options-container .wpo-field.height-fraction select {
  background-color: var(--input-bg-color) !important; /* Light grey */
  color: #333; /* Dark text */
  border: 1px solid var(--border-color); /* Darker grey border */
}

/* Focus styling for fields */
.wpo-options-container .wpo-field input:focus,
.wpo-options-container .wpo-field select:focus,
.wpo-options-container .wpo-field textarea:focus {
  border-color: var(--primary-color) !important;
  background-color: #e6f7f8 !important; /* Light blue for focus state */
  outline-color: var(--primary-color) !important;
}

/* General enhancements for visibility */
.wpo-options-container .wpo-field {
  margin-bottom: 10px; /* Add space between fields */
}

.wpo-options-container .wpo-field-description {
  font-size: var(--wpo-description-font-size);
  color: #555; /* Slightly darker grey for description */
  margin-bottom: 5px;
}

.wpo-options-container .wpo-group-name {
  font-size: var(--wpo-group-name-font-size);
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.wpo-options-container .wpo-option-name {
  font-size: var(--wpo-option-name-font-size);
  color: #333;
  margin-bottom: 5px;
}

.wpo-options-container .wpo-price-container {
  font-size: var(--wpo-option-price-font-size);
  color: var(--primary-color);
  margin-bottom: 10px;
}

/* Add subtle shadow and rounded corners for inputs */
.wpo-options-container .wpo-field input,
.wpo-options-container .wpo-field select,
.wpo-options-container .wpo-field textarea {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  transition: all 0.3s ease; /* Smooth transition for hover and focus states */
}

/* Hover effect for inputs and dropdowns */
.wpo-options-container .wpo-field input:hover,
.wpo-options-container .wpo-field select:hover,
.wpo-options-container .wpo-field textarea:hover {
  border-color: #555; /* Slightly darker border on hover */
}