.qr-tool {
    min-height: 720px;
    padding: 150px 0 90px;
    background: radial-gradient(circle at 10% 10%, rgba(17, 120, 255, .10), transparent 28%), radial-gradient(circle at 90% 12%, rgba(115, 80, 255, .10), transparent 26%), #f6f8fc;
}
.qr-tool__intro { max-width: 700px; margin: 0 auto 32px; }
.qr-tool__eyebrow { display: inline-block; margin-bottom: 10px; color: #1769e0; font-size: .78rem; font-weight: 800; letter-spacing: .18em; }
.qr-tool__intro h1 { margin-bottom: 12px; color: #172033; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
.qr-tool__intro p { color: #667085; font-size: 1.05rem; }
.qr-search-card { position: relative; z-index: 4; max-width: 760px; margin: 0 auto 24px; padding: 24px; border: 1px solid #e4e9f2; border-radius: 20px; background: #fff; box-shadow: 0 18px 45px rgba(27, 39, 70, .09); }
.qr-search-card .form-label { color: #344054; font-weight: 700; }
.qr-search { position: relative; }
.qr-search > .bi-search { position: absolute; top: 50%; left: 18px; z-index: 2; color: #667085; transform: translateY(-50%); }
.qr-search .form-control { min-height: 54px; padding: 12px 48px; border: 1px solid #d6dce8; border-radius: 14px; box-shadow: none; }
.qr-search .form-control:focus { border-color: #5a8ff0; box-shadow: 0 0 0 4px rgba(35, 105, 224, .10); }
.qr-search__spinner { position: absolute; top: calc(50% - .5rem); right: 18px; display: none; color: #1769e0; }
.qr-search.is-loading .qr-search__spinner { display: block; }
.qr-search-card__help { margin: 10px 2px 0; color: #98a2b3; font-size: .84rem; }
.qr-results { position: absolute; top: calc(100% - 18px); right: 24px; left: 24px; max-height: 380px; overflow-y: auto; border: 1px solid #e4e9f2; border-radius: 14px; background: #fff; box-shadow: 0 18px 38px rgba(27, 39, 70, .15); }
.qr-result { display: flex; width: 100%; align-items: center; gap: 12px; padding: 13px 16px; border: 0; border-bottom: 1px solid #eef1f6; background: transparent; color: #27324a; text-align: left; }
.qr-result:last-child { border-bottom: 0; }
.qr-result:hover, .qr-result:focus, .qr-result.is-active { outline: none; background: #f1f6ff; }
.qr-result i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: #eaf2ff; color: #1769e0; }
.qr-result strong, .qr-result small { display: block; }
.qr-result strong { font-size: .94rem; }
.qr-result small { margin-top: 2px; color: #98a2b3; font-size: .74rem; }
.qr-results__empty { margin: 0; padding: 18px; color: #667085; text-align: center; }
.qr-status { min-height: 24px; margin: 0 auto 10px; color: #b42318; text-align: center; }
.qr-selected { max-width: 760px; margin: 0 auto 28px; padding: 14px 18px; align-items: center; justify-content: space-between; border: 1px solid #d9e7ff; border-radius: 14px; background: #eef5ff; }
.qr-selected:not([hidden]) { display: flex; }
.qr-selected span, .qr-selected strong { display: block; }
.qr-selected span { color: #667085; font-size: .76rem; }
.qr-selected strong { color: #1d2939; }
.qr-cards { position: relative; z-index: 1; }
.qr-card { height: 100%; padding: 30px 24px 24px; border: 1px solid #e4e9f2; border-radius: 22px; background: #fff; box-shadow: 0 16px 38px rgba(27, 39, 70, .08); text-align: center; }
.qr-card__icon { display: grid; width: 48px; height: 48px; margin: 0 auto 16px; place-items: center; border-radius: 14px; font-size: 1.35rem; }
.qr-card__icon--website { background: #e9f2ff; color: #1769e0; }
.qr-card__icon--google { background: #fff0ed; color: #e5484d; }
.qr-card__icon--booking { background: #e9f8f1; color: #16865c; }
.qr-card h2 { margin-bottom: 6px; color: #1d2939; font-size: 1.25rem; font-weight: 750; }
.qr-card > p { margin-bottom: 20px; color: #667085; font-size: .9rem; }
.qr-card__code { display: grid; min-height: 244px; margin-bottom: 16px; place-items: center; border: 1px solid #edf0f5; border-radius: 16px; background: #fff; }
.qr-card__code canvas, .qr-card__code img { max-width: 220px; height: auto !important; }
.qr-card__url { display: block; min-height: 42px; margin: 0 0 14px; overflow-wrap: anywhere; color: #667085; font-size: .78rem; line-height: 1.35; }
.qr-card__download { width: 100%; padding: 11px 16px; border: 0; border-radius: 12px; background: #172033; color: #fff; font-weight: 700; }
.qr-card__download:hover, .qr-card__download:focus { background: #1769e0; color: #fff; }
.qr-card.is-unavailable { opacity: .58; }
.qr-card__unavailable { color: #98a2b3; }
@media (max-width: 767.98px) {
    .qr-tool { padding: 120px 0 60px; }
    .qr-search-card { padding: 18px; }
    .qr-results { right: 18px; left: 18px; }
    .qr-selected { gap: 12px; }
}