/*
 * style.css
 *
 * This file contains the main styling for the application.
 * It uses a green-themed color palette and includes RTL support
 * for Arabic text flow.
 *
 * Contents:
 * 1.  Basic Reset & Global Styles
 * 2.  Typography
 * 3.  Layout Components (Container)
 * 4.  Form Elements (Inputs, Buttons)
 * 5.  Store Homepage Options Grid
 * 6.  Utility Styles (Icons, Shop Info)
 * 7.  Product Display Grid
 * 8.  Search Bar
 * 9.  Responsive Adjustments
 */

/* 1. Basic Reset & Global Styles */
/* Universal box-sizing for consistent layout calculations */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial', sans-serif; /* A common, sans-serif font for readability */
  background-color: #f4f4f4; /* Light grey background */
  color: #333; /* Dark grey for general text */
  direction: rtl; /* Sets text direction to Right-to-Left for Arabic content */
  line-height: 1.6; /* Improves readability of paragraphs */
  -webkit-font-smoothing: antialiased; /* Enhances font rendering on macOS/iOS */
  -moz-osx-font-smoothing: grayscale; /* Enhances font rendering on macOS/iOS */
}

/* 2. Typography */
h1, h2, h3 {
  text-align: center; /* Center-aligns all main headings */
  color: #28a745; /* Primary green color for headings */
  margin-bottom: 20px; /* Space below headings */
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }

p {
  margin-bottom: 10px; /* Standard spacing for paragraphs */
}

/* 3. Layout Components */
.container {
  max-width: 900px; /* Maximum width for the content area */
  margin: 40px auto; /* Centers the container horizontally with vertical margin */
  padding: 20px; /* Inner spacing within the container */
  background-color: #fff; /* White background for the content area */
  border-radius: 8px; /* Slightly rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

/* 4. Form Elements */
.form-group {
  margin-bottom: 20px; /* Spacing between form input groups */
}

label {
  display: block; /* Makes labels appear on their own line */
  margin-bottom: 8px; /* Space between label and input field */
  font-weight: bold; /* Bold text for labels */
}

/* Common styles for text inputs, textareas, and file inputs */
.input-field,
.text-field,
.file-input {
  width: 100%; /* Occupy full width of their parent container (due to box-sizing: border-box) */
  padding: 12px 10px; /* Vertical and horizontal inner spacing */
  margin-bottom: 10px; /* Space below the input field */
  border: 1px solid #28a745; /* Green border */
  border-radius: 6px; /* Rounded corners for inputs */
  font-size: 16px; /* Standard font size for input text */
  line-height: 1.5; /* Ensures consistent vertical alignment of text within inputs */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus effects */
}

/* Focus state for inputs */
.input-field:focus,
.text-field:focus {
  border-color: #218838; /* Darker green border on focus */
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Green glow effect on focus */
  outline: none; /* Removes default browser outline, replaced by custom box-shadow */
}

/* Specific style for textareas to allow vertical resizing only */
.text-field {
  resize: vertical;
  min-height: 80px; /* Minimum height for textareas */
}

/* General button styles */
.button {
  display: block; /* Makes the button take full width */
  width: 100%; /* Full width */
  padding: 12px 20px; /* Inner spacing */
  background-color: #28a745; /* Primary green background */
  color: white; /* White text color */
  border: none; /* No border */
  border-radius: 6px; /* Rounded corners */
  font-size: 18px; /* Larger font size for buttons */
  cursor: pointer; /* Indicates clickable element */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effects */
  font-weight: bold; /* Bold text */
  text-align: center; /* Center text within button */
}

/* Button hover state */
.button:hover {
  background-color: #218838; /* Darker green on hover */
  transform: translateY(-2px); /* Slight lift effect */
}

/* Specific style for Google Sign-In button */
.google-signin-button {
  background-color: #4285f4; /* Google blue color */
  margin-top: 15px; /* Space above the button */
}

/* Google Sign-In button hover state */
.google-signin-button:hover {
  background-color: #357ae8; /* Darker Google blue on hover */
}

/* 5. Store Homepage Options Grid */
.options-grid {
  display: grid; /* Uses CSS Grid for layout */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid columns */
  gap: 20px; /* Space between grid items */
  margin-top: 30px; /* Space above the grid */
}

.option-box {
  background: linear-gradient(135deg, #28a745, #218838); /* Green gradient background */
  color: white; /* White text color */
  padding: 25px; /* Inner spacing */
  border-radius: 8px; /* Rounded corners */
  text-align: center; /* Center-align text */
  font-size: 1.2em; /* Larger font size */
  font-weight: bold; /* Bold text */
  cursor: pointer; /* Indicates clickable element */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

/* Option box hover state */
.option-box:hover {
  transform: translateY(-5px) scale(1.02); /* Lifts and slightly scales on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* 6. Utility Styles (Icons, Shop Info) */
.edit-icon {
  /* For RTL, 'margin-inline-start' adds space to the left of the icon,
     effectively separating it from preceding text in a right-to-left context. */
  margin-inline-start: 10px;
  cursor: pointer; /* Indicates clickable element */
  color: #007bff; /* Blue color for edit icons */
  font-size: 0.9em; /* Slightly smaller font size than surrounding text */
}

.shop-info p {
  display: flex; /* Uses flexbox for alignment */
  align-items: center; /* Vertically centers items */
  /* In RTL, 'flex-start' aligns items to the right side of the container. */
  justify-content: flex-start;
  gap: 10px; /* Space between flex items (text and icon) */
  margin-bottom: 5px; /* Slight spacing for info paragraphs */
}

/* 7. Product Display Grid */
.product-grid {
  display: grid; /* Uses CSS Grid for layout */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Responsive grid columns */
  gap: 20px; /* Space between grid items */
  margin-top: 30px; /* Space above the grid */
}

.product-card {
  background-color: #fff; /* White background for product cards */
  border: 1px solid #eee; /* Light grey border */
  border-radius: 8px; /* Rounded corners */
  overflow: hidden; /* Hides content that exceeds the rounded corners */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Soft shadow */
  text-align: center; /* Center-aligns text content */
  padding-bottom: 15px; /* Spacing at the bottom of the card */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effects */
}

/* Product card hover state */
.product-card:hover {
  transform: translateY(-3px); /* Lifts the card slightly on hover */
  box-shadow: 0 5px 10px rgba(0,0,0,0.15); /* Slightly larger shadow on hover */
}

.product-card img {
  width: 100%; /* Image takes full width of its container */
  height: 150px; /* Fixed height for product images */
  object-fit: cover; /* Ensures image covers the area without distortion, cropping if necessary */
  display: block; /* Removes extra space below the image */
  border-bottom: 1px solid #eee; /* Separator line below the image */
}

.product-card h3 {
  font-size: 1.1em; /* Font size for product names */
  margin: 10px 0 5px; /* Vertical spacing for product name */
  color: #333; /* Dark grey for product name */
  text-align: center; /* Ensures h3 inside card is also centered */
}

.product-card p {
  font-size: 0.9em; /* Smaller font size for product descriptions */
  color: #666; /* Lighter grey for descriptions */
  padding: 0 10px; /* Horizontal padding for descriptions */
  text-align: center; /* Ensures p inside card is also centered */
}

.product-card .price {
  font-weight: bold; /* Bold text for price */
  color: #28a745; /* Green color for price */
  font-size: 1.05em; /* Slightly larger font size for price */
  margin-top: 10px; /* Space above the price */
  display: block; /* Ensures price appears on its own line for proper margin */
}

/* 8. Search Bar */
.search-bar {
  width: 100%; /* Full width */
  padding: 10px; /* Inner spacing */
  border: 1px solid #28a745; /* Green border */
  border-radius: 5px; /* Rounded corners */
  margin-bottom: 20px; /* Space below the search bar */
  background-color: #e6ffe6; /* Light green background */
  line-height: 1.5; /* Consistent line height */
  transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

/* Search bar focus state */
.search-bar:focus {
  border-color: #218838; /* Darker green on focus */
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* Green glow effect on focus */
  outline: none; /* Removes default browser outline */
}

/* 9. Responsive Adjustments */
@media (max-width: 768px) {
  .container {
    margin: 20px; /* Reduce side margins for smaller screens */
    padding: 15px; /* Reduce inner padding */
  }
  .options-grid,
  .product-grid {
    /* Adjust grid columns for slightly smaller screens */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  h1 { font-size: 2em; }
  h2 { font-size: 1.7em; }
  h3 { font-size: 1.3em; }
  .button { font-size: 16px; padding: 10px 15px; }
  .option-box { padding: 20px; font-size: 1.1em; }
  .product-card img { height: 120px; }
}

@media (max-width: 480px) {
  .container {
    margin: 15px; /* Further reduce margins on very small screens */
    padding: 10px; /* Further reduce padding */
  }
  .options-grid,
  .product-grid {
    grid-template-columns: 1fr; /* Stack items in a single column */
  }
  .option-box,
  .product-card {
    margin: 0 auto; /* Center single column items */
    max-width: 300px; /* Limit width of single column items */
  }
  h1 { font-size: 1.8em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.2em; }
  .button { font-size: 15px; padding: 8px 12px; }
  .option-box { font-size: 1em; padding: 15px; }
}