/* Website inquiry forms shown inside another site (playbackmedia.net). The same look as the family site's form, on a
   clear background so it sits on the page around it. */
/* Livvic, the font playbackmedia.net uses (Google Fonts, SIL Open Font License), kept here so nothing loads from elsewhere. */
@font-face { font-family: 'Livvic'; font-style: normal; font-weight: 300; font-display: swap; src: url(/forms/fonts/livvic-300.woff2) format('woff2'); }
@font-face { font-family: 'Livvic'; font-style: normal; font-weight: 400; font-display: swap; src: url(/forms/fonts/livvic-400.woff2) format('woff2'); }
html, body { margin: 0; padding: 0; background: transparent; }
body { font-family: 'Livvic', 'Helvetica Neue', Arial, sans-serif; font-weight: 300; letter-spacing: .03em; color: #222; line-height: 1.4; }
* { box-sizing: border-box; }
.book-form, .bf-thanks { max-width: 760px; margin: 0 auto; padding: 4px 15px 16px; text-align: left; }
.bf-field { margin-bottom: 20px; min-width: 0; }
.bf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.bf-field label { display: block; font-size: 16px; margin-bottom: 8px; }
.bf-field label small { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: #999; margin-left: 4px; }
.book-form input, .book-form textarea, .book-form select { display: block; width: 100%; font: 300 14px 'Livvic', Arial, sans-serif; letter-spacing: .03em; color: #000; background: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 0 7px; height: 34px; transition: border-color .15s, box-shadow .15s; }
.book-form select { padding-right: 28px; }
.book-form textarea { height: 100px; padding: 6px 7px; resize: vertical; }
.book-form input:focus, .book-form textarea:focus, .book-form select:focus { outline: none; border-color: #22c7d8; box-shadow: 0 0 0 3px rgba(34, 199, 216, .18); }
.bf-field.bad input, .bf-field.bad textarea { border-color: #c0392b; }
.bf-error { color: #c0392b; font-size: 13px; margin: 5px 0 0; }
.bf-error:empty { display: none; }
.bf-combo { position: relative; }
.bf-list { position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 5; list-style: none; margin: 0; padding: 4px 0; background: #fff; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .25); max-height: 240px; overflow-y: auto; }
.bf-list li { padding: 8px 12px; font-size: 14px; cursor: pointer; }
.bf-list li[aria-selected=true], .bf-list li:hover { background: #e8f8fa; color: #0b7f8b; }
.bf-other { margin-top: 10px; padding-left: 14px; border-left: 2px solid #22c7d8; }
.bf-other label { font-size: 14px; margin-bottom: 6px; }
.bf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bf-problem { color: #c0392b; font-size: 14px; text-align: center; margin: 0 0 12px; }
.bf-problem:empty { display: none; }
.bf-submit { display: block; margin: 4px auto 0; min-width: 120px; font: 400 14px 'Livvic', Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #22c7d8; border: 1px solid #09aebf; border-radius: 6px; padding: 10px 20px; cursor: pointer; transition: background .15s; }
.bf-submit:hover, .bf-submit:focus-visible { background: #1bb3c3; }
.bf-submit:disabled { opacity: .6; cursor: wait; }
.bf-thanks { text-align: center; padding: 40px 15px; }
.bf-thanks h2 { font-weight: 300; font-size: 28px; margin: 0 0 10px; }
[hidden] { display: none !important; }
/* Phones: 16px text, or iPhone Safari zooms in when a box is tapped. */
@media (pointer: coarse) { .book-form input, .book-form textarea, .book-form select { font-size: 16px; height: 42px; } .book-form textarea { height: 110px; } .bf-list li { padding: 11px 12px; font-size: 16px; } }
@media (max-width: 520px) { .bf-row { grid-template-columns: 1fr; } }
/* Desktop: room between the form and the photo beside it on playbackmedia.net. */
@media (min-width: 600px) { .book-form, .bf-thanks { padding-left: 45px; } }
.bf-package { margin: -4px 0 18px; padding: 10px 14px; border-left: 2px solid #22c7d8; background: #f2fbfc; border-radius: 0 5px 5px 0; }
.bf-package p { margin: 0; font-size: 15px; }
.bf-package-change { margin-left: 6px; padding: 0; font: inherit; font-size: 13px; color: #0b7f8b; background: none; border: 0; text-decoration: underline; cursor: pointer; }