/* Цвета категорий и темы приходят из config.php (инлайном в ) */ :root{ --bg:#0b0e18; --panel:#ffffff; --ink:#11151f; --muted:#6b7280; --line:#e6e8ee; --field:#f3f4f8; --accent:#1d4fd7; --accent-2:#7c3aed; --selected:#16a34a; --sold:#3f4656; --disabled:#2a3040; --radius:14px; --shadow:0 10px 30px rgba(16,24,40,.10); --header-h:112px; } *{box-sizing:border-box} html,body{margin:0} body{ font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--field); line-height:1.45; -webkit-font-smoothing:antialiased; } a{color:var(--accent);text-decoration:none} button{font-family:inherit;cursor:pointer} .wrap{max-width:1520px;margin:0 auto;padding:0 20px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* HERO / HEADER (jpg background) ------------- */ .hero{ position:relative; color:#fff; background:#0b0e18 center/cover no-repeat; border-bottom:1px solid rgba(255,255,255,.06); } .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,20,.35),rgba(8,10,20,.82))} .hero__in{position:relative;z-index:1;max-width:1520px;margin:0 auto;padding:22px 20px 20px} .hero__brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;opacity:.9;font-size:14px} .hero__brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)} .hero h1{margin:16px 0 8px;font-size:clamp(28px,4.4vw,50px);line-height:1.02;font-weight:800;letter-spacing:-.02em} .hero .tour{color:#c7cbe4;font-weight:600} .hero__desc{max-width:760px;color:#d6d9ea;font-size:16px;margin:6px 0 18px} .hero__meta{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14.5px;color:#e7e9f6} .hero__meta b{color:#fff} .hero__meta .ic{opacity:.8;margin-right:6px} .hero__badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600} /* FILTER BAR ---------- */ .filters{position:relative;z-index:3;background:#fff;border-bottom:1px solid var(--line)} .filters__in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;max-width:1520px;margin:0 auto} .results{font-weight:700;font-size:14px;margin-right:4px} .results span{color:var(--accent)} .select{position:relative} .select select{ appearance:none;-webkit-appearance:none;background:#fff;border:1px solid var(--line); border-radius:999px;padding:9px 34px 9px 14px;font-size:13.5px;font-weight:600;color:var(--ink); } .select::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:2px solid #99a; border-bottom:2px solid #99a;transform:translateY(-70%) rotate(45deg);pointer-events:none} .legend-key{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#444} .legend-key i{width:13px;height:13px;border-radius:4px;display:inline-block} /* полоса легенды: под фильтрами, над картой */ .legend-bar{background:#fbfbfd;border-bottom:1px solid var(--line)} .legend-bar__in{max-width:1520px;margin:0 auto;padding:9px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px} .filters .sort{margin-left:auto;display:flex;background:var(--field);border-radius:999px;padding:3px} .filters .sort button{border:0;background:transparent;border-radius:999px;padding:7px 16px;font-size:13px;font-weight:700;color:#5b6270} .filters .sort button.on{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.12)} /* SPLIT LAYOUT ------------ */ .stage-split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:0;align-items:start} .map-col{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden; background:radial-gradient(120% 120% at 50% 0%,#f7f8fb,#eceef4);border-right:1px solid var(--line)} .tickets-col{background:#fff;min-height:100vh;display:flex;flex-direction:column;min-width:0} /* MAP ---------------------------- */ .map-tools{position:absolute;top:16px;right:16px;z-index:6;display:flex;flex-direction:column;gap:8px} .compass{position:absolute;top:16px;left:16px;z-index:6;width:44px;height:52px;display:flex;flex-direction:column; align-items:center;justify-content:center;background:rgba(255,255,255,.92);border:1px solid var(--line); border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.08);color:#e11d48} .compass svg{width:20px;height:20px;display:block} .compass span{font-size:10px;font-weight:800;color:#3a4152;letter-spacing:.04em;margin-top:1px} .map-tools button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff; font-size:19px;font-weight:700;color:#333;box-shadow:0 2px 8px rgba(0,0,0,.08);display:grid;place-items:center} .map-tools button:hover{background:#f4f6ff} .compass{position:absolute;top:16px;left:16px;z-index:6;width:44px;height:44px;border-radius:50%; background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-weight:800;color:#333;box-shadow:0 2px 8px rgba(0,0,0,.08)} .compass small{font-size:10px;color:var(--accent)} .map-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:5;background:rgba(17,21,31,.86); color:#fff;font-size:12.5px;padding:7px 14px;border-radius:999px;transition:opacity .3s;pointer-events:none;text-align:center;max-width:82%} #mapHost{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab} #mapHost.grabbing{cursor:grabbing} #mapPan{position:absolute;inset:0;transform-origin:0 0;will-change:transform} #stadiumMap{width:100%;height:100%;display:block;user-select:none} /* field / stage ------ */ .pitch{fill:#dfe3ec} .stage{fill:#3a4055} .runway{fill:#c3c8d6} .stage-label{fill:#fff;font-size:120px;font-weight:800;text-anchor:middle;dominant-baseline:middle;letter-spacing:6px} /* sectors - colour by category via data-cat -------- */ .sector{stroke:#fff;stroke-width:9;transition:filter .12s,opacity .12s;cursor:pointer; fill:var(--disabled)} .sector[data-active="false"]{fill:var(--disabled);opacity:.55;cursor:not-allowed} .sector[data-cat="vip"][data-active="true"]{fill:var(--cat-vip)} .sector[data-cat="ga"][data-active="true"]{fill:var(--cat-ga)} .sector[data-cat="lower"][data-active="true"]{fill:var(--cat-lower)} .sector[data-cat="club"][data-active="true"]{fill:var(--cat-club)} .sector[data-cat="upper"][data-active="true"]{fill:var(--cat-upper)} .sector[data-active="true"]:hover{filter:brightness(1.12)} .sector.is-hover{filter:brightness(1.18) saturate(1.1)} .sector.is-open{stroke:#11151f;stroke-width:20} .sector.has-selection{stroke:var(--selected);stroke-width:26} .sector.dim{opacity:.25} /* подсвеченный сектор + приглушение остальных при hover/клике билета */ .polygons.focus .sector{opacity:.22;transition:opacity .12s,filter .12s} .polygons.focus .sector.is-located{opacity:1} .sector.is-located{stroke:var(--accent);stroke-width:34;filter:brightness(1.12) drop-shadow(0 0 26px rgba(29,79,215,.55))} .sec-label{fill:#fff;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none; paint-order:stroke;stroke:rgba(0,0,0,.32);stroke-width:4px} /* tooltip ----- */ .map-tip{position:fixed;z-index:60;background:#11151f;color:#fff;padding:8px 11px;border-radius:9px; font-size:12.5px;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .1s;box-shadow:var(--shadow);max-width:220px} .map-tip.show{opacity:1;transform:none} .map-tip b{display:block;font-size:13.5px;margin-bottom:2px} .map-tip .price{color:#7fe0a3;font-weight:700} /* TICKETS PANEL ---------- */ .tickets-head{position:sticky;top:0;z-index:5;background:#fff;padding:14px 16px 10px;border-bottom:1px solid var(--line)} .tickets-head h2{margin:0;font-size:16px} .tickets-head p{margin:4px 0 0;color:var(--muted);font-size:13px} .ticket-scroll{flex:1;padding:8px 12px 12px} .offer{display:flex;align-items:center;gap:12px;padding:13px 12px;border:1px solid var(--line); border-radius:12px;margin-bottom:9px;background:#fff;transition:box-shadow .12s,border-color .12s,transform .05s} .offer:hover{border-color:#c7d0ee;box-shadow:0 6px 18px rgba(29,79,215,.10)} .offer.is-focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(29,79,215,.14)} .offer .swatch{width:12px;height:44px;border-radius:6px;flex:none} .offer .grow{flex:1;min-width:0} .offer .sec{font-weight:800;font-size:15px} .offer .row{color:var(--muted);font-size:12.5px} .offer .cat-badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;color:#fff;margin-top:4px} .offer .rt{text-align:right;flex:none} .offer .rt .p{font-weight:800;font-size:15px} .offer .rt small{color:var(--muted);font-size:11px} .offer .add{margin-top:6px;border:1px solid var(--accent);color:var(--accent);background:#fff; border-radius:999px;font-size:11.5px;font-weight:700;padding:4px 12px} .offer.picked .add{background:var(--selected);border-color:var(--selected);color:#fff} /* section seat view ------- */ .secview{padding:12px 14px} .secview .back{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff; border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;margin-bottom:12px} .secview h3{margin:2px 0 2px;font-size:17px} .secview .sub{color:var(--muted);font-size:13px;margin-bottom:12px} .seat-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px} .seat-legend{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 0;font-size:12px;color:#4b5162;font-weight:600} .seat-legend span{display:inline-flex;align-items:center;gap:6px} .seat-legend i{width:13px;height:13px;border-radius:50%;display:inline-block} .seat-legend i.dot-sold{background:#c9ccd6} .mini-loc{width:120px;flex:none;border:1px solid var(--line);border-radius:12px;background:#f4f6fb;padding:6px} .mini-loc svg{width:100%;height:auto;display:block} .mini-loc .cap{font-size:10px;color:var(--muted);text-align:center;margin-top:4px;font-weight:700;letter-spacing:.02em} .seatmap{padding:2px 0 6px} .seatrow{display:grid;grid-template-columns:18px repeat(var(--cols,20),1fr);gap:3px;align-items:center;margin-bottom:3px} .seatrow .rl{text-align:center;font-size:10px;color:var(--muted);font-weight:700} .seat{width:100%;max-width:22px;aspect-ratio:1;margin:0 auto;border-radius:50%;border:0;padding:0; background:var(--seat-avail,#2563eb);transition:transform .06s,box-shadow .1s} .seat:hover{transform:scale(1.35);box-shadow:0 0 0 2px rgba(0,0,0,.14);position:relative;z-index:2} .seat.sold{background:#c9ccd6;cursor:not-allowed} .seat.sel{background:var(--selected);box-shadow:0 0 0 2px rgba(22,163,74,.45)} .screen-hint{text-align:center;color:var(--muted);font-size:11px;margin:2px 0 12px;letter-spacing:.14em;text-transform:uppercase} .standing-box{border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center} .stepper{display:inline-flex;align-items:center;gap:14px;margin-top:12px} .stepper button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:20px;font-weight:700} .stepper b{font-size:22px;min-width:26px;text-align:center} /* CART -------- */ .cart{position:sticky;bottom:0;z-index:5;border-top:1px solid var(--line);background:#fff;padding:12px 14px 14px;box-shadow:0 -6px 18px rgba(16,24,40,.06)} .cart__list{max-height:168px;overflow-y:auto;margin-bottom:8px} .cart__empty{color:var(--muted);font-size:13px;padding:10px 2px} .cart__item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px} .cart__item .sw{width:9px;height:28px;border-radius:4px;flex:none} .cart__item .g{flex:1;min-width:0} .cart__item .g b{display:block;font-size:13.5px} .cart__item .g span{color:var(--muted);font-size:12px} .cart__item .pr{font-weight:700} .cart__item .rm{border:0;background:#f1f2f6;border-radius:8px;width:26px;height:26px;color:#8a8f9c;font-size:16px;line-height:1} .cart__item .rm:hover{background:#ffe3e3;color:#d33} .cart__sum{display:flex;justify-content:space-between;align-items:baseline;margin:6px 2px 12px} .cart__sum .t{color:var(--muted);font-size:13px} .cart__sum .v{font-size:24px;font-weight:800} .cart__sum .v small{font-size:13px;color:var(--muted);font-weight:600} .cart__btns{display:flex;gap:10px} .btn{border:0;border-radius:12px;padding:13px 16px;font-size:14.5px;font-weight:800;flex:1} .btn-ghost{background:#fff;border:1px solid var(--line);color:#444;flex:none;padding:13px 16px} .btn-primary{background:var(--accent);color:#fff} .btn-primary:disabled{background:#b9c3e6;cursor:not-allowed} .btn-primary:not(:disabled):hover{filter:brightness(1.06)} /* MODAL ----------- */ .modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:18px} .modal.open{display:flex} .modal__bg{position:absolute;inset:0;background:rgba(11,14,24,.62);backdrop-filter:blur(2px)} .modal__card{position:relative;background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)} .modal__head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)} .modal__head h3{margin:0;font-size:18px} .modal__x{border:0;background:#f1f2f6;width:34px;height:34px;border-radius:10px;font-size:18px;color:#666} .modal__body{padding:18px 20px} .field{margin-bottom:13px} .field label{display:block;font-size:13px;font-weight:700;margin-bottom:5px} .field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:14px;font-family:inherit} .field input:focus,.field textarea:focus{outline:2px solid rgba(29,79,215,.35);border-color:var(--accent)} .field .err{color:#d33;font-size:12px;margin-top:4px;display:none} .field.invalid .err{display:block} .field.invalid input,.field.invalid textarea{border-color:#e88} .order-summary{background:var(--field);border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13.5px} .order-summary .li{display:flex;justify-content:space-between;padding:4px 0} .order-summary .tot{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-weight:800;font-size:16px} /* success ----------- */ .success{text-align:center;padding:30px 22px 26px} .success .tick{width:74px;height:74px;border-radius:50%;background:#e7f8ee;display:grid;place-items:center;margin:0 auto 14px} .success .tick svg{width:40px;height:40px} .success h3{margin:0 0 4px;font-size:22px} .success p{color:var(--muted);margin:2px 0} .success .ordno{display:inline-block;margin:14px 0;background:var(--field);border:1px dashed var(--line); border-radius:12px;padding:12px 20px;font-size:20px;font-weight:800;letter-spacing:.04em} /* footer */ .foot{background:#0b0e18;color:#aeb3c8;padding:26px 20px 18px;font-size:13px} .foot__in{max-width:1520px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between} .foot a{color:#cfd3e6} .foot .soc{display:flex;gap:12px} .foot__copy{max-width:1520px;margin:16px auto 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.08); text-align:center;color:#8a90a6;font-size:12.5px} /* RESPONSIVE ===================== */ @media (max-width:980px){ .stage-split{grid-template-columns:1fr} .map-col{position:sticky;top:0;height:44vh;z-index:20;border-right:0;border-bottom:1px solid var(--line)} .tickets-col{min-height:auto} .tickets-head{top:44vh} .filters .sort{margin-left:0;width:100%;justify-content:center} .results{order:-1;width:100%} .mini-loc{width:96px} /* компактная шапка — чтобы карта была видна сверху */ .hero__in{padding:14px 16px 12px} .hero h1{font-size:22px;margin:6px 0 4px} .hero .tour{font-size:13px} .hero__desc{display:none} .hero__meta{font-size:12px;gap:4px 12px} .hero__meta span:nth-child(2){display:none} } @media (max-width:560px){ .hero__meta{font-size:13px;gap:8px 14px} .map-col{height:40vh} .tickets-head{top:40vh} .btn{padding:12px} }