/* The swimming pages, drawn from the swim_* boards. Uses the colours in bahri.css. Logical properties only.
   This file loads before site.css, so a rule that changes a bs-* class names both classes. */

/* First page */
.sw-hero { position: relative; border-radius: 28px; overflow: hidden; min-height: 320px; display: flex; }
.sw-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 50, 80, 0.94) 0%, rgba(0, 60, 95, 0.7) 55%, rgba(0, 60, 95, 0.2) 100%); }
html[dir="rtl"] .sw-hero-shade { background: linear-gradient(270deg, rgba(0, 50, 80, 0.94) 0%, rgba(0, 60, 95, 0.7) 55%, rgba(0, 60, 95, 0.2) 100%); }
.sw-hero-body { position: relative; padding: clamp(18px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 16px; color: #FFFFFF; max-width: 720px; width: 100%; }
.sw-hero h1 { margin: 0; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; font-weight: 800; }
.sw-hero p { margin: 0; font-size: 15.5px; line-height: 1.6; opacity: 0.94; }
.sw-hero .bs-crumbs, .sw-hero .bs-crumbs a { color: rgba(255, 255, 255, 0.85); }
.sw-hero .bs-crumbs [aria-current] { color: #FFFFFF; }
.sw-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 4px 14px rgba(0, 40, 60, 0.12); max-width: 100%; }
.sw-tabs a { flex: 1 1 auto; height: 46px; padding: 0 20px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 800; white-space: nowrap; background: transparent; color: var(--bh-ink); }
.sw-tabs a[aria-current="page"] { background: var(--bh-primary); color: #FFFFFF; }
.sw-search { display: flex; flex-wrap: wrap; gap: 10px; background: var(--bh-tint); border-radius: 22px; padding: 12px; }
.sw-search-box { flex: 3 1 260px; min-width: 0; height: 44px; border-radius: 12px; border: 1px solid var(--bh-border-2); background: #FFFFFF; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--bh-muted); }
.sw-search-box input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; height: 100%; font-size: 13.5px; color: var(--bh-ink); }
.bh-select.sw-search-area { flex: 1 1 160px; width: auto; min-width: 140px; font-size: 13px; }
.sw-h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--bh-ink); }
.sw-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 12px; }
.sw-tile { text-decoration: none; color: var(--bh-ink); background: #FFFFFF; border: 1px solid var(--bh-border); border-radius: 20px; padding: 14px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.sw-tile:hover { border-color: var(--bh-primary); color: var(--bh-ink); }
.sw-tile-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--bh-tint); display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.sw-tile-icon img { width: 40px; height: 40px; object-fit: contain; }
.sw-tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-tile-text b { font-size: 15px; font-weight: 800; }
.sw-tile-text small { font-size: 12.5px; color: var(--bh-muted); }
.sw-tile > svg { color: var(--bh-primary); }

