@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* Custom slider styling */
  .slider {
    -webkit-appearance: none;
    height: 8px;
    border-radius: 4px;
    background: #e5e7eb;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
  }

  .slider:hover {
    opacity: 1;
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5;
    cursor: pointer;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
  }

  .slider::-webkit-slider-thumb:hover {
    background: #4338ca;
  }

  .slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4f46e5;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.1);
  }

  .slider::-moz-range-thumb:hover {
    background: #4338ca;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 /* app/assets/stylesheets/listings.css */
 .listing-form {
   max-width: 800px;
   margin: 0 auto;
   padding: 20px;
 }

 .form-section {
   margin-bottom: 30px;
   padding: 20px;
   border: 1px solid #ddd;
   border-radius: 5px;
 }

 .form-section h2 {
   margin-top: 0;
   margin-bottom: 20px;
   color: #333;
 }

 .field {
   margin-bottom: 15px;
 }

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

 .field input[type="text"],
 .field input[type="number"],
 .field input[type="date"],
 .field select,
 .field textarea {
   width: 100%;
   padding: 8px;
   border: 1px solid #ddd;
   border-radius: 4px;
 }

 .field textarea {
   height: 100px;
 }

 .actions {
   text-align: right;
 }

 .actions input[type="submit"] {
   padding: 10px 20px;
   background-color: #007bff;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }

 .actions input[type="submit"]:hover {
   background-color: #0056b3;
 }

 .error-messages {
   color: #721c24;
   background-color: #f8d7da;
   border: 1px solid #f5c6cb;
   border-radius: 4px;
   padding: 15px;
   margin-bottom: 20px;
 }