.wau-auto-width{
  width: 100%;
  max-width: 400px;
}

.wau_wrapper_div {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e2e2e2;
  background-color: #f9f9f9;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Upload container styles */
.wau-uploads-container {
  margin-bottom: 15px;
}

/* Upload item styles */
.wau-upload-item {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

/* Animation for removing upload items */
.wau-upload-item.wau-removing {
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.3s ease;
}

.wau-upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 8px;
}

.wau-upload-label {
  font-weight: bold;
  margin-right: 10px;
}

.wau-file-count {
  color: #888;
  font-size: 0.9em;
}

.wau-upload-inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 15px;
}

.wau-upload-inputs input[type="file"] {
  flex: 1;
  min-width: 250px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  background-color: #fff;
}

.wau-upload-inputs .wau-file-preview {
  width: 100%;
  margin-top: 5px;
}

/* Loading spinner animation */
.wau-upload-loading {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.wau-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s ease-in-out infinite;
  margin-right: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.wau-upload-loading span {
  color: #666;
  font-size: 14px;
}

.wau-preview-image-container {
  display: inline-block;
  margin-right: 10px;
  text-align: center;
  vertical-align: top;
  margin-top: 5px;
  border: 1px solid #eee;
  padding: 5px;
  border-radius: 4px;
  background-color: #fff;
}

.wau-preview-image {
  max-width: 100px; 
  max-height: 100px; 
  display: block;
  margin: 0 auto 5px;
  border: 1px solid #ddd;
}

.wau-filename {
  display: block; 
  font-size: 12px; 
  color: #666;
  overflow: hidden; 
  white-space: nowrap; 
  text-overflow: ellipsis; 
  max-width: 100px;
  margin-top: 3px;
}

.wau-remove-file {
  display: inline-block;
  margin-left: 10px;
  padding: 5px 10px;
  background-color: #f44336;
  color: white;
  border-radius: inherit;
  text-decoration: none;
  font-size: inherit;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.wau-remove-file:hover {
  background-color: #d32f2f;
  color: white;
}

/* Ensure the instruction fields display properly */
.wau-instructions-wrapper {
  display: block !important;
  margin-bottom: 15px;
  clear: both;
  width: 100%;
}

.wau-instructions-wrapper label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.wau-instructions-wrapper textarea {
  width: 100%;
  max-width: 400px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  font-family: inherit;
  display: block !important;
  min-height: 80px;
}

/* Add to cart button wrapper */
.wau-button-wrapper {
  margin-top: 15px;
  margin-bottom: 15px;
}

/* Stronger button styling that will better match theme buttons */
.wau-add-more-btn,
button.wau-add-more-btn {
  /* Keep some basic styles as fallback */
  background-color: #b1976b; /* A common theme color */
  color: white;
  /* But allow theme to override */
  background-color: var(--button-background-color, #b1976b) !important;
  color: var(--button-text-color, white) !important;
  font-family: inherit !important;
  border-radius: var(--button-border-radius, 4px) !important;
  border: var(--button-border, none) !important;
}

.wau-add-more-btn:hover,
button.wau-add-more-btn:hover {
  opacity: 0.9;
  background-color: var(--button-hover-color, #a98c5f) !important;
}

/* Add additional styles to ensure the file upload section is visible */
#wau_file_addon,
.wau-files {
  display: block !important;
  margin-bottom: 10px;
  width: 100%;
}

.wau_wrapper_div label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

/* Force display for elements that might be hidden by themes */
.wau_wrapper_div,
.wau-uploads-container,
.wau-upload-item,
.wau-upload-inputs,
.wau-file-preview {
  display: block !important;
}

/* Print Size Styling */
.wau-print-size-wrapper {
  margin-bottom: 15px;
}

.wau-print-size-wrapper label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.wau-print-size {
  width: 100%;
  max-width: 400px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background-color: #fff;
  height: auto;
  -webkit-appearance: menulist; /* Fixes dropdown styling on Safari */
  appearance: menulist; /* Fixes dropdown styling */
}

.wau-print-size:focus {
  border-color: #aaa;
  outline: none;
}

.wau-price-summary {
  padding: 10px 15px;
  background-color: #f5f9fd;
  border: 1px solid #cde;
  border-radius: 4px;
  margin: 15px 0;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: inline-block;
}

.wau-price-summary span {
  color: #0073aa;
}

/* File preview container */
#wau_file_previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

/* Individual file preview */
#wau_file_previews > div {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  background-color: #f9f9f9;
  position: relative;
  transition: all 0.2s ease;
}

#wau_file_previews > div:hover {
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* Single file preview */
#wau_file_preview_container {
  margin-top: 15px;
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  background-color: #f9f9f9;
}

/* File name display */
#wau_file_previews span {
  text-align: center;
  font-size: 12px;
  color: #333;
  margin-top: 5px;
}

/* Additional instructions textarea */
#wau_additional_instructions {
  width: 100%;
  max-width: 500px;
  min-height: 80px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
}

/* Cart item file preview */
.wau-cart-item-preview {
  margin: 5px 0;
  display: flex;
  align-items: center;
}

.wau-cart-item-preview img {
  border: 1px solid #eee;
  border-radius: 3px;
  padding: 2px;
  background: #fff;
  margin-right: 10px;
}

/* Style for when item is added to cart */
.wau-added-animation {
  animation: add-to-cart 0.5s ease;
}

@keyframes add-to-cart {
  0% { opacity: 0.5; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Responsive adjustments */
@media (max-width: 767px) {
  .wau_wrapper_div {
    padding: 10px;
  }
  
  .wau-upload-inputs {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .wau-upload-inputs input[type="file"] {
    margin-right: 0;
    width: 100%;
    max-width: 100%;
  }
  
  .wau-remove-file {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
  
  .wau-preview-image-container {
    margin-right: 0;
    margin-bottom: 10px;
    max-width: 120px;
  }
  
  .wau-auto-width,
  .wau-instructions-wrapper textarea,
  .wau-print-size {
    max-width: 100%;
  }
  
  .wau-add-more-btn {
    width: 100%;
    text-align: center;
  }
  
  /* Make dropdowns full width on mobile */
  select.wau-print-size {
    width: 100%;
    max-width: 100%;
  }
}

/* Handle currency display in the select options */
.wau-print-size option {
  font-size: 14px;
}

/* Override any theme styles that might break our selects */
body .wau-upload-item select.wau-print-size {
  height: auto !important;
  padding: 8px !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
  background-image: none !important;
}

/* Ensure that our select boxes show correctly */
body .wau-upload-item select.wau-print-size option {
  padding: 5px !important;
  background-color: white !important;
}