/* ============================
   Global Styles for commissioninfo.html
   ============================ */
html, body {
  height: 100% !important; /* Force full height */
  margin: 0 !important;
  padding: 0 !important;
  /* Global fixed background for the commissions page */
  background: url('https://i.postimg.cc/WbhxScPV/Rainbow-dots.png') no-repeat center center fixed !important;
  background-attachment: fixed !important; /* Ensure background is fixed on scroll */
  background-size: cover !important; /* Ensure background covers the entire viewport */
}

body {
  font-family: 'Courier New', Courier, monospace; /* Retro, code-like font */
  line-height: 1.6;
}

/* ============================
   Main Commission Page Container (Styled like a store item)
   ============================ */
#commission-container {
  position: relative;
  max-width: 1100px; /* Max width for larger screens */
  margin: 20px auto; /* Centered with some top/bottom margin */
  padding: 40px;
  background: #FFFFFF; /* Opaque white background for readability */
  border-radius: 25px;
  border: 5px solid #90C67F; /* Contrasting border in secondary color */
  box-shadow: 0 0 30px rgba(228, 145, 166, 0.5); /* Soft shadow with primary color */
  text-align: center;
  color: #E18FA4; /* Default text color (primary theme color) */
}

/* Store-like content section within the main container */
.store-content {
  text-align: center;
  margin-bottom: 30px;
}

.store-content h1,
.store-content h2 {
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  letter-spacing: 1px;
}

.store-content h1 {
  color: #E18FA4; /* Primary theme color */
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); /* Simple text shadow */
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 1.5;
}

.store-content h2 {
  color: #90C67F; /* Secondary theme color */
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  margin-bottom: 30px;
  line-height: 1.5;
}

/* Centering for the main header image */
#commission-container > center {
  position: relative;
  margin-bottom: 40px;
  text-align: center;
}

#commission-container > center img {
  max-width: 80%; /* Responsive image sizing */
  display: inline-block;
  position: relative;
  z-index: 2; /* Ensure image is above any potential underlying elements */
  margin-bottom: 15px;
}

/* ============================
   Commission Category Section Styles
   ============================ */
.category {
  margin: 30px auto;
  padding: 20px;
  width: 90%;
  max-width: 1200px; /* Increased max-width for categories */
  background: #FFFFFF; /* Opaque white background */
  border: 3px solid #90C67F; /* Secondary color border */
  border-radius: 15px;
  color: #E18FA4; /* Primary theme text color */
  box-shadow: 0 4px 10px rgba(228, 145, 166, 0.2); /* Softer shadow */
}

/* Header for each commission category */
.header {
  position: relative; /* For positioning child elements like price */
  text-align: center;
  margin-bottom: 15px;
}

/* Center the category logo/icon (first image in header) */
.header img:first-child {
  display: inline-block;
  max-height: 100px; /* Limit height */
  margin: 0 10px; /* Spacing around the logo */
}

/* Position the price image (second image in header) to the right */
.header img:nth-child(2) {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%); /* Vertical centering */
  max-height: 100px;
}

/* ============================
   Scrollable Container for Media Items (Images/Videos)
   ============================ */
.scroll-container {
  background-color: #FFFFFF; /* Opaque white background */
  overflow-x: auto;  /* Enable horizontal scrolling */
  overflow-y: hidden; /* Disable vertical scrolling */
  white-space: nowrap; /* Keep items in a single line */
  padding: 10px;
  border: 2px solid #90C67F;
  border-radius: 8px;
  cursor: grab; /* Indicate draggable content */
  margin: 15px 0;
  line-height: 0; /* Helps with vertical alignment of inline-block children */
  font-size: 0; /* Remove spacing between inline-block elements */
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari) */
.scroll-container::-webkit-scrollbar {
  height: 12px; /* Height of the scrollbar */
}
.scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* Light grey track */
  border-radius: 6px;
}
.scroll-container::-webkit-scrollbar-thumb {
  background: #E18FA4; /* Primary theme color for the thumb */
  border-radius: 6px;
  border: 2px solid #f1f1f1; /* Creates padding around thumb */
}

