.df-lease-form { max-width: 600px; padding:10px; border:1px solid #ccc; border-radius:6px; font-size:17px; }
.df-row { display:block; margin-bottom:10px; }
.df-col.label { display:block; margin-bottom:4px; text-align:left; font-weight:600; font-size:17px; }
.df-col.input { display:block; width:100%; }
.df-col.input input { width:100%; padding:8px; font-size:17px; }
.looptijd-buttons { display:flex; flex-wrap:wrap; gap:6px; }

.looptijd-btn {
    flex: 1;
    text-align: center !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    font-size: 1.1rem !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    background-color: #dddddd !important;
    color: #000000 !important;
}
.looptijd-btn.active {
    background: #fe6600 !important;
    color: #fff !important;
    border-color: #fe6600 !important;
    border-radius: 5px;
}

.extra-fields { display:none; margin-top:12px; padding-top:10px; border-top:1px solid #ccc; animation: fadeSlide 0.4s ease-out; }
.offerte-btn, .versturen-btn { padding:10px 14px; border:none; border-radius:5px; cursor:pointer; font-size:17px; }
.credits { font-size:14px; margin-top:8px; color:#555; }
.offerte-row { display:flex; justify-content:flex-end; margin-top:8px; }
.verstuur-row { display:flex; justify-content:space-between; margin-top:8px; }
.verstuur-row .df-col.label { display:flex; justify-content:flex-start; }
.verstuur-row .df-col.input { display:flex; justify-content:flex-end; }

#maandbedrag {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000000;
    background: #ffe3be;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    margin-top: 4px;
    display: block;
    border: none;
}

button#offerte-btn {
    background-color: #fe6600;
    color: #ffffff;
    font-weight: 700;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 1.1rem;
}


button#offerte-btn:hover {
    background-color: #e15c02;
    color: #ffffff;
    font-weight: 700;
    border: none;
    padding: 15px;
    border-radius: 5px;
}

button#versturen-btn {
    background-color: #fe6600;
    color: #ffffff;
    font-weight: 700;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 1.1rem;
    
}
button#versturen-btn:hover {
    background-color: #e15c02;
    color: #ffffff;
    font-weight: 700;
    border: none;
    padding: 15px;
    border-radius: 5px;
    
}

button#terug-btn {
    background-color: #666666;
    color: #ffffff;
    font-weight: 700;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 1.1rem;
    
}
button#terug-btn:hover {
    background-color: #333333;
    color: #ffffff;
    font-weight: 700;
    border: none;
    padding: 15px;
    border-radius: 5px;
    
}

@keyframes fadeSlide { 0% { opacity:0; transform:translateY(-8px); } 100% { opacity:1; transform:translateY(0); } }

/* ✅ Nieuwe CSS voor 2 kolommen */
.df-row.two-cols {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 10px;
  align-items: center;
}

.df-row.two-cols .df-col.label {
  text-align: right;
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .df-row.two-cols {
    grid-template-columns: 100%;
  }
  .df-row.two-cols .df-col.label {
    text-align: left;
  }
}

#opmerking {
  border: 1px solid #ced4da !important;
  height: calc(2.25rem + 2px) !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

.looptijd-btn {
  padding: 2px 6px !important;
  font-size: 0.85rem !important;
}


.container {
  max-width: 900px !important;
}


.container {
  max-width: 900px !important;
}

input, select, textarea {
  font-size: 1.1rem !important;
  padding: 10px !important;
}

button, .btn {
  font-size: 1.1rem !important;
  padding: 10px 16px !important;
}

button.btn.btn-outline-secondary.looptijd-btn {
    padding: 5px 5px !important;
}

.tooltip-icon {
  margin-left: 6px;
  color: #888;
  cursor: pointer;
  font-size: 0.9rem;
  position: relative;
}

.tooltip-icon:hover {
  color: #fe6600;
}

.tooltip-icon::after {
content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 6px 10px;
    font-size: 14px;
    white-space: normal;
    border-radius: 5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 10;
    font-family: sans-serif;
    font-weight: 400;
    width: 275px;
}

.tooltip-icon:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-3px);
}