/* ===== ZAKÁZKY – grid + karty (stejný brand) ===== */
.zakazky-section {
  padding: 28px 16px;
  text-align: center;
}
.zakazky-section h2 {
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: .4px;
}

.zakazky-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Jedna karta */
.zakazka-card {
  background: #0e0e0e;
  border: 2px solid #fff;
  border-radius: 16px;
  color: #fff;
  padding: 22px 20px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .2s ease;
  position: relative;
}
.zakazka-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.32);
}

/* Typografie */
.zakazka-card h3 {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .4px;
}
.zakazka-card p {
  margin: 6px 0;
  opacity: .94;
}
.zakazka-card .price {
  margin-top: 10px;
  font-weight: 800;
}

/* ===== Proužek dostupnosti (celá šířka, nízký) ===== */
.status-strip {
  width: 100%;
  height: 12px;                 /* ← výška proužku */
  border: 2px solid #fff;
  border-radius: 8px;
  margin-top: 12px;
}

/* Barvy stavů */
.status-strip.dostupne   { background: #2ecc71; } /* zelená */
.status-strip.dulezite   { background: #fd7e14; } /* oranžová */
.status-strip.nedostupne { background: #dc3545; } /* červená */

/* Skrytí objednávky, pokud je nedostupné
   (tlačítko musí být hned ZA proužkem) */
.status-strip.nedostupne + .order-btn { display: none; }

/* ===== Tlačítko OBJEDNAT – brand pilulka ===== */
.order-btn {
  display: inline-block;
  margin-top: 12px;
  color: #fff;
  background: #0e0e0e;
  border: 2px solid #fff;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 800;
  letter-spacing: .3px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.order-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  text-decoration: none;
}

/* ===== Mobil drobnosti ===== */
@media (max-width: 420px) {
  .zakazka-card { padding: 18px 16px; }
  .zakazka-card h3 { font-size: 18px; }
  .status-strip { height: 10px; }         /* o fous nižší proužek na mobilech */
}

/* ===== (Volitelné) Maintenance mód – nechávám, ať můžeš uzavírat stránku ===== */
.zakazky-section.maintenance-mode .zakazka-card {
  position: relative;
  filter: grayscale(.85);
  opacity: .9;
  pointer-events: none;
}
.zakazky-section.maintenance-mode .zakazka-card * { pointer-events: none !important; }

.zakazky-section.maintenance-mode .zakazka-card::before {
  content: "";
  position: absolute; left: -10px; right: -10px; top: 50%;
  height: 8px; transform: translateY(-50%) rotate(-12deg);
  background: repeating-linear-gradient(
    90deg,
    rgba(253,126,20,.85), rgba(253,126,20,.85) 12px,
    transparent 12px, transparent 24px
  );
  border-radius: 6px;
  z-index: 3;
}
.zakazky-section.maintenance-mode .zakazka-card::after {
  content: "PROBÍHÁ ÚDRŽBA";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  background: rgba(253,126,20,.92);
  color: #fff; border: 2px solid #fff; border-radius: 999px;
  padding: 10px 18px; font-weight: 900; letter-spacing: 1.2px; font-size: 18px;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
  z-index: 4;
}
/* === OVERRIDE: karty na hover NEskočí (stejný vzhled) === */
.zakazka-card:hover {
  transform: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
/* === OVERRIDE: proužek je vyšší, s textem uprostřed === */
.status-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;        /* ↑ výška proužku */
  padding: 6px 10px;       /* vnitřní odsazení */
  border: 2px solid #fff;
  border-radius: 10px;
  color: #fff;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 14px;
  line-height: 1;
}

/* Text se doplní automaticky podle stavu – není třeba měnit HTML */
.status-strip.dostupne::after   { content: "DOSTUPNÉ"; }
.status-strip.dulezite::after   { content: "POUZE DŮLEŽITÉ"; }
.status-strip.nedostupne::after { content: "NEDOSTUPNÉ"; }

/* Mobilní drobná korekce velikosti */
@media (max-width: 420px) {
  .status-strip {
    min-height: 32px;
    font-size: 13px;
  }
}
/* === FIX: status proužek zarovnat symetricky (100% šířka karty) === */
.zakazka-card .status,
.status-strip {
  display: block;           /* z inline/inline-block → blok přes celou šířku */
  width: 100%;
  box-sizing: border-box;   /* ať se do šířky započítá i border/padding */
  margin: 12px 0 0;         /* jen svislé odsazení, bez „lepivých“ bočních mezer */
  min-height: 36px;
  padding: 8px 12px;
  border: 2px solid #fff;
  border-radius: 10px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .3px;
}

/* Barvy – fungují jak pro původní .status, tak pro .status-strip */
.status-strip.dostupne,
.zakazka-card .status.DOSTUPNÉ   { background:#198754; color:#fff; }
.status-strip.dulezite,
.zakazka-card .status.DŮLEŽITÉ   { background:#fd7e14; color:#fff; }
.status-strip.nedostupne,
.zakazka-card .status.NEDOSTUPNÉ { background:#dc3545; color:#fff; }














/* ---- PILL ---- */
html.btn-pill .nav-btn,
html.btn-pill .nav-launch,
html.btn-pill .play-btn,
html.btn-pill .order-btn,      /* ← DOPLNIT */
html.btn-pill button,
html.btn-pill .btn {
  border-radius: 9999px !important;
  background: #0e0e0e !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ---- SQUARE ---- */
html.btn-square .nav-btn,
html.btn-square .nav-launch,
html.btn-square .play-btn,
html.btn-square .order-btn,    /* ← DOPLNIT */
html.btn-square button,
html.btn-square .btn {
  border-radius: 10px !important;
  background: #0e0e0e !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* ---- GLASS ---- (stále PILLOW tvar – kulaté) */
html.btn-glass .nav-btn,
html.btn-glass .nav-launch,
html.btn-glass .play-btn,
html.btn-glass .order-btn,     /* ← DOPLNIT */
html.btn-glass button,
html.btn-glass .btn {
  border-radius: 9999px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  box-shadow:
    inset 0 8px 24px rgba(255,255,255,.06),
    inset 0 -2px 8px rgba(0,0,0,.22),
    0 6px 26px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1) !important;
}

/* Hover = jen „nafouknutí“ (žádné vybílení) */
html.btn-pill  .nav-btn:hover,
html.btn-square .nav-btn:hover,
html.btn-glass .nav-btn:hover,
html.btn-pill  .nav-launch:hover,
html.btn-square .nav-launch:hover,
html.btn-glass .nav-launch:hover,
html.btn-pill  .play-btn:hover,
html.btn-square .play-btn:hover,
html.btn-glass .play-btn:hover,
html.btn-pill  .order-btn:hover,   /* ← DOPLNIT */
html.btn-square .order-btn:hover,  /* ← DOPLNIT */
html.btn-glass .order-btn:hover,   /* ← DOPLNIT */
html.btn-pill  button:hover,
html.btn-square button:hover,
html.btn-glass button:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}














/* === ANIMACE i pro .order-btn (ZAKÁZKY) === */

/* Společné: plynulé přechody (když by chyběly) */
html.anim-default .order-btn,
html.anim-invert  .order-btn,
html.anim-glow    .order-btn{
  transition: transform .18s ease, box-shadow .2s ease,
              background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* 1) DEFAULT – jen nafouknutí (už to máš, ale jistota) */
html.anim-default .order-btn:hover{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* 2) INVERT – převrácení barev při hoveru */
html.anim-invert .order-btn:hover{
  background: #fff !important;
  color: #000 !important;
  border-color: #000 !important;
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

/* Invert – jemné ladění pro GLASS téma (zachovej „skleněný“ feeling) */
html.btn-glass.anim-invert .order-btn:hover{
  background: rgba(255,255,255,0.85) !important;
  color: #000 !important;
  border-color: #fff !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.65);
}

/* 3) GLOW – záře při hoveru */
html.anim-glow .order-btn:hover{
  transform: translateY(-1px) scale(1.05);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.35),
    0 0 20px rgba(255,255,255,.25),
    0 10px 26px rgba(0,0,0,.28);
}