/* ------------------------ Underground Shop – global styles ------------------------- */



:root {

  --bg-dark: #050712;

  --neon-cyan: #00d8ff;

  --neon-pink: #ff3bd7;

  --text-main: #f4f7ff;

  --text-muted: #9fa4c1;

  --card-bg: rgba(7, 11, 32, 0.78);

  --border-glass: rgba(255, 255, 255, 0.08);

  --radius-xl: 26px;

  --transition-fast: 0.25s ease;

  --shadow-neon: 0 0 20px rgba(0, 216, 255, 0.55),

    0 0 40px rgba(255, 59, 215, 0.35);

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",

    sans-serif;

  background: radial-gradient(circle at top, #141832 0, #050712 40%, #000 100%);

  color: var(--text-main);

  line-height: 1.6;

  min-height: 100vh;

}



/* neon background overlay */



body::before {

  content: "";

  position: fixed;

  inset: 0;

  background: radial-gradient(

      circle at 10% 0%,

      rgba(0, 216, 255, 0.25) 0,

      transparent 40%

    ),

    radial-gradient(

      circle at 90% 100%,

      rgba(255, 59, 215, 0.28) 0,

      transparent 55%

    );

  opacity: 0.7;

  pointer-events: none;

  z-index: -2;

}



body::after {

  content: "";

  position: fixed;

  inset: 0;

  background-image: linear-gradient(

      rgba(255, 255, 255, 0.03) 1px,

      transparent 1px

    ),

    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);

  background-size: 90px 90px;

  mix-blend-mode: soft-light;

  opacity: 0.7;

  pointer-events: none;

  z-index: -1;

}



a {

  color: var(--neon-cyan);

  text-decoration: none;

  transition: color var(--transition-fast),

    text-shadow var(--transition-fast);

}



a:hover {

  color: #ffffff;

  text-shadow: 0 0 6px rgba(0, 216, 255, 0.85);

}



img {

  max-width: 100%;

  display: block;

}



.container {

  max-width: 1120px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



/* ------------------------ Reusable animations ------------------------- */



@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translate3d(0, 24px, 0);

  }

  to {

    opacity: 1;

    transform: translate3d(0, 0, 0);

  }

}



@-webkit-keyframes fadeUp {

  from {

    opacity: 0;

    -webkit-transform: translate3d(0, 24px, 0);

  }

  to {

    opacity: 1;

    -webkit-transform: translate3d(0, 0, 0);

  }

}



.fade-up {

  opacity: 0;

  animation: fadeUp 0.8s ease-out forwards;

}



.fade-up.delay-1 {

  animation-delay: 0.1s;

}



.fade-up.delay-2 {

  animation-delay: 0.2s;

}



.fade-up.delay-3 {

  animation-delay: 0.3s;

}



/* ------------------------ Header / nav (non-sticky) ------------------------- */



.site-header {

  padding: 1.4rem 0 0.5rem;

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.5rem;

}



.logo {

  display: flex;

  align-items: center;

  gap: 0.9rem;

}



.logo-img-wrap {

  width: 54px;

  height: 54px;

  border-radius: 50%;

  overflow: hidden;

  border: 2px solid rgba(0, 216, 255, 0.75);

  box-shadow: 0 0 22px rgba(0, 216, 255, 0.7),

    0 0 26px rgba(255, 59, 215, 0.7);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.logo-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

}



.logo-text {

  display: flex;

  flex-direction: column;

  gap: 0.18rem;

}



.logo-title {

  font-family: "Inter", system-ui, sans-serif;

  font-weight: 600;

  font-size: 1.1rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

}



.logo-subtitle {

  font-family: "Inter", system-ui, sans-serif;

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: var(--text-muted);

}



.main-nav {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 1.1rem;

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.18em;

}



.nav-link {

  position: relative;

  color: var(--text-muted);

  padding-bottom: 0.2rem;

}



