body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f0f4f8;
      color: #1a1a1a;
    }

 .site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: linear-gradient(135deg, #568eb4, #619bc2);
  z-index: 10000;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: auto;
  padding: 12px 20px;
  position: relative;
}

.nav-logo {
  font-weight: bold;
  font-size: 20px;
  color: #F86F03;
   text-shadow: -1px -1px 1px #c70000,
     1px -1px 1px #000000,
    -1px  1px 1px #000000,
     1px  1px 1px #000000;
}

.menu-icon {
  display: none;
  font-size: 30px;
  cursor: pointer;
}

#menu-toggle {
  display: none;
}

.nav-links a {
  margin-left: 20px;
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #dcdcdc;
}

@media (max-width: 768px) {
  .menu-icon {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #ebebeb;
    position: absolute;
    top: 50px;
    right: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 10px;
    z-index: 10001;
  }

  #menu-toggle:checked + .menu-icon + .nav-links {
    display: flex;
  }

  .nav-links a {
    font-size: 14px;
    padding: 8px 0;
    color: #1a1a1a;
  }
}

    .hero {
      background: linear-gradient(135deg, #568eb4, #619bc2);
      color: white;
      padding: 60px 20px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
    }

    .hero-content {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 1200px;
      margin: 0 auto;
      gap: 50px;
      flex-wrap: wrap;
    }

    .hero-text {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  padding-left: 40px;
  text-align: left;
}


    .hero-text h1 {
      font-size: 36px;
      margin-bottom: 20px;
    }

    .hero-text p {
      font-size: 18px;
      line-height: 1.6;
      max-width: 500px;
    }

    .hero-image {
      flex: 1;
      text-align: center;
      min-width: 300px;
    }

    .hero-image img {
      max-width: 350px;
      width: 100%;
      display: block;
      margin: 0 auto;
    }

    .info-section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      padding: 40px 20px;
      max-width: 1100px;
      margin: auto;
    }

    .info-card {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .info-card:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .info-card h3 {
      color: #4B9FE1;
      margin-bottom: 10px;
    }

    .info-card p {
      font-size: 15px;
      color: #555;
    }

    @media (max-width: 768px) {
      .hero-content {
        flex-direction: column;
        text-align: center;
      }

      .hero-text, .hero-image {
        flex: unset;
      }

      .hero-text p {
        margin: 0 auto;
      }
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f0f4f8;
      margin: 0;
      padding: 0;
    }
    .container {
      max-width: 1040px;
      margin: auto;
      background-color: #ffffff;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }
    h2 {
      text-align: center;
      color: #4B9FE1;
      margin-bottom: 30px;
    }
    .credit-info {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 30px;
      justify-content: space-between;
    }
    .input-block {
      flex: 1;
      min-width: 260px;
    }
    .input-block label {
      font-weight: bold;
      display: block;
      margin-bottom: 8px;
      color: #333;
    }
    input, select {
      width: 100%;
      padding: 12px;
      border: 2px solid #d3d3d3;
      border-radius: 10px;
      font-size: 16px;
      box-sizing: border-box;
      transition: 0.3s;
    }
    input:focus, select:focus {
      border-color: #E8F4FD;
      outline: none;
    }
    .checkboxes {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 10px;
      align-items: center;
    }
    .checkboxes label {
      font-weight: normal;
      font-size: 15px;
      color: #444;
    }
    .section-title {
      background-color: #4B9FE1;
      color: white;
      padding: 10px 20px;
      border-radius: 8px;
      margin-top: 20px;
      font-weight: bold;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      overflow-x: auto;
      display: block;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
      font-size: 14px;
    }
    th {
      background-color: #4B9FE1;
      color: white;
    }
    .btn-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .btn-group button {
      background-color: #F86F03;
      color: white;
      border: none;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
      transition: 0.3s;
    }
    .btn-group button:hover {
      filter: brightness(1.1);
      transform: scale(1.02);
      transition: 0.2s ease;
    }

    .schedule-table th,
    .schedule-table td {
      padding: 4px 6px;
      font-size: 14px;
      text-align: center;
    }
    .schedule-table th {
      background-color: #4B9FE1;
      color: white;
    }

    @media (max-width: 768px) {
  .schedule-table th,
  .schedule-table td {
    font-size: 12px;
    padding: 4px 6px;
  }
}

     @media (max-width: 480px) {
          .schedule-table th,
          .schedule-table td {
               font-size: 11px;
          }
     }


     .scroll-wrapper {
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: thin;
          max-width: 1100px;
          margin: auto; 
     }

     .scroll-wrapper::-webkit-scrollbar {
          height: 6px;
     }
     .scroll-wrapper::-webkit-scrollbar-thumb {
          background: #ccc;
          border-radius: 10px;
     }

     .schedule-table,
     .offers-table {
          width: 100%;
          border-collapse: collapse;
     }

     .schedule-flex-wrapper {
          flex-wrap: wrap;
          display: flex;
          flex-direction: column; /* mereu pe coloană, și pe desktop */
          justify-content: space-between;
          max-width: 100%;
          box-sizing: border-box;
     }

.schedule-flex-wrapper > .summary-box,
.schedule-flex-wrapper > .table-box {
     flex: 100%;
     width: 100%;
}

@media (min-width: 992px) {
     .schedule-flex-wrapper > .summary-box {
          flex: 1;
          max-width: 350px;
     }

     .schedule-flex-wrapper > .table-box {
          flex: 2;
          min-width: 0;
     }
}

.summary-box h4 {
     font-size: 20px;
     margin-bottom: 20px;
}

.summary-box p {
     margin: 10px 0;
     font-size: 14px;
}

.summary-box strong {
     font-weight: 600;
}

.summary-box .btn-credit {
     margin-top: 20px;
     width: 100%;
     max-width: 100%;
}

/* Tabel pe toată lățimea */
     .table-box {
          flex: 2;
          width: 100% !important;
          max-width: none;
          overflow-x: auto;
     }

     @media (min-width: 992px) {
          .schedule-flex-wrapper > .summary-box {
               flex: 1;
               max-width: 920px;
          }

          .schedule-flex-wrapper > .table-box {
               flex: 2;
               min-width: 0;
          }
     }


     .btn-credit {
          width: 100%;
          max-width: 250px;
          height: 45px;
          font-size: 16px;
          font-weight: bold;
          border: none;
          border-radius: 10px;
          color: white;
          cursor: pointer;
          margin-top: 10px;
     }

     .btn-credit:hover {
          filter: brightness(1.1);
          transform: scale(1.02);
          transition: 0.2s ease;
     }

     .btn-comparator {
          display: inline-block;
          margin-top: 20px;
          padding: 12px 24px;
          background-color: #F86F03;
          color: white;
          text-decoration: none;
          font-weight: bold;
          border-radius: 8px;
          font-size: 16px;
          transition: background-color 0.3s ease;
     }

     .btn-comparator:hover {
          bfilter: brightness(1.1);
          transform: scale(1.02);
          transition: 0.2s ease;
     }

     .orange {
          color: #fb7610;
          font-weight: 800; /* sau bold */
          font-size: 50px;
          text-shadow: -1px -1px 0 #ffffff,
          1px -1px 0 #ffffff,
          -1px  1px 0 #ffffff,
          1px  1px 0 #ffffff;
     }


  /* Pe mobil: schimbă ordinea */
  @media screen and (max-width: 768px) {
          .summary-box {
               order: 1;
               width: 100%;
          }
          .table-box {
               order: 2;
               width: 100%;
          }
     }
     .offers-table .section-title td {
          background-color: #f0f0f0;
          font-weight: bold;
          text-align: left;
          padding: 12px;
          color: #333;
          font-size: 15px;
     }

html {
     scroll-behavior: smooth;
}

.floating-broker-button {
     position: fixed;
     bottom: 40px;
     right: 40px;
     background-color: #F86F03;
     color: white;
     padding: 30px 40px;
     border-radius: 12px;
     font-weight: bold;
     font-size: 15px;
     text-decoration: none;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
     z-index: 999;
     transition: transform 0.5s ease, background-color 0.3s ease;
}

.floating-broker-button:hover {
     transform: scale(1.2);
     background-color: #f1d015;
}

@media (max-width: 768px) {
     .floating-broker-button {
          bottom: 20px;
          right: 15px;
          padding: 14px 20px;
          font-size: 14px;
          border-radius: 10px;
          max-width: 90vw;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
     }

     .floating-broker-button:hover {
          transform: scale(1);
          background-color: #F86F03;
     }
}

/* Tooltip container (pseudo-element) */
.floating-broker-button[data-tooltip]::after {
     content: "Dacă ai mai multe întrebări în ceea ce privește creditul tău, poți lua legătura cu unul dintre brokerii parteneri care îți va răspunde la toate întrebările sau va afla răspunsul necesar, făcând o analiză amănunțită a situației tale pentru acordarea creditului în cele mai bune condiții. Brokerii noștri parteneri sunt autorizați ANPC, conform OUG 52/2016, prestează serviciul de intermediere gratuit și sunt la curent cu cele mai noi informații din piața creditelor bancare. Brokerii parteneri au experiență bancară de peste 10 ani, sunt atent selecționați de noi și participă frecvent la trainingurile organizate de bănci.";
     position: absolute;
     bottom: 120%; /* plasat deasupra butonului */
     right: 0;
     width: 300px;
     background-color: #fff;
     color: #333;
     padding: 12px;
     font-size: 13px;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.2);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
     z-index: 10000;
}

/* Afișează tooltip la hover */
.floating-broker-button[data-tooltip]:hover::after {
     opacity: 1;
}

.info-card ul {
     list-style-type: disc;
     padding-left: 20px;
     text-align: left;
     font-size: 14px;
     color: #555;
     margin: 0;
     margin-top: 10px;
     line-height: 1.6;
}

.info-card ul li {
     margin-bottom: 6px;
}

.emoji-credit-list {
     list-style: none;
     margin: 0;
     padding: 0;
     font-size: 15px;
     color: #555;
     text-align: left;
}

.emoji-credit-list li {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 12px;
     font-size: 15px;
}

/* emoji-uri frumoase */
.emoji-credit-list li::before {
     content: "";
     font-size: 18px;
     display: inline-block;
     width: 22px;
}

/* === Scop === */
.emoji-credit-list.scop li:nth-child(1)::before { content: "🏡"; }
.emoji-credit-list.scop li:nth-child(2)::before { content: "🧱"; }
.emoji-credit-list.scop li:nth-child(3)::before { content: "🔧"; }
.emoji-credit-list.scop li:nth-child(4)::before { content: "📐"; }
.emoji-credit-list.scop li:nth-child(5)::before { content: "♻️"; }

/* === Avans === */
.emoji-credit-list.avans li:nth-child(1)::before { content: "💸"; }
.emoji-credit-list.avans li:nth-child(2)::before { content: "🏠"; }
.emoji-credit-list.avans li:nth-child(3)::before { content: "🆓"; }

/* === Durata === */
.emoji-credit-list.durata li:nth-child(1)::before { content: "🕔"; }
.emoji-credit-list.durata li:nth-child(2)::before { content: "📆"; }
.emoji-credit-list.durata li:nth-child(3)::before { content: "⏳"; }

/* === Dobanda === */
.emoji-credit-list.dobanda li:nth-child(1)::before { content: "📈"; font-size: 18px; } /* fixă la început */
.emoji-credit-list.dobanda li:nth-child(2)::before { content: "📊"; font-size: 18px; } /* variabilă totală */

/* === Asigurare === */
.emoji-credit-list.asigurare li:nth-child(1)::before { content: "📌"; font-size: 18px; } /* stare generală */
.emoji-credit-list.asigurare li:nth-child(2)::before { content: "⚰️"; font-size: 18px; } /* deces */
.emoji-credit-list.asigurare li:nth-child(3)::before { content: "♿"; font-size: 18px; } /* invaliditate */
.emoji-credit-list.asigurare li:nth-child(4)::before { content: "🧾"; font-size: 18px; } /* pierdere loc muncă */

/* === Costuri === */
.emoji-credit-list.costuri li:nth-child(1)::before { content: "📋"; font-size: 18px; } /* analiză dosar */
.emoji-credit-list.costuri li:nth-child(2)::before { content: "🏢"; font-size: 18px; } /* evaluare imobil */
.emoji-credit-list.costuri li:nth-child(3)::before { content: "📘"; font-size: 18px; } /* RNPB - registru */
.emoji-credit-list.costuri li:nth-child(4)::before { content: "🧾"; font-size: 18px; } /* administrare */

/* === Evaluare === */
.emoji-credit-list.evaluare li:nth-child(1)::before { content: "🧑‍🏫"; font-size: 18px; } /* evaluator autorizat */
.emoji-credit-list.evaluare li:nth-child(2)::before { content: "🏦"; font-size: 18px; }     /* bancă */
.emoji-credit-list.evaluare li:nth-child(3)::before { content: "📈"; font-size: 18px; }     /* valoare piață */

/* === Acte === */
.emoji-credit-list.acte li:nth-child(1)::before { content: "📄"; font-size: 18px; } /* vânzare-cumpărare */
.emoji-credit-list.acte li:nth-child(2)::before { content: "🏦"; font-size: 18px; } /* ipotecă = bancă */
.emoji-credit-list.acte li:nth-child(3)::before { content: "✍️"; font-size: 18px; } /* antecontract */
.emoji-credit-list.acte li:nth-child(4)::before { content: "🗂️"; font-size: 18px; } /* anexe/adiționale */


@media (max-width: 768px) {
     .emoji-credit-list {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: left;
     }

     .emoji-credit-list li {
          justify-content: flex-start;
          width: 100%;
          max-width: 300px;
     }
}

.alege-oferta {
     background-color: #EA2F14 !important;
     color: white;
     border: none;
     padding: 12px 24px;
     border-radius: 8px;
     font-weight: bold;
     cursor: pointer;
     text-decoration: none;
     transition: background-color 0.3s ease;
}

.conditii-btn {
     padding: 6px 12px;
     background-color: #4B9FE1;
     color: white;
     border: none;
     border-radius: 6px;
     font-size: 13px;
     cursor: pointer;
}
.conditii-btn:hover {
     background-color: #3a88cc;
}

.btn-toggle {
     background-color: #F86F03;
     padding: 14px 48px;
     border-radius: 10px;
     margin: 0 -10px 0 0;
     font-weight: 600 !important;
     color: #ffffff !important;
     cursor: pointer;
     user-select: none;
     transition: background-color 0.2s ease;
     display: flex;
     align-items: center;
     justify-content: center;
}
.btn-toggle:hover {
     filter: brightness(1.1);
     transform: scale(1.02);
     transition: 0.2s ease;
}

.btn-toggle.active {
     background-color: #007bff !important; /* albastru pentru butonul selectat */
     color: #ffffff !important;
}


.btn-toggle input {
     display: none;
}