:root { --ink: #17223b; --muted: #6f7b91; --primary: #3157d5; --border: #e5eaf2; --surface: #fff; --bg: #f4f6fb; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: Inter, "Segoe UI", Tahoma, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.public-header { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 78px; padding: 12px max(5vw, 24px); border-bottom: 1px solid rgba(229,234,242,.85); background: rgba(255,255,255,.92); box-shadow: 0 8px 28px rgba(31,45,78,.05); backdrop-filter: blur(15px); }
.public-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.public-brand strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.public-brand__logo { display: grid; place-items: center; min-width: 54px; height: 50px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: 0 5px 15px rgba(31,45,78,.08); }
.public-brand__logo img { display: block; width: auto; max-width: 145px; height: auto; max-height: 36px; object-fit: contain; }
.public-brand__mark { display: grid; place-items: center; width: 44px; height: 44px; color: #fff; border-radius: 13px; background: var(--primary); }
.public-nav, .public-languages { display: flex; align-items: center; gap: 16px; }
.public-nav > a { color: #546077; font-size: 13px; font-weight: 700; }
.public-languages { gap: 7px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 11px; background: #f9fafc; }
.public-languages i { margin-inline-end: 3px; color: var(--primary); }
.public-languages a { padding: 4px 7px; color: #7a8598; border-radius: 7px; font-size: 10px; font-weight: 700; }
.public-languages a.active { color: #fff; background: var(--primary); }
.public-hero { position: relative; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 40px; align-items: center; width: min(1180px, calc(100% - 40px)); min-height: 420px; margin: 34px auto 0; padding: 62px 68px; overflow: hidden; color: #fff; border-radius: 30px; background: linear-gradient(130deg,#111a35,#253f91 62%,#496ce0); box-shadow: 0 24px 60px rgba(29,48,112,.22); }
.public-hero::before,.public-hero::after { position: absolute; content: ""; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.public-hero::before { width: 320px; height: 320px; right: -90px; top: -110px; }
.public-hero::after { width: 190px; height: 190px; left: 45%; bottom: -120px; }
.public-hero__content,.public-hero__visual { position: relative; z-index: 1; }
.public-kicker { display: inline-flex; align-items: center; gap: 8px; color: #7790e1; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.public-hero .public-kicker { color: #d4ddff; }
.public-kicker .fa-circle { color: #5de1aa; font-size: 6px; }
.public-hero h1 { max-width: 680px; margin: 17px 0 14px; font-size: clamp(34px,5vw,58px); line-height: 1.07; letter-spacing: -1.8px; }
.public-hero p { max-width: 620px; margin: 0 0 28px; color: #d9e1ff; font-size: 16px; line-height: 1.8; }
.public-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 11px 16px; color: #fff; border-radius: 11px; background: var(--primary); font-size: 12px; font-weight: 800; transition: transform .2s,box-shadow .2s; }
.public-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(49,87,213,.2); }
.public-btn--light { color: #20346f; background: #fff; }
.public-hero__visual { display: grid; place-items: center; min-height: 230px; }
.public-hero__date { display: grid; place-items: center; width: 178px; height: 178px; border: 1px solid rgba(255,255,255,.25); border-radius: 40px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px rgba(255,255,255,.2),0 20px 50px rgba(5,14,45,.2); transform: rotate(5deg); backdrop-filter: blur(8px); }
.public-hero__date span { align-self: end; color: #cbd6ff; font-size: 18px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.public-hero__date strong { align-self: start; font-size: 74px; line-height: 1; }
.public-hero__ticket { position: absolute; right: 0; bottom: 3px; display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-radius: 12px; background: #fff; color: #25345d; box-shadow: 0 15px 35px rgba(5,14,45,.2); font-size: 11px; font-weight: 800; }
.public-hero__ticket i { color: var(--primary); font-size: 17px; }
.events-section { width: min(1180px,calc(100% - 40px)); margin: 72px auto 80px; }
.events-section__heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px; }
.events-section__heading h2 { margin: 7px 0 0; font-size: 31px; letter-spacing: -.7px; }
.events-count { padding: 8px 11px; color: #65718a; border: 1px solid var(--border); border-radius: 9px; background: #fff; font-size: 10px; font-weight: 800; }
.event-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.event-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: 0 10px 34px rgba(31,45,78,.065); transition: transform .25s,box-shadow .25s; }
.event-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(31,45,78,.12); }
.event-card__media { position: relative; display: block; height: 220px; overflow: hidden; background: linear-gradient(135deg,#e9edff,#f8f9ff); }
.event-card__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.event-card:hover .event-card__media > img { transform: scale(1.035); }
.event-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #9aabe2; font-size: 48px; }
.event-card__media::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 45%,rgba(12,22,54,.45)); }
.event-card__status { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 7px 9px; color: #117456; border-radius: 20px; background: #e6f7f0; font-size: 9px; font-weight: 800; }
[dir="rtl"] .event-card__status { right: 14px; left: auto; }
.event-card__status.is-full { color: #9b6724; background: #fff1dc; }
.event-card__recurrence { position: absolute; z-index: 2; top: 51px; left: 14px; padding: 6px 9px; color: #2c4eb8; border-radius: 20px; background: rgba(237,241,255,.94); font-size: 8px; font-weight: 800; }
[dir="rtl"] .event-card__recurrence { right: 14px; left: auto; }
.event-card__logo { position: absolute; z-index: 2; right: 14px; bottom: 13px; display: grid; place-items: center; min-width: 56px; height: 45px; padding: 5px 8px; border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(4,12,39,.18); }
[dir="rtl"] .event-card__logo { right: auto; left: 14px; }
.event-card__logo img { width: auto; max-width: 85px; height: auto; max-height: 32px; }
.event-card__body { display: flex; gap: 14px; padding: 19px 19px 13px; }
.event-card__date { display: flex; flex: 0 0 48px; flex-direction: column; align-items: center; justify-content: center; height: 55px; color: var(--primary); border-radius: 11px; background: #edf1ff; }
.event-card__date span { font-size: 8px; font-weight: 900; letter-spacing: .8px; }
.event-card__date strong { font-size: 21px; }
.event-card__content { min-width: 0; }
.event-card__content h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.event-card__content p { margin: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.event-card__content p i { margin-inline-end: 5px; color: #e06f58; }
.event-countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 0 19px 16px; padding: 10px; border-radius: 12px; background: #f7f8fc; }
.event-countdown > span { display: flex; flex-direction: column; align-items: center; padding: 5px; border-inline-end: 1px solid #e7eaf1; }
.event-countdown > span:last-child { border: 0; }
.event-countdown strong { font-size: 15px; }
.event-countdown small { margin-top: 2px; color: #929bad; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.event-countdown__started { grid-column: 1/-1; padding: 8px; color: #178462; text-align: center; font-size: 10px; }
.event-countdown__started i { margin-inline-end: 5px; font-size: 6px; }
.event-card__footer { display: flex; align-items: center; gap: 10px; padding: 15px 19px 19px; border-top: 1px solid #edf0f5; }
.event-card__footer > div { margin-inline-end: auto; }
.event-card__footer small,.event-card__footer strong { display: block; }
.event-card__footer small { margin-bottom: 3px; color: #929bad; font-size: 7px; text-transform: uppercase; }
.event-card__footer strong { font-size: 12px; }
.event-card__footer .public-btn { min-height: 37px; padding: 9px 11px; font-size: 9px; }
.event-capacity { color: #c47727; font-size: 8px; font-weight: 800; }
.public-empty { padding: 75px 20px; text-align: center; border: 1px dashed #d8deea; border-radius: 20px; background: #fff; }
.public-empty > span { display: grid; place-items: center; width: 65px; height: 65px; margin: 0 auto 15px; color: var(--primary); border-radius: 18px; background: #edf1ff; font-size: 24px; }
.public-empty h3 { margin: 0 0 7px; font-size: 18px; }
.public-empty p { margin: 0; color: var(--muted); font-size: 12px; }
.public-footer { display: flex; justify-content: space-between; padding: 24px max(5vw,24px); color: #8791a5; border-top: 1px solid var(--border); background: #fff; font-size: 10px; }
.public-footer a { color: var(--primary); font-weight: 800; }
.booking-manage { width: min(1050px,calc(100% - 40px)); margin: 44px auto 80px; }
.booking-summary { position: relative; padding: 34px 38px; overflow: hidden; color: #fff; border-radius: 22px; background: linear-gradient(135deg,#141e3c,#3157d5); box-shadow: 0 20px 45px rgba(35,59,133,.18); }
.booking-summary::after { position: absolute; width: 190px; height: 190px; top: -100px; right: -45px; content: ""; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.booking-summary .public-kicker { color: #d5deff; }
.booking-summary h1 { position: relative; z-index: 1; margin: 10px 0 18px; font-size: clamp(25px,4vw,40px); }
.booking-summary__meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; color: #dce4ff; font-size: 12px; }
.booking-summary__meta i { margin-inline-end: 5px; }
.booking-status { padding: 7px 10px; color: #16694f; border-radius: 20px; background: #daf7ea; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.booking-status.is-waitlisted { color: #8b5c1d; background: #fff0d6; }
.booking-status.is-cancelled { color: #a13939; background: #ffe3e3; }
.booking-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 20px; margin-top: 20px; }
.booking-card { padding: 27px; border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: 0 10px 32px rgba(31,45,78,.055); }
.booking-card h2 { margin: 0 0 22px; font-size: 17px; }
.booking-card label { display: grid; gap: 7px; margin-bottom: 15px; color: #68748b; font-size: 10px; font-weight: 800; }
.booking-card input { width: 100%; min-height: 43px; padding: 10px 12px; color: var(--ink); border: 1px solid #dce2ec; border-radius: 10px; background: #fbfcfe; outline: none; }
.booking-card input:focus { border-color: #7892e4; box-shadow: 0 0 0 3px rgba(49,87,213,.09); }
.booking-card button:disabled { cursor: not-allowed; opacity: .5; }
.booking-members { display: grid; gap: 8px; }
.booking-members > div { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 11px; border-radius: 10px; background: #f7f9fc; }
.booking-members span { display: grid; place-items: center; width: 26px; height: 26px; color: #3157d5; border-radius: 8px; background: #e7ecff; font-size: 9px; font-weight: 900; }
.booking-members strong { font-size: 11px; }
.booking-members small { color: var(--muted); font-size: 9px; }
.booking-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.booking-actions button { min-height: 39px; padding: 9px 12px; color: #3157d5; border: 0; border-radius: 9px; background: #edf1ff; font-size: 10px; font-weight: 800; cursor: pointer; }
.booking-actions button.is-danger { color: #ad3f3f; background: #fff0f0; }
.booking-policy { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--border); }
.booking-policy strong { font-size: 11px; }
.booking-policy p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; white-space: pre-line; }
.booking-alert { display: flex; gap: 9px; align-items: center; margin-bottom: 14px; padding: 13px 15px; border-radius: 11px; font-size: 11px; font-weight: 700; }
.booking-alert.is-success { color: #146649; border: 1px solid #bde8d5; background: #e7f8f1; }
.booking-alert.is-error { color: #9e3c3c; border: 1px solid #f0caca; background: #fff0f0; }
@media(max-width:980px){.event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-hero{padding:48px}.public-hero__visual{transform:scale(.88)}}
@media(max-width:700px){.public-header{min-height:68px;padding:9px 14px}.public-brand strong,.public-nav>a{display:none}.public-languages{gap:3px}.public-languages a{padding:4px}.public-hero{grid-template-columns:1fr;width:calc(100% - 24px);min-height:0;margin-top:12px;padding:37px 25px;border-radius:21px}.public-hero__visual{display:none}.public-hero h1{font-size:35px;letter-spacing:-1px}.public-hero p{font-size:13px}.events-section{width:calc(100% - 24px);margin-top:48px}.events-section__heading h2{font-size:24px}.event-grid{grid-template-columns:1fr}.event-card__media{height:210px}.event-card__footer{flex-wrap:wrap}.public-footer{gap:12px;flex-direction:column;text-align:center}.booking-manage{width:calc(100% - 24px);margin-top:22px}.booking-summary{padding:25px 22px}.booking-grid{grid-template-columns:1fr}.booking-card{padding:21px}.booking-members>div{grid-template-columns:30px 1fr}.booking-members small{grid-column:2}.booking-actions{flex-direction:column}.booking-actions form,.booking-actions button{width:100%}}