/* Popup styles for file reporting */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 10px 0;
}

/* Popup content container */
.popup-content {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 500px; /* Slightly wider for better content display */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  text-align: left;
  min-height: 50vh;
  height: auto;
  overflow: auto;
}

/* Popup title */
.popup-content h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

/* Radio button group */
.radio-group label {
  display: block;
  font-size: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  color: #444;
}

/* Textarea styling */
textarea#details {
  width: 100%;
  height: 90px;
  margin-top: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  background-color: #f9f9f9;
  resize: none;
  transition: border-color 0.3s;
}

textarea#details:focus {
  border-color: #ef0a0e;
  outline: none;
}

/* Name and email input fields */
.name-email input {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  background-color: #f9f9f9;
  transition: border-color 0.3s;
}

.name-email input:focus {
  border-color: #ef0a0e;
  outline: none;
}

/* Submit button styling */
button.file-reporting {
  width: 100%;
  padding: 12px 20px;
  background-color: #ef0a0e;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button.file-reporting:hover {
  background-color: #d3090d;
}

/* Close popup when clicking outside */
.popup-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Enhanced file item styles for modern look */
.files-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 16px 0;
  align-items: stretch;
}

.file-item {
  width: 100%;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.file-item:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* File type and name styling */
.file-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #2c3e50;
  word-wrap: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* File date and description styling */
.file-date {
  color: #7f8c8d;
  font-size: 12px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.file-description {
  margin: 8px 0;
  font-size: 14px;
  color: #34495e;
  font-style: normal;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* File action buttons styling */
.file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.file-delete,
.file-report,
.file-edit,
.file-comment {
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  border: none;
  width: auto;
  font-weight: 500;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.file-delete {
  background-color: #e74c3c;
  color: #fff;
}

.file-report {
  background-color: #f39c12;
  color: #fff;
}

.file-edit {
  background-color: #2ecc71;
  color: #fff;
}

.file-comment {
  background-color: #3498db;
  color: #fff;
}

.file-delete:hover {
  background-color: #c0392b;
}

.file-report:hover {
  background-color: #e67e22;
}

.file-edit:hover {
  background-color: #27ae60;
}

.file-comment:hover {
  background-color: #2980b9;
}

/* File edit and comment popup styles */
.file-edit-popup,
.file-comment-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.file-edit-content,
.file-comment-content {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  position: relative;
}

.file-edit-content h2,
.file-comment-content h2 {
  margin: 0 0 16px 0;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  color: #333;
}

.file-edit-content label,
.file-comment-content label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 14px;
  color: #333;
}

.file-edit-content input,
.file-comment-content textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  background-color: #f9f9f9;
  transition: border-color 0.3s;
}

.file-edit-content input:focus,
.file-comment-content textarea:focus {
  border-color: #ef0a0e;
  outline: none;
}

.file-comment-content textarea {
  height: 100px;
  resize: none;
}

.file-comment-content textarea::placeholder {
  color: #777;
}

.file-edit-actions,
.file-comment-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.file-edit-save,
.file-edit-cancel,
.file-comment-save,
.file-comment-cancel {
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  font-size: 14px;
  font-weight: 500;
  width: 48%;
  transition: background-color 0.3s;
  color: #fff;
}

.file-edit-save,
.file-comment-save {
  background-color: #28a745;
}

.file-edit-cancel,
.file-comment-cancel {
  background-color: #dc3545;
}

.file-edit-save:hover,
.file-comment-save:hover {
  background-color: #218838;
}

.file-edit-cancel:hover,
.file-comment-cancel:hover {
  background-color: #c82333;
}

/* File comments section */
.file-comments {
  margin-top: 12px;
  padding: 12px;
  background-color: #fafafa;
  border-radius: 8px;
  border: 1px solid #eee;
}

.file-comments h4 {
  margin: 0 0 12px 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.file-comments ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.file-comments li {
  margin-bottom: 8px;
  font-size: 14px;
  color: #444;
  padding: 8px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #eee;
}

.file-comments li small {
  display: block;
  color: #777;
  font-size: 12px;
  margin-top: 4px;
}

/* Responsive styles */
@media (max-width: 767px) {
  .files-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .file-item {
    padding: 12px;
  }

  .popup-content,
  .file-edit-content,
  .file-comment-content {
    width: 95%;
    max-width: none;
    padding: 20px;
    min-height: auto;
  }

  .popup-content h2,
  .file-edit-content h2,
  .file-comment-content h2 {
    font-size: 20px;
  }

  button.file-reporting,
  .file-edit-save,
  .file-edit-cancel,
  .file-comment-save,
  .file-comment-cancel {
    font-size: 14px;
    padding: 10px 16px;
  }

  .file-delete,
  .file-report,
  .file-edit,
  .file-comment {
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
  }

  .file-edit-actions,
  .file-comment-actions {
    flex-direction: column;
    gap: 8px;
  }

  .file-edit-save,
  .file-edit-cancel,
  .file-comment-save,
  .file-comment-cancel {
    width: 100%;
  }
}

/* Additional mobile optimizations */
@media (max-width: 480px) {
  .files-list {
    grid-template-columns: 1fr;
  }

  .file-item {
    width: 100%;
  }

  .popup-content,
  .file-edit-content,
  .file-comment-content {
    padding: 16px;
  }

  .file-comment-content textarea {
    height: 80px;
  }
}

/* Theme Name: Hello Elementor Child */
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
  display: none;
}

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
  width: 100%;
}

[type="button"],
[type="submit"],
button {
  width: 100%;
  border: 1px solid #ef0a0e;
  color: white;
}

[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
  background-color: #ef0a0e;
}

a {
  color: #ef0a0e;
}

.woocommerce div.product .product_title,
.woocommerce div.product .price {
  margin-bottom: 0px !important;
}

span.dz-button-icon svg {
  height: 34px;
  width: 38px;
}

.product_meta {
  display: none;
}

.wpo-field label {
  margin-bottom: 10px !important;
}

.wpo-file-dropzone.dropzone {
  margin-bottom: 10px;
}

.wpo-dropzone-preview {
  display: none;
}

strong.product-quantity {
  display: none;
}

ul.wc-item-meta {
  padding: 0;
}

ul.wc-item-meta ul {
  display: flex;
  flex-direction: column;
}

h2.product_text {
  margin: 0 0 20px !important;
}

.product-price {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: normal;
}

.product-des {
  margin-bottom: 20px;
}

a.button.acc_btn {
  color: white !important;
  background: black !important;
}

/* Add this new CSS for the PIN input form layout */
form.vpc_form {
  max-width: 200px;
  border-radius: 12px;
}

form.vpc_form label h1 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

/* Create a flex container for the input and button */
form.vpc_form .pin-input-container {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  align-items: flex-start;
}

/* Style the input field */
form.vpc_form input#view_pin {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
}

