/*
  Global styles and CSS variables for the OTT subscription site. The design
  prioritises simplicity and readability, drawing inspiration from minimal
  productivity apps like Notion. Colour variables make it easy to tweak
  the theme later without hunting through the stylesheet.
*/

:root {
  --primary-color: #4f46e5;
  --secondary-color: #6366f1;
  --whatsapp-color: #22c55e;
  --text-color: #2d3142;
  --muted-text: #6b7280;
  --background-color: #f9fafb;
  --card-bg: #ffffff;
  --border-color: #e5e7eb;
  --radius: 0.75rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.5;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background-color: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary-color);
}

.search-container {
  flex: 1;
  margin: 0 1rem;
  position: relative;
}

#searchInput {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: 1rem;
  transition: border-color 0.2s;
}

#searchInput:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* Hide label from screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.menu-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--primary-color);
  display: none; /* Hidden on large screens; toggled via media query */
}

/* Hero section */
.hero {
  text-align: center;
  padding: 4rem 2rem 3rem;
  background: linear-gradient(135deg, #eef2ff 0%, #f7f8fc 100%);
}

.hero h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.hero-subtitle {
  font-size: 1.125rem;
  color: var(--muted-text);
  margin-bottom: 2rem;
}

.cta-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--primary-color);
  color: #ffffff;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s;
}

.cta-btn:hover,
.cta-btn:focus {
  background-color: var(--secondary-color);
}

/* Categories navigation */
.categories {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  overflow-x: auto;
  background-color: var(--background-color);
  border-bottom: 1px solid var(--border-color);
}

.category-btn {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-color);
  background-color: var(--card-bg);
  color: var(--text-color);
  border-radius: 9999px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.category-btn:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

.category-btn.active {
  background-color: var(--primary-color);
  color: #ffffff;
}

/* Product list */
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.product-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Product image displayed at the top of each card */
.product-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  object-fit: cover;
}

.product-name {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.product-price {
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.features {
  list-style: none;
  margin-bottom: 1rem;
}

.features li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
}

.features li::before {
  content: "\u2713";
  color: var(--primary-color);
  margin-right: 0.5rem;
}

.card-actions {
  margin-top: auto;
}

.btn {
  display: inline-block;
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  transition: background-color 0.2s;
}

.btn.buy {
  background-color: var(--primary-color);
  color: #ffffff;
}

.btn.buy:hover {
  background-color: var(--secondary-color);
}

.btn.whatsapp {
  background-color: var(--whatsapp-color);
  color: #ffffff;
}

.btn.whatsapp:hover {
  background-color: #16a34a;
}

/* Footer */
.footer {
  text-align: center;
  padding: 2rem 1.5rem;
  background-color: var(--background-color);
  border-top: 1px solid var(--border-color);
  color: var(--muted-text);
  font-size: 0.875rem;
}

.footer a {
  color: var(--primary-color);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .header {
    flex-wrap: wrap;
  }

  .logo {
    flex-basis: 100%;
    margin-bottom: 0.5rem;
  }

  .search-container {
    flex-basis: 100%;
    margin: 0 0 0.5rem 0;
  }

  .menu-btn {
    display: block;
  }
}

/* Admin login and dashboard styles */
.admin-login-container {
  max-width: 400px;
  margin: 4rem auto;
  padding: 2rem;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  text-align: left;
}

.admin-login-container h1 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  text-align: center;
}

.form-field {
  margin-bottom: 1rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: var(--text-color);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background-color: var(--background-color);
  font-size: 1rem;
  color: var(--text-color);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.error-message {
  color: #dc2626;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

/* Dashboard layout */
.dashboard {
  max-width: 900px;
  margin: 2rem auto;
  padding: 1rem;
}

.product-manager,
.product-table {
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Site settings block shares the same styling as product manager/table */
.site-settings {
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Pricing plan rows within the product form */
.price-plan-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}
.price-plan-row input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background-color: var(--background-color);
  font-size: 1rem;
  color: var(--text-color);
}
.price-plan-row input:focus {
  outline: none;
  border-color: var(--primary-color);
}
.remove-plan-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--primary-color);
  padding: 0 0.5rem;
}
.remove-plan-btn:hover {
  color: var(--secondary-color);
}

.product-manager h2,
.product-table h2 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

.product-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.product-table th,
.product-table td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

.product-table th {
  font-weight: 600;
  color: var(--text-color);
  background-color: var(--background-color);
}

/* Checkout page styles */
.checkout-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.checkout-container h2 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  text-align: center;
}

.order-summary p {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.qr-wrapper {
  margin: 1rem 0;
  text-align: center;
}

.qr-placeholder {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-text);
  font-size: 0.875rem;
}

.qr-instructions {
  margin: 0.5rem 0;
  color: var(--muted-text);
  font-size: 0.875rem;
  text-align: center;
}