.nav-link::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -0.25rem;

  height: 1px;

  width: 0;

  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));

  transition: width var(--transition-fast);

}



.nav-link:hover {

  color: var(--text-main);

}



.nav-link:hover::after,

.nav-link.active::after {

  width: 100%;

}



.nav-link.active {

  color: var(--neon-cyan);

}



/* FB odkaz v navigaci */



.nav-link-social {

  border-radius: 999px;

  border: 1px solid rgba(0, 216, 255, 0.7);

  padding: 0.25rem 0.7rem;

  font-weight: 600;

  letter-spacing: 0.12em;

}



.nav-link-social::after {

  display: none;

}



.nav-link-social:hover {

  background: linear-gradient(120deg, var(--neon-cyan), var(--neon-pink));

  color: #050712;

  text-shadow: none;

  box-shadow: 0 0 14px rgba(0, 216, 255, 0.7);

}



/* ------------------------ Hero (homepage) ------------------------- */



.hero {

  padding: 1.8rem 0 4.5rem;

}



.hero-grid {

  display: grid;

  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr);

  gap: 2.4rem;

  align-items: center;

}



.hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  padding: 0.25rem 0.8rem;

  border-radius: 999px;

  background: linear-gradient(

    125deg,

    rgba(0, 216, 255, 0.2),

    rgba(255, 59, 215, 0.2)

  );

  border: 1px solid rgba(0, 216, 255, 0.6);

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  margin-bottom: 1.1rem;

  box-shadow: 0 0 16px rgba(0, 216, 255, 0.45);

}



.hero-badge-dot {

  width: 7px;

  height: 7px;

  border-radius: 999px;

  background: var(--neon-cyan);

  box-shadow: 0 0 12px rgba(0, 216, 255, 0.9);

}



.hero-title {

  font-family: "Inter", system-ui, sans-serif;

  font-weight: 700;

  font-size: clamp(2.4rem, 4vw, 3.2rem);

  line-height: 1.15;

  margin-bottom: 1rem;

  text-shadow: 0 0 16px rgba(0, 216, 255, 0.6),

    0 0 24px rgba(255, 59, 215, 0.4);

  display: flex;

  flex-direction: column;

  gap: 0.2rem;

}



/* horní řádek – menší, na jednom řádku */

.hero-subtitle-line {

  font-size: clamp(1.3rem, 2.2vw, 1.7rem);

  font-weight: 400;

  white-space: nowrap;          /* drží to na jednom řádku */

  color: var(--text-main);

  text-shadow: none;

}



/* spodní řádek – barevný UNDERGROUND SHOP */

.hero-title-main {

  background: linear-gradient(

    120deg,

    var(--neon-cyan),

    var(--neon-pink),

    var(--neon-cyan)

  );

  -webkit-background-clip: text;

  color: transparent;

  background-size: 200% 200%;

  animation: neonGradient 6s ease-in-out infinite;

}



@media (max-width: 640px) {

  .hero-subtitle-line {

    white-space: normal;

  }

}





@keyframes neonGradient {

  0% {

    background-position: 0% 50%;

  }

  50% {

    background-position: 100% 50%;

  }

  100% {

    background-position: 0% 50%;

  }

}



@-webkit-keyframes neonGradient {

  0% {

    background-position: 0% 50%;

  }

  50% {

    background-position: 100% 50%;

  }

  100% {

    background-position: 0% 50%;

  }

}



.hero-text {

  color: var(--text-muted);

  max-width: 540px;

  font-size: 0.98rem;

  margin-bottom: 1.7rem;

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

}



/* Buttons */



.btn-primary,

.btn-ghost {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  padding: 0.75rem 1.5rem;

  border-radius: 999px;

  border: 1px solid transparent;

  font-size: 0.86rem;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  cursor: pointer;

  background: none;

  color: var(--text-main);

  transition: transform var(--transition-fast),

    box-shadow var(--transition-fast), background var(--transition-fast),

    border-color var(--transition-fast), color var(--transition-fast);

}