/* Styles for media items (images, videos) within the scroll container */
.scroll-container img,
.scroll-container video {
  margin: 10px;
  max-height: 300px; /* Consistent maximum height for all media */
  border: 2px solid #90C67F;
  border-radius: 8px;
  transition: transform 0.3s ease; /* Smooth hover effect */
  display: inline-block; /* Arrange items horizontally */
  vertical-align: middle; /* Align items vertically */
  object-fit: contain; /* Ensure media fits within bounds while maintaining aspect ratio */
  height: 300px; /* Set a consistent height for alignment */
  width: auto; /* Allow width to adjust based on aspect ratio */
}

.scroll-container img:hover,
.scroll-container video:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

/* ============================
   Commission Request Form Styles
   ============================ */
#commission-form {
  margin: 30px auto;
  width: 90%;
  max-width: 800px; /* Max width for the form itself */
  text-align: center;
  position: relative;
  z-index: 600; /* Ensure form is above other elements if any overlays exist */
  background-color: #FFFFFF; /* Opaque white background */
  padding: 20px;
  border-radius: 15px;
  border: 3px solid #90C67F;
  box-shadow: 0 4px 10px rgba(228, 145, 166, 0.2);
}

#commission-form .form-header img {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}

/* General container style, might be used for form sections if any */
.container { /* Note: This is a generic class name, ensure it's scoped correctly if used elsewhere */
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

/* Label styling for form elements */
.container form label {
  display: block; /* Labels on their own line */
  margin-bottom: 5px;
  font-weight: bold;
  color: #E18FA4;
  text-align: left; /* Align label text to the left */
}

/* Styles for text inputs, select dropdown, and textarea for better readability and UX */
.container form input[type="text"],
.container form select,
.container form textarea {
  width: 100%; /* Full width of the parent container */
  padding: 12px;
  border: 1px solid #90C67F; /* Secondary color border */
  border-radius: 8px;
  margin-bottom: 16px;
  font-family: inherit; /* Use the body's font */
  background-color: #fff;   /* Ensure white background for high contrast */
  color: #000;              /* Dark text for readability */
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

/* Focus styles for form inputs */
.container form input[type="text"]:focus,
.container form select:focus,
.container form textarea:focus {
  border-color: #E18FA4; /* Primary theme color for focus indication */
  outline: none; /* Remove default browser outline */
}

/* Submit button styling */
.container form input[type="submit"] {
  background-color: #E18FA4; /* Primary theme color */
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.3s ease, transform 0.3s ease;
  opacity: 1; /* Ensure the button is fully opaque */
}

.container form input[type="submit"]:hover {
  background-color: #90C67F; /* Secondary theme color on hover */
  transform: translateY(-3px); /* Slight upward lift on hover */
}

/* Styles for header buttons (e.g., "Tip Maya on SE!") */
.header-buttons {
  text-align: right; /* Align buttons to the right */
  margin-bottom: 20px;
}

.header-buttons button {
  background-color: #E18FA4;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.header-buttons button:hover {
  background-color: #90C67F;
  transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #commission-container {
    padding: 20px;
    margin: 10px;
  }
  .category {
    padding: 15px;
    width: 95%;
  }
  #commission-form {
    padding: 15px;
    width: 95%;
  }
  .header img:nth-child(2) { /* Price image */
    position: static; /* Stack price below logo on small screens */
    transform: none;
    display: block;
    margin: 10px auto;
  }
  .container form input[type="text"],
  .container form select,
  .container form textarea {
    padding: 10px;
    font-size: 0.9rem;
  }
  .container form input[type="submit"] {
    padding: 10px 15px;
  }
  .store-content h1 {
    font-size: 20px;
  }
  .store-content h2 {
    font-size: 12px;
  }
}

/* ============================
   Notes:
   - All CRT effects have been removed
   - The scroll container always shows a custom-styled scrollbar and supports drag scrolling (via JavaScript).
   - The commission form now features a high-contrast white background and dark text for improved visibility.
   - Footer styles (in footer.css) are loaded separately and are not affected by these rules.
   ============================ */