/**
 * Simple COD Design System
 * Clean, unified design with consistent states
 * @version 2.0.0
 */

/* ============================================
   COLOR TOKENS
   ============================================ */
:root {
  /* Brand Colors */
  --cod-primary: #0adb62;
  --cod-primary-hover: #09c456;
  --cod-primary-active: #08b54d;
  --cod-primary-light: rgba(10, 219, 98, 0.08);

  /* Neutral Colors */
  --cod-text: #052f1b;
  --cod-text-secondary: #374151;
  --cod-text-tertiary: #6b7280;
  --cod-text-placeholder: #a0bfad;

  /* Surface Colors (UNIFIED) */
  --cod-surface-primary: #ffffff;
  --cod-surface-secondary: #ffffff; /* ✅ Changed to white for consistency */

  /* Border Colors (UNIFIED) */
  --cod-border-default: #e5e7eb; /* Default border */
  --cod-border-active: var(--cod-primary); /* Active/filled border */

  /* State Colors */
  --cod-success: #10b981;
  --cod-error: #ef4444;
  --cod-error-bg: #fef2f2;
  --cod-error-border: #fecaca;
  --cod-error-text: #991b1b;

  /* Interactive States (UNIFIED) */
  --cod-state-default-bg: #ffffff;
  --cod-state-default-border: #e5e7eb;
  --cod-state-hover-border: var(--cod-primary);
  --cod-state-focus-border: var(--cod-primary);
  --cod-state-active-border: var(--cod-primary);

  /* Shadows (Optional - can be disabled) */
  --cod-shadow-none: none;
  --cod-shadow-focus: none; /* ✅ Removed shadows for clean design */
  --cod-shadow-subtle: 0 0 0 3px rgba(10, 219, 98, 0.08); /* Available if needed */

  /* Overlay */
  --cod-overlay: rgba(5, 47, 27, 0.85);
}

/* ============================================
   SPACING SCALE
   ============================================ */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
}

/* ============================================
   TYPOGRAPHY SCALE
   ============================================ */
:root {
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 22px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

/* ============================================
   BORDER RADIUS SCALE
   Note: --radius-* variables are set dynamically
   via admin panel (inline CSS). Fallbacks used in components.
   ============================================ */
/* Removed: now controlled by admin settings */

/* ============================================
   TRANSITION TOKENS
   ============================================ */
:root {
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ============================================
   Z-INDEX SCALE
   ============================================ */
:root {
  --z-base: 1;
  --z-dropdown: 10;
  --z-modal: 1000;
  --z-overlay: 999999;
}

/* ============================================
   DISABLED / UNAVAILABLE FORM STATES
   ============================================ */

/* Container when form is unavailable */
.simple-cod-container.cod-unavailable {
  opacity: 0.85;
}

/* Unavailable message box */
.cod-unavailable-message {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  background: var(--cod-error-bg);
  border: 1px solid var(--cod-error-border);
  border-radius: var(--radius-md);
  color: var(--cod-error-text);
}

.cod-unavailable-message svg {
  flex-shrink: 0;
  stroke: var(--cod-error);
}

.cod-unavailable-message p {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* Disabled form styling */
.simple-cod-form.cod-form-disabled {
  pointer-events: none;
  position: relative;
}

.simple-cod-form.cod-form-disabled fieldset {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  min-width: 0;
}

.simple-cod-form.cod-form-disabled .cod-input,
.simple-cod-form.cod-form-disabled .cod-select,
.simple-cod-form.cod-form-disabled .cod-textarea {
  background: transparent;
  border-color: transparent;
  color: var(--cod-text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.simple-cod-form.cod-form-disabled .cod-submit-btn {
  background: var(--cod-border-default);
  color: var(--cod-text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}

.simple-cod-form.cod-form-disabled .qty-btn {
  opacity: 0.4;
  cursor: not-allowed;
}

.simple-cod-form.cod-form-disabled .cod-row,
.simple-cod-form.cod-form-disabled .cod-field,
.simple-cod-form.cod-form-disabled .cod-summary,
.simple-cod-form.cod-form-disabled .cod-footer,
.simple-cod-form.cod-form-disabled .cod-delivery-section,
.simple-cod-form.cod-form-disabled .cod-shipping,
.simple-cod-form.cod-form-disabled .cod-no-companies {
  background: transparent;
}