/* =========================================================

   RESET / ZÁKLAD

========================================================= */

* {

  box-sizing: border-box;

}



html,

body {

  margin: 0;

  width: 100%;

  min-height: 100%;

}



html {

  scroll-behavior: smooth;

}



body {

  font-family: Arial, sans-serif;

  color: #eaf6ff;

  background:

    linear-gradient(rgba(10, 25, 50, 0.35), rgba(10, 25, 50, 0.35)),

    url("assets/bg.webp") center center / cover no-repeat fixed;



    

    

}





/* =========================================================

   TOP BAR

========================================================= */

#topbar {

  position: sticky;

  top: 0;

  z-index: 2000;

  width: 100%;

  min-height: 78px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  padding: 12px 20px;

  background: rgba(40, 106, 180, 0.72);

  backdrop-filter: blur(6px);

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

  border-bottom: 1px solid rgba(110, 190, 255, 0.22);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);

}



#scene-card {

  scroll-margin-top: 90px;

}



.topbar-left,

.topbar-center,

.topbar-right {

  display: flex;

  align-items: center;

  min-width: 0;

}



.topbar-left {

  flex: 0 1 auto;

}



.topbar-center {

  flex: 1 1 auto;

  justify-content: center;

}



.topbar-right {

  flex: 0 1 auto;

  justify-content: flex-end;

}



.topbar-logo {

  font-family: 'Inter', Arial, sans-serif;

  font-size: 34px;

  font-weight: 400;

  letter-spacing: 0.4px;

  color: #ffffff;

  text-transform: uppercase;

  white-space: nowrap;

}



.topbar-title {

  text-align: center;

  font-size: 30px;

  font-weight: 600;

  letter-spacing: 2px;

  color: #dff3ff;

  white-space: nowrap;

}



.topbar-nav {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 10px;

}



.topbar-btn,

.menu-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 44px;

  padding: 12px 16px;

  border: 1px solid rgba(120, 190, 255, 0.35);

  border-radius: 12px;

  background: rgba(20, 35, 60, 0.36);

  backdrop-filter: blur(8px);

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

  color: #ffffff;

  font-size: 15px;

  font-weight: 600;

  text-align: center;

  cursor: pointer;

  transition:

    background 0.2s ease,

    border-color 0.2s ease,

    transform 0.2s ease;

}



.topbar-btn:hover,

.menu-btn:hover {

  background: rgba(35, 60, 95, 0.65);

  border-color: rgba(120, 190, 255, 0.7);

  transform: translateY(-1px);

}



.topbar-btn.active,

.menu-btn.active {

  background: rgba(50, 90, 140, 0.75);

  border-color: rgba(160, 220, 255, 0.95);

}





/* =========================================================

   WORKSPACE

========================================================= */

#workspace {

  width: 100%;

  padding: 28px 24px 60px;

}





/* =========================================================

   HERO SHELL

========================================================= */

.hero-shell {

  position: relative;

  width: min(1800px, calc(100vw - 48px));

  margin: 0 auto 28px auto;

  padding: 14px;

  border-radius: 28px;

  background: rgba(255, 255, 255, 0.045);

  backdrop-filter: blur(6px);

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

  border: 1px solid rgba(120, 180, 255, 0.22);

  box-shadow:

    0 0 0 1px rgba(120, 180, 255, 0.08),

    0 24px 80px rgba(0, 0, 0, 0.42),

    inset 0 0 28px rgba(120, 180, 255, 0.06);

}



.hero-shell::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 28px;

  pointer-events: none;

  box-shadow:

    0 0 28px rgba(120, 180, 255, 0.16),

    0 0 64px rgba(120, 180, 255, 0.08);

}



.hero-top-panel {

  position: relative;

  z-index: 1;

  margin-bottom: 14px;

  min-height: 74px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 18px 24px;

  border-radius: 20px;

  background: rgba(49, 146, 194, 0.479);

  border: 1px solid rgba(120, 190, 255, 0.30);

}



.hero-top-panel-text {

  color: #ffffff;

  font-size: 20px;

  font-weight: 700;

  text-align: center;

  line-height: 1.4;

}



.hero-layout {

  position: relative;

  z-index: 1;

  display: grid;

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

  gap: 18px;

  align-items: stretch;

}