.btn-primary {

  background: radial-gradient(circle at 0 0, var(--neon-cyan), #042635);

  color: #050712;

  border-color: rgba(0, 216, 255, 0.9);

  box-shadow: 0 0 18px rgba(0, 216, 255, 0.5);

}



.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-neon);

  background: radial-gradient(circle at 0 0, var(--neon-pink), var(--neon-cyan));

}



.btn-ghost {

  background: rgba(7, 11, 32, 0.85);

  border-color: rgba(0, 216, 255, 0.45);

}



.btn-ghost:hover {

  transform: translateY(-2px);

  border-color: rgba(255, 59, 215, 0.75);

  box-shadow: 0 0 18px rgba(255, 59, 215, 0.6);

}



/* hero vizuál */



.hero-visual {

  position: relative;

}



.hero-card {

  background: var(--card-bg);

  border-radius: var(--radius-xl);

  padding: 1.7rem 1.6rem;

  border: 1px solid var(--border-glass);

  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.85);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  position: relative;

  overflow: hidden;

}



.hero-card::before {

  content: "";

  position: absolute;

  inset: -30%;

  background: radial-gradient(

      circle at 0 0,

      rgba(0, 216, 255, 0.38) 0,

      transparent 55%

    ),

    radial-gradient(

      circle at 100% 110%,

      rgba(255, 59, 215, 0.42) 0,

      transparent 60%

    );

  opacity: 0.6;

  mix-blend-mode: screen;

  pointer-events: none;

  z-index: -1;

}



.hero-card-header {

  display: flex;

  justify-content: space-between;

  font-size: 0.8rem;

  margin-bottom: 1rem;

  color: var(--text-muted);

}



.hero-card-body {

  display: grid;

  grid-template-columns: 1.35fr 1fr;

  gap: 1.2rem;

  align-items: flex-start;

}



/* BLOK S AUTEM – NOVÁ ANIMACE */



.hero-car {

  position: relative;

  border-radius: 18px;

  border: 1px solid rgba(0, 216, 255, 0.4);

  background: radial-gradient(

      circle at 20% 0%,

      rgba(0, 216, 255, 0.14),

      transparent 60%

    ),

    radial-gradient(

      circle at 80% 100%,

      rgba(255, 59, 215, 0.18),

      transparent 60%

    );

  padding: 0.6rem;

  overflow: hidden;

  box-shadow: 0 0 32px rgba(0, 216, 255, 0.35);

  animation: floatCard 8s ease-in-out infinite;

  will-change: transform, box-shadow;

}



/* SCAN LINE – přes transform (lepší na iOS) */



.hero-car::before {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  top: -30%;

  height: 30%;

  background: linear-gradient(

    to bottom,

    transparent 0%,

    rgba(255, 255, 255, 0.6) 50%,

    transparent 100%

  );

  opacity: 0;

  mix-blend-mode: screen;

  pointer-events: none;

  animation: scanLine 2.8s linear infinite;

}



/* GLOW PŘES CELÝ BLOK */



.hero-car::after {

  content: "";

  position: absolute;

  inset: -40%;

  background: radial-gradient(

      circle at 10% 0%,

      rgba(0, 216, 255, 0.25),

      transparent 60%

    ),

    radial-gradient(

      circle at 90% 100%,

      rgba(255, 59, 215, 0.25),

      transparent 60%

    );

  opacity: 0.4;

  mix-blend-mode: screen;

  pointer-events: none;

  animation: glowPulse 5.5s ease-in-out infinite;

}



.hero-car-image {

  width: 100%;

  height: auto;

  border-radius: 16px;

  display: block;

  object-fit: contain;

  box-shadow: 0 0 25px rgba(0, 216, 255, 0.7),

    0 0 35px rgba(255, 59, 215, 0.6);

  will-change: transform, box-shadow;

}



/* ANIMACE PRO HERO CAR */