form.vpc_form input#view_pin:focus {
  border-color: #ef0a0e;
  box-shadow: 0 0 0 2px rgba(239, 10, 14, 0.1);
  outline: none;
  background-color: #fff;
}

/* Style the button */
form.vpc_form button#view_files_btn {
  padding: 7px 20px;
  background-color: #c3a15f;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

form.vpc_form button#view_files_btn:hover {
  background-color: #d3090d;
}

/* Style the example text */
form.vpc_form p 
  font-size: 14px;
  color: #666;
  font-style: italic;
}

/* Add responsive styles */
@media (max-width: 480px) {
  form.vpc_form .pin-input-container {
    flex-direction: column;
  }
  
  form.vpc_form button#view_files_btn {
    width: 100%;
  }
}

.vpc_form label,
.vpc_form input {
  margin-bottom: 10px;
}

.vpc_form button.button {
  background-color: #ef0a0e;
  border: none;
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.vpc_form button.button:hover {
  background-color: #d3090d;
}

form.woocommerce-ResetPassword.lost_reset_password {
  margin: 0 auto;
}

.file-item audio {
  max-width: 100%;
  width: 100%;
  margin-top: 10px;
  border-radius: 6px;
}

audio.wcuf_audio_control {
  width: 100%;
}

.wcuf_cart_preview_container {
  display: block !important;
}

.fancybox-caption__body {
  display: none;
}

.rem_bg:has(.wpo-files-list) {
  background-image: none !important;
}

.woocommerce-ResetPassword.lost_reset_password .woocommerce-form-row {
  width: 100% !important;
}

.woocommerce-ResetPassword.lost_reset_password .woocommerce-Input {
  border: 1px solid #c09e5e !important;
}

.wc-lost-password-reset-sent .elementor-location-footer {
  display: none !important;
}

.woocommerce-edit-address .signinbtn,
.woocommerce-edit-account .signinbtn,
.woocommerce-orders .signinbtn,
.woocommerce-view-order .signinbtn,
.woocommerce-dashboard .signinbtn,
.wc-my-account-file-uploads .signinbtn,
.wc-my-account-upload-images .signinbtn,
.single-product .signinbtn {
  display: none !important;
}