/* =========================================================

   BROKER CARD

========================================================= */

.broker-card {

  position: relative;

  min-width: 0;

  height: 100%;

}



.broker-card-inner {

  position: relative;

  height: 100%;

  min-height: 100%;

  display: flex;

  flex-direction: column;

  padding: 18px;

  border-radius: 24px;

  background: rgba(41, 40, 40, 0.507);

  backdrop-filter: blur(6px);

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

  border: 1px solid rgba(120, 180, 255, 0.22);

  box-shadow:

    0 0 0 1px rgba(120, 180, 255, 0.08),

    inset 0 0 28px rgba(120, 180, 255, 0.05);

}



.broker-card-inner::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 24px;

  pointer-events: none;

  box-shadow:

    0 0 28px rgba(120, 180, 255, 0.16),

    0 0 64px rgba(120, 180, 255, 0.08);

}



.broker-photo-wrap {

  width: 100%;

  height: 100%;

  min-height: 150px;

  margin-bottom: 18px;

  border-radius: 22px;

  overflow: hidden;

  background: rgba(20, 35, 60, 0.35);

  border: 1px solid rgba(120, 190, 255, 0.18);

}



.broker-photo {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.broker-info {

  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  height: 100%;

}



.broker-label {

  margin: 0 0 10px 0;

  color: #a9ddff;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 1.4px;

  text-transform: uppercase;

}



.broker-name {

  margin: 0 0 10px 0;

  color: #ffffff;

  font-size: 34px;

  line-height: 1.1;

  text-align: left;

}



.broker-role {

  margin: 0 0 16px 0;

  color: #d8efff;

  font-size: 18px;

  font-weight: 700;

}



.broker-text {

  margin: 0 0 18px 0;

  color: #e7f3ff;

  font-size: 17px;

  line-height: 1.65;

}



.broker-contact-box {

  margin: 0 0 18px 0;

  padding: 16px 18px;

  border-radius: 18px;

  background: rgba(20, 35, 60, 0.32);

  border: 1px solid rgba(120, 190, 255, 0.16);

}



.broker-contact-box p {

  margin: 0 0 10px 0;

  color: #eaf6ff;

  font-size: 15px;

  line-height: 1.5;

}



.broker-contact-box p:last-child {

  margin-bottom: 0;

}



.broker-cta {

  margin-top: auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  min-height: 48px;

  padding: 14px 18px;

  border: 1px solid rgba(120, 190, 255, 0.45);

  border-radius: 14px;

  background: rgba(35, 76, 122, 0.72);

  color: #ffffff;

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  transition:

    background 0.2s ease,

    border-color 0.2s ease,

    transform 0.2s ease;

}



.broker-cta:hover {

  background: rgba(48, 98, 155, 0.85);

  border-color: rgba(160, 220, 255, 0.95);

  transform: translateY(-1px);

}





/* =========================================================

   TABULE

========================================================= */

.main-card {

  position: relative;

  min-width: 0;

  padding: 0;

  border-radius: 24px;

  background: transparent;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

  border: 0;

  box-shadow: none;

}



.main-card::before {

  content: none;

}



#scene {

  background-image: url('assets/bg.webp');

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  border-radius: 20px;

  overflow: hidden;

  background-color: #7687ad;



  background-size: contain;

  background-position: center top; /* 🔥 změna */

  background-repeat: no-repeat;

}



.logos-frame {

  margin-top: 14px;

  min-height: 92px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 18px 24px;

  border-radius: 20px;

  background: rgba(12, 12, 12, 0.897);

  backdrop-filter: blur(6px);

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

  border: 1px solid rgba(41, 38, 194, 0.781);

  box-shadow:

    0 0 0 1px rgba(40, 104, 182, 0.589),

    0 12px 30px rgba(44, 31, 168, 0.16),

    inset 0 0 20px rgba(19, 94, 185, 0.04);

}



.info-text {

  width: 100%;

  color: #eaf6ff;

  font-size: 28px;

  font-weight: 700;

  line-height: 1.4;

  text-align: center;

}





/* =========================================================

   LOGA POJIŠŤOVEN

========================================================= */

.insurance-logos-card {

  padding: 20px 24px;

}



.insurance-logos-card::before {

  content: none;

}



.insurance-logos-head {

  position: relative;

  z-index: 1;

  margin-bottom: 14px;

}



.insurance-logos-head h2 {

  margin: 0 0 6px 0;

  color: #ffffff;

  font-size: 24px;

  line-height: 1.2;

}



.insurance-logos-head p {

  margin: 0;

  color: #ffffff;

  font-size: 14px;

}



.insurance-logos-scroll {

  position: relative;

  z-index: 1;

  overflow-x: auto;

  overflow-y: hidden;

  padding-bottom: 6px;

  scrollbar-width: thin;

  scrollbar-color: rgba(140, 210, 255, 0.7) rgba(20, 35, 60, 0.18);

}



.insurance-logos-scroll::-webkit-scrollbar {

  height: 10px;

}



.insurance-logos-scroll::-webkit-scrollbar-track {

  background: rgba(20, 35, 60, 0.18);

  border-radius: 999px;

}



.insurance-logos-scroll::-webkit-scrollbar-thumb {

  background: rgba(140, 210, 255, 0.7);

  border-radius: 999px;

}



.insurance-logos-track {

  display: flex;

  gap: 14px;

  width: max-content;

  min-width: 100%;

}



.insurance-logo-item {

  flex: 0 0 140px;

  height: 90px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 14px;

  border-radius: 18px;

  background: rgb(255, 255, 255);

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

}



.insurance-logo-item img {

  display: block;

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

  filter: drop-shadow(0 2px 10px rgb(255, 255, 255));

}





/* =========================================================

   HLAVNÍ KARTY

========================================================= */

.content-card {

  position: relative;

  min-width: 0;

  width: min(1800px, calc(100vw - 48px));

  margin: 0 auto 28px auto;

  padding: 32px;

  border-radius: 28px;

  background: rgba(58, 54, 54, 0.911);

  backdrop-filter: blur(6px);

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

  border: 1px solid rgba(120, 180, 255, 0.22);

  box-shadow:

    0 0 0 1px rgba(120, 180, 255, 0.08),

    0 24px 80px rgba(0, 0, 0, 0.30),

    inset 0 0 28px rgba(120, 180, 255, 0.05);

  scroll-margin-top: 110px;

}



.content-card::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 28px;

  pointer-events: none;

  box-shadow:

    0 0 28px rgba(5, 115, 226, 0.507),

    0 0 64px rgba(27, 131, 216, 0.507);

}



.content-card h1,

.content-card h2 {

  margin-top: 0;

  margin-bottom: 14px;

  color: #f19a17;

  font-size: 34px;

  letter-spacing: 0.5px;

  text-align: center;

  font-size: 45px;

}







.content-card p {

  margin: 0 0 14px 0;

  color: #ffffff;

  font-size: 25px;

  line-height: 1.7;

}



.service-detail-card {

  padding: 28px 32px;

}



.service-detail-head {

  display: flex;

  flex-direction: column;   /* 🔥 klíč */

  align-items: center;

  text-align: center;

  gap: 10px;

}



.service-detail-icon {

  width: 82px;

  height: 82px;

  object-fit: contain;

  flex: 0 0 auto;

}









/* =========================================================

   SCÉNA - ASSETY

========================================================= */

.asset {

  position: absolute;

  display: block;

  border-radius: 20px;

  user-select: none;

  -webkit-user-drag: none;

  touch-action: pan-y;

  cursor: default;

  transform-origin: center center;

  transition:

    transform 0.18s ease,

    filter 0.18s ease,

    box-shadow 0.18s ease;

}



.asset.selected {

  outline: 2px solid rgba(0, 200, 255, 0.9);

  outline-offset: 2px;

}



.asset.is-clickable {

  cursor: pointer;

}



.asset.is-clickable:hover {

  transform: scale(1.04);

  filter: brightness(1.08);

}



.asset.is-clickable:focus-visible {

  outline: 2px solid rgba(160, 220, 255, 0.95);

  outline-offset: 3px;

}



.asset.pulse-click {

  animation: iconPulse 0.28s ease;

}



@keyframes iconPulse {

  0% {

    transform: scale(1);

  }

  50% {

    transform: scale(1.08);

  }

  100% {

    transform: scale(1);

  }

}



.drag-bg #scene {

  outline: 2px dashed rgba(120, 190, 255, 0.6);

  outline-offset: -10px;

}





