/* com_rachedlive — حصص مباشرة مجّانية. Same design language as ركن الهدايا (mascots, Changa, blue/gold/red),
   inside the tasi3a template. Everything is scoped under .rl */

@font-face { font-family: "Changa"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/changa-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Changa"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/changa-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Changa"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/changa-arabic-800-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Changa"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/changa-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Changa"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/changa-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Changa"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/changa-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* the template wraps components in a white notebook sheet: this page draws its own */
.tsa-component.tsa-sheet:has(> .rl) { padding: 0; background: none; border: 0; box-shadow: none; }
.tsa-component.tsa-sheet:has(> .rl)::before { display: none; }
.tsa-component.tsa-sheet .rl :is(h1, h2, h3), .rl :is(h1, h2, h3) { display: block; background: none; box-decoration-break: slice; -webkit-box-decoration-break: slice; }
.tsa-component.tsa-sheet .rl h1 + * { margin-top: 0; }
.rl [hidden] { display: none !important; }

.rl {
  --ink: #142c45;
  --blue: #1249d8;
  --blue-d: #0f39ae;
  --navy: #0d2350;
  --red: #ed202a;
  --muted: #5f6c85;
  --line: #e2e7f2;
  --gold: #ffc83d;
  --gold-d: #e0a100;
  --ok: #1f7a4d;
  --ok-bg: #e9f6ef;
  --r: 24px;
  color: var(--ink);
  font-family: Changa, Tajawal, Tahoma, Arial, sans-serif;
  line-height: 1.7;
  display: grid;
  gap: clamp(18px, 2.5vw, 28px);
}
.rl *, .rl *::before, .rl *::after { box-sizing: border-box; }
.rl a { color: inherit; text-decoration: none; }
.rl img { border-radius: 0; max-width: none; }
.rl h1, .rl h2, .rl h3 { font-family: inherit; color: var(--ink); background: none; display: block; }
.rl :focus-visible { outline: 3px solid #f3b731; outline-offset: 4px; border-radius: 8px; }
.rl-red { color: var(--red); }
.rl bdi { unicode-bidi: isolate; }

/* ------------------------------------------------------------------ buttons */
.rl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 20px; border-radius: 14px; border: 1px solid transparent; font: 600 15px/1.2 Changa, Tahoma, sans-serif; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; }
.rl-btn:hover { transform: translateY(-2px); }
.rl-btn.is-gold { background: linear-gradient(180deg, #ffd65c, var(--gold)); color: #3b2a00; box-shadow: 0 4px 0 var(--gold-d), 0 10px 22px #e0a10040; }
.rl-btn.is-gold:hover { box-shadow: 0 6px 0 var(--gold-d), 0 14px 28px #e0a10050; }
.rl-btn.is-gold:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-d), 0 6px 14px #e0a10040; }
.rl-btn.is-big { min-height: 54px; padding: 12px 30px; font-size: 18px; font-weight: 800; border-radius: 16px; }
.rl-btn.is-ghost { background: #fff; color: var(--ink); border-color: #d6def0; }
.rl-btn.is-google { background: #fff; color: #222; border-color: #d6def0; }
.rl-btn.is-facebook { background: #1877f2; color: #fff; }
.rl-btn.is-off { background: #eef1f7; color: #7b869d; border-color: #e0e6f1; cursor: not-allowed; }
.rl-btn.is-off:hover { transform: none; }

/* ------------------------------------------------------------------ hero */
.rl-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 420px; padding: 46px 230px 54px;
  border-radius: 28px; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 100%, #ffe9e9, transparent 62%), radial-gradient(ellipse at 50% 120%, #dfe9ff, transparent 70%), #fff;
  box-shadow: 0 1px 2px #0d235012, 0 14px 40px #0d235012;
}
.rl-hero::after { content: "×"; position: absolute; left: 12%; top: 40px; font: 70px Arial; color: #e4eaff; transform: rotate(15deg); z-index: -1; }
.rl-hero::before { content: "√"; position: absolute; right: 16%; top: 28px; font: 54px Arial; color: #e4eaff; transform: rotate(-12deg); z-index: -1; }
.rl-hero-copy { position: relative; z-index: 2; max-width: 620px; }
.rl-eyebrow { color: var(--red); font-size: 13px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; background: #ffeef0; border-radius: 50px; padding: 6px 16px; }
.rl-dot { width: 8px; height: 8px; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 0 #ed202a80; animation: rl-pulse 1.8s infinite; }
@keyframes rl-pulse { 0% { box-shadow: 0 0 0 0 #ed202a70; } 70% { box-shadow: 0 0 0 9px #ed202a00; } 100% { box-shadow: 0 0 0 0 #ed202a00; } }
.rl h1 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; line-height: 1.45; margin: 16px 0 18px; }
.rl h1 em { color: var(--blue); font-style: normal; position: relative; white-space: nowrap; }
.rl h1 em::after { content: ""; position: absolute; bottom: 2px; right: 0; width: 100%; height: 5px; background: var(--red); border-radius: 100%; transform: rotate(-3deg); }
.rl-intro { color: var(--muted); font-size: 16px; line-height: 1.9; margin: 12px auto 22px; max-width: 520px; }
.rl-hero-link { display: inline-block; background: var(--blue); color: #fff !important; padding: 12px 28px; border-radius: 14px; font-size: 16px; font-weight: 600; box-shadow: 0 8px 20px #1249d833; transition: transform .2s, background .2s; }
.rl-hero-link:hover { background: var(--blue-d); transform: translateY(-2px); }
.rl-hero-note { font-size: 12px; color: #7b869d; margin-top: 14px; }
.rl-mascot { position: absolute; bottom: 0; z-index: 1; width: auto; height: 360px; pointer-events: none; animation: rl-float 6s ease-in-out infinite; }
.rl-mascot.is-boy { right: 8px; }
.rl-mascot.is-girl { left: 8px; animation-delay: -3s; }
@keyframes rl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ------------------------------------------------------------------ section heading */
.rl-section-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.rl-overline { font-family: Arial, sans-serif; letter-spacing: 2px; color: var(--red); font-size: 10px; font-weight: 700; }
.rl-section-top h2 { font-size: 28px; font-weight: 800; margin: 4px 0; }
.rl-section-top p { font-size: 14px; color: var(--muted); margin: 0; }
.rl-count { white-space: nowrap; border: 1px solid #dde6f8; border-radius: 30px; padding: 8px 16px; background: #fff; font-size: 13px; }
.rl-count b { color: var(--blue); }
.rl-sessions { scroll-margin-top: 90px; }

/* ------------------------------------------------------------------ session card */
.rl-list { display: grid; gap: 18px; }
.rl-card { position: relative; display: grid; grid-template-columns: 132px 1fr; gap: 0; border: 1px solid #b9ccff; border-radius: var(--r); background: #fff; overflow: hidden; box-shadow: 0 7px 25px #1249d80a; scroll-margin-top: 100px; transition: box-shadow .25s; }
.rl-card:target { box-shadow: 0 0 0 4px #ffd65c, 0 14px 35px #152b501a; }
.rl-card.is-mine { border: 2px solid #7fd0a6; box-shadow: 0 10px 30px #1f7a4d1f; }
.rl-card.is-full { border-color: #dfe5f0; }
.rl-card.is-live { border: 2px solid var(--red); box-shadow: 0 10px 30px #ed202a22; }

/* the date tile (a ticket stub, torn on the inner edge) */
.rl-when { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 18px 8px; color: #fff; text-align: center;
  background: radial-gradient(circle at 70% 15%, #3a6cf0 0, transparent 55%), linear-gradient(160deg, #0d2350, #1239a0 70%, #1249d8); }
.rl-when::after { content: ""; position: absolute; top: 0; bottom: 0; left: -7px; width: 14px; background: radial-gradient(circle at 7px 9px, #fff 5.5px, transparent 6px) 0 0 / 14px 18px repeat-y; }
.rl-card.is-mine .rl-when { background: radial-gradient(circle at 70% 15%, #33a873 0, transparent 55%), linear-gradient(160deg, #0f4129, #1f7a4d); }
.rl-card.is-live .rl-when { background: radial-gradient(circle at 70% 15%, #ff5a62 0, transparent 55%), linear-gradient(160deg, #8a0d14, #ed202a); }
.rl-card.is-full .rl-when { background: linear-gradient(160deg, #47536b, #6d7890); }
.rl-when-day { font-size: 14px; font-weight: 600; color: #ffd65c; }
.rl-when-num { font: 800 46px/1 Changa, Arial, sans-serif; margin: 2px 0; }
.rl-when-month { font-size: 15px; font-weight: 600; opacity: .92; }
.rl-when-time { margin-top: 8px; padding: 3px 12px; border-radius: 30px; background: #ffffff24; border: 1px solid #ffffff3a; font: 800 16px/1.3 Changa, Arial, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .5px; }

.rl-body { display: grid; gap: 10px; align-content: start; padding: 20px 24px 20px; min-width: 0; }
.rl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 30px; font-size: 12px; background: #f2f5fc; border: 1px solid #e1e8f6; color: var(--ink); }
.rl-tag.is-time { background: #edf2ff; border-color: #d7e2ff; color: var(--blue); font-weight: 600; }
.rl-tag.is-soon { background: #fff4cf; border-color: #ffe08a; color: #6b4a00; }
.rl-tag.is-chapter { background: #fff; }
.rl-card.is-live .rl-tag.is-time { background: #ffeef0; border-color: #ffc9cd; color: var(--red); }
.rl-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: rl-pulse 1.4s infinite; }
.rl-body h3 { font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; line-height: 1.45; margin: 0; }
.rl-desc { color: #3d4c66; font-size: 15px; line-height: 1.85; }
.rl-desc > :first-child { margin-top: 0; }
.rl-desc > :last-child { margin-bottom: 0; }
.rl-desc ul, .rl-desc ol { padding-inline-start: 1.3rem; margin: .3rem 0; }

/* seats */
.rl-seats { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rl-meter { flex: 1 1 160px; max-width: 320px; display: block; height: 10px; border-radius: 10px; background: #edf2ff; overflow: hidden; }
.rl-meter i { display: block; height: 100%; min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #ff9f43); transition: width .6s; }
.rl-meter.is-low i { background: linear-gradient(90deg, #ff9f43, var(--red)); }
.rl-meter.is-full i { background: #9aa5bb; }
.rl-seats-txt { font-size: 14px; }
.rl-seats-txt b { color: var(--ink); }
.rl-meter.is-low + .rl-seats-txt b { color: var(--red); }
.rl-seats-txt small { color: var(--muted); }

/* actions */
.rl-actions { display: grid; justify-items: start; gap: 10px; margin-top: 4px; }
.rl-actions form { margin: 0; }
.rl-booked { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 30px; background: var(--ok-bg); border: 1px solid #bfe3cf; color: var(--ok); font-weight: 800; font-size: 14px; }
.rl-note { margin: 0; font-size: 13px; color: var(--muted); }

/* the Meet button (same family as the download button of the gifts) */
.rl-meet { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; min-width: min(380px, 100%); padding: 12px 20px; border-radius: 20px; text-align: right;
  color: #fff !important; background: linear-gradient(135deg, #1249d8, #0d2f99); box-shadow: 0 6px 0 #0a2475, 0 18px 34px #1249d84d; transition: transform .2s, box-shadow .2s; }
.rl-meet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; background: linear-gradient(90deg, transparent, #ffffff55, transparent); transform: skewX(-20deg); animation: rl-shine 3.6s ease-in-out infinite; }
.rl-meet:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #0a2475, 0 22px 40px #1249d860; }
.rl-meet:active { transform: translateY(3px); box-shadow: 0 2px 0 #0a2475, 0 10px 20px #1249d84d; }
.rl-card.is-live .rl-meet { background: linear-gradient(135deg, #ed202a, #b3121a); box-shadow: 0 6px 0 #7d0b11, 0 18px 34px #ed202a4d; }
.rl-meet-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; font-size: 25px; background: linear-gradient(180deg, #ffd65c, var(--gold)); box-shadow: inset 0 -3px 0 #e0a100; flex: none; }
.rl-meet-txt { display: grid; flex: 1; min-width: 0; }
.rl-meet-txt b { font-size: 19px; font-weight: 800; line-height: 1.3; }
.rl-meet-txt small { font-size: 12px; opacity: .8; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-meet-arrow { font-size: 22px; }
@keyframes rl-shine { 0%, 60% { left: -80px; } 100% { left: 110%; } }

.rl-cancel button { padding: 0; border: 0; background: none; color: var(--muted); font: 500 13px Changa, Tahoma, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rl-cancel button:hover { color: var(--red); }

.rl-guest { display: grid; gap: 8px; }
.rl-guest p { margin: 0; font-size: 14px; color: var(--muted); }
.rl-login-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Drive: for everyone */
.rl-drive { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 14px; border-radius: 14px; background: #f3fbf6; border: 1px dashed #9fd6b7; color: #1d5f3e !important; font-weight: 600; font-size: 14px; transition: background .2s; }
.rl-drive:hover { background: #e6f6ec; }
.rl-drive-go { margin-inline-start: auto; }

/* ------------------------------------------------------------------ no session */
.rl-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 36px 20px 32px; border-radius: 26px; border: 1px dashed #c3cfe8; background: #f3f6fd; }
.rl-empty h3 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; color: var(--blue); margin: 10px 0 0; }
.rl-empty p { margin: 0 0 10px; color: var(--muted); font-size: 16px; max-width: 460px; }
.rl-cal { position: relative; width: 120px; height: 118px; margin-top: 8px; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px #0d235022; animation: rl-sway 5s ease-in-out infinite; }
.rl-cal-top { position: absolute; inset: 0 0 auto; height: 34px; border-radius: 18px 18px 0 0; background: linear-gradient(180deg, #ed6570, #d84350); }
.rl-cal-rings { position: absolute; top: -10px; left: 0; right: 0; display: flex; justify-content: center; gap: 44px; z-index: 1; }
.rl-cal-rings i { width: 10px; height: 22px; border-radius: 6px; background: #243b61; }
.rl-cal-q { position: absolute; inset: 34px 0 0; display: grid; place-items: center; font: 800 52px/1 Changa, Arial; color: var(--blue); }
.rl-cal-clock { position: absolute; bottom: -10px; left: -14px; font-size: 34px; filter: drop-shadow(0 4px 6px #0d235030); }
@keyframes rl-sway { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }

/* ------------------------------------------------------------------ past sessions */
.rl-past { border-radius: 26px; border: 1px solid #c9d8ff; background: linear-gradient(180deg, #f3f7ff, #fff 140px); padding: 22px clamp(16px, 3vw, 28px); }
.rl-past h2 { font-size: 22px; font-weight: 800; margin: 0; }
.rl-past > p { margin: 2px 0 14px; color: var(--muted); font-size: 14px; }
.rl-past-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rl-past-list li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid #e1e8f6; }
.rl-past-date { flex: none; min-width: 84px; padding: 3px 10px; border-radius: 30px; background: #edf2ff; color: var(--blue); font-size: 12px; font-weight: 600; text-align: center; }
.rl-past-title { display: grid; flex: 1; min-width: 0; }
.rl-past-title b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-past-title small { color: var(--muted); font-size: 12px; }
.rl-past-go { flex: none; padding: 7px 14px; border-radius: 12px; background: #e9f6ef; color: #1d5f3e !important; font-size: 13px; font-weight: 600; }
.rl-past-go:hover { background: #d8efe2; }

.rl-bottom-note { border: 1px dashed #c9d6ee; border-radius: 18px; padding: 20px; text-align: center; font-size: 15px; color: #526888; background: #edf3ff; }

/* ------------------------------------------------------------------ small screens */
@media (max-width: 1100px) {
  .rl-hero { padding-inline: 180px; }
  .rl-mascot { height: 300px; }
}
@media (max-width: 767px) {
  .rl-hero { min-height: 0; padding: 30px 14px 200px; align-items: flex-start; border-radius: 22px; }
  .rl-mascot { height: 200px; }
  .rl-mascot.is-boy { right: calc(50% - 150px); }
  .rl-mascot.is-girl { left: calc(50% - 150px); }
  .rl h1 { font-size: 34px; margin-top: 12px; }
  .rl-intro { font-size: 14px; }
  .rl-section-top { align-items: flex-end; }
  .rl-section-top h2 { font-size: 24px; }
  .rl-card { grid-template-columns: 1fr; border-radius: 22px; }
  .rl-when { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; padding: 12px 16px; justify-content: flex-start; }
  .rl-when::after { display: none; }
  .rl-when-num { font-size: 30px; margin: 0; }
  .rl-when-time { margin: 0 auto 0 0; }
  .rl-body { padding: 16px; }
  .rl-actions { justify-items: stretch; }
  .rl-actions .rl-btn, .rl-meet { width: 100%; }
  .rl-booked { justify-self: start; }
  .rl-past-list li { flex-wrap: wrap; gap: 8px 12px; }
  .rl-past-title { flex-basis: calc(100% - 110px); }
  .rl-past-go { margin-inline-start: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .rl *, .rl *::before, .rl *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ sessions on invitation (1.1.0) */
.rl-card.is-invite { border: 2px solid #ffd65c; background: linear-gradient(180deg, #fffaf0, #fff 120px); }
.rl-card.is-invite .rl-when { background: radial-gradient(circle at 70% 15%, #ffe28a 0, transparent 55%), linear-gradient(160deg, #6b4a00, #c58a00 70%, #e0a100); }
.rl-card.is-invite.is-mine .rl-when { background: radial-gradient(circle at 70% 15%, #33a873 0, transparent 55%), linear-gradient(160deg, #0f4129, #1f7a4d); }
.rl-tag.is-gold { background: #fff4cf; border-color: #ffe08a; color: #6b4a00; font-weight: 800; }
.rl-invite-note { display: grid; justify-items: start; gap: 10px; padding: 12px 16px; border-radius: 16px; background: #fff8e1; border: 1px dashed #f3cf6a; }
.rl-invite-note p { margin: 0; font-size: 14px; color: #5b4300; }