/* ===== Nordalba Offers Styles =====
   Wrapper = GRÜN, Karten/Tabellen mit Verlauf GRÜN→GOLD
   Buttons: Hintergrund GRÜN, Schrift GOLD (#D4AF30)
   RTL-Unterstützung drin
==================================== */

:root{
  --na-gold: #D4AF30;   /* Nordalba Gold */
  --na-green: #0a7a50;  /* Firmen-Grün */
}

/* Section */
.offers { position: relative; }
.offers h2{ font-size:clamp(18px,4.5vw,28px); margin:0 0 10px; line-height:1.2 }

/* === Wrapper: Gradient-Rahmen GRÜN→GOLD === */
.offers .wrap{
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);

  /* Innen = Kartenhintergrund, außen = Verlauf */
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(to right, var(--na-green), var(--na-gold)) border-box;
}

/* Karten-Grid */
.offer-cards{ display:grid; gap:14px; padding:14px; }

/* === Karten: Gradient-Rahmen GRÜN→GOLD === */
.offer-card{
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 14px;
  background: 
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, var(--na-green), var(--na-gold)) border-box;
  position: relative;
}
.offer-card::after{ content: none; }

.offer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px }
.offer-name{ font-weight:800 }
.offer-fields{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.of{ display:grid; gap:2px }
.of small{ color: var(--muted); font-weight:600 }
.of strong{ font-weight:700 }
.offer-actions{ display:flex; gap:10px; margin-top:12px }

/* === Tabelle: Gradient-Rahmen GRÜN→GOLD === */
.offers .table{
  display:none;
  border: 2px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, var(--na-green), var(--na-gold)) border-box;
}
.offers table{ width:100%; border-collapse:collapse }
.offers th, .offers td{ padding:14px; border-bottom:1px solid #eef2ef; text-align:left; white-space:nowrap }
.offers th{
  background:#fff;
  color:#2b3b35;
  border-bottom:2px solid #f0f0f0;
}

/* Badges */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 12px; border-radius:999px; border:1px solid #e2e8e4;
  background:#fff; font-weight:700; font-size:12px; color:#2b3b35; line-height:1; min-height:28px;
}
.badge-open{   background:#ecfdf5; border-color:#a7f3d0; color:#065f46 }
.badge-closed{ background:#f3f4f6; border-color:#e5e7eb; color:#6b7280 }
.badge-prep{   background:#fff7ed; border-color:#fed7aa; color:#9a3412 }

/* === Buttons: Hintergrund GRÜN, Schrift GOLD === */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.2rem; border-radius:12px;
  border:1px solid var(--na-green);
  background:var(--na-green);
  font-weight:800; text-align:center; line-height:1;
  text-decoration:none;
}
.btn.block{ width:100% }

.offers a.btn.btn-primary,
.offers .btn.btn-primary{
  color: var(--na-gold) !important;
  -webkit-text-fill-color: var(--na-gold) !important;
  background: var(--na-green) !important;
  border-color: var(--na-green) !important;
}
.offers a.btn.btn-primary:link,
.offers a.btn.btn-primary:visited,
.offers a.btn.btn-primary:hover,
.offers a.btn.btn-primary:active,
.offers a.btn.btn-primary:focus{
  color: var(--na-gold) !important;
  -webkit-text-fill-color: var(--na-gold) !important;
}
.offers a.btn.btn-primary *,
.offers .btn.btn-primary *{
  color: var(--na-gold) !important;
  fill: currentColor;
}

/* Info-Overlay */
.offer-info{ display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; background:rgba(0,0,0,.4) }
.offer-info .box{ background:#fff; border-radius:12px; max-width:560px; width:92%; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.2) }
.offer-info .title{ font-weight:800; margin:0 0 6px }
.offer-info p{ margin:0 0 12px; color:#374151 }
.offer-info .row{ display:flex; gap:8px; justify-content:flex-end }

.btn-outline{ background:#fff; border:1px solid #dfe9e4; color:#1e7f4b }

/* === Overlay-OK-Button: grün/gold === */
.offers .btn-outline#offerInfoClose{
  background: var(--na-green) !important;
  border-color: var(--na-green) !important;
  color: var(--na-gold) !important;
  -webkit-text-fill-color: var(--na-gold) !important;
  font-weight:800;
}
.offers .btn-outline#offerInfoClose:hover{ filter: brightness(1.05); }

/* Responsive */
@media (min-width:800px){ .offer-cards{ display:none } .offers .table{ display:block } }
@media (max-width:960px){ .offer-cards{ grid-template-columns:1fr } }
@media (max-width:640px){ .offer-fields{ grid-template-columns:1fr } .offer-actions{ flex-direction:column } }

/* RTL Tweaks */
[dir="rtl"] .offers th, [dir="rtl"] .offers td{ text-align:right }
[dir="rtl"] .offer-head{ flex-direction: row-reverse }
[dir="rtl"] .offer-actions{ flex-direction: column }