/* =========================================================

   FOOTER

========================================================= */

.site-footer {

  width: min(1800px, calc(100vw - 48px));

  margin: 10px auto 28px auto;

  padding: 18px 20px;

  text-align: center;

  color: #eaf6ff;

  font-size: 15px;

  line-height: 1.5;

  border-radius: 18px;

  background: rgba(20, 35, 60, 0.28);

  border: 1px solid rgba(120, 180, 255, 0.18);

  backdrop-filter: blur(6px);

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

}





/* =========================================================

   MENŠÍ DESKTOP

========================================================= */

@media (max-width: 1500px) {

  .topbar-logo {

    font-size: 30px;

  }



  .topbar-title {

    font-size: 26px;

  }



  .topbar-btn,

  .menu-btn {

    font-size: 14px;

    padding: 11px 14px;

  }



  .hero-layout {

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

  }



  .broker-name {

    font-size: 30px;

  }



  .info-text {

    font-size: 24px;

  }

}





/* =========================================================

   TABLET / UŽŠÍ NOTEBOOK

========================================================= */

@media (max-width: 1200px) {

  #topbar {

    align-items: flex-start;

    flex-wrap: wrap;

  }



  .topbar-left,

  .topbar-center,

  .topbar-right {

    width: 100%;

    justify-content: center;

  }



  .topbar-logo,

  .topbar-title {

    text-align: center;

    white-space: normal;

  }



  .topbar-nav {

    justify-content: center;

  }



  .hero-shell {

    width: min(1800px, calc(100vw - 40px));

  }



  .hero-top-panel-text {

    font-size: 18px;

  }



  .hero-layout {

    grid-template-columns: 1fr;

    gap: 20px;

  }



  .broker-card {

    order: 1;

  }



  .main-card {

    order: 2;

  }



  .broker-card-inner {

    display: grid;

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

    gap: 20px;

    align-items: start;

  }



  .broker-photo-wrap {

    margin-bottom: 0;

  }



  .broker-name {

    font-size: 30px;

  }



  .content-card {

    padding: 28px;

  }

}





/* =========================================================

   MOBIL / MENŠÍ TABLET

========================================================= */

@media (max-width: 900px) {

  #workspace {

    padding: 18px 16px 40px;

  }



  .hero-shell,

  .content-card,

  .site-footer {

    width: 100%;

  }



  .hero-top-panel {

    min-height: 64px;

    padding: 14px 16px;

    border-radius: 16px;

  }



  .hero-top-panel-text {

    font-size: 16px;

  }



  .hero-layout {

    grid-template-columns: 1fr;

    gap: 16px;

  }



  .broker-card-inner {

    grid-template-columns: 1fr;

  }



  .broker-photo {

    aspect-ratio: 16 / 10;

  }



  .content-card {

    margin: 0 0 24px 0;

    padding: 22px 18px;

    border-radius: 22px;

  }



  .content-card::before {

    border-radius: 22px;

  }



  .broker-card-inner {

    border-radius: 22px;

  }



  .broker-card-inner::before {

    border-radius: 22px;

  }



  #scene {

    aspect-ratio: 16 / 10;

    border-radius: 16px;

  }



  .logos-frame {

    padding: 16px 18px;

    min-height: 80px;

    border-radius: 16px;

  }



  .info-text {

    font-size: 18px;

  }



  .content-card h1,

  .content-card h2 {

    font-size: 24px;

  }



  .content-card p {

    font-size: 16px;

  }



  .service-detail-card {

    padding: 28px 32px;

    height: 100%;

    display: flex;

    flex-direction: column;

  }



  .service-detail-head {

    gap: 14px;

    margin-bottom: 14px;

  }



  .service-detail-icon {

    width: 56px;

    height: 56px;

  }



  .broker-name {

    font-size: 28px;

  }



  .broker-role {

    font-size: 17px;

  }



  .broker-text {

    font-size: 16px;

  }



  .broker-contact-box p {

    font-size: 14px;

  }



  .insurance-logos-card {

    padding: 16px;

  }



  .insurance-logos-head h2 {

    font-size: 20px;

  }



  .insurance-logo-item {

    flex: 0 0 120px;

    height: 78px;

    padding: 12px;

    border-radius: 16px;

  }

}





/* =========================================================

   MALÝ MOBIL

========================================================= */

@media (max-width: 700px) {

  #topbar {

    padding: 14px 12px;

    gap: 12px;

  }



  .topbar-logo {

    font-size: 24px;

  }



  .topbar-title {

    font-size: 20px;

    letter-spacing: 1px;

  }



  .topbar-nav {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

  }



  .topbar-btn,

  .menu-btn {

    width: 100%;

    min-height: 42px;

    padding: 10px 12px;

    font-size: 14px;

  }



  #workspace {

    padding: 14px 8px 32px;

  }



  .broker-card-inner {

    padding: 16px;

  }



  .broker-name {

    font-size: 24px;

  }



  .broker-role {

    font-size: 16px;

  }



  .content-card {

    padding: 20px 16px;

  }



  .content-card h1,

  .content-card h2 {

    font-size: 22px;

  }



  .content-card p {

    font-size: 15px;

  }



  .info-text {

    font-size: 17px;

  }



  .site-footer {

    padding: 16px 14px;

    font-size: 13px;

  }



  .insurance-logos-head h2 {

    font-size: 18px;

  }



  .insurance-logos-head p {

    font-size: 13px;

  }



  .insurance-logo-item {

    flex: 0 0 110px;

    height: 72px;

    padding: 10px;

  }

}



.card-text {

  margin: 0;

  line-height: 1.7;

  transition: all 0.25s ease;

}



.card-text.collapsed {

  display: -webkit-box;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;

  overflow: hidden;

  position: relative;

}



.card-text.collapsed::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 3.5rem;

  pointer-events: none;

  

}



.card-text.expanded {

  display: block;

  overflow: visible;

}



.read-more {

  margin-top: 12px;

  padding: 0;

  border: none;

  background: none;

  color: #60a5fa;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

}



.read-more:hover {

  text-decoration: underline;

}



.services-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 20px;

  margin-top: 20px;

}



.services-grid > .service-detail-card {

  width: 100%;

  margin: 0;

  height: 100%;

  display: flex;

  flex-direction: column;

}



@media (min-width: 900px) {

  .services-grid {

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

    align-items: stretch;

  }



  /* 🔥 vystředění poslední karty */

  .services-grid > .service-detail-card:last-child {

    grid-column: 2 / 3;

  }

}



.service-detail-view[hidden] {

  display: none;

}



.back-to-services {

  margin-bottom: 18px;

  padding: 12px 16px;

  border: 1px solid rgba(120, 190, 255, 0.35);

  border-radius: 12px;

  background: rgba(20, 35, 60, 0.36);

  color: #ffffff;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

}



.back-to-services:hover {

  background: rgba(35, 60, 95, 0.65);

}



.service-detail-view .service-detail-card {

  width: 100%;

  max-width: 900px;

  margin: 0;

}



/* ===== SERVICE DETAIL VIEW FIX ===== */



.services-grid[hidden] {

  display: none;

}



.service-detail-view {

  width: 100%;

}



.service-detail-view .service-detail-card {

  width: 100%;

  min-height: 100%;

  margin: 0 auto; 

}



.service-detail-view .card-text {

  display: block !important;

  -webkit-line-clamp: unset;

  overflow: visible;

}



.service-detail-view .read-more {

  display: none;

}



.contact-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 24px;

  margin-top: 18px;

}



.contact-info-box {

  padding: 20px;

  border-radius: 20px;

  background: rgba(20, 35, 60, 0.28);

  border: 1px solid rgba(120, 180, 255, 0.18);

}



.contact-info-box p {

  margin: 0 0 12px 0;

}



.contact-info-box a {

  color: #8fd3ff;

  text-decoration: none;

}



.contact-info-box a:hover {

  text-decoration: underline;

}



.contact-form {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.form-row {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.form-row label {

  font-size: 15px;

  font-weight: 700;

  color: #dff3ff;

}



.form-row input,

.form-row textarea {

  width: 100%;

  padding: 14px 16px;

  border: 1px solid rgba(120, 190, 255, 0.30);

  border-radius: 14px;

  background: rgba(20, 35, 60, 0.45);

  color: #ffffff;

  font: inherit;

  outline: none;

}



.form-row input:focus,

.form-row textarea:focus {

  border-color: rgba(160, 220, 255, 0.9);

  box-shadow: 0 0 0 3px rgba(120, 190, 255, 0.15);

}



.form-row textarea {

  resize: vertical;

  min-height: 140px;

}



.contact-submit {

  align-self: flex-start;

  min-height: 46px;

  padding: 12px 18px;

  border: 1px solid rgba(120, 190, 255, 0.45);

  border-radius: 14px;

  background: rgba(35, 76, 122, 0.72);

  color: #ffffff;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

  transition: background 0.2s ease, transform 0.2s ease;

}



.contact-submit:hover {

  background: rgba(48, 98, 155, 0.85);

  transform: translateY(-1px);

}



.form-status {

  margin: 6px 0 0 0;

  font-size: 14px;

  color: #bfe7ff;

}



@media (min-width: 900px) {

  .contact-grid {

    grid-template-columns: 0.95fr 1.25fr;

    align-items: start;

  }

}





.about-card p {

  max-width: 900px;

  margin-left: auto;

  margin-right: auto;

  

}



.about-card button {

  display: block;

  margin: 10px auto 0 auto;

}



.contact-socials a svg {

  width: 20px;

  height: 20px;

}



.gdpr-row {

  margin-top: 4px;

}



.gdpr-check {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  font-size: 14px;

  line-height: 1.5;

  color: #dff3ff;

  cursor: pointer;

}



.gdpr-check input[type="checkbox"] {

  width: 18px;

  height: 18px;

  margin-top: 2px;

  flex: 0 0 18px;

}



.gdpr-check a {

  color: #8fd3ff;

  text-decoration: underline;

}



.hp-field {

  position: absolute !important;

  left: -9999px !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



.vehicle-form-section {

  overflow: hidden;

}



.vehicle-form-head {

  margin-bottom: 20px;

}



.vehicle-form-head h2 {

  margin: 0 0 10px 0;

}



.vehicle-form-head p {

  margin: 0;

  color: #d8efff;

  line-height: 1.6;

}



.vehicle-form-switch {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin: 0 0 22px 0;

}



.vehicle-type-btn {

  min-height: 46px;

  padding: 12px 18px;

  border: 1px solid rgba(120, 190, 255, 0.35);

  border-radius: 14px;

  background: rgba(20, 35, 60, 0.36);

  color: #ffffff;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

  transition:

    background 0.2s ease,

    border-color 0.2s ease,

    transform 0.2s ease;

}



.vehicle-type-btn:hover {

  background: rgba(35, 60, 95, 0.65);

  border-color: rgba(120, 190, 255, 0.7);

  transform: translateY(-1px);

}



.vehicle-type-btn.active {

  background: rgba(50, 90, 140, 0.75);

  border-color: rgba(160, 220, 255, 0.95);

}



.vehicle-insurance-form {

  padding: 22px;

  border-radius: 22px;

  background: rgba(20, 35, 60, 0.20);

  border: 1px solid rgba(120, 180, 255, 0.16);

}



.form-section-title {

  margin: 8px 0 2px 0;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(120, 190, 255, 0.18);

  color: #a9ddff;

  font-size: 14px;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;

}



.form-grid-2 {

  display: grid;

  grid-template-columns: 1fr;

  gap: 16px;

}



.gdpr-row {

  margin-top: 4px;

}



.gdpr-check {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  font-size: 14px;

  line-height: 1.5;

  color: #dff3ff;

  cursor: pointer;

}



.gdpr-check input[type="checkbox"] {

  width: 18px;

  height: 18px;

  margin-top: 2px;

  flex: 0 0 18px;

}



.gdpr-check a {

  color: #8fd3ff;

  text-decoration: underline;

}



.hp-field {

  position: absolute !important;

  left: -9999px !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



@media (min-width: 760px) {

  .form-grid-2 {

    grid-template-columns: 1fr 1fr;

  }

}



.vehicle-toggle {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;



  padding: 18px 20px;

  border-radius: 18px;

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



  background: rgba(30, 87, 184, 0.644);

  color: #ffffff;



  font-size: 18px;

  font-weight: 800;

  cursor: pointer;



  transition: 0.2s;

}



.vehicle-toggle:hover {

  background: rgba(40, 70, 110, 0.6);

}



.vehicle-toggle-icon {

  font-size: 22px;

  transition: transform 0.2s ease;

}



.vehicle-form-wrapper {

  overflow: hidden;

  transition: max-height 0.3s ease;

}



/* zavřený stav */

.vehicle-form-section.collapsed .vehicle-form-wrapper {

  max-height: 0;

  padding: 0 20px;

}



/* otevřený stav */

.vehicle-form-section.open .vehicle-form-wrapper {

  max-height: 2000px;

  margin-top: 20px;

}



/* otočení ikonky */

.vehicle-form-section.open .vehicle-toggle-icon {

  transform: rotate(45deg);

}



.vehicle-card-header {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 16px;

}





.vehicle-card-title-wrap h2 {

  margin: 0 0 8px 0;

  

  

}



.vehicle-card-title-wrap {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  text-align: center;

}



/* tlačítko zůstane vpravo */

.vehicle-open-btn {

  margin-top: auto;

}



.vehicle-card-title-wrap p {

  margin: 0;

  color: #d8efff;

  line-height: 1.6;

  

}



.vehicle-open-btn {

  align-self: flex-start;

  min-height: 48px;

  padding: 12px 20px;

  border: 1px solid rgba(120, 190, 255, 0.35);

  border-radius: 14px;

  background: rgba(50, 90, 140, 0.75);

  color: #ffffff;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

  transition: 0.2s ease;

}



.vehicle-open-btn:hover {

  background: rgba(65, 110, 170, 0.85);

  border-color: rgba(160, 220, 255, 0.95);

}



.vehicle-form-wrap {

  margin-top: 22px;

}



.vehicle-form-wrap.hidden {

  display: none;

}



.vehicle-form-switch {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin: 0 0 22px 0;

}



.vehicle-type-btn {

  min-height: 46px;

  padding: 12px 18px;

  border: 1px solid rgba(120, 190, 255, 0.35);

  border-radius: 14px;

  background: rgba(20, 35, 60, 0.36);

  color: #ffffff;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

  transition: 0.2s ease;

}



.vehicle-type-btn:hover {

  background: rgba(35, 60, 95, 0.65);

  border-color: rgba(120, 190, 255, 0.7);

}



.vehicle-type-btn.active {

  background: rgba(50, 90, 140, 0.75);

  border-color: rgba(160, 220, 255, 0.95);

}



.vehicle-insurance-form {

  padding: 22px;

  border-radius: 22px;

  background: rgba(20, 35, 60, 0.20);

  border: 1px solid rgba(120, 180, 255, 0.16);

}



.form-section-title {

  margin: 8px 0 2px 0;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(120, 190, 255, 0.18);

  color: #a9ddff;

  font-size: 14px;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;

}



.form-grid-2 {

  display: grid;

  grid-template-columns: 1fr;

  gap: 16px;

}



.vehicle-form-section {

  overflow: hidden;

  padding: 40px 32px;

}



.vehicle-card-header {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 18px;

}



.vehicle-card-title-wrap {

  position: static;

  transform: none;

  text-align: center;

  max-width: 760px;

}



.vehicle-card-title-wrap h2 {

  margin: 0 0 10px 0;

}



.vehicle-card-title-wrap p {

  margin: 0;

  color: #d8efff;

  line-height: 1.6;

}



.vehicle-open-btn {

  align-self: center;

  margin-top: 8px;

  min-height: 58px;

  padding: 16px 34px;

  border: 1px solid rgba(120, 190, 255, 0.35);

  border-radius: 16px;

  background: rgba(50, 90, 140, 0.75);

  color: #ffffff;

  font: inherit;

  font-size: 16px;

  font-weight: 800;

  cursor: pointer;

  transition: 0.2s ease;

}



.vehicle-open-btn:hover {

  background: rgba(65, 110, 170, 0.85);

  border-color: rgba(160, 220, 255, 0.95);

  transform: translateY(-2px);

}



.vehicle-form-wrap {

  margin-top: 28px;

}



.vehicle-form-wrap.hidden {

  display: none;

}



.vehicle-form-switch {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

  margin: 0 0 22px 0;

}



.vehicle-type-btn {

  min-height: 46px;

  padding: 12px 18px;

  border: 1px solid rgba(120, 190, 255, 0.35);

  border-radius: 14px;

  background: rgba(20, 35, 60, 0.36);

  color: #ffffff;

  font: inherit;

  font-weight: 700;

  cursor: pointer;

  transition:

    background 0.2s ease,

    border-color 0.2s ease,

    transform 0.2s ease;

}



.vehicle-type-btn:hover {

  background: rgba(35, 60, 95, 0.65);

  border-color: rgba(120, 190, 255, 0.7);

  transform: translateY(-1px);

}



.vehicle-type-btn.active {

  background: rgba(50, 90, 140, 0.75);

  border-color: rgba(160, 220, 255, 0.95);

}



.vehicle-insurance-form {

  padding: 22px;

  border-radius: 22px;

  background: rgba(20, 35, 60, 0.20);

  border: 1px solid rgba(120, 180, 255, 0.16);

}



.form-section-title {

  margin: 8px 0 2px 0;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(120, 190, 255, 0.18);

  color: #a9ddff;

  font-size: 14px;

  font-weight: 800;

  letter-spacing: 1px;

  text-transform: uppercase;

}



.form-grid-2 {

  display: grid;

  grid-template-columns: 1fr;

  gap: 16px;

}



@media (min-width: 760px) {

  .form-grid-2 {

    grid-template-columns: 1fr 1fr;

  }

}



.form-status {

  margin-top: 10px;

  font-size: 14px;

  font-weight: 700;

}



.form-status.is-loading {

  color: #bfe7ff;

}



.form-status.is-success {

  color: #86efac;

}



.form-status.is-error {

  color: #fca5a5;

}



.contact-submit:disabled {

  opacity: 0.6;

  cursor: not-allowed;

}



.birth-selects {

  display: grid;

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

  gap: 12px;

}



.birth-selects select {

  width: 100%;

  padding: 14px 16px;

  border: 1px solid rgba(120, 190, 255, 0.30);

  border-radius: 14px;

  background: rgba(20, 35, 60, 0.45);

  color: #ffffff;

  font: inherit;

  outline: none;

}



.birth-selects select:focus {

  border-color: rgba(160, 220, 255, 0.9);

  box-shadow: 0 0 0 3px rgba(120, 190, 255, 0.15);

}



.vehicle-form-section {

  background: linear-gradient(

    135deg,

    rgb(108, 108, 119),

    rgb(9, 83, 211)

  );

  border: 1px solid rgba(120, 200, 255, 0.45);

  box-shadow: 0 10px 30px rgba(0, 150, 255, 0.15);

}



.vehicle-form-section h2 {

  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

  color: #e6f6ff;

  font-size: 50px;

}



.vehicle-form-section label {

  color: #dff3ff;

}



.vehicle-form-section input,

.vehicle-form-section textarea,

.vehicle-form-section select {

  color: #ffffff;

}



.vehicle-form-section input::placeholder,

.vehicle-form-section textarea::placeholder {

  color: rgba(200, 230, 255, 0.6);

}



.vehicle-form-section {

  color: #dff3ff;

}



.vehicle-open-btn{

  font-size:35px;

  color:#6dee22

}



.birth-selects {

  display: grid;

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

  gap: 12px;

}



.birth-selects select {

  width: 100%;

  padding: 14px 16px;

  border: 1px solid rgba(120, 190, 255, 0.30);

  border-radius: 14px;

  background: rgba(20, 35, 60, 0.45);

  color: #ffffff;

  font: inherit;

  outline: none;

}



.birth-selects select:focus {

  border-color: rgba(160, 220, 255, 0.9);

  box-shadow: 0 0 0 3px rgba(120, 190, 255, 0.15);

}



.broker-socials {

  display: flex;

  gap: 14px;

  margin: 10px 0 18px 0;

}



.broker-socials a {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: rgba(16, 110, 224, 0.12);

  border: 1px solid rgba(17, 107, 216, 0.25);

  transition: all 0.2s ease;

}



.broker-socials a:hover {

  background: rgba(13, 109, 226, 0.25);

  transform: translateY(-2px);

}



.broker-socials a {

  color: #8fd3ff; /* tvoje modrá */

}



.broker-socials a svg {

  display: block;

  width: 26px;

  height: 26px;

  fill: #8fd3ff !important;

  color: #8fd3ff !important;

}