/**
 * base.css – Design tokenek, reset, tipográfia
 *
 * Örökli a birtelectric.com főoldal stílusát (navy + piros + arany paletta),
 * de a megrendelő form világosabb, olvashatóbb felületet igényel.
 *
 * Rétegek:
 *   1. CSS változók (tokenek)
 *   2. Reset
 *   3. Tipográfia
 *   4. Globális segédosztályok
 */

/* ==========================================================================
   1. CSS VÁLTOZÓK / DESIGN TOKENEK
   ========================================================================== */

:root {

  /* --- Főszínek (főoldallal konzisztens) --- */
  --navy:        #0B1F3A;
  --navy-dark:   #060f1d;
  --navy-mid:    #122847;
  --navy-light:  #1a3a5c;
  --red:         #C8102E;
  --red-hover:   #A50D26;
  --red-light:   rgba(200, 16, 46, 0.12);
  --red-border:  rgba(200, 16, 46, 0.4);
  --gold:        #E8A020;
  --gold-light:  rgba(232, 160, 32, 0.15);

  /* --- Státusz / funkcionális színek --- */
  --green:       #2ECC71;
  --green-dark:  #27AE60;
  --green-light: rgba(46, 204, 113, 0.12);
  --orange:      #E67E22;
  --orange-light: rgba(230, 126, 34, 0.15);
  --blue:        #3498DB;
  --blue-light:  rgba(52, 152, 219, 0.12);

  /* --- Szövegszínek --- */
  --text-primary:   rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.65);
  --text-muted:     rgba(255, 255, 255, 0.35);
  --text-red:       #ff4d6a;

  /* --- Kártya / felület háttér --- */
  --card-bg:        rgba(255, 255, 255, 0.05);
  --card-bg-hover:  rgba(255, 255, 255, 0.08);
  --card-border:    rgba(255, 255, 255, 0.1);
  --card-border-active: rgba(200, 16, 46, 0.6);

  /* --- Input mezők --- */
  --input-bg:       rgba(255, 255, 255, 0.07);
  --input-bg-focus: rgba(255, 255, 255, 0.11);
  --input-border:   rgba(255, 255, 255, 0.15);
  --input-border-focus: rgba(200, 16, 46, 0.7);
  --input-text:     rgba(255, 255, 255, 0.95);
  --input-placeholder: rgba(255, 255, 255, 0.3);

  /* --- Árnyékok --- */
  --shadow-sm:  0 2px 8px  rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-red: 0 4px 20px rgba(200, 16, 46, 0.35);

  /* --- Lekerekítés --- */
  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  20px;

  /* --- Betűtípusok (főoldallal azonos) --- */
  --font-title: 'Oswald', sans-serif;
  --font-body:  'Open Sans', sans-serif;

  /* --- Átmenetek --- */
  --transition: 0.2s ease;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--navy-dark);
  color: var(--text-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  outline: none;
  background: none;
}

/* Fókusz akadálymentesítéshez */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  display: block;
}

/* ==========================================================================
   3. TIPOGRÁFIA
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: 1px;
}

h2 { font-size: clamp(20px, 5vw, 26px); }
h3 { font-size: clamp(16px, 4vw, 20px); }

p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* ==========================================================================
   4. GLOBÁLIS SEGÉDOSZTÁLYOK
   ========================================================================== */

/* Spinner animáció */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

.spinner-white {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

/* Skeleton betöltés */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-card {
  height: 90px;
  border-radius: var(--radius);
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  margin-bottom: 10px;
}

/* Pulse animáció (SOS gombhoz) */
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.5); }
  50%       { box-shadow: 0 0 0 8px rgba(200, 16, 46, 0); }
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}