/* --- KONTÉNER (A nyilak miatt szélesebb keret) --- */
    .slider-wrapper {
      position: relative;
      width: 100%;
      max-width: 350px; /* Megnövelve, hogy a nyilak kényelmesen elférjenek oldalt */
      display: none;
      align-items: center;
      justify-content: center;
    }

    .slider-container {
      position: relative;
      width: 100%;
      max-width: 250px; /* A kártya tényleges látható mérete */
      overflow: hidden;
      border-radius: 24px;
    }

    /* Elrejtjük a háttérben működő rádiógombokat */
    input[name="option-slider"] {
      display: none;
    }

    /* --- A KÁRTYÁK SORA --- */
    .slides {
      display: flex;
      width: 300%; /* 3 kártya = 3x-os szélesség */
      transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      cursor: grab; /* Jelzi a felhasználónak, hogy húzható */
    }

    .slides:active {
      cursor: grabbing;
    }

    /* --- EGYEDI KÁRTYA STÍLUS (Modern Blur) --- */
    .slide-card {
      width: 33.333%;
      height:200px;
      padding: 35px 24px;
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      color: #ffffff;
      text-align: center;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      user-select: none; /* Megakadályozza a szöveg kijelölését húzás közben */
    }

    /* Kártya belső elemei */
    .card-icon {
      font-size: 40px;
      margin-bottom: 15px;
    }

    .card-title {
      margin: 0 0 10px 0;
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    .card-price {
      font-size: 28px;
      font-weight: 800;
      margin: 0 0 15px 0;
      color: #6366f1;
    }

    .card-price span {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
    }

    .card-desc {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      /* line-height: 1.6;
      margin: 0 0 25px 0; */
      min-height: 20px;
    }

    /* Kiválasztó Gomb */
    .select-btn {
      display: block;
      width: 100%;
      padding: 14px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .select-btn:hover {
      background: #ffffff;
      color: #0f172a;
    }

    /* --- LAPOZÁSI LOGIKA (CSS VÁLTÁS) --- */
    #slide-1:checked ~ .slider-container .slides { transform: translateX(0%); }
    #slide-2:checked ~ .slider-container .slides { transform: translateX(-33.333%); }

    /* --- NYILAK STÍLUSA --- */
    .arrow-btn {
      position: absolute;
      top: 24%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      color: white;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;
      z-index: 10;
      user-select: none;
    }

    .arrow-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.4);
    }

    .arrow-prev { left: 0; }
    .arrow-next { right: 0; }

     /* --- NYILAK ELREJTÉSE CSS-SEL AZ INDEX ALAPJÁN --- */
    #slide-1:checked ~ .arrow-prev {
      opacity: 0;
      pointer-events: none; /* Nem lehet rákattintani, ha nem látszik */
    }
    #slide-2:checked ~ .arrow-next {
      opacity: 0;
      pointer-events: none;
    }

    /* Elrejtjük a nyilakat nagyon kis kijelzőkön, ahol útban lennének */
    @media (max-width: 450px) {
      /* .arrow-btn {
        display: none;
      } */
      .slider-container {
        max-width: 100%;
      }
    }

    /* --- ALSÓ NAVIGÁCIÓS PÖTTYÖK --- */
    .slider-nav {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 25px;
      position: absolute;
      bottom: -35px;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
    }

    .nav-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    /* Aktív pötty stílusa */
    #slide-1:checked ~ .slider-nav .dot-1,
    #slide-2:checked ~ .slider-nav .dot-2 {
      background: #000000;
      width: 24px;
      border-radius: 5px;
    }

    /* Vizuális visszajelzés a gombon, ha az adott kártya ki van választva */
    #slide-1:checked ~ .slider-container .card-1 .select-btn,
    #slide-2:checked ~ .slider-container .card-2 .select-btn {
      /* background: #6366f1;
      border-color: #6366f1;
      box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); */
        background: #ffffff;
        border-color: #ffffff;
        box-shadow: 0 0 15px rgb(0 0 0 / 50%);
        color: black;
    }

    @media (max-width: 768px) {
        .slider-wrapper{
            display: flex;
        }
    }