.smo-canvas-backdrop { position: fixed; inset: 0; z-index: 998; opacity: 0; pointer-events: none; background: rgb(7 37 68 / 70%); transition: opacity .25s; }
.smo-booking-canvas { position: fixed; inset: 0 0 0 auto; z-index: 999; width: min(34rem, 100%); overflow-y: auto; color: #21384a; background: #fff; box-shadow: -1rem 0 3.5rem rgb(7 37 68 / 28%); transform: translateX(105%); transition: transform .28s ease; }
body.smo-canvas-open { overflow: hidden; }
body.smo-canvas-open .smo-canvas-backdrop { opacity: 1; pointer-events: auto; }
body.smo-canvas-open .smo-booking-canvas { transform: translateX(0); }
.smo-canvas-header { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem; color: white; background: linear-gradient(135deg, #072544, #143d59); border-bottom: 4px solid #bc8d3d; }
.smo-canvas-header h2 { margin: 0 0 .25rem; color: white; font-size: 1.65rem; }
.smo-canvas-header p { margin: 0; color: rgb(255 255 255 / 78%); }
.smo-canvas-close { flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; color: white; background: rgb(255 255 255 / 14%); cursor: pointer; font-size: 1.7rem; }
.smo-booking-form { display: grid; gap: 1rem; padding: 1.5rem; }
.smo-field { display: grid; gap: .4rem; }
.smo-field label { color: #143d59; font-size: .9rem; font-weight: 800; }
.smo-field input, .smo-field select, .smo-field textarea { width: 100%; min-height: 3rem; padding: .72rem .8rem; border: 1px solid #d8cbb6; border-radius: .75rem; color: #21384a; background: white; }
.smo-field textarea { min-height: 6.5rem; resize: vertical; }
.smo-field :focus { border-color: #bc8d3d; outline: 3px solid rgb(188 141 61 / 20%); }
.smo-booking-total { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #ddc89f; border-radius: .9rem; background: #f7f1e7; }
.smo-booking-total strong { color: #143d59; font-size: 1.18rem; }
.smo-submit { width: 100%; }
.smo-form-alert { padding: .8rem 1rem; border: 1px solid #e0a2a2; border-radius: .7rem; color: #7c1f1f; background: #fff0f0; }
.smo-fineprint { margin: 0; color: #5d6d78; font-size: .8rem; }
@media (prefers-reduced-motion: reduce) { .smo-booking-canvas, .smo-canvas-backdrop { transition: none; } }