/* Extracted from includes/components/booking-widget.php (Oct 2026) — was inline on every page; now cached. */
/* ==========================================================================
ULTIMATE 3D LIQUID GLASS BOOKING WIDGET (APPLE VISIONOS OPTICS)
========================================================================== */
.bz3 {
margin-top: -56px;
position: relative;
z-index: 15;
}
/* 3D Liquid Glass Outer Card Container */
.bz3card {
background: rgba(255, 255, 255, 0.32);
backdrop-filter: blur(32px) saturate(210%) contrast(1.05);
-webkit-backdrop-filter: blur(32px) saturate(210%) contrast(1.05);
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 34px;
box-shadow:
0 28px 60px -12px rgba(7, 27, 70, 0.2),
0 10px 20px -5px rgba(0, 0, 0, 0.04),
inset 0 2.5px 3.5px 0 rgba(255, 255, 255, 0.95),
inset 0 -2.5px 4px 0 rgba(255, 255, 255, 0.45),
inset 0 0 22px 4px rgba(112, 71, 248, 0.08);
padding: 26px;
position: relative;
overflow: visible;
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-theme="dark"] .bz3card {
background: rgba(13, 22, 50, 0.45);
border-color: rgba(255, 255, 255, 0.16);
box-shadow:
0 28px 64px rgba(0, 0, 0, 0.68),
inset 0 2px 2.5px rgba(255, 255, 255, 0.35),
inset 0 -2px 3px rgba(0, 0, 0, 0.5),
inset 0 0 22px rgba(112, 71, 248, 0.18);
}
/* Liquid Capsule Segmented Tabs */
.bz3 .tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.bz3 .tabs button {
display: inline-flex;
gap: 9px;
align-items: center;
padding: 12px 22px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
color: #17213B;
font: 700 13.5px var(--f);
cursor: pointer;
box-shadow: inset 0 1.5px 2px #fff, 0 4px 14px rgba(7, 27, 70, 0.04);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-theme="dark"] .bz3 .tabs button {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
color: #E2E8F0;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}
.bz3 .tabs button .ic {
width: 17px;
height: 17px;
color: #6D28D9;
}
html[data-theme="dark"] .bz3 .tabs button .ic { color: #A78BFA; }
.bz3 .tabs button:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.75);
color: #6D28D9;
}
html[data-theme="dark"] .bz3 .tabs button:hover {
background: rgba(255, 255, 255, 0.14);
color: #c7d2fe;
}
.bz3 .tabs button.on {
background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
color: #fff;
border-color: rgba(255, 255, 255, 0.35);
box-shadow:
0 10px 26px rgba(91, 33, 182, 0.45),
inset 0 1.5px 2px rgba(255, 255, 255, 0.65),
inset 0 -2px 3px rgba(0, 0, 0, 0.25);
transform: translateY(-2px);
}
.bz3 .tabs button.on .ic { color: #fff; }
/* Form Inner Panel */
.bz3panel {
background: rgba(255, 255, 255, 0.42);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 26px;
padding: 22px;
box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.9), 0 8px 24px rgba(7, 27, 70, 0.03);
}
html[data-theme="dark"] .bz3panel {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.bz3grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 24px;
}
.pzRow {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 24px;
position: relative;
}
.bz3 .fld label {
font: 800 11px var(--f);
letter-spacing: 1.6px;
text-transform: uppercase;
color: #64748b;
display: block;
margin-bottom: 8px;
}
html[data-theme="dark"] .bz3 .fld label { color: #a5b4fc; }
/* 3D Convex Glass Input Control */
.bz3 .ctl {
position: relative;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, 0.95);
border-radius: 16px;
height: 54px;
box-shadow: inset 0 1.5px 2px #fff, 0 2px 8px rgba(7, 27, 70, 0.04);
transition: all 0.25s ease;
}
html[data-theme="dark"] .bz3 .ctl {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
}
.bz3 .ctl:hover {
border-color: rgba(124, 58, 237, 0.4);
background: rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .bz3 .ctl:hover {
background: rgba(255, 255, 255, 0.12);
}
.bz3 .ctl:focus-within {
border-color: #7C3AED;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.16), inset 0 1.5px 2px #fff;
}
html[data-theme="dark"] .bz3 .ctl:focus-within {
background: rgba(255, 255, 255, 0.14);
}
.bz3 .ctl .lic {
position: absolute;
left: 16px;
width: 19px;
height: 19px;
color: #6D28D9;
pointer-events: none;
}
html[data-theme="dark"] .bz3 .ctl .lic { color: #A78BFA; }
.bz3 .ctl .chev {
position: absolute;
right: 14px;
width: 16px;
height: 16px;
color: #667085;
pointer-events: none;
}
.bz3 .ctl input, .bz3 .ctl select {
width: 100%;
height: 100%;
border: 0;
background: transparent;
padding: 0 40px 0 46px;
font: 600 14.5px var(--f);
color: #17213B;
outline: none;
appearance: none;
-webkit-appearance: none;
}
html[data-theme="dark"] .bz3 .ctl input, html[data-theme="dark"] .bz3 .ctl select { color: #fff; }
.bz3 .ctl input::placeholder { color: #9aa3c7; font-weight: 500; }
/* 3D Liquid Glass Swap Sphere */
.swap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.95);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(14px);
color: #6D28D9;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: inset 0 2px 2.5px #fff, 0 6px 18px rgba(109, 40, 217, 0.25);
z-index: 6;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html[data-theme="dark"] .swap {
background: rgba(255, 255, 255, 0.12);
color: #A78BFA;
border-color: rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.swap .ic { width: 16px; height: 16px; transition: transform 0.3s ease; }
.swap:hover {
transform: translate(-50%, -50%) rotate(180deg) scale(1.08);
box-shadow: 0 8px 24px rgba(91, 33, 182, 0.45);
}
/* Action Buttons Grid */
.bz3btns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 20px;
}
/* Liquid Sheen Search Cabs Button */
.bz3 .search {
height: 56px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
color: #fff;
font: 700 15.5px var(--f);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
box-shadow:
0 10px 26px rgba(91, 33, 182, 0.45),
inset 0 1.5px 2px rgba(255, 255, 255, 0.65),
inset 0 -2px 3px rgba(0, 0, 0, 0.25);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.bz3 .search:hover {
transform: translateY(-2px) scale(1.01);
box-shadow: 0 14px 32px rgba(91, 33, 182, 0.6), inset 0 1.5px 2px rgba(255, 255, 255, 0.85);
}
.bz3 .search .ic { width: 18px; height: 18px; }
/* Liquid Emerald WhatsApp Button */
.bz3 .wabtn {
height: 56px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(34, 197, 94, 0.35);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #16A34A;
font: 700 15.5px var(--f);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 4px 14px rgba(34, 197, 94, 0.12);
transition: all 0.25s ease;
text-decoration: none;
}
html[data-theme="dark"] .bz3 .wabtn {
background: rgba(34, 197, 94, 0.16);
border-color: rgba(34, 197, 94, 0.4);
color: #4ade80;
}
.bz3 .wabtn:hover {
transform: translateY(-2px);
background: rgba(34, 197, 94, 0.22);
box-shadow: 0 8px 22px rgba(34, 197, 94, 0.3);
}
.bz3 .wabtn .ic { width: 20px; height: 20px; }
.bz3 .fareEst {
margin-top: 14px;
padding: 12px 18px;
border-radius: 14px;
background: rgba(124, 58, 237, 0.08);
border: 1px dashed rgba(124, 58, 237, 0.4);
color: var(--muted);
font: 600 13px var(--f);
}
.bz3 .fareEst b { color: #5B21B6; }
html[data-theme="dark"] .bz3 .fareEst b { color: #A78BFA; }
/* 3D Liquid Glass Stats Strip */
.bz3stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 18px;
background: rgba(255, 255, 255, 0.38);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 24px;
padding: 16px 8px;
box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.9), 0 8px 24px rgba(7, 27, 70, 0.04);
}
html[data-theme="dark"] .bz3stats {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.bz3stats .st {
display: flex;
gap: 13px;
align-items: center;
justify-content: center;
padding: 6px 12px;
text-align: left;
}
.bz3stats .st + .st { border-left: 1px solid rgba(7, 27, 70, 0.08); }
html[data-theme="dark"] .bz3stats .st + .st { border-left-color: rgba(255, 255, 255, 0.08); }
.bz3stats .sic {
width: 52px;
height: 52px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
box-shadow: 0 6px 16px rgba(7, 27, 70, 0.1), inset 0 1.5px 2px #fff;
border: 1px solid rgba(255, 255, 255, 0.95);
display: grid;
place-items: center;
color: #6D28D9;
flex: none;
}
html[data-theme="dark"] .bz3stats .sic {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
color: #A78BFA;
}
.bz3stats .sic .ic { width: 22px; height: 22px; }
.bz3stats b { font: 800 19px var(--f); color: #17213B; display: block; }
html[data-theme="dark"] .bz3stats b { color: #fff; }
.bz3stats .lb { font: 700 10px var(--f); letter-spacing: 1.4px; text-transform: uppercase; color: #64748b; display: block; margin: 2px 0; }
.bz3stats .sb { font: 500 12px var(--f); color: #64748b; display: block; }
/* 3D Liquid Glass Trust Strip */
.bz3trust {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 14px;
background: rgba(255, 255, 255, 0.38);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 24px;
padding: 14px 8px;
box-shadow: inset 0 1.5px 2px rgba(255, 255, 255, 0.9), 0 8px 24px rgba(7, 27, 70, 0.04);
}
html[data-theme="dark"] .bz3trust {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.bz3trust .tt2 {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
padding: 4px 12px;
}
.bz3trust .tt2 + .tt2 { border-left: 1px solid rgba(7, 27, 70, 0.08); }
html[data-theme="dark"] .bz3trust .tt2 + .tt2 { border-left-color: rgba(255, 255, 255, 0.08); }
.bz3trust .tic {
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
box-shadow: 0 6px 16px rgba(7, 27, 70, 0.1), inset 0 1.5px 2px #fff;
border: 1px solid rgba(255, 255, 255, 0.95);
display: grid;
place-items: center;
color: #6D28D9;
flex: none;
}
html[data-theme="dark"] .bz3trust .tic {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
color: #A78BFA;
}
.bz3trust .tic .ic { width: 20px; height: 20px; }
.bz3trust b { font: 700 13.5px var(--f); color: #17213B; display: block; }
html[data-theme="dark"] .bz3trust b { color: #fff; }
.bz3trust small { font: 500 11.5px var(--f); color: #64748b; display: block; margin-top: 1px; }
/* Responsive Media Queries */
@media(max-width: 900px) {
.bz3stats, .bz3trust { grid-template-columns: 1fr 1fr; }
.bz3stats .st:nth-child(3), .bz3trust .tt2:nth-child(3) { border-left: 0; }
.bz3stats .st:nth-child(n+3), .bz3trust .tt2:nth-child(n+3) {
border-top: 1px solid rgba(7, 27, 70, 0.08);
margin-top: 8px;
padding-top: 12px;
}
}
@media(max-width: 768px) {
.bz3 { margin-top: -40px; }
.bz3card { padding: 18px; border-radius: 26px; }
.bz3panel { padding: 16px; border-radius: 20px; }
.bz3grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.pzRow { grid-template-columns: 1fr; gap: 12px; }
}
@media(max-width: 620px) {
.bz3grid { grid-template-columns: 1fr; }
.bz3btns { grid-template-columns: 1fr; }
.bz3 .tabs button { padding: 10px 16px; font-size: 13px; }
}