/* The story page's part of the demo: Table du Sud's configurator in the "See it in 3D" section, and the quote pop-up that
   its Request a quote button opens. Colours, fonts and buttons are the story page's (dist/prototype.css), set again on the
   pop-up because the story scopes them to main.cs-page and main.hm-page, and the pop-up sits outside main. */
.tdsq-frame-wrap { position: relative; margin-top: 24px; border: 1px solid #e3e6ef; border-radius: 16px; overflow: hidden; background: #fff; }
.tdsq-frame { display: block; width: 100%; height: 760px; border: 0; }
.tdsq-note { margin-top: 12px; font-size: 14px; color: #5b6178; }
@media (max-width: 767px) {
    .tdsq-frame { height: 720px; }
}

/* The pop-up */
.tdsq-modal { --b: #2355f0; --bh: #1C40C3; --dark: #10162B; --disp: "geomanist bold", Geomanist, "Open Sans", sans-serif;
    --body: "Open Sans", system-ui, sans-serif;
    position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px;
    background: rgba(16, 22, 43, .55); }
.tdsq-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 8px;
    font: 600 15px/1 var(--body); text-decoration: none; cursor: pointer; }
.tdsq-btn--p { border: 0; background: var(--b); color: #fff; }
.tdsq-btn--p:hover { background: var(--bh); color: #fff; }
.tdsq-btn--s { border: 1px solid #c9cfe0; background: #fff; color: var(--dark); }
.tdsq-btn--s:hover { border-color: var(--b); color: var(--b); }
.tdsq-btn:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; }
.tdsq-modal.is-open { display: flex; }
.tdsq-dialog { position: relative; width: 100%; max-width: 960px; max-height: calc(100dvh - 48px); overflow: auto; border-radius: 20px;
    background: #fff; color: var(--dark, #10162B); font-family: var(--body, "Open Sans", sans-serif); box-shadow: 0 24px 64px rgba(16, 22, 43, .3); }
.tdsq-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: #f1f3f9; color: inherit; font-size: 22px; line-height: 40px; cursor: pointer; }
.tdsq-close:hover { background: #e3e7f3; }
.tdsq-grid { display: grid; grid-template-columns: 1.1fr 1fr; }
.tdsq-visual { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px; background: #f4f6fe; }
.tdsq-visual img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 12px; background: #fff; }
.tdsq-visual .tdsq-pic-wait { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: 12px;
    background: #fff; color: #5b6178; font-size: 14px; }
.tdsq-body { padding: 40px 32px 32px; }
.tdsq-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--b, #2355f0); }
.tdsq-title { margin: 0 0 8px; font-family: var(--disp, Geomanist, sans-serif); font-size: 28px; line-height: 1.15; }
.tdsq-lede { margin: 0 0 20px; color: #4c5370; font-size: 15px; line-height: 1.5; }
.tdsq-lines { margin: 0 0 16px; padding: 0; list-style: none; border-top: 1px solid #e3e6ef; font-size: 14px; }
.tdsq-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid #e3e6ef; }
.tdsq-lines .k { color: #5b6178; }
.tdsq-lines .v { text-align: right; font-weight: 600; }
.tdsq-lines .tdsq-product { display: block; padding-top: 14px; font-weight: 700; border-bottom: 0; }
.tdsq-total { display: flex; justify-content: space-between; margin: 0 0 24px; font-family: var(--disp, Geomanist, sans-serif); font-size: 20px; }
.tdsq-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.tdsq-actions .tdsq-btn { flex: 1 1 200px; justify-content: center; text-align: center; cursor: pointer; }
.tdsq-small { margin: 12px 0 0; font-size: 13px; color: #5b6178; }

/* Email me my design: the form, then what happens behind the scenes */
.tdsq-form { display: grid; gap: 12px; }
.tdsq-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.tdsq-form input[type="text"], .tdsq-form input[type="email"] { padding: 12px 14px; border: 1px solid #cfd5e6; border-radius: 10px;
    font: inherit; font-weight: 400; }
.tdsq-form input:focus-visible { outline: 2px solid var(--b, #2355f0); outline-offset: 1px; }
.tdsq-form .tdsq-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: #4c5370; }
.tdsq-form .tdsq-check input { margin-top: 3px; }
.tdsq-error { margin: 0; color: #c0392b; font-size: 14px; }
.tdsq-back { padding: 0; border: 0; background: none; color: var(--b, #2355f0); font: inherit; font-size: 14px; cursor: pointer; }
.tdsq-done { margin: 0 0 16px; padding: 16px; border-radius: 12px; background: #e9f7ef; color: #14532d; font-size: 15px; }
.tdsq-behind { margin-top: 16px; padding: 16px; border: 1px dashed #9aa6d6; border-radius: 12px; background: #f7f8fd; font-size: 13px; }
.tdsq-behind h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--b, #2355f0); }
.tdsq-behind dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; }
.tdsq-behind dt { color: #5b6178; }
.tdsq-behind dd { margin: 0; font-weight: 600; word-break: break-word; }
.tdsq-behind p { margin: 0; color: #5b6178; }

@media (max-width: 767px) {
    .tdsq-modal { padding: 0; align-items: stretch; }
    .tdsq-dialog { max-height: 100dvh; border-radius: 0; }
    .tdsq-grid { grid-template-columns: 1fr; }
    .tdsq-visual { padding: 56px 16px 16px; }
    .tdsq-body { padding: 24px 16px 32px; }
    .tdsq-title { font-size: 24px; }
}