/* Help Centre search autocomplete (rendered on , fixed-positioned to escape the hero's overflow:hidden clip). */ .smyk-hc-ac { position: fixed; z-index: 9999; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; box-shadow: 0 18px 44px -16px rgba(10, 22, 40, 0.35); max-height: 360px; overflow-y: auto; text-align: left; font-family: 'Figtree', 'Circular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .smyk-hc-ac[hidden] { display: none; } .smyk-hc-ac li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px; cursor: pointer; font-size: 14.5px; font-weight: 600; color: #222222; line-height: 1.4; } .smyk-hc-ac li.is-active, .smyk-hc-ac li:hover { background: #fdeef2; } .smyk-hc-ac__name { flex: 1 1 auto; min-width: 0; } .smyk-hc-ac__tag { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #c2410c; background: #fdeef2; border-radius: 999px; padding: 3px 9px; text-transform: uppercase; } .smyk-hc-ac li.is-active .smyk-hc-ac__tag, .smyk-hc-ac li:hover .smyk-hc-ac__tag { background: #ffe6d2; } .smyk-hc-ac__empty { padding: 14px; color: #64748b; font-size: 14px; font-weight: 500; } .smyk-kb { padding-block: var(--smyk-section-py); background: #fff; } .smyk-kb__wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); } .smyk-kb__header { margin-bottom: clamp(24px, 3vw, 40px); } .smyk-kb__heading { font-family: var(--smyk-font, inherit); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: #222222; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 8px; } .smyk-kb__subtitle { font-size: 1rem; color: #475569; margin: 0; } .smyk-kb__list { display: flex; flex-direction: column; gap: 14px; } /* Each row — rounded pill with subtle outline */ .smyk-kb__item { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 18px; overflow: hidden; transition: border-color .2s; } .smyk-kb__item:hover { border-color: #cbd5e1; } /* Trigger row */ .smyk-kb__trigger { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px clamp(20px, 2.4vw, 28px); cursor: pointer; user-select: none; list-style: none; } .smyk-kb__trigger::-webkit-details-marker { display: none; } .smyk-kb__trigger::marker { display: none; content: ''; } .smyk-kb__title { flex: 1; font-family: var(--smyk-font, inherit); font-size: clamp(1rem, 1.4vw, 1.15rem); font-weight: 800; color: #222222; letter-spacing: -0.005em; line-height: 1.3; } /* Chevron rotates 180° when open */ .smyk-kb__chevron { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #222222; transition: transform .25s ease-out; flex-shrink: 0; } .smyk-kb__item[open] .smyk-kb__chevron { transform: rotate(180deg); } /* Body */ .smyk-kb__body { padding: 0 clamp(20px, 2.4vw, 28px) 22px; color: #475569; font-size: 0.95rem; line-height: 1.6; } .smyk-kb__rich p { margin: 0 0 12px; } .smyk-kb__rich p:last-child { margin: 0; } .smyk-kb__rich strong { color: #222222; font-weight: 700; } .smyk-kb__rich a { color: var(--smyk-orange, #e41d56); text-decoration: underline; text-underline-offset: 3px; } .smyk-kb__links { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .smyk-kb__links a { display: inline-flex; font-size: 0.95rem; color: #222222; text-decoration: none; font-weight: 600; transition: color .2s; } .smyk-kb__links a:hover { color: var(--smyk-orange, #e41d56); } /* Sub-topics grid (3 columns desktop) — Hostelworld KB layout */ .smyk-kb__subtopics { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: 6px; } .smyk-kb__subtopic-heading { font-family: var(--smyk-font, inherit); font-size: 1.05rem; font-weight: 800; color: #222222; letter-spacing: -0.005em; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb; } .smyk-kb__subtopic-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .smyk-kb__subtopic-links li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; } .smyk-kb__subtopic-links a { font-size: 0.95rem; color: var(--smyk-orange, #e41d56); text-decoration: none; font-weight: 500; transition: color .2s, text-decoration .2s; } .smyk-kb__subtopic-links a:hover { text-decoration: underline; text-underline-offset: 3px; } .smyk-kb__star { display: inline-flex; align-items: center; justify-content: center; color: var(--smyk-orange, #e41d56); flex-shrink: 0; margin-top: 3px; } .smyk-kb__trigger:focus-visible { outline: 2px solid var(--smyk-orange, #e41d56); outline-offset: -2px; border-radius: 18px; } .smyk-kb__empty { text-align: center; color: #6b7280; padding: 40px 0; } @media (max-width: 900px) { .smyk-kb__subtopics { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 560px) { .smyk-kb__trigger { padding: 16px 18px; gap: 14px; } .smyk-kb__title { font-size: 0.98rem; } .smyk-kb__body { padding: 0 18px 18px; } .smyk-kb__subtopics { grid-template-columns: 1fr; gap: 24px; } }