/* support.css */

/* General Page Styles */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa; /* Light background */
}

/* Container Styles */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* Form Styles */
form {
  background-color: #ffffff; /* White background for form */
  border: 1px solid #ddd; /* Light border */
  border-radius: 8px; /* Rounded corners */
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Form Inputs */
textarea.form-control {
  border-radius: 5px; /* Slightly rounded corners */
  border: 1px solid #ced4da; /* Match Bootstrap input styles */
  padding: 10px; /* Add padding for better UX */
  font-size: 16px; /* Larger font size for readability */
  resize: vertical; /* Allow vertical resizing only */
}

/* Form Button */
.button-container {
  margin-top: 20px; /* Space between fields and button */
  text-align: center; /* Center align the button */
}

button.btn-primary {
  border-radius: 5px; /* Rounded corners */
  font-size: 18px; /* Larger text for visibility */
  padding: 10px 20px; /* Adjust padding for balanced size */
  width: auto; /* Allow the button to fit the content */
  min-width: 100px; /* Set a reasonable minimum width */
  max-width: 200px; /* Prevent it from becoming too wide */
  transition: background-color 0.3s ease; /* Smooth hover effect */
  display: inline-block; /* Keep the button inline */
}

button.btn-primary:hover {
  background-color: #0056b3; /* Darker blue on hover */
  border-color: #004085; /* Match hover state */
}

/* Link Styles */
a.btn-link {
  font-size: 16px; /* Match font size with the rest of the form */
  color: #007bff; /* Bootstrap default link color */
  text-decoration: none;
  transition: color 0.3s ease; /* Smooth color transition */
}

a.btn-link:hover {
  color: #0056b3; /* Darker blue on hover */
  text-decoration: underline; /* Underline on hover */
}

#loading {
  position: fixed; 
  left: 50%; 
  padding: 10px; 
  display: none; 
}

.spinner-border {
  width: 3rem; 
  height: 3rem; 
}

/* === RTL support === */
html[dir="rtl"] body { direction: rtl; }

/* Inputs/areas should follow page direction and align naturally */
.rtl-aware { direction: inherit; text-align: start; }
.rtl-aware::placeholder { text-align: inherit; }

/* Keep visual “end” add-on (eye button) on the correct side in RTL */
html[dir="rtl"] .input-group { flex-direction: row-reverse; }
html[dir="rtl"] .input-group-append { margin-left: 0; margin-right: -1px; }

/* Buttons/links text alignment feels better on RTL */
html[dir="rtl"] .btn, html[dir="rtl"] .btn-link { text-align: right; }