/* Offers & 2026 price list */
.of-hero { background: var(--navy); color: var(--mist); text-align: center; padding-block: 36px 40px; }
.of-hero .container { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.of-pill { display: inline-flex; padding: 8px 20px; border-radius: 999px; background: var(--haze); color: var(--navy); font-size: 14px; line-height: 18px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
[dir="rtl"] .of-pill { letter-spacing: 0; font-size: 16px; line-height: 22px; }
.of-hero h1 { color: #fff; font-size: clamp(34px, 5vw, 50px); }
.of-hero p { max-width: 720px; font-size: 15px; line-height: 1.6; }
.of-hero-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; }
@media (min-width: 700px) {
  .of-hero { padding-block: 56px; }
  .of-pill { padding: 10px 28px; font-size: 18px; line-height: 22px; }
  .of-hero p { font-size: 16px; }
  .of-hero-actions { flex-direction: row; justify-content: center; width: auto; }
}

.of-cards-wrap { padding-top: 24px; }
@media (min-width: 900px) { .of-cards-wrap { padding-top: 56px; } }
.of-cards > .of-card { width: 82%; }
@media (min-width: 700px) { .of-cards > .of-card { width: 46%; } }
@media (min-width: 1000px) {
  .of-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .of-cards > .of-card { width: auto; }
}
.of-card { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: var(--radius); overflow: hidden; background: var(--navy); text-decoration: none; }
.of-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.of-card:hover img { transform: scale(1.03); }
.of-card::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 70%; background: linear-gradient(180deg, rgba(20, 36, 64, 0) 0%, rgba(20, 36, 64, 0.6) 45%, rgba(20, 36, 64, 0.92) 100%); }
.of-card-text { position: absolute; z-index: 1; inset-inline: 20px; bottom: 18px; display: flex; flex-direction: column; gap: 2px; color: #fff; }
.of-card-sub { font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--haze); }
.of-card-title { font-size: clamp(20px, 2vw, 24px); line-height: 1.2; font-weight: 700; }

.of-prices { position: relative; padding-top: 40px; }
@media (min-width: 900px) { .of-prices { padding-top: 72px; } }
.of-anchors span { position: absolute; top: 0; inset-inline-start: 0; scroll-margin-top: 110px; }
.of-list-head { display: flex; flex-direction: column; gap: 14px; }
.of-pdfs { display: flex; flex-wrap: wrap; gap: 10px; }
.of-pdf-ar { font-family: var(--font-ar); }
.of-pdfs .btn { padding-inline: 18px; }
@media (min-width: 900px) { .of-list-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }

.of-tabs { gap: 8px; margin-top: 24px; }
@media (min-width: 900px) { .of-tabs { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.of-caption { margin: 16px 0; font-size: 15px; }
.of-table .table { min-width: 860px; }
.of-table .table th:first-child { min-width: 150px; white-space: normal; }
.of-table thead th:first-child { background: var(--navy); }
@media (min-width: 900px) { .of-table .table th:first-child { min-width: 220px; } }
.of-table tbody th { text-align: start; font-weight: 700; }
.of-name { display: block; color: var(--navy); font-size: 14px; }
.of-sub { display: block; font-size: 11px; font-weight: 400; color: var(--deep); }
.of-table td [aria-hidden] { color: var(--steel); }

/* Mobile price view (enabled by offers.js below 700px) */
.of-mobile { display: none; }
@media (max-width: 699px) {
  .of-panel.is-enhanced .of-mobile { display: block; }
  .of-panel.is-enhanced .of-table:not(.is-open) { display: none; }
}
.of-choose { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.of-sizes { gap: 8px; padding-bottom: 8px; }
.of-sizes .chip { min-height: 44px; }
.of-mlist { margin-top: 12px; border: 1px solid var(--haze); border-radius: var(--radius); overflow: hidden; }
.of-mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 16px; border-top: 1px solid var(--haze); }
.of-mrow:nth-child(odd) { background: var(--mist); }
.of-mrow-head { min-height: 48px; border-top: 0; background: var(--navy) !important; color: #fff; font-size: 13px; font-weight: 700; }
.of-mname { display: flex; flex-direction: column; min-width: 0; }
.of-mname strong { color: var(--navy); font-size: 14px; line-height: 1.3; }
.of-mname span { font-size: 12px; color: var(--deep); }
.of-mprice { flex-shrink: 0; font-weight: 700; font-size: 15px; white-space: nowrap; }
.of-mprice.is-na { color: var(--steel); font-weight: 600; font-size: 13px; }
.of-toggle { margin-top: 8px; margin-bottom: 8px; }

.of-facts { margin-top: 24px; display: grid; grid-template-columns: 1fr; border-radius: var(--radius); background: var(--mist); text-align: center; }
.of-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 16px; }
.of-facts > div + div { border-top: 1px solid var(--haze); }
.of-facts strong { color: var(--navy); font-size: 15px; }
.of-facts span { font-size: 13px; }
@media (min-width: 700px) {
  .of-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 8px; }
  .of-facts > div + div { border-top: 0; border-inline-start: 1px solid var(--haze); }
}

.of-inst-wrap { padding-top: 40px; }
@media (min-width: 900px) { .of-inst-wrap { padding-top: 56px; } }
.of-inst { display: flex; flex-direction: column; gap: 18px; padding: 24px 20px; border-radius: var(--radius-lg); background: var(--haze); }
.of-inst-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.of-inst-text p { font-size: 14px; }
.of-banks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.of-banks span { min-height: 52px; padding: 8px 16px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; }
@media (min-width: 1000px) {
  .of-inst { flex-direction: row; align-items: center; justify-content: space-between; padding: 36px 48px; }
  .of-banks { display: flex; flex-wrap: wrap; }
  .of-banks span { padding-inline: 22px; font-size: 15px; }
}

.of-cta .stack { align-items: center; }
@media (max-width: 699px) { .of-cta-actions { flex-direction: column; align-items: stretch; width: 100%; } }