/* Bokningssajt — all colors flow from the per-film theme variables set in . */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } a { color: var(--accent); } .container { max-width: 960px; margin: 0 auto; padding: 0 20px; } .container.narrow { max-width: 560px; } .center { text-align: center; } .fine { font-size: 0.82rem; opacity: 0.7; } .empty { opacity: 0.7; } .site-header { padding: 14px 20px; border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); } .site-logo { color: var(--text); text-decoration: none; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.02em; } .site-logo span { font-weight: 400; font-size: 0.85rem; opacity: 0.7; margin-left: 8px; letter-spacing: 0.08em; text-transform: uppercase; } .site-footer { padding: 28px 20px; text-align: center; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); font-size: 0.9rem; opacity: 0.85; } .site-footer p { margin: 4px 0; } .page-title { font-size: 2rem; margin: 36px 0 8px; } .page-sub { margin: 0 0 24px; opacity: 0.75; max-width: 60ch; } .section-title { font-size: 1.3rem; margin: 32px 0 12px; } /* ---- Home: film grid ---- */ .film-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; margin-bottom: 48px; } .film-card { display: block; text-decoration: none; background: var(--card-bg, var(--surface)); color: var(--card-text, var(--text)); border-radius: 14px; overflow: hidden; border: 2px solid transparent; transition: transform 0.15s ease, border-color 0.15s ease; } .film-card:hover, .film-card:focus-visible { transform: translateY(-3px); border-color: var(--card-accent, var(--accent)); } .film-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; } .poster-fallback { aspect-ratio: 2/3; display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; padding: 16px; text-align: center; } .film-card-body { padding: 14px 16px 16px; } .film-card-body h2 { margin: 0 0 6px; font-size: 1.1rem; } .film-card-body p { margin: 0; font-size: 0.88rem; opacity: 0.85; } .film-card-count { color: var(--card-accent, var(--accent)); margin-top: 4px !important; opacity: 1 !important; } /* ---- Film page: hero ---- */ .hero { background-size: cover; background-position: center 25%; } .hero-scrim { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 55%, var(--bg) 100%); } .hero-inner { display: flex; gap: 32px; align-items: flex-end; padding-top: 56px; padding-bottom: 36px; } .hero-poster { width: 200px; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); flex-shrink: 0; } .hero-text h1 { font-size: 2.6rem; margin: 0 0 4px; line-height: 1.1; } .hero-original { margin: 0; opacity: 0.7; font-style: italic; } .hero-meta { color: var(--accent); font-weight: 600; margin: 8px 0; } .hero-synopsis { max-width: 56ch; margin: 8px 0 0; } @media (max-width: 640px) { .hero-inner { flex-direction: column; align-items: flex-start; gap: 18px; } .hero-poster { width: 140px; } .hero-text h1 { font-size: 1.9rem; } } /* ---- Screenings ---- */ .day-group h3 { margin: 20px 0 8px; font-size: 1rem; text-transform: capitalize; } .session-row { display: flex; flex-wrap: wrap; gap: 10px; } .session { display: inline-flex; flex-direction: column; align-items: center; padding: 10px 18px; border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.05rem; border: 2px solid color-mix(in srgb, var(--text) 15%, transparent); } .session small { font-weight: 400; font-size: 0.72rem; color: var(--accent); } .session:hover, .session:focus-visible { border-color: var(--accent); } .session.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); } .session.sold-out { opacity: 0.45; border-style: dashed; } .session.sold-out small { color: var(--text); } /* ---- Booking form ---- */ .booking-box { background: var(--surface); border-radius: 16px; padding: 24px; margin: 28px 0 48px; } .booking-box .section-title { margin-top: 0; } .ticket-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent); } .ticket-row label { display: flex; flex-direction: column; } .ticket-name { font-weight: 600; } .ticket-price { font-size: 0.88rem; opacity: 0.8; } .qty-select, .email-row input { font-size: 1rem; padding: 8px 12px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); background: var(--bg); color: var(--text); } .email-row input { min-width: 220px; } .booking-summary { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; gap: 16px; flex-wrap: wrap; } .btn-primary { display: inline-block; background: var(--accent); color: var(--accent-text); border: none; border-radius: 10px; padding: 12px 26px; font-size: 1.05rem; font-weight: 700; cursor: pointer; text-decoration: none; } .btn-primary:hover { filter: brightness(1.08); } .alert { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: 8px; margin: 20px 0; } /* ---- Booking status / ticket ---- */ .spinner { width: 44px; height: 44px; margin: 48px auto 12px; border: 4px solid color-mix(in srgb, var(--text) 20%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .ticket { background: var(--surface); border-radius: 18px; overflow: hidden; margin: 36px 0 48px; } .ticket-head { padding: 26px 26px 18px; } .ticket-cinema { margin: 0 0 4px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .ticket-head h1 { margin: 0 0 6px; font-size: 1.7rem; } .ticket-when { margin: 0; font-size: 1.05rem; } .ticket-venue { margin: 2px 0 0; } .ticket-qty { margin: 2px 0 0; opacity: 0.8; } .ticket-qr { background: #fff; color: #111; text-align: center; padding: 24px; } .ticket-qr svg { width: 190px; height: 190px; } .ticket-qr .fine { color: #666; opacity: 1; margin: 6px 0 2px; } .ticket-code { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.08em; margin: 0; } .wallet-buttons { margin: 14px 0 0; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .btn-wallet { display: inline-block; background: #000; color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-size: 0.9rem; } .ticket-receipt { padding: 20px 26px 26px; } .ticket-receipt table { width: 100%; border-collapse: collapse; } .ticket-receipt td { padding: 4px 0; } .ticket-receipt td:last-child { text-align: right; } .ticket-receipt tr.total td { border-top: 1px solid var(--accent); font-weight: 700; padding-top: 8px; } .ticket-receipt tr.fine-row td { font-size: 0.82rem; opacity: 0.7; }