@keyframes floatCard {

  0%,

  100% {

    transform: translate3d(0, 0, 0);

    box-shadow: 0 0 32px rgba(0, 216, 255, 0.35);

  }

  50% {

    transform: translate3d(0, -6px, 0);

    box-shadow: 0 0 40px rgba(255, 59, 215, 0.55);

  }

}



@-webkit-keyframes floatCard {

  0%,

  100% {

    -webkit-transform: translate3d(0, 0, 0);

    box-shadow: 0 0 32px rgba(0, 216, 255, 0.35);

  }

  50% {

    -webkit-transform: translate3d(0, -6px, 0);

    box-shadow: 0 0 40px rgba(255, 59, 215, 0.55);

  }

}



@keyframes scanLine {

  0% {

    transform: translate3d(0, 0, 0);

    opacity: 0;

  }

  10% {

    opacity: 0.9;

  }

  100% {

    transform: translate3d(0, 220%, 0);

    opacity: 0;

  }

}



@-webkit-keyframes scanLine {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    opacity: 0;

  }

  10% {

    opacity: 0.9;

  }

  100% {

    -webkit-transform: translate3d(0, 220%, 0);

    opacity: 0;

  }

}



@keyframes glowPulse {

  0%,

  100% {

    opacity: 0.35;

  }

  50% {

    opacity: 0.7;

  }

}



@-webkit-keyframes glowPulse {

  0%,

  100% {

    opacity: 0.35;

  }

  50% {

    opacity: 0.7;

  }

}



.hero-mini {

  display: flex;

  flex-direction: column;

  gap: 0.8rem;

  font-size: 0.8rem;

  color: var(--text-muted);

}



.hero-mini-label {

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  color: var(--neon-cyan);

}



.hero-mini strong {

  font-family: "Inter", system-ui, sans-serif;

  font-weight: 600;

  display: block;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: var(--neon-pink);

}



.hero-mini-block + .hero-mini-block {

  margin-top: 0.3rem;

}



/* ------------------------ Sections / headings ------------------------- */



.section {

  padding: 4.2rem 0;

}



.section-title {

  font-family: "Inter", system-ui, sans-serif;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  font-size: 0.9rem;

  color: var(--neon-cyan);

  margin-bottom: 0.8rem;

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

}



.section-title::before {

  content: "";

  width: 22px;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--neon-cyan));

}



.section-heading {

  font-family: "Inter", system-ui, sans-serif;

  font-weight: 700;

  font-size: 1.9rem;

  margin-bottom: 0.6rem;

}



.section-subtitle {

  color: var(--text-muted);

  max-width: 620px;

  font-size: 0.96rem;

}



/* ------------------------ Glass cards ------------------------- */



.glass-card {

  background: var(--card-bg);

  border-radius: var(--radius-xl);

  border: 1px solid var(--border-glass);

  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.8);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  padding: 1.7rem 1.6rem;

  position: relative;

  overflow: hidden;

  transition: transform var(--transition-fast),

    box-shadow var(--transition-fast), border-color var(--transition-fast),

    background var(--transition-fast);

}



.glass-card:hover {

  transform: translateY(-6px);

  border-color: rgba(0, 216, 255, 0.55);

  box-shadow: var(--shadow-neon);

  background: rgba(7, 11, 32, 0.95);

}



/* ------------------------ Services / cards ------------------------- */



.card-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.6rem;

  margin-top: 2.4rem;

}



.service-label {

  font-size: 0.82rem;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  color: var(--neon-cyan);

  margin-bottom: 0.5rem;

}



.service-title {

  font-size: 1.05rem;

  margin-bottom: 0.4rem;

}



.service-text {

  font-size: 0.9rem;

  color: var(--text-muted);

  margin-bottom: 0.9rem;

}



.service-meta {

  font-size: 0.78rem;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: var(--text-muted);

}



/* ------------------------ Pricing ------------------------- */



.pricing-card {

  margin-top: 2.3rem;

  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,

    Consolas, "Liberation Mono", "Courier New", monospace;

}



.pricing-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 1.1rem;

}



.pricing-header span {

  font-size: 0.8rem;

  color: var(--neon-cyan);

  text-transform: uppercase;

  letter-spacing: 0.2em;

}



.pricing-list {

  font-size: 0.86rem;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.pricing-row {

  display: grid;

  grid-template-columns: 1.2fr 1fr 0.6fr;

  padding: 0.6rem 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.pricing-row span:nth-child(3) {

  text-align: right;

  color: var(--neon-pink);

}

.pricing-row span:nth-child(1) {

  font-weight: 500;

}

.pricing-row span:nth-child(2) {

  color: var(--text-muted);

  font-size: 0.85em;

}






/* ------------------------ About ------------------------- */



.about-layout {

  display: grid;

  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);

  gap: 2rem;

  margin-top: 2rem;

}



.about-text {

  font-size: 0.95rem;

  color: var(--text-muted);

}



.about-text p + p {

  margin-top: 0.9rem;

}



.about-info {

  display: flex;

  flex-direction: column;

  gap: 0.8rem;

  font-size: 0.88rem;

}



.about-tag {

  font-size: 0.78rem;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: var(--neon-cyan);

}



.about-stat {

  font-family: "Inter", system-ui, sans-serif;

  font-weight: 600;

  font-size: 1rem;

}



/* ------------------------ Contact ------------------------- */



.contact-layout {

  display: grid;

  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);

  gap: 2rem;

  margin-top: 2.3rem;

}



.contact-list {

  font-size: 0.9rem;

  color: var(--text-muted);

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.contact-list strong {

  color: var(--text-main);

}



.contact-form {

  display: flex;

  flex-direction: column;

  gap: 0.85rem;

  font-size: 0.9rem;

}



.field-group {

  display: flex;

  gap: 0.8rem;

}



.field {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 0.3rem;

}



label {

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.16em;

}



input,

textarea {

  background: rgba(5, 7, 18, 0.95);

  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  padding: 0.6rem 0.8rem;

  color: var(--text-main);

  font-family: inherit;

  font-size: 0.9rem;

  outline: none;

  transition: border-color var(--transition-fast),

    box-shadow var(--transition-fast), background var(--transition-fast);

}



input:focus,

textarea:focus {

  border-color: rgba(0, 216, 255, 0.9);

  box-shadow: 0 0 14px rgba(0, 216, 255, 0.7);

  background: rgba(5, 7, 18, 1);

}



textarea {

  min-height: 140px;

  resize: vertical;

}



/* ------------------------ Footer ------------------------- */



.site-footer {

  margin-top: 5rem;

  padding: 4rem 0 1.5rem;

  background: rgba(5, 7, 18, 0.6); /* Lehce průhledná tmavá */

  border-top: 1px solid var(--border-glass);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  font-size: 0.9rem;

}



.footer-grid {

  display: grid;

  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;

  gap: 3rem;

  margin-bottom: 3rem;

}



/* Nadpisy v patičce */

.footer-heading {

  font-family: "Space Mono", monospace; /* Technický font z ceníku */

  color: var(--text-main);

  font-size: 0.95rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  margin-bottom: 1.4rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



/* Malá neonová čárka před nadpisem */

.footer-heading::before {

  content: '';

  width: 4px;

  height: 4px;

  background: var(--neon-cyan);

  box-shadow: 0 0 8px var(--neon-cyan);

  border-radius: 50%;

}



/* 1. Sloupec - Brand */

.footer-logo-text {

  font-family: "Space Mono", monospace;

  font-weight: 700;

  font-size: 1.1rem;

  color: var(--text-main);

  margin-bottom: 1rem;

  letter-spacing: 0.05em;

  background: linear-gradient(90deg, var(--neon-cyan), var(--text-main));

  -webkit-background-clip: text;

  color: transparent;

}



.footer-desc {

  color: var(--text-muted);

  line-height: 1.6;

  font-size: 0.86rem;

  margin-bottom: 1.5rem;

  max-width: 320px;

}



/* Sociální sítě */

.footer-socials {

  display: flex;

  gap: 0.8rem;

}



.social-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: var(--text-muted);

  transition: var(--transition-fast);

}



.social-link:hover {

  border-color: var(--neon-cyan);

  background: rgba(0, 216, 255, 0.1);

  color: var(--neon-cyan);

  box-shadow: 0 0 15px rgba(0, 216, 255, 0.3);

  transform: translateY(-3px);

  text-shadow: none; /* Resetuje defaultní a:hover stín */

}



/* Seznamy odkazů */

.footer-links, .contact-links-list, .hours-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.footer-links li {

  margin-bottom: 0.7rem;

}



.footer-links a {

  color: var(--text-muted);

  transition: padding-left var(--transition-fast), color var(--transition-fast);

  display: inline-block;

}



.footer-links a:hover {

  color: var(--neon-cyan);

  padding-left: 5px;

  text-shadow: 0 0 8px rgba(0, 216, 255, 0.6);

}



/* Kontakt */

.contact-links-list li {

  display: flex;

  align-items: flex-start;

  gap: 0.8rem;

  margin-bottom: 0.9rem;

  color: var(--text-muted);

}



.contact-links-list .icon {

  width: 18px;

  height: 18px;

  color: var(--neon-pink); /* Růžové ikony pro kontrast */

  flex-shrink: 0;

  margin-top: 3px;

}



.contact-links-list a {

  color: var(--text-main);

  font-weight: 500;

}



.contact-links-list a:hover {

  color: var(--neon-cyan);

}



/* Otevírací doba */

.hours-list li {

  display: flex;

  justify-content: space-between;

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  padding-bottom: 0.5rem;

  margin-bottom: 0.6rem;

  color: var(--text-muted);

}



.hours-list strong {

  color: var(--text-main);

}



.footer-ico {

  font-size: 0.75rem;

  color: var(--text-muted);

  margin-top: 1rem;

  opacity: 0.6;

}



/* Spodní lišta */

.footer-bottom {

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  padding-top: 1.5rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 0.8rem;

  color: var(--text-muted);

}



.legal-links a {

  color: var(--text-muted);

  margin-left: 1.5rem;

}



.legal-links a:hover {

  color: var(--neon-cyan);

}



/* Responsive */

@media (max-width: 992px) {

  .footer-grid {

    grid-template-columns: 1fr 1fr; /* Tablet: 2x2 */

    gap: 2rem;

  }

}



@media (max-width: 580px) {

  .footer-grid {

    grid-template-columns: 1fr; /* Mobil: vše pod sebou */

    gap: 2.5rem;

  }

  

  .footer-bottom {

    flex-direction: column;

    gap: 1rem;

    text-align: center;

  }



  .legal-links a {

    margin: 0 0.8rem;

  }

}



/* ------------------------ 404 page ------------------------- */



.error-page {

  min-height: calc(100vh - 140px);

  display: flex;

  align-items: center;

  padding: 3rem 0 4rem;

}



.error-inner {

  max-width: 540px;

}



.error-code {

  font-family: "Inter", system-ui, sans-serif;

  font-weight: 700;

  font-size: 4rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  background: linear-gradient(120deg, var(--neon-cyan), var(--neon-pink));

  -webkit-background-clip: text;

  color: transparent;

  margin-bottom: 0.6rem;

  text-shadow: 0 0 24px rgba(0, 216, 255, 0.7);

}



.error-text {

  color: var(--text-muted);

  font-size: 0.95rem;

  margin-bottom: 1.6rem;

}



/* ------------------------ Responsive ------------------------- */



@media (max-width: 960px) {

  .hero-grid,

  .about-layout,

  .contact-layout {

    grid-template-columns: minmax(0, 1fr);

  }



  .hero {

    padding-bottom: 3.3rem;

  }



  .header-inner {

    flex-direction: column;

    align-items: flex-start;

  }



  .main-nav {

    font-size: 0.75rem;

  }



  .card-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media (max-width: 640px) {

  .card-grid {

    grid-template-columns: minmax(0, 1fr);

  }



  .field-group {

    flex-direction: column;

  }



  .hero-card-body {

    grid-template-columns: minmax(0, 1fr);

  }



  .hero-card {

    margin-top: 1.2rem;

  }

  .pricing-header {

    display: none;

  }

  .pricing-row {

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

    padding: 1rem 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  }

  .pricing-row span:nth-child(1) {

    font-weight: 600;

    font-size: 0.95rem;

    color: var(--text-main);

  }

  .pricing-row span:nth-child(2) {

    font-size: 0.85rem;

    color: var(--text-muted);

    line-height: 1.4;

  }

  .pricing-row span:nth-child(3) {

    text-align: left;

    font-size: 1rem;

    font-weight: 600;

    color: var(--neon-pink);

    margin-top: 0.2rem;

  }

  .pricing-category {

    font-size: 0.95rem;

    margin: 1.5rem 0 0.8rem;

    padding-bottom: 0.5rem;

    border-bottom: 1px solid rgba(0, 216, 255, 0.3);

  }

  .pricing-category:first-child {

    margin-top: 0;

  }

  .pricing-card {

    padding: 1.2rem 1rem;

  }

  .pricing-list {

    font-size: 0.9rem;

  }

}






/* ------------------------ Cookie Banner ------------------------- */

.cookie-banner {

  position: fixed;

  bottom: 20px;

  left: 20px;

  right: 20px;

  max-width: 500px;

  background: rgba(14, 18, 36, 0.95);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(0, 216, 255, 0.3);

  border-radius: 16px;

  padding: 1.5rem;

  z-index: 10000; /* Nad sněhem i vším ostatním */

  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 216, 255, 0.15);

  display: flex;

  flex-direction: column;

  gap: 1rem;

  transform: translateY(150%);

  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);

}



.cookie-banner.is-visible {

  transform: translateY(0);

}



.cookie-title {

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-weight: 700;

  color: var(--text-main);

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.cookie-text {

  font-size: 0.85rem;

  color: var(--text-muted);

  line-height: 1.5;

}



.cookie-actions {

  display: flex;

  gap: 0.8rem;

  margin-top: 0.5rem;

}



.btn-cookie-accept {

  background: var(--neon-cyan);

  color: #000;

  border: none;

  padding: 0.5rem 1rem;

  border-radius: 99px;

  font-weight: 700;

  font-size: 0.8rem;

  cursor: pointer;

  transition: 0.2s;

}



.btn-cookie-accept:hover {

  background: #fff;

  box-shadow: 0 0 10px rgba(0, 216, 255, 0.6);

}



.btn-cookie-reject {

  background: transparent;

  color: var(--text-muted);

  border: 1px solid rgba(255, 255, 255, 0.2);

  padding: 0.5rem 1rem;

  border-radius: 99px;

  font-size: 0.8rem;

  cursor: pointer;

  transition: 0.2s;

}



.btn-cookie-reject:hover {

  border-color: var(--text-main);

  color: var(--text-main);

}



@media (max-width: 600px) {

  .cookie-banner {

    left: 10px; right: 10px; bottom: 10px;

  }

}

/* ============================================================================
   Additional styles from PHP files - moved to CSS for better organization
   ============================================================================ */

/* Pricing Category */
.pricing-category {
  margin: 1.2rem 0 0.4rem;
  font-size: 1.05rem;
  color: var(--neon-cyan);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* Card Grid with margin */
.card-grid.mt-2 {
  margin-top: 2rem;
}

/* Glass Card with margin */
.glass-card.mt-2 {
  margin-top: 2rem;
}

/* Privacy Policy styles */
.privacy-content {
  margin-top: 2rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.privacy-content h3 {
  color: var(--text-main);
  margin-bottom: 1rem;
}

.privacy-content h3:first-child {
  margin-top: 0;
}

.privacy-content h3:not(:first-child) {
  margin-top: 2rem;
}

.privacy-content p {
  margin-bottom: 1rem;
}

.privacy-content ul {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.privacy-content hr {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 2rem 0;
  border: none;
}

/* Alert Box styles */
.alert-box { 
  padding: 20px; 
  margin-bottom: 30px; 
  border-radius: 16px; 
  text-align: center; 
  font-weight: 500; 
  backdrop-filter: blur(10px);
  border: 1px solid;
  animation: fadeUp 0.5s ease-out forwards;
}

.alert-success { 
  background: rgba(0, 216, 255, 0.1); 
  border-color: rgba(0, 216, 255, 0.4); 
  color: #ccf9ff; 
  box-shadow: 0 0 20px rgba(0, 216, 255, 0.15);
}

.alert-error { 
  background: rgba(255, 59, 215, 0.1); 
  border-color: rgba(255, 59, 215, 0.4); 
  color: #ffdcf6;
  box-shadow: 0 0 20px rgba(255, 59, 215, 0.15);
}

/* Author Link */
.author-link:hover {
  color: var(--neon-cyan) !important;
}

/* Cookie link */
.cookie-text a {
  text-decoration: underline;
}

/* Footer inline styles converted to classes */
.footer-address-sub {
  color: var(--text-muted);
  font-size: 0.8em;
}

.footer-hours-label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text-muted);
}

.footer-hours-main {
  font-size: 1.1em;
  color: var(--neon-cyan);
}

.footer-hours-note {
  border: none;
  padding-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.footer-hours-item {
  display: block;
  border: none;
  padding-bottom: 0;
}

.legal-links {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.legal-links-separator {
  color: var(--text-muted);
  opacity: 0.5;
}

.author-link-text {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9em;
  transition: color 0.3s ease;
}

/* Social Media Gallery Styles */
:root {
  --ig-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --fb-gradient: linear-gradient(45deg, #1877F2 0%, #0056b3 100%);
  --bg-card-social: #0b0e17;
  --border-color-social: rgba(255,255,255,.08);
}

.social-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

.social-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.social-links-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.social-handle {
  font-family: 'Space Mono', monospace;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.handle-ig { 
  color: var(--neon-cyan, #00d8ff); 
}

.handle-fb { 
  color: #1877F2; 
}

.social-handle:hover { 
  opacity: 0.8; 
}

.embed-wrapper {
  background: var(--bg-card-social);
  border: 1px solid var(--border-color-social);
  border-radius: 24px;
  padding: 50px 20px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}

.fallback-content {
  text-align: center;
  max-width: 600px;
  z-index: 2;
}

.icons-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 1.5rem;
}

.icon-large {
  width: 60px;
  height: 60px;
  stroke: rgba(255,255,255,0.9);
  filter: drop-shadow(0 0 15px rgba(255,255,255,0.15));
}

.fallback-title {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.fallback-text {
  color: var(--text-muted, #94a3b8);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.btn-row {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: white;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
}

.btn-ig {
  background: var(--ig-gradient);
}

.btn-ig:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px -5px rgba(220, 39, 67, 0.5);
}

.btn-fb {
  background: var(--fb-gradient);
}

.btn-fb:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px -5px rgba(24, 119, 242, 0.5);
}

.social-btn:active { 
  transform: translateY(-1px); 
}

.bg-deco {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(0,0,0,0) 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 768px) {
  .embed-wrapper {
    padding: 30px 15px;
  }

  .btn-row {
    flex-direction: column;
    width: 100%;
  }

  .social-btn {
    justify-content: center;
    width: 100%;
  }
}