/*
 * QQVID Ads Panel - Stylesheet
 *
 * Provides a minimal, modern styling for the advertising order panel and
 * tables used throughout the plugin. Uses CSS variables defined in the
 * child theme (var(--qq-brand), var(--qq-brand2)) for brand colours.
 * Includes support for right‑to‑left (RTL) layouts by flipping margins
 * and text alignment when the document direction is rtl.
 */

/* Root variables (fallback if theme doesn't define them) */
:root {
  --qq-brand: #5b6cff;
  --qq-brand2: #7a5cff;
  --qq-bg: #ffffff;
  --qq-border: #e0e0e0;
  --qq-text: #333333;
  --qq-muted: #666666;
  --qq-success: #28a745;
  --qq-processing: #ffc107;
  --qq-complete: #17a2b8;
}

/* Main container for new order and services */
.qqvid-new-order,
.qqvid-orders,
.qqvid-services {
  background: var(--qq-bg);
  padding: 1.5rem;
  border: 1px solid var(--qq-border);
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

/* Form fields */
.qqvid-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.qqvid-field label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: block;
}

.qqvid-field input,
.qqvid-field select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--qq-border);
  border-radius: 4px;
  font-size: 1rem;
}

/* Tiers table container */
#qqvid-tiers-container table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

#qqvid-tiers-container th,
#qqvid-tiers-container td {
  padding: 0.5rem;
  border: 1px solid var(--qq-border);
  text-align: left;
}

#qqvid-tiers-container th {
  background: var(--qq-brand);
  color: #ffffff;
  font-weight: 600;
}

#qqvid-tiers-container td .qqvid-select-tier {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--qq-brand2);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
  text-decoration: none;
}

#qqvid-order-summary {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--qq-border);
  border-radius: 6px;
  background: #f9f9f9;
}

/* Buttons */
.qqvid-button {
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  margin-right: 0.5rem;
}

.qqvid-add-order {
  background: var(--qq-brand);
  color: #ffffff;
}

.qqvid-clear {
  background: #ccc;
  color: #333;
}

.qqvid-button:hover {
  opacity: 0.9;
}

/* Orders and services tables */
.qqvid-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.qqvid-table th,
.qqvid-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--qq-border);
  text-align: left;
}

.qqvid-table th {
  background: var(--qq-brand);
  color: #ffffff;
  font-weight: 600;
}

.qqvid-status-processing {
  background: var(--qq-processing);
  color: #212529;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

.qqvid-status-completed {
  background: var(--qq-success);
  color: #ffffff;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

/* RTL adjustments */
[dir="rtl"] .qqvid-form {
  direction: rtl;
}
[dir="rtl"] .qqvid-field label {
  text-align: right;
}
[dir="rtl"] .qqvid-table th,
[dir="rtl"] .qqvid-table td {
  text-align: right;
}

/* Order message */
#qqvid-order-message {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 4px;
  background: #f1f1f1;
}
/* Success and error messages */
#qqvid-order-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
#qqvid-order-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}