/* Club cards */
.sw-clubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.sw-club { background: #FFFFFF; border: 1px solid var(--bh-border); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.sw-club-media { position: relative; }
.sw-club-media > a { display: block; }
.sw-club-media > a img { width: 100%; height: 150px; object-fit: cover; display: block; }
.sw-club-logo { position: absolute; bottom: -26px; inset-inline-start: 16px; border-radius: 18px; border: 3px solid #FFFFFF; display: flex; }
.sw-club-logo > span { width: 56px; height: 56px; border-radius: 16px; background: var(--bh-tint); color: var(--bh-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.sw-club-logo img { width: 100%; height: 100%; object-fit: cover; }
.sw-club-body { padding: 34px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sw-club-name { font-size: 17px; font-weight: 800; color: var(--bh-ink); text-decoration: none; }
.sw-club-name:hover { color: var(--bh-primary); }

/* Comparing the same programme */
.bs-panel.sw-comparebox { flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: center; }
.sw-comparebox-text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sw-comparebox-text h2 { margin: 0; font-size: 22px; font-weight: 800; }
.sw-comparebox-text p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--bh-muted); }
.sw-comparebox-rows { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sw-comparebox-name { font-size: 13px; font-weight: 800; color: var(--bh-muted); }
.sw-comparebox-row { text-decoration: none; color: var(--bh-ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--bh-border); }
.sw-comparebox-row.is-best { background: var(--bh-tint); }
.sw-comparebox-row:hover { border-color: var(--bh-primary); color: var(--bh-ink); }
.sw-comparebox-club { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.sw-comparebox-price { font-size: 15px; font-weight: 800; color: var(--bh-primary); }

/* Private coaches banner */
.sw-banner { position: relative; overflow: hidden; background: var(--bh-primary); color: #FFFFFF; border-radius: 28px; padding: clamp(20px, 4vw, 36px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.sw-banner-sun { position: absolute; top: 0; inset-inline-end: 0; width: min(154px, 34%); aspect-ratio: 1; border-radius: 50%; background: var(--bh-accent); box-shadow: 0 0 0 17px rgba(255, 255, 255, 0.12), 0 0 0 38px rgba(255, 255, 255, 0.06); transform: translate(22%, -42%); pointer-events: none; }
html[dir="rtl"] .sw-banner-sun { transform: translate(-22%, -42%); }
.sw-banner-main { position: relative; display: flex; align-items: center; gap: 16px; flex: 1 1 360px; min-width: 0; }
.sw-banner-main h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.sw-banner-main p { margin: 0; font-size: 14.5px; opacity: 0.92; }
.sw-banner-marks { display: flex; flex: none; }
.sw-banner-marks > span { width: 56px; height: 56px; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sw-banner-marks .is-a { background: var(--bh-accent); color: var(--bh-ink); }
.sw-banner-marks .is-b { background: var(--bh-primary); color: #FFFFFF; margin-inline-start: -14px; }
.sw-banner-go { position: relative; }

/* Programmes */
.sw-progs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: stretch; }
.sw-progs--list { grid-template-columns: minmax(0, 1fr); }
.sw-prog { background: var(--bh-tint); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sw-prog-head { display: flex; align-items: center; gap: 12px; }
.sw-prog-icon { width: 52px; height: 52px; border-radius: 14px; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.sw-prog-icon img { width: 40px; height: 40px; object-fit: contain; }
.sw-prog-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-prog-title h2 { margin: 0; font-size: 16px; font-weight: 800; }
.sw-prog-title span { font-size: 12.5px; color: var(--bh-muted); }
.sw-prog-rows { display: flex; flex-direction: column; gap: 8px; }
.sw-prog-row { text-decoration: none; color: var(--bh-ink); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: transparent; border: 1px solid var(--bh-border); }
.sw-prog-row:hover { border-color: var(--bh-primary); color: var(--bh-ink); }
.sw-prog-row.is-best { background: #FFFFFF; border-color: var(--bh-primary); }
.sw-prog-rowicon { width: 34px; height: 34px; border-radius: 10px; background: var(--bh-tint); color: var(--bh-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sw-prog-rowtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sw-prog-rowname { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; }
.sw-prog-rowline { font-size: 12px; color: var(--bh-muted); }
.sw-prog-rowprice { font-size: 15px; font-weight: 800; color: var(--bh-primary); white-space: nowrap; }
.sw-prog-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.sw-prog-count { font-size: 12.5px; font-weight: 700; color: var(--bh-muted); }
.sw-compare[open] { flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; }
.sw-compare[open] summary { align-self: flex-end; }
.sw-compare summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--bh-primary); cursor: pointer; list-style: none; }
.sw-compare summary::-webkit-details-marker { display: none; }
.sw-compare summary svg { transition: transform 0.15s; }
.sw-compare[open] summary svg { transform: rotate(180deg); }
.sw-compare-wrap { min-width: 0; overflow-x: auto; background: #FFFFFF; border-radius: 14px; border: 1px solid var(--bh-border); }
.sw-compare-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sw-compare-table th, .sw-compare-table td { padding: 9px 10px; text-align: start; vertical-align: top; border-top: 1px solid var(--bh-border); }
.sw-compare-table thead th { border-top: 0; font-weight: 800; color: var(--bh-ink); }
.sw-compare-table tbody th { font-weight: 600; color: var(--bh-muted); white-space: nowrap; }
.sw-compare-table td.is-best { color: var(--bh-success-strong); font-weight: 800; }

/* Club page */
.sw-club-gallery, .sw-coach-gallery { min-width: 0; }
@media (min-width: 641px) {
  .sw-club-gallery .bs-gallery { height: clamp(260px, 38vw, 420px); }
  .sw-coach-gallery .bs-gallery { height: clamp(260px, 38vw, 360px); }
}
.sw-sec-note { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--bh-muted); }
.sw-classes { display: flex; flex-direction: column; gap: 10px; }
.sw-class { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--bh-border); background: #FFFFFF; }
.sw-class.is-on { border: 2px solid var(--bh-primary); background: var(--bh-tint); padding: 13px 15px; }
.sw-class-text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-class-name { font-size: 15px; font-weight: 800; }
.sw-class-line { font-size: 12.5px; color: var(--bh-muted); }
.sw-class-price { font-size: 16px; font-weight: 800; color: var(--bh-primary); white-space: nowrap; }
.sw-choose { background: #FFFFFF; color: var(--bh-primary); border: 1.5px solid var(--bh-primary); }
.sw-choose:hover { background: var(--bh-tint); color: var(--bh-primary-dark); }
.sw-choose-on { display: none; align-items: center; gap: 8px; }
.is-on .sw-choose { background: var(--bh-primary); color: #FFFFFF; border: 1px solid var(--bh-primary); }
.is-on .sw-choose-on { display: inline-flex; }
.is-on .sw-choose-off { display: none; }
.sw-facilities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.sw-certs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.sw-facility { background: var(--bh-tint); border-radius: 16px; padding: 14px; display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.sw-facility > b { font-size: 13.5px; font-weight: 800; align-self: center; }
.sw-facility-icon { width: 40px; height: 40px; border-radius: 12px; background: #FFFFFF; color: var(--bh-primary); display: flex; align-items: center; justify-content: center; flex: none; }
.sw-facility-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sw-facility-text b { font-size: 13.5px; font-weight: 800; }
.sw-facility-text small { font-size: 12.5px; color: var(--bh-muted); line-height: 1.5; }

/* The booking box */
.sw-book-label { font-size: 13px; color: var(--bh-muted); }
.sw-book-name { font-size: 18px; font-weight: 800; }
.sw-book-line { font-size: 13px; color: var(--bh-muted); }
.sw-book-note { font-size: 12.5px; color: var(--bh-muted); }
.bs-seg.sw-seg { display: flex; }
.sw-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sw-pack { min-width: 0; border-radius: 16px; text-align: start; padding: 10px; display: flex; flex-direction: column; gap: 5px; border: 2px solid var(--bh-border); background: #FFFFFF; color: var(--bh-ink); cursor: pointer; }
.sw-pack[aria-pressed="true"] { border-color: var(--bh-primary); background: var(--bh-primary); color: #FFFFFF; }
.sw-pack-tag { align-self: flex-start; font-size: 10.5px; font-weight: 800; background: var(--bh-accent); color: var(--bh-ink); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.sw-pack-gap { height: 19px; }
.sw-pack-count { font-size: 13px; }
.sw-pack-count b { font-size: 22px; }
.sw-pack-save { align-self: flex-start; font-size: 10.5px; font-weight: 800; background: var(--bh-success-bg); color: var(--bh-success); border-radius: 999px; padding: 2px 8px; }
.sw-pack-money { font-size: 12px; font-weight: 800; white-space: nowrap; }
.sw-pack-unit { font-size: 10.5px; color: var(--bh-muted); }
.sw-pack[aria-pressed="true"] .sw-pack-unit { color: rgba(255, 255, 255, 0.85); }
.sw-custom { background: var(--bh-tint); border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.sw-person { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sw-person > :first-child { font-size: 15px; font-weight: 800; }
.sw-person > :last-child { font-size: 18px; font-weight: 800; color: var(--bh-primary); white-space: nowrap; }
.sw-peopleline { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--bh-muted); }
.sw-peopleline b { font-weight: 800; color: var(--bh-ink); white-space: nowrap; }

/* Coach cards */
.sw-coaches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 16px; }
.sw-coaches--club { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.sw-coaches--list { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.sw-coach { background: var(--bh-tint); border-radius: 22px; padding: 20px 16px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; position: relative; }
.bs-heart.sw-coach-heart { position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 17px; }
.sw-coach-name { font-size: 16px; font-weight: 800; color: var(--bh-ink); text-decoration: none; }
.sw-coach-name:hover { color: var(--bh-primary); }
.sw-coach-badges, .sw-coach-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.sw-badge-club { background: var(--bh-primary); color: #FFFFFF; }
.bs-chip.sw-chip-white { background: #FFFFFF; }
.sw-coach-foot { margin-top: auto; width: 100%; padding-top: 10px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sw-avatar { border-radius: 50%; background: var(--bh-primary); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.sw-avatar.is-female { background: var(--bh-accent); color: var(--bh-ink); }
.sw-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-avatar--112 { width: 112px; height: 112px; }
.sw-avatar--84 { width: 84px; height: 84px; }
.sw-avatar--80 { width: 80px; height: 80px; }
.sw-avatar--52 { width: 52px; height: 52px; }

/* Coach profile */
.bs-panel.sw-coachhead { gap: 16px; }
.sw-coachhead-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.sw-coachhead-main { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sw-coachhead-name { margin: 0; font-size: clamp(26px, 3vw, 32px); font-weight: 800; color: var(--bh-primary); }
.sw-pricetiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; }

/* Checkout */
.sw-swimmer { background: #F7FBFD; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sw-swimmer-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--bh-primary); }
.sw-swimmer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 14px 16px; align-items: start; }
.bs-thumb.sw-thumb { width: 52px; height: 52px; }

/* Confirmation */
.sw-done-count { font-size: 14px; font-weight: 700; }
.sw-done-bar { height: 10px; border-radius: 10px; background: var(--bh-neutral); overflow: hidden; }
.sw-done-bar span { display: block; height: 100%; background: var(--bh-primary); border-radius: 10px; }
.sw-done-steps { list-style: none; margin: 0; padding: 0; }
.sw-done-steps li { position: relative; display: flex; gap: 12px; padding-bottom: 18px; }
.sw-done-steps li:last-child { padding-bottom: 0; }
.sw-done-steps li:not(:last-child)::before { content: ""; position: absolute; top: 26px; bottom: -6px; inset-inline-start: 11px; width: 2px; background: var(--bh-border); }
.sw-done-steps b { display: block; font-size: 13.5px; font-weight: 700; }
.sw-done-steps b.is-muted { color: var(--bh-muted); }
.sw-done-steps small { display: block; font-size: 12px; color: var(--bh-muted); }
.sw-done-dot { width: 24px; height: 24px; border-radius: 12px; background: #B9C7CF; display: flex; align-items: center; justify-content: center; flex: none; }
.sw-done-dot.is-on { background: var(--bh-primary); }
.sw-done-dot span { width: 8px; height: 8px; border-radius: 4px; background: #FFFFFF; }
.bs-kv.sw-done-kv { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }