/* Walk-In landing v2 — dark theme, one final version. */ :root { --walkin-bg: #0d0d0d; --walkin-bg-soft: #161616; --walkin-card: #1a1a1a; --walkin-card-border: rgba(255, 255, 255, 0.08); --walkin-text: #fff; --walkin-muted: rgba(255, 255, 255, 0.6); --walkin-accent: #e02022; --walkin-green: #2bf06b; --walkin-yellow: #f0b62b; --walkin-red: #ff4d4f; --walkin-blue: #4da3ff; --walkin-warning: #ff8a3d; --walkin-radius: 16px; } /* Walk-In landing page: hide the base-layout page header (breadcrumbs + empty hero shell). Walk-in renders its own hero inside the content block. JSON-LD breadcrumbs in are kept for SEO — only the visible strip is removed. */ .walkin-landing-body header.section { display: none !important; } .walkin-landing-body main.container, .walkin-landing-body > main { max-width: none; padding-left: 0; padding-right: 0; } .walkin-v2 { background: var(--walkin-bg); color: var(--walkin-text); } .walkin-grid { max-width: 1440px; margin: 0 auto; padding: 0 15px; width: 100%; } .walkin-section-title { margin: 0 0 24px; font-size: clamp(22px, 2.6vw, 32px); font-family: inherit; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; color: var(--walkin-text); } .walkin-section-title--center { text-align: center; } .walkin-v2 section { padding: 54px 0; } /* ---------- HERO ---------- */ .walkin-hero { position: relative; overflow: hidden; min-height: calc(100vh - 80px); min-height: calc(100svh - 80px); display: flex; align-items: center; padding: 64px 0 48px; } .walkin-hero__bg { position: absolute; inset: 0; z-index: 0; } .walkin-hero__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .walkin-hero__bg-tint { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.2) 100%); } .walkin-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; } .walkin-hero__eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--walkin-accent); font-weight: 700; } .walkin-hero__title { margin: 0; font-family: inherit; font-weight: 500; line-height: 0.95; font-size: clamp(40px, 6vw, 88px); letter-spacing: -0.02em; color: var(--walkin-text); } .walkin-hero__title-line { display: block; } .walkin-hero__title-line--accent { color: var(--walkin-accent); } .walkin-hero__subtitle { max-width: 560px; color: rgba(255, 255, 255, 0.85); font-size: 16px; line-height: 1.55; margin: 0; } .walkin-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .walkin-hero__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; max-width: 980px; align-items: stretch; } .walkin-hero__fact { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; width: max-content; max-width: 100%; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); color: #fff; } .walkin-hero__fact > span:last-child { min-width: 0; flex: 0 1 auto; } .walkin-hero__fact-icon { width: 22px; height: 22px; color: rgba(255, 255, 255, .9); flex-shrink: 0; } .walkin-hero__fact-icon svg { width: 100%; height: 100%; } .walkin-hero__fact--open .walkin-hero__fact-icon { color: var(--walkin-green); } .walkin-hero__fact--limited .walkin-hero__fact-icon { color: var(--walkin-yellow); } .walkin-hero__fact--closed .walkin-hero__fact-icon { color: var(--walkin-red); } .walkin-hero__fact-label { display: block; font-size: 11px; line-height: 1.15; color: rgba(255,255,255,.65); text-transform: uppercase; font-weight: 700; } .walkin-hero__fact strong { display: block; font-size: 14px; line-height: 1.25; color: #fff; font-weight: 500; } .walkin-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); } .walkin-chip__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 4px rgba(255,255,255,0.08); } .walkin-chip__dot--open { background: var(--walkin-green); } .walkin-chip__dot--limited { background: var(--walkin-yellow); } .walkin-chip__dot--closed { background: var(--walkin-red); } .walkin-chip__icon { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.9); flex-shrink: 0; } .walkin-chip__body { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .walkin-chip__label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); } .walkin-chip__value { font-size: 14px; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- BUTTONS ---------- */ .walkin-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 500; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .15s ease, opacity .15s ease, background .15s ease; } .walkin-btn:hover { transform: translateY(-1px); } .walkin-btn:active { transform: translateY(0); opacity: .9; } .walkin-btn--primary { background: var(--walkin-accent); color: #fff; } .walkin-btn--primary:hover { background: #ce1c1e; color: #fff; } .walkin-btn--ghost { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.3); } .walkin-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .walkin-btn__icon { width: 18px; height: 18px; flex-shrink: 0; } /* ---------- AVAILABILITY BANNER ---------- */ .walkin-availability { padding-top: 28px; } .walkin-availability__banner { display: grid; grid-template-columns: minmax(280px, 1.1fr) minmax(0, 2fr); gap: 24px; align-items: center; background: var(--walkin-card); border: 1px solid var(--walkin-green); border-radius: var(--walkin-radius); box-shadow: 0 0 24px rgba(43, 240, 107, 0.18), inset 0 0 24px rgba(43, 240, 107, 0.05); padding: 26px 28px; } .walkin-availability__banner--limited { border-color: var(--walkin-yellow); box-shadow: 0 0 24px rgba(240, 182, 43, 0.18), inset 0 0 24px rgba(240, 182, 43, 0.05); } .walkin-availability__banner--closed { border-color: var(--walkin-red); box-shadow: 0 0 24px rgba(255, 77, 79, 0.18), inset 0 0 24px rgba(255, 77, 79, 0.05); } .walkin-availability__banner--cards-only { grid-template-columns: minmax(0, 1fr); } .walkin-availability__main { display: flex; align-items: flex-start; gap: 16px; } .walkin-availability__icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid var(--walkin-green); color: var(--walkin-green); box-shadow: 0 0 16px rgba(43, 240, 107, 0.35); } .walkin-availability__banner--limited .walkin-availability__icon { border-color: var(--walkin-yellow); color: var(--walkin-yellow); box-shadow: 0 0 16px rgba(240, 182, 43, 0.35); } .walkin-availability__banner--closed .walkin-availability__icon { border-color: var(--walkin-red); color: var(--walkin-red); box-shadow: 0 0 16px rgba(255, 77, 79, 0.35); } .walkin-availability__icon svg { width: 26px; height: 26px; } .walkin-availability__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .walkin-availability__label { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--walkin-green); } .walkin-availability__banner--limited .walkin-availability__label { color: var(--walkin-yellow); } .walkin-availability__banner--closed .walkin-availability__label { color: var(--walkin-red); } .walkin-availability__title { margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; line-height: 1.2; text-transform: uppercase; color: var(--walkin-text); } .walkin-availability__subtitle { margin: 0; color: var(--walkin-muted); font-size: 14px; } .walkin-availability__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; color: var(--walkin-muted); font-size: 13px; } .walkin-availability__footnote { margin: 14px 4px 0; font-size: 12px; color: var(--walkin-muted); } /* ---------- CAPACITY ---------- */ .walkin-capacity { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .walkin-capacity__heading { grid-column: 1 / -1; margin-bottom: 12px; font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--walkin-text); } .walkin-capacity__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 8px 16px; border-left: 1px solid var(--walkin-card-border); min-width: 0; } .walkin-capacity__icon { width: 64px; height: 64px; margin-bottom: 2px; opacity: 0.95; } .walkin-capacity__icon--fallback { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; } .walkin-capacity__icon--fallback img { width: 100%; height: 100%; object-fit: contain; } .walkin-capacity__name { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--walkin-muted); font-weight: 500; } .walkin-capacity__status { font-size: 15px; font-weight: 500; color: var(--walkin-green); } .walkin-capacity__card--limited .walkin-capacity__status { color: var(--walkin-yellow); } .walkin-capacity__card--warning .walkin-capacity__status { color: var(--walkin-warning); } .walkin-capacity__card--muted .walkin-capacity__status { color: var(--walkin-blue); } /* When walk-in is closed, "available" cards are forcibly downgraded to muted */ .walkin-capacity__card--forced-muted { opacity: 0.65; } .walkin-capacity__card--forced-muted .walkin-capacity__status { color: var(--walkin-muted); } .walkin-capacity__wait { font-size: 12px; color: var(--walkin-muted); } /* ---------- LOCAL INFO ---------- */ .walkin-local { background: transparent; } .walkin-local__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; background: var(--walkin-card); border: 1px solid var(--walkin-card-border); border-radius: var(--walkin-radius); padding: 18px; } .walkin-local__map { border-radius: 12px; overflow: hidden; min-height: 260px; background: #222; } .walkin-local__map iframe { display: block; min-height: 260px; } .walkin-local__info { padding: 8px 6px; min-width: 0; } .walkin-local__title { margin: 0 0 14px; font-size: 18px; font-weight: 500; text-transform: uppercase; color: var(--walkin-text); line-height: 1.3; } .walkin-local__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .walkin-local__item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.85); } .walkin-local__icon { width: 18px; height: 18px; color: var(--walkin-muted); flex-shrink: 0; } .walkin-local__photo { position: relative; border-radius: 12px; overflow: hidden; min-height: 260px; background: #111; } .walkin-local__photo picture, .walkin-local__photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .walkin-local__route { position: absolute; right: 14px; bottom: 14px; backdrop-filter: blur(4px); background: rgba(0, 0, 0, 0.55); } /* ---------- WORKS GALLERY ---------- */ .walkin-works__slide { border-radius: 10px; overflow: hidden; cursor: zoom-in; } .walkin-works__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; } .walkin-works__header .walkin-section-title { margin-bottom: 0; } .walkin-works__more { color: rgba(255,255,255,.82); font-size: 13px; font-weight: 500; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); white-space: nowrap; flex-shrink: 0; } .walkin-works__more:hover { color: #fff; border-color: var(--walkin-accent); } .walkin-works__slide picture, .walkin-works__slide img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .walkin-works__slider { position: relative; padding: 0; } .walkin-works .splide__arrows { position: static; pointer-events: none; } .walkin-works .splide__arrow { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 48px !important; height: 48px !important; background: rgba(0, 0, 0, 0.65) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; border-radius: 50% !important; opacity: 1 !important; z-index: 20 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: auto !important; backdrop-filter: blur(6px); transition: background 0.2s ease, opacity 0.2s ease; padding: 0 !important; } .walkin-works .splide__arrow--prev { left: 10px !important; right: auto !important; } .walkin-works .splide__arrow--next { right: 10px !important; left: auto !important; } .walkin-works .splide__arrow svg { fill: #fff !important; width: 28px !important; height: 28px !important; transform: none !important; } .walkin-works .splide__arrow:hover:not(:disabled) { background: rgba(0, 0, 0, 0.85) !important; } .walkin-works .splide__arrow:disabled { opacity: 0.35 !important; cursor: not-allowed !important; } @media (max-width: 560px) { .walkin-works .splide__arrow { width: 40px !important; height: 40px !important; } .walkin-works .splide__arrow svg { width: 24px !important; height: 24px !important; } .walkin-works .splide__arrow--prev { left: 6px !important; } .walkin-works .splide__arrow--next { right: 6px !important; } } /* ---------- STEPS ---------- */ .walkin-steps { background: var(--walkin-bg); } .walkin-steps__panel { position: relative; overflow: hidden; border: 1px solid var(--walkin-card-border); border-radius: 14px; background: linear-gradient(90deg, rgba(0, 0, 0, .94), rgba(0, 0, 0, .72), rgba(0, 0, 0, .94)), radial-gradient(circle at 8% 50%, rgba(255,255,255,.10), transparent 28%), radial-gradient(circle at 92% 50%, rgba(255,255,255,.09), transparent 30%), var(--walkin-card); box-shadow: inset 0 0 24px rgba(255, 255, 255, .03); padding: 24px 28px 26px; } .walkin-steps__panel .walkin-section-title { margin-bottom: 18px; } .walkin-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; align-items: stretch; } .walkin-steps__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; height: 100%; position: relative; } .walkin-steps__item:not(:last-child)::after { content: ""; position: absolute; top: 47px; left: calc(50% + 54px); width: calc(100% - 74px); height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); } .walkin-steps__num { font-size: 45px; font-weight: 900; line-height: 1; color: var(--walkin-accent); } .walkin-steps__icon { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, .12); color: var(--walkin-text); margin-top: -2px; } .walkin-steps__icon svg { width: 64px; height: 64px; } .walkin-steps__icon img { display: block; width: 84px; height: 84px; object-fit: contain; } .walkin-steps__body { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; width: 100%; } .walkin-steps__title { font-size: 16px; font-weight: 500; text-transform: uppercase; color: var(--walkin-text); line-height: 1.35; max-width: 220px; } .walkin-steps__text { font-size: 14px; color: var(--walkin-muted); line-height: 1.55; max-width: 320px; margin: 0 auto; } /* ---------- FAQ ---------- */ .walkin-faq__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 20px; align-items: start; } .walkin-faq__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .walkin-faq__col { display: flex; flex-direction: column; gap: 10px; } .walkin-faq__item { background: var(--walkin-card); border: 1px solid var(--walkin-card-border); border-radius: 12px; overflow: hidden; } .walkin-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 15px 18px; font-weight: 500; font-size: 15px; color: var(--walkin-text); } .walkin-faq__item summary::-webkit-details-marker { display: none; } .walkin-faq__toggle { position: relative; width: 16px; height: 16px; flex-shrink: 0; } .walkin-faq__toggle::before, .walkin-faq__toggle::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--walkin-accent); transition: transform .2s ease; } .walkin-faq__toggle::before { width: 16px; height: 2px; } .walkin-faq__toggle::after { width: 2px; height: 16px; } .walkin-faq__item[open] .walkin-faq__toggle::after { transform: rotate(90deg); } .walkin-faq__answer { padding: 0 18px 16px; color: rgba(255, 255, 255, 0.8); font-size: 14px; line-height: 1.6; } .walkin-faq__answer a { color: var(--walkin-accent); } .walkin-faq__cta { background: var(--walkin-card); border: 1px solid var(--walkin-card-border); border-radius: 12px; padding: 24px; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "icon title" "icon text" "button button"; align-content: center; align-items: flex-start; gap: 8px 16px; align-self: start; height: fit-content; } .walkin-faq__cta-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--walkin-accent); border: 2px solid var(--walkin-accent); grid-area: icon; } .walkin-faq__cta-icon svg { width: 20px; height: 20px; } .walkin-faq__cta-title { grid-area: title; font-size: 16px; font-weight: 500; color: var(--walkin-text); text-transform: uppercase; line-height: 1.2; } .walkin-faq__cta-text { grid-area: text; margin: 0; font-size: 14px; font-weight: 700; color: var(--walkin-text); line-height: 1.5; } .walkin-faq__cta .walkin-btn { grid-area: button; margin-top: 8px; width: 100%; justify-content: center; } /* ---------- INFO + ADVANTAGES ---------- */ .walkin-info { background: var(--walkin-bg-soft); } .walkin-info__layout { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(430px, .9fr); gap: 36px; align-items: center; } .walkin-info .walkin-section-title { max-width: none; white-space: nowrap; font-size: clamp(20px, 2.05vw, 30px); } .walkin__text { color: rgba(255, 255, 255, 0.8); font-size: 14px; line-height: 1.3; } .walkin__text a { color: var(--walkin-accent); } .walkin__advantages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .walkin-works--top { padding-top: 24px; padding-bottom: 8px; } .walkin-works--top .walkin-section-title { margin-bottom: 16px; } .walkin__advantage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; } .walkin__advantage-icon { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--walkin-card-border); background: var(--walkin-card); color: var(--walkin-text); } .walkin__advantage-icon svg, .walkin__advantage-icon img { width: 64px; height: 64px; object-fit: contain; } .walkin__advantage-title { font-size: 12px; line-height: 1.2; font-weight: 700; color: rgba(255, 255, 255, 0.85); } /* ---------- CONTACT ---------- */ .walkin-contact { padding-bottom: 72px; } .walkin-contact__card { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 2fr); gap: 24px; align-items: stretch; background: var(--walkin-card); border: 1px solid var(--walkin-card-border); border-radius: var(--walkin-radius); padding: 16px; } .walkin-contact__visual { position: relative; min-height: 230px; border-radius: 12px; overflow: hidden; background: #090909; display: flex; flex-direction: column; } .walkin-contact__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; } .walkin-contact__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.62)); } .walkin-contact__visual-content { position: relative; z-index: 1; flex: 1 1 auto; min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; padding: 28px; } .walkin-contact__title { color: #fff; font-size: clamp(24px, 3vw, 42px); line-height: 1.05; font-weight: 600; text-transform: uppercase; text-align: center; } .walkin-contact__socials .social__actions { justify-content: center; gap: 14px; } .walkin-contact__socials .social__actions a { display: inline-flex; align-items: center; justify-content: center; } .walkin-contact__socials .social__actions_button { width: 34px; height: 34px; } .walkin-contact__form .container { width: 100%; max-width: none; margin: 0 !important; padding: 0 !important; } .walkin-contact__form .form { margin: 0 !important; } .walkin-contact__form .left-block { display: none !important; } .walkin-contact__form .col-md-5 { flex: 0 0 100%; max-width: 100%; margin-left: 0; } /* Two-column form layout: (name, email, politika) | (phone, captcha) | submit full width */ .walkin-contact__form { display: flex; flex-direction: column; } .walkin-contact__form .form { flex: 1; display: flex; flex-direction: column; } .walkin-contact__form form.contactMePlease { display: grid !important; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 58px 58px auto 1fr; column-gap: 18px; row-gap: 14px; align-items: stretch; height: auto !important; } .walkin-contact__form form.contactMePlease > input[type="hidden"], .walkin-contact__form form.contactMePlease > input[hidden] { display: none; } .walkin-contact__form form.contactMePlease > .d-flex { display: none !important; } .walkin-contact__form form.contactMePlease > .form-group { display: flex !important; flex-direction: column; justify-content: center; margin: 0 !important; width: 100%; min-width: 0; } .walkin-contact__form form.contactMePlease > .form-group input.col-12, .walkin-contact__form form.contactMePlease > .form-group label { width: 100%; max-width: 100%; flex: 0 0 auto; } .walkin-contact__form form.contactMePlease > .form-group input[type="text"], .walkin-contact__form form.contactMePlease > .form-group input[type="email"], .walkin-contact__form form.contactMePlease > .form-group input[type="tel"] { min-height: 56px; width: 100%; } .walkin-contact__form form.contactMePlease > .form-group:has(input[type="text"]) { grid-column: 1; grid-row: 1; } .walkin-contact__form form.contactMePlease > .form-group:has(input[type="email"]) { grid-column: 1; grid-row: 2; } .walkin-contact__form form.contactMePlease > .form-group:has(input[type="tel"]) { grid-column: 2; grid-row: 1; } .walkin-contact__form form.contactMePlease > .form-group:has(input[name="politika"]) { grid-column: 1; grid-row: 3; justify-content: flex-start; padding-top: 4px; white-space: nowrap; } .walkin-contact__form form.contactMePlease > .form-group:has(input[name="politika"]) label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .walkin-contact__form form.contactMePlease > .form-group:has(.captcha-container) { grid-column: 2; grid-row: 2; align-self: stretch; justify-content: center; align-items: center; height: 58px; overflow: hidden; } .walkin-contact__form form.contactMePlease > .form-group:has(.captcha-container) .captcha-container { display: flex; justify-content: flex-start; transform-origin: left center; transform: scale(0.85); } .walkin-contact__form form.contactMePlease > .form-group:has(button[type="submit"]) { grid-column: 1 / -1; grid-row: 4; align-self: end; margin-top: 0 !important; } .walkin-contact__form form.contactMePlease > .form-group:has(button[type="submit"]) button { min-height: 54px; width: 100%; border-radius: 8px !important; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 992px) { .walkin-availability__banner { grid-template-columns: minmax(0, 1fr); } .walkin-capacity { border-top: 1px solid var(--walkin-card-border); padding-top: 16px; } .walkin-capacity__card:first-child { border-left: none; } .walkin-local__card { grid-template-columns: minmax(0, 1fr); } .walkin-faq__layout { grid-template-columns: minmax(0, 1fr); } .walkin-faq__columns { grid-template-columns: minmax(0, 1fr); } .walkin-info__layout { grid-template-columns: minmax(0, 1fr); gap: 22px; } .walkin-info .walkin-section-title { white-space: normal; } .walkin__advantages { grid-template-columns: repeat(4, minmax(0, 1fr)); } .walkin-steps__item:not(:last-child)::after { display: none; } } @media (max-width: 768px) { .walkin-grid { padding: 0 16px; } .walkin-v2 section { padding: 42px 0; } .walkin-hero { padding: 44px 0 28px; min-height: 480px; } .walkin-hero__title { font-size: clamp(34px, 9vw, 56px); } .walkin-hero__subtitle { font-size: 15px; } .walkin-availability__banner { padding: 18px; } .walkin-availability__icon { width: 48px; height: 48px; } .walkin-availability__title { font-size: 18px; } .walkin-capacity { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; column-gap: 8px; } .walkin-capacity__card { border-left: none; padding: 8px 4px; } .walkin-steps__panel { padding: 22px 16px; } .walkin-steps__list { grid-template-columns: minmax(0, 1fr); gap: 18px; } .walkin-steps__item { flex-direction: row; text-align: left; align-items: center; gap: 14px; } .walkin-steps__num { font-size: 44px; min-width: 44px; line-height: 1; align-self: center; flex-shrink: 0; } .walkin-steps__icon { width: 52px; height: 52px; flex-shrink: 0; } .walkin-steps__icon svg { width: 24px; height: 24px; } .walkin-steps__title { max-width: none; font-size: 15px; } .walkin-steps__text { max-width: none; text-align: left; } .walkin__advantages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .walkin__advantage-icon { width: 58px; height: 58px; } .walkin__advantage-icon svg, .walkin__advantage-icon img { width: 46px; height: 46px; } .walkin-faq__item summary { padding: 12px 14px; font-size: 14px; } .walkin-faq__answer { padding: 0 14px 14px; font-size: 13px; } .walkin-faq__cta { grid-template-columns: 40px minmax(0, 1fr); padding: 18px; } .walkin-faq__cta-icon { width: 40px; height: 40px; } .walkin-section-title { font-size: 20px; margin-bottom: 16px; } .walkin-local__title { font-size: 16px; } .walkin-hero__ctas { gap: 8px; } .walkin-btn { padding: 11px 16px; font-size: 13px; } .walkin-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: none; width: 100%; } .walkin-hero__fact--hygiene, .walkin-hero__fact--artists { display: none; } .walkin-hero__fact { min-width: 0; width: 100%; flex: initial; align-items: center; align-self: stretch; min-height: 58px; padding: 12px; } .walkin-hero__fact--wide, .walkin-hero__fact--district { grid-column: auto; min-width: 0; } .walkin-hero__fact strong { font-size: 13px; line-height: 1.25; } .walkin-works__header { flex-wrap: wrap; gap: 10px; } .walkin-works__more { white-space: normal; font-size: 12px; flex-shrink: 1; word-break: break-word; max-width: 100%; } .walkin-works__slider { padding: 0; } .walkin-contact__card { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 14px; } .walkin-contact__visual { min-height: 168px; } .walkin-contact__visual-content { padding: 20px; gap: 18px; } .walkin-contact__form { padding: 0 2px; } .walkin-contact__title { font-size: clamp(22px, 7vw, 30px); } .walkin-contact__socials .social__actions { flex-wrap: wrap; gap: 10px; } .walkin-contact__form form.contactMePlease { display: flex !important; flex-direction: column; gap: 12px; grid-template-columns: none; grid-template-rows: none; } .walkin-contact__form form.contactMePlease > .form-group:has(input[type="text"]) { order: 1; } .walkin-contact__form form.contactMePlease > .form-group:has(input[type="email"]) { order: 2; } .walkin-contact__form form.contactMePlease > .form-group:has(input[type="tel"]) { order: 3; } .walkin-contact__form form.contactMePlease > .form-group:has(input[name="politika"]) { order: 4; white-space: normal; } .walkin-contact__form form.contactMePlease > .form-group:has(input[name="politika"]) label { white-space: normal; } .walkin-contact__form form.contactMePlease > .form-group:has(.captcha-container) { order: 5; height: auto; overflow: hidden; } .walkin-contact__form form.contactMePlease > .form-group:has(button[type="submit"]) { order: 6; } .walkin-contact__form form.contactMePlease > .form-group { width: 100%; } .walkin-contact__form form.contactMePlease > .form-group:has(.captcha-container) .captcha-container { overflow: hidden; transform-origin: left center; transform: scale(0.9); width: 111%; } .walkin-contact__visual-content { justify-content: center; align-items: center; } } @media (max-width: 480px) { .walkin-hero__ctas .walkin-btn { flex: 1 1 100%; justify-content: center; } .walkin-availability__meta { font-size: 12px; } .walkin-steps__num { font-size: 36px; min-width: 36px; } .walkin-steps__icon { width: 58px; height: 58px; } .walkin-steps__icon svg, .walkin-steps__icon img { width: 48px; height: 48px; } .walkin-faq__cta { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "title" "text" "button"; } }