/* Additions for the Node version of nateo.nl (2026-10). Loaded after Astra's CSS; only new classes,
   plus a few overrides for elements that are new on the homepage. */

/* --- Two packages inside the offer block --- */
.offer-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 28px;
  text-align: left;
}
.offer-plan {
  border: 1px solid #203c5626;
  border-radius: 16px;
  background: #ffffff;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
}
.offer-plan-featured {
  border-color: #087f78;
  box-shadow: 0 0 0 1px #087f78 inset;
}
.offer-plan-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #172d43;
  margin: 0 0 6px;
}
.offer-plan-price {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1px;
  color: #087f78;
  margin: 0 0 8px;
  line-height: 1.1;
}
.offer-plan-price span {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: #526579;
}
.offer-plan-desc {
  color: #40566a;
  font-size: 15px;
  margin: 0 0 12px;
}
.offer-plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.offer-plan-list li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 14px;
  line-height: 1.5;
  color: #40566a;
}
.offer-plan-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #087f78;
  font-weight: 700;
}
.offer-plan-link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #066b65;
  text-decoration: none;
}
.offer-plan-link:hover { text-decoration: underline; }

.offer-domain-note {
  max-width: 720px;
  margin: 4px auto 28px;
  font-size: 14px;
  line-height: 1.6;
  color: #40566a;
  background: #087f780d;
  border: 1px dashed #087f7855;
  border-radius: 12px;
  padding: 12px 16px;
}

@media (max-width: 768px) {
  .offer-plans { grid-template-columns: 1fr; }
}

/* --- Contact form: package select in the light homepage style --- */
.modern-home .contact-form select {
  background-color: #f5f8fb;
  border: 1px solid #203c562b;
  border-radius: 9px;
  color: #172d43;
  font-size: 16px;
  letter-spacing: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23526579' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 45px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.modern-home .contact-form select option { background: #fff; color: #172d43; }
.modern-home .form-message-success { background: #087f7814; border-color: #087f7855; color: #066b65; }
.modern-home .form-message-error { color: #a12a1f; }

/* --- Portfolio: real client project stands out from the demos --- */
.portfolio-case-client .portfolio-case-meta { color: #087f78; font-weight: 700; }
.modern-home .offer-tagline { margin-left: auto; margin-right: auto; }