/* Rajtkomat — custom styles (Bootstrap handles base styles) */

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  font-weight: bold;
  color: #e44d76;
  text-decoration: none;
}
.logo img { height: 36px; width: auto; }

/* Hero section */
.hero {
  text-align: center;
  padding: 6rem 2rem 4rem;
  background: linear-gradient(180deg, rgba(228,77,118,0.12) 0%, transparent 60%);
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(228,77,118,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.hero h1 { font-size: 3.5rem; margin-bottom: 1rem; position: relative; }
.hero-logo { width: 160px; margin-bottom: 1.5rem; }
.hero p { font-size: 1.2rem; color: #aaa; margin-bottom: 2rem; }

/* Category navigation */
.category-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.category-nav a {
  padding: 0.5rem 1rem;
  background: #1a1a1a;
  color: #ccc;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #333;
  transition: all 0.2s;
}
.category-nav a.active,
.category-nav a:hover { background: linear-gradient(135deg, #e44d76, #c73a5f); color: #fff; border-color: transparent; }

.category-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.category-parent {
  padding: 0.5rem 0.75rem;
  color: #888;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.category-group a {
  padding: 0.35rem 0.75rem;
  background: #1a1a1a;
  color: #ccc;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid #333;
  font-size: 0.9rem;
  transition: all 0.2s;
}
.category-group a.active,
.category-group a:hover { background: linear-gradient(135deg, #e44d76, #c73a5f); color: #fff; border-color: transparent; }

/* Products grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Admin container */
.admin-container { max-width: 1000px; margin: 2rem auto; padding: 0 1rem; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }

/* Admin form — kept for backward compat with JS-rendered content */
.admin-form { max-width: 500px; }
.admin-form label { display: block; margin-bottom: 0.25rem; color: #aaa; }
.admin-form input, .admin-form textarea, .admin-form select {
  width: 100%; padding: 0.75rem; background: #1a1a1a; color: #fff; border: 1px solid #333; border-radius: 6px; margin-bottom: 1rem;
  transition: border-color 0.2s;
}
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus {
  border-color: #e44d76;
  outline: none;
}
.admin-form textarea { min-height: 100px; }

/* Status badges — legacy classes used in JS-rendered HTML */
.status-badge {
  display: inline-block; padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem;
}
.status-pending { background: #f39c12; color: #000; }
.status-paid { background: #27ae60; color: #fff; }
.status-shipped { background: #2980b9; color: #fff; }
.status-completed { background: #27ae60; color: #fff; }
.status-cancelled, .status-expired { background: #c0392b; color: #fff; }
.status-pending_approval { background: #f39c12; color: #000; }
.status-approved { background: #27ae60; color: #fff; }
.status-rejected { background: #c0392b; color: #fff; }

/* Remove button */
.btn-remove { background: #c0392b; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; }

/* Cart total */
.cart-total { text-align: right; font-size: 1.5rem; color: #e44d76; margin-top: 1.5rem; padding: 1rem 0; }

/* Checkout form */
.checkout-form { margin-top: 2rem; }
.checkout-form input { padding: 0.75rem; background: #1a1a1a; color: #fff; border: 1px solid #333; border-radius: 4px; margin-right: 1rem; width: